@ark-ui/svelte 5.8.0 → 5.9.1

package/dist/components/anatomy.d.ts

@@ -1 +1,46 @@
 export * from '@zag-js/anatomy';
+export { accordionAnatomy } from './accordion/accordion.anatomy';
+export { angleSliderAnatomy } from './angle-slider/angle-slider.anatomy';
+export { avatarAnatomy } from './avatar/avatar.anatomy';
+export { carouselAnatomy } from './carousel/carousel.anatomy';
+export { checkboxAnatomy } from './checkbox/checkbox.anatomy';
+export { clipboardAnatomy } from './clipboard/clipboard.anatomy';
+export { collapsibleAnatomy } from './collapsible/collapsible.anatomy';
+export { colorPickerAnatomy } from './color-picker/color-picker.anatomy';
+export { comboboxAnatomy } from './combobox/combobox.anatomy';
+export { datePickerAnatomy } from './date-picker/date-picker.anatomy';
+export { dialogAnatomy } from './dialog/dialog.anatomy';
+export { editableAnatomy } from './editable/editable.anatomy';
+export { fieldAnatomy } from './field/field.anatomy';
+export { fieldsetAnatomy } from './fieldset/fieldset.anatomy';
+export { fileUploadAnatomy } from './file-upload/file-upload.anatomy';
+export { floatingPanelAnatomy } from './floating-panel/floating-panel.anatomy';
+export { hoverCardAnatomy } from './hover-card/hover-card.anatomy';
+export { listboxAnatomy } from './listbox/listbox.anatomy';
+export { menuAnatomy } from './menu/menu.anatomy';
+export { numberInputAnatomy } from './number-input/number-input.anatomy';
+export { paginationAnatomy } from './pagination/pagination.anatomy';
+export { passwordInputAnatomy } from './password-input/password-input.anatomy';
+export { pinInputAnatomy } from './pin-input/pin-input.anatomy';
+export { popoverAnatomy } from './popover/popover.anatomy';
+export { progressAnatomy } from './progress/progress.anatomy';
+export { qrCodeAnatomy } from './qr-code/qr-code.anatomy';
+export { radioGroupAnatomy } from './radio-group/radio-group.anatomy';
+export { ratingGroupAnatomy } from './rating-group/rating-group.anatomy';
+export { scrollAreaAnatomy } from './scroll-area/scroll-area.anatomy';
+export { segmentGroupAnatomy } from './segment-group/segment-group.anatomy';
+export { selectAnatomy } from './select/select.anatomy';
+export { signaturePadAnatomy } from './signature-pad/signature-pad.anatomy';
+export { sliderAnatomy } from './slider/slider.anatomy';
+export { splitterAnatomy } from './splitter/splitter.anatomy';
+export { stepsAnatomy } from './steps/steps.anatomy';
+export { switchAnatomy } from './switch/switch.anatomy';
+export { tabsAnatomy } from './tabs/tabs.anatomy';
+export { tagsInputAnatomy } from './tags-input/tags-input.anatomy';
+export { timerAnatomy } from './timer/timer.anatomy';
+export { toastAnatomy } from './toast/toast.anatomy';
+export { toggleAnatomy } from './toggle/toggle.anatomy';
+export { toggleGroupAnatomy } from './toggle-group/toggle-group.anatomy';
+export { tooltipAnatomy } from './tooltip/tooltip.anatomy';
+export { tourAnatomy } from './tour/tour.anatomy';
+export { treeViewAnatomy } from './tree-view/tree-view.anatomy';

package/dist/components/anatomy.js

@@ -1 +1,46 @@
 export * from '@zag-js/anatomy';
