@ark-ui/vue 5.20.0 → 5.22.0

package/dist/components/field/use-field.d.ts

@@ -44,9 +44,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
     required: boolean | undefined;
     getLabelProps: () => {
         id: string;
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         htmlFor: string;
         "data-scope": string;
         "data-part": string;
@@ -54,9 +54,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
     getRootProps: () => {
         id: string;
         role: string;
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
     };
@@ -65,9 +65,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
         "data-part": string;
         'aria-describedby': string | undefined;
         'aria-invalid': "true" | undefined;
-        'data-invalid': boolean | "true" | "false";
-        'data-required': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-invalid': boolean | "false" | "true";
+        'data-required': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         id: string;
         required: boolean | undefined;
         disabled: boolean | undefined;
@@ -78,9 +78,9 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
         "data-part": string;
         'aria-describedby': string | undefined;
         'aria-invalid': "true" | undefined;
-        'data-invalid': boolean | "true" | "false";
-        'data-required': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-invalid': boolean | "false" | "true";
+        'data-required': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         id: string;
         required: boolean | undefined;
         disabled: boolean | undefined;
@@ -91,16 +91,16 @@ export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<
         "data-part": string;
         'aria-describedby': string | undefined;
         'aria-invalid': "true" | undefined;
-        'data-invalid': boolean | "true" | "false";
-        'data-required': boolean | "true" | "false";
-        'data-readonly': boolean | "true" | "false";
+        'data-invalid': boolean | "false" | "true";
+        'data-required': boolean | "false" | "true";
+        'data-readonly': boolean | "false" | "true";
         id: string;
         required: boolean | undefined;
         disabled: boolean | undefined;
         readOnly: boolean | undefined;
     };
     getHelperTextProps: () => {
-        'data-disabled': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
         id: string;

package/dist/components/fieldset/fieldset-legend.vue.cjs

@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const fieldset = useFieldsetContext.useFieldsetContext();
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).legend, vue.mergeProps(vue.unref(fieldset).getLegendProps(), { "as-child": _ctx.asChild }), {
+      return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps(vue.unref(fieldset).getLegendProps(), { "as-child": _ctx.asChild }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),

package/dist/components/fieldset/fieldset-legend.vue.js

@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const fieldset = useFieldsetContext();
     useForwardExpose();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ark).legend, mergeProps(unref(fieldset).getLegendProps(), { "as-child": _ctx.asChild }), {
+      return openBlock(), createBlock(unref(ark).div, mergeProps(unref(fieldset).getLegendProps(), { "as-child": _ctx.asChild }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),

package/dist/components/fieldset/use-fieldset.cjs

@@ -52,13 +52,14 @@ const useFieldset = (props) => {
       disabled,
       "data-disabled": domQuery.dataAttr(!!disabled),
       "data-invalid": domQuery.dataAttr(invalid),
+      "aria-labelledby": labelId,
       "aria-describedby": labelIds.join(" ")
     });
     const getLegendProps = () => ({
       id: labelId,
       ...fieldset_anatomy.parts.legend.attrs,
       "data-disabled": domQuery.dataAttr(!!disabled),
-      "data-invalid": domQuery.dataAttr(!!invalid)
+      "data-invalid": domQuery.dataAttr(invalid)
     });
     const getHelperTextProps = () => ({
       id: helperTextId,

package/dist/components/fieldset/use-fieldset.d.cts

@@ -18,12 +18,12 @@ export declare const useFieldset: (props: MaybeRef<UseFieldsetProps>) => Compute
     refs: {
         rootRef: Ref<null, null>;
     };
-    disabled: boolean | "true" | "false" | undefined;
+    disabled: boolean | "false" | "true" | undefined;
     invalid: boolean | undefined;
     getRootProps: () => FieldsetHTMLAttributes;
     getLegendProps: () => {
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
         id: string;

package/dist/components/fieldset/use-fieldset.d.ts

@@ -18,12 +18,12 @@ export declare const useFieldset: (props: MaybeRef<UseFieldsetProps>) => Compute
     refs: {
         rootRef: Ref<null, null>;
     };
-    disabled: boolean | "true" | "false" | undefined;
+    disabled: boolean | "false" | "true" | undefined;
     invalid: boolean | undefined;
     getRootProps: () => FieldsetHTMLAttributes;
     getLegendProps: () => {
-        'data-disabled': boolean | "true" | "false";
-        'data-invalid': boolean | "true" | "false";
+        'data-disabled': boolean | "false" | "true";
+        'data-invalid': boolean | "false" | "true";
         "data-scope": string;
         "data-part": string;
         id: string;

package/dist/components/fieldset/use-fieldset.js

@@ -48,13 +48,14 @@ const useFieldset = (props) => {
       disabled,
       "data-disabled": dataAttr(!!disabled),
       "data-invalid": dataAttr(invalid),
+      "aria-labelledby": labelId,
       "aria-describedby": labelIds.join(" ")
     });
     const getLegendProps = () => ({
       id: labelId,
       ...parts.legend.attrs,
       "data-disabled": dataAttr(!!disabled),
-      "data-invalid": dataAttr(!!invalid)
+      "data-invalid": dataAttr(invalid)
     });
     const getHelperTextProps = () => ({
       id: helperTextId,

package/dist/components/hover-card/hover-card-root.vue.cjs

@@ -13,6 +13,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: /* @__PURE__ */ vue.mergeDefaults({
     closeDelay: {},
     defaultOpen: { type: Boolean },
+    disabled: { type: Boolean },
     id: {},
     ids: {},
     open: { type: Boolean },
@@ -22,6 +23,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     unmountOnExit: { type: Boolean }
   }, {
     defaultOpen: void 0,
+    disabled: void 0,
     open: void 0
   }),
   emits: ["focusOutside", "interactOutside", "openChange", "pointerDownOutside", "update:open"],

package/dist/components/hover-card/hover-card-root.vue.d.cts

@@ -22,6 +22,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<HoverCardRootPr
     onInteractOutside?: ((event: InteractOutsideEvent) => any) | undefined;
     onPointerDownOutside?: ((event: PointerDownOutsideEvent) => any) | undefined;
 }>, {
+    disabled: boolean;
     open: boolean;
     defaultOpen: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {

package/dist/components/hover-card/hover-card-root.vue.d.ts

@@ -22,6 +22,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<HoverCardRootPr
     onInteractOutside?: ((event: InteractOutsideEvent) => any) | undefined;
     onPointerDownOutside?: ((event: PointerDownOutsideEvent) => any) | undefined;
 }>, {
+    disabled: boolean;
     open: boolean;
     defaultOpen: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {

package/dist/components/hover-card/hover-card-root.vue.js

@@ -9,6 +9,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: /* @__PURE__ */ mergeDefaults({
     closeDelay: {},
     defaultOpen: { type: Boolean },
+    disabled: { type: Boolean },
     id: {},
     ids: {},
     open: { type: Boolean },
@@ -18,6 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     unmountOnExit: { type: Boolean }
   }, {
     defaultOpen: void 0,
+    disabled: void 0,
     open: void 0
   }),
   emits: ["focusOutside", "interactOutside", "openChange", "pointerDownOutside", "update:open"],

package/dist/components/hover-card/hover-card.types.d.cts

@@ -10,6 +10,10 @@ export interface RootProps {
      * Use when you don't need to control the open state of the hover card.
      */
     defaultOpen?: boolean;
+    /**
+     * Whether the hover card is disabled
+     */
+    disabled?: boolean;
     /**
      * The unique identifier of the machine.
      */

package/dist/components/hover-card/hover-card.types.d.ts

@@ -10,6 +10,10 @@ export interface RootProps {
      * Use when you don't need to control the open state of the hover card.
      */
     defaultOpen?: boolean;
+    /**
+     * Whether the hover card is disabled
+     */
+    disabled?: boolean;
     /**
      * The unique identifier of the machine.
      */

package/dist/components/index.cjs

@@ -86,6 +86,12 @@ const collapsibleIndicator_vue_vue_type_script_setup_true_lang = require('./coll
 const useCollapsible = require('./collapsible/use-collapsible.cjs');
 const useCollapsibleContext = require('./collapsible/use-collapsible-context.cjs');
 const collapsible$1 = require('./collapsible/collapsible.cjs');
+const gridCollection = require('./collection/grid-collection.cjs');
+const listCollection = require('./collection/list-collection.cjs');
+const treeCollection = require('./collection/tree-collection.cjs');
+const useAsyncList = require('./collection/use-async-list.cjs');
+const useListCollection = require('./collection/use-list-collection.cjs');
+const useListSelection = require('./collection/use-list-selection.cjs');
 const colorPicker = require('@zag-js/color-picker');
 const colorPickerAreaBackground_vue_vue_type_script_setup_true_lang = require('./color-picker/color-picker-area-background.vue.cjs');
 const colorPickerAreaThumb_vue_vue_type_script_setup_true_lang = require('./color-picker/color-picker-area-thumb.vue.cjs');
@@ -120,11 +126,9 @@ const colorPicker_anatomy = require('./color-picker/color-picker.anatomy.cjs');
 const useColorPicker = require('./color-picker/use-color-picker.cjs');
 const useColorPickerContext = require('./color-picker/use-color-picker-context.cjs');
 const colorPicker$1 = require('./color-picker/color-picker.cjs');
-const listCollection = require('./collection/list-collection.cjs');
-const treeCollection = require('./collection/tree-collection.cjs');
-const useListCollection = require('./collection/use-list-collection.cjs');
 const comboboxClearTrigger_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-clear-trigger.vue.cjs');
 const comboboxContent_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-content.vue.cjs');
+const comboboxEmpty_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-empty.vue.cjs');
 const comboboxContext_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-context.vue.cjs');
 const comboboxControl_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-control.vue.cjs');
 const comboboxInput_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-input.vue.cjs');
@@ -140,10 +144,11 @@ const comboboxPositioner_vue_vue_type_script_setup_true_lang = require('./combob
 const comboboxRootProvider_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-root-provider.vue.cjs');
 const comboboxRoot_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-root.vue.cjs');
 const comboboxTrigger_vue_vue_type_script_setup_true_lang = require('./combobox/combobox-trigger.vue.cjs');
+const combobox_anatomy = require('./combobox/combobox.anatomy.cjs');
 const useCombobox = require('./combobox/use-combobox.cjs');
 const useComboboxContext = require('./combobox/use-combobox-context.cjs');
 const useComboboxItemContext = require('./combobox/use-combobox-item-context.cjs');
-const combobox$1 = require('./combobox/combobox.cjs');
+const combobox = require('./combobox/combobox.cjs');
 const datePicker = require('@zag-js/date-picker');
 const datePickerClearTrigger_vue_vue_type_script_setup_true_lang = require('./date-picker/date-picker-clear-trigger.vue.cjs');
 const datePickerContent_vue_vue_type_script_setup_true_lang = require('./date-picker/date-picker-content.vue.cjs');
@@ -289,6 +294,7 @@ const useJsonTreeView = require('./json-tree-view/use-json-tree-view.cjs');
 const jsonTreeView = require('./json-tree-view/json-tree-view.cjs');
 const listboxContext_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-context.vue.cjs');
 const listboxContent_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-content.vue.cjs');
+const listboxEmpty_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-empty.vue.cjs');
 const listboxInput_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-input.vue.cjs');
 const listboxItem_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-item.vue.cjs');
 const listboxItemContext_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-item-context.vue.cjs');
@@ -300,10 +306,11 @@ const listboxLabel_vue_vue_type_script_setup_true_lang = require('./listbox/list
 const listboxRoot_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-root.vue.cjs');
 const listboxRootProvider_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-root-provider.vue.cjs');
 const listboxValueText_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-value-text.vue.cjs');
+const listbox_anatomy = require('./listbox/listbox.anatomy.cjs');
 const useListbox = require('./listbox/use-listbox.cjs');
 const useListboxContext = require('./listbox/use-listbox-context.cjs');
 const useListboxItemContext = require('./listbox/use-listbox-item-context.cjs');
-const listbox$1 = require('./listbox/listbox.cjs');
+const listbox = require('./listbox/listbox.cjs');
 const menuArrowTip_vue_vue_type_script_setup_true_lang = require('./menu/menu-arrow-tip.vue.cjs');
 const menuArrow_vue_vue_type_script_setup_true_lang = require('./menu/menu-arrow.vue.cjs');
 const menuCheckboxItem_vue_vue_type_script_setup_true_lang = require('./menu/menu-checkbox-item.vue.cjs');
@@ -694,13 +701,11 @@ const avatar = require('@zag-js/avatar');
 const carousel = require('@zag-js/carousel');
 const clipboard = require('@zag-js/clipboard');
 const collapsible = require('@zag-js/collapsible');
-const combobox = require('@zag-js/combobox');
 const dialog = require('@zag-js/dialog');
 const editable = require('@zag-js/editable');
 const fileUpload = require('@zag-js/file-upload');
 const floatingPanel = require('@zag-js/floating-panel');
 const hoverCard = require('@zag-js/hover-card');
-const listbox = require('@zag-js/listbox');
 const menu = require('@zag-js/menu');
 const numberInput = require('@zag-js/number-input');
 const pagination = require('@zag-js/pagination');
@@ -813,6 +818,13 @@ exports.CollapsibleIndicator = collapsibleIndicator_vue_vue_type_script_setup_tr
 exports.useCollapsible = useCollapsible.useCollapsible;
 exports.useCollapsibleContext = useCollapsibleContext.useCollapsibleContext;
 exports.Collapsible = collapsible$1;
+exports.createGridCollection = gridCollection.createGridCollection;
+exports.createListCollection = listCollection.createListCollection;
+exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
+exports.createTreeCollection = treeCollection.createTreeCollection;
+exports.useAsyncList = useAsyncList.useAsyncList;
+exports.useListCollection = useListCollection.useListCollection;
+exports.useListSelection = useListSelection.useListSelection;
 Object.defineProperty(exports, "parseColor", {
 	enumerable: true,
 	get: () => colorPicker.parse
@@ -850,12 +862,9 @@ exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
 exports.useColorPicker = useColorPicker.useColorPicker;
 exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
 exports.ColorPicker = colorPicker$1;
-exports.createListCollection = listCollection.createListCollection;
-exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
-exports.createTreeCollection = treeCollection.createTreeCollection;
-exports.useListCollection = useListCollection.useListCollection;
 exports.ComboboxClearTrigger = comboboxClearTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxContent = comboboxContent_vue_vue_type_script_setup_true_lang.default;
+exports.ComboboxEmpty = comboboxEmpty_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxContext = comboboxContext_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxControl = comboboxControl_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxInput = comboboxInput_vue_vue_type_script_setup_true_lang.default;
@@ -871,10 +880,11 @@ exports.ComboboxPositioner = comboboxPositioner_vue_vue_type_script_setup_true_l
 exports.ComboboxRootProvider = comboboxRootProvider_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxRoot = comboboxRoot_vue_vue_type_script_setup_true_lang.default;
 exports.ComboboxTrigger = comboboxTrigger_vue_vue_type_script_setup_true_lang.default;
+exports.comboboxAnatomy = combobox_anatomy.comboboxAnatomy;
 exports.useCombobox = useCombobox.useCombobox;
 exports.useComboboxContext = useComboboxContext.useComboboxContext;
 exports.useComboboxItemContext = useComboboxItemContext.useComboboxItemContext;
-exports.Combobox = combobox$1;
+exports.Combobox = combobox;
 Object.defineProperty(exports, "parseDate", {
 	enumerable: true,
 	get: () => datePicker.parse
@@ -1024,6 +1034,7 @@ exports.useJsonTreeView = useJsonTreeView.useJsonTreeView;
 exports.JsonTreeView = jsonTreeView;
 exports.ListboxContext = listboxContext_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxContent = listboxContent_vue_vue_type_script_setup_true_lang.default;
+exports.ListboxEmpty = listboxEmpty_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxInput = listboxInput_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxItem = listboxItem_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxItemContext = listboxItemContext_vue_vue_type_script_setup_true_lang.default;
@@ -1035,10 +1046,11 @@ exports.ListboxLabel = listboxLabel_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxRoot = listboxRoot_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxRootProvider = listboxRootProvider_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxValueText = listboxValueText_vue_vue_type_script_setup_true_lang.default;
+exports.listboxAnatomy = listbox_anatomy.listboxAnatomy;
 exports.useListbox = useListbox.useListbox;
 exports.useListboxContext = useListboxContext.useListboxContext;
 exports.useListboxItemContext = useListboxItemContext.useListboxItemContext;
-exports.Listbox = listbox$1;
+exports.Listbox = listbox;
 exports.MenuArrowTip = menuArrowTip_vue_vue_type_script_setup_true_lang.default;
 exports.MenuArrow = menuArrow_vue_vue_type_script_setup_true_lang.default;
 exports.MenuCheckboxItem = menuCheckboxItem_vue_vue_type_script_setup_true_lang.default;
@@ -1451,10 +1463,6 @@ Object.defineProperty(exports, "collapsibleAnatomy", {
 	enumerable: true,
 	get: () => collapsible.anatomy
 });
-Object.defineProperty(exports, "comboboxAnatomy", {
-	enumerable: true,
-	get: () => combobox.anatomy
-});
 Object.defineProperty(exports, "dialogAnatomy", {
 	enumerable: true,
 	get: () => dialog.anatomy
@@ -1475,10 +1483,6 @@ Object.defineProperty(exports, "hoverCardAnatomy", {
 	enumerable: true,
 	get: () => hoverCard.anatomy
 });
-Object.defineProperty(exports, "listboxAnatomy", {
-	enumerable: true,
-	get: () => listbox.anatomy
-});
 Object.defineProperty(exports, "menuAnatomy", {
 	enumerable: true,
 	get: () => menu.anatomy

package/dist/components/index.d.cts

@@ -6,6 +6,7 @@ export * from './checkbox';
 export * from './client-only';
 export * from './clipboard';
 export * from './collapsible';
+export * from './collection';
 export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './checkbox';
 export * from './client-only';
 export * from './clipboard';
 export * from './collapsible';
+export * from './collection';
 export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';

package/dist/components/index.js

@@ -89,6 +89,12 @@ export { useCollapsible } from './collapsible/use-collapsible.js';
 export { useCollapsibleContext } from './collapsible/use-collapsible-context.js';
 import * as collapsible from './collapsible/collapsible.js';
 export { collapsible as Collapsible };
+export { createGridCollection } from './collection/grid-collection.js';
+export { createListCollection } from './collection/list-collection.js';
+export { createFileTreeCollection, createTreeCollection } from './collection/tree-collection.js';
+export { useAsyncList } from './collection/use-async-list.js';
+export { useListCollection } from './collection/use-list-collection.js';
+export { useListSelection } from './collection/use-list-selection.js';
 export { parse as parseColor } from '@zag-js/color-picker';
 export { default as ColorPickerAreaBackground } from './color-picker/color-picker-area-background.vue.js';
 export { default as ColorPickerAreaThumb } from './color-picker/color-picker-area-thumb.vue.js';
@@ -124,11 +130,9 @@ export { useColorPicker } from './color-picker/use-color-picker.js';
 export { useColorPickerContext } from './color-picker/use-color-picker-context.js';
 import * as colorPicker from './color-picker/color-picker.js';
 export { colorPicker as ColorPicker };
-export { createListCollection } from './collection/list-collection.js';
-export { createFileTreeCollection, createTreeCollection } from './collection/tree-collection.js';
-export { useListCollection } from './collection/use-list-collection.js';
 export { default as ComboboxClearTrigger } from './combobox/combobox-clear-trigger.vue.js';
 export { default as ComboboxContent } from './combobox/combobox-content.vue.js';
+export { default as ComboboxEmpty } from './combobox/combobox-empty.vue.js';
 export { default as ComboboxContext } from './combobox/combobox-context.vue.js';
 export { default as ComboboxControl } from './combobox/combobox-control.vue.js';
 export { default as ComboboxInput } from './combobox/combobox-input.vue.js';
@@ -144,6 +148,7 @@ export { default as ComboboxPositioner } from './combobox/combobox-positioner.vu
 export { default as ComboboxRootProvider } from './combobox/combobox-root-provider.vue.js';
 export { default as ComboboxRoot } from './combobox/combobox-root.vue.js';
 export { default as ComboboxTrigger } from './combobox/combobox-trigger.vue.js';
+export { comboboxAnatomy } from './combobox/combobox.anatomy.js';
 export { useCombobox } from './combobox/use-combobox.js';
 export { useComboboxContext } from './combobox/use-combobox-context.js';
 export { useComboboxItemContext } from './combobox/use-combobox-item-context.js';
@@ -304,6 +309,7 @@ import * as jsonTreeView from './json-tree-view/json-tree-view.js';
 export { jsonTreeView as JsonTreeView };
 export { default as ListboxContext } from './listbox/listbox-context.vue.js';
 export { default as ListboxContent } from './listbox/listbox-content.vue.js';
+export { default as ListboxEmpty } from './listbox/listbox-empty.vue.js';
 export { default as ListboxInput } from './listbox/listbox-input.vue.js';
 export { default as ListboxItem } from './listbox/listbox-item.vue.js';
 export { default as ListboxItemContext } from './listbox/listbox-item-context.vue.js';
@@ -315,6 +321,7 @@ export { default as ListboxLabel } from './listbox/listbox-label.vue.js';
 export { default as ListboxRoot } from './listbox/listbox-root.vue.js';
 export { default as ListboxRootProvider } from './listbox/listbox-root-provider.vue.js';
 export { default as ListboxValueText } from './listbox/listbox-value-text.vue.js';
+export { listboxAnatomy } from './listbox/listbox.anatomy.js';
 export { useListbox } from './listbox/use-listbox.js';
 export { useListboxContext } from './listbox/use-listbox-context.js';
 export { useListboxItemContext } from './listbox/use-listbox-item-context.js';
@@ -738,13 +745,11 @@ export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
 export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
-export { anatomy as listboxAnatomy } from '@zag-js/listbox';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
 export { anatomy as paginationAnatomy } from '@zag-js/pagination';

package/dist/components/listbox/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const listCollection = require('../collection/list-collection.cjs');
 const listboxContext_vue_vue_type_script_setup_true_lang = require('./listbox-context.vue.cjs');
 const listboxContent_vue_vue_type_script_setup_true_lang = require('./listbox-content.vue.cjs');
+const listboxEmpty_vue_vue_type_script_setup_true_lang = require('./listbox-empty.vue.cjs');
 const listboxInput_vue_vue_type_script_setup_true_lang = require('./listbox-input.vue.cjs');
 const listboxItem_vue_vue_type_script_setup_true_lang = require('./listbox-item.vue.cjs');
 const listboxItemContext_vue_vue_type_script_setup_true_lang = require('./listbox-item-context.vue.cjs');
@@ -16,17 +17,18 @@ const listboxLabel_vue_vue_type_script_setup_true_lang = require('./listbox-labe
 const listboxRoot_vue_vue_type_script_setup_true_lang = require('./listbox-root.vue.cjs');
 const listboxRootProvider_vue_vue_type_script_setup_true_lang = require('./listbox-root-provider.vue.cjs');
 const listboxValueText_vue_vue_type_script_setup_true_lang = require('./listbox-value-text.vue.cjs');
+const listbox_anatomy = require('./listbox.anatomy.cjs');
 const useListbox = require('./use-listbox.cjs');
 const useListboxContext = require('./use-listbox-context.cjs');
 const useListboxItemContext = require('./use-listbox-item-context.cjs');
-const listbox$1 = require('./listbox.cjs');
-const listbox = require('@zag-js/listbox');
+const listbox = require('./listbox.cjs');
 
 
 
 exports.createListCollection = listCollection.createListCollection;
 exports.ListboxContext = listboxContext_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxContent = listboxContent_vue_vue_type_script_setup_true_lang.default;
+exports.ListboxEmpty = listboxEmpty_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxInput = listboxInput_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxItem = listboxItem_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxItemContext = listboxItemContext_vue_vue_type_script_setup_true_lang.default;
@@ -38,11 +40,8 @@ exports.ListboxLabel = listboxLabel_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxRoot = listboxRoot_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxRootProvider = listboxRootProvider_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxValueText = listboxValueText_vue_vue_type_script_setup_true_lang.default;
+exports.listboxAnatomy = listbox_anatomy.listboxAnatomy;
 exports.useListbox = useListbox.useListbox;
 exports.useListboxContext = useListboxContext.useListboxContext;
 exports.useListboxItemContext = useListboxItemContext.useListboxItemContext;
-exports.Listbox = listbox$1;
-Object.defineProperty(exports, "listboxAnatomy", {
-  enumerable: true,
-  get: () => listbox.anatomy
-});
+exports.Listbox = listbox;

package/dist/components/listbox/index.d.cts

@@ -2,6 +2,7 @@ export type { HighlightChangeDetails as ListboxHighlightChangeDetails, ScrollToI
 export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
 export { default as ListboxContext, type ListboxContextProps } from './listbox-context.vue';
 export { default as ListboxContent, type ListboxContentBaseProps, type ListboxContentProps, } from './listbox-content.vue';
+export { default as ListboxEmpty, type ListboxEmptyBaseProps, type ListboxEmptyProps } from './listbox-empty.vue';
 export { default as ListboxInput, type ListboxInputBaseProps, type ListboxInputProps } from './listbox-input.vue';
 export { default as ListboxItem, type ListboxItemBaseProps, type ListboxItemProps } from './listbox-item.vue';
 export { default as ListboxItemContext, type ListboxItemContextProps } from './listbox-item-context.vue';

package/dist/components/listbox/index.d.ts

@@ -2,6 +2,7 @@ export type { HighlightChangeDetails as ListboxHighlightChangeDetails, ScrollToI
 export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
 export { default as ListboxContext, type ListboxContextProps } from './listbox-context.vue';
 export { default as ListboxContent, type ListboxContentBaseProps, type ListboxContentProps, } from './listbox-content.vue';
+export { default as ListboxEmpty, type ListboxEmptyBaseProps, type ListboxEmptyProps } from './listbox-empty.vue';
 export { default as ListboxInput, type ListboxInputBaseProps, type ListboxInputProps } from './listbox-input.vue';
 export { default as ListboxItem, type ListboxItemBaseProps, type ListboxItemProps } from './listbox-item.vue';
 export { default as ListboxItemContext, type ListboxItemContextProps } from './listbox-item-context.vue';

package/dist/components/listbox/index.js

@@ -1,6 +1,7 @@
 export { createListCollection } from '../collection/list-collection.js';
 export { default as ListboxContext } from './listbox-context.vue.js';
 export { default as ListboxContent } from './listbox-content.vue.js';
+export { default as ListboxEmpty } from './listbox-empty.vue.js';
 export { default as ListboxInput } from './listbox-input.vue.js';
 export { default as ListboxItem } from './listbox-item.vue.js';
 export { default as ListboxItemContext } from './listbox-item-context.vue.js';
@@ -12,9 +13,9 @@ export { default as ListboxLabel } from './listbox-label.vue.js';
 export { default as ListboxRoot } from './listbox-root.vue.js';
 export { default as ListboxRootProvider } from './listbox-root-provider.vue.js';
 export { default as ListboxValueText } from './listbox-value-text.vue.js';
+export { listboxAnatomy } from './listbox.anatomy.js';
 export { useListbox } from './use-listbox.js';
 export { useListboxContext } from './use-listbox-context.js';
 export { useListboxItemContext } from './use-listbox-item-context.js';
 import * as listbox from './listbox.js';
 export { listbox as Listbox };
-export { anatomy as listboxAnatomy } from '@zag-js/listbox';

package/dist/components/listbox/listbox-empty.vue.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const factory = require('../factory.cjs');
+const listbox_anatomy = require('./listbox.anatomy.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+const useForwardExpose = require('../../utils/use-forward-expose.cjs');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "listbox-empty",
+  props: {
+    asChild: { type: Boolean }
+  },
+  setup(__props) {
+    const parts = listbox_anatomy.listboxAnatomy.build();
+    const listbox = useListboxContext.useListboxContext();
+    const isEmpty = vue.computed(() => listbox.value.collection.size === 0);
+    useForwardExpose.useForwardExpose();
+    return (_ctx, _cache) => {
+      return isEmpty.value ? (vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps({ key: 0 }, vue.unref(parts).empty.attrs, {
+        role: "presentation",
+        "as-child": _ctx.asChild
+      }), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as-child"])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/components/listbox/listbox-empty.vue.d.cts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { PolymorphicProps } from '../factory';
+export interface ListboxEmptyBaseProps extends PolymorphicProps {
+}
+export interface ListboxEmptyProps extends ListboxEmptyBaseProps, 
+/**
+ * @vue-ignore
+ */
+HTMLAttributes {
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<ListboxEmptyProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ListboxEmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};