@ark-ui/svelte 5.4.0 → 5.6.0

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

@@ -1,5 +1,6 @@
 export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection';
 export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection';
 export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection';
+export { useAsyncList, type UseAsyncListProps, type UseAsyncListReturn } from './use-async-list.svelte';
 export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn, } from './use-list-collection.svelte';
 export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn } from './use-list-selection.svelte';

package/dist/components/collection/index.js

@@ -1,5 +1,6 @@
 export { createGridCollection } from './grid-collection';
 export { createListCollection, } from './list-collection';
 export { createFileTreeCollection, createTreeCollection, } from './tree-collection';
+export { useAsyncList } from './use-async-list.svelte';
 export { useListCollection, } from './use-list-collection.svelte';
 export { useListSelection } from './use-list-selection.svelte';

package/dist/components/collection/use-async-list.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Accessor } from '../../types';
+import * as asyncList from '@zag-js/async-list';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseAsyncListProps<T, C = string> extends asyncList.Props<T, C> {
+}
+export interface UseAsyncListReturn<T, C = string> extends Accessor<asyncList.Api<T, C>> {
+}
+export declare const useAsyncList: <T, C = string>(props?: MaybeFunction<UseAsyncListProps<T, C>>) => UseAsyncListReturn<T, C>;

package/dist/components/collection/use-async-list.svelte.js