+export { accordionAnatomy } from './accordion/accordion.anatomy';
+export { angleSliderAnatomy } from './angle-slider/angle-slider.anatomy';
+export { avatarAnatomy } from './avatar/avatar.anatomy';
+export { carouselAnatomy } from './carousel/carousel.anatomy';
+export { checkboxAnatomy } from './checkbox/checkbox.anatomy';
+export { clipboardAnatomy } from './clipboard/clipboard.anatomy';
+export { collapsibleAnatomy } from './collapsible/collapsible.anatomy';
+export { colorPickerAnatomy } from './color-picker/color-picker.anatomy';
+export { comboboxAnatomy } from './combobox/combobox.anatomy';
+export { datePickerAnatomy } from './date-picker/date-picker.anatomy';
+export { dialogAnatomy } from './dialog/dialog.anatomy';
+export { editableAnatomy } from './editable/editable.anatomy';
+export { fieldAnatomy } from './field/field.anatomy';
+export { fieldsetAnatomy } from './fieldset/fieldset.anatomy';
+export { fileUploadAnatomy } from './file-upload/file-upload.anatomy';
+export { floatingPanelAnatomy } from './floating-panel/floating-panel.anatomy';
+export { hoverCardAnatomy } from './hover-card/hover-card.anatomy';
+export { listboxAnatomy } from './listbox/listbox.anatomy';
+export { menuAnatomy } from './menu/menu.anatomy';
+export { numberInputAnatomy } from './number-input/number-input.anatomy';
+export { paginationAnatomy } from './pagination/pagination.anatomy';
+export { passwordInputAnatomy } from './password-input/password-input.anatomy';
+export { pinInputAnatomy } from './pin-input/pin-input.anatomy';
+export { popoverAnatomy } from './popover/popover.anatomy';
+export { progressAnatomy } from './progress/progress.anatomy';
+export { qrCodeAnatomy } from './qr-code/qr-code.anatomy';
+export { radioGroupAnatomy } from './radio-group/radio-group.anatomy';
+export { ratingGroupAnatomy } from './rating-group/rating-group.anatomy';
+export { scrollAreaAnatomy } from './scroll-area/scroll-area.anatomy';
+export { segmentGroupAnatomy } from './segment-group/segment-group.anatomy';
+export { selectAnatomy } from './select/select.anatomy';
+export { signaturePadAnatomy } from './signature-pad/signature-pad.anatomy';
+export { sliderAnatomy } from './slider/slider.anatomy';
+export { splitterAnatomy } from './splitter/splitter.anatomy';
+export { stepsAnatomy } from './steps/steps.anatomy';
+export { switchAnatomy } from './switch/switch.anatomy';
+export { tabsAnatomy } from './tabs/tabs.anatomy';
+export { tagsInputAnatomy } from './tags-input/tags-input.anatomy';
+export { timerAnatomy } from './timer/timer.anatomy';
+export { toastAnatomy } from './toast/toast.anatomy';
+export { toggleAnatomy } from './toggle/toggle.anatomy';
+export { toggleGroupAnatomy } from './toggle-group/toggle-group.anatomy';
+export { tooltipAnatomy } from './tooltip/tooltip.anatomy';
+export { tourAnatomy } from './tour/tour.anatomy';
+export { treeViewAnatomy } from './tree-view/tree-view.anatomy';

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

