@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/components/Slider.vue

@@ -0,0 +1,113 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SliderRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/slider'
+
+const appConfig = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
+
+const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })
+
+type SliderVariants = VariantProps<typeof slider>
+
+export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  size?: SliderVariants['size']
+  color?: SliderVariants['color']
+  /**
+   * The orientation of the slider.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: SliderRootProps['orientation']
+  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
+  defaultValue?: number | number[]
+  class?: any
+  ui?: Partial<typeof slider.slots>
+}
+
+export interface SliderEmits {
+  (e: 'update:modelValue', payload: number | number[]): void
+  (e: 'change', payload: Event): void
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  orientation: 'horizontal'
+})
+const emits = defineEmits<SliderEmits>()
+
+const modelValue = defineModel<number | number[]>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
+
+const { id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SliderProps>(props)
+
+const defaultSliderValue = computed(() => {
+  if (typeof props.defaultValue === 'number') {
+    return [props.defaultValue]
+  }
+  return props.defaultValue
+})
+
+const sliderValue = computed({
+  get() {
+    if (typeof modelValue.value === 'number') {
+      return [modelValue.value]
+    }
+    return modelValue.value ?? defaultSliderValue.value
+  },
+  set(value) {
+    modelValue.value = value?.length !== 1 ? value : value[0]
+  }
+})
+
+const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
+
+const ui = computed(() => slider({
+  disabled: disabled.value,
+  size: size.value,
+  color: color.value,
+  orientation: props.orientation
+}))
+
+function onChange(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+}
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="rootProps"
+    :id="id"
+    v-model="sliderValue"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :default-value="defaultSliderValue"
+    @update:model-value="emitFormInput()"
+    @value-commit="onChange"
+  >
+    <SliderTrack :class="ui.track({ class: props.ui?.track })">
+      <SliderRange :class="ui.range({ class: props.ui?.range })" />
+    </SliderTrack>
+
+    <SliderThumb v-for="count in thumbsCount" :key="count" :class="ui.thumb({ class: props.ui?.thumb })" />
+  </SliderRoot>
+</template>

package/dist/runtime/components/Switch.vue

@@ -0,0 +1,124 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SwitchRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/switch'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
+
+const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
+
+type SwitchVariants = VariantProps<typeof switchTv>
+
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  color?: SwitchVariants['color']
+  size?: SwitchVariants['size']
+  /** When `true`, the loading icon will be displayed. */
+  loading?: boolean
+  /**
+   * The icon when the `loading` prop is `true`.
+   * @defaultValue appConfig.ui.icons.loading
+   */
+  loadingIcon?: string
+  /** Display an icon when the switch is checked. */
+  checkedIcon?: string
+  /** Display an icon when the switch is unchecked. */
+  uncheckedIcon?: string
+  label?: string
+  description?: string
+  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */
+  defaultValue?: boolean
+  class?: any
+  ui?: PartialString<typeof switchTv.slots>
+}
+
+export interface SwitchEmits {
+  (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
+}
+
+export interface SwitchSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useFormField } from '../composables/useFormField'
+
+const props = defineProps<SwitchProps>()
+const slots = defineSlots<SwitchSlots>()
+const emits = defineEmits<SwitchEmits>()
+
+const modelValue = defineModel<boolean | undefined>({ default: undefined })
+
+const appConfig = useAppConfig()
+const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
+
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SwitchProps>(props)
+const id = _id.value ?? useId()
+
+const ui = computed(() => switchTv({
+  size: size.value,
+  color: color.value,
+  required: props.required,
+  loading: props.loading,
+  disabled: disabled.value || props.loading
+}))
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <SwitchRoot
+        :id="id"
+        v-model:checked="modelValue"
+        :default-checked="defaultValue"
+        v-bind="rootProps"
+        :name="name"
+        :disabled="disabled || loading"
+        :class="ui.base({ class: props.ui?.base })"
+        @update:checked="onUpdate"
+      >
+        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
+          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
+          <template v-else>
+            <UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
+            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
+          </template>
+        </SwitchThumb>
+      </SwitchRoot>
+    </div>
+    <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </Label>
+      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Tabs.vue

