ui-ingredients 0.15.0 → 0.16.0

package/dist/dialog/dialog-title.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface DialogTitleProps
-    extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getDialogContext} from './dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DialogTitleProps = $props();
-
-  let dialog = getDialogContext();
-
-  let mergedProps = $derived(mergeProps(dialog.getTitleProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <h2 bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </h2>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DialogTitleProps
+    extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDialogContext} from './dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DialogTitleProps = $props();
+
+  let dialog = getDialogContext();
+
+  let mergedProps = $derived(mergeProps(dialog.getTitleProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <h2 bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </h2>
+{/if}

package/dist/dialog/dialog-trigger.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface DialogTriggerProps
-    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getDialogContext} from './dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DialogTriggerProps = $props();
-
-  let dialog = getDialogContext();
-
-  let mergedProps = $derived(mergeProps(dialog.getTriggerProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <button bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DialogTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDialogContext} from './dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DialogTriggerProps = $props();
+
+  let dialog = getDialogContext();
+
+  let mergedProps = $derived(mergeProps(dialog.getTriggerProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/drawer/create-drawer.svelte.js

@@ -44,13 +44,22 @@ export function createDrawer(props) {
                 return mergeProps(o.getTriggerProps(), parts.trigger.attrs);
             },
             getBodyProps() {
-                return { ...parts.body.attrs };
+                return {
+                    ...parts.body.attrs,
+                    'data-state': o.open ? 'open' : 'closed',
+                };
             },
             getFooterProps() {
-                return { ...parts.footer.attrs };
+                return {
+                    ...parts.footer.attrs,
+                    'data-state': o.open ? 'open' : 'closed',
+                };
             },
             getHeaderProps() {
-                return { ...parts.header.attrs };
+                return {
+                    ...parts.header.attrs,
+                    'data-state': o.open ? 'open' : 'closed',
+                };
             },
         };
     });

package/dist/drawer/drawer-backdrop.svelte

@@ -1,45 +1,45 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {Action} from 'svelte/action';
-
-  export interface DrawerBackdropProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {reflect} from '@zag-js/svelte';
-  import {getDrawerContext} from './drawer-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DrawerBackdropProps = $props();
-
-  let drawer = getDrawerContext();
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: drawer.open,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(drawer.getBackdropProps(), presence.getPresenceProps(), props),
-  );
-</script>
-
-{#if presence.mounted}
-  {#if asChild}
-    {@render asChild(presence.setReference, mergedProps)}
-  {:else}
-    <div bind:this={ref} use:presence.setReference {...mergedProps}>
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface DrawerBackdropProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerBackdropProps = $props();
+
+  let drawer = getDrawerContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: drawer.open,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(drawer.getBackdropProps(), presence.getPresenceProps(), props),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/drawer/drawer-body.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface DrawerBodyProps
-    extends HtmlIngredientProps<'div', HTMLDivElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getDrawerContext} from './drawer-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DrawerBodyProps = $props();
-
-  let drawer = getDrawerContext();
-
-  let mergedProps = $derived(mergeProps(drawer.getBodyProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerBodyProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerBodyProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getBodyProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/drawer/drawer-close-trigger.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface DrawerCloseTriggerProps
-    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getDrawerContext} from './drawer-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DrawerCloseTriggerProps = $props();
-
-  let drawer = getDrawerContext();
-
-  let mergedProps = $derived(mergeProps(drawer.getCloseTriggerProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <button bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerCloseTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerCloseTriggerProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getCloseTriggerProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/drawer/drawer-content.svelte

@@ -1,37 +1,37 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {Action} from 'svelte/action';
-
-  export interface DrawerContentProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getPresenceContext} from '../presence/presence-context.svelte.js';
-  import {getDrawerContext} from './drawer-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DrawerContentProps = $props();
-
-  let drawer = getDrawerContext();
-  let presence = getPresenceContext();
-
-  let mergedProps = $derived(
-    mergeProps(drawer.getContentProps(), presence.getPresenceProps(), props),
-  );
-</script>
-
-{#if presence.mounted}
-  {#if asChild}
-    {@render asChild(presence.setReference, mergedProps)}
-  {:else}
-    <div bind:this={ref} use:presence.setReference {...mergedProps}>
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface DrawerContentProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/presence-context.svelte.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerContentProps = $props();
+
+  let drawer = getDrawerContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(drawer.getContentProps(), presence.getPresenceProps(), props),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/drawer/drawer-description.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface DrawerDescriptionProps
-    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getDrawerContext} from './drawer-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DrawerDescriptionProps = $props();
-
-  let drawer = getDrawerContext();
-
-  let mergedProps = $derived(mergeProps(drawer.getDescriptionProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <p bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </p>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerDescriptionProps
+    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerDescriptionProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getDescriptionProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <p bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </p>
+{/if}

package/dist/drawer/drawer-footer.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface DrawerFooterProps
-    extends HtmlIngredientProps<'div', HTMLDivElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getDrawerContext} from './drawer-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DrawerFooterProps = $props();
-
-  let drawer = getDrawerContext();
-
-  let mergedProps = $derived(mergeProps(drawer.getFooterProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerFooterProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerFooterProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getFooterProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/drawer/drawer-header.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface DrawerHeaderProps
-    extends HtmlIngredientProps<'div', HTMLDivElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getDrawerContext} from './drawer-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DrawerHeaderProps = $props();
-
-  let drawer = getDrawerContext();
-
-  let mergedProps = $derived(mergeProps(drawer.getHeaderProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerHeaderProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerHeaderProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getHeaderProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}