@@ -39,6 +39,7 @@
   const [useComboboxProps, localProps] = $derived(
     createSplitProps<UseComboboxProps<T>>()(comboboxProps, [
       'allowCustomValue',
+      'alwaysSubmitOnEnter',
       'autoFocus',
       'closeOnSelect',
       'collection',

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<'div'>, RefAttribute {}
-  export interface FieldsetLegendProps extends Assign<HTMLProps<'div'>, FieldsetLegendBaseProps> {}
+  export interface FieldsetLegendBaseProps extends PolymorphicProps<'legend'>, RefAttribute {}
+  export interface FieldsetLegendProps extends Assign<HTMLProps<'legend'>, FieldsetLegendBaseProps> {}
 </script>
 
 <script lang="ts">
@@ -15,4 +15,4 @@
   const mergedProps = $derived(mergeProps(fieldset?.().getLegendProps(), props))
 </script>
 
-<Ark as="div" bind:ref {...mergedProps} />
+<Ark as="legend" 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<'div'>, RefAttribute {
+export interface FieldsetLegendBaseProps extends PolymorphicProps<'legend'>, RefAttribute {
 }
-export interface FieldsetLegendProps extends Assign<HTMLProps<'div'>, FieldsetLegendBaseProps> {
+export interface FieldsetLegendProps extends Assign<HTMLProps<'legend'>, FieldsetLegendBaseProps> {
 }
 declare const FieldsetLegend: import("svelte").Component<FieldsetLegendProps, {}, "ref">;
 type FieldsetLegend = ReturnType<typeof FieldsetLegend>;

package/dist/components/file-upload/file-upload-item-group.svelte

@@ -1,7 +1,8 @@
 <script module lang="ts">
+  import type { ItemGroupProps } from '@zag-js/file-upload'
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute, ItemGroupProps {}
   export interface FileUploadItemGroupProps extends Assign<HTMLProps<'div'>, FileUploadItemGroupBaseProps> {}
 </script>
 
@@ -9,10 +10,16 @@
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
   import { useFileUploadContext } from './use-file-upload-context'
+  import { FileUploadItemGroupPropsProvider } from './use-file-upload-item-group-props-context'
+  import { createSplitProps } from '../../utils/create-split-props'
 
   let { ref = $bindable(null), ...props }: FileUploadItemGroupProps = $props()
   const fileUpload = useFileUploadContext()
-  const mergedProps = $derived(mergeProps(fileUpload().getItemGroupProps(), props))
+
+  const [itemGroupProps, localProps] = $derived(createSplitProps<ItemGroupProps>()(props, ['type']))
+  const mergedProps = $derived(mergeProps(fileUpload().getItemGroupProps(itemGroupProps), localProps))
+
+  FileUploadItemGroupPropsProvider(() => itemGroupProps)
 </script>
 
 <Ark as="div" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-item-group.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { ItemGroupProps } from '@zag-js/file-upload';
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
-export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute, ItemGroupProps {
 }
 export interface FileUploadItemGroupProps extends Assign<HTMLProps<'div'>, FileUploadItemGroupBaseProps> {
 }

package/dist/components/file-upload/file-upload-item.svelte

@@ -2,7 +2,9 @@
   import type { ItemProps } from '@zag-js/file-upload'
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface FileUploadItemBaseProps extends ItemProps, PolymorphicProps<'li'>, RefAttribute {}
+  type ItemBaseProps = Omit<ItemProps, 'type'>
+
+  export interface FileUploadItemBaseProps extends ItemBaseProps, PolymorphicProps<'li'>, RefAttribute {}
   export interface FileUploadItemProps extends Assign<HTMLProps<'li'>, FileUploadItemBaseProps> {}
 </script>
 
@@ -12,15 +14,19 @@
   import { Ark } from '../factory'
   import { useFileUploadContext } from './use-file-upload-context'
   import { FileUploadItemPropsProvider } from './use-file-upload-item-props-context'
+  import { useFileUploadItemGroupPropsContext } from './use-file-upload-item-group-props-context'
 
   let { ref = $bindable(null), ...props }: FileUploadItemProps = $props()
   const fileUpload = useFileUploadContext()
 
-  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['file']))
+  const [itemProps, localProps] = $derived(createSplitProps<ItemBaseProps>()(props, ['file']))
+
+  const itemGroupProps = useFileUploadItemGroupPropsContext()
+  const itemPropsWithType = $derived({ ...itemProps, type: itemGroupProps().type })
 
-  const mergedProps = $derived(mergeProps(fileUpload().getItemProps(itemProps), localProps))
+  const mergedProps = $derived(mergeProps(fileUpload().getItemProps(itemPropsWithType), localProps))
 
-  FileUploadItemPropsProvider(() => itemProps)
+  FileUploadItemPropsProvider(() => itemPropsWithType)
 </script>
 
 <Ark as="li" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-item.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ItemProps } from '@zag-js/file-upload';
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
-export interface FileUploadItemBaseProps extends ItemProps, PolymorphicProps<'li'>, RefAttribute {
+type ItemBaseProps = Omit<ItemProps, 'type'>;
+export interface FileUploadItemBaseProps extends ItemBaseProps, PolymorphicProps<'li'>, RefAttribute {
 }
 export interface FileUploadItemProps extends Assign<HTMLProps<'li'>, FileUploadItemBaseProps> {
 }

package/dist/components/file-upload/use-file-upload-item-group-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { ItemGroupProps } from '@zag-js/file-upload';
+import type { Accessor } from '../../types';
+export interface UseFileUploadItemGroupPropsContext extends Accessor<ItemGroupProps> {
+}
+export declare const FileUploadItemGroupPropsProvider: (opts: UseFileUploadItemGroupPropsContext) => void, useFileUploadItemGroupPropsContext: (fallback?: UseFileUploadItemGroupPropsContext | undefined) => UseFileUploadItemGroupPropsContext;

package/dist/components/file-upload/use-file-upload-item-group-props-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext] = createContext({
+    name: 'FileUploadItemGroupPropsContext',
+    hookName: 'useFileUploadItemGroupPropsContext',
+    providerName: '<FileUploadItemGroupPropsProvider />',
+});

package/dist/components/frame/frame.svelte

@@ -60,12 +60,14 @@
     if (!win || !mountNode) return
 
     const exec = () => {
-      if (!(mountNode && frameRef && frameRef.contentDocument)) return
-
-      const rootEl = frameRef.contentDocument?.documentElement
-      if (!rootEl) return
-      frameRef.style.setProperty('--width', `${mountNode.scrollWidth}px`)
-      frameRef.style.setProperty('--height', `${mountNode.scrollHeight}px`)
+      win.requestAnimationFrame(() => {
+        if (!(mountNode && frameRef && frameRef.contentDocument)) return
+
+        const rootEl = frameRef.contentDocument?.documentElement
+        if (!rootEl) return
+        frameRef.style.setProperty('--width', `${mountNode.scrollWidth}px`)
+        frameRef.style.setProperty('--height', `${mountNode.scrollHeight}px`)
+      })
     }
 
     const resizeObserver = new win.ResizeObserver(exec)

package/dist/lucide-optimize.js

@@ -77,7 +77,8 @@ function convertToIndividualImports(importNames, indentation, withSemicolon) {
 function convertToKebabCase(str) {
     return str
         .replace(/Icon$/, '') // Remove 'Icon' suffix
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/([a-z])([A-Z])/g, '$1-$2') // Add hyphen between lowercase and uppercase letters
+        .replace(/([a-zA-Z])(\d)/g, '$1-$2') // Add hyphen before numbers
         .toLowerCase();
 }
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "5.8.0",
+  "version": "5.9.1",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "accordion",
@@ -119,76 +119,75 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@internationalized/date": "3.8.2",
-    "@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"
+    "@internationalized/date": "3.9.0",
+    "@zag-js/accordion": "1.24.1",
+    "@zag-js/anatomy": "1.24.1",
+    "@zag-js/angle-slider": "1.24.1",
+    "@zag-js/async-list": "1.24.1",
+    "@zag-js/auto-resize": "1.24.1",
+    "@zag-js/avatar": "1.24.1",
+    "@zag-js/carousel": "1.24.1",
+    "@zag-js/checkbox": "1.24.1",
+    "@zag-js/clipboard": "1.24.1",
+    "@zag-js/collapsible": "1.24.1",
+    "@zag-js/collection": "1.24.1",
+    "@zag-js/color-picker": "1.24.1",
+    "@zag-js/color-utils": "1.24.1",
+    "@zag-js/combobox": "1.24.1",
+    "@zag-js/core": "1.24.1",
+    "@zag-js/date-picker": "1.24.1",
+    "@zag-js/date-utils": "1.24.1",
+    "@zag-js/dialog": "1.24.1",
+    "@zag-js/dom-query": "1.24.1",
+    "@zag-js/editable": "1.24.1",
+    "@zag-js/file-upload": "1.24.1",
+    "@zag-js/file-utils": "1.24.1",
+    "@zag-js/floating-panel": "1.24.1",
+    "@zag-js/focus-trap": "1.24.1",
+    "@zag-js/highlight-word": "1.24.1",
+    "@zag-js/hover-card": "1.24.1",
+    "@zag-js/i18n-utils": "1.24.1",
+    "@zag-js/json-tree-utils": "1.24.1",
+    "@zag-js/listbox": "1.24.1",
+    "@zag-js/menu": "1.24.1",
+    "@zag-js/number-input": "1.24.1",
+    "@zag-js/pagination": "1.24.1",
+    "@zag-js/password-input": "1.24.1",
+    "@zag-js/pin-input": "1.24.1",
+    "@zag-js/popover": "1.24.1",
+    "@zag-js/presence": "1.24.1",
+    "@zag-js/progress": "1.24.1",
+    "@zag-js/qr-code": "1.24.1",
+    "@zag-js/radio-group": "1.24.1",
+    "@zag-js/rating-group": "1.24.1",
+    "@zag-js/scroll-area": "1.24.1",
+    "@zag-js/select": "1.24.1",
+    "@zag-js/signature-pad": "1.24.1",
+    "@zag-js/slider": "1.24.1",
+    "@zag-js/splitter": "1.24.1",
+    "@zag-js/steps": "1.24.1",
+    "@zag-js/svelte": "1.24.1",
+    "@zag-js/switch": "1.24.1",
+    "@zag-js/tabs": "1.24.1",
+    "@zag-js/tags-input": "1.24.1",
+    "@zag-js/timer": "1.24.1",
+    "@zag-js/toast": "1.24.1",
+    "@zag-js/toggle": "1.24.1",
+    "@zag-js/toggle-group": "1.24.1",
+    "@zag-js/tooltip": "1.24.1",
+    "@zag-js/tour": "1.24.1",
+    "@zag-js/tree-view": "1.24.1",
+    "@zag-js/types": "1.24.1",
+    "@zag-js/utils": "1.24.1"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "9.1.3",
-    "@storybook/sveltekit": "9.1.3",
+    "@storybook/addon-a11y": "9.1.5",
+    "@storybook/sveltekit": "9.1.5",
     "@sveltejs/adapter-auto": "6.1.0",
-    "@sveltejs/kit": "2.36.2",
+    "@sveltejs/kit": "2.39.0",
     "@sveltejs/package": "2.5.0",
-    "@sveltejs/vite-plugin-svelte": "6.1.3",
-    "@tanstack/svelte-form": "1.19.2",
+    "@sveltejs/vite-plugin-svelte": "6.2.0",
+    "@tanstack/svelte-form": "1.19.5",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
@@ -197,13 +196,13 @@
     "clean-package": "2.2.0",
     "image-conversion": "2.1.1",
     "jsdom": "26.1.0",
-    "lucide-svelte": "0.541.0",
-    "storybook": "9.1.3",
-    "svelte": "5.38.3",
+    "lucide-svelte": "0.544.0",
+    "storybook": "9.1.5",
+    "svelte": "5.38.10",
     "svelte-check": "4.3.1",
     "tslib": "2.8.1",
     "typescript": "5.9.2",
-    "vite": "7.1.3",
+    "vite": "7.1.5",
     "vitest": "3.2.4",
     "vitest-axe": "1.0.0-pre.5"
   },