ui-ingredients 0.27.0 → 0.29.0

package/dist/alert/alert-description.svelte

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

package/dist/alert/alert-indicator.svelte

@@ -1,30 +1,29 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertIndicatorProps
-    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {getAlertContext} from './alert-context.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertIndicatorProps = $props();
-
-  let alert = getAlertContext();
-
-  let attrs = $derived(mergeProps(alert.getIndicatorProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <span bind:this={ref} {...attrs}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {getAlertContext} from './alert-context.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertIndicatorProps = $props();
+
+  let alert = getAlertContext();
+  let mergedProps = $derived(mergeProps(alert.getIndicatorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/alert/alert-root.svelte

@@ -1,34 +1,44 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {CreateAlertReturn} from './create-alert.svelte.js';
-
-  export interface AlertProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {setAlertContext} from './alert-context.js';
-  import {createAlert} from './create-alert.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertProps = $props();
-
-  let alert = createAlert();
-
-  let attrs = $derived(mergeProps(alert.getRootProps(), props));
-
-  setAlertContext(alert);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, alert)}
-{:else}
-  <div bind:this={ref} {...attrs}>
-    {@render children?.(alert)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateAlertProps,
+    CreateAlertReturn,
+  } from './create-alert.svelte.js';
+
+  export interface AlertProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn>,
+      CreateAlertProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps, reflect} from '@zag-js/svelte';
+  import {setAlertContext} from './alert-context.js';
+  import {createAlert} from './create-alert.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertProps = $props();
+
+  let [createAlertProps, localProps] = $derived(
+    createSplitProps<CreateAlertProps>(['id'])(props),
+  );
+
+  let alert = createAlert(reflect(() => createAlertProps));
+  let mergedProps = $derived(mergeProps(alert.getRootProps(), localProps));
+
+  setAlertContext(alert);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, alert)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(alert)}
+  </div>
+{/if}

package/dist/alert/alert-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { HtmlIngredientProps } from '../types.js';
-import type { CreateAlertReturn } from './create-alert.svelte.js';
-export interface AlertProps extends HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn> {
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateAlertProps, CreateAlertReturn } from './create-alert.svelte.js';
+export interface AlertProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn>, CreateAlertProps> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/alert/alert-title.svelte

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

package/dist/alert/create-alert.svelte.d.ts

@@ -1,8 +1,19 @@
 import type { HTMLAttributes } from 'svelte/elements';
+interface ElementIds {
+    root: string;
+    title: string;
+    description: string;
+    indicator: string;
+}
+export interface CreateAlertProps {
+    id?: string;
+    ids?: ElementIds;
+}
 export interface CreateAlertReturn {
     getRootProps(): HTMLAttributes<HTMLElement>;
     getTitleProps(): HTMLAttributes<HTMLElement>;
     getDescriptionProps(): HTMLAttributes<HTMLElement>;
     getIndicatorProps(): HTMLAttributes<HTMLElement>;
 }
-export declare function createAlert(): CreateAlertReturn;
+export declare function createAlert(props: CreateAlertProps): CreateAlertReturn;
+export {};

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

@@ -1,23 +1,62 @@
+import { createUniqueId } from '../create-unique-id.js';
+import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getDocument, getWindow } from '@zag-js/dom-query';
 import { parts } from './alert-anatomy.js';
