@juspay/svelte-ui-components 4.10.3 → 4.10.5

package/dist/Accordion/Accordion.svelte

@@ -83,6 +83,22 @@
     display: grid;
     grid-template-rows: 0fr;
     overflow: hidden;
+    /* overflow: hidden drops this element's automatic minimum size to zero, so
+       when it is placed as an item of a consumer's own grid or flex container
+       it is otherwise free to be stretched down to whatever size that
+       container hands it -- as small as 0px -- independent of how tall its
+       own children actually are (issue #550). align-self: start opts the
+       panel out of that stretch so it always sizes from its own expanded
+       content instead. It is inert when the panel is not a grid or flex item,
+       and does not change the collapse animation: collapsed still resolves
+       to 0px either way.
+
+       Exposed as --accordion-align-self rather than hardcoded: Svelte's
+       scoped class raises .accordion's specificity above a plain utility
+       class passed through `classes`, so a consumer who legitimately wants
+       the panel stretched (or centered, etc.) could not otherwise override
+       this one declaration without reaching for :global() or !important. */
+    align-self: var(--accordion-align-self, start);
     transition: grid-template-rows var(--accordion-transition, 0.2s ease-out);
   }
 

package/dist/Card/properties.d.ts

@@ -97,10 +97,18 @@ export type OptionalCardProperties = {
     attrs?: Record<string, string>;
     /**
      * Overrides the tag `svelte:element` renders for the card root — e.g.
-     * `'figure'` for a card that needs real `<figure>` semantics (so a
-     * `<figcaption>` inside `children` or `footer` is valid markup, and the
-     * element carries sectioning-content semantics no wrapper `<figure>` around
-     * a `<div>`-rooted Card could give it).
+     * `'figure'` for a card whose root needs real `<figure>` sectioning-content
+     * semantics, without a separate wrapper element around a `<div>`-rooted
+     * Card.
+     *
+     * This does NOT provide a place for a `<figcaption>`: `children` is always
+     * wrapped in an inner `.card-content` div (and `title`/`headerRight` in
+     * `.card-header`, `footer` in a `<footer>` element), so a `<figcaption>`
+     * passed through any of those slots is not a direct child of the `<figure>`
+     * root and per spec is not exposed as its caption by any browser or
+     * assistive technology — do not put one there. If a `<figure>` needs a real
+     * caption today, wrap a plain (non-`as="figure"`) Card in your own
+     * `<figure>`/`<figcaption>` pair instead; Card has no caption slot.
      *
      * When omitted, the root keeps its existing behaviour exactly: `'a'` when
      * `href` is set, `'div'` otherwise. Setting `as` to anything other than

package/dist/Chat/controller.svelte.js

@@ -1,11 +1,7 @@
 import { partyOf } from './roles';
+import { prefersReducedMotion } from '../utils';
 const REVEAL_CHARS_PER_TICK = 2;
 const REVEAL_INTERVAL_MS = 22;
-function prefersReducedMotion() {
-    return (typeof window !== 'undefined' &&
-        typeof window.matchMedia === 'function' &&
-        window.matchMedia('(prefers-reduced-motion: reduce)').matches);
-}
 let idCounter = 0;
 function defaultId() {
     if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {

package/dist/Pill/Pill.svelte

@@ -16,7 +16,8 @@
     leadingIcon,
     onclick,
     ondismiss,
-    classes
+    classes,
+    attrs
   }: PillProperties = $props();
 
   let interactive = $derived(typeof onclick === 'function');
@@ -51,6 +52,7 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
+  {...attrs ?? {}}
   class="pill {pillToneClass(tone)} {classes ?? ''}"
   class:disabled
   onclick={interactive ? handleClick : null}
@@ -122,6 +124,11 @@
     cursor: var(--pill-cursor, pointer);
   }
 
+  .pill[role='button']:focus-visible {
+    outline: var(--pill-focus-outline, 2px solid currentColor);
+    outline-offset: var(--pill-focus-outline-offset, 2px);
+  }
+
   /* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's
      variant classes set --_btn-*: a plain --pill-background/--pill-color
      (explicit, or via `classes`) always wins over the tone's default. */

package/dist/Pill/properties.d.ts

@@ -36,6 +36,19 @@ export type OptionalPillProperties = {
      */
     leadingIcon?: Snippet;
     classes?: string;
+    /**
+     * Arbitrary attributes spread onto the pill root — `data-*`/`aria-*` (or any
+     * other) attribute names mapped to string values. For consumers that key off
+     * attribute-selector CSS (`[data-state="waiting"]`, `[data-density]`) the way
+     * the rest of their app does, instead of wrapping Pill in an extra element
+     * just to hold the attribute, or adding a second `classes` modifier for the
+     * same state. Applied before Pill's own `class`/`onclick`/`onkeydown`/
+     * `role`/`tabindex`/`aria-disabled`/`data-pw`/`title`/`testID` attributes, so
+     * an entry here can never override one of those — only add attributes Pill
+     * does not already manage. Omitted by default, so existing consumers render
+     * exactly the same attributes as before.
+     */
+    attrs?: Record<string, string>;
 };
 export type PillEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/Sheet/Sheet.svelte

@@ -11,6 +11,7 @@
     title,
     showOverlay = true,
     dismissOnOutsideClick = showOverlay,
+    overlayAriaLabel,
     showCloseButton = true,
     headingLevel,
     testId,
@@ -62,6 +63,23 @@
       return;
     }
 