@@ -0,0 +1,9 @@
+import * as asyncList from '@zag-js/async-list';
+import { useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+export const useAsyncList = (props) => {
+    const machineProps = $derived.by(() => runIfFn(props));
+    const service = useMachine(asyncList.machine, () => machineProps);
+    const api = $derived(asyncList.connect(service));
+    return () => api;
+};

package/dist/components/fieldset/fieldset-legend.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface FieldsetLegendBaseProps extends PolymorphicProps<'legend'>, RefAttribute {}
-  export interface FieldsetLegendProps extends Assign<HTMLProps<'legend'>, FieldsetLegendBaseProps> {}
+  export interface FieldsetLegendBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface FieldsetLegendProps extends Assign<HTMLProps<'div'>, FieldsetLegendBaseProps> {}
 </script>
 
 <script lang="ts">
@@ -15,4 +15,4 @@
   const mergedProps = $derived(mergeProps(fieldset?.().getLegendProps(), props))
 </script>
 
-<Ark as="legend" bind:ref {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/fieldset/fieldset-legend.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
-export interface FieldsetLegendBaseProps extends PolymorphicProps<'legend'>, RefAttribute {
+export interface FieldsetLegendBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
-export interface FieldsetLegendProps extends Assign<HTMLProps<'legend'>, FieldsetLegendBaseProps> {
+export interface FieldsetLegendProps extends Assign<HTMLProps<'div'>, FieldsetLegendBaseProps> {
 }
 declare const FieldsetLegend: import("svelte").Component<FieldsetLegendProps, {}, "ref">;
 type FieldsetLegend = ReturnType<typeof FieldsetLegend>;

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

@@ -20,6 +20,7 @@ export const useFieldset = (inProps = {}) => {
     const setRootRef = (el) => {
         rootRef = el;
     };
+    const legendId = $derived(`fieldset::${id}::legend`);
     const errorTextId = $derived(`fieldset::${id}::error-text`);
     const helperTextId = $derived(`fieldset::${id}::helper-text`);
     const checkTextElements = () => {
@@ -51,9 +52,11 @@ export const useFieldset = (inProps = {}) => {
         disabled,
         'data-disabled': dataAttr(disabled),
         'data-invalid': dataAttr(invalid),
+        'aria-labelledby': legendId,
         'aria-describedby': labelIds(),
     });
     const getLegendProps = () => ({
+        id: legendId,
         ...parts.legend.attrs,
         'data-disabled': dataAttr(disabled),
         'data-invalid': dataAttr(invalid),

package/dist/components/highlight/highlight.svelte

@@ -9,7 +9,7 @@
   const props: HighlightProps = $props()
 
   const [highlightProps, localProps] = $derived(
-    createSplitProps<HighlightBaseProps>()(props, ['query', 'text', 'ignoreCase', 'matchAll']),
+    createSplitProps<HighlightBaseProps>()(props, ['query', 'text', 'ignoreCase', 'matchAll', 'exactMatch']),
   )
 
   if (typeof props.text !== 'string') {

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

@@ -1,3 +1,4 @@
+export type { ActionOptions as ToastActionOptions, Placement as ToastPlacement, PromiseOptions as ToastPromiseOptions, Status as ToastStatus, StatusChangeDetails as ToastStatusChangeDetails, Type as ToastType, } from '@zag-js/toast';
 export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster.js';
 export { default as ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger.svelte';
 export { default as ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps, } from './toast-close-trigger.svelte';

package/dist/providers/locale/index.d.ts

@@ -1,3 +1,4 @@
 export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.svelte';
+export { useCollator, type UseCollatorProps, type UseCollatorReturn } from './use-collator.svelte';
 export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter.svelte';
 export { useLocaleContext, type UseLocaleContext } from './use-locale-context';

package/dist/providers/locale/index.js

@@ -1,3 +1,4 @@
 export { default as LocaleProvider } from './locale-provider.svelte';
+export { useCollator } from './use-collator.svelte';
 export { useFilter } from './use-filter.svelte';
 export { useLocaleContext } from './use-locale-context';

package/dist/providers/locale/use-collator.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Accessor } from '../../types';
+export interface UseCollatorProps extends Intl.CollatorOptions {
+    locale?: string;
+}
+export interface UseCollatorReturn extends Accessor<Intl.Collator> {
+}
+export declare function useCollator(props?: UseCollatorProps): UseCollatorReturn;

package/dist/providers/locale/use-collator.svelte.js

@@ -0,0 +1,11 @@
+import { createCollator } from '@zag-js/i18n-utils';
+import { useLocaleContext } from './use-locale-context';
+export function useCollator(props = {}) {
+    const env = useLocaleContext();
+    const locale = $derived(props.locale ?? env().locale);
+    const collator = $derived.by(() => {
+        const { locale: _, ...options } = props;
+        return createCollator(locale, options);
+    });
+    return () => collator;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "accordion",
@@ -120,65 +120,66 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.21.6",
-    "@zag-js/anatomy": "1.21.6",
-    "@zag-js/angle-slider": "1.21.6",
-    "@zag-js/auto-resize": "1.21.6",
-    "@zag-js/avatar": "1.21.6",
-    "@zag-js/carousel": "1.21.6",
-    "@zag-js/checkbox": "1.21.6",
-    "@zag-js/clipboard": "1.21.6",
-    "@zag-js/collapsible": "1.21.6",
-    "@zag-js/collection": "1.21.6",
-    "@zag-js/color-picker": "1.21.6",
-    "@zag-js/color-utils": "1.21.6",
-    "@zag-js/combobox": "1.21.6",
-    "@zag-js/core": "1.21.6",
-    "@zag-js/date-picker": "1.21.6",
-    "@zag-js/date-utils": "1.21.6",
-    "@zag-js/dialog": "1.21.6",
-    "@zag-js/dom-query": "1.21.6",
-    "@zag-js/editable": "1.21.6",
-    "@zag-js/file-upload": "1.21.6",
-    "@zag-js/file-utils": "1.21.6",
-    "@zag-js/floating-panel": "1.21.6",
-    "@zag-js/focus-trap": "1.21.6",
-    "@zag-js/highlight-word": "1.21.6",
-    "@zag-js/hover-card": "1.21.6",
-    "@zag-js/i18n-utils": "1.21.6",
-    "@zag-js/json-tree-utils": "1.21.6",
-    "@zag-js/listbox": "1.21.6",
-    "@zag-js/menu": "1.21.6",
-    "@zag-js/number-input": "1.21.6",
-    "@zag-js/pagination": "1.21.6",
-    "@zag-js/password-input": "1.21.6",
-    "@zag-js/pin-input": "1.21.6",
-    "@zag-js/popover": "1.21.6",
-    "@zag-js/presence": "1.21.6",
-    "@zag-js/progress": "1.21.6",
-    "@zag-js/qr-code": "1.21.6",
-    "@zag-js/radio-group": "1.21.6",
-    "@zag-js/rating-group": "1.21.6",
-    "@zag-js/scroll-area": "1.21.6",
-    "@zag-js/select": "1.21.6",
-    "@zag-js/signature-pad": "1.21.6",
-    "@zag-js/slider": "1.21.6",
-    "@zag-js/splitter": "1.21.6",
-    "@zag-js/steps": "1.21.6",
-    "@zag-js/svelte": "1.21.6",
-    "@zag-js/switch": "1.21.6",
-    "@zag-js/tabs": "1.21.6",
-    "@zag-js/tags-input": "1.21.6",
-    "@zag-js/time-picker": "1.21.6",
-    "@zag-js/timer": "1.21.6",
-    "@zag-js/toast": "1.21.6",
-    "@zag-js/toggle": "1.21.6",
-    "@zag-js/toggle-group": "1.21.6",
-    "@zag-js/tooltip": "1.21.6",
-    "@zag-js/tour": "1.21.6",
-    "@zag-js/tree-view": "1.21.6",
-    "@zag-js/types": "1.21.6",
-    "@zag-js/utils": "1.21.6"
+    "@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"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "9.1.2",
@@ -194,9 +195,9 @@
     "@vitest/coverage-v8": "3.2.4",
     "clean-package": "2.2.0",
     "image-conversion": "2.1.1",
-    "lucide-svelte": "0.539.0",
+    "lucide-svelte": "0.540.0",
     "storybook": "9.1.2",
-    "svelte": "5.38.1",
+    "svelte": "5.38.2",
     "svelte-check": "4.3.1",
     "tslib": "2.8.1",
     "typescript": "5.9.2",