@nuxt/ui 3.2.0 → 3.3.0

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

@@ -13,6 +13,7 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
     validate?: (state: Partial<InferInput<S>>) => Promise<FormError[]> | FormError[];
     /**
      * The list of input events that trigger the form validation.
+     * @remarks The form always validates on submit.
      * @defaultValue `['blur', 'change', 'input']`
      */
     validateOn?: FormInputEvents[];
@@ -43,8 +44,8 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 }
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
-    (e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void;
-    (e: 'error', payload: FormErrorEvent): void;
+    submit: [payload: FormSubmitEvent<FormData<S, T>>];
+    error: [payload: FormErrorEvent];
 }
 export interface FormSlots {
     default(props?: {
@@ -56,15 +57,15 @@ declare const _default: <S extends FormSchema, T extends boolean = true>(__VLS_p
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onError?: ((payload: FormErrorEvent) => any) | undefined;
         readonly onSubmit?: ((payload: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onError" | "onSubmit"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onError"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<Form<S>>): void;
     attrs: any;
     slots: FormSlots;
-    emit: FormEmits<S, T>;
+    emit: ((evt: "error", payload: FormErrorEvent) => void) & ((evt: "submit", payload: FormSubmitEvent<FormData<S, T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/FormField.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   help: { type: String, required: false },
-  error: { type: [String, Boolean], required: false },
+  error: { type: [Boolean, String], required: false },
   hint: { type: String, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
@@ -80,7 +80,7 @@ provide(formFieldInjectionKey, computed(() => ({
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

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

@@ -15,7 +15,7 @@ export interface FormFieldProps {
     label?: string;
     description?: string;
     help?: string;
-    error?: string | boolean;
+    error?: boolean | string;
     hint?: string;
     /**
      * @defaultValue 'md'
@@ -46,13 +46,13 @@ export interface FormFieldSlots {
         help?: string;
     }): any;
     error(props: {
-        error?: string | boolean;
+        error?: boolean | string;
     }): any;
     default(props: {
-        error?: string | boolean;
+        error?: boolean | string;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -4,5 +4,5 @@ export interface IconProps {
     size?: string | number;
     customize?: (content: string, name?: string, prefix?: string, provider?: string) => string;
 }
-declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<IconProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Input.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/input";
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { Primitive } from "reka-ui";
+import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
@@ -29,6 +30,8 @@ const props = defineProps({
   autofocusDelay: { type: Number, required: false, default: 0 },
   disabled: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
   modelModifiers: { type: Object, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -43,7 +46,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
-const [modelValue, modelModifiers] = defineModel({ type: null });
+const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
@@ -62,29 +65,29 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} }
 }));
 const inputRef = ref(null);
 function updateInput(value) {
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     value = value?.trim() ?? null;
   }
-  if (modelModifiers.number || props.type === "number") {
+  if (props.modelModifiers?.number || props.type === "number") {
     value = looseToNumber(value);
   }
-  if (modelModifiers.nullify) {
+  if (props.modelModifiers?.nullify) {
     value ||= null;
   }
   modelValue.value = value;
   emitFormInput();
 }
 function onInput(event) {
-  if (!modelModifiers.lazy) {
+  if (!props.modelModifiers?.lazy) {
     updateInput(event.target.value);
   }
 }
 function onChange(event) {
   const value = event.target.value;
-  if (modelModifiers.lazy) {
+  if (props.modelModifiers?.lazy) {
     updateInput(value);
   }
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     event.target.value = value.trim();
   }
   emitFormChange();

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

@@ -4,7 +4,7 @@ import theme from '#build/ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AcceptableValue, ComponentConfig } from '../types/utils';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
-export interface InputProps extends UseComponentIconsProps {
+export interface InputProps<T extends AcceptableValue = AcceptableValue> extends UseComponentIconsProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -34,6 +34,8 @@ export interface InputProps extends UseComponentIconsProps {
     disabled?: boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    modelValue?: T;
+    defaultValue?: T;
     modelModifiers?: {
         string?: boolean;
         number?: boolean;
@@ -45,9 +47,9 @@ export interface InputProps extends UseComponentIconsProps {
     ui?: Input['slots'];
 }
 export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
-    (e: 'update:modelValue', payload: T): void;
-    (e: 'blur', event: FocusEvent): void;
-    (e: 'change', event: Event): void;
+    'update:modelValue': [payload: T];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
 }
 export interface InputSlots {
     leading(props?: {}): any;
@@ -59,19 +61,17 @@ declare const _default: <T extends AcceptableValue>(__VLS_props: NonNullable<Awa
         readonly onBlur?: ((event: FocusEvent) => any) | undefined;
         readonly onChange?: ((event: Event) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & (InputProps & {
-        modelValue?: T;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & InputProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
     }>): void;
     attrs: any;
     slots: InputSlots;
-    emit: InputEmits<T> & ((evt: "update:modelValue", value: T | undefined) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/InputMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-menu";
 </script>
 
 <script setup>
-import { computed, ref, toRef, onMounted, toRaw } from "vue";
+import { computed, ref, toRef, onMounted, toRaw, nextTick } from "vue";
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from "reka-ui";
 import { defu } from "defu";
 import { isEqual } from "ohash/utils";
@@ -64,7 +64,7 @@ const props = defineProps({
   loading: { type: Boolean, required: false },
   loadingIcon: { type: String, required: false }
 });
-const emits = defineEmits(["update:open", "change", "blur", "focus", "create", "highlight", "update:modelValue"]);
+const emits = defineEmits(["update:open", "change", "blur", "focus", "create", "highlight", "remove-tag", "update:modelValue"]);
 const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
@@ -91,10 +91,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu ||
   buttonGroup: orientation.value
 }));
 function displayValue(value) {
-  if (!props.valueKey) {
-    return value && (typeof value === "object" ? get(value, props.labelKey) : value);
-  }
-  const item = items.value.find((item2) => compare(typeof item2 === "object" ? get(item2, props.valueKey) : item2, value));
+  const item = items.value.find((item2) => compare(typeof item2 === "object" && props.valueKey ? get(item2, props.valueKey) : item2, value));
   return item && (typeof item === "object" ? get(item, props.labelKey) : item);
 }
 const groups = computed(
@@ -106,14 +103,20 @@ const filteredGroups = computed(() => {
     return groups.value;
   }
   const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey];
-  return groups.value.map((group) => group.filter((item) => {
-    if (typeof item !== "object" || item === null) {
+  return groups.value.map((items2) => items2.filter((item) => {
+    if (item === void 0 || item === null) {
+      return false;
+    }
+    if (typeof item !== "object") {
       return contains(String(item), searchTerm.value);
     }
     if (item.type && ["label", "separator"].includes(item.type)) {
       return true;
     }
-    return fields.some((field) => contains(get(item, field), searchTerm.value));
+    return fields.some((field) => {
+      const value = get(item, field);
+      return value !== void 0 && value !== null && contains(String(value), searchTerm.value);
+    });
   })).filter((group) => group.filter(
     (item) => !isInputItem(item) || (!item.type || !["label", "separator"].includes(item.type))
   ).length > 0);
@@ -137,6 +140,9 @@ function autoFocus() {
   }
 }
 onMounted(() => {
+  nextTick(() => {
+    searchTerm.value = "";
+  });
   setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
@@ -185,6 +191,7 @@ function onRemoveTag(event) {
     const modelValue = props.modelValue;
     const filteredValue = modelValue.filter((value) => !isEqual(value, event));
     emits("update:modelValue", filteredValue);
+    emits("remove-tag", event);
     onUpdate(filteredValue);
   }
 }
@@ -252,7 +259,7 @@ defineExpose({
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
           <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
             <slot name="tags-item-text" :item="item" :index="index">
-              {{ displayValue(item) }}
+              {{ displayValue(item) ?? item }}
             </slot>
           </TagsInputItemText>
 

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

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import type { InputHTMLAttributes } from 'vue';
 import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
@@ -126,17 +127,18 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
     ui?: InputMenu['slots'];
 }
 export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
-    change: [payload: Event];
-    blur: [payload: FocusEvent];
-    focus: [payload: FocusEvent];
-    create: [item: string];
+    'change': [payload: Event];
+    'blur': [payload: FocusEvent];
+    'focus': [payload: FocusEvent];
+    'create': [item: string];
     /** Event handler when highlighted element changes. */
-    highlight: [
+    'highlight': [
         payload: {
             ref: HTMLElement;
             value: GetModelValue<A, VK, M>;
         } | undefined
     ];
+    'remove-tag': [item: GetModelValue<A, VK, M>];
 } & GetModelValueEmits<A, VK, M>;
 type SlotProps<T extends InputMenuItem> = (props: {
     item: T;
@@ -185,7 +187,8 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             value: GetModelValue<T, VK, M>;
         } | undefined) => any) | undefined;
         readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate"> & (InputMenuProps<T, VK, M> & {
+        readonly "onRemove-tag"?: ((item: GetModelValue<T, VK, M>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate" | "onRemove-tag"> & (InputMenuProps<T, VK, M> & {
         searchTerm?: string;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
@@ -293,7 +296,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                         errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
                     };
                     $forceUpdate: () => void;
-                    $nextTick: typeof import("vue").nextTick;
+                    $nextTick: typeof nextTick;
                     $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
                 } & Readonly<{
                     as: import("reka-ui").AsTag | import("vue").Component;
@@ -343,7 +346,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                 errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
             };
             $forceUpdate: () => void;
-            $nextTick: typeof import("vue").nextTick;
+            $nextTick: typeof nextTick;
             $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{
             as: import("reka-ui").AsTag | import("vue").Component;
@@ -457,7 +460,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                         errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
                     };
                     $forceUpdate: () => void;
-                    $nextTick: typeof import("vue").nextTick;
+                    $nextTick: typeof nextTick;
                     $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
                 } & Readonly<{
                     as: import("reka-ui").AsTag | import("vue").Component;
@@ -507,7 +510,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                 errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
             };
             $forceUpdate: () => void;
-            $nextTick: typeof import("vue").nextTick;
+            $nextTick: typeof nextTick;
             $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{
             as: import("reka-ui").AsTag | import("vue").Component;
@@ -524,11 +527,11 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
     emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
-    } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "remove-tag", item: GetModelValue<T, VK, M>) => void)) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -59,9 +59,9 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
     ui?: InputNumber['slots'];
 }
 export interface InputNumberEmits {
-    (e: 'update:modelValue', payload: number): void;
-    (e: 'blur', event: FocusEvent): void;
-    (e: 'change', payload: Event): void;
+    'update:modelValue': [payload: number];
+    'blur': [event: FocusEvent];
+    'change': [payload: Event];
 }
 export interface InputNumberSlots {
     increment(props?: {}): any;
@@ -241,7 +241,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
             default?(_: {}): any;
         };
     }) | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     blur: (event: FocusEvent) => any;
     change: (payload: Event) => any;
     "update:modelValue": (payload: number) => any;

package/dist/runtime/components/InputTags.vue

@@ -17,6 +17,7 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
   placeholder: { type: String, required: false },
+  maxLength: { type: Number, required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   size: { type: null, required: false },
@@ -138,6 +139,7 @@ defineExpose({
       ref="inputRef"
       v-bind="{ ...$attrs, ...ariaAttrs }"
       :placeholder="placeholder"
+      :max-length="maxLength"
       :class="ui.input({ class: props.ui?.input })"
     />
 

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

@@ -13,6 +13,8 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
     as?: any;
     /** The placeholder text when the input is empty. */
     placeholder?: string;
+    /** The maximum number of character allowed. */
+    maxLength?: number;
     /**
      * @defaultValue 'primary'
      */
@@ -61,8 +63,8 @@ declare const _default: <T extends InputTagItem>(__VLS_props: NonNullable<Awaite
         readonly onFocus?: ((event: FocusEvent) => any) | undefined;
         readonly onInvalid?: ((payload: T) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((payload: T[]) => any) | undefined;
-        readonly onRemoveTag?: ((payload: T) => any) | undefined;
         readonly onAddTag?: ((payload: T) => any) | undefined;
+        readonly onRemoveTag?: ((payload: T) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInvalid" | "onUpdate:modelValue" | "onRemoveTag" | "onAddTag"> & InputTagsProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<({
@@ -173,11 +175,11 @@ declare const _default: <T extends InputTagItem>(__VLS_props: NonNullable<Awaite
     }>): void;
     attrs: any;
     slots: InputTagsSlots<T>;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "removeTag", payload: T) => void) & ((evt: "addTag", payload: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Kbd.vue

@@ -11,6 +11,7 @@ import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false, default: "kbd" },
   value: { type: null, required: false },
+  color: { type: null, required: false },
   variant: { type: null, required: false },
   size: { type: null, required: false },
   class: { type: null, required: false }
@@ -22,7 +23,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.kbd || {} }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ variant, size, class: props.class })">
+  <Primitive :as="as" :class="ui({ class: props.class, color: props.color, variant: props.variant, size: props.size })">
     <slot>
       {{ getKbdKey(value) }}
     </slot>

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

@@ -10,6 +10,10 @@ export interface KbdProps {
      */
     as?: any;
     value?: KbdKey | string;
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: Kbd['variants']['color'];
     /**
      * @defaultValue 'outline'
      */
@@ -23,7 +27,7 @@ export interface KbdProps {
 export interface KbdSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<KbdProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, KbdSlots>;
 export default _default;

package/dist/runtime/components/Link.vue

@@ -4,11 +4,12 @@ import theme from "#build/ui/link";
 
 <script setup>
 import { computed } from "vue";
-import { defu } from "defu";
 import { isEqual } from "ohash/utils";
 import { useForwardProps } from "reka-ui";
+import { defu } from "defu";
 import { reactiveOmit } from "@vueuse/core";
 import { useRoute, useAppConfig } from "#imports";
+import { mergeClasses } from "../utils";
 import { tv } from "../utils/tv";
 import { isPartiallyEqual } from "../utils/link";
 import ULinkBase from "./LinkBase.vue";
@@ -21,7 +22,7 @@ const props = defineProps({
   exact: { type: Boolean, required: false },
   exactQuery: { type: [Boolean, String], required: false },
   exactHash: { type: Boolean, required: false },
-  inactiveClass: { type: String, required: false, default: "" },
+  inactiveClass: { type: String, required: false },
   custom: { type: Boolean, required: false },
   raw: { type: Boolean, required: false },
   class: { type: null, required: false },
@@ -35,7 +36,7 @@ const props = defineProps({
   prefetch: { type: Boolean, required: false },
   prefetchOn: { type: [String, Object], required: false },
   noPrefetch: { type: Boolean, required: false },
-  activeClass: { type: String, required: false, default: "" },
+  activeClass: { type: String, required: false },
   exactActiveClass: { type: String, required: false },
   ariaCurrentValue: { type: String, required: false, default: "page" },
   viewTransition: { type: Boolean, required: false },
@@ -50,8 +51,8 @@ const ui = computed(() => tv({
   ...defu({
     variants: {
       active: {
-        true: props.activeClass,
-        false: props.inactiveClass
+        true: mergeClasses(appConfig.ui?.link?.variants?.active?.true, props.activeClass),
+        false: mergeClasses(appConfig.ui?.link?.variants?.active?.false, props.inactiveClass)
       }
     }
   }, appConfig.ui?.link || {})

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

@@ -77,13 +77,11 @@ export interface LinkSlots {
         active: boolean;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
     type: "reset" | "submit" | "button";
     as: any;
-    activeClass: string;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
     active: boolean;
-    inactiveClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -11,7 +11,7 @@ export interface LinkBaseProps {
     active?: boolean;
     isExternal?: boolean;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
     type: string;
     as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -80,7 +80,7 @@ export interface ModalSlots {
         close: () => void;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
     "after:enter": () => any;
@@ -93,9 +93,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ModalProps
 }>, {
     close: boolean | Partial<ButtonProps>;
     modal: boolean;
+    transition: boolean;
     portal: boolean | string | HTMLElement;
     overlay: boolean;
-    transition: boolean;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
 export default _default;

package/dist/runtime/components/NavigationMenu.vue

@@ -18,6 +18,7 @@ import UIcon from "./Icon.vue";
 import UBadge from "./Badge.vue";
 import UPopover from "./Popover.vue";
 import UTooltip from "./Tooltip.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
   trailingIcon: { type: String, required: false },
@@ -121,7 +122,7 @@ function getAccordionDefaultValue(list, level = 0) {
       <component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'" v-if="(!collapsed || orientation !== 'vertical') && (item.badge || orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" as="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent>
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <UBadge
-            v-if="item.badge"
+            v-if="item.badge !== void 0"
             color="neutral"
             variant="outline"
             :size="item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
@@ -243,7 +244,7 @@ function getAccordionDefaultValue(list, level = 0) {
     </component>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">

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

@@ -166,5 +166,5 @@ declare const _default: <T extends ArrayOrNested<NavigationMenuItem>>(__VLS_prop
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -95,7 +95,7 @@ export interface PaginationSlots {
         index: number;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:page": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
     "onUpdate:page"?: ((value: number) => any) | undefined;