@yunlefun/vue 0.2.0 → 0.4.0

package/README.md

@@ -38,6 +38,8 @@ export default defineNuxtConfig({
 
 根入口目前提供类型和组件目录信息，组件通过 `components/*.vue` 子路径或 Nuxt 模块使用；没有公开的 `YlfResolver`。
 
+组件子路径提供预生成类型声明，运行时继续使用原始 SFC。现有 15 个 Reka UI 封装的验收范围见[组件验收](../guide/component-acceptance.md)。
+
 更多内容见 [Vue 接入](./index.md)、[子包职责](../guide/packages.md)与[设计体系](../guide/design-system.md)。
 
 ## AI 提示词入口

package/components/YlfAccordion.vue

@@ -9,7 +9,7 @@ interface AccordionItemData {
 }
 
 withDefaults(defineProps<{
-  items: AccordionItemData[]
+  items: readonly AccordionItemData[]
   type?: 'single' | 'multiple'
   collapsible?: boolean
 }>(), {

package/components/YlfAvatar.vue

@@ -10,13 +10,14 @@ withDefaults(defineProps<{
 }>(), {
   size: 'md',
   fallback: '',
+  alt: '',
 })
 </script>
 
 <template>
   <AvatarRoot class="ylf-avatar" :class="`ylf-avatar--${size}`">
     <AvatarImage v-if="src" :src="src" :alt="alt" class="ylf-avatar__img" />
-    <AvatarFallback class="ylf-avatar__fallback" :delay-ms="200">
+    <AvatarFallback class="ylf-avatar__fallback" :delay-ms="200" :role="alt || fallback ? 'img' : undefined" :aria-label="alt || fallback || undefined">
       {{ fallback }}
     </AvatarFallback>
   </AvatarRoot>

package/components/YlfDialog.vue

@@ -13,11 +13,15 @@ import {
 } from 'reka-ui'
 import { computed, useSlots } from 'vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<{
   title?: string
   description?: string
   /** 没有可见标题时供屏幕阅读器使用 */
   accessibleTitle?: string
+  /** Existing container in the same theme boundary. */
+  portalTo?: string | HTMLElement
 }>(), {
   accessibleTitle: '对话框',
 })
@@ -37,9 +41,9 @@ const descriptionProps = computed(() => hasDescription.value
       <slot name="trigger" />
     </DialogTrigger>
 
-    <DialogPortal>
+    <DialogPortal :to="portalTo">
       <DialogOverlay class="ylf-dialog__overlay" />
-      <DialogContent class="ylf-dialog__content" v-bind="descriptionProps">
+      <DialogContent class="ylf-dialog__content" v-bind="{ ...descriptionProps, ...$attrs }">
         <DialogTitle v-if="hasVisibleTitle" class="ylf-dialog__title">
           <slot name="title">
             {{ title }}
@@ -110,6 +114,8 @@ const descriptionProps = computed(() => hasDescription.value
 
 .ylf-dialog__title {
   margin: 0 0 6px;
+  padding-right: 32px;
+  overflow-wrap: anywhere;
   font-family: var(--ylf-font-heading, inherit);
   font-size: 19px;
   font-weight: 700;
@@ -118,6 +124,7 @@ const descriptionProps = computed(() => hasDescription.value
 
 .ylf-dialog__desc {
   margin: 0 0 16px;
+  overflow-wrap: anywhere;
   font-size: 14px;
   line-height: 1.6;
   color: var(--ylf-c-text-2, #475569);
@@ -146,12 +153,26 @@ const descriptionProps = computed(() => hasDescription.value
     color: var(--ylf-c-text, #0f172a);
   }
 
+  &:focus-visible {
+    outline: 2px solid var(--ylf-c-brand, #2563eb);
+    outline-offset: 2px;
+  }
+
   svg {
     width: 18px;
     height: 18px;
   }
 }
 
+@media (pointer: coarse) {
+  .ylf-dialog__close {
+    top: 10px;
+    right: 10px;
+    width: 44px;
+    height: 44px;
+  }
+}
+
 @keyframes ylf-dialog-overlay-in {
   from {
     opacity: 0;

package/components/YlfDropdownMenu.vue

@@ -1,6 +1,15 @@
 <script lang="ts" setup>
 import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger } from 'reka-ui'
 
+defineOptions({ inheritAttrs: false })
+
+defineProps<{
+  items: readonly MenuItem[]
+  portalTo?: string | HTMLElement
+}>()
+
+const emit = defineEmits<{ select: [value: string] }>()
+
 interface MenuItem {
   label?: string
   value?: string
@@ -9,27 +18,23 @@ interface MenuItem {
   separator?: boolean
 }
 
-defineProps<{
-  items: MenuItem[]
-}>()
-
-const emit = defineEmits<{ select: [value: string] }>()
+const open = defineModel<boolean>('open', { default: false })
 </script>
 
 <template>
-  <DropdownMenuRoot>
+  <DropdownMenuRoot v-model:open="open">
     <DropdownMenuTrigger as-child>
       <slot name="trigger" />
     </DropdownMenuTrigger>
-    <DropdownMenuPortal>
-      <DropdownMenuContent class="ylf-menu" :side-offset="6" align="start">
+    <DropdownMenuPortal :to="portalTo">
+      <DropdownMenuContent v-bind="$attrs" class="ylf-menu" :side-offset="6" align="start">
         <template v-for="(it, i) in items" :key="i">
           <DropdownMenuSeparator v-if="it.separator" class="ylf-menu__sep" />
           <DropdownMenuItem
             v-else
             class="ylf-menu__item"
             :disabled="it.disabled"
-            @select="it.value && emit('select', it.value)"
+            @select="it.value !== undefined && emit('select', it.value)"
           >
             {{ it.label }}
           </DropdownMenuItem>
@@ -83,6 +88,12 @@ const emit = defineEmits<{ select: [value: string] }>()
   }
 }
 
+@media (pointer: coarse) {
+  .ylf-menu__item {
+    min-height: 44px;
+  }
+}
+
 @keyframes ylf-pop-in {
   from {
     opacity: 0;

package/components/YlfPopover.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
 
+defineOptions({ inheritAttrs: false })
+
 withDefaults(defineProps<{
   side?: 'top' | 'right' | 'bottom' | 'left'
   align?: 'start' | 'center' | 'end'
+  portalTo?: string | HTMLElement
 }>(), {
   side: 'bottom',
   align: 'center',
@@ -17,8 +20,8 @@ const open = defineModel<boolean>('open', { default: false })
     <PopoverTrigger as-child>
       <slot name="trigger" />
     </PopoverTrigger>
-    <PopoverPortal>
-      <PopoverContent :side="side" :align="align" :side-offset="8" class="ylf-popover">
+    <PopoverPortal :to="portalTo">
+      <PopoverContent v-bind="$attrs" :side="side" :align="align" :side-offset="8" class="ylf-popover">
         <slot />
         <PopoverArrow class="ylf-popover__arrow" :width="12" :height="6" />
       </PopoverContent>

package/components/YlfProgress.vue

@@ -4,7 +4,8 @@ import { ProgressIndicator, ProgressRoot } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
-  value?: number
+  /** null means that progress is unknown. */
+  value?: number | null
   max?: number
   /** 进度条填充：brand 主色或 accent 纯色；aurora 是 accent 的旧别名 */
   variant?: 'brand' | 'accent' | 'aurora'
@@ -16,20 +17,24 @@ const props = withDefaults(defineProps<{
   tone: 'blue',
 })
 
-const percent = computed(() => Math.max(0, Math.min(100, (props.value / props.max) * 100)))
+const safeMax = computed(() => Number.isFinite(props.max) && props.max > 0 ? props.max : 100)
+const safeValue = computed(() => props.value === null || !Number.isFinite(props.value)
+  ? null
+  : Math.max(0, Math.min(safeMax.value, props.value)))
+const percent = computed(() => safeValue.value === null ? null : safeValue.value / safeMax.value * 100)
 </script>
 
 <template>
   <ProgressRoot
-    :model-value="value"
-    :max="max"
+    :model-value="safeValue"
+    :max="safeMax"
     class="ylf-progress"
     :data-ylf-tone="tone"
     :class="`ylf-progress--${variant}`"
   >
     <ProgressIndicator
       class="ylf-progress__indicator"
-      :style="{ transform: `translateX(-${100 - percent}%)` }"
+      :style="{ transform: percent === null ? undefined : `translateX(-${100 - percent}%)` }"
     />
   </ProgressRoot>
 </template>
@@ -52,6 +57,20 @@ const percent = computed(() => Math.max(0, Math.min(100, (props.value / props.ma
   transition: transform 0.4s var(--ylf-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
 }
 
+.ylf-progress[data-state='indeterminate'] .ylf-progress__indicator {
+  width: 40%;
+  animation: ylf-progress-indeterminate 1.4s ease-in-out infinite;
+}
+
+@keyframes ylf-progress-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+
 .ylf-progress--accent .ylf-progress__indicator,
 .ylf-progress--aurora .ylf-progress__indicator {
   background: var(--ylf-accent, var(--ylf-c-brand, #2563eb));
@@ -61,5 +80,10 @@ const percent = computed(() => Math.max(0, Math.min(100, (props.value / props.ma
   .ylf-progress__indicator {
     transition: none;
   }
+
+  .ylf-progress[data-state='indeterminate'] .ylf-progress__indicator {
+    animation: none;
+    transform: translateX(75%);
+  }
 }
 </style>

package/components/YlfRadioGroup.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 // 行为 / 可访问性由 reka-ui 提供（role=radiogroup、方向键 roving focus）；皮肤走 token。
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+import { nextTick } from 'vue'
 
 interface RadioOption {
   label: string
@@ -8,8 +9,8 @@ interface RadioOption {
   disabled?: boolean
 }
 
-withDefaults(defineProps<{
-  options: RadioOption[]
+const props = withDefaults(defineProps<{
+  options: readonly RadioOption[]
   disabled?: boolean
   orientation?: 'vertical' | 'horizontal'
 }>(), {
@@ -18,6 +19,22 @@ withDefaults(defineProps<{
 })
 
 const model = defineModel<string>()
+
+function selectFocusedRadio(event: KeyboardEvent) {
+  if (props.disabled || !event.defaultPrevented || !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+    return
+  const group = event.currentTarget as HTMLElement
+  // Reka 2.10.x defers selection until after focus; a fast keyup can clear its flag.
+  // Let Reka move focus and skip disabled items, then synchronize that choice.
+  nextTick(() => {
+    const focused = document.activeElement
+    if (!(focused instanceof HTMLElement) || !group.contains(focused) || focused.getAttribute('role') !== 'radio')
+      return
+    const option = props.options.find(option => option.value === focused.getAttribute('value'))
+    if (option && !option.disabled && model.value !== option.value)
+      model.value = option.value
+  })
+}
 </script>
 
 <template>
@@ -27,6 +44,7 @@ const model = defineModel<string>()
     :orientation="orientation"
     class="ylf-radio-group"
     :class="`ylf-radio-group--${orientation}`"
+    @keydown="selectFocusedRadio"
   >
     <RadioGroupItem
       v-for="opt in options"

package/components/YlfSegmentedControl.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts" generic="T extends string = string">
+import type { YlfSegmentedOption } from './segmented-control'
+import { ToggleGroupItem, ToggleGroupRoot } from 'reka-ui'
+import YlfTooltip from './YlfTooltip.vue'
+
+const props = withDefaults(defineProps<{
+  options: readonly YlfSegmentedOption<T>[]
+  /** Accessible name of the group, including for icon-only controls. */
+  label: string
+  size?: 'sm' | 'md'
+  iconOnly?: boolean
+  disabled?: boolean
+}>(), {
+  size: 'md',
+  iconOnly: false,
+  disabled: false,
+})
+
+defineSlots<{
+  icon?: (props: { option: YlfSegmentedOption<T>, selected: boolean }) => unknown
+}>()
+const model = defineModel<T>({ required: true })
+function updateValue(value: unknown): void {
+  const option = props.options.find(option => option.value === value)
+  // A view or filter always has one active choice, even when clicked again.
+  if (!props.disabled && option && !option.disabled)
+    model.value = option.value
+}
+</script>
+
+<template>
+  <ToggleGroupRoot
+    class="ylf-segmented"
+    :data-size="size"
+    :data-icon-only="iconOnly || undefined"
+    type="single"
+    orientation="horizontal"
+    :aria-label="label"
+    :disabled="disabled"
+    :model-value="model"
+    @update:model-value="updateValue"
+  >
+    <YlfTooltip v-for="option in options" :key="option.value" :content="option.label" :disabled="!iconOnly || disabled || option.disabled">
+      <ToggleGroupItem
+        class="ylf-segmented__item"
+        :value="option.value"
+        :disabled="option.disabled"
+        :aria-label="option.ariaLabel ?? option.label"
+      >
+        <span v-if="$slots.icon" class="ylf-segmented__icon" aria-hidden="true">
+          <slot name="icon" :option="option" :selected="model === option.value" />
+        </span>
+        <span v-if="!iconOnly || !$slots.icon" class="ylf-segmented__label">{{ option.label }}</span>
+        <span v-if="option.count !== undefined && !iconOnly" class="ylf-segmented__count">{{ option.count }}</span>
+      </ToggleGroupItem>
+    </YlfTooltip>
+  </ToggleGroupRoot>
+</template>
+
+<style>
+.ylf-segmented {
+  --ylf-segmented-item-size: 36px;
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  box-sizing: border-box;
+  max-width: 100%;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--ylf-c-border, #e2e8f0);
+  border-radius: var(--ylf-radius-sm, 10px);
+  background: var(--ylf-c-bg-soft, #f1f5f9);
+  font-family: var(--ylf-font-body, inherit);
+}
+
+.ylf-segmented[data-size='sm'] {
+  --ylf-segmented-item-size: 26px;
+}
+
+.ylf-segmented__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  min-width: var(--ylf-segmented-item-size);
+  height: var(--ylf-segmented-item-size);
+  gap: 6px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: calc(var(--ylf-radius-sm, 10px) - 4px);
+  background: transparent;
+  color: var(--ylf-c-text-2, #475569);
+  font: inherit;
+  font-size: var(--ylf-text-sm, 14px);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background var(--ylf-duration-fast, 160ms),
+    color var(--ylf-duration-fast, 160ms),
+    box-shadow var(--ylf-duration-fast, 160ms);
+}
+
+.ylf-segmented[data-size='sm'] .ylf-segmented__item {
+  padding-inline: 8px;
+  font-size: 12px;
+}
+
+.ylf-segmented[data-icon-only] .ylf-segmented__item {
+  width: calc(var(--ylf-segmented-item-size) + 4px);
+  padding: 0;
+}
+
+.ylf-segmented__item:hover:not([data-disabled], [aria-pressed='true']) {
+  color: var(--ylf-c-text, #0f172a);
+  background: color-mix(in srgb, var(--ylf-c-surface, #fff) 60%, transparent);
+}
+
+.ylf-segmented__item[aria-pressed='true'] {
+  color: var(--ylf-c-brand, #2563eb);
+  background: var(--ylf-c-surface, #fff);
+  border-color: var(--ylf-c-border, #e2e8f0);
+  box-shadow: var(--ylf-shadow-sm);
+}
+
+.ylf-segmented__item:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--ylf-c-brand, #2563eb);
+  outline-offset: 2px;
+}
+
+.ylf-segmented__item[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.ylf-segmented__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.ylf-segmented__icon > :where(svg, i, span) {
+  width: 100%;
+  height: 100%;
+}
+
+.ylf-segmented__count {
+  min-width: 16px;
+  color: var(--ylf-c-text-2, #475569);
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.ylf-segmented__item[aria-pressed='true'] .ylf-segmented__count {
+  color: inherit;
+}
+
+@media (pointer: coarse) {
+  .ylf-segmented .ylf-segmented__item {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-segmented__item {
+    transition: none;
+  }
+}
+</style>

package/components/YlfSelect.vue

@@ -6,12 +6,21 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<{
   /** color 可使用 CSS 色值或公共 token，例如 var(--ylf-accent-blue) */
-  options: { label: string, value: T, disabled?: boolean, color?: string }[]
+  options: readonly { label: string, value: T, disabled?: boolean, color?: string }[]
+  /** Compact workbench or comfortable form density. */
+  size?: 'sm' | 'md'
   placeholder?: string
   disabled?: boolean
+  /** Native form field name and validation. */
+  name?: string
+  required?: boolean
+  /** Existing container in the same theme boundary. */
+  portalTo?: string | HTMLElement
 }>(), {
+  size: 'md',
   placeholder: '请选择',
   disabled: false,
+  required: false,
 })
 
 const model = defineModel<T>()
@@ -19,20 +28,22 @@ const selectedOption = computed(() => props.options.find(option => option.value
 </script>
 
 <template>
-  <SelectRoot v-model="model" :disabled="disabled">
-    <SelectTrigger class="ylf-select__trigger" :aria-label="$attrs.id || $attrs['aria-labelledby'] ? undefined : placeholder" v-bind="$attrs">
+  <SelectRoot v-model="model" :disabled="disabled" :name="name" :required="required">
+    <SelectTrigger class="ylf-select__trigger" :data-size="size" :aria-label="$attrs.id || $attrs['aria-labelledby'] ? undefined : placeholder" v-bind="$attrs">
       <SelectValue :placeholder="placeholder" class="ylf-select__label">
         <span v-if="selectedOption?.color" class="ylf-select__swatch" :style="{ backgroundColor: selectedOption.color }" aria-hidden="true" />
         <span>{{ selectedOption?.label ?? placeholder }}</span>
       </SelectValue>
       <SelectIcon class="ylf-select__icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M6 9l6 6 6-6" />
-        </svg>
+        <slot name="icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </slot>
       </SelectIcon>
     </SelectTrigger>
-    <SelectPortal>
-      <SelectContent class="ylf-select__content" position="popper" :side-offset="6">
+    <SelectPortal :to="portalTo">
+      <SelectContent class="ylf-select__content" :data-size="size" position="popper" :side-offset="6">
         <SelectViewport class="ylf-select__viewport">
           <SelectItem
             v-for="o in options"
@@ -46,9 +57,11 @@ const selectedOption = computed(() => props.options.find(option => option.value
               <span>{{ o.label }}</span>
             </SelectItemText>
             <SelectItemIndicator class="ylf-select__check">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M5 12.5l4.5 4.5L19 7" />
-              </svg>
+              <slot name="indicator">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M5 12.5l4.5 4.5L19 7" />
+                </svg>
+              </slot>
             </SelectItemIndicator>
           </SelectItem>
         </SelectViewport>
@@ -119,7 +132,7 @@ const selectedOption = computed(() => props.options.find(option => option.value
   display: inline-flex;
   color: var(--ylf-c-text-3, #64748b);
 
-  svg {
+  :where(svg, i, span) {
     width: 18px;
     height: 18px;
   }
@@ -174,12 +187,33 @@ const selectedOption = computed(() => props.options.find(option => option.value
   display: inline-flex;
   color: var(--ylf-c-brand, #2563eb);
 
-  svg {
+  :where(svg, i, span) {
     width: 15px;
     height: 15px;
   }
 }
 
+.ylf-select__trigger[data-size='sm'] {
+  min-width: 0;
+  min-height: 34px;
+  padding: 5px 10px;
+  font-size: 12px;
+  border-radius: var(--ylf-radius-sm, 10px);
+}
+
+.ylf-select__content[data-size='sm'] .ylf-select__item {
+  min-height: 30px;
+  padding: 5px 8px;
+  font-size: 12px;
+}
+
+@media (pointer: coarse) {
+  .ylf-select__trigger[data-size='sm'],
+  .ylf-select__content[data-size='sm'] .ylf-select__item {
+    min-height: 44px;
+  }
+}
+
 @keyframes ylf-pop-in {
   from {
     opacity: 0;

package/components/YlfSlider.vue

@@ -6,13 +6,19 @@ withDefaults(defineProps<{
   max?: number
   step?: number
   disabled?: boolean
+  /** Accessible name for a single value or the range as a whole. */
+  label?: string
+  /** Per-thumb accessible names, such as minimum and maximum price. */
+  thumbLabels?: readonly string[]
 }>(), {
   min: 0,
   max: 100,
   step: 1,
   disabled: false,
+  label: '数值',
 })
 
+const emit = defineEmits<{ valueCommit: [value: number[]] }>()
 const model = defineModel<number[]>({ default: () => [50] })
 </script>
 
@@ -24,11 +30,17 @@ const model = defineModel<number[]>({ default: () => [50] })
     :step="step"
     :disabled="disabled"
     class="ylf-slider"
+    @value-commit="emit('valueCommit', $event)"
   >
     <SliderTrack class="ylf-slider__track">
       <SliderRange class="ylf-slider__range" />
     </SliderTrack>
-    <SliderThumb v-for="(_, i) in model" :key="i" class="ylf-slider__thumb" />
+    <SliderThumb
+      v-for="(_, i) in model"
+      :key="i"
+      class="ylf-slider__thumb"
+      :aria-label="thumbLabels?.[i] || (model.length === 1 ? label : `${label} ${i + 1}`)"
+    />
   </SliderRoot>
 </template>
 
@@ -66,7 +78,7 @@ const model = defineModel<number[]>({ default: () => [50] })
     width: 18px;
     height: 18px;
     border-radius: 50%;
-    background: #fff;
+    background: var(--ylf-c-surface, #fff);
     border: 2px solid var(--ylf-c-brand, #2563eb);
     box-shadow: var(--ylf-shadow-sm, 0 2px 8px -2px rgba(15, 23, 42, 0.12));
     cursor: grab;
@@ -86,4 +98,22 @@ const model = defineModel<number[]>({ default: () => [50] })
     }
   }
 }
+
+@media (pointer: coarse) {
+  .ylf-slider {
+    height: 44px;
+  }
+
+  .ylf-slider__thumb::before {
+    position: absolute;
+    inset: -13px;
+    content: '';
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-slider__thumb {
+    transition: none;
+  }
+}
 </style>

package/components/YlfTabs.vue

@@ -8,7 +8,7 @@ interface TabItem {
 }
 
 withDefaults(defineProps<{
-  items: TabItem[]
+  items: readonly TabItem[]
   orientation?: 'horizontal' | 'vertical'
 }>(), {
   orientation: 'horizontal',