@nuxt/ui 4.11.1 → 4.11.2

package/dist/runtime/components/PinInput.vue

@@ -36,7 +36,7 @@ const _props = defineProps({
   required: { type: Boolean, required: false },
   type: { type: null, required: false, default: "text" }
 });
-const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
+const emits = defineEmits(["update:modelValue", "complete", "change", "blur", "focus"]);
 defineSlots();
 const props = useComponentProps("pinInput", _props);
 const appConfig = useAppConfig();
@@ -62,11 +62,19 @@ function onComplete(value) {
   emits("change", event);
   emitFormChange();
 }
-function onBlur(event) {
-  if (!event.relatedTarget) {
-    emits("blur", event);
-    emitFormBlur();
+function onFocusOut(event) {
+  if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+    return;
   }
+  emits("blur", event);
+  emitFormBlur();
+}
+function onFocusIn(event) {
+  if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+    return;
+  }
+  emits("focus", event);
+  emitFormFocus();
 }
 function autoFocus() {
   if (props.autofocus) {
@@ -111,6 +119,8 @@ defineExpose({
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
+    @focusout="onFocusOut"
+    @focusin="onFocusIn"
   >
     <template v-for="(ids, index) in looseToNumber(props.length)" :key="ids">
       <PinInputInput
@@ -119,8 +129,6 @@ defineExpose({
         data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         :disabled="disabled"
-        @blur="onBlur"
-        @focus="emitFormFocus"
       />
       <span
         v-if="shouldInsertSeparator(index)"

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

@@ -46,6 +46,7 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
 export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T> & {
     change: [event: Event];
     blur: [event: Event];
+    focus: [event: Event];
 };
 export interface PinInputSlots {
     separator?(props: {
@@ -58,6 +59,7 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
     props: import("vue").PublicProps & __VLS_PrettifyLocal<PinInputProps<T> & {
         onBlur?: ((event: Event) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onFocus?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
         onComplete?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -68,7 +70,7 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
     }>) => void;
     attrs: any;
     slots: PinInputSlots;
-    emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void);
+    emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -20,7 +20,7 @@ export interface ProgressGroupItem {
     color?: ProgressGroup['variants']['color'] | (string & {});
     slot?: string;
     class?: any;
-    ui?: Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>;
+    ui?: Partial<Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>>;
     [key: string]: any;
 }
 export interface ProgressGroupProps<T extends ProgressGroupItem = ProgressGroupItem> {

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

@@ -20,7 +20,7 @@ export interface ProgressGroupItem {
     color?: ProgressGroup['variants']['color'] | (string & {});
     slot?: string;
     class?: any;
-    ui?: Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>;
+    ui?: Partial<Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>>;
     [key: string]: any;
 }
 export interface ProgressGroupProps<T extends ProgressGroupItem = ProgressGroupItem> {

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

@@ -18,7 +18,7 @@ export type RadioGroupItem = RadioGroupValue | {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>;
+    ui?: Partial<Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>>;
     [key: string]: any;
 };
 export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<RadioGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'> {

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

@@ -18,7 +18,7 @@ export type RadioGroupItem = RadioGroupValue | {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>;
+    ui?: Partial<Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>>;
     [key: string]: any;
 };
 export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<RadioGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'> {

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

@@ -30,7 +30,7 @@ export type SelectItem = SelectValue | {
     disabled?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>>;
     [key: string]: any;
 };
 type ExcludeItem = {

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

@@ -30,7 +30,7 @@ export type SelectItem = SelectValue | {
     disabled?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>>;
     [key: string]: any;
 };
 type ExcludeItem = {

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

@@ -32,7 +32,7 @@ export type SelectMenuItem = SelectMenuValue | {
     disabled?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>>;
     [key: string]: any;
 };
 type ExcludeItem = {

package/dist/runtime/components/SelectMenu.vue

@@ -237,6 +237,14 @@ function onUpdateOpen(value) {
     clearTimeout(timeoutId);
   }
 }
+function onTriggerKeydown(e) {
+  if (isOpen.value) {
+    return;
+  }
+  const trigger = e.currentTarget;
+  e.preventDefault();
+  trigger.click();
+}
 function onCreate(e) {
   e.preventDefault();
   e.stopPropagation();
@@ -262,6 +270,9 @@ function isModelValueEmpty(modelValue) {
   return modelValue === void 0 || modelValue === null || modelValue === "";
 }
 function onClear() {
+  if (disabled.value) {
+    return;
+  }
   emits("clear");
 }
 function onMountAutoFocus(event) {
@@ -373,7 +384,9 @@ defineExpose({
         data-slot="base"
         :class="ui.base({ class: [props.ui?.base, props.class] })"
         tabindex="0"
-        v-bind="{ ...$attrs, ...ariaAttrs }"
+        v-bind="{ 'aria-label': void 0, ...$attrs, ...ariaAttrs }"
+        @keydown.down="onTriggerKeydown"
+        @keydown.up="onTriggerKeydown"
       >
         <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
@@ -395,7 +408,7 @@ defineExpose({
 
         <span v-if="isTrailing || !!slots.trailing || !!props.clear" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
-            <ComboboxCancel v-if="!!props.clear && !isModelValueEmpty(modelValue)" as-child>
+            <ComboboxCancel v-if="!!props.clear && !disabled && !isModelValueEmpty(modelValue)" as-child>
               <UButton
                 as="span"
                 :icon="props.clearIcon || appConfig.ui.icons.close"

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

@@ -32,7 +32,7 @@ export type SelectMenuItem = SelectMenuValue | {
     disabled?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>>;
     [key: string]: any;
 };
 type ExcludeItem = {

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

@@ -12,7 +12,7 @@ export interface SplitterItem extends Omit<SplitterPanelProps, 'as' | 'asChild'>
     id?: string;
     slot?: string;
     class?: any;
-    ui?: Pick<Splitter['slots'], 'panel'>;
+    ui?: Partial<Pick<Splitter['slots'], 'panel'>>;
     [key: string]: any;
 }
 export interface SplitterProps<T extends SplitterItem = SplitterItem> extends Pick<SplitterGroupProps, 'autoSaveId' | 'keyboardResizeBy' | 'storage'>, Pick<SplitterResizeHandleProps, 'hitAreaMargins'> {

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

@@ -12,7 +12,7 @@ export interface SplitterItem extends Omit<SplitterPanelProps, 'as' | 'asChild'>
     id?: string;
     slot?: string;
     class?: any;
-    ui?: Pick<Splitter['slots'], 'panel'>;
+    ui?: Partial<Pick<Splitter['slots'], 'panel'>>;
     [key: string]: any;
 }
 export interface SplitterProps<T extends SplitterItem = SplitterItem> extends Pick<SplitterGroupProps, 'autoSaveId' | 'keyboardResizeBy' | 'storage'>, Pick<SplitterResizeHandleProps, 'hitAreaMargins'> {

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

@@ -18,7 +18,7 @@ export interface StepperItem {
     content?: string;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Stepper['slots'], 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>;
+    ui?: Partial<Pick<Stepper['slots'], 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>>;
     [key: string]: any;
 }
 export interface StepperProps<T extends StepperItem = StepperItem> extends Pick<StepperRootProps, 'linear'> {

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

@@ -18,7 +18,7 @@ export interface StepperItem {
     content?: string;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Stepper['slots'], 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>;
+    ui?: Partial<Pick<Stepper['slots'], 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>>;
     [key: string]: any;
 }
 export interface StepperProps<T extends StepperItem = StepperItem> extends Pick<StepperRootProps, 'linear'> {

package/dist/runtime/components/Table.vue

@@ -259,12 +259,15 @@ function onRowSelect(e, row) {
     return;
   }
   const target = e.target;
-  const isInteractive = target.closest("button") || target.closest("a");
+  const isInteractive = target.closest("a, button, input, label, select, textarea");
   if (isInteractive) {
     return;
   }
   e.preventDefault();
   e.stopPropagation();
+  if (e.repeat) {
+    return;
+  }
   props.onSelect(e, row);
 }
 function onRowHover(e, row) {
@@ -299,6 +302,24 @@ function getColumnStyles(column) {
   }
   return styles;
 }
+function isSortable(column) {
+  return column.columnDef.enableSorting === true && column.getCanSort();
+}
+function getAriaSort(header) {
+  if (header.isPlaceholder || !isSortable(header.column)) {
+    return void 0;
+  }
+  const sorted = header.column.getIsSorted();
+  if (!sorted) {
+    return "none";
+  }
+  const sortableIds = new Set(tableApi.getVisibleLeafColumns().filter(isSortable).map((column) => column.id));
+  const primary = tableApi.getState().sorting.find(({ id }) => sortableIds.has(id));
+  if (primary?.id !== header.column.id) {
+    return "none";
+  }
+  return sorted === "asc" ? "ascending" : "descending";
+}
 watch(() => props.data, () => {
   data.value = props.data ? [...props.data] : [];
 }, props.watchOptions);
@@ -318,7 +339,6 @@ defineExpose({
       :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
       :data-expanded="row.getIsExpanded()"
       :data-pinned="row.getIsPinned() || void 0"
-      :role="props.onSelect ? 'button' : void 0"
       :tabindex="props.onSelect ? 0 : void 0"
       data-slot="tr"
       :class="ui.tr({
@@ -329,6 +349,7 @@ defineExpose({
 })"
       :style="[resolveValue(tableApi.options.meta?.style?.tr, row), style]"
       @click="onRowSelect($event, row)"
+      @keydown.self.exact.enter.space="onRowSelect($event, row)"
       @pointerenter="onRowHover($event, row)"
       @pointerleave="onRowHover($event, null)"
       @contextmenu="onRowContextmenu($event, row)"
@@ -382,6 +403,7 @@ defineExpose({
             :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            :aria-sort="getAriaSort(header)"
             data-slot="th"
             :class="ui.th({
   class: [

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

@@ -30,7 +30,7 @@ export interface TabsItem {
     value?: string | number;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>;
+    ui?: Partial<Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>>;
     [key: string]: any;
 }
 export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {

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

@@ -30,7 +30,7 @@ export interface TabsItem {
     value?: string | number;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>;
+    ui?: Partial<Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>>;
     [key: string]: any;
 }
 export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {

package/dist/runtime/components/Textarea.vue

@@ -10,7 +10,7 @@ import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
-import { looseToNumber } from "../utils";
+import { isEmpty, looseToNumber } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
@@ -77,11 +77,11 @@ function updateInput(value) {
   if (props.modelModifiers?.number) {
     value = looseToNumber(value);
   }
-  if (props.modelModifiers?.nullable) {
-    value ||= null;
+  if (props.modelModifiers?.nullable && isEmpty(value)) {
+    value = null;
   }
-  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null) {
-    value ||= void 0;
+  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null && isEmpty(value)) {
+    value = void 0;
   }
   modelValue.value = value;
   emitFormInput();

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

@@ -15,7 +15,7 @@ export interface TimelineItem {
     value?: string | number;
     slot?: string;
     class?: any;
-    ui?: Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>;
+    ui?: Partial<Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>>;
     [key: string]: any;
 }
 export interface TimelineProps<T extends TimelineItem = TimelineItem> {

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

@@ -15,7 +15,7 @@ export interface TimelineItem {
     value?: string | number;
     slot?: string;
     class?: any;
-    ui?: Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>;
+    ui?: Partial<Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>>;
     [key: string]: any;
 }
 export interface TimelineProps<T extends TimelineItem = TimelineItem> {

package/dist/runtime/components/Toaster.vue

@@ -81,7 +81,7 @@ function getOffset(index) {
       :key="toast.id"
       ref="refs"
       :progress="props.progress"
-      v-bind="omit(toast, ['id', 'close', '_duplicate', '_updated'])"
+      v-bind="omit(toast, ['id', 'close', '_duplicate', '_updated', 'onClick'])"
       :close="toast.close"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"

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

@@ -23,7 +23,7 @@ export type TreeItem = {
     onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
     onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
     class?: any;
-    ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
+    ui?: Partial<Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>>;
     [key: string]: any;
 };
 export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {

package/dist/runtime/components/Tree.vue

@@ -66,7 +66,7 @@ const flattenedPaddingFormula = computed(() => {
     xl: { base: 3, perLevel: 7.5 }
     // px-3, ms-6 + ps-1.5
   };
-  const config = sizeConfig[props.size || "md"];
+  const config = sizeConfig[props.size] ?? sizeConfig.md;
   return (level) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`;
 });
 const virtualizerProps = toRef(() => {

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

@@ -23,7 +23,7 @@ export type TreeItem = {
     onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
     onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
     class?: any;
-    ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
+    ui?: Partial<Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>>;
     [key: string]: any;
 };
 export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {

package/dist/runtime/components/content/ContentNavigation.d.vue.ts

@@ -28,7 +28,7 @@ export interface ContentNavigationLink extends ContentNavigationItem {
     defaultOpen?: boolean;
     active?: boolean;
     class?: any;
-    ui?: Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>;
+    ui?: Partial<Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>>;
 }
 export interface ContentNavigationProps<T extends ContentNavigationLink = ContentNavigationLink> extends Pick<AccordionRootProps, 'disabled' | 'type' | 'unmountOnHide'> {
     /**

package/dist/runtime/components/content/ContentNavigation.vue.d.ts

@@ -28,7 +28,7 @@ export interface ContentNavigationLink extends ContentNavigationItem {
     defaultOpen?: boolean;
     active?: boolean;
     class?: any;
-    ui?: Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>;
+    ui?: Partial<Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>>;
 }
 export interface ContentNavigationProps<T extends ContentNavigationLink = ContentNavigationLink> extends Pick<AccordionRootProps, 'disabled' | 'type' | 'unmountOnHide'> {
     /**

package/dist/runtime/components/content/ContentSurround.d.vue.ts

@@ -12,7 +12,7 @@ export interface ContentSurroundLink extends ContentNavigationItem {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>;
+    ui?: Partial<Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>>;
 }
 export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSurroundLink> {
     /**

package/dist/runtime/components/content/ContentSurround.vue.d.ts

@@ -12,7 +12,7 @@ export interface ContentSurroundLink extends ContentNavigationItem {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>;
+    ui?: Partial<Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>>;
 }
 export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSurroundLink> {
     /**

package/dist/runtime/components/content/ContentToc.d.vue.ts

@@ -8,7 +8,7 @@ import type { ComponentConfig } from '../../types/tv';
 type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc'>;
 export type ContentTocLink = TocLink & {
     class?: any;
-    ui?: Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>;
+    ui?: Partial<Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>>;
 };
 export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
     /**

package/dist/runtime/components/content/ContentToc.vue.d.ts

@@ -8,7 +8,7 @@ import type { ComponentConfig } from '../../types/tv';
 type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc'>;
 export type ContentTocLink = TocLink & {
     class?: any;
-    ui?: Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>;
+    ui?: Partial<Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>>;
 };
 export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
     /**

package/dist/runtime/composables/useForwardProps.js

@@ -1,9 +1,9 @@
-import { computed, isRef } from "vue";
+import { computed, unref } from "vue";
 import { useEmitAsProps } from "reka-ui";
 export function useForwardProps(source, emits) {
   const emitAsProps = emits ? useEmitAsProps(emits) : {};
   return computed(() => {
-    const src = isRef(source) ? source.value : source;
+    const src = unref(source);
     const out = { ...emitAsProps };
     for (const key in src) {
       const value = src[key];

package/dist/runtime/composables/useResizable.js

@@ -15,7 +15,7 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
     collapsedSize: 0,
     resizable: true,
     unit: "%",
-    ...isRef(options) ? options.value : options
+    ...unref(options)
   }));
   const { dir } = useLocale();
   const defaultStorageValue = {

package/dist/runtime/utils/virtualizer.d.ts

@@ -1,4 +1,4 @@
 /**
  * Get estimate size for virtualizers that checks each item individually
  */
-export declare function getEstimateSize(items: any[], size: 'xs' | 'sm' | 'md' | 'lg' | 'xl', descriptionKey?: string, hasDescriptionSlot?: boolean): (index: number) => number;
+export declare function getEstimateSize(items: any[], size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}), descriptionKey?: string, hasDescriptionSlot?: boolean): (index: number) => number;

package/dist/runtime/utils/virtualizer.js

@@ -7,22 +7,20 @@ function itemHasDescription(item, descriptionKey) {
   return value !== void 0 && value !== null && value !== "";
 }
 function getSize(size, hasDescription) {
-  if (hasDescription) {
-    return {
-      xs: 44,
-      sm: 48,
-      md: 52,
-      lg: 56,
-      xl: 60
-    }[size];
-  }
-  return {
+  const sizes = hasDescription ? {
+    xs: 44,
+    sm: 48,
+    md: 52,
+    lg: 56,
+    xl: 60
+  } : {
     xs: 24,
     sm: 28,
     md: 32,
     lg: 36,
     xl: 40
-  }[size];
+  };
+  return sizes[size] ?? sizes.md;
 }
 export function getEstimateSize(items, size, descriptionKey, hasDescriptionSlot) {
   const sizeWithDescription = getSize(size, true);

package/dist/runtime/vue/overrides/inertia/LinkBase.vue

@@ -23,11 +23,13 @@ function onClickWrapper(e) {
     e.preventDefault();
     return;
   }
+  const results = [];
   if (props.onClick) {
     for (const onClick of Array.isArray(props.onClick) ? props.onClick : [props.onClick]) {
-      onClick(e);
+      results.push(onClick(e));
     }
   }
+  return Promise.all(results);
 }
 </script>
 

package/dist/shared/{ui.DCJ9twx8.mjs → ui.oNygBd3N.mjs}

@@ -581,6 +581,9 @@ const fieldGroup$1 = {
       horizontal: "inline-flex -space-x-px",
       vertical: "flex flex-col -space-y-px"
     }
+  },
+  defaultVariants: {
+    size: "md"
   }
 };
 
@@ -3651,6 +3654,14 @@ const inputMenu = (options) => {
       tagsInput: "flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
     },
     variants: {
+      // `root` and `base` are the same element in `multiple` mode, so the
+      // `group-*` rounding utilities inherited from `input` never match there.
+      // Keep the `group` marker here and pick the right rounding in
+      // `compoundVariants` depending on `multiple`.
+      fieldGroup: {
+        horizontal: () => ({ root: fieldGroupVariantWithRoot.fieldGroup.horizontal.root }),
+        vertical: () => ({ root: fieldGroupVariantWithRoot.fieldGroup.vertical.root })
+      },
       virtualize: {
         true: {
           viewport: "p-1 isolate"
@@ -3731,6 +3742,22 @@ const inputMenu = (options) => {
       }
     },
     compoundVariants: [{
+      multiple: false,
+      fieldGroup: "horizontal",
+      class: { base: fieldGroupVariantWithRoot.fieldGroup.horizontal.base }
+    }, {
+      multiple: false,
+      fieldGroup: "vertical",
+      class: { base: fieldGroupVariantWithRoot.fieldGroup.vertical.base }
+    }, {
+      multiple: true,
+      fieldGroup: "horizontal",
+      class: { base: fieldGroupVariant.fieldGroup.horizontal }
+    }, {
+      multiple: true,
+      fieldGroup: "vertical",
+      class: { base: fieldGroupVariant.fieldGroup.vertical }
+    }, {
       variant: "soft",
       multiple: true,
       class: "has-focus:bg-elevated has-focus-visible:outline-3"
@@ -7005,7 +7032,7 @@ const table$1 = (options) => ({
     base: "min-w-full overflow-clip",
     caption: "sr-only",
     thead: "relative",
-    tbody: "isolate [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:outline-primary/25 [&>tr]:data-[selectable=true]:focus-visible:outline-3 divide-y divide-default",
+    tbody: "isolate [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:outline-primary/25 [&>tr]:data-[selectable=true]:focus-visible:outline-3 [&>tr]:data-[selectable=true]:-outline-offset-3 divide-y divide-default",
     tfoot: "relative",
     tr: "data-[selected=true]:bg-elevated/50",
     th: "px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&:has([role=checkbox])]:pe-0",