@@ -0,0 +1,114 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { TabsRootProps, TabsRootEmits, TabsContentProps, TabsTriggerProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/tabs'
+import type { AvatarProps } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
+
+const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
+
+export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  slot?: string
+  content?: string
+  /** A unique value for the tab item. Defaults to the index. */
+  value?: string | number
+}
+
+type TabsVariants = VariantProps<typeof tabs>
+
+export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items?: T[]
+  color?: TabsVariants['color']
+  variant?: TabsVariants['variant']
+  size?: TabsVariants['size']
+  /**
+   * The orientation of the tabs.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: TabsRootProps['orientation']
+  /**
+   * The content of the tabs, can be disabled to prevent rendering the content.
+   * @defaultValue true
+   */
+  content?: boolean | Omit<TabsContentProps, 'as' | 'asChild' | 'value'>
+  class?: any
+  ui?: PartialString<typeof tabs.slots>
+}
+
+export interface TabsEmits extends TabsRootEmits<string | number> {}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type TabsSlots<T extends { slot?: string }> = {
+  leading: SlotProps<T>
+  default: SlotProps<T>
+  trailing: SlotProps<T>
+  content: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends TabsItem">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = withDefaults(defineProps<TabsProps<T>>(), {
+  content: true,
+  defaultValue: '0',
+  orientation: 'horizontal'
+})
+const emits = defineEmits<TabsEmits>()
+const slots = defineSlots<TabsSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'activationMode', 'modelValue'), emits)
+const contentProps = toRef(() => defu(props.content || {}, { forceMount: true }) as TabsContentProps)
+
+const ui = computed(() => tabs({
+  color: props.color,
+  variant: props.variant,
+  size: props.size,
+  orientation: props.orientation
+}))
+</script>
+
+<template>
+  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <TabsList :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: props.ui?.trigger })">
+        <slot name="leading" :item="item" :index="index">
+          <UAvatar v-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+          <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        </slot>
+
+        <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+          <slot :item="item" :index="index">{{ item.label }}</slot>
+        </span>
+
+        <slot name="trailing" :item="item" :index="index" />
+      </TabsTrigger>
+    </TabsList>
+
+    <template v-if="!!content">
+      <TabsContent v-for="(item, index) of items" :key="index" v-bind="contentProps" :value="item.value || String(index)" :class="ui.content({ class: props.ui?.content })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
+</template>

package/dist/runtime/components/Textarea.vue

@@ -0,0 +1,189 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/textarea'
+
+const appConfig = _appConfig as AppConfig & { ui: { textarea: Partial<typeof theme> } }
+
+const textarea = tv({ extend: tv(theme), ...(appConfig.ui?.textarea || {}) })
+
+type TextareaVariants = VariantProps<typeof textarea>
+
+export interface TextareaProps {
+  id?: string
+  name?: string
+  /** The placeholder text when the textarea is empty. */
+  placeholder?: string
+  color?: TextareaVariants['color']
+  variant?: TextareaVariants['variant']
+  size?: TextareaVariants['size']
+  required?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  disabled?: boolean
+  class?: any
+  rows?: number
+  maxrows?: number
+  autoresize?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  ui?: Partial<typeof textarea.slots>
+}
+
+export interface TextareaEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface TextareaSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { useFormField } from '../composables/useFormField'
+import { looseToNumber } from '../utils'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  rows: 3,
+  maxrows: 0,
+  autofocusDelay: 0
+})
+defineSlots<TextareaSlots>()
+const emits = defineEmits<TextareaEmits>()
+
+const [modelValue, modelModifiers] = defineModel<string | number>()
+
+const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props)
+
+const ui = computed(() => textarea({
+  color: color.value,
+  variant: props.variant,
+  size: size?.value,
+  highlight: highlight.value
+}))
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+function autoFocus() {
+  if (props.autofocus) {
+    textareaRef.value?.focus()
+  }
+}
+
+// Custom function to handle the v-model properties
+function updateInput(value: string) {
+  if (modelModifiers.trim) {
+    value = value.trim()
+  }
+
+  if (modelModifiers.number) {
+    value = looseToNumber(value)
+  }
+
+  modelValue.value = value
+  emitFormInput()
+}
+
+function onInput(event: Event) {
+  autoResize()
+
+  if (!modelModifiers.lazy) {
+    updateInput((event.target as HTMLInputElement).value)
+  }
+}
+
+function onChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+
+  if (modelModifiers.lazy) {
+    updateInput(value)
+  }
+
+  // Update trimmed textarea so that it has same behavior as native textarea https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
+  if (modelModifiers.trim) {
+    (event.target as HTMLInputElement).value = value.trim()
+  }
+
+  emitFormChange()
+  emits('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+function autoResize() {
+  if (props.autoresize) {
+    if (!textareaRef.value) {
+      return
+    }
+
+    textareaRef.value.rows = props.rows
+    const overflow = textareaRef.value.style.overflow
+    textareaRef.value.style.overflow = 'hidden'
+
+    const styles = window.getComputedStyle(textareaRef.value)
+    const paddingTop = Number.parseInt(styles.paddingTop)
+    const paddingBottom = Number.parseInt(styles.paddingBottom)
+    const padding = paddingTop + paddingBottom
+    const lineHeight = Number.parseInt(styles.lineHeight)
+    const { scrollHeight } = textareaRef.value
+    const newRows = (scrollHeight - padding) / lineHeight
+
+    if (newRows > props.rows) {
+      textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
+    }
+
+    textareaRef.value.style.overflow = overflow
+  }
+}
+
+watch(() => modelValue, () => {
+  nextTick(autoResize)
+})
+
+defineExpose({
+  textareaRef
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoResize()
+  }, 100)
+})
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <textarea
+      :id="id"
+      ref="textareaRef"
+      :value="modelValue"
+      :name="name"
+      :rows="rows"
+      :placeholder="placeholder"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      :required="required"
+      v-bind="$attrs"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+    />
+
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/Toast.vue

