@ark-ui/svelte 5.6.0 → 5.7.0

package/dist/components/combobox/combobox-empty.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ComboboxEmptyBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ComboboxEmptyProps extends Assign<HTMLProps<'div'>, ComboboxEmptyBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Ark } from '../factory'
+  import { comboboxAnatomy } from './combobox.anatomy'
+  import { useComboboxContext } from './use-combobox-context'
+
+  const parts = comboboxAnatomy.build()
+
+  let { ref = $bindable(null), ...props }: ComboboxEmptyProps = $props()
+
+  const combobox = useComboboxContext()
+  const isEmpty = $derived(combobox().collection.size === 0)
+</script>
+
+{#if isEmpty}
+  <Ark as="div" bind:ref {...parts.empty.attrs} {...props} role="presentation" />
+{/if}

package/dist/components/combobox/combobox-empty.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ComboboxEmptyBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface ComboboxEmptyProps extends Assign<HTMLProps<'div'>, ComboboxEmptyBaseProps> {
+}
+declare const ComboboxEmpty: import("svelte").Component<ComboboxEmptyProps, {}, "ref">;
+type ComboboxEmpty = ReturnType<typeof ComboboxEmpty>;
+export default ComboboxEmpty;

package/dist/components/combobox/combobox.anatomy.d.ts

@@ -1 +1 @@
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
+export declare const comboboxAnatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "list" | "root" | "content" | "trigger" | "control" | "positioner" | "clearTrigger" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;

package/dist/components/combobox/combobox.anatomy.js

@@ -1 +1,2 @@
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
+import { anatomy } from '@zag-js/combobox';
+export const comboboxAnatomy = anatomy.extendWith('empty');

package/dist/components/combobox/combobox.d.ts

@@ -1,6 +1,7 @@
 export type { HighlightChangeDetails, InputValueChangeDetails, OpenChangeDetails, SelectionDetails, ValueChangeDetails, } from '@zag-js/combobox';
 export { default as ClearTrigger, type ComboboxClearTriggerProps as ClearTriggerProps, type ComboboxClearTriggerBaseProps as ClearTriggerBaseProps, } from './combobox-clear-trigger.svelte';
 export { default as Content, type ComboboxContentProps as ContentProps, type ComboboxContentBaseProps as ContentBaseProps, } from './combobox-content.svelte';
+export { default as Empty, type ComboboxEmptyProps as EmptyProps, type ComboboxEmptyBaseProps as EmptyBaseProps, } from './combobox-empty.svelte';
 export { default as Context, type ComboboxContextProps as ContextProps } from './combobox-context.svelte';
 export { default as Control, type ComboboxControlProps as ControlProps, type ComboboxControlBaseProps as ControlBaseProps, } from './combobox-control.svelte';
 export { default as Input, type ComboboxInputProps as InputProps, type ComboboxInputBaseProps as InputBaseProps, } from './combobox-input.svelte';

package/dist/components/combobox/combobox.js

@@ -1,5 +1,6 @@
 export { default as ClearTrigger, } from './combobox-clear-trigger.svelte';
 export { default as Content, } from './combobox-content.svelte';
+export { default as Empty, } from './combobox-empty.svelte';
 export { default as Context } from './combobox-context.svelte';
 export { default as Control, } from './combobox-control.svelte';
 export { default as Input, } from './combobox-input.svelte';

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

@@ -2,6 +2,7 @@ export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputVal
 export { createListCollection, useListCollection, type CollectionItem, type ListCollection, type UseListCollectionProps, } from '../collection';
 export { default as ComboboxClearTrigger, type ComboboxClearTriggerProps, type ComboboxClearTriggerBaseProps, } from './combobox-clear-trigger.svelte';
 export { default as ComboboxContent, type ComboboxContentProps, type ComboboxContentBaseProps, } from './combobox-content.svelte';
+export { default as ComboboxEmpty, type ComboboxEmptyProps, type ComboboxEmptyBaseProps } from './combobox-empty.svelte';
 export { default as ComboboxContext, type ComboboxContextProps } from './combobox-context.svelte';
 export { default as ComboboxControl, type ComboboxControlProps, type ComboboxControlBaseProps, } from './combobox-control.svelte';
 export { default as ComboboxInput, type ComboboxInputProps, type ComboboxInputBaseProps } from './combobox-input.svelte';

package/dist/components/combobox/index.js

@@ -1,6 +1,7 @@
 export { createListCollection, useListCollection, } from '../collection';
 export { default as ComboboxClearTrigger, } from './combobox-clear-trigger.svelte';
 export { default as ComboboxContent, } from './combobox-content.svelte';
+export { default as ComboboxEmpty } from './combobox-empty.svelte';
 export { default as ComboboxContext } from './combobox-context.svelte';
 export { default as ComboboxControl, } from './combobox-control.svelte';
 export { default as ComboboxInput } from './combobox-input.svelte';

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/index.js';
 export { default as ListboxContent, type ListboxContentBaseProps, type ListboxContentProps, } from './listbox-content.svelte';
 export { default as ListboxContext, type ListboxContextProps } from './listbox-context.svelte';
+export { default as ListboxEmpty, type ListboxEmptyBaseProps, type ListboxEmptyProps } from './listbox-empty.svelte';
 export { default as ListboxInput, type ListboxInputBaseProps, type ListboxInputProps } from './listbox-input.svelte';
 export { default as ListboxItem, type ListboxItemBaseProps, type ListboxItemProps } from './listbox-item.svelte';
 export { default as ListboxItemContext, type ListboxItemContextProps } from './listbox-item-context.svelte';

package/dist/components/listbox/index.js

@@ -1,6 +1,7 @@
 export { createListCollection } from '../collection/index.js';
 export { default as ListboxContent, } from './listbox-content.svelte';
 export { default as ListboxContext } from './listbox-context.svelte';
+export { default as ListboxEmpty } from './listbox-empty.svelte';
 export { default as ListboxInput } from './listbox-input.svelte';
 export { default as ListboxItem } from './listbox-item.svelte';
 export { default as ListboxItemContext } from './listbox-item-context.svelte';

package/dist/components/listbox/listbox-empty.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ListboxEmptyBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ListboxEmptyProps extends Assign<HTMLProps<'div'>, ListboxEmptyBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Ark } from '../factory'
+  import { listboxAnatomy } from './listbox.anatomy'
+  import { useListboxContext } from './use-listbox-context'
+
+  const parts = listboxAnatomy.build()
+
+  let { ref = $bindable(null), ...props }: ListboxEmptyProps = $props()
+
+  const listbox = useListboxContext()
+  const isEmpty = $derived(listbox().collection.size === 0)
+</script>
+
+{#if isEmpty}
+  <Ark as="div" bind:ref {...parts.empty.attrs} {...props} role="presentation" />
+{/if}

package/dist/components/listbox/listbox-empty.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ListboxEmptyBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface ListboxEmptyProps extends Assign<HTMLProps<'div'>, ListboxEmptyBaseProps> {
+}
+declare const ListboxEmpty: import("svelte").Component<ListboxEmptyProps, {}, "ref">;
+type ListboxEmpty = ReturnType<typeof ListboxEmpty>;
+export default ListboxEmpty;

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

@@ -1 +1 @@
-export { anatomy as listboxAnatomy } from '@zag-js/listbox';
+export declare const listboxAnatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "root" | "content" | "valueText" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;

package/dist/components/listbox/listbox.anatomy.js

@@ -1 +1,2 @@
-export { anatomy as listboxAnatomy } from '@zag-js/listbox';
+import { anatomy } from '@zag-js/listbox';
+export const listboxAnatomy = anatomy.extendWith('empty');

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

@@ -1,5 +1,6 @@
 export { default as Content, type ListboxContentBaseProps as ContentBaseProps, type ListboxContentProps as ContentProps, } from './listbox-content.svelte';
 export { default as Context, type ListboxContextProps as ContextProps } from './listbox-context.svelte';
+export { default as Empty, type ListboxEmptyBaseProps as EmptyBaseProps, type ListboxEmptyProps as EmptyProps, } from './listbox-empty.svelte';
 export { default as Input, type ListboxInputBaseProps as InputBaseProps, type ListboxInputProps as InputProps, } from './listbox-input.svelte';
 export { default as Item, type ListboxItemBaseProps as ItemBaseProps, type ListboxItemProps as ItemProps, } from './listbox-item.svelte';
 export { default as ItemContext, type ListboxItemContextProps as ItemContextProps } from './listbox-item-context.svelte';

package/dist/components/listbox/listbox.js

@@ -1,5 +1,6 @@
 export { default as Content, } from './listbox-content.svelte';
 export { default as Context } from './listbox-context.svelte';
+export { default as Empty, } from './listbox-empty.svelte';
 export { default as Input, } from './listbox-input.svelte';
 export { default as Item, } from './listbox-item.svelte';
 export { default as ItemContext } from './listbox-item-context.svelte';

package/dist/components/menu/menu-root.svelte

@@ -40,6 +40,7 @@
       'onInteractOutside',
       'onOpenChange',
       'onPointerDownOutside',
+      'onRequestDismiss',
       'onSelect',
       'open',
       'positioning',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "accordion",
@@ -120,88 +120,88 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.21.9",
-    "@zag-js/anatomy": "1.21.9",
-    "@zag-js/angle-slider": "1.21.9",
-    "@zag-js/async-list": "1.21.9",
-    "@zag-js/auto-resize": "1.21.9",
-    "@zag-js/avatar": "1.21.9",
-    "@zag-js/carousel": "1.21.9",
-    "@zag-js/checkbox": "1.21.9",
-    "@zag-js/clipboard": "1.21.9",
-    "@zag-js/collapsible": "1.21.9",
-    "@zag-js/collection": "1.21.9",
-    "@zag-js/color-picker": "1.21.9",
-    "@zag-js/color-utils": "1.21.9",
-    "@zag-js/combobox": "1.21.9",
-    "@zag-js/core": "1.21.9",
-    "@zag-js/date-picker": "1.21.9",
-    "@zag-js/date-utils": "1.21.9",
-    "@zag-js/dialog": "1.21.9",
-    "@zag-js/dom-query": "1.21.9",
-    "@zag-js/editable": "1.21.9",
-    "@zag-js/file-upload": "1.21.9",
-    "@zag-js/file-utils": "1.21.9",
-    "@zag-js/floating-panel": "1.21.9",
-    "@zag-js/focus-trap": "1.21.9",
-    "@zag-js/highlight-word": "1.21.9",
-    "@zag-js/hover-card": "1.21.9",
-    "@zag-js/i18n-utils": "1.21.9",
-    "@zag-js/json-tree-utils": "1.21.9",
-    "@zag-js/listbox": "1.21.9",
-    "@zag-js/menu": "1.21.9",
-    "@zag-js/number-input": "1.21.9",
-    "@zag-js/pagination": "1.21.9",
-    "@zag-js/password-input": "1.21.9",
-    "@zag-js/pin-input": "1.21.9",
-    "@zag-js/popover": "1.21.9",
-    "@zag-js/presence": "1.21.9",
-    "@zag-js/progress": "1.21.9",
-    "@zag-js/qr-code": "1.21.9",
-    "@zag-js/radio-group": "1.21.9",
-    "@zag-js/rating-group": "1.21.9",
-    "@zag-js/scroll-area": "1.21.9",
-    "@zag-js/select": "1.21.9",
-    "@zag-js/signature-pad": "1.21.9",
-    "@zag-js/slider": "1.21.9",
-    "@zag-js/splitter": "1.21.9",
-    "@zag-js/steps": "1.21.9",
-    "@zag-js/svelte": "1.21.9",
-    "@zag-js/switch": "1.21.9",
-    "@zag-js/tabs": "1.21.9",
-    "@zag-js/tags-input": "1.21.9",
-    "@zag-js/time-picker": "1.21.9",
-    "@zag-js/timer": "1.21.9",
-    "@zag-js/toast": "1.21.9",
-    "@zag-js/toggle": "1.21.9",
-    "@zag-js/toggle-group": "1.21.9",
-    "@zag-js/tooltip": "1.21.9",
-    "@zag-js/tour": "1.21.9",
-    "@zag-js/tree-view": "1.21.9",
-    "@zag-js/types": "1.21.9",
-    "@zag-js/utils": "1.21.9"
+    "@zag-js/accordion": "1.22.1",
+    "@zag-js/anatomy": "1.22.1",
+    "@zag-js/angle-slider": "1.22.1",
+    "@zag-js/async-list": "1.22.1",
+    "@zag-js/auto-resize": "1.22.1",
+    "@zag-js/avatar": "1.22.1",
+    "@zag-js/carousel": "1.22.1",
+    "@zag-js/checkbox": "1.22.1",
+    "@zag-js/clipboard": "1.22.1",
+    "@zag-js/collapsible": "1.22.1",
+    "@zag-js/collection": "1.22.1",
+    "@zag-js/color-picker": "1.22.1",
+    "@zag-js/color-utils": "1.22.1",
+    "@zag-js/combobox": "1.22.1",
+    "@zag-js/core": "1.22.1",
+    "@zag-js/date-picker": "1.22.1",
+    "@zag-js/date-utils": "1.22.1",
+    "@zag-js/dialog": "1.22.1",
+    "@zag-js/dom-query": "1.22.1",
+    "@zag-js/editable": "1.22.1",
+    "@zag-js/file-upload": "1.22.1",
+    "@zag-js/file-utils": "1.22.1",
+    "@zag-js/floating-panel": "1.22.1",
+    "@zag-js/focus-trap": "1.22.1",
+    "@zag-js/highlight-word": "1.22.1",
+    "@zag-js/hover-card": "1.22.1",
+    "@zag-js/i18n-utils": "1.22.1",
+    "@zag-js/json-tree-utils": "1.22.1",
+    "@zag-js/listbox": "1.22.1",
+    "@zag-js/menu": "1.22.1",
+    "@zag-js/number-input": "1.22.1",
+    "@zag-js/pagination": "1.22.1",
+    "@zag-js/password-input": "1.22.1",
+    "@zag-js/pin-input": "1.22.1",
+    "@zag-js/popover": "1.22.1",
+    "@zag-js/presence": "1.22.1",
+    "@zag-js/progress": "1.22.1",
+    "@zag-js/qr-code": "1.22.1",
+    "@zag-js/radio-group": "1.22.1",
+    "@zag-js/rating-group": "1.22.1",
+    "@zag-js/scroll-area": "1.22.1",
+    "@zag-js/select": "1.22.1",
+    "@zag-js/signature-pad": "1.22.1",
+    "@zag-js/slider": "1.22.1",
+    "@zag-js/splitter": "1.22.1",
+    "@zag-js/steps": "1.22.1",
+    "@zag-js/svelte": "1.22.1",
+    "@zag-js/switch": "1.22.1",
+    "@zag-js/tabs": "1.22.1",
+    "@zag-js/tags-input": "1.22.1",
+    "@zag-js/time-picker": "1.22.1",
+    "@zag-js/timer": "1.22.1",
+    "@zag-js/toast": "1.22.1",
+    "@zag-js/toggle": "1.22.1",
+    "@zag-js/toggle-group": "1.22.1",
+    "@zag-js/tooltip": "1.22.1",
+    "@zag-js/tour": "1.22.1",
+    "@zag-js/tree-view": "1.22.1",
+    "@zag-js/types": "1.22.1",
+    "@zag-js/utils": "1.22.1"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "9.1.2",
-    "@storybook/sveltekit": "9.1.2",
+    "@storybook/addon-a11y": "9.1.3",
+    "@storybook/sveltekit": "9.1.3",
     "@sveltejs/adapter-auto": "6.1.0",
-    "@sveltejs/kit": "2.31.1",
-    "@sveltejs/package": "2.4.1",
-    "@sveltejs/vite-plugin-svelte": "6.1.2",
+    "@sveltejs/kit": "2.36.2",
+    "@sveltejs/package": "2.5.0",
+    "@sveltejs/vite-plugin-svelte": "6.1.3",
     "@tanstack/svelte-form": "1.19.2",
-    "@testing-library/jest-dom": "6.7.0",
+    "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "14.6.1",
     "@vitest/coverage-v8": "3.2.4",
     "clean-package": "2.2.0",
     "image-conversion": "2.1.1",
-    "lucide-svelte": "0.540.0",
-    "storybook": "9.1.2",
-    "svelte": "5.38.2",
+    "lucide-svelte": "0.541.0",
+    "storybook": "9.1.3",
+    "svelte": "5.38.3",
     "svelte-check": "4.3.1",
     "tslib": "2.8.1",
     "typescript": "5.9.2",
-    "vite": "7.1.2",
+    "vite": "7.1.3",
     "vitest": "3.2.4"
   },
   "peerDependencies": {