<script setup lang="ts">
// ---------------------------------------------------------------------
// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
// Please do not edit this file directly!
// It will get recreated when running pnpm build.
// ---------------------------------------------------------------------

/**
 * @summary Spinners are used to show the progress of an indeterminate operation.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
 * @status stable
 * @since 1.22.0
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty --track-width - The width of the track.
 * @cssproperty --indicator-color - The color of the spinner's indicator.
 * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
 */
import { computed, ref } from 'vue';
import '@synergy-design-system/components/components/spinner/spinner.js';

import type SynSpinner from '@synergy-design-system/components/components/spinner/spinner.component.js';

// DOM Reference to the element
const nativeElement = ref<SynSpinner>();

defineExpose({
  nativeElement,
});
</script>

<template>
  <syn-spinner ref="nativeElement"> </syn-spinner>
</template>