@@ -0,0 +1,161 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/toast'
+import type { AvatarProps, ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
+
+const toast = tv({ extend: tv(theme), ...(appConfig.ui?.toast || {}) })
+
+type ToastVariants = VariantProps<typeof toast>
+
+export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'li'
+   */
+  as?: any
+  title?: string
+  description?: string
+  icon?: string
+  avatar?: AvatarProps
+  color?: ToastVariants['color']
+  /**
+   * Display a list of actions:
+   * - under the title and description if multiline
+   * - next to the close button if not multiline
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a close button to dismiss the toast.
+   * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  class?: any
+  ui?: Partial<typeof toast.slots>
+}
+
+export interface ToastEmits extends ToastRootEmits {}
+
+export interface ToastSlots {
+  leading(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  actions(props?: {}): any
+  close(props: { ui: any }): any
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+
+const props = withDefaults(defineProps<ToastProps>(), {
+  close: true
+})
+const emits = defineEmits<ToastEmits>()
+const slots = defineSlots<ToastSlots>()
+
+const appConfig = useAppConfig()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
+
+const multiline = computed(() => !!props.title && !!props.description)
+
+const ui = computed(() => toast({
+  color: props.color
+}))
+
+const el = ref()
+const height = ref(0)
+
+onMounted(() => {
+  if (!el.value) {
+    return
+  }
+
+  setTimeout(() => {
+    height.value = el.value.$el.getBoundingClientRect()?.height
+  }, 0)
+})
+
+defineExpose({
+  height
+})
+</script>
+
+<template>
+  <ToastRoot
+    ref="el"
+    v-slot="{ remaining, duration }"
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.class, props.ui?.root], multiline })"
+    :style="{ '--height': height }"
+  >
+    <slot name="leading">
+      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ToastTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </ToastTitle>
+      <ToastDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </ToastDescription>
+
+      <div v-if="multiline && actions?.length" :class="ui.actions({ class: props.ui?.actions, multiline: true })">
+        <slot name="actions">
+          <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <UButton size="xs" :color="color" v-bind="action" />
+          </ToastAction>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="(!multiline && actions?.length) || close !== null" :class="ui.actions({ class: props.ui?.actions, multiline: false })">
+      <template v-if="!multiline">
+        <slot name="actions">
+          <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <UButton size="xs" :color="color" v-bind="action" />
+          </ToastAction>
+        </slot>
+      </template>
+
+      <ToastClose as-child>
+        <slot name="close" :ui="ui">
+          <UButton
+            v-if="close"
+            :icon="closeIcon || appConfig.ui.icons.close"
+            size="md"
+            color="gray"
+            variant="link"
+            aria-label="Close"
+            v-bind="typeof close === 'object' ? close : undefined"
+            :class="ui.close({ class: props.ui?.close })"
+            @click.stop
+          />
+        </slot>
+      </ToastClose>
+    </div>
+
+    <div v-if="remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
+  </ToastRoot>
+</template>