@nuxt/ui 4.10.0 → 4.11.0

package/dist/runtime/components/Input.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, onMounted } from "vue";
+import { useTemplateRef, computed, onMounted, onScopeDispose } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -51,17 +51,20 @@ const slots = defineSlots();
 const props = useComponentProps("input", _props);
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
-const { emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(_props, { deferInputValidation: true });
+const { emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, emitFormFocus, ariaAttrs } = useFormField(_props, { deferInputValidation: true });
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+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 ui = computed(() => tv({ extend: theme, ...appConfig.ui?.input || {} })({
   type: props.type,
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: inputSize?.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -109,11 +112,13 @@ function autoFocus() {
     inputRef.value?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 defineExpose({
   inputRef
 });

package/dist/runtime/components/InputDate.vue

@@ -3,8 +3,7 @@ import theme from "#build/ui/input-date";
 </script>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
-import {} from "reka-ui";
+import { computed, onMounted, onScopeDispose, ref } from "vue";
 import { useForwardProps } from "../composables/useForwardProps";
 import { DateField as SingleDateField, DateRangeField as RangeDateField } from "reka-ui/namespaced";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
@@ -62,16 +61,19 @@ const slots = defineSlots();
 const props = useComponentProps("inputDate", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, 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(props);
 const [DefineSegmentsTemplate, ReuseSegmentsTemplate] = createReusableTemplate();
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+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 ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputDate || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: inputSize.value ?? props.size,
-  highlight: highlight.value ?? props.highlight,
+  size: size.value,
+  highlight: highlight.value,
   fixed: props.fixed,
   loading: props.loading,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
@@ -101,11 +103,13 @@ function autoFocus() {
     inputsRef.value[0]?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 const DateField = computed(() => props.range ? RangeDateField : SingleDateField);
 defineExpose({
   inputsRef

package/dist/runtime/components/InputMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-menu";
 </script>
 
 <script setup>
-import { computed, ref, useAttrs, useTemplateRef, toRef, onMounted, toRaw, nextTick, watch } from "vue";
+import { computed, ref, useAttrs, useTemplateRef, toRef, onMounted, onScopeDispose, toRaw, nextTick, watch } from "vue";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { Combobox, Autocomplete } from "reka-ui/namespaced";
@@ -102,13 +102,24 @@ 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, inputSize.value || "md", props.descriptionKey, !!slots["item-description"])
+    estimateSize: getEstimateSize(filteredItems.value, size.value ?? "md", props.descriptionKey, !!slots["item-description"])
   });
 });
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, 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 inputSize = 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: {
@@ -123,11 +134,11 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   }
 });
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputMenu || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: inputSize?.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -174,6 +185,7 @@ function autoFocus() {
     inputRef.value?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
   nextTick(() => {
     if (isAutocomplete.value) {
@@ -182,10 +194,11 @@ onMounted(() => {
       searchTerm.value = "";
     }
   });
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 watch(() => props.modelValue, (newValue) => {
   if (isAutocomplete.value) {
     searchTerm.value = String(newValue ?? "");
@@ -231,9 +244,10 @@ function onFocus(event) {
   emitFormFocus();
 }
 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);
@@ -453,7 +467,7 @@ defineExpose({
             <UButton
               as="span"
               :icon="props.clearIcon || appConfig.ui.icons.close"
-              :size="inputSize"
+              :size="size"
               variant="link"
               color="neutral"
               tabindex="-1"

package/dist/runtime/components/InputNumber.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-number";
 </script>
 
 <script setup>
-import { onMounted, computed, useTemplateRef, toRef } from "vue";
+import { onMounted, onScopeDispose, computed, useTemplateRef, toRef } from "vue";
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick, useVModel } from "@vueuse/core";
@@ -59,14 +59,17 @@ const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.d
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "required", "readonly", "focusOnChange", "locale"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color: formFieldColor, size: formFieldSize, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+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 ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputNumber || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: inputSize.value ?? props.size,
-  highlight: highlight.value ?? props.highlight,
+  size: size.value,
+  highlight: highlight.value,
   fixed: props.fixed,
   orientation: props.orientation,
   fieldGroup: orientation.value,
@@ -94,11 +97,13 @@ function autoFocus() {
     inputRef.value?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 defineExpose({
   inputRef: toRef(() => inputRef.value?.$el)
 });
@@ -136,7 +141,7 @@ defineExpose({
           <UButton
             :icon="incrementIcon"
             :color="color"
-            :size="inputSize"
+            :size="size"
             variant="link"
             :aria-label="t('inputNumber.increment')"
             v-bind="typeof props.increment === 'object' ? props.increment : void 0"
@@ -151,7 +156,7 @@ defineExpose({
           <UButton
             :icon="decrementIcon"
             :color="color"
-            :size="inputSize"
+            :size="size"
             variant="link"
             :aria-label="t('inputNumber.decrement')"
             v-bind="typeof props.decrement === 'object' ? props.decrement : void 0"

package/dist/runtime/components/InputRating.vue

@@ -39,14 +39,17 @@ defineSlots();
 const props = useComponentProps("inputRating", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "length", "step", "hoverable", "clearable", "required", "modelValue", "defaultValue"), emits);
-const { id, emitFormChange, emitFormInput, size, color, name, disabled: formDisabled, ariaAttrs } = useFormField(_props);
-const disabled = computed(() => formDisabled.value || props.readonly);
+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 rootDisabled = computed(() => disabled.value || props.readonly);
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputRating || {} })({
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
+  size: size.value,
+  color: color.value,
   orientation: props.orientation,
-  readonly: props.readonly && !formDisabled.value,
-  disabled: formDisabled.value
+  readonly: props.readonly && !disabled.value,
+  disabled: disabled.value
 }));
 const starIcon = computed(() => props.icon ?? appConfig.ui.icons.star);
 function onUpdate(value) {
@@ -64,7 +67,7 @@ function onUpdate(value) {
     data-slot="root"
     v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :name="name"
-    :disabled="disabled"
+    :disabled="rootDisabled"
     :aria-readonly="props.readonly || void 0"
     :orientation="props.orientation"
     :class="ui.root({ class: [props.ui?.root, props.class] })"

package/dist/runtime/components/InputTags.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-tags";
 </script>
 
 <script setup>
-import { computed, useTemplateRef, onMounted, toRaw, toRef } from "vue";
+import { computed, useTemplateRef, onMounted, onScopeDispose, toRaw, toRef } from "vue";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
@@ -58,16 +58,19 @@ const slots = defineSlots();
 const props = useComponentProps("inputTags", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, 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(props);
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+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 ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputTags || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: inputSize?.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -79,11 +82,13 @@ function autoFocus() {
     inputRef.value?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 function onUpdate(value) {
   if (toRaw(props.modelValue) === value) {
     return;

package/dist/runtime/components/InputTime.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-time";
 </script>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, onScopeDispose, ref } from "vue";
 import { TimeRangeFieldRoot, TimeRangeFieldInput } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { TimeField as SingleTimeField } from "reka-ui/namespaced";
@@ -62,16 +62,19 @@ const slots = defineSlots();
 const props = useComponentProps("inputTime", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color: formFieldColor, size: formFieldSize, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+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 ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputTime || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: inputSize.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -103,11 +106,13 @@ function autoFocus() {
     inputsRef.value[0]?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 defineExpose({
   inputsRef
 });

package/dist/runtime/components/Listbox.vue

@@ -1,9 +1,9 @@
 <script>
-import { computed, toRaw, toRef } from "vue";
 import theme from "#build/ui/listbox";
 </script>
 
 <script setup>
+import { computed, toRaw, toRef } from "vue";
 import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { createReusableTemplate, reactivePick } from "@vueuse/core";
@@ -65,11 +65,15 @@ const rootProps = useForwardProps(reactivePick(props, "as", "modelValue", "defau
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-    estimateSize: getEstimateSize(filteredItems.value, size.value || "md", props.descriptionKey, !!slots["item-description"])
+    estimateSize: getEstimateSize(filteredItems.value, size.value ?? "md", props.descriptionKey, !!slots["item-description"])
   });
 });
 const inputProps = toRef(() => defu(typeof props.filter === "object" ? props.filter : {}, { placeholder: t("listbox.search"), variant: "none" }));
-const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField(_props, { bind: false });
+const { emitFormChange, emitFormInput, name, size: formFieldSize, color: formFieldColor, id, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props, { bind: false });
+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 [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: {
@@ -83,9 +87,9 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   }
 });
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.listbox || {} })({
-  color: color.value ?? props.color,
-  size: size.value ?? props.size,
-  highlight: highlight.value ?? props.highlight,
+  color: color.value,
+  size: size.value,
+  highlight: highlight.value,
   disabled: disabled.value,
   virtualize: !!props.virtualize
 }));

package/dist/runtime/components/Modal.vue

@@ -73,10 +73,10 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.modal || {} })({
         data-slot="content"
         :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
         v-bind="contentProps"
-        @enter="emits('enter')"
-        @after-enter="emits('after:enter')"
-        @leave="emits('leave')"
-        @after-leave="emits('after:leave')"
+        @enter="!props.scrollable && emits('enter')"
+        @after-enter="!props.scrollable && emits('after:enter')"
+        @leave="!props.scrollable && emits('leave')"
+        @after-leave="!props.scrollable && emits('after:leave')"
         v-on="contentEvents"
       >
         <VisuallyHidden v-if="!props.title && !slots.title || !props.description && !slots.description || !!slots.content">
@@ -149,7 +149,14 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.modal || {} })({
     <DialogPortal v-bind="portalProps" :force-mount="portalProps.disabled && props.unmountOnHide === false || void 0">
       <FieldGroupReset>
         <template v-if="props.scrollable">
-          <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })">
+          <DialogOverlay
+            data-slot="overlay"
+            :class="ui.overlay({ class: props.ui?.overlay })"
+            @enter="emits('enter')"
+            @after-enter="emits('after:enter')"
+            @leave="emits('leave')"
+            @after-leave="emits('after:leave')"
+          >
             <ReuseContentTemplate />
           </DialogOverlay>
         </template>

package/dist/runtime/components/PinInput.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/pin-input";
 </script>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, onScopeDispose } from "vue";
 import { PinInputInput, PinInputRoot } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
@@ -41,26 +41,29 @@ defineSlots();
 const props = useComponentProps("pinInput", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "disabled", "id", "mask", "name", "otp", "required", "type"), emits);
-const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
+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?.pinInput || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: size.value ?? props.size,
-  highlight: highlight.value ?? props.highlight,
+  size: size.value,
+  highlight: highlight.value,
   fixed: props.fixed
 }));
 const inputsRef = ref([]);
 function setInputRef(index, el) {
   inputsRef.value[index] = el;
 }
-const completed = ref(false);
 function onComplete(value) {
   const event = new Event("change", { target: { value } });
   emits("change", event);
   emitFormChange();
 }
 function onBlur(event) {
-  if (!event.relatedTarget || completed.value) {
+  if (!event.relatedTarget) {
     emits("blur", event);
     emitFormBlur();
   }
@@ -84,11 +87,13 @@ function shouldInsertSeparator(index) {
   const separator = looseToNumber(props.separator);
   return Number.isInteger(separator) && separator > 0 && position % separator === 0;
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 defineExpose({
   inputsRef
 });

package/dist/runtime/components/Popover.vue

@@ -5,7 +5,6 @@ import theme from "#build/ui/popover";
 <script setup>
 import { computed, toRef } from "vue";
 import { defu } from "defu";
-import {} from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { Popover, HoverCard } from "reka-ui/namespaced";
 import { reactivePick } from "@vueuse/core";

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

@@ -49,7 +49,7 @@ export interface PricingTableProps<T extends PricingTableTier = PricingTableTier
     as?: any;
     /**
      * The caption to display above the table.
-     * @defeaultValue t('pricingTable.caption')
+     * @defaultValue t('pricingTable.caption')
      */
     caption?: string;
     /**

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

@@ -49,7 +49,7 @@ export interface PricingTableProps<T extends PricingTableTier = PricingTableTier
     as?: any;
     /**
      * The caption to display above the table.
-     * @defeaultValue t('pricingTable.caption')
+     * @defaultValue t('pricingTable.caption')
      */
     caption?: string;
     /**

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

@@ -21,9 +21,10 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
      */
     size?: Progress['variants']['size'];
     /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
      * @defaultValue 'primary'
      */
-    color?: Progress['variants']['color'];
+    color?: Progress['variants']['color'] | (string & {});
     /**
      * The orientation of the progress bar.
      * @defaultValue 'horizontal'

package/dist/runtime/components/Progress.vue

@@ -76,10 +76,7 @@ const indicatorStyle = computed(() => {
     }
   }
 });
-const statusStyle = computed(() => {
-  const value = `${Math.max(percent.value ?? 0, 0)}%`;
-  return props.orientation === "vertical" ? { height: value } : { width: value };
-});
+const statusStyle = computed(() => ({ "--percent": `${Math.max(percent.value ?? 0, 0)}%` }));
 function isActive(index) {
   return index === Number(props.modelValue);
 }
@@ -109,6 +106,8 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.progress || {} })
   orientation: props.orientation,
   inverted: props.inverted
 }));
+const themeColors = computed(() => Object.keys({ ...theme.variants?.color, ...appConfig.ui?.progress?.variants?.color }));
+const customColor = computed(() => props.color && !themeColors.value.includes(props.color) ? props.color : void 0);
 </script>
 
 <template>
@@ -120,10 +119,10 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.progress || {} })
     </div>
 
     <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
-      <ProgressIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+      <ProgressIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="[indicatorStyle, customColor ? { backgroundColor: customColor } : void 0]" />
     </ProgressRoot>
 
-    <div v-if="hasSteps" data-slot="steps" :class="ui.steps({ class: props.ui?.steps })">
+    <div v-if="hasSteps" data-slot="steps" :class="ui.steps({ class: props.ui?.steps })" :style="customColor ? { color: customColor } : void 0">
       <div v-for="(step, index) in props.max" :key="index" data-slot="step" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })">
         <slot :name="`step-${index}`" :step="step">
           {{ step }}

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

@@ -21,9 +21,10 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
      */
     size?: Progress['variants']['size'];
     /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
      * @defaultValue 'primary'
      */
-    color?: Progress['variants']['color'];
+    color?: Progress['variants']['color'] | (string & {});
     /**
      * The orientation of the progress bar.
      * @defaultValue 'horizontal'