@nuxt/ui 4.7.1 → 4.8.1

package/dist/runtime/components/Sidebar.vue

@@ -8,7 +8,7 @@ import { Primitive } from "reka-ui";
 import { defu } from "defu";
 import { createReusableTemplate, useMediaQuery } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
@@ -16,7 +16,7 @@ import USlideover from "./Slideover.vue";
 import UModal from "./Modal.vue";
 import UDrawer from "./Drawer.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "aside" },
   variant: { type: null, required: false, default: "sidebar" },
   collapsible: { type: null, required: false, default: "offcanvas" },
@@ -32,6 +32,7 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("sidebar", _props);
 const [DefineInnerTemplate, ReuseInnerTemplate] = createReusableTemplate();
 const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
 const mediaQuery = useMediaQuery("(max-width: 1023px)");
@@ -73,7 +74,6 @@ watch(openMobile, (value) => {
 });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("sidebar", props);
 const state = computed(() => open.value ? "expanded" : "collapsed");
 const canClose = computed(() => props.close && props.collapsible !== "none" || isMobile.value);
 function closeSidebar() {
@@ -100,35 +100,35 @@ const menuProps = toRef(() => defu(props.menu, {
 
 <template>
   <DefineContentTemplate>
-    <div v-if="hasHeader" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <div v-if="hasHeader" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :state="state" :open="open" :close="closeSidebar">
-        <div v-if="title || !!slots.title || description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-          <p v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div v-if="props.title || !!slots.title || props.description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <p v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
             <slot name="title" :state="state">
-              {{ title }}
+              {{ props.title }}
             </slot>
           </p>
 
-          <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+          <p v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
             <slot name="description" :state="state">
-              {{ description }}
+              {{ props.description }}
             </slot>
           </p>
         </div>
 
-        <div v-if="!!slots.actions || canClose" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+        <div v-if="!!slots.actions || canClose" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions" :state="state" />
 
           <slot name="close" :state="state" :ui="ui">
             <UButton
               v-if="canClose"
-              :icon="closeIcon || appConfig.ui.icons.close"
+              :icon="props.closeIcon || appConfig.ui.icons.close"
               color="neutral"
               variant="ghost"
               :aria-label="t('sidebar.close')"
               v-bind="typeof props.close === 'object' ? props.close : {}"
               data-slot="close"
-              :class="ui.close({ class: uiProp?.close })"
+              :class="ui.close({ class: props.ui?.close })"
               @click="closeSidebar"
             />
           </slot>
@@ -136,29 +136,29 @@ const menuProps = toRef(() => defu(props.menu, {
       </slot>
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot :state="state" :open="open" :close="closeSidebar" />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :state="state" :open="open" :close="closeSidebar" />
     </div>
   </DefineContentTemplate>
 
   <DefineInnerTemplate>
-    <div data-slot="inner" :class="ui.inner({ class: uiProp?.inner })">
+    <div data-slot="inner" :class="ui.inner({ class: props.ui?.inner })">
       <ReuseContentTemplate />
     </div>
   </DefineInnerTemplate>
 
   <!-- Non-collapsible: simple inline sidebar -->
   <Primitive
-    v-if="collapsible === 'none'"
-    :as="as"
+    v-if="props.collapsible === 'none'"
+    :as="props.as"
     v-bind="$attrs"
     data-slot="root"
-    :data-variant="variant"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :data-variant="props.variant"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <ReuseInnerTemplate />
   </Primitive>
@@ -166,37 +166,37 @@ const menuProps = toRef(() => defu(props.menu, {
   <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
   <template v-else>
     <Primitive
-      :as="as"
+      :as="props.as"
       v-bind="$attrs"
       data-slot="root"
       :data-state="state"
-      :data-collapsible="state === 'collapsed' ? collapsible : void 0"
-      :data-variant="variant"
-      :data-side="side"
-      :class="ui.root({ class: [uiProp?.root, props.class] })"
+      :data-collapsible="state === 'collapsed' ? props.collapsible : void 0"
+      :data-variant="props.variant"
+      :data-side="props.side"
+      :class="ui.root({ class: [props.ui?.root, props.class] })"
     >
       <!-- Gap spacer: reserves layout space for the fixed sidebar -->
       <div
         data-slot="gap"
         :data-state="state"
-        :class="ui.gap({ class: uiProp?.gap })"
+        :class="ui.gap({ class: props.ui?.gap })"
       />
 
       <!-- Fixed container: the actual visible sidebar -->
       <div
         data-slot="container"
         :data-state="state"
-        :class="ui.container({ class: uiProp?.container })"
+        :class="ui.container({ class: props.ui?.container })"
       >
         <ReuseInnerTemplate />
 
-        <slot v-if="rail" name="rail" :state="state" :ui="ui">
+        <slot v-if="props.rail" name="rail" :state="state" :ui="ui">
           <button
             data-slot="rail"
             :data-state="state"
             :aria-label="t('sidebar.toggle')"
             :tabindex="-1"
-            :class="ui.rail({ class: uiProp?.rail })"
+            :class="ui.rail({ class: props.ui?.rail })"
             @click="open = !open"
           />
         </slot>

package/dist/runtime/components/Skeleton.vue

@@ -7,25 +7,25 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
-import { useComponentUI } from "../composables/useComponentUI";
-const props = defineProps({
+import { useComponentProps } from "../composables/useComponentProps";
+const _props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
+const props = useComponentProps("skeleton", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("skeleton", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.skeleton || {} }));
 </script>
 
 <template>
   <Primitive
-    :as="as"
+    :as="props.as"
     aria-busy="true"
     aria-label="loading"
     aria-live="polite"
     role="alert"
-    :class="ui({ class: [uiProp?.base, props.class] })"
+    :class="ui({ class: [props.ui?.base, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -98,11 +98,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
-    transition: boolean;
-    side: Slideover["variants"]["side"];
-    overlay: boolean;
     modal: boolean;
+    transition: boolean;
     portal: boolean | string | HTMLElement;
+    overlay: boolean;
+    side: Slideover["variants"]["side"];
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Slideover.vue

@@ -4,17 +4,18 @@ import theme from "#build/ui/slideover";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { FieldGroupReset } from "../composables/useFieldGroup";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
-const props = defineProps({
+const _props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
   content: { type: Object, required: false },
@@ -34,10 +35,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "update:open"]);
 const slots = defineSlots();
+const props = useComponentProps("slideover", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("slideover", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const rootProps = useForwardProps(reactivePick(props, "open", "defaultOpen", "modal"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
@@ -70,46 +71,46 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
 
     <DialogPortal v-bind="portalProps">
       <FieldGroupReset>
-        <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
+        <DialogOverlay v-if="props.overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
         <DialogContent
-          :data-side="side"
+          :data-side="props.side"
           data-slot="content"
-          :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
+          :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
           v-bind="contentProps"
           @after-enter="emits('after:enter')"
           @after-leave="emits('after:leave')"
           v-on="contentEvents"
         >
-          <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
-            <DialogTitle v-if="!title && !slots.title" />
+          <VisuallyHidden v-if="!props.title && !slots.title || !props.description && !slots.description || !!slots.content">
+            <DialogTitle v-if="!props.title && !slots.title" />
             <DialogTitle v-else-if="!!slots.content">
               <slot name="title">
-                {{ title }}
+                {{ props.title }}
               </slot>
             </DialogTitle>
 
-            <DialogDescription v-if="!description && !slots.description" />
+            <DialogDescription v-if="!props.description && !slots.description" />
             <DialogDescription v-else-if="!!slots.content">
               <slot name="description">
-                {{ description }}
+                {{ props.description }}
               </slot>
             </DialogDescription>
           </VisuallyHidden>
 
           <slot name="content" :close="close">
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+            <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
               <slot name="header" :close="close">
-                <div v-if="title || !!slots.title || description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-                  <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+                <div v-if="props.title || !!slots.title || props.description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+                  <DialogTitle v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                     <slot name="title">
-                      {{ title }}
+                      {{ props.title }}
                     </slot>
                   </DialogTitle>
 
-                  <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+                  <DialogDescription v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                     <slot name="description">
-                      {{ description }}
+                      {{ props.description }}
                     </slot>
                   </DialogDescription>
                 </div>
@@ -120,24 +121,24 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
                   <slot name="close" :ui="ui">
                     <UButton
                       v-if="props.close"
-                      :icon="closeIcon || appConfig.ui.icons.close"
+                      :icon="props.closeIcon || appConfig.ui.icons.close"
                       color="neutral"
                       variant="ghost"
                       :aria-label="t('slideover.close')"
                       v-bind="typeof props.close === 'object' ? props.close : {}"
                       data-slot="close"
-                      :class="ui.close({ class: uiProp?.close })"
+                      :class="ui.close({ class: props.ui?.close })"
                     />
                   </slot>
                 </DialogClose>
               </slot>
             </div>
 
-            <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+            <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
               <slot name="body" :close="close" />
             </div>
 
-            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
               <slot name="footer" :close="close" />
             </div>
           </slot>

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

@@ -98,11 +98,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
-    transition: boolean;
-    side: Slideover["variants"]["side"];
-    overlay: boolean;
     modal: boolean;
+    transition: boolean;
     portal: boolean | string | HTMLElement;
+    overlay: boolean;
+    side: Slideover["variants"]["side"];
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Slider.vue

@@ -4,14 +4,15 @@ import theme from "#build/ui/slider";
 
 <script setup>
 import { computed } from "vue";
-import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from "reka-ui";
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import UTooltip from "./Tooltip.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   size: { type: null, required: false },
   color: { type: null, required: false },
@@ -29,11 +30,11 @@ const props = defineProps({
   minStepsBetweenThumbs: { type: Number, required: false }
 });
 const emits = defineEmits(["change"]);
+const props = useComponentProps("slider", _props);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("slider", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
-const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
+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 defaultSliderValue = computed(() => {
   if (typeof props.defaultValue === "number") {
     return [props.defaultValue];
@@ -54,8 +55,8 @@ const sliderValue = computed({
 const thumbs = computed(() => sliderValue.value?.length ?? 1);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slider || {} })({
   disabled: disabled.value,
-  size: size.value,
-  color: color.value,
+  size: size.value ?? props.size,
+  color: color.value ?? props.color,
   orientation: props.orientation
 }));
 function onChange(value) {
@@ -73,25 +74,25 @@ function onChange(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack data-slot="track" :class="ui.track({ class: uiProp?.track })">
-      <SliderRange data-slot="range" :class="ui.range({ class: uiProp?.range })" />
+    <SliderTrack data-slot="track" :class="ui.track({ class: props.ui?.track })">
+      <SliderRange data-slot="range" :class="ui.range({ class: props.ui?.range })" />
     </SliderTrack>
 
     <template v-for="thumb in thumbs" :key="thumb">
       <UTooltip
-        v-if="!!tooltip"
+        v-if="!!props.tooltip"
         :text="thumbs > 1 ? String(sliderValue?.[thumb - 1]) : String(sliderValue)"
         disable-closing-trigger
-        v-bind="typeof tooltip === 'object' ? tooltip : {}"
+        v-bind="typeof props.tooltip === 'object' ? props.tooltip : {}"
       >
-        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
       </UTooltip>
-      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
     </template>
   </SliderRoot>
 </template>

package/dist/runtime/components/Stepper.vue

@@ -4,14 +4,15 @@ import theme from "#build/ui/stepper";
 
 <script setup>
 import { computed } from "vue";
-import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, useForwardProps } from "reka-ui";
+import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { tv } from "../utils/tv";
 import { get } from "../utils";
 import UIcon from "./Icon.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: true },
   size: { type: null, required: false },
@@ -26,9 +27,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["next", "prev"]);
 const slots = defineSlots();
+const props = useComponentProps("stepper", _props);
 const modelValue = defineModel({ type: [String, Number] });
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("stepper", props);
 const rootProps = useForwardProps(reactivePick(props, "as", "linear"));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.stepper || {} })({
   orientation: props.orientation,
@@ -66,21 +67,21 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <StepperItem
-        v-for="(item, count) in items"
+        v-for="(item, count) in props.items"
         :key="count"
         :step="count"
         :disabled="item.disabled || props.disabled"
         data-slot="item"
-        :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       >
-        <div data-slot="container" :class="ui.container({ class: [uiProp?.container, item.ui?.container] })">
-          <StepperTrigger data-slot="trigger" :class="ui.trigger({ class: [uiProp?.trigger, item.ui?.trigger] })">
-            <StepperIndicator data-slot="indicator" :class="ui.indicator({ class: [uiProp?.indicator, item.ui?.indicator] })">
+        <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+          <StepperTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+            <StepperIndicator data-slot="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
               <slot name="indicator" :item="item" :ui="ui">
-                <UIcon v-if="item.icon" :name="item.icon" data-slot="icon" :class="ui.icon({ class: [uiProp?.icon, item.ui?.icon] })" />
+                <UIcon v-if="item.icon" :name="item.icon" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
                 <template v-else>
                   {{ count + 1 }}
                 </template>
@@ -89,20 +90,20 @@ defineExpose({
           </StepperTrigger>
 
           <StepperSeparator
-            v-if="count < items.length - 1"
+            v-if="count < props.items.length - 1"
             data-slot="separator"
-            :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator] })"
+            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           />
         </div>
 
-        <div data-slot="wrapper" :class="ui.wrapper({ class: [uiProp?.wrapper, item.ui?.wrapper] })">
+        <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
           <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
-            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" data-slot="title" :class="ui.title({ class: [uiProp?.title, item.ui?.title] })">
+            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
               <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
                 {{ item.title }}
               </slot>
             </StepperTitle>
-            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" data-slot="description" :class="ui.description({ class: [uiProp?.description, item.ui?.description] })">
+            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
               <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
                 {{ item.description }}
               </slot>
@@ -112,7 +113,7 @@ defineExpose({
       </StepperItem>
     </div>
 
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" data-slot="content" :class="ui.content({ class: uiProp?.content })">
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <slot
         :name="currentStep?.slot || 'content'"
         :item="currentStep"

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

@@ -20,6 +20,8 @@ export interface SwitchProps<T = boolean> extends Pick<SwitchRootProps<T>, 'disa
      * @defaultValue 'md'
      */
     size?: Switch['variants']['size'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
     /** When `true`, the loading icon will be displayed. */
     loading?: boolean;
     /**

package/dist/runtime/components/Switch.vue

@@ -4,18 +4,20 @@ import theme from "#build/ui/switch";
 
 <script setup>
 import { computed, useAttrs, useId } from "vue";
-import { Primitive, SwitchRoot, SwitchThumb, useForwardPropsEmits, Label } from "reka-ui";
+import { Primitive, SwitchRoot, SwitchThumb, Label } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   loadingIcon: { type: null, required: false },
   checkedIcon: { type: null, required: false },
@@ -36,10 +38,10 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const emits = defineEmits(["change", "update:modelValue"]);
+const props = useComponentProps("switch", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("switch", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
+const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
+const { id: _id, emitFormChange, emitFormInput, size, color, highlight, name, disabled, ariaAttrs } = useFormField(_props);
 const id = _id.value ?? useId();
 const attrs = useAttrs();
 const forwardedAttrs = computed(() => {
@@ -47,8 +49,9 @@ const forwardedAttrs = computed(() => {
   return rest;
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.switch || {} })({
-  size: size.value,
-  color: color.value,
+  size: size.value ?? props.size,
+  color: color.value ?? props.color,
+  highlight: highlight.value ?? props.highlight,
   required: props.required,
   loading: props.loading,
   disabled: disabled.value || props.loading
@@ -62,35 +65,35 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         :id="id"
         v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         :name="name"
-        :disabled="disabled || loading"
+        :disabled="disabled || props.loading"
         data-slot="base"
-        :class="ui.base({ class: uiProp?.base })"
+        :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
-        <SwitchThumb data-slot="thumb" :class="ui.thumb({ class: uiProp?.thumb })">
-          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="icon" :class="ui.icon({ class: uiProp?.icon, checked: true, unchecked: true })" />
+        <SwitchThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })">
+          <UIcon v-if="props.loading" :name="props.loadingIcon || appConfig.ui.icons.loading" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
           <template v-else>
-            <UIcon v-if="checkedIcon" :name="checkedIcon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon, checked: true })" />
-            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon, unchecked: true })" />
+            <UIcon v-if="props.checkedIcon" :name="props.checkedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
+            <UIcon v-if="props.uncheckedIcon" :name="props.uncheckedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
           </template>
         </SwitchThumb>
       </SwitchRoot>
     </div>
-    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
-        <slot name="label" :label="label">
-          {{ label }}
+    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+        <slot name="label" :label="props.label">
+          {{ props.label }}
         </slot>
       </Label>
-      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
+      <p v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
         </slot>
       </p>
     </div>