@ark-ui/svelte 5.3.0 → 5.3.2

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

@@ -89,16 +89,4 @@ export interface UseListSelectionReturn {
      * Returns true if at least one item from the collection is selected.
      */
     isSomeSelected: () => boolean;
-    /**
-     * Set the selection to a specific array of items.
-     */
-    setSelection: (selection: string[]) => void;
-    /**
-     * Set the selection mode.
-     */
-    setSelectionMode: (mode: SelectionMode) => void;
-    /**
-     * Set whether the selection is deselectable.
-     */
-    setDeselectable: (deselectable: boolean) => void;
 }

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

@@ -1,5 +1,6 @@
 import { Selection } from '@zag-js/collection';
 import { runIfFn } from '@zag-js/utils';
+import { untrack } from 'svelte';
 export function useListSelection(props) {
     const localProps = $derived.by(() => {
         const { collection, selectionMode = 'single', deselectable = true, initialSelectedValues = [], resetOnCollectionChange = false, } = runIfFn(props);
@@ -17,7 +18,8 @@ export function useListSelection(props) {
         selection.deselectable = localProps.deselectable;
         return selection;
     };
-    let selection = $state(createSelection(localProps.initialSelectedValues));
+    const initialSelectedValues = untrack(() => localProps.initialSelectedValues);
+    let selection = $state(createSelection(initialSelectedValues));
     // Watch for collection changes and reset selection if needed
     $effect(() => {
         const { collection, resetOnCollectionChange } = localProps;
@@ -74,18 +76,5 @@ export function useListSelection(props) {
         resetSelection: () => {
             selection = createSelection();
         },
-        setSelection: (newSelection) => {
-            selection = selection.setSelection(newSelection);
-        },
-        setSelectionMode: (mode) => {
-            const newSelection = selection.copy();
-            newSelection.selectionMode = mode;
-            selection = newSelection;
-        },
-        setDeselectable: (deselectable) => {
-            const newSelection = selection.copy();
-            newSelection.deselectable = deselectable;
-            selection = newSelection;
-        },
     };
 }

package/dist/components/portal/portal.svelte

@@ -1,5 +1,5 @@
-<script module lang="ts">
-  import type { Snippet } from 'svelte'
+<script lang="ts">
+  import { type Snippet, getAllContexts, mount, tick, unmount } from 'svelte'
 
   export interface PortalProps {
     /**
@@ -15,42 +15,30 @@
      */
     children: Snippet
   }
-</script>
 
-<script lang="ts">
-  /**
-   * @see https://github.com/sveltejs/svelte/issues/7082
-   */
-  import { getAllContexts, mount, unmount } from 'svelte'
-  import PortalConsumer from './portal-consumer.svelte'
-
-  const { container = globalThis?.document?.body, children, disabled = false }: PortalProps = $props()
+  let { children, container = globalThis.document?.body, disabled = false }: PortalProps = $props()
 
   const context = getAllContexts()
 
-  let instance: ReturnType<typeof mount> | null = null
-
-  const unmountInstance = () => {
-    if (instance) {
-      unmount(instance)
-      instance = null
+  let instance: any = null
+  $effect(() => {
+    const cleanup = () => {
+      if (instance) {
+        void unmount(instance)
+        instance = null
+      }
     }
-  }
 
-  $effect(() => {
-    if (disabled || !container) {
-      unmountInstance()
+    if (disabled) {
+      cleanup()
       return
     }
 
-    instance = mount(PortalConsumer, {
-      target: container,
-      props: { children },
-      context,
+    tick().then(() => {
+      instance = mount(children, { target: container, context })
     })
-
     return () => {
-      unmountInstance()
+      cleanup()
     }
   })
 </script>

package/dist/components/portal/portal.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 export interface PortalProps {
     /**
      * If true, the portal will not be rendered.

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

@@ -1 +1 @@
-export declare const tourAnatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "content" | "control" | "positioner" | "arrow" | "description" | "actionTrigger" | "closeTrigger" | "progressText" | "arrowTip" | "backdrop" | "spotlight">;
+export declare const tourAnatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "content" | "control" | "positioner" | "description" | "arrow" | "actionTrigger" | "closeTrigger" | "progressText" | "arrowTip" | "backdrop" | "spotlight">;

package/dist/components/tour/tour.d.ts

@@ -1,4 +1,5 @@
-export type { Point, ProgressTextDetails, StatusChangeDetails, StepAction, StepActionMap, StepActionTriggerProps, StepBaseDetails, StepChangeDetails, StepDetails, StepEffectArgs, StepPlacement, StepStatus, StepType, WaitOptions, } from '@zag-js/tour';
+export type { WaitForOptions as WaitOptions } from '@zag-js/dom-query';
+export type { Point, ProgressTextDetails, StatusChangeDetails, StepAction, StepActionMap, StepActionTriggerProps, StepBaseDetails, StepChangeDetails, StepDetails, StepEffectArgs, StepPlacement, StepStatus, StepType, } from '@zag-js/tour';
 export { default as ActionTrigger, type TourActionTriggerBaseProps as ActionTriggerBaseProps, type TourActionTriggerProps as ActionTriggerProps, } from './tour-action-trigger.svelte';
 export { default as Actions } from './tour-actions.svelte';
 export { default as Arrow, type TourArrowBaseProps as ArrowBaseProps, type TourArrowProps as ArrowProps, } from './tour-arrow.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "accordion",
@@ -120,64 +120,64 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.20.0",
-    "@zag-js/angle-slider": "1.20.0",
-    "@zag-js/anatomy": "1.20.0",
-    "@zag-js/auto-resize": "1.20.0",
-    "@zag-js/avatar": "1.20.0",
-    "@zag-js/carousel": "1.20.0",
-    "@zag-js/checkbox": "1.20.0",
-    "@zag-js/clipboard": "1.20.0",
-    "@zag-js/collapsible": "1.20.0",
-    "@zag-js/collection": "1.20.0",
-    "@zag-js/color-picker": "1.20.0",
-    "@zag-js/color-utils": "1.20.0",
-    "@zag-js/combobox": "1.20.0",
-    "@zag-js/core": "1.20.0",
-    "@zag-js/date-picker": "1.20.0",
-    "@zag-js/date-utils": "1.20.0",
-    "@zag-js/dialog": "1.20.0",
-    "@zag-js/dom-query": "1.20.0",
-    "@zag-js/editable": "1.20.0",
-    "@zag-js/file-upload": "1.20.0",
-    "@zag-js/file-utils": "1.20.0",
-    "@zag-js/focus-trap": "1.20.0",
-    "@zag-js/floating-panel": "1.20.0",
-    "@zag-js/highlight-word": "1.20.0",
-    "@zag-js/hover-card": "1.20.0",
-    "@zag-js/i18n-utils": "1.20.0",
-    "@zag-js/json-tree-utils": "1.20.0",
-    "@zag-js/listbox": "1.20.0",
-    "@zag-js/menu": "1.20.0",
-    "@zag-js/number-input": "1.20.0",
-    "@zag-js/pagination": "1.20.0",
-    "@zag-js/password-input": "1.20.0",
-    "@zag-js/pin-input": "1.20.0",
-    "@zag-js/popover": "1.20.0",
-    "@zag-js/presence": "1.20.0",
-    "@zag-js/progress": "1.20.0",
-    "@zag-js/qr-code": "1.20.0",
-    "@zag-js/radio-group": "1.20.0",
-    "@zag-js/rating-group": "1.20.0",
-    "@zag-js/svelte": "1.20.0",
-    "@zag-js/select": "1.20.0",
-    "@zag-js/signature-pad": "1.20.0",
-    "@zag-js/slider": "1.20.0",
-    "@zag-js/splitter": "1.20.0",
-    "@zag-js/steps": "1.20.0",
-    "@zag-js/switch": "1.20.0",
-    "@zag-js/tabs": "1.20.0",
-    "@zag-js/tags-input": "1.20.0",
-    "@zag-js/time-picker": "1.20.0",
-    "@zag-js/timer": "1.20.0",
-    "@zag-js/toast": "1.20.0",
-    "@zag-js/toggle": "1.20.0",
-    "@zag-js/toggle-group": "1.20.0",
-    "@zag-js/tooltip": "1.20.0",
-    "@zag-js/tour": "1.20.0",
-    "@zag-js/tree-view": "1.20.0",
-    "@zag-js/types": "1.20.0",
-    "@zag-js/utils": "1.20.0"
+    "@zag-js/accordion": "1.21.0",
+    "@zag-js/angle-slider": "1.21.0",
+    "@zag-js/anatomy": "1.21.0",
+    "@zag-js/auto-resize": "1.21.0",
+    "@zag-js/avatar": "1.21.0",
+    "@zag-js/carousel": "1.21.0",
+    "@zag-js/checkbox": "1.21.0",
+    "@zag-js/clipboard": "1.21.0",
+    "@zag-js/collapsible": "1.21.0",
+    "@zag-js/collection": "1.21.0",
+    "@zag-js/color-picker": "1.21.0",
+    "@zag-js/color-utils": "1.21.0",
+    "@zag-js/combobox": "1.21.0",
+    "@zag-js/core": "1.21.0",
+    "@zag-js/date-picker": "1.21.0",
+    "@zag-js/date-utils": "1.21.0",
+    "@zag-js/dialog": "1.21.0",
+    "@zag-js/dom-query": "1.21.0",
+    "@zag-js/editable": "1.21.0",
+    "@zag-js/file-upload": "1.21.0",
+    "@zag-js/file-utils": "1.21.0",
+    "@zag-js/focus-trap": "1.21.0",
+    "@zag-js/floating-panel": "1.21.0",
+    "@zag-js/highlight-word": "1.21.0",
+    "@zag-js/hover-card": "1.21.0",
+    "@zag-js/i18n-utils": "1.21.0",
+    "@zag-js/json-tree-utils": "1.21.0",
+    "@zag-js/listbox": "1.21.0",
+    "@zag-js/menu": "1.21.0",
+    "@zag-js/number-input": "1.21.0",
+    "@zag-js/pagination": "1.21.0",
+    "@zag-js/password-input": "1.21.0",
+    "@zag-js/pin-input": "1.21.0",
+    "@zag-js/popover": "1.21.0",
+    "@zag-js/presence": "1.21.0",
+    "@zag-js/progress": "1.21.0",
+    "@zag-js/qr-code": "1.21.0",
+    "@zag-js/radio-group": "1.21.0",
+    "@zag-js/rating-group": "1.21.0",
+    "@zag-js/svelte": "1.21.0",
+    "@zag-js/select": "1.21.0",
+    "@zag-js/signature-pad": "1.21.0",
+    "@zag-js/slider": "1.21.0",
+    "@zag-js/splitter": "1.21.0",
+    "@zag-js/steps": "1.21.0",
+    "@zag-js/switch": "1.21.0",
+    "@zag-js/tabs": "1.21.0",
+    "@zag-js/tags-input": "1.21.0",
+    "@zag-js/time-picker": "1.21.0",
+    "@zag-js/timer": "1.21.0",
+    "@zag-js/toast": "1.21.0",
+    "@zag-js/toggle": "1.21.0",
+    "@zag-js/toggle-group": "1.21.0",
+    "@zag-js/tooltip": "1.21.0",
+    "@zag-js/tour": "1.21.0",
+    "@zag-js/tree-view": "1.21.0",
+    "@zag-js/types": "1.21.0",
+    "@zag-js/utils": "1.21.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "9.0.18",
@@ -192,6 +192,7 @@
     "@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.525.0",
     "storybook": "9.0.18",
     "svelte": "5.36.13",

package/dist/components/portal/portal-consumer.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte'
-
-  const { children }: { children: Snippet } = $props()
-</script>
-
-{#if children}
-  {@render children()}
-{/if}

package/dist/components/portal/portal-consumer.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-};
-declare const PortalConsumer: import("svelte").Component<$$ComponentProps, {}, "">;
-type PortalConsumer = ReturnType<typeof PortalConsumer>;
-export default PortalConsumer;