+    // The overlay only carries role="button" while it is dismissible, and a
+    // role="button" has to answer Enter/Space as well as click (WCAG 2.1
+    // SC 2.1.1) -- tabindex="-1" keeps it out of the Tab sequence, but the
+    // focus trap can still park focus here, and browse-mode AT reaches it.
+    // The target check is what stops an Enter pressed on a focusable
+    // descendant from bubbling up and reading as an activation of the overlay
+    // itself, exactly as handleOverlayClick already guards the click case.
+    if (
+      (event.key === 'Enter' || event.key === ' ') &&
+      dismissOnOutsideClick &&
+      event.target === overlayDiv
+    ) {
+      event.preventDefault();
+      close();
+      return;
+    }
+
     if (event.key === 'Tab' && sheetPanel !== null) {
       const focusable = sheetPanel.querySelectorAll<HTMLElement>(
         'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
@@ -123,6 +141,20 @@
 </script>
 
 {#if open}
+  <!-- The overlay only carries role="button" -- and therefore an accessible
+       name -- while it is actually dismissible (dismissOnOutsideClick):
+       clicking it is already a guarded no-op otherwise (see
+       handleOverlayClick), and announcing a no-op as a focusable "button" is
+       worse for assistive tech than leaving it out of the accessibility tree
+       entirely. Modal's overlay applies the same reasoning for the same
+       shape of problem. When it IS dismissible, a role="button" node with no
+       accessible name would be announced as an unlabelled button, so it gets
+       one -- "Close sheet" by default, overridable via `overlayAriaLabel`.
+       The fallback is `||` on a trimmed value rather than `??`: an empty or
+       whitespace-only override is a name a screen reader cannot announce, so
+       it has to fall back like an absent one. `??` would forward it and leave
+       the overlay silently unnamed, which is the defect this whole block
+       exists to prevent. -->
   <div
     bind:this={overlayDiv}
     use:scrollLockAction
@@ -132,7 +164,8 @@
       : 'overlay-noninteractive'} {classes ?? ''}"
     onclick={handleOverlayClick}
     onkeydown={handleKeyDown}
-    role="button"
+    role={dismissOnOutsideClick ? 'button' : null}
+    aria-label={dismissOnOutsideClick ? overlayAriaLabel?.trim() || 'Close sheet' : null}
     tabindex="-1"
     data-pw={typeof testId === 'string' ? testId : null}
     testID={typeof testId === 'string' ? testId : null}
@@ -223,6 +256,22 @@
     outline: none;
   }
 
+  /* The panel itself is the initial focus target on open (scrollLockAction
+     focuses it directly, and it's the Tab-trap's own boundary), so removing
+     its outline unconditionally left a keyboard user with no visible sign
+     focus had moved into the sheet at all -- particularly visible on the
+     "Raw" variant, which has no focusable child for focus to land on
+     instead. :focus-visible restores a ring precisely when the browser
+     judges it's from keyboard/programmatic focus rather than a mouse click,
+     so clicking the trigger still shows nothing new. outline-offset is
+     negative (inset) rather than the usual positive offset other components
+     in this library use, because left/right/top/bottom panels sit flush
+     against a viewport edge -- a positive offset would clip there. */
+  .sheet-panel:focus-visible {
+    outline: var(--sheet-panel-focus-outline, 2px solid #2563eb);
+    outline-offset: var(--sheet-panel-focus-outline-offset, -2px);
+  }
+
   /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded
      edge-to-edge values below, so an unconfigured Sheet renders unchanged.
      Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:

package/dist/Sheet/properties.d.ts

@@ -17,6 +17,14 @@ export type OptionalSheetProperties = {
      * dimming backdrop — e.g. an anchored dropdown-style panel.
      */
     dismissOnOutsideClick?: boolean;
+    /**
+     * Accessible name (rendered as `aria-label`) for the overlay's `role="button"`
+     * wrapper. Only meaningful when the overlay is dismissible
+     * (`dismissOnOutsideClick`) — that's the only state where the overlay is
+     * announced as a button at all (see Accessibility below). Defaults to
+     * `"Close sheet"`; override for a more specific or localized wording.
+     */
+    overlayAriaLabel?: string;
     showCloseButton?: boolean;
     /**
      * Renders `title` through a real `<h1>`-`<h6>` heading element instead of

package/dist/TypewriterText/TypewriterText.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy, untrack } from 'svelte';
+  import { prefersReducedMotion } from '../utils';
   import type { TypewriterTextProperties, TypewriterCharacterDelayRange } from './properties';
 
   let {
@@ -75,7 +76,34 @@
     return speed;
   };
 
+  // Disclose everything still pending at once. The whitespace count has to be rebuilt
+  // from the text itself because the per-character path that normally maintains it is
+  // skipped entirely, and a later continuation would otherwise resume from a count that
+  // never saw the revealed suffix.
+  const revealRemainingText = (): void => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    const hadRemainingText = currentIndex < text.length;
+    displayedText = text;
+    currentIndex = text.length;
+    revealedWordCount = countWhitespace(text);
+    if (hadRemainingText) {
+      onprogress?.({ index: currentIndex, total: text.length, displayedText });
+    }
+  };
+
   const typeNextCharacter = (): void => {
+    // Typing IS the animation here, so a reduced-motion request has to suppress the
+    // reveal itself rather than a transition around it: disclose the text instead.
+    // `ChatController` already bypasses its own drain loop on this setting, and the two
+    // reveal implementations have to answer it identically — a consumer composing this
+    // component through `Chat`'s `messageBody` snippet is running both at once.
+    if (prefersReducedMotion()) {
+      revealRemainingText();
+      return;
+    }
     if (currentIndex < text.length) {
       const revealedCharacter = text[currentIndex];
       const revealedCharacterIndex = currentIndex;
@@ -122,6 +150,7 @@
         if (currentIndex >= previousTextLength) {
           if (timeoutId !== null) {
             clearTimeout(timeoutId);
+            timeoutId = null;
           }
           typeNextCharacter();
         }
@@ -133,16 +162,7 @@
   // eslint-disable-next-line no-restricted-syntax
   $effect(() => {
     if (!isStreaming && text.length > 0) {
-      if (timeoutId !== null) {
-        clearTimeout(timeoutId);
-      }
-      const hadRemainingText = currentIndex < text.length;
-      displayedText = text;
-      currentIndex = text.length;
-      revealedWordCount = countWhitespace(text);
-      if (hadRemainingText) {
-        onprogress?.({ index: currentIndex, total: text.length, displayedText });
-      }
+      revealRemainingText();
     }
   });
 

package/dist/utils.d.ts

@@ -25,6 +25,16 @@ export declare function hsvToHsl(h: number, s: number, v: number): Hsl;
 export declare function hslToHsv(hDeg: number, sPct: number, lPct: number): Hsv;
 export declare function isValidHex(hex: string): boolean;
 export declare function clampInt(v: string, min: number, max: number): number;
+/**
+ * Whether the user has asked the OS to minimise animation.
+ *
+ * Shared rather than per-component: two independent character-reveal
+ * implementations ship in this library — `ChatController`'s buffered drain and
+ * `TypewriterText`'s typing loop — and a reveal that honours this setting in one
+ * but not the other means the same OS preference silences an animation in a chat
+ * bubble and leaves it running in the message body rendered inside it.
+ */
+export declare function prefersReducedMotion(): boolean;
 export declare function createDebouncer(delay: number): <T extends unknown[]>(callback: (...args: T) => void, ...args: T) => void;
 export declare function lockBodyScroll(): void;
 export declare function unlockBodyScroll(): void;

package/dist/utils.js

@@ -282,6 +282,20 @@ export function clampInt(v, min, max) {
     return Math.max(min, Math.min(max, n));
 }
 // ── Misc ────────────────────────────────────────────────────────
+/**
+ * Whether the user has asked the OS to minimise animation.
+ *
+ * Shared rather than per-component: two independent character-reveal
+ * implementations ship in this library — `ChatController`'s buffered drain and
+ * `TypewriterText`'s typing loop — and a reveal that honours this setting in one
+ * but not the other means the same OS preference silences an animation in a chat
+ * bubble and leaves it running in the message body rendered inside it.
+ */
+export function prefersReducedMotion() {
+    return (typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
 export function createDebouncer(delay) {
     let lastCallTime = 0;
     return function (callback, ...args) {

package/dist-wc/index.js

@@ -6125,6 +6125,9 @@ function clampInt(e, t, n) {
 	let i = parseInt(e, 10);
 	return Number.isNaN(i) ? t : Math.max(t, Math.min(n, i));
 }
+function prefersReducedMotion() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function createDebouncer(e) {
 	let t = 0;
 	return function(n, ...i) {
@@ -6768,21 +6771,21 @@ function pillToneClass(e) {
 //#region src/lib/Pill/Pill.svelte
 var root$75 = /* @__PURE__ */ from_html("<span class=\"pill-leading-icon svelte-13eug5u\"><!></span>"), root_1$64 = /* @__PURE__ */ from_html("<div class=\"pill-dismiss svelte-13eug5u\"><!></div>"), root_2$48 = /* @__PURE__ */ from_html("<div><!> <span class=\"pill-text svelte-13eug5u\"> </span> <!></div>"), $$css$75 = {
 	hash: "svelte-13eug5u",
-	code: ".pill.svelte-13eug5u {display:inline-flex;align-items:center;\n    /* A pill is content-width by default. A caller stacking pills into a menu needs\n       them to fill the column and align their labels left, which is a layout choice\n       the call site owns — hence tokens rather than a variant. */width:var(--pill-width, auto);justify-content:var(--pill-justify-content, center);text-align:var(--pill-text-align, center);gap:var(--pill-gap, 4px);background-color:var(--pill-background, var(--_pill-tone-background, #e0e0e0));color:var(--pill-color, var(--_pill-tone-color, #333333));font-size:var(--pill-font-size, 13px);font-weight:var(--pill-font-weight, 500);font-family:var(--pill-font-family);letter-spacing:var(--pill-letter-spacing, normal);text-transform:var(--pill-text-transform, none);padding:var(--pill-padding, 6px 10px);border-radius:var(--pill-border-radius, 999px);border:var(--pill-border, none);\n    /* Non-interactive by default: nothing is clickable, so nothing should look\n       clickable. The pointer default below applies only once role=\"button\" is\n       actually present (see handleClick / `interactive`) — an explicit\n       --pill-cursor still wins in both cases. */cursor:var(--pill-cursor, default);max-width:var(--pill-max-width);line-height:var(--pill-line-height, 1);flex-shrink:var(--pill-flex-shrink);}.pill[role='button'].svelte-13eug5u {cursor:var(--pill-cursor, pointer);}\n\n  /* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's\n     variant classes set --_btn-*: a plain --pill-background/--pill-color\n     (explicit, or via `classes`) always wins over the tone's default. */.tone-accent.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-accent-background, #d1ecf1);--_pill-tone-color: var(--pill-tone-accent-color, #0c5460);}.tone-ok.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-ok-background, #d4edda);--_pill-tone-color: var(--pill-tone-ok-color, #155724);}.tone-warn.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-warn-background, #fff3cd);--_pill-tone-color: var(--pill-tone-warn-color, #856404);}.tone-danger.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-danger-background, #f8d7da);--_pill-tone-color: var(--pill-tone-danger-color, #721c24);}.tone-muted.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-muted-background, #f1f1f1);--_pill-tone-color: var(--pill-tone-muted-color, #6b7280);}.pill.svelte-13eug5u:hover:not(.disabled) {background-color:var(\n      --pill-hover-background,\n      var(--pill-background, var(--_pill-tone-background, #d0d0d0))\n    );color:var(--pill-hover-color, var(--pill-color, var(--_pill-tone-color, #333333)));}.pill.disabled.svelte-13eug5u {opacity:var(--pill-disabled-opacity, 0.4);cursor:var(--pill-disabled-cursor, not-allowed);}.pill-text.svelte-13eug5u {overflow:hidden;text-overflow:var(--pill-text-overflow, ellipsis);white-space:var(--pill-text-white-space, nowrap);}.pill-leading-icon.svelte-13eug5u {display:inline-flex;align-items:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u {--button-color: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-text-color: var(\n      --pill-dismiss-hover-color,\n      var(--pill-dismiss-color, currentColor)\n    );--cursor: inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}\n\n  /* Consumer themes can set Button tokens on its container, beating inherited\n     wrapper values. Pin the painting element too so the chip owns its enabled\n     glyph; leave disabled colours and focus indicators to the consumer theme. */.pill-dismiss.svelte-13eug5u .button-container,\n  .pill-dismiss.svelte-13eug5u .button-el {--button-color: transparent;--button-background: none;--button-active-background: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-border: none;--button-hover-text-color: var(\n      --pill-dismiss-hover-color,\n      var(--pill-dismiss-color, currentColor)\n    );}.pill-dismiss.svelte-13eug5u svg {width:var(--pill-dismiss-size, 14px);height:var(--pill-dismiss-size, 14px);}"
+	code: ".pill.svelte-13eug5u {display:inline-flex;align-items:center;\n    /* A pill is content-width by default. A caller stacking pills into a menu needs\n       them to fill the column and align their labels left, which is a layout choice\n       the call site owns — hence tokens rather than a variant. */width:var(--pill-width, auto);justify-content:var(--pill-justify-content, center);text-align:var(--pill-text-align, center);gap:var(--pill-gap, 4px);background-color:var(--pill-background, var(--_pill-tone-background, #e0e0e0));color:var(--pill-color, var(--_pill-tone-color, #333333));font-size:var(--pill-font-size, 13px);font-weight:var(--pill-font-weight, 500);font-family:var(--pill-font-family);letter-spacing:var(--pill-letter-spacing, normal);text-transform:var(--pill-text-transform, none);padding:var(--pill-padding, 6px 10px);border-radius:var(--pill-border-radius, 999px);border:var(--pill-border, none);\n    /* Non-interactive by default: nothing is clickable, so nothing should look\n       clickable. The pointer default below applies only once role=\"button\" is\n       actually present (see handleClick / `interactive`) — an explicit\n       --pill-cursor still wins in both cases. */cursor:var(--pill-cursor, default);max-width:var(--pill-max-width);line-height:var(--pill-line-height, 1);flex-shrink:var(--pill-flex-shrink);}.pill[role='button'].svelte-13eug5u {cursor:var(--pill-cursor, pointer);}.pill[role='button'].svelte-13eug5u:focus-visible {outline:var(--pill-focus-outline, 2px solid currentColor);outline-offset:var(--pill-focus-outline-offset, 2px);}\n\n  /* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's\n     variant classes set --_btn-*: a plain --pill-background/--pill-color\n     (explicit, or via `classes`) always wins over the tone's default. */.tone-accent.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-accent-background, #d1ecf1);--_pill-tone-color: var(--pill-tone-accent-color, #0c5460);}.tone-ok.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-ok-background, #d4edda);--_pill-tone-color: var(--pill-tone-ok-color, #155724);}.tone-warn.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-warn-background, #fff3cd);--_pill-tone-color: var(--pill-tone-warn-color, #856404);}.tone-danger.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-danger-background, #f8d7da);--_pill-tone-color: var(--pill-tone-danger-color, #721c24);}.tone-muted.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-muted-background, #f1f1f1);--_pill-tone-color: var(--pill-tone-muted-color, #6b7280);}.pill.svelte-13eug5u:hover:not(.disabled) {background-color:var(\n      --pill-hover-background,\n      var(--pill-background, var(--_pill-tone-background, #d0d0d0))\n    );color:var(--pill-hover-color, var(--pill-color, var(--_pill-tone-color, #333333)));}.pill.disabled.svelte-13eug5u {opacity:var(--pill-disabled-opacity, 0.4);cursor:var(--pill-disabled-cursor, not-allowed);}.pill-text.svelte-13eug5u {overflow:hidden;text-overflow:var(--pill-text-overflow, ellipsis);white-space:var(--pill-text-white-space, nowrap);}.pill-leading-icon.svelte-13eug5u {display:inline-flex;align-items:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u {--button-color: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-text-color: var(\n      --pill-dismiss-hover-color,\n      var(--pill-dismiss-color, currentColor)\n    );--cursor: inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}\n\n  /* Consumer themes can set Button tokens on its container, beating inherited\n     wrapper values. Pin the painting element too so the chip owns its enabled\n     glyph; leave disabled colours and focus indicators to the consumer theme. */.pill-dismiss.svelte-13eug5u .button-container,\n  .pill-dismiss.svelte-13eug5u .button-el {--button-color: transparent;--button-background: none;--button-active-background: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-border: none;--button-hover-text-color: var(\n      --pill-dismiss-hover-color,\n      var(--pill-dismiss-color, currentColor)\n    );}.pill-dismiss.svelte-13eug5u svg {width:var(--pill-dismiss-size, 14px);height:var(--pill-dismiss-size, 14px);}"
 };
 function Pill(e, t) {
 	push(t, !0), append_styles$1(e, $$css$75);
-	let n = prop(t, "text", 7), i = prop(t, "dismissible", 7, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "tone", 7), s = prop(t, "testId", 7), c = prop(t, "title", 7), l = prop(t, "dismissIcon", 7), u = prop(t, "dismissLabel", 7), f = prop(t, "leadingIcon", 7), p = prop(t, "onclick", 7), h = prop(t, "ondismiss", 7), S = prop(t, "classes", 7), C = /* @__PURE__ */ user_derived(() => typeof p() == "function");
-	function k(e) {
+	let n = prop(t, "text", 7), i = prop(t, "dismissible", 7, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "tone", 7), s = prop(t, "testId", 7), c = prop(t, "title", 7), l = prop(t, "dismissIcon", 7), u = prop(t, "dismissLabel", 7), f = prop(t, "leadingIcon", 7), p = prop(t, "onclick", 7), h = prop(t, "ondismiss", 7), S = prop(t, "classes", 7), C = prop(t, "attrs", 7), k = /* @__PURE__ */ user_derived(() => typeof p() == "function");
+	function R(e) {
 		a() || p()?.(e);
 	}
-	function R(e) {
+	function G(e) {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
 	}
-	function G(e) {
+	function te(e) {
 		e.stopPropagation(), !a() && h()?.();
 	}
-	var te = {
+	var ne = {
 		get text() {
 			return n();
 		},
@@ -6854,10 +6857,28 @@ function Pill(e, t) {
 		},
 		set classes(e) {
 			S(e), flushSync();
+		},
+		get attrs() {
+			return C();
+		},
+		set attrs(e) {
+			C(e), flushSync();
 		}
-	}, ne = root_2$48();
-	let re;
-	var be = child(ne), Me = (e) => {
+	}, re = root_2$48();
+	attribute_effect(re, (e) => ({
+		...C() ?? {},
+		class: `pill ${e ?? ""} ${S() ?? "" ?? ""}`,
+		onclick: get(k) ? R : null,
+		onkeydown: get(k) ? G : null,
+		role: get(k) ? "button" : null,
+		tabindex: get(k) ? 0 : null,
+		"aria-disabled": get(k) && a() ? !0 : null,
+		"data-pw": typeof s() == "string" ? s() : null,
+		title: c() ?? null,
+		testID: typeof s() == "string" ? s() : null,
+		[CLASS]: { disabled: a() }
+	}), [() => pillToneClass(o())], void 0, void 0, "svelte-13eug5u");
+	var be = child(re), Me = (e) => {
 		var t = root$75();
 		snippet(child(t), f), reset(t), append(e, t);
 	};
@@ -6875,7 +6896,7 @@ function Pill(e, t) {
 				get disabled() {
 					return a();
 				},
-				onclick: G,
+				onclick: te,
 				get ariaLabel() {
 					return get(e);
 				}
@@ -6899,15 +6920,9 @@ function Pill(e, t) {
 	};
 	return if_block(it, (e) => {
 		i() && e(at);
-	}), reset(ne), template_effect((e) => {
-		re = set_class(ne, 1, `pill ${e ?? ""} ${S() ?? "" ?? ""}`, "svelte-13eug5u", re, { disabled: a() }), set_attribute(ne, "role", get(C) ? "button" : null), set_attribute(ne, "tabindex", get(C) ? 0 : null), set_attribute(ne, "aria-disabled", get(C) && a() ? !0 : null), set_attribute(ne, "data-pw", typeof s() == "string" ? s() : null), set_attribute(ne, "title", c() ?? null), set_attribute(ne, "testid", typeof s() == "string" ? s() : null), set_text(Ue, n());
-	}, [() => pillToneClass(o())]), delegated("click", ne, function(...e) {
-		(get(C) ? k : null)?.apply(this, e);
-	}), delegated("keydown", ne, function(...e) {
-		(get(C) ? R : null)?.apply(this, e);
-	}), append(e, ne), pop(te);
+	}), reset(re), template_effect(() => set_text(Ue, n())), append(e, re), pop(ne);
 }
-delegate(["click", "keydown"]), create_custom_element(Pill, {
+create_custom_element(Pill, {
 	text: {},
 	dismissible: {},
 	disabled: {},
@@ -6919,7 +6934,8 @@ delegate(["click", "keydown"]), create_custom_element(Pill, {
 	leadingIcon: {},
 	onclick: {},
 	ondismiss: {},
-	classes: {}
+	classes: {},
+	attrs: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/ChipInput/ChipInput.svelte
@@ -10340,7 +10356,8 @@ customElements.define("sui-pill", create_custom_element(Pill_wc, {
 	},
 	classes: { type: "String" },
 	onclick: { type: "Object" },
-	ondismiss: { type: "Object" }
+	ondismiss: { type: "Object" },
+	attrs: { type: "Object" }
 }, ["leading-icon", "dismiss-icon"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Progress/Progress.svelte
@@ -12399,7 +12416,7 @@ customElements.define("sui-toggle", create_custom_element(Toggle_wc, {
 //#region src/lib/Accordion/Accordion.svelte
 var root$49 = /* @__PURE__ */ from_html("<div role=\"button\"><!></div>"), root_1$43 = /* @__PURE__ */ from_html("<!> <div><div class=\"accordion-content svelte-1p9ezsm\"><!></div></div>", 1), $$css$49 = {
 	hash: "svelte-1p9ezsm",
-	code: ".accordion-trigger.svelte-1p9ezsm {cursor:var(--accordion-trigger-cursor, pointer);}.accordion-trigger.disabled.svelte-1p9ezsm {cursor:var(--accordion-trigger-disabled-cursor, not-allowed);}.accordion.svelte-1p9ezsm {display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--accordion-transition, 0.2s ease-out);}.accordion.expanded.svelte-1p9ezsm {grid-template-rows:1fr;}.accordion-content.svelte-1p9ezsm {min-height:0;}"
+	code: ".accordion-trigger.svelte-1p9ezsm {cursor:var(--accordion-trigger-cursor, pointer);}.accordion-trigger.disabled.svelte-1p9ezsm {cursor:var(--accordion-trigger-disabled-cursor, not-allowed);}.accordion.svelte-1p9ezsm {display:grid;grid-template-rows:0fr;overflow:hidden;\n    /* overflow: hidden drops this element's automatic minimum size to zero, so\n       when it is placed as an item of a consumer's own grid or flex container\n       it is otherwise free to be stretched down to whatever size that\n       container hands it -- as small as 0px -- independent of how tall its\n       own children actually are (issue #550). align-self: start opts the\n       panel out of that stretch so it always sizes from its own expanded\n       content instead. It is inert when the panel is not a grid or flex item,\n       and does not change the collapse animation: collapsed still resolves\n       to 0px either way.\n\n       Exposed as --accordion-align-self rather than hardcoded: Svelte's\n       scoped class raises .accordion's specificity above a plain utility\n       class passed through `classes`, so a consumer who legitimately wants\n       the panel stretched (or centered, etc.) could not otherwise override\n       this one declaration without reaching for :global() or !important. */align-self:var(--accordion-align-self, start);transition:grid-template-rows var(--accordion-transition, 0.2s ease-out);}.accordion.expanded.svelte-1p9ezsm {grid-template-rows:1fr;}.accordion-content.svelte-1p9ezsm {min-height:0;}"
 };
 function Accordion(e, t) {
 	let n = props_id();
@@ -16274,12 +16291,20 @@ var rest_excludes$37 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
-	"$$host"
+	"$$host",
+	"modalAriaLabel",
+	"modalRole"
 ]);
 function Modal_wc(e, t) {
 	push(t, !0);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$37);
-	Modal(e, spread_props(() => n, {
+	let n = prop(t, "modalAriaLabel", 7), i = prop(t, "modalRole", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$37);
+	return Modal(e, spread_props(() => a, {
+		get ariaLabel() {
+			return n();
+		},
+		get role() {
+			return i();
+		},
 		content: (e) => {
 			var n = comment(), i = first_child(n), a = (e) => {
 				var n = comment();
@@ -16308,7 +16333,20 @@ function Modal_wc(e, t) {
 			content: !0,
 			footerSnippet: !0
 		}
-	})), pop();
+	})), pop({
+		get modalAriaLabel() {
+			return n();
+		},
+		set modalAriaLabel(e) {
+			n(e), flushSync();
+		},
+		get modalRole() {
+			return i();
+		},
+		set modalRole(e) {
+			i(e), flushSync();
+		}
+	});
 }
 customElements.define("sui-modal", create_custom_element(Modal_wc, {
 	size: {
@@ -16395,7 +16433,15 @@ customElements.define("sui-modal", create_custom_element(Modal_wc, {
 	onprimarybuttonclick: { type: "Object" },
 	onsecondarybuttonclick: { type: "Object" },
 	onoverlayclick: { type: "Object" },
-	ondismiss: { type: "Object" }
+	ondismiss: { type: "Object" },
+	modalAriaLabel: {
+		attribute: "modal-aria-label",
+		type: "String"
+	},
+	modalRole: {
+		attribute: "modal-role",
+		type: "String"
+	}
 }, ["default", "footer"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/assets/signal.svg?raw
@@ -17566,13 +17612,13 @@ customElements.define("sui-select", create_custom_element(Select_wc, {
 }, ["bottom-content"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Sheet/Sheet.svelte
-var root$31 = /* @__PURE__ */ from_html("<span class=\"sheet-title svelte-1dln6bq\"> </span>"), root_1$28 = /* @__PURE__ */ from_html("<div class=\"sheet-close-button svelte-1dln6bq\"><!></div>"), root_2$22 = /* @__PURE__ */ from_html("<div class=\"sheet-header svelte-1dln6bq\"><!> <!></div>"), root_3$20 = /* @__PURE__ */ from_html("<div class=\"sheet-footer svelte-1dln6bq\"><!></div>"), root_4$16 = /* @__PURE__ */ from_html("<div role=\"button\" tabindex=\"-1\"><div role=\"dialog\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"sheet-content svelte-1dln6bq\"><!></div> <!></div></div>"), $$css$33 = {
+var root$31 = /* @__PURE__ */ from_html("<span class=\"sheet-title svelte-1dln6bq\"> </span>"), root_1$28 = /* @__PURE__ */ from_html("<div class=\"sheet-close-button svelte-1dln6bq\"><!></div>"), root_2$22 = /* @__PURE__ */ from_html("<div class=\"sheet-header svelte-1dln6bq\"><!> <!></div>"), root_3$20 = /* @__PURE__ */ from_html("<div class=\"sheet-footer svelte-1dln6bq\"><!></div>"), root_4$16 = /* @__PURE__ */ from_html("<div tabindex=\"-1\"><div role=\"dialog\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"sheet-content svelte-1dln6bq\"><!></div> <!></div></div>"), $$css$33 = {
 	hash: "svelte-1dln6bq",
-	code: ".sheet-overlay.svelte-1dln6bq {position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--sheet-overlay-z-index, 15);-webkit-tap-highlight-color:transparent;}.overlay-visible.svelte-1dln6bq {background-color:var(--sheet-overlay-background, #00000066);}.overlay-invisible.svelte-1dln6bq {background-color:transparent;}.overlay-interactive.svelte-1dln6bq {pointer-events:auto;}.overlay-noninteractive.svelte-1dln6bq {pointer-events:none;}.sheet-panel.svelte-1dln6bq {position:fixed;display:flex;flex-direction:column;background-color:var(--sheet-background, #ffffff);box-shadow:var(--sheet-box-shadow, -2px 0 8px rgba(0, 0, 0, 0.15));z-index:var(--sheet-z-index, 16);pointer-events:auto;outline:none;}\n\n  /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded\n     edge-to-edge values below, so an unconfigured Sheet renders unchanged.\n     Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:\n     auto to size to content) turns the panel from an edge-to-edge slide-in into\n     an anchored floating panel, without needing a different component. */.sheet-panel.left.svelte-1dln6bq,\n  .sheet-panel.right.svelte-1dln6bq {top:var(--sheet-top, 0);bottom:var(--sheet-bottom, 0);width:var(--sheet-width, 400px);max-width:var(--sheet-max-width, 100vw);}.sheet-panel.left.svelte-1dln6bq {left:var(--sheet-left, 0);border-right:var(--sheet-border, none);}.sheet-panel.right.svelte-1dln6bq {right:var(--sheet-right, 0);border-left:var(--sheet-border, none);}.sheet-panel.top.svelte-1dln6bq,\n  .sheet-panel.bottom.svelte-1dln6bq {left:var(--sheet-left, 0);right:var(--sheet-right, 0);height:var(--sheet-height, 300px);max-height:var(--sheet-max-height, 100vh);}.sheet-panel.top.svelte-1dln6bq {top:var(--sheet-top, 0);border-bottom:var(--sheet-border, none);}.sheet-panel.bottom.svelte-1dln6bq {bottom:var(--sheet-bottom, 0);border-top:var(--sheet-border, none);}\n\n  /* `side=\"center\"` is a fixed-size floating dialog, not an edge-anchored\n     panel: no top/bottom/left/right offset, sized by its own tokens rather\n     than --sheet-width/--sheet-height (so an existing left/right/top/bottom\n     theme is untouched by adding this variant), and centered with a\n     transform instead of stretching to an edge. */.sheet-panel.center.svelte-1dln6bq {top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sheet-center-width, 480px);max-width:var(--sheet-center-max-width, calc(100vw - 32px));max-height:var(--sheet-center-max-height, 90vh);}.sheet-header.svelte-1dln6bq {display:flex;align-items:center;padding:var(--sheet-header-padding, 16px 20px);background-color:var(--sheet-header-background, inherit);border-bottom:var(--sheet-header-border-bottom, 1px solid #e0e0e0);flex-shrink:0;}.sheet-title.svelte-1dln6bq {flex:1;font-size:var(--sheet-title-font-size, 18px);font-weight:var(--sheet-title-font-weight, 600);font-family:var(--sheet-title-font-family, inherit);color:var(--sheet-title-color, #1a1a1a);line-height:var(--sheet-title-line-height, 1.4);}.sheet-close-button.svelte-1dln6bq {--button-width: var(--sheet-close-button-size, 32px);--button-height: var(--sheet-close-button-size, 32px);--button-border: none;--button-border-radius: var(--sheet-close-button-border-radius, var(--radius, 4px));--button-color: var(--sheet-close-button-background, transparent);--button-text-color: var(--sheet-close-button-color, #666666);--button-font-size: var(--sheet-close-button-font-size, 16px);--button-padding: 0;--button-hover-color: var(--sheet-close-button-hover-background, #f0f0f0);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.sheet-content.svelte-1dln6bq {flex:1;overflow-y:var(--sheet-content-overflow-y, auto);padding:var(--sheet-content-padding, 20px);scrollbar-width:var(--sheet-scrollbar-width, none);}.sheet-content.svelte-1dln6bq::-webkit-scrollbar {display:none;}.sheet-footer.svelte-1dln6bq {padding:var(--sheet-footer-padding, 16px 20px);background-color:var(--sheet-footer-background, inherit);border-top:var(--sheet-footer-border-top, 1px solid #e0e0e0);flex-shrink:0;}"
+	code: ".sheet-overlay.svelte-1dln6bq {position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--sheet-overlay-z-index, 15);-webkit-tap-highlight-color:transparent;}.overlay-visible.svelte-1dln6bq {background-color:var(--sheet-overlay-background, #00000066);}.overlay-invisible.svelte-1dln6bq {background-color:transparent;}.overlay-interactive.svelte-1dln6bq {pointer-events:auto;}.overlay-noninteractive.svelte-1dln6bq {pointer-events:none;}.sheet-panel.svelte-1dln6bq {position:fixed;display:flex;flex-direction:column;background-color:var(--sheet-background, #ffffff);box-shadow:var(--sheet-box-shadow, -2px 0 8px rgba(0, 0, 0, 0.15));z-index:var(--sheet-z-index, 16);pointer-events:auto;outline:none;}\n\n  /* The panel itself is the initial focus target on open (scrollLockAction\n     focuses it directly, and it's the Tab-trap's own boundary), so removing\n     its outline unconditionally left a keyboard user with no visible sign\n     focus had moved into the sheet at all -- particularly visible on the\n     \"Raw\" variant, which has no focusable child for focus to land on\n     instead. :focus-visible restores a ring precisely when the browser\n     judges it's from keyboard/programmatic focus rather than a mouse click,\n     so clicking the trigger still shows nothing new. outline-offset is\n     negative (inset) rather than the usual positive offset other components\n     in this library use, because left/right/top/bottom panels sit flush\n     against a viewport edge -- a positive offset would clip there. */.sheet-panel.svelte-1dln6bq:focus-visible {outline:var(--sheet-panel-focus-outline, 2px solid #2563eb);outline-offset:var(--sheet-panel-focus-outline-offset, -2px);}\n\n  /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded\n     edge-to-edge values below, so an unconfigured Sheet renders unchanged.\n     Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:\n     auto to size to content) turns the panel from an edge-to-edge slide-in into\n     an anchored floating panel, without needing a different component. */.sheet-panel.left.svelte-1dln6bq,\n  .sheet-panel.right.svelte-1dln6bq {top:var(--sheet-top, 0);bottom:var(--sheet-bottom, 0);width:var(--sheet-width, 400px);max-width:var(--sheet-max-width, 100vw);}.sheet-panel.left.svelte-1dln6bq {left:var(--sheet-left, 0);border-right:var(--sheet-border, none);}.sheet-panel.right.svelte-1dln6bq {right:var(--sheet-right, 0);border-left:var(--sheet-border, none);}.sheet-panel.top.svelte-1dln6bq,\n  .sheet-panel.bottom.svelte-1dln6bq {left:var(--sheet-left, 0);right:var(--sheet-right, 0);height:var(--sheet-height, 300px);max-height:var(--sheet-max-height, 100vh);}.sheet-panel.top.svelte-1dln6bq {top:var(--sheet-top, 0);border-bottom:var(--sheet-border, none);}.sheet-panel.bottom.svelte-1dln6bq {bottom:var(--sheet-bottom, 0);border-top:var(--sheet-border, none);}\n\n  /* `side=\"center\"` is a fixed-size floating dialog, not an edge-anchored\n     panel: no top/bottom/left/right offset, sized by its own tokens rather\n     than --sheet-width/--sheet-height (so an existing left/right/top/bottom\n     theme is untouched by adding this variant), and centered with a\n     transform instead of stretching to an edge. */.sheet-panel.center.svelte-1dln6bq {top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sheet-center-width, 480px);max-width:var(--sheet-center-max-width, calc(100vw - 32px));max-height:var(--sheet-center-max-height, 90vh);}.sheet-header.svelte-1dln6bq {display:flex;align-items:center;padding:var(--sheet-header-padding, 16px 20px);background-color:var(--sheet-header-background, inherit);border-bottom:var(--sheet-header-border-bottom, 1px solid #e0e0e0);flex-shrink:0;}.sheet-title.svelte-1dln6bq {flex:1;font-size:var(--sheet-title-font-size, 18px);font-weight:var(--sheet-title-font-weight, 600);font-family:var(--sheet-title-font-family, inherit);color:var(--sheet-title-color, #1a1a1a);line-height:var(--sheet-title-line-height, 1.4);}.sheet-close-button.svelte-1dln6bq {--button-width: var(--sheet-close-button-size, 32px);--button-height: var(--sheet-close-button-size, 32px);--button-border: none;--button-border-radius: var(--sheet-close-button-border-radius, var(--radius, 4px));--button-color: var(--sheet-close-button-background, transparent);--button-text-color: var(--sheet-close-button-color, #666666);--button-font-size: var(--sheet-close-button-font-size, 16px);--button-padding: 0;--button-hover-color: var(--sheet-close-button-hover-background, #f0f0f0);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.sheet-content.svelte-1dln6bq {flex:1;overflow-y:var(--sheet-content-overflow-y, auto);padding:var(--sheet-content-padding, 20px);scrollbar-width:var(--sheet-scrollbar-width, none);}.sheet-content.svelte-1dln6bq::-webkit-scrollbar {display:none;}.sheet-footer.svelte-1dln6bq {padding:var(--sheet-footer-padding, 16px 20px);background-color:var(--sheet-footer-background, inherit);border-top:var(--sheet-footer-border-top, 1px solid #e0e0e0);flex-shrink:0;}"
 };
 function Sheet(e, t) {
 	push(t, !0), append_styles$1(e, $$css$33);
-	let n = prop(t, "open", 15, !1), i = prop(t, "side", 7, "right"), a = prop(t, "title", 7), o = prop(t, "showOverlay", 7, !0), s = prop(t, "dismissOnOutsideClick", 23, o), c = prop(t, "showCloseButton", 7, !0), l = prop(t, "headingLevel", 7), u = prop(t, "testId", 7), f = prop(t, "content", 7), p = prop(t, "footer", 7), h = prop(t, "onclose", 7), S = prop(t, "onafteropen", 7), C = prop(t, "onafterclose", 7), k = prop(t, "classes", 7), R = /* @__PURE__ */ state(null), G = /* @__PURE__ */ state(null), te = /* @__PURE__ */ user_derived(() => {
+	let n = prop(t, "open", 15, !1), i = prop(t, "side", 7, "right"), a = prop(t, "title", 7), o = prop(t, "showOverlay", 7, !0), s = prop(t, "dismissOnOutsideClick", 23, o), c = prop(t, "overlayAriaLabel", 7), l = prop(t, "showCloseButton", 7, !0), u = prop(t, "headingLevel", 7), f = prop(t, "testId", 7), p = prop(t, "content", 7), h = prop(t, "footer", 7), S = prop(t, "onclose", 7), C = prop(t, "onafteropen", 7), k = prop(t, "onafterclose", 7), R = prop(t, "classes", 7), G = /* @__PURE__ */ state(null), te = /* @__PURE__ */ state(null), ne = /* @__PURE__ */ user_derived(() => {
 		switch (i()) {
 			case "left": return {
 				x: -400,
@@ -17601,38 +17647,42 @@ function Sheet(e, t) {
 			};
 		}
 	});
-	function ne() {
-		n(!1), h()?.();
-	}
-	function re(e) {
-		e.target === get(R) && s() && ne();
+	function re() {
+		n(!1), S()?.();
 	}
 	function be(e) {
+		e.target === get(G) && s() && re();
+	}
+	function Me(e) {
 		if (e.key === "Escape") {
-			ne();
+			re();
 			return;
 		}
-		if (e.key === "Tab" && get(G) !== null) {
-			let t = get(G).querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"), n = t.item(0), i = t.item(t.length - 1);
+		if ((e.key === "Enter" || e.key === " ") && s() && e.target === get(G)) {
+			e.preventDefault(), re();
+			return;
+		}
+		if (e.key === "Tab" && get(te) !== null) {
+			let t = get(te).querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"), n = t.item(0), i = t.item(t.length - 1);
 			if (n === null || i === null) return;
 			document.activeElement === (e.shiftKey ? n : i) && (e.preventDefault(), (e.shiftKey ? i : n).focus());
 		}
 	}
-	function Me(e) {
+	function Re(e) {
 		return lockBodyScroll(), tick().then(() => {
-			get(G) !== null && get(G).focus();
+			get(te) !== null && get(te).focus();
 		}), { destroy() {
 			unlockBodyScroll();
 		} };
 	}
-	function Re() {
-		typeof S() == "function" && S()();
-	}
 	function Ue() {
 		typeof C() == "function" && C()();
 	}
-	let it = /* @__PURE__ */ user_derived(() => typeof l() == "number" && Number.isInteger(l()) && l() >= 1 && l() <= 6 ? `h${l()}` : null);
-	var at = {
+	function it() {
+		typeof k() == "function" && k()();
+	}
+	let at = /* @__PURE__ */ user_derived(() => typeof u() == "number" && Number.isInteger(u()) && u() >= 1 && u() <= 6 ? `h${u()}` : null);
+	var ot = {
 		get open() {
 			return n();
 		},
@@ -17663,66 +17713,72 @@ function Sheet(e, t) {
 		set dismissOnOutsideClick(e = o) {
 			s(e), flushSync();
 		},
-		get showCloseButton() {
+		get overlayAriaLabel() {
 			return c();
 		},
-		set showCloseButton(e = !0) {
+		set overlayAriaLabel(e) {
 			c(e), flushSync();
 		},
-		get headingLevel() {
+		get showCloseButton() {
 			return l();
 		},
-		set headingLevel(e) {
+		set showCloseButton(e = !0) {
 			l(e), flushSync();
 		},
-		get testId() {
+		get headingLevel() {
 			return u();
 		},
-		set testId(e) {
+		set headingLevel(e) {
 			u(e), flushSync();
 		},
-		get content() {
+		get testId() {
 			return f();
 		},
-		set content(e) {
+		set testId(e) {
 			f(e), flushSync();
 		},
-		get footer() {
+		get content() {
 			return p();
 		},
-		set footer(e) {
+		set content(e) {
 			p(e), flushSync();
 		},
-		get onclose() {
+		get footer() {
 			return h();
 		},
-		set onclose(e) {
+		set footer(e) {
 			h(e), flushSync();
 		},
-		get onafteropen() {
+		get onclose() {
 			return S();
 		},
-		set onafteropen(e) {
+		set onclose(e) {
 			S(e), flushSync();
 		},
-		get onafterclose() {
+		get onafteropen() {
 			return C();
 		},
-		set onafterclose(e) {
+		set onafteropen(e) {
 			C(e), flushSync();
 		},
-		get classes() {
+		get onafterclose() {
 			return k();
 		},
-		set classes(e) {
+		set onafterclose(e) {
 			k(e), flushSync();
+		},
+		get classes() {
+			return R();
+		},
+		set classes(e) {
+			R(e), flushSync();
 		}
-	}, ot = comment(), ct = first_child(ot), lt = (e) => {
-		var t = root_4$16(), n = child(t), l = child(n), h = (e) => {
+	}, ct = comment(), lt = first_child(ct), ut = (e) => {
+		var t = root_4$16(), n = child(t), u = child(n), S = (e) => {
 			var t = root_2$22(), n = child(t), i = (e) => {
 				var t = comment(), n = first_child(t), i = (e) => {
 					var t = comment();
-					element(first_child(t), () => get(it), !1, (e, t) => {
+					element(first_child(t), () => get(at), !1, (e, t) => {
 						set_class(e, 0, "sheet-title svelte-1dln6bq");
 						var n = text();
 						template_effect(() => set_text(n, a())), append(t, n);
@@ -17732,7 +17788,7 @@ function Sheet(e, t) {
 					reset(t), template_effect(() => set_text(n, a())), append(e, t);
 				};
 				if_block(n, (e) => {
-					get(it) === null ? e(o, -1) : e(i);
+					get(at) === null ? e(o, -1) : e(i);
 				}), append(e, t);
 			};
 			if_block(n, (e) => {
@@ -17741,9 +17797,9 @@ function Sheet(e, t) {
 			var o = sibling(n, 2), s = (e) => {
 				var t = root_1$28();
 				Button(child(t), spread_props({
-					onclick: ne,
+					onclick: re,
 					ariaLabel: "Close"
-				}, () => typeof u() == "string" ? { testId: `${u()}-close` } : {}, {
+				}, () => typeof f() == "string" ? { testId: `${f()}-close` } : {}, {
 					children: (e, t) => {
 						next(), append(e, text("✕"));
 					},
@@ -17751,27 +17807,27 @@ function Sheet(e, t) {
 				})), reset(t), append(e, t);
 			};
 			if_block(o, (e) => {
-				c() && e(s);
+				l() && e(s);
 			}), reset(t), append(e, t);
 		};
-		if_block(l, (e) => {
-			(typeof a() == "string" || c()) && e(h);
+		if_block(u, (e) => {
+			(typeof a() == "string" || l()) && e(S);
 		});
-		var S = sibling(l, 2);
-		snippet(child(S), f), reset(S);
-		var C = sibling(S, 2), at = (e) => {
+		var C = sibling(u, 2);
+		snippet(child(C), p), reset(C);
+		var k = sibling(C, 2), ot = (e) => {
 			var t = root_3$20();
-			snippet(child(t), p), reset(t), append(e, t);
+			snippet(child(t), h), reset(t), append(e, t);
 		};
-		if_block(C, (e) => {
-			typeof p() == "function" && e(at);
-		}), reset(n), bind_this(n, (e) => set(G, e), () => get(G)), reset(t), bind_this(t, (e) => set(R, e), () => get(R)), action(t, (e) => Me?.(e)), template_effect(() => {
-			set_class(t, 1, `sheet-overlay ${o() ? "overlay-visible" : "overlay-invisible"} ${o() || s() ? "overlay-interactive" : "overlay-noninteractive"} ${k() ?? "" ?? ""}`, "svelte-1dln6bq"), set_attribute(t, "data-pw", typeof u() == "string" ? u() : null), set_attribute(t, "testid", typeof u() == "string" ? u() : null), set_class(n, 1, `sheet-panel ${i() ?? ""}`, "svelte-1dln6bq"), set_attribute(n, "aria-label", a() ?? "Sheet"), set_attribute(n, "data-pw", typeof u() == "string" ? `${u()}-panel` : null), set_attribute(n, "testid", typeof u() == "string" ? `${u()}-panel` : null);
-		}), delegated("click", t, re), delegated("keydown", t, be), event("introend", n, Re), event("outroend", n, Ue), transition(7, n, () => fly, () => get(te)), transition(3, t, () => fade, () => ({ duration: 200 })), append(e, t);
+		if_block(k, (e) => {
+			typeof h() == "function" && e(ot);
+		}), reset(n), bind_this(n, (e) => set(te, e), () => get(te)), reset(t), bind_this(t, (e) => set(G, e), () => get(G)), action(t, (e) => Re?.(e)), template_effect((e) => {
+			set_class(t, 1, `sheet-overlay ${o() ? "overlay-visible" : "overlay-invisible"} ${o() || s() ? "overlay-interactive" : "overlay-noninteractive"} ${R() ?? "" ?? ""}`, "svelte-1dln6bq"), set_attribute(t, "role", s() ? "button" : null), set_attribute(t, "aria-label", e), set_attribute(t, "data-pw", typeof f() == "string" ? f() : null), set_attribute(t, "testid", typeof f() == "string" ? f() : null), set_class(n, 1, `sheet-panel ${i() ?? ""}`, "svelte-1dln6bq"), set_attribute(n, "aria-label", a() ?? "Sheet"), set_attribute(n, "data-pw", typeof f() == "string" ? `${f()}-panel` : null), set_attribute(n, "testid", typeof f() == "string" ? `${f()}-panel` : null);
+		}, [() => s() ? c()?.trim() || "Close sheet" : null]), delegated("click", t, be), delegated("keydown", t, Me), event("introend", n, Ue), event("outroend", n, it), transition(7, n, () => fly, () => get(ne)), transition(3, t, () => fade, () => ({ duration: 200 })), append(e, t);
 	};
-	return if_block(ct, (e) => {
-		n() && e(lt);
-	}), append(e, ot), pop(at);
+	return if_block(lt, (e) => {
+		n() && e(ut);
+	}), append(e, ct), pop(ot);
 }
 delegate(["click", "keydown"]), create_custom_element(Sheet, {
 	open: {},
@@ -17779,6 +17835,7 @@ delegate(["click", "keydown"]), create_custom_element(Sheet, {
 	title: {},
 	showOverlay: {},
 	dismissOnOutsideClick: {},
+	overlayAriaLabel: {},
 	showCloseButton: {},
 	headingLevel: {},
 	testId: {},
@@ -17845,6 +17902,11 @@ customElements.define("sui-sheet", create_custom_element(Sheet_wc, {
 		reflect: !0,
 		type: "Boolean"
 	},
+	overlayAriaLabel: {
+		attribute: "overlay-aria-label",
+		reflect: !0,
+		type: "String"
+	},
 	showCloseButton: {
 		attribute: "show-close-button",
 		reflect: !0,
@@ -32339,36 +32401,40 @@ function TypewriterText(e, t) {
 		index: t,
 		wordCount: get(R)
 	}) : s() ? re.test(e) && s().digit ? be(s().digit) : G.has(e) && s().whitespace ? be(s().whitespace) : ne.has(e) && s().punctuation ? be(s().punctuation) : s().default ? be(s().default) : i() : i(), Re = () => {
+		get(C) !== null && (clearTimeout(get(C)), set(C, null));
+		let e = get(S) < n().length;
+		set(h, n(), !0), set(S, n().length, !0), set(R, te(n()), !0), e && l()?.({
+			index: get(S),
+			total: n().length,
+			displayedText: get(h)
+		});
+	}, Ue = () => {
+		if (prefersReducedMotion()) {
+			Re();
+			return;
+		}
 		if (get(S) < n().length) {
 			let e = n()[get(S)], t = get(S);
 			G.has(e) && update(R), set(h, n().substring(0, get(S) + 1), !0), update(S), l()?.({
 				index: get(S),
 				total: n().length,
 				displayedText: get(h)
-			}), set(C, setTimeout(Re, Me(e, t)), !0);
+			}), set(C, setTimeout(Ue, Me(e, t)), !0);
 		}
 	};
 	user_effect(() => {
 		let e = n();
 		untrack(() => {
-			e.length >= get(k) && e.startsWith(get(h)) || (get(C) !== null && (clearTimeout(get(C)), set(C, null)), set(h, ""), set(S, 0), set(k, 0), set(R, 0)), e.length > 0 && e.length > get(k) && (get(S) >= get(k) && (get(C) !== null && clearTimeout(get(C)), Re()), set(k, e.length, !0));
+			e.length >= get(k) && e.startsWith(get(h)) || (get(C) !== null && (clearTimeout(get(C)), set(C, null)), set(h, ""), set(S, 0), set(k, 0), set(R, 0)), e.length > 0 && e.length > get(k) && (get(S) >= get(k) && (get(C) !== null && (clearTimeout(get(C)), set(C, null)), Ue()), set(k, e.length, !0));
 		});
 	}), user_effect(() => {
-		if (!a() && n().length > 0) {
-			get(C) !== null && clearTimeout(get(C));
-			let e = get(S) < n().length;
-			set(h, n(), !0), set(S, n().length, !0), set(R, te(n()), !0), e && l()?.({
-				index: get(S),
-				total: n().length,
-				displayedText: get(h)
-			});
-		}
+		!a() && n().length > 0 && Re();
 	}), onMount(() => {
-		n().length > 0 && (set(k, n().length, !0), Re());
+		n().length > 0 && (set(k, n().length, !0), Ue());
 	}), onDestroy(() => {
 		get(C) !== null && clearTimeout(get(C));
 	});
-	var Ue = {
+	var it = {
 		get text() {
 			return n();
 		},
@@ -32429,12 +32495,12 @@ function TypewriterText(e, t) {
 		set classes(e) {
 			p(e), flushSync();
 		}
-	}, it = root$12();
-	let at;
-	var ot = child(it), ct = (e) => {
+	}, at = root$12();
+	let ot;
+	var ct = child(at), lt = (e) => {
 		var t = comment();
 		html(first_child(t), () => o()(get(h))), append(e, t);
-	}, lt = (e) => {
+	}, ut = (e) => {
 		var t = comment();
 		each(first_child(t), 17, () => get(h).split(""), index, (e, t, n) => {
 			var i = comment();
@@ -32443,15 +32509,15 @@ function TypewriterText(e, t) {
 				index: n
 			})), append(e, i);
 		}), append(e, t);
-	}, ut = (e) => {
+	}, dt = (e) => {
 		var t = text();
 		template_effect(() => set_text(t, get(h))), append(e, t);
 	};
-	return if_block(ot, (e) => {
-		typeof o() == "function" ? e(ct) : u() ? e(lt, 1) : e(ut, -1);
-	}), reset(it), template_effect(() => {
-		at = set_class(it, 1, `typewriter-text ${p() ?? "" ?? ""}`, "svelte-12jnsxo", at, { plain: typeof o() != "function" }), set_attribute(it, "data-pw", typeof f() == "string" ? f() : null), set_attribute(it, "testid", typeof f() == "string" ? f() : null);
-	}), append(e, it), pop(Ue);
+	return if_block(ct, (e) => {
+		typeof o() == "function" ? e(lt) : u() ? e(ut, 1) : e(dt, -1);
+	}), reset(at), template_effect(() => {
+		ot = set_class(at, 1, `typewriter-text ${p() ?? "" ?? ""}`, "svelte-12jnsxo", ot, { plain: typeof o() != "function" }), set_attribute(at, "data-pw", typeof f() == "string" ? f() : null), set_attribute(at, "testid", typeof f() == "string" ? f() : null);
+	}), append(e, at), pop(it);
 }
 create_custom_element(TypewriterText, {
 	text: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.10.3",
+  "version": "4.10.5",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",