-export function createAlert() {
+export function createAlert(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const uid = createUniqueId();
+    const id = $derived(props.id ?? uid);
+    const ids = $derived({
+        root: props.ids?.root ?? `alert:${id}`,
+        title: props.ids?.title ?? `alert:${id}:title`,
+        description: props.ids?.description ?? `alert:${id}:description`,
+        indicator: props.ids?.indicator ?? `alert:${id}:indicator`,
+    });
+    let hasTitle = $state(false);
+    let hasDescription = $state(false);
+    $effect(() => {
+        const rootNode = environment?.getRootNode() ?? document;
+        const doc = getDocument(rootNode);
+        const win = getWindow(rootNode);
+        function handler() {
+            hasTitle = doc.getElementById(ids.title) !== null;
+            hasDescription = doc.getElementById(ids.description) !== null;
+        }
+        handler();
+        const observer = new win.MutationObserver(handler);
+        observer.observe(rootNode, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    });
     function getRootProps() {
         return {
+            id: ids.root,
+            dir: locale?.dir,
             role: 'alert',
+            'aria-labelledby': hasTitle ? ids.title : undefined,
+            'aria-describedby': hasDescription ? ids.description : undefined,
             ...parts.root.attrs,
         };
     }
     function getTitleProps() {
         return {
+            id: ids.title,
+            dir: locale?.dir,
             ...parts.title.attrs,
         };
     }
     function getDescriptionProps() {
         return {
+            id: ids.description,
+            dir: locale?.dir,
             ...parts.description.attrs,
         };
     }
     function getIndicatorProps() {
         return {
+            id: ids.indicator,
+            dir: locale?.dir,
             'aria-hidden': true,
             ...parts.indicator.attrs,
         };

package/dist/alert/index.d.ts

@@ -5,4 +5,4 @@ export type { AlertProps } from './alert-root.svelte';
 export type { AlertTitleProps } from './alert-title.svelte';
 export { anatomy as alertAnatomy } from './alert-anatomy.js';
 export { getAlertContext, setAlertContext } from './alert-context.js';
-export { createAlert, type CreateAlertReturn } from './create-alert.svelte.js';
+export { createAlert, type CreateAlertProps, type CreateAlertReturn, } from './create-alert.svelte.js';

package/dist/alert/index.js

@@ -1,4 +1,4 @@
 export * as Alert from './alert.js';
 export { anatomy as alertAnatomy } from './alert-anatomy.js';
 export { getAlertContext, setAlertContext } from './alert-context.js';
-export { createAlert } from './create-alert.svelte.js';
+export { createAlert, } from './create-alert.svelte.js';

package/dist/alert-dialog/alert-dialog-anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const anatomy: import("@zag-js/anatomy").Anatomy<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger">;
-export declare const parts: Record<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", import("@zag-js/anatomy").AnatomyPart>;
+export declare const anatomy: import("@zag-js/anatomy").Anatomy<"content" | "title" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger">;
+export declare const parts: Record<"content" | "title" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", import("@zag-js/anatomy").AnatomyPart>;

package/dist/alert-dialog/alert-dialog-backdrop.svelte

@@ -1,48 +1,48 @@
-<script lang="ts" module>
-  import type {Action} from 'svelte/action';
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertDialogBackdropProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps, reflect} from '@zag-js/svelte';
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertDialogBackdropProps = $props();
-
-  let alertDialog = getAlertDialogContext();
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: alertDialog.open,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(
-      alertDialog.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 {Action} from 'svelte/action';
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertDialogBackdropProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps, reflect} from '@zag-js/svelte';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertDialogBackdropProps = $props();
+
+  let alertDialog = getAlertDialogContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: alertDialog.open,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      alertDialog.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/alert-dialog/alert-dialog-close-trigger.svelte

@@ -1,32 +1,32 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertDialogCloseTriggerProps
-    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertDialogCloseTriggerProps = $props();
-
-  let alertDialog = getAlertDialogContext();
-
-  let mergedProps = $derived(
-    mergeProps(alertDialog.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 AlertDialogCloseTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertDialogCloseTriggerProps = $props();
+
+  let alertDialog = getAlertDialogContext();
+
+  let mergedProps = $derived(
+    mergeProps(alertDialog.getCloseTriggerProps(), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/alert-dialog/alert-dialog-content.svelte

@@ -1,41 +1,41 @@
-<script lang="ts" module>
-  import type {Action} from 'svelte/action';
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertDialogContentProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {getPresenceContext} from '../presence/presence-context.svelte.js';
-  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertDialogContentProps = $props();
-
-  let alertDialog = getAlertDialogContext();
-  let presence = getPresenceContext();
-
-  let mergedProps = $derived(
-    mergeProps(
-      alertDialog.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 {Action} from 'svelte/action';
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertDialogContentProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {getPresenceContext} from '../presence/presence-context.svelte.js';
+  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertDialogContentProps = $props();
+
+  let alertDialog = getAlertDialogContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      alertDialog.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}