@nuxt/ui 4.10.0 → 4.11.0

package/dist/runtime/components/ProgressGroup.d.vue.ts

@@ -0,0 +1,91 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/progress-group';
+import type { IconProps } from './Icon.vue';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type ProgressGroup = ComponentConfig<typeof theme, AppConfig, 'progressGroup'>;
+export interface ProgressGroupItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /** The part of `max` this segment takes up. */
+    value?: number;
+    /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
+     * @defaultValue 'primary'
+     */
+    color?: ProgressGroup['variants']['color'] | (string & {});
+    slot?: string;
+    class?: any;
+    ui?: Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>;
+    [key: string]: any;
+}
+export interface ProgressGroupProps<T extends ProgressGroupItem = ProgressGroupItem> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items?: T[];
+    /**
+     * The value all items add up to, used to compute each segment's share of the track.
+     * @defaultValue 100
+     */
+    max?: number;
+    /** Display the summed progress value. */
+    status?: boolean;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: ProgressGroup['variants']['size'];
+    /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
+     * @defaultValue 'primary'
+     */
+    color?: ProgressGroup['variants']['color'] | (string & {});
+    /**
+     * The orientation of the progress bar.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: ProgressGroup['variants']['orientation'];
+    class?: any;
+    ui?: ProgressGroup['slots'];
+}
+type SlotProps<T extends ProgressGroupItem> = (props: {
+    item: T;
+    index: number;
+    percent: number;
+}) => VNode[];
+export type ProgressGroupSlots<T extends ProgressGroupItem = ProgressGroupItem> = {
+    'status'?: (props: {
+        percent: number;
+    }) => VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: SlotProps<T>;
+    'item-trailing'?: SlotProps<T>;
+} & DynamicSlots<T, 'leading' | 'label' | 'trailing', {
+    index: number;
+    percent: number;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ProgressGroupItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ProgressGroupProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ProgressGroupSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/ProgressGroup.vue

@@ -0,0 +1,99 @@
+<script>
+import theme from "#build/ui/progress-group";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, ProgressRoot, ProgressIndicator } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentProps } from "../composables/useComponentProps";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+const _props = defineProps({
+  as: { type: null, required: false },
+  items: { type: Array, required: false },
+  max: { type: Number, required: false, default: 100 },
+  status: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const props = useComponentProps("progressGroup", _props);
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.progressGroup || {} })({
+  size: props.size,
+  color: props.color,
+  orientation: props.orientation
+}));
+const max = computed(() => {
+  const value = Number(props.max);
+  return Number.isFinite(value) && value > 0 ? value : 100;
+});
+const values = computed(() => (props.items ?? []).map((item) => Math.min(Math.max(Number(item.value) || 0, 0), max.value)));
+const percents = computed(() => values.value.map((value) => value / max.value * 100));
+const percent = computed(() => Math.min(100, Math.round(percents.value.reduce((total, value) => total + value, 0))));
+const statusStyle = computed(() => ({ "--percent": `${percent.value}%` }));
+const themeColors = computed(() => Object.keys({ ...theme.variants?.color, ...appConfig.ui?.progressGroup?.variants?.color }));
+const itemColors = computed(() => (props.items ?? []).map((item) => item.color || props.color));
+const customColors = computed(() => itemColors.value.map((color) => color && !themeColors.value.includes(color) ? color : void 0));
+const hasList = computed(() => !!props.items?.length && (props.items.some((item) => item.label || item.icon || item.slot) || !!slots.item || !!slots["item-leading"] || !!slots["item-label"] || !!slots["item-trailing"]));
+function segmentStyle(index) {
+  const value = `${percents.value[index] ?? 0}%`;
+  return props.orientation === "vertical" ? { height: value } : { width: value };
+}
+const valueLabels = computed(() => (props.items ?? []).map((item) => {
+  const label = item.label;
+  return label ? () => label : void 0;
+}));
+</script>
+
+<template>
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="props.status || !!slots.status" data-slot="status" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
+      <slot name="status" :percent="percent">
+        {{ percent }}%
+      </slot>
+    </div>
+
+    <div data-slot="base" :class="ui.base({ class: props.ui?.base })">
+      <ProgressRoot
+        v-for="(item, index) in props.items"
+        :key="index"
+        :model-value="values[index]"
+        :max="max"
+        :get-value-label="valueLabels[index]"
+        data-slot="segment"
+        :class="ui.segment({ class: [props.ui?.segment, item.ui?.segment] })"
+        :style="segmentStyle(index)"
+      >
+        <ProgressIndicator data-slot="indicator" :class="ui.indicator({ color: itemColors[index], class: [props.ui?.indicator, item.ui?.indicator] })" :style="customColors[index] ? { backgroundColor: customColors[index] } : void 0" />
+      </ProgressRoot>
+    </div>
+
+    <ul v-if="hasList" data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(item, index) in props.items" :key="index" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
+        <slot :name="item.slot || 'item'" :item="item" :index="index" :percent="percents[index] ?? 0">
+          <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :index="index" :percent="percents[index] ?? 0">
+            <UIcon v-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ color: itemColors[index], class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" :style="customColors[index] ? { color: customColors[index] } : void 0" />
+            <span v-else data-slot="itemLeadingDot" :class="ui.itemLeadingDot({ color: itemColors[index], class: [props.ui?.itemLeadingDot, item.ui?.itemLeadingDot] })" :style="customColors[index] ? { backgroundColor: customColors[index] } : void 0" />
+          </slot>
+
+          <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel] })">
+            <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :index="index" :percent="percents[index] ?? 0">
+              {{ item.label }}
+            </slot>
+          </span>
+
+          <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
+            <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :index="index" :percent="percents[index] ?? 0">
+              {{ Math.round(percents[index] ?? 0) }}%
+            </slot>
+          </span>
+        </slot>
+      </li>
+    </ul>
+  </Primitive>
+</template>

package/dist/runtime/components/ProgressGroup.vue.d.ts

@@ -0,0 +1,91 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/progress-group';
+import type { IconProps } from './Icon.vue';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type ProgressGroup = ComponentConfig<typeof theme, AppConfig, 'progressGroup'>;
+export interface ProgressGroupItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /** The part of `max` this segment takes up. */
+    value?: number;
+    /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
+     * @defaultValue 'primary'
+     */
+    color?: ProgressGroup['variants']['color'] | (string & {});
+    slot?: string;
+    class?: any;
+    ui?: Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>;
+    [key: string]: any;
+}
+export interface ProgressGroupProps<T extends ProgressGroupItem = ProgressGroupItem> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items?: T[];
+    /**
+     * The value all items add up to, used to compute each segment's share of the track.
+     * @defaultValue 100
+     */
+    max?: number;
+    /** Display the summed progress value. */
+    status?: boolean;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: ProgressGroup['variants']['size'];
+    /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
+     * @defaultValue 'primary'
+     */
+    color?: ProgressGroup['variants']['color'] | (string & {});
+    /**
+     * The orientation of the progress bar.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: ProgressGroup['variants']['orientation'];
+    class?: any;
+    ui?: ProgressGroup['slots'];
+}
+type SlotProps<T extends ProgressGroupItem> = (props: {
+    item: T;
+    index: number;
+    percent: number;
+}) => VNode[];
+export type ProgressGroupSlots<T extends ProgressGroupItem = ProgressGroupItem> = {
+    'status'?: (props: {
+        percent: number;
+    }) => VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: SlotProps<T>;
+    'item-trailing'?: SlotProps<T>;
+} & DynamicSlots<T, 'leading' | 'label' | 'trailing', {
+    index: number;
+    percent: number;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ProgressGroupItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ProgressGroupProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ProgressGroupSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/RadioGroup.d.vue.ts

@@ -2,6 +2,7 @@ import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/radio-group';
+import type { IconProps } from './Icon.vue';
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type RadioGroup = ComponentConfig<typeof theme, AppConfig, 'radioGroup'>;
@@ -11,8 +12,13 @@ export type RadioGroupItem = RadioGroupValue | {
     description?: string;
     disabled?: boolean;
     value?: RadioGroupValue;
+    /**
+     * The icon displayed above the label when `indicator` is `hidden`.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>;
+    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>;
     [key: string]: any;
 };
 export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<RadioGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'> {

package/dist/runtime/components/RadioGroup.vue

@@ -12,6 +12,7 @@ import { useForwardProps } from "../composables/useForwardProps";
 import { useFormField } from "../composables/useFormField";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
 const _props = defineProps({
   as: { type: null, required: false },
   legend: { type: String, required: false },
@@ -39,12 +40,16 @@ const slots = defineSlots();
 const props = useComponentProps("radioGroup", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "loop", "required"), emits);
-const { emitFormChange, emitFormInput, color, name, size, highlight, id: _id, disabled, ariaAttrs } = useFormField(_props, { bind: false });
+const { emitFormChange, emitFormInput, color: formFieldColor, name, size: formFieldSize, highlight: formFieldHighlight, id: _id, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props, { bind: false });
 const id = _id.value ?? useId();
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.radioGroup || {} })({
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
-  highlight: highlight.value ?? props.highlight,
+  size: size.value,
+  color: color.value,
+  highlight: highlight.value,
   disabled: disabled.value,
   required: props.required,
   orientation: props.orientation,
@@ -83,6 +88,9 @@ const normalizedItems = computed(() => {
   }
   return props.items.map(normalizeItem);
 });
+function labelIcon(item) {
+  return props.indicator === "hidden" ? item.icon : void 0;
+}
 function onUpdate(value) {
   const event = new Event("change", { target: { value } });
   emits("change", event);
@@ -124,7 +132,8 @@ function onUpdate(value) {
           </RRadioGroupItem>
         </div>
 
-        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+        <div v-if="labelIcon(item) || (item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <UIcon v-if="labelIcon(item)" :name="labelIcon(item)" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
           <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled || disabled })">
             <slot name="label" :item="item" :model-value="props.modelValue">
               {{ item.label }}

package/dist/runtime/components/RadioGroup.vue.d.ts

@@ -2,6 +2,7 @@ import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/radio-group';
+import type { IconProps } from './Icon.vue';
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type RadioGroup = ComponentConfig<typeof theme, AppConfig, 'radioGroup'>;
@@ -11,8 +12,13 @@ export type RadioGroupItem = RadioGroupValue | {
     description?: string;
     disabled?: boolean;
     value?: RadioGroupValue;
+    /**
+     * The icon displayed above the label when `indicator` is `hidden`.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>;
+    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>;
     [key: string]: any;
 };
 export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<RadioGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'> {

package/dist/runtime/components/Select.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/select";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, onMounted, toRef } from "vue";
+import { useTemplateRef, computed, onMounted, onScopeDispose, toRef } from "vue";
 import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectValue as RSelectValue, SelectLabel, SelectGroup, SelectItem as RSelectItem, SelectItemIndicator, SelectItemText, SelectSeparator } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
@@ -68,17 +68,28 @@ const portalProps = usePortal(toRef(() => props.portal));
 const position = computed(() => props.content?.position ?? appConfig.ui?.select?.defaultVariants?.position ?? theme.defaultVariants?.position);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: position.value }));
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
-const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(computed(() => ({
+  icon: props.icon,
+  leading: props.leading,
+  leadingIcon: props.leadingIcon,
+  trailing: props.trailing,
+  trailingIcon: props.trailingIcon ?? appConfig.ui.icons.chevronDown,
+  loading: props.loading,
+  loadingIcon: props.loadingIcon
+})));
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const isItemAligned = computed(() => position.value === "item-aligned");
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.select || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: selectSize.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
@@ -110,11 +121,13 @@ function autoFocus() {
     });
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 function onUpdate(value) {
   if (props.modelModifiers?.trim && (typeof value === "string" || value === null || value === void 0)) {
     value = value?.trim() ?? null;

package/dist/runtime/components/SelectMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/select-menu";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, ref, onMounted, toRef, toRaw, watch, nextTick } from "vue";
+import { useTemplateRef, computed, ref, onMounted, onScopeDispose, toRef, toRaw, watch, nextTick } from "vue";
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { defu } from "defu";
@@ -89,14 +89,25 @@ const clearProps = computed(() => typeof props.clear === "object" ? props.clear
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-    estimateSize: getEstimateSize(filteredItems.value, selectSize.value || "md", props.descriptionKey, !!slots["item-description"])
+    estimateSize: getEstimateSize(filteredItems.value, size.value ?? "md", props.descriptionKey, !!slots["item-description"])
   });
 });
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), variant: "none" }));
-const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(computed(() => ({
+  icon: props.icon,
+  leading: props.leading,
+  leadingIcon: props.leadingIcon,
+  trailing: props.trailing,
+  trailingIcon: props.trailingIcon ?? appConfig.ui.icons.chevronDown,
+  loading: props.loading,
+  loadingIcon: props.loadingIcon
+})));
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -111,11 +122,11 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   }
 });
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.selectMenu || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: selectSize?.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
@@ -171,11 +182,13 @@ function autoFocus() {
     });
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 function onUpdate(value) {
   if (toRaw(props.modelValue) === value) {
     return;
@@ -201,9 +214,10 @@ function onUpdate(value) {
   }
 }
 const isOpen = ref(false);
+let timeoutId;
+onScopeDispose(() => clearTimeout(timeoutId));
 function onUpdateOpen(value) {
   isOpen.value = value;
-  let timeoutId;
   if (!value) {
     const event = new FocusEvent("blur");
     emits("blur", event);
@@ -378,7 +392,7 @@ defineExpose({
               <UButton
                 as="span"
                 :icon="props.clearIcon || appConfig.ui.icons.close"
-                :size="selectSize"
+                :size="size"
                 variant="link"
                 color="neutral"
                 tabindex="-1"
@@ -405,7 +419,7 @@ defineExpose({
               <UInput
                 autofocus
                 autocomplete="off"
-                :size="selectSize"
+                :size="size"
                 v-bind="searchInputProps"
                 :model-modifiers="{
   trim: props.modelModifiers?.trim

package/dist/runtime/components/Slider.vue

@@ -10,6 +10,7 @@ import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { useFormField } from "../composables/useFormField";
+import { pick, omit } from "../utils";
 import { tv } from "../utils/tv";
 import UTooltip from "./Tooltip.vue";
 const _props = defineProps({
@@ -30,11 +31,15 @@ const _props = defineProps({
   minStepsBetweenThumbs: { type: Number, required: false }
 });
 const emits = defineEmits(["change"]);
+defineOptions({ inheritAttrs: false });
 const props = useComponentProps("slider", _props);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
-const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(_props);
+const { id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
+const color = computed(() => formFieldColor.value ?? props.color);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const defaultSliderValue = computed(() => {
   if (typeof props.defaultValue === "number") {
     return [props.defaultValue];
@@ -53,10 +58,11 @@ const sliderValue = computed({
   }
 });
 const thumbs = computed(() => sliderValue.value?.length ?? 1);
+const thumbAttrs = ["aria-label", "aria-labelledby", "aria-describedby", "aria-valuetext", "aria-invalid", "aria-errormessage"];
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.slider || {} })({
   disabled: disabled.value,
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
+  size: size.value,
+  color: color.value,
   orientation: props.orientation
 }));
 function onChange(value) {
@@ -68,12 +74,13 @@ function onChange(value) {
 
 <template>
   <SliderRoot
-    v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     v-model="sliderValue"
+    data-slot="root"
+    :role="thumbs > 1 && ($attrs['aria-label'] || $attrs['aria-labelledby']) ? 'group' : void 0"
+    v-bind="{ ...rootProps, ...thumbs > 1 ? $attrs : omit($attrs, thumbAttrs) }"
     :name="name"
     :disabled="disabled"
-    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
@@ -90,9 +97,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof props.tooltip === 'object' ? props.tooltip : {}"
       >
-        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" v-bind="{ ...thumbs === 1 ? pick($attrs, thumbAttrs) : {}, ...ariaAttrs }" :aria-label="thumbs > 1 || $attrs['aria-labelledby'] ? void 0 : $attrs['aria-label'] ?? 'Thumb'" />
       </UTooltip>
-      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" v-bind="{ ...thumbs === 1 ? pick($attrs, thumbAttrs) : {}, ...ariaAttrs }" :aria-label="thumbs > 1 || $attrs['aria-labelledby'] ? void 0 : $attrs['aria-label'] ?? 'Thumb'" />
     </template>
   </SliderRoot>
 </template>