@juspay/svelte-ui-components 4.40.1 → 4.42.0

package/dist/Animations/ModalAnimation.svelte

@@ -133,6 +133,7 @@
 {#if enable}
   {#if useFlyAnimation && useOutTransition}
     <div
+      class="modal-animation"
       in:tokenizedFly|global={flyInParams}
       out:tokenizedFly|global={flyOutParams}
       data-pw={typeof testId === 'string' ? testId : null}
@@ -142,6 +143,7 @@
     </div>
   {:else if useFlyAnimation}
     <div
+      class="modal-animation"
       in:tokenizedFly|global={flyInParams}
       data-pw={typeof testId === 'string' ? testId : null}
       testID={typeof testId === 'string' ? testId : null}
@@ -150,6 +152,7 @@
     </div>
   {:else if useOutTransition}
     <div
+      class="modal-animation"
       in:tokenizedFly|global={fadeInParams}
       out:tokenizedFly|global={fadeOutParams}
       data-pw={typeof testId === 'string' ? testId : null}
@@ -159,6 +162,7 @@
     </div>
   {:else}
     <div
+      class="modal-animation"
       in:tokenizedFly|global={fadeInParams}
       data-pw={typeof testId === 'string' ? testId : null}
       testID={typeof testId === 'string' ? testId : null}

package/dist/Button/Button.svelte

@@ -8,6 +8,7 @@
     size = 'md',
     iconOnly = false,
     fullWidth = false,
+    shrinkable = false,
     href,
     target,
     rel,
@@ -73,6 +74,7 @@
   class="button-container variant-{variant} size-{size} {classes ?? ''}"
   class:icon-only={iconOnly}
   class:full-width={fullWidth}
+  class:button-shrinkable={shrinkable}
   style={style ?? null}
 >
   {#if showProgressBar}
@@ -238,6 +240,47 @@
     --button-width: 100%;
   }
 
+  /* Opt-in only. With the default nowrap label, fit-content never drops below the
+     label's full width, so a percentage cap on the inner button resolves against
+     an already label-wide container and a Button in a parent narrower than its
+     label (a flex row, a grid cell or a plain block) cannot shrink. Capping the
+     container itself gives that percentage something real to resolve against.
+
+     The box is `width: 100%` bounded by `max-width: max-content` rather than
+     `fit-content`: as wide as the label and never wider than the parent, with no
+     intrinsic keyword as its width. Firefox and WebKit size a `1fr` or `auto`
+     grid track to at least the content width of an item whose width is such a
+     keyword, so the track grew to the label and the Button never shrank in a grid
+     cell (Chromium shrinks the track). A percentage is not counted that way.
+     `width: auto` would shrink the track too, but it stretches the box across a
+     block, stretch or `justify-items: normal` parent, and `margin: auto` on the
+     root would stop centring it. As a flex item the box is clamped to the
+     label's width, so `flex-grow` on the root does not widen it. A custom
+     `--button-width` replaces the max-content bound, and `fullWidth` sets it
+     to 100%.
+
+     Deliberately class-gated rather than a pair of tokens on every container: an
+     unconditional declaration here would outrank a consumer's own max-width class
+     on the root (the scoped selector is more specific). The class carries the
+     component prefix because `classes` lands on this same element, and a
+     consumer's own `shrinkable` class must not opt a Button in. */
+  .button-container.button-shrinkable {
+    min-width: 0;
+    width: 100%;
+    max-width: var(--button-width, max-content);
+  }
+
+  .button-container.button-shrinkable > .button-el {
+    max-width: var(--button-max-width, 100%);
+  }
+
+  /* An icon with a percentage max-width (the common `img { max-width: 100% }`
+     reset) has a min-content width of zero, so the shrinking button would
+     squeeze it along with the label. */
+  .button-container.button-shrinkable > .button-el > .button-icon {
+    flex-shrink: 0;
+  }
+
   .button-el {
     max-height: var(--button-max-height);
     max-width: var(--button-max-width);

package/dist/Button/properties.d.ts

@@ -20,6 +20,20 @@ export type OptionalButtonProperties = {
     iconOnly?: boolean;
     /** Stretch the button to the full width of its container. */
     fullWidth?: boolean;
+    /**
+     * Let the button be narrower than its label. By default a button is as wide as its label
+     * (which does not wrap), so inside a parent narrower than the label (a flex row, a grid cell or
+     * a plain block) it can never give width back and a long label overflows its parent. With
+     * `shrinkable` the button still hugs a label that fits, but a label that does not is truncated
+     * with an ellipsis inside whatever width the parent offers. The button is capped at
+     * `var(--button-max-width, 100%)` of that width.
+     *
+     * Only the `text` label is truncated: custom `children` content has to manage its own overflow.
+     * Wrapping with `--button-white-space: normal` works without this prop; with it, a single word
+     * wider than the parent is clipped instead of overflowing. On an `iconOnly` button it changes
+     * nothing while the square fits; in a narrower parent the padding gives way before the glyph does.
+     */
+    shrinkable?: boolean;
     /**
      * Render the button as an `<a>` styled identically. Use for button-styled links/navigation.
      * When set, `type` is ignored; a disabled link is rendered inert via `aria-disabled`.

package/dist/Modal/Modal.svelte

@@ -465,8 +465,44 @@
        anything taller than the screen) grew past the viewport and pushed its
        footer and bottom rounding off-screen. dvh tracks the real visible
        viewport on mobile; the vh line is the fallback for engines without dvh. */
-    max-height: var(--modal-max-height, calc(100vh - 32px));
-    max-height: var(--modal-max-height, calc(100dvh - 32px));
+    max-height: var(--modal-max-height, calc(100vh - var(--modal-viewport-gutter, 32px)));
+    max-height: var(--modal-max-height, calc(100dvh - var(--modal-viewport-gutter, 32px)));
+  }
+
+  /* The width rules below are wrapped in :where() so they carry no specificity.
+     An app that already styles .modal-content or .footer-action-buttons wrote
+     that rule before these existed, and Svelte's scope class would otherwise
+     make these tie it or beat it whatever the load order. Svelte compiles
+     :where(.x) to :where(.x.svelte-hash), which stays at zero.
+
+     The ceiling is chosen per alignment on .modal (see .center/.top/.bottom) and
+     only read here. It caps whatever width a size token or a wide child asks for
+     instead of wrapping that token in min(): a keyword such as fit-content or
+     auto makes min() invalid and silently drops the width.
+     The "+ 0%" is load-bearing. A max-width that contains a percentage is
+     ignored while the shrink-to-fit transition wrapper works out its own width,
+     so the cap does not narrow the box a percentage size token resolves
+     against: calc(100% - 32px) stays 343px on a 375px phone instead of becoming
+     311px. Laid out, it is the same length. "none" makes the calc invalid, which
+     leaves max-width unset, i.e. no cap, as intended. */
+  :where(.modal-content) {
+    max-width: calc(var(--_modal-max-width, 100vw) + 0%);
+  }
+
+  /* The wrapper is sized from the uncapped width, so it can be wider than the
+     capped panel. It stays inside the overlay (or the ceiling, when an embedded
+     overlay is narrower) and lets clicks in the strip beside the panel reach the
+     overlay. The panel is inset by half of what the wrapper has beyond the
+     ceiling, which centres a panel that fills the ceiling; a narrower one is
+     offset by the same amount. Below the ceiling there is no inset and the panel
+     keeps its position at the start of the wrapper, as it always had. */
+  :where(.modal > :global(.modal-animation)) {
+    pointer-events: none;
+    max-width: max(100%, var(--_modal-max-width, 100vw));
+  }
+
+  :where(:global(.modal-animation) > .modal-content) {
+    margin-inline-start: max(0px, calc((100% - var(--_modal-max-width, 100vw)) / 2));
   }
 
   /* The comment this replaced claimed tabindex="-1" meant this never needed a
@@ -500,19 +536,28 @@
     display: none;
   }
 
+  /* A dialog keeps a gutter either side; a top or bottom sheet is edge to edge,
+     so only the centred ceiling subtracts one. Each alignment owns its token so
+     an app-wide default for dialogs never reshapes a bottom sheet. */
   .center {
     justify-content: var(--modal-center-justify-content, center);
     align-items: var(--modal-center-align-items, center);
+    --_modal-max-width: var(
+      --modal-center-max-width,
+      calc(100vw - var(--modal-viewport-gutter, 32px))
+    );
   }
 
   .bottom {
     justify-content: var(--modal-bottom-justify-content, flex-end);
     align-items: var(--modal-bottom-align-items);
+    --_modal-max-width: var(--modal-bottom-max-width, 100vw);
   }
 
   .top {
     justify-content: var(--modal-top-justify-content, flex-start);
     align-items: var(--modal-top-align-items);
+    --_modal-max-width: var(--modal-top-max-width, 100vw);
   }
 
   .small {
@@ -559,6 +604,13 @@
     width: var(--modal-footer-action-buttons-width, fit-content);
   }
 
+  /* Zero specificity for the same reason as the width rules above: an app that
+     already wraps and aligns this row keeps doing so. */
+  :where(.footer-action-buttons) {
+    flex-wrap: wrap;
+    justify-content: var(--modal-footer-action-buttons-justify-content, flex-start);
+  }
+
   .footer-secondary-button {
     --button-max-height: var(--modal-footer-secondary-button-max-height);
     --button-max-width: var(--modal-footer-secondary-button-max-width);

package/dist-wc/index.js

@@ -4680,19 +4680,19 @@ create_custom_element(Loader, {
 //#region src/lib/Button/Button.svelte
 var root$107 = /* @__PURE__ */ from_html("<div class=\"button-progress-bar svelte-1j9w5l4\"></div>"), root_1$95 = /* @__PURE__ */ from_html("<div class=\"button-loader svelte-1j9w5l4\"><!></div>"), root_2$74 = /* @__PURE__ */ from_html("<div class=\"button-icon svelte-1j9w5l4\"><!></div>"), root_3$66 = /* @__PURE__ */ from_html("<div class=\"button-text svelte-1j9w5l4\"></div>"), root_4$54 = /* @__PURE__ */ from_html("<div class=\"button-text svelte-1j9w5l4\"> </div>"), root_5$42 = /* @__PURE__ */ from_html("<!> <!> <!> <!>", 1), root_6$36 = /* @__PURE__ */ from_html("<div class=\"button-status svelte-1j9w5l4\" role=\"status\" aria-live=\"polite\"> </div>"), root_7$32 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), $$css$196 = {
 	hash: "svelte-1j9w5l4",
-	code: ".button-container.svelte-1j9w5l4 {position:relative;width:var(--button-width, fit-content);}\n\n  /* The statusText region: out of flow at 1x1px inside the positioned\n     container, so it never moves the button or its row (the visually-hidden\n     recipe ChatComposer and Label use). Not named .sr-only: `classes` lands on\n     this container, so a consumer's own `sr-only` class would match a rule of\n     that name here and hide the whole button. */.button-status.svelte-1j9w5l4 {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}\n\n  /* ---- Variant defaults (set the internal --_btn-* layer; explicit --button-* always wins) ---- */.variant-primary.svelte-1j9w5l4 {--_btn-color: #3a4550;--_btn-text-color: #ffffff;--_btn-border: none;}.variant-secondary.svelte-1j9w5l4 {--_btn-color: transparent;--_btn-text-color: var(--button-secondary-text-color, #3a4550);--_btn-border: 1px solid var(--button-secondary-border-color, #cbd5e1);--_btn-hover-color: var(--button-secondary-hover-background, #f1f5f9);--_btn-hover-text-color: var(--button-secondary-text-color, #3a4550);--_btn-hover-border: 1px solid var(--button-secondary-border-color, #cbd5e1);}.variant-ghost.svelte-1j9w5l4 {--_btn-color: transparent;--_btn-text-color: var(--button-ghost-text-color, #3a4550);--_btn-border: none;--_btn-hover-color: var(--button-ghost-hover-background, #f1f5f9);--_btn-hover-text-color: var(--button-ghost-text-color, #3a4550);--_btn-hover-border: none;}.variant-destructive.svelte-1j9w5l4 {--_btn-color: #e7000b;--_btn-text-color: #ffffff;--_btn-border: none;--_btn-hover-color: #c10007;--_btn-hover-text-color: #ffffff;--_btn-hover-border: none;}\n\n  /* Transparent chassis for gradient marketing CTAs — deliberately no background\n     of its own. Pair with a --button-background gradient (and usually a matching\n     --button-hover-color, since --_btn-hover-color sits before --button-background\n     in the hover fallback chain and would otherwise flatten the gradient to\n     transparent on hover). Geometry (padding/font-size) is intentionally left to\n     the size preset, not this variant. */.variant-brand.svelte-1j9w5l4 {--_btn-color: transparent;--_btn-text-color: #ffffff;--_btn-border: none;--_btn-hover-color: transparent;--_btn-hover-text-color: #ffffff;--_btn-hover-border: none;}\n\n  /* ---- Size defaults (md reproduces the legacy 16px padding / 14px font) ---- */.size-sm.svelte-1j9w5l4 {--_btn-padding: 8px 12px;--_btn-font-size: 13px;}.size-md.svelte-1j9w5l4 {--_btn-padding: 16px;--_btn-font-size: 14px;}.size-lg.svelte-1j9w5l4 {--_btn-padding: 20px 28px;--_btn-font-size: 16px;}.icon-only.svelte-1j9w5l4 {--_btn-padding: 8px;}.icon-only.size-sm.svelte-1j9w5l4 {--_btn-padding: 6px;}.icon-only.size-lg.svelte-1j9w5l4 {--_btn-padding: 12px;}.full-width.svelte-1j9w5l4 {--button-width: 100%;}.button-el.svelte-1j9w5l4 {max-height:var(--button-max-height);max-width:var(--button-max-width);min-width:var(--button-min-width);font-family:var(--button-font-family);font-weight:var(--button-font-weight, 500);font-size:var(--button-font-size, var(--_btn-font-size, 14px));background-color:var(--button-color, var(--_btn-color, #3a4550));\n    /* Image layer, deliberately not the `background` shorthand — the shorthand\n       would reset a consumer's own background-image/position/size layers\n       whenever the hook is unset. Gradients go here; solids stay on --button-color. */background-image:var(--button-background, none);color:var(\n      --button-text-color,\n      var(--_btn-text-color, var(--button-neutral-text-color, white))\n    );height:var(--button-height, fit-content);padding:var(--button-padding, var(--_btn-padding, 16px));margin:var(--button-margin);border-radius:var(--button-border-radius, var(--radius, 6px));width:var(--button-width, fit-content);cursor:var(--cursor, pointer);opacity:var(--opacity, 1);border:var(--button-border, var(--_btn-border, none));box-sizing:border-box;text-decoration:var(--button-text-decoration, none);line-height:var(--button-line-height, normal);display:flex;justify-content:var(--button-justify-content, center);align-items:center;flex-direction:var(--button-content-flex-direction, row);gap:var(--button-content-gap, 16px);visibility:var(--button-visibility, visible);box-shadow:var(--button-box-shadow, none);transition:var(--button-transition, none);\n\n    /* A button label should never soft-wrap onto a second line as the label text\n       changes (e.g. \"Select\" -> \"Select (1)\") — that jitters the layout around it.\n       Consumers that genuinely want multi-line buttons opt back in via the var. */white-space:var(--button-white-space, nowrap);}.button-el.disabled.svelte-1j9w5l4,\n  .button-el.svelte-1j9w5l4:disabled {cursor:var(--disabled-cursor, not-allowed);opacity:var(--disabled-opacity, 0.4);color:var(--disabled-text-color, var(--button-text-color, var(--_btn-text-color, white)));font-size:var(--disabled-font-size, inherit);font-weight:var(--disabled-font-weight, inherit);text-decoration:var(--button-disabled-text-decoration, var(--button-text-decoration, none));\n    /* Preserve the variant border when disabled so secondary (bordered) stays distinct from ghost. */border:var(--disabled-border, var(--button-border, var(--_btn-border, none)));background:var(\n      --disabled-background-color,\n      var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))\n    );box-shadow:var(\n      --button-disabled-box-shadow,\n      var(--disabled-box-shadow, var(--button-box-shadow, none))\n    );}.button-loader.svelte-1j9w5l4 {order:var(--button-loader-order, 1);}.button-icon.svelte-1j9w5l4 {order:var(--button-icon-order, 2);display:var(--button-icon-display);}.button-text.svelte-1j9w5l4 {order:var(--button-text-order, 3);display:var(--button-text-display);\n\n    /* With nowrap as the default, a label longer than the button's box would\n       otherwise bleed past it — truncate with an ellipsis instead. Full labels\n       stay available via the button's accessible name / title at the call site. */overflow:hidden;text-overflow:ellipsis;}.button-el.svelte-1j9w5l4:hover:not(.disabled) {background:var(\n      --button-hover-color,\n      var(\n        --_btn-hover-color,\n        var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))\n      )\n    );color:var(\n      --button-hover-text-color,\n      var(--_btn-hover-text-color, var(--button-text-color, var(--_btn-text-color, white)))\n    );border:var(\n      --button-hover-border,\n      var(--_btn-hover-border, var(--button-border, var(--_btn-border, none)))\n    );transform:var(--button-hover-transform);box-shadow:var(--button-hover-box-shadow, var(--button-box-shadow, none));}.button-el.svelte-1j9w5l4:active:not(.disabled) {transform:var(--button-active-transform);background:var(\n      --button-active-background,\n      var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))\n    );box-shadow:var(--button-active-box-shadow, var(--button-box-shadow, none));}.button-el.svelte-1j9w5l4:focus-visible {box-shadow:var(--button-focus-visible-box-shadow, var(--button-box-shadow, none));}.button-progress-bar.svelte-1j9w5l4 {position:absolute;height:100%;width:100%;background:var(--button-progress-loader-background-color, #00000030);\n    animation: svelte-1j9w5l4-fill-loader var(--button-progress-loader-duration, 8s) forwards;z-index:2;}\n\n  @keyframes svelte-1j9w5l4-fill-loader {\n    0% {\n      width: 0;\n    }\n\n    100% {\n      width: 100%;\n    }\n  }\n\n  /* This bar is not indefinite like a spinner -- its width IS the meaning:\n     \"how much of `--button-progress-loader-duration` has elapsed\", and\n     `showProgressBar` keeps the button disabled for that whole span. A bare\n     `animation: none` would freeze it at the base rule above (`width: 100%`),\n     showing a FULL, \"finished\" bar for up to 8s while the button is actually\n     still counting down and still disabled -- a frame that means something\n     else is worse than the motion it removed. Freezing at 0% instead would\n     lie the other way once the real duration elapses and the bar should read\n     complete. Neither static width is honest for the whole span, so motion is\n     thinned rather than removed: `steps()` swaps the continuous ease for\n     discrete jumps that hold the PRIOR interval's value until each jump (the\n     `jump-end` default), so the displayed width can only ever under-report\n     elapsed time -- never claim to be further along than it really is -- while\n     still losing the smooth per-frame slide prefers-reduced-motion targets.\n     The step count is a LITERAL, deliberately not a token. `steps()` is invalid\n     for a count below 1, and an invalid value does not fall back to a safer\n     stepped default -- the whole declaration is dropped and the property takes\n     the base rule's `ease`, restoring exactly the continuous slide this block\n     exists to remove. A consumer passing `0` to \"just freeze it\" would silently\n     switch the guard off for every user who asked for reduced motion. A guard\n     that fails OPEN, quietly, is worse than no guard, and one tunable is not\n     worth that. \n     This block lives in the component's own <style> because that is the only\n     stylesheet that reaches inside the shadow root a custom-element consumer\n     gets. */\n  @media (prefers-reduced-motion: reduce) {.button-progress-bar.svelte-1j9w5l4 {animation-timing-function:steps(5, jump-end);}\n\n    /* The loader is not the only motion here. `--button-transition` defaults to\n       `none`, so this rule does nothing until a consumer opts in -- and the\n       documented way to opt in is exactly a hover/press animation, which is\n       what a user asking for reduced motion is asking not to have. The sweep\n       that covered every transition in ThemeSwitcher stopped at the one\n       animation the brief named in this file. */.button-el.svelte-1j9w5l4,\n    .button-container.svelte-1j9w5l4 {transition:none;}\n  }"
+	code: ".button-container.svelte-1j9w5l4 {position:relative;width:var(--button-width, fit-content);}\n\n  /* The statusText region: out of flow at 1x1px inside the positioned\n     container, so it never moves the button or its row (the visually-hidden\n     recipe ChatComposer and Label use). Not named .sr-only: `classes` lands on\n     this container, so a consumer's own `sr-only` class would match a rule of\n     that name here and hide the whole button. */.button-status.svelte-1j9w5l4 {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}\n\n  /* ---- Variant defaults (set the internal --_btn-* layer; explicit --button-* always wins) ---- */.variant-primary.svelte-1j9w5l4 {--_btn-color: #3a4550;--_btn-text-color: #ffffff;--_btn-border: none;}.variant-secondary.svelte-1j9w5l4 {--_btn-color: transparent;--_btn-text-color: var(--button-secondary-text-color, #3a4550);--_btn-border: 1px solid var(--button-secondary-border-color, #cbd5e1);--_btn-hover-color: var(--button-secondary-hover-background, #f1f5f9);--_btn-hover-text-color: var(--button-secondary-text-color, #3a4550);--_btn-hover-border: 1px solid var(--button-secondary-border-color, #cbd5e1);}.variant-ghost.svelte-1j9w5l4 {--_btn-color: transparent;--_btn-text-color: var(--button-ghost-text-color, #3a4550);--_btn-border: none;--_btn-hover-color: var(--button-ghost-hover-background, #f1f5f9);--_btn-hover-text-color: var(--button-ghost-text-color, #3a4550);--_btn-hover-border: none;}.variant-destructive.svelte-1j9w5l4 {--_btn-color: #e7000b;--_btn-text-color: #ffffff;--_btn-border: none;--_btn-hover-color: #c10007;--_btn-hover-text-color: #ffffff;--_btn-hover-border: none;}\n\n  /* Transparent chassis for gradient marketing CTAs — deliberately no background\n     of its own. Pair with a --button-background gradient (and usually a matching\n     --button-hover-color, since --_btn-hover-color sits before --button-background\n     in the hover fallback chain and would otherwise flatten the gradient to\n     transparent on hover). Geometry (padding/font-size) is intentionally left to\n     the size preset, not this variant. */.variant-brand.svelte-1j9w5l4 {--_btn-color: transparent;--_btn-text-color: #ffffff;--_btn-border: none;--_btn-hover-color: transparent;--_btn-hover-text-color: #ffffff;--_btn-hover-border: none;}\n\n  /* ---- Size defaults (md reproduces the legacy 16px padding / 14px font) ---- */.size-sm.svelte-1j9w5l4 {--_btn-padding: 8px 12px;--_btn-font-size: 13px;}.size-md.svelte-1j9w5l4 {--_btn-padding: 16px;--_btn-font-size: 14px;}.size-lg.svelte-1j9w5l4 {--_btn-padding: 20px 28px;--_btn-font-size: 16px;}.icon-only.svelte-1j9w5l4 {--_btn-padding: 8px;}.icon-only.size-sm.svelte-1j9w5l4 {--_btn-padding: 6px;}.icon-only.size-lg.svelte-1j9w5l4 {--_btn-padding: 12px;}.full-width.svelte-1j9w5l4 {--button-width: 100%;}\n\n  /* Opt-in only. With the default nowrap label, fit-content never drops below the\n     label's full width, so a percentage cap on the inner button resolves against\n     an already label-wide container and a Button in a parent narrower than its\n     label (a flex row, a grid cell or a plain block) cannot shrink. Capping the\n     container itself gives that percentage something real to resolve against.\n\n     The box is `width: 100%` bounded by `max-width: max-content` rather than\n     `fit-content`: as wide as the label and never wider than the parent, with no\n     intrinsic keyword as its width. Firefox and WebKit size a `1fr` or `auto`\n     grid track to at least the content width of an item whose width is such a\n     keyword, so the track grew to the label and the Button never shrank in a grid\n     cell (Chromium shrinks the track). A percentage is not counted that way.\n     `width: auto` would shrink the track too, but it stretches the box across a\n     block, stretch or `justify-items: normal` parent, and `margin: auto` on the\n     root would stop centring it. As a flex item the box is clamped to the\n     label's width, so `flex-grow` on the root does not widen it. A custom\n     `--button-width` replaces the max-content bound, and `fullWidth` sets it\n     to 100%.\n\n     Deliberately class-gated rather than a pair of tokens on every container: an\n     unconditional declaration here would outrank a consumer's own max-width class\n     on the root (the scoped selector is more specific). The class carries the\n     component prefix because `classes` lands on this same element, and a\n     consumer's own `shrinkable` class must not opt a Button in. */.button-container.button-shrinkable.svelte-1j9w5l4 {min-width:0;width:100%;max-width:var(--button-width, max-content);}.button-container.button-shrinkable.svelte-1j9w5l4 > .button-el:where(.svelte-1j9w5l4) {max-width:var(--button-max-width, 100%);}\n\n  /* An icon with a percentage max-width (the common `img { max-width: 100% }`\n     reset) has a min-content width of zero, so the shrinking button would\n     squeeze it along with the label. */.button-container.button-shrinkable.svelte-1j9w5l4 > .button-el:where(.svelte-1j9w5l4) > .button-icon:where(.svelte-1j9w5l4) {flex-shrink:0;}.button-el.svelte-1j9w5l4 {max-height:var(--button-max-height);max-width:var(--button-max-width);min-width:var(--button-min-width);font-family:var(--button-font-family);font-weight:var(--button-font-weight, 500);font-size:var(--button-font-size, var(--_btn-font-size, 14px));background-color:var(--button-color, var(--_btn-color, #3a4550));\n    /* Image layer, deliberately not the `background` shorthand — the shorthand\n       would reset a consumer's own background-image/position/size layers\n       whenever the hook is unset. Gradients go here; solids stay on --button-color. */background-image:var(--button-background, none);color:var(\n      --button-text-color,\n      var(--_btn-text-color, var(--button-neutral-text-color, white))\n    );height:var(--button-height, fit-content);padding:var(--button-padding, var(--_btn-padding, 16px));margin:var(--button-margin);border-radius:var(--button-border-radius, var(--radius, 6px));width:var(--button-width, fit-content);cursor:var(--cursor, pointer);opacity:var(--opacity, 1);border:var(--button-border, var(--_btn-border, none));box-sizing:border-box;text-decoration:var(--button-text-decoration, none);line-height:var(--button-line-height, normal);display:flex;justify-content:var(--button-justify-content, center);align-items:center;flex-direction:var(--button-content-flex-direction, row);gap:var(--button-content-gap, 16px);visibility:var(--button-visibility, visible);box-shadow:var(--button-box-shadow, none);transition:var(--button-transition, none);\n\n    /* A button label should never soft-wrap onto a second line as the label text\n       changes (e.g. \"Select\" -> \"Select (1)\") — that jitters the layout around it.\n       Consumers that genuinely want multi-line buttons opt back in via the var. */white-space:var(--button-white-space, nowrap);}.button-el.disabled.svelte-1j9w5l4,\n  .button-el.svelte-1j9w5l4:disabled {cursor:var(--disabled-cursor, not-allowed);opacity:var(--disabled-opacity, 0.4);color:var(--disabled-text-color, var(--button-text-color, var(--_btn-text-color, white)));font-size:var(--disabled-font-size, inherit);font-weight:var(--disabled-font-weight, inherit);text-decoration:var(--button-disabled-text-decoration, var(--button-text-decoration, none));\n    /* Preserve the variant border when disabled so secondary (bordered) stays distinct from ghost. */border:var(--disabled-border, var(--button-border, var(--_btn-border, none)));background:var(\n      --disabled-background-color,\n      var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))\n    );box-shadow:var(\n      --button-disabled-box-shadow,\n      var(--disabled-box-shadow, var(--button-box-shadow, none))\n    );}.button-loader.svelte-1j9w5l4 {order:var(--button-loader-order, 1);}.button-icon.svelte-1j9w5l4 {order:var(--button-icon-order, 2);display:var(--button-icon-display);}.button-text.svelte-1j9w5l4 {order:var(--button-text-order, 3);display:var(--button-text-display);\n\n    /* With nowrap as the default, a label longer than the button's box would\n       otherwise bleed past it — truncate with an ellipsis instead. Full labels\n       stay available via the button's accessible name / title at the call site. */overflow:hidden;text-overflow:ellipsis;}.button-el.svelte-1j9w5l4:hover:not(.disabled) {background:var(\n      --button-hover-color,\n      var(\n        --_btn-hover-color,\n        var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))\n      )\n    );color:var(\n      --button-hover-text-color,\n      var(--_btn-hover-text-color, var(--button-text-color, var(--_btn-text-color, white)))\n    );border:var(\n      --button-hover-border,\n      var(--_btn-hover-border, var(--button-border, var(--_btn-border, none)))\n    );transform:var(--button-hover-transform);box-shadow:var(--button-hover-box-shadow, var(--button-box-shadow, none));}.button-el.svelte-1j9w5l4:active:not(.disabled) {transform:var(--button-active-transform);background:var(\n      --button-active-background,\n      var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))\n    );box-shadow:var(--button-active-box-shadow, var(--button-box-shadow, none));}.button-el.svelte-1j9w5l4:focus-visible {box-shadow:var(--button-focus-visible-box-shadow, var(--button-box-shadow, none));}.button-progress-bar.svelte-1j9w5l4 {position:absolute;height:100%;width:100%;background:var(--button-progress-loader-background-color, #00000030);\n    animation: svelte-1j9w5l4-fill-loader var(--button-progress-loader-duration, 8s) forwards;z-index:2;}\n\n  @keyframes svelte-1j9w5l4-fill-loader {\n    0% {\n      width: 0;\n    }\n\n    100% {\n      width: 100%;\n    }\n  }\n\n  /* This bar is not indefinite like a spinner -- its width IS the meaning:\n     \"how much of `--button-progress-loader-duration` has elapsed\", and\n     `showProgressBar` keeps the button disabled for that whole span. A bare\n     `animation: none` would freeze it at the base rule above (`width: 100%`),\n     showing a FULL, \"finished\" bar for up to 8s while the button is actually\n     still counting down and still disabled -- a frame that means something\n     else is worse than the motion it removed. Freezing at 0% instead would\n     lie the other way once the real duration elapses and the bar should read\n     complete. Neither static width is honest for the whole span, so motion is\n     thinned rather than removed: `steps()` swaps the continuous ease for\n     discrete jumps that hold the PRIOR interval's value until each jump (the\n     `jump-end` default), so the displayed width can only ever under-report\n     elapsed time -- never claim to be further along than it really is -- while\n     still losing the smooth per-frame slide prefers-reduced-motion targets.\n     The step count is a LITERAL, deliberately not a token. `steps()` is invalid\n     for a count below 1, and an invalid value does not fall back to a safer\n     stepped default -- the whole declaration is dropped and the property takes\n     the base rule's `ease`, restoring exactly the continuous slide this block\n     exists to remove. A consumer passing `0` to \"just freeze it\" would silently\n     switch the guard off for every user who asked for reduced motion. A guard\n     that fails OPEN, quietly, is worse than no guard, and one tunable is not\n     worth that. \n     This block lives in the component's own <style> because that is the only\n     stylesheet that reaches inside the shadow root a custom-element consumer\n     gets. */\n  @media (prefers-reduced-motion: reduce) {.button-progress-bar.svelte-1j9w5l4 {animation-timing-function:steps(5, jump-end);}\n\n    /* The loader is not the only motion here. `--button-transition` defaults to\n       `none`, so this rule does nothing until a consumer opts in -- and the\n       documented way to opt in is exactly a hover/press animation, which is\n       what a user asking for reduced motion is asking not to have. The sweep\n       that covered every transition in ThemeSwitcher stopped at the one\n       animation the brief named in this file. */.button-el.svelte-1j9w5l4,\n    .button-container.svelte-1j9w5l4 {transition:none;}\n  }"
 };
 function Button(e, t) {
 	push(t, !0), append_styles$1(e, $$css$196);
-	let n = prop(t, "text", 7), i = prop(t, "variant", 7, "primary"), a = prop(t, "size", 7, "md"), o = prop(t, "iconOnly", 7, !1), s = prop(t, "fullWidth", 7, !1), c = prop(t, "href", 7), l = prop(t, "target", 7), u = prop(t, "rel", 7), f = prop(t, "loading", 7, !1), p = prop(t, "allowHtml", 7, !1), h = prop(t, "enable", 7, !0), S = prop(t, "disabled", 7, !1), C = prop(t, "showLoader", 7, !1), k = prop(t, "loaderType", 7), R = prop(t, "showProgressBar", 15, !1), te = prop(t, "type", 7, "button"), ne = prop(t, "testId", 7), G = prop(t, "ariaLabel", 7), re = prop(t, "ariaExpanded", 7), be = prop(t, "ariaControls", 7), Me = prop(t, "ariaHaspopup", 7), Re = prop(t, "ariaSelected", 7), Ue = prop(t, "ariaPressed", 7), it = prop(t, "ariaBusy", 7), at = prop(t, "role", 7), ot = prop(t, "title", 7), ct = prop(t, "statusText", 7), lt = prop(t, "statusTestId", 7), ut = prop(t, "onclick", 7), dt = prop(t, "onkeydown", 7, () => {}), ft = prop(t, "onkeyup", 7, () => {}), pt = prop(t, "onmousedown", 7), mt = prop(t, "onmouseup", 7), ht = prop(t, "onmouseleave", 7), gt = prop(t, "ontouchstart", 7), _t = prop(t, "ontouchend", 7), vt = prop(t, "icon", 7), yt = prop(t, "children", 7), bt = prop(t, "classes", 7), xt = prop(t, "style", 7), St = /* @__PURE__ */ user_derived(() => f() || C() && k() === "Circular"), Ct = /* @__PURE__ */ user_derived(() => C() && k() === "ProgressBar"), wt = /* @__PURE__ */ user_derived(() => get(St) || R()), Tt = /* @__PURE__ */ user_derived(() => S() || !h() || get(St) || R()), Et = /* @__PURE__ */ user_derived(() => u() ?? (l() === "_blank" ? "noopener noreferrer" : null));
-	function Dt(e) {
-		if (get(Tt)) {
-			c() && e.preventDefault();
+	let n = prop(t, "text", 7), i = prop(t, "variant", 7, "primary"), a = prop(t, "size", 7, "md"), o = prop(t, "iconOnly", 7, !1), s = prop(t, "fullWidth", 7, !1), c = prop(t, "shrinkable", 7, !1), l = prop(t, "href", 7), u = prop(t, "target", 7), f = prop(t, "rel", 7), p = prop(t, "loading", 7, !1), h = prop(t, "allowHtml", 7, !1), S = prop(t, "enable", 7, !0), C = prop(t, "disabled", 7, !1), k = prop(t, "showLoader", 7, !1), R = prop(t, "loaderType", 7), te = prop(t, "showProgressBar", 15, !1), ne = prop(t, "type", 7, "button"), G = prop(t, "testId", 7), re = prop(t, "ariaLabel", 7), be = prop(t, "ariaExpanded", 7), Me = prop(t, "ariaControls", 7), Re = prop(t, "ariaHaspopup", 7), Ue = prop(t, "ariaSelected", 7), it = prop(t, "ariaPressed", 7), at = prop(t, "ariaBusy", 7), ot = prop(t, "role", 7), ct = prop(t, "title", 7), lt = prop(t, "statusText", 7), ut = prop(t, "statusTestId", 7), dt = prop(t, "onclick", 7), ft = prop(t, "onkeydown", 7, () => {}), pt = prop(t, "onkeyup", 7, () => {}), mt = prop(t, "onmousedown", 7), ht = prop(t, "onmouseup", 7), gt = prop(t, "onmouseleave", 7), _t = prop(t, "ontouchstart", 7), vt = prop(t, "ontouchend", 7), yt = prop(t, "icon", 7), bt = prop(t, "children", 7), xt = prop(t, "classes", 7), St = prop(t, "style", 7), Ct = /* @__PURE__ */ user_derived(() => p() || k() && R() === "Circular"), wt = /* @__PURE__ */ user_derived(() => k() && R() === "ProgressBar"), Tt = /* @__PURE__ */ user_derived(() => get(Ct) || te()), Et = /* @__PURE__ */ user_derived(() => C() || !S() || get(Ct) || te()), Dt = /* @__PURE__ */ user_derived(() => f() ?? (u() === "_blank" ? "noopener noreferrer" : null));
+	function Ot(e) {
+		if (get(Et)) {
+			l() && e.preventDefault();
 			return;
 		}
-		ut()?.(e), get(Ct) && R(!0);
+		dt()?.(e), get(wt) && te(!0);
 	}
-	var Ot = {
+	var kt = {
 		get text() {
 			return n();
 		},
@@ -4723,271 +4723,277 @@ function Button(e, t) {
 		set fullWidth(e = !1) {
 			s(e), flushSync();
 		},
-		get href() {
+		get shrinkable() {
 			return c();
 		},
-		set href(e) {
+		set shrinkable(e = !1) {
 			c(e), flushSync();
 		},
-		get target() {
+		get href() {
 			return l();
 		},
-		set target(e) {
+		set href(e) {
 			l(e), flushSync();
 		},
-		get rel() {
+		get target() {
 			return u();
 		},
-		set rel(e) {
+		set target(e) {
 			u(e), flushSync();
 		},
-		get loading() {
+		get rel() {
 			return f();
 		},
-		set loading(e = !1) {
+		set rel(e) {
 			f(e), flushSync();
 		},
-		get allowHtml() {
+		get loading() {
 			return p();
 		},
-		set allowHtml(e = !1) {
+		set loading(e = !1) {
 			p(e), flushSync();
 		},
-		get enable() {
+		get allowHtml() {
 			return h();
 		},
-		set enable(e = !0) {
+		set allowHtml(e = !1) {
 			h(e), flushSync();
 		},
-		get disabled() {
+		get enable() {
 			return S();
 		},
-		set disabled(e = !1) {
+		set enable(e = !0) {
 			S(e), flushSync();
 		},
-		get showLoader() {
+		get disabled() {
 			return C();
 		},
-		set showLoader(e = !1) {
+		set disabled(e = !1) {
 			C(e), flushSync();
 		},
-		get loaderType() {
+		get showLoader() {
 			return k();
 		},
-		set loaderType(e) {
+		set showLoader(e = !1) {
 			k(e), flushSync();
 		},
-		get showProgressBar() {
+		get loaderType() {
 			return R();
 		},
-		set showProgressBar(e = !1) {
+		set loaderType(e) {
 			R(e), flushSync();
 		},
-		get type() {
+		get showProgressBar() {
 			return te();
 		},
-		set type(e = "button") {
+		set showProgressBar(e = !1) {
 			te(e), flushSync();
 		},
-		get testId() {
+		get type() {
 			return ne();
 		},
-		set testId(e) {
+		set type(e = "button") {
 			ne(e), flushSync();
 		},
-		get ariaLabel() {
+		get testId() {
 			return G();
 		},
-		set ariaLabel(e) {
+		set testId(e) {
 			G(e), flushSync();
 		},
-		get ariaExpanded() {
+		get ariaLabel() {
 			return re();
 		},
-		set ariaExpanded(e) {
+		set ariaLabel(e) {
 			re(e), flushSync();
 		},
-		get ariaControls() {
+		get ariaExpanded() {
 			return be();
 		},
-		set ariaControls(e) {
+		set ariaExpanded(e) {
 			be(e), flushSync();
 		},
-		get ariaHaspopup() {
+		get ariaControls() {
 			return Me();
 		},
-		set ariaHaspopup(e) {
+		set ariaControls(e) {
 			Me(e), flushSync();
 		},
-		get ariaSelected() {
+		get ariaHaspopup() {
 			return Re();
 		},
-		set ariaSelected(e) {
+		set ariaHaspopup(e) {
 			Re(e), flushSync();
 		},
-		get ariaPressed() {
+		get ariaSelected() {
 			return Ue();
 		},
-		set ariaPressed(e) {
+		set ariaSelected(e) {
 			Ue(e), flushSync();
 		},
-		get ariaBusy() {
+		get ariaPressed() {
 			return it();
 		},
-		set ariaBusy(e) {
+		set ariaPressed(e) {
 			it(e), flushSync();
 		},
-		get role() {
+		get ariaBusy() {
 			return at();
 		},
-		set role(e) {
+		set ariaBusy(e) {
 			at(e), flushSync();
 		},
-		get title() {
+		get role() {
 			return ot();
 		},
-		set title(e) {
+		set role(e) {
 			ot(e), flushSync();
 		},
-		get statusText() {
+		get title() {
 			return ct();
 		},
-		set statusText(e) {
+		set title(e) {
 			ct(e), flushSync();
 		},
-		get statusTestId() {
+		get statusText() {
 			return lt();
 		},
-		set statusTestId(e) {
+		set statusText(e) {
 			lt(e), flushSync();
 		},
-		get onclick() {
+		get statusTestId() {
 			return ut();
 		},
-		set onclick(e) {
+		set statusTestId(e) {
 			ut(e), flushSync();
 		},
-		get onkeydown() {
+		get onclick() {
 			return dt();
 		},
-		set onkeydown(e = () => {}) {
+		set onclick(e) {
 			dt(e), flushSync();
 		},
-		get onkeyup() {
+		get onkeydown() {
 			return ft();
 		},
-		set onkeyup(e = () => {}) {
+		set onkeydown(e = () => {}) {
 			ft(e), flushSync();
 		},
-		get onmousedown() {
+		get onkeyup() {
 			return pt();
 		},
-		set onmousedown(e) {
+		set onkeyup(e = () => {}) {
 			pt(e), flushSync();
 		},
-		get onmouseup() {
+		get onmousedown() {
 			return mt();
 		},
-		set onmouseup(e) {
+		set onmousedown(e) {
 			mt(e), flushSync();
 		},
-		get onmouseleave() {
+		get onmouseup() {
 			return ht();
 		},
-		set onmouseleave(e) {
+		set onmouseup(e) {
 			ht(e), flushSync();
 		},
-		get ontouchstart() {
+		get onmouseleave() {
 			return gt();
 		},
-		set ontouchstart(e) {
+		set onmouseleave(e) {
 			gt(e), flushSync();
 		},
-		get ontouchend() {
+		get ontouchstart() {
 			return _t();
 		},
-		set ontouchend(e) {
+		set ontouchstart(e) {
 			_t(e), flushSync();
 		},
-		get icon() {
+		get ontouchend() {
 			return vt();
 		},
-		set icon(e) {
+		set ontouchend(e) {
 			vt(e), flushSync();
 		},
-		get children() {
+		get icon() {
 			return yt();
 		},
-		set children(e) {
+		set icon(e) {
 			yt(e), flushSync();
 		},
-		get classes() {
+		get children() {
 			return bt();
 		},
-		set classes(e) {
+		set children(e) {
 			bt(e), flushSync();
 		},
-		get style() {
+		get classes() {
 			return xt();
 		},
-		set style(e) {
+		set classes(e) {
 			xt(e), flushSync();
+		},
+		get style() {
+			return St();
+		},
+		set style(e) {
+			St(e), flushSync();
 		}
-	}, kt = root_7$32();
-	let At;
-	var jt = child(kt), Mt = (e) => {
+	}, At = root_7$32();
+	let jt;
+	var Mt = child(At), Nt = (e) => {
 		append(e, root$107());
 	};
-	if_block(jt, (e) => {
-		R() && e(Mt);
+	if_block(Mt, (e) => {
+		te() && e(Nt);
 	});
-	var Nt = sibling(jt, 2);
-	element(Nt, () => c() ? "a" : "button", !1, (e, t) => {
+	var Pt = sibling(Mt, 2);
+	element(Pt, () => l() ? "a" : "button", !1, (e, t) => {
 		attribute_effect(e, () => ({
 			class: "button-el",
-			onclick: Dt,
-			onkeydown: dt(),
-			onkeyup: ft(),
-			onmousedown: pt(),
-			onmouseup: mt(),
-			onmouseleave: ht(),
-			ontouchstart: gt(),
-			ontouchend: _t(),
-			"data-pw": ne(),
-			testID: ne(),
-			role: at() ?? null,
-			"aria-label": G() ?? null,
-			"aria-expanded": re() ?? null,
-			"aria-controls": be() ?? null,
-			"aria-haspopup": Me() ?? null,
-			"aria-selected": Re() ?? null,
-			"aria-pressed": Ue() ?? null,
-			"aria-busy": get(wt) || it() || null,
-			title: ot() ?? null,
-			type: c() ? null : te(),
-			disabled: c() ? null : get(Tt),
-			href: c() ? get(Tt) ? null : c() : null,
-			target: c() ? l() : null,
-			rel: c() ? get(Et) : null,
-			"aria-disabled": c() && get(Tt) ? "true" : null,
-			tabindex: c() && get(Tt) ? -1 : null,
-			[CLASS]: { disabled: get(Tt) }
+			onclick: Ot,
+			onkeydown: ft(),
+			onkeyup: pt(),
+			onmousedown: mt(),
+			onmouseup: ht(),
+			onmouseleave: gt(),
+			ontouchstart: _t(),
+			ontouchend: vt(),
+			"data-pw": G(),
+			testID: G(),
+			role: ot() ?? null,
+			"aria-label": re() ?? null,
+			"aria-expanded": be() ?? null,
+			"aria-controls": Me() ?? null,
+			"aria-haspopup": Re() ?? null,
+			"aria-selected": Ue() ?? null,
+			"aria-pressed": it() ?? null,
+			"aria-busy": get(Tt) || at() || null,
+			title: ct() ?? null,
+			type: l() ? null : ne(),
+			disabled: l() ? null : get(Et),
+			href: l() ? get(Et) ? null : l() : null,
+			target: l() ? u() : null,
+			rel: l() ? get(Dt) : null,
+			"aria-disabled": l() && get(Et) ? "true" : null,
+			tabindex: l() && get(Et) ? -1 : null,
+			[CLASS]: { disabled: get(Et) }
 		}), void 0, void 0, void 0, "svelte-1j9w5l4");
 		var i = root_5$42(), a = first_child(i), o = (e) => {
 			var t = root_1$95();
 			Loader(child(t), {}), reset(t), append(e, t);
 		};
 		if_block(a, (e) => {
-			get(St) && e(o);
+			get(Ct) && e(o);
 		});
-		var s = sibling(a, 2), u = (e) => {
+		var s = sibling(a, 2), c = (e) => {
 			var t = root_2$74();
-			snippet(child(t), vt), reset(t), append(e, t);
+			snippet(child(t), yt), reset(t), append(e, t);
 		};
 		if_block(s, (e) => {
-			typeof vt() == "function" && e(u);
+			typeof yt() == "function" && e(c);
 		});
-		var f = sibling(s, 2), h = (e) => {
+		var f = sibling(s, 2), p = (e) => {
 			var t = comment(), i = first_child(t), a = (e) => {
 				var t = root_3$66();
 				html(t, n, !0), reset(t), append(e, t);
@@ -4996,34 +5002,35 @@ function Button(e, t) {
 				reset(t), template_effect(() => set_text(i, n())), append(e, t);
 			};
 			if_block(i, (e) => {
-				p() ? e(a) : e(o, -1);
+				h() ? e(a) : e(o, -1);
 			}), append(e, t);
 		};
 		if_block(f, (e) => {
-			typeof n() == "string" && n().length > 0 && e(h);
+			typeof n() == "string" && n().length > 0 && e(p);
 		});
 		var S = sibling(f, 2), C = (e) => {
 			var t = comment();
-			snippet(first_child(t), yt), append(e, t);
+			snippet(first_child(t), bt), append(e, t);
 		};
 		if_block(S, (e) => {
-			typeof yt() == "function" && e(C);
+			typeof bt() == "function" && e(C);
 		}), append(t, i);
 	});
-	var Pt = sibling(Nt, 2), It = (e) => {
+	var It = sibling(Pt, 2), Lt = (e) => {
 		var t = root_6$36(), n = child(t, !0);
 		reset(t), template_effect(() => {
-			set_attribute(t, "data-pw", lt() ?? null), set_text(n, ct());
+			set_attribute(t, "data-pw", ut() ?? null), set_text(n, lt());
 		}), append(e, t);
 	};
-	return if_block(Pt, (e) => {
-		typeof ct() == "string" && e(It);
-	}), reset(kt), template_effect(() => {
-		At = set_class(kt, 1, `button-container variant-${i() ?? ""} size-${a() ?? ""} ${bt() ?? "" ?? ""}`, "svelte-1j9w5l4", At, {
+	return if_block(It, (e) => {
+		typeof lt() == "string" && e(Lt);
+	}), reset(At), template_effect(() => {
+		jt = set_class(At, 1, `button-container variant-${i() ?? ""} size-${a() ?? ""} ${xt() ?? "" ?? ""}`, "svelte-1j9w5l4", jt, {
 			"icon-only": o(),
-			"full-width": s()
-		}), set_style(kt, xt() ?? null);
-	}), append(e, kt), pop(Ot);
+			"full-width": s(),
+			"button-shrinkable": c()
+		}), set_style(At, St() ?? null);
+	}), append(e, At), pop(kt);
 }
 create_custom_element(Button, {
 	text: {},
@@ -5031,6 +5038,7 @@ create_custom_element(Button, {
 	size: {},
 	iconOnly: {},
 	fullWidth: {},
+	shrinkable: {},
 	href: {},
 	target: {},
 	rel: {},
@@ -6987,7 +6995,7 @@ function getActiveElement(e) {
 }
 //#endregion
 //#region src/lib/Input/Input.svelte
-var root$100 = /* @__PURE__ */ from_html("<textarea></textarea>"), root_1$88 = /* @__PURE__ */ from_html("<input/>"), root_2$69 = /* @__PURE__ */ from_html("<span class=\"input-mandatory-asterisk svelte-1h0c2oe\" aria-hidden=\"true\">*</span>"), root_3$61 = /* @__PURE__ */ from_html("<div class=\"label-row svelte-1h0c2oe\"><label class=\"label svelte-1h0c2oe\"> <!></label> <span class=\"svelte-1h0c2oe\"><!></span></div>"), root_4$50 = /* @__PURE__ */ from_html("<label class=\"label svelte-1h0c2oe\"> <!></label>"), root_5$40 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-left input-icon-button svelte-1h0c2oe\"><!></button>"), root_6$35 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-left svelte-1h0c2oe\"><!></span>"), root_7$31 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-right input-icon-button svelte-1h0c2oe\"><!></button>"), root_8$26 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-right svelte-1h0c2oe\"><!></span>"), root_9$20 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), root_10$19 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"error-message svelte-1h0c2oe\"> </div>"), root_11$17 = /* @__PURE__ */ from_html("<div class=\"info-message svelte-1h0c2oe\"> </div>"), root_12$16 = /* @__PURE__ */ from_html("<div> </div>"), root_13$14 = /* @__PURE__ */ from_html("<div><!> <!> <!> <!> <!></div>"), $$css$185 = {
+var root$100 = /* @__PURE__ */ from_html("<textarea></textarea>"), root_1$88 = /* @__PURE__ */ from_html("<input/>"), root_2$69 = /* @__PURE__ */ from_html("<span class=\"input-mandatory-asterisk svelte-1h0c2oe\" aria-hidden=\"true\">*</span>"), root_3$61 = /* @__PURE__ */ from_html("<div class=\"label-row svelte-1h0c2oe\"><label class=\"label svelte-1h0c2oe\"> <!></label> <span class=\"svelte-1h0c2oe\"><!></span></div>"), root_4$50 = /* @__PURE__ */ from_html("<label class=\"label svelte-1h0c2oe\"> <!></label>"), root_5$40 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-left input-icon-button svelte-1h0c2oe\"><!></button>"), root_6$35 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-left svelte-1h0c2oe\"><!></span>"), root_7$31 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-right input-icon-button svelte-1h0c2oe\"><!></button>"), root_8$26 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-right svelte-1h0c2oe\"><!></span>"), root_9$20 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), root_10$20 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"error-message svelte-1h0c2oe\"> </div>"), root_11$17 = /* @__PURE__ */ from_html("<div class=\"info-message svelte-1h0c2oe\"> </div>"), root_12$16 = /* @__PURE__ */ from_html("<div> </div>"), root_13$14 = /* @__PURE__ */ from_html("<div><!> <!> <!> <!> <!></div>"), $$css$185 = {
 	hash: "svelte-1h0c2oe",
 	code: "textarea.svelte-1h0c2oe,\n  input.svelte-1h0c2oe {box-sizing:var(--input-box-sizing, border-box);height:var(--input-height, fit-content);\n\n    /* Both default to the CSS initial value, so a consumer that sets neither is\n       byte-identical to before. A textarea that grows with its content needs a\n       ceiling before it can scroll, and one used as a paste target needs a floor;\n       neither was reachable through the --input-* surface. */min-height:var(--input-min-height, auto);max-height:var(--input-max-height, none);background-color:var(--input-background, white);font-size:var(--input-font-size, 16px) !important;font-family:var(--input-font-family, inherit);border-radius:var(--input-radius, var(--radius, 4px));outline:none;padding:var(--input-padding, 16px);font-weight:var(--input-font-weight, 500);\n\n    /* `normal` is what a textarea/input computes today regardless of any inherited\n       value — the UA sheet sets it, and inheritance loses to a UA declaration on the\n       element itself. So the default here is byte-identical for existing consumers,\n       and this is the only way a consumer can set it at all. */line-height:var(--input-line-height, normal);width:var(--input-width, fit-content);margin:var(--input-margin, 0);appearance:none !important;-webkit-appearance:none !important; /* For Safari MWeb */box-shadow:var(--input-box-shadow, 0px 1px 8px #2f537733);border:var(--input-border, 1px solid transparent);resize:none;visibility:var(--input-visibility, visible);text-align:var(--input-text-align, left);text-transform:var(--input-text-transform, none);color:var(--input-text-color, #333333);}\n\n  /* The fallback used to be `1px solid transparent` -- a border that changes\n     width/style but not colour, so a mouse-focused OR keyboard-focused field\n     looked identical to unfocused. Text inputs use a real :focus (not\n     :focus-visible): unlike a button-shaped control, a text field's focus\n     ring has to stay visible regardless of input modality, since a mouse\n     click into a field is itself the start of a keyboard interaction.\n     --input-focus-border-color already exists for exactly this colour (see\n     .input-icon-button:focus-visible below), so this reuses it instead of\n     minting a second token for the same ring. */textarea.svelte-1h0c2oe:focus,\n  input.svelte-1h0c2oe:focus {border:var(--input-focus-border, 1px solid var(--input-focus-border-color, #005fcc));}.input-error.svelte-1h0c2oe {--input-focus-border: var(\n      --input-error-border,\n      1px solid var(--input-error-msg-text-color, #c5120a)\n    ) !important;--input-border: var(\n      --input-error-border,\n      1px solid var(--input-error-msg-text-color, #c5120a)\n    ) !important;}.action-input.svelte-1h0c2oe {border-radius:var(--input-radius, var(--radius, 4px) 0 0 var(--radius, 4px));box-shadow:var(--input-box-shadow, 0px 0px 0px #ffffff);margin-bottom:0;}.input-container.svelte-1h0c2oe {display:flex;flex-direction:column;margin:var(--input-container-margin, 0);padding:var(--input-container-padding, 0);width:var(--input-container-width, fit-content);}\n\n  /* Only present when labelSuffix is supplied (and written as a direct child of the\n     container, so a `label-row` class a consumer passes through `classes`, which lands\n     on the container itself, cannot match): a flex item's own margin is\n     space around just that item, not something later content in the column\n     can rely on to open up room below the whole row, so the row itself\n     carries the margin a lone .label used to carry on its own below. */.input-container.svelte-1h0c2oe > .label-row:where(.svelte-1h0c2oe) {display:flex;align-items:baseline;justify-content:space-between;gap:var(--input-label-row-gap, 8px);margin:var(--input-label-msg-margin, 0px 0px 6px 0px);}\n\n  /* A row-wrapped label hands its margin to the row above, so it does not\n     take it twice. Only exists in the labelSuffix branch. */.input-container.svelte-1h0c2oe > .label-row:where(.svelte-1h0c2oe) > .label:where(.svelte-1h0c2oe) {margin:0;}.label.svelte-1h0c2oe {font-weight:var(--input-label-msg-text-weight, 400);font-size:var(--input-label-msg-text-size, 12px);color:var(--input-label-msg-text-color, #4d6174);margin:var(--input-label-msg-margin, 0px 0px 6px 0px);padding:var(--input-label-msg-padding);}.input-mandatory-asterisk.svelte-1h0c2oe {color:var(--input-mandatory-color, var(--input-error-msg-text-color, #c5120a));margin-left:var(--input-mandatory-gap, 2px);}\n\n  /* Icon wrapper: only rendered when leftIcon/rightIcon is supplied, so non-icon\n     consumers keep the exact prior DOM. The field's bottom margin moves to the\n     wrap so the absolutely-positioned icons centre on the field, not the margin. */.input-field-wrap.svelte-1h0c2oe {position:relative;display:block;margin:var(--input-margin, 0);}.input-field-wrap.svelte-1h0c2oe > textarea,\n  .input-field-wrap.svelte-1h0c2oe > input {margin:0 !important;width:var(--input-width, 100%);}.input-icon.svelte-1h0c2oe {position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:var(--input-icon-size, 20px);height:var(--input-icon-size, 20px);color:var(--input-icon-color, inherit);pointer-events:none;}.input-icon-button.svelte-1h0c2oe {background:none;border:none;padding:0;cursor:pointer;pointer-events:auto;}.input-icon-button.svelte-1h0c2oe:focus-visible {outline:var(--input-icon-focus-outline, 2px solid var(--input-focus-border-color, #005fcc));outline-offset:var(--input-icon-focus-outline-offset, 2px);border-radius:var(--input-icon-focus-radius, var(--radius, 4px));}.input-icon-left.svelte-1h0c2oe {left:var(--input-icon-gap, 12px);color:var(--input-left-icon-color, var(--input-icon-color, inherit));}.input-icon-right.svelte-1h0c2oe {right:var(--input-icon-gap, 12px);}.input-field-wrap.has-left-icon.svelte-1h0c2oe > textarea,\n  .input-field-wrap.has-left-icon.svelte-1h0c2oe > input {padding-left:calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);}.input-field-wrap.has-right-icon.svelte-1h0c2oe > textarea,\n  .input-field-wrap.has-right-icon.svelte-1h0c2oe > input {padding-right:calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);}.error-message.svelte-1h0c2oe {font-weight:var(--input-error-msg-text-weight, 400);font-size:var(--input-error-msg-text-size, 12px);\n    /* #c5120a clears WCAG AA (6.06:1 on white) at this 12px size; the prior #fa1405\n       default was only 4.06:1, so the error message itself failed to be legible. */color:var(--input-error-msg-text-color, #c5120a);margin:var(--input-error-msg-margin);padding:var(--input-error-msg-padding);}.info-message.svelte-1h0c2oe {font-weight:var(--input-info-msg-text-weight, 400);font-size:var(--input-info-msg-text-size, 12px);\n    /* Neutral on purpose -- this used to default to the same red as .error-message,\n       so helper text with no error visually read as a failed field (color-alone\n       signalling, WCAG 1.4.1). #52525b is the muted-text tone already used for\n       ChatToolStatus/ThinkingIndicator elsewhere in this library, at 7.73:1. */color:var(--input-info-msg-text-color, #52525b);margin:var(--input-info-msg-margin);padding:var(--input-info-msg-padding);}.input-char-count.svelte-1h0c2oe {align-self:flex-end;font-size:var(--input-char-count-size, 12px);color:var(--input-char-count-color, #5c6b7a);margin:var(--input-char-count-margin, 4px 0 0);font-variant-numeric:tabular-nums;}.input-char-count.at-limit.svelte-1h0c2oe {color:var(--input-char-count-limit-color, var(--input-error-msg-text-color, #c5120a));}.svelte-1h0c2oe::placeholder {color:var(--input-placeholder-color, #5c6b7a);}"
 };
@@ -7542,7 +7550,7 @@ function Input(e, t) {
 			get(ln) || get(un) ? e(En) : e(Dn, -1);
 		});
 		var On = sibling(Tn, 2), kn = (e) => {
-			var t = root_10$19(), n = child(t, !0);
+			var t = root_10$20(), n = child(t, !0);
 			reset(t), template_effect(() => {
 				set_attribute(t, "id", get(cn).errorId), set_attribute(t, "data-pw", typeof ct() == "string" && ct().length > 0 ? `${ct()}-error-message` : null), set_attribute(t, "testid", typeof ct() == "string" && ct().length > 0 ? `${ct()}-error-message` : null), set_text(n, u());
 			}), append(e, t);
@@ -9162,7 +9170,7 @@ customElements.define("sui-color-picker", create_custom_element(ColorPicker_wc,
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Combobox/Combobox.svelte
-var root$94 = /* @__PURE__ */ from_html("<div class=\"combobox-input-prefix svelte-178p70i\"><!></div>"), root_1$82 = /* @__PURE__ */ from_html("<div class=\"combobox-input-suffix svelte-178p70i\"><!></div>"), root_2$63 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown-header svelte-178p70i\"><!></div>"), root_3$56 = /* @__PURE__ */ from_html("<div class=\"combobox-limit svelte-178p70i\" role=\"alert\"> </div>"), root_4$47 = /* @__PURE__ */ from_html("<div class=\"combobox-empty svelte-178p70i\"> </div>"), root_5$37 = /* @__PURE__ */ from_html("<div role=\"option\" tabindex=\"-1\"><!></div>"), root_6$33 = /* @__PURE__ */ from_html("<div role=\"option\" aria-selected=\"false\" tabindex=\"-1\"><span class=\"combobox-create-icon svelte-178p70i\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" fill=\"none\"><path d=\"M10 4v12M4 10h12\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"></path></svg></span> </div>"), root_7$29 = /* @__PURE__ */ from_html("<span class=\"combobox-action-icon svelte-178p70i\" aria-hidden=\"true\"><!></span>"), root_8$25 = /* @__PURE__ */ from_html("<div role=\"option\" aria-selected=\"false\" tabindex=\"-1\"><!> </div>"), root_9$19 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown-footer svelte-178p70i\"><!></div>"), root_10$18 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown svelte-178p70i\" role=\"listbox\"><!> <!> <!> <!> <!></div>"), root_11$16 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-178p70i\"> </div>"), root_12$15 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-178p70i\"> </div>"), root_13$13 = /* @__PURE__ */ from_html("<div><div><!> <!> <div class=\"combobox-input svelte-178p70i\"><!></div> <!></div> <!></div> <!> <!>", 1), $$css$177 = {
+var root$94 = /* @__PURE__ */ from_html("<div class=\"combobox-input-prefix svelte-178p70i\"><!></div>"), root_1$82 = /* @__PURE__ */ from_html("<div class=\"combobox-input-suffix svelte-178p70i\"><!></div>"), root_2$63 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown-header svelte-178p70i\"><!></div>"), root_3$56 = /* @__PURE__ */ from_html("<div class=\"combobox-limit svelte-178p70i\" role=\"alert\"> </div>"), root_4$47 = /* @__PURE__ */ from_html("<div class=\"combobox-empty svelte-178p70i\"> </div>"), root_5$37 = /* @__PURE__ */ from_html("<div role=\"option\" tabindex=\"-1\"><!></div>"), root_6$33 = /* @__PURE__ */ from_html("<div role=\"option\" aria-selected=\"false\" tabindex=\"-1\"><span class=\"combobox-create-icon svelte-178p70i\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" fill=\"none\"><path d=\"M10 4v12M4 10h12\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"></path></svg></span> </div>"), root_7$29 = /* @__PURE__ */ from_html("<span class=\"combobox-action-icon svelte-178p70i\" aria-hidden=\"true\"><!></span>"), root_8$25 = /* @__PURE__ */ from_html("<div role=\"option\" aria-selected=\"false\" tabindex=\"-1\"><!> </div>"), root_9$19 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown-footer svelte-178p70i\"><!></div>"), root_10$19 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown svelte-178p70i\" role=\"listbox\"><!> <!> <!> <!> <!></div>"), root_11$16 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-178p70i\"> </div>"), root_12$15 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-178p70i\"> </div>"), root_13$13 = /* @__PURE__ */ from_html("<div><div><!> <!> <div class=\"combobox-input svelte-178p70i\"><!></div> <!></div> <!></div> <!> <!>", 1), $$css$177 = {
 	hash: "svelte-178p70i",
 	code: ".field-error.svelte-178p70i {color:var(--field-error-color, #c5120a);font-size:var(--field-error-font-size, 12px);margin:var(--field-error-margin, 4px 0 0 0);}.field-info.svelte-178p70i {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}.combobox.svelte-178p70i {position:relative;width:var(--combobox-width, 100%);font-family:var(--combobox-font-family, inherit);font-size:var(--combobox-font-size, 14px);color:var(--combobox-color, #333333);}.combobox.disabled.svelte-178p70i {opacity:var(--combobox-disabled-opacity, 0.5);cursor:var(--combobox-disabled-cursor, not-allowed);pointer-events:none;}.combobox-input-wrapper.svelte-178p70i {display:flex;align-items:center;background:var(--combobox-input-background, #ffffff);border:var(--combobox-input-border, 1px solid #cccccc);border-radius:var(--combobox-input-border-radius, var(--radius, 4px));transition:var(\n      --combobox-input-transition,\n      border-color\n        var(\n          --combobox-input-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--combobox-input-transition-easing, var(--motion-easing, ease)),\n      box-shadow\n        var(\n          --combobox-input-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--combobox-input-transition-easing, var(--motion-easing, ease))\n    );}\n\n  /* Multi-select control: pills wrap above the typeahead input. */.combobox-input-wrapper.multiple.svelte-178p70i {flex-wrap:wrap;gap:var(--combobox-pill-gap, 4px);padding:var(--combobox-multiple-padding, 4px 6px);cursor:text;}.combobox-input-wrapper.svelte-178p70i:hover {border-color:var(--combobox-input-hover-border-color, #999999);}.combobox-input-wrapper.svelte-178p70i:focus-within {border-color:var(--combobox-input-focus-border-color, #2563eb);box-shadow:var(--combobox-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.combobox-input-prefix.svelte-178p70i {display:flex;align-items:center;padding-left:var(--combobox-input-prefix-padding, 8px);flex-shrink:0;}.combobox-input-suffix.svelte-178p70i {display:flex;align-items:center;padding-right:var(--combobox-input-suffix-padding, 8px);flex-shrink:0;}.combobox-input.svelte-178p70i {flex:1;min-width:0;--input-border: none;--input-focus-border: none;--input-box-shadow: none;--input-margin: 0;--input-width: 100%;--input-padding: var(--combobox-input-padding, 8px 12px);--input-background: transparent;--input-font-size: inherit;--input-font-family: inherit;--input-font-weight: inherit;--input-text-color: inherit;--input-radius: 0;}.combobox-input-wrapper.multiple.svelte-178p70i .combobox-input:where(.svelte-178p70i) {flex:1 1 60px;min-width:60px;--input-padding: var(--combobox-multiple-input-padding, 2px 4px);}.combobox-input.svelte-178p70i::placeholder {color:var(--combobox-placeholder-color, #999999);}.combobox-dropdown.svelte-178p70i {position:absolute;top:var(--combobox-dropdown-top, 100%);left:var(--combobox-dropdown-left, 0);right:var(--combobox-dropdown-right, 0);margin-top:var(--combobox-dropdown-gap, 4px);background:var(--combobox-dropdown-background, #ffffff);border:var(--combobox-dropdown-border, 1px solid #cccccc);border-radius:var(--combobox-dropdown-border-radius, var(--radius, 4px));box-shadow:var(--combobox-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));max-height:var(--combobox-dropdown-max-height, 200px);overflow-y:auto;z-index:var(--combobox-dropdown-z-index, 10);padding:var(--combobox-dropdown-padding, 0);}.combobox-option.svelte-178p70i {display:flex;align-items:center;gap:var(--combobox-option-gap, 8px);padding:var(--combobox-option-padding, 8px 12px);color:var(--combobox-option-color, #333333);font-size:var(--combobox-option-font-size, inherit);font-weight:var(--combobox-option-font-weight, inherit);cursor:pointer;transition:background var(--combobox-option-transition-duration, var(--motion-duration, 0.1s))\n      var(--combobox-option-transition-easing, var(--motion-easing, ease));}.combobox-option.svelte-178p70i:hover,\n  .combobox-option.highlighted.svelte-178p70i {background:var(--combobox-option-hover-background, #f0f0f0);color:var(--combobox-option-hover-color, var(--combobox-option-color, #333333));}.combobox-option.selected.svelte-178p70i {background:var(--combobox-option-selected-background, #e8f0fe);color:var(--combobox-option-selected-color, var(--combobox-option-color, #333333));font-weight:var(\n      --combobox-option-selected-font-weight,\n      var(--combobox-option-font-weight, inherit)\n    );}.combobox-option.selected.highlighted.svelte-178p70i {background:var(\n      --combobox-option-selected-hover-background,\n      var(--combobox-option-selected-background, #e8f0fe)\n    );}.combobox-option-disabled.svelte-178p70i {opacity:var(--combobox-option-disabled-opacity, 0.4);cursor:var(--combobox-option-disabled-cursor, not-allowed);pointer-events:none;}.combobox-create.svelte-178p70i {color:var(--combobox-create-color, #2563eb);}.combobox-action.svelte-178p70i {color:var(--combobox-action-color, #374151);}.combobox-option.with-divider.svelte-178p70i {border-top:var(--combobox-divider, 1px solid #e5e7eb);}.combobox-create-icon.svelte-178p70i,\n  .combobox-action-icon.svelte-178p70i {display:inline-flex;align-items:center;flex-shrink:0;}.combobox-action-icon.svelte-178p70i svg {width:14px;height:14px;}.combobox-limit.svelte-178p70i {display:flex;align-items:center;gap:6px;padding:var(--combobox-limit-padding, 8px 12px);font-size:var(--combobox-limit-font-size, 13px);font-weight:500;color:var(--combobox-limit-color, #b45309);background:var(--combobox-limit-background, #fffbeb);}.combobox-dropdown-header.svelte-178p70i {border-bottom:var(--combobox-dropdown-header-border, none);padding:var(--combobox-dropdown-header-padding, 0);}.combobox-dropdown-footer.svelte-178p70i {border-top:var(--combobox-dropdown-footer-border, none);padding:var(--combobox-dropdown-footer-padding, 0);}.combobox-empty.svelte-178p70i {padding:var(--combobox-empty-padding, 8px 12px);color:var(--combobox-empty-color, #999999);font-style:var(--combobox-empty-font-style, italic);}"
 };
@@ -9637,7 +9645,7 @@ function Combobox(e, t) {
 		typeof Me() == "function" && e(Pn);
 	}), reset(Tn);
 	var Fn = sibling(Tn, 2), In = (e) => {
-		var t = root_10$18(), n = child(t), i = (e) => {
+		var t = root_10$19(), n = child(t), i = (e) => {
 			var t = root_2$63();
 			snippet(child(t), Re), reset(t), append(e, t);
 		};
@@ -10421,7 +10429,7 @@ function tokenizedFly(e, t) {
 }
 //#endregion
 //#region src/lib/assets/search.svg?raw
-var search_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n  <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n</svg>\n", root$92 = /* @__PURE__ */ from_html("<span class=\"command-menu-search-icon svelte-rk55q\"></span>"), root_1$81 = /* @__PURE__ */ from_html("<div class=\"command-menu-empty svelte-rk55q\"> </div>"), root_2$62 = /* @__PURE__ */ from_html("<div class=\"command-menu-group-heading svelte-rk55q\"> </div>"), root_3$55 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-icon svelte-rk55q\"><!></span>"), root_4$46 = /* @__PURE__ */ from_html("<div class=\"command-menu-item-icon-img-wrapper svelte-rk55q\"><!></div>"), root_5$36 = /* @__PURE__ */ from_html("<kbd class=\"command-menu-kbd svelte-rk55q\"> </kbd>"), root_6$32 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-shortcut svelte-rk55q\"></span>"), root_7$28 = /* @__PURE__ */ from_html("<!> <span class=\"command-menu-item-label svelte-rk55q\"> </span> <!>", 1), root_8$24 = /* @__PURE__ */ from_html("<button type=\"button\" role=\"option\" tabindex=\"-1\"><!></button>"), root_9$18 = /* @__PURE__ */ from_html("<!> <!>", 1), root_10$17 = /* @__PURE__ */ from_html("<div role=\"dialog\" aria-modal=\"true\" tabindex=\"-1\"><div class=\"command-menu-dialog svelte-rk55q\"><div class=\"command-menu-input-wrapper svelte-rk55q\"><!> <input type=\"text\" class=\"command-menu-input svelte-rk55q\" autocomplete=\"off\" spellcheck=\"false\" role=\"combobox\" aria-autocomplete=\"list\"/></div> <div class=\"command-menu-separator svelte-rk55q\"></div> <div class=\"command-menu-list svelte-rk55q\" role=\"listbox\"><!></div></div></div>"), $$css$175 = {
+var search_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n  <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n</svg>\n", root$92 = /* @__PURE__ */ from_html("<span class=\"command-menu-search-icon svelte-rk55q\"></span>"), root_1$81 = /* @__PURE__ */ from_html("<div class=\"command-menu-empty svelte-rk55q\"> </div>"), root_2$62 = /* @__PURE__ */ from_html("<div class=\"command-menu-group-heading svelte-rk55q\"> </div>"), root_3$55 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-icon svelte-rk55q\"><!></span>"), root_4$46 = /* @__PURE__ */ from_html("<div class=\"command-menu-item-icon-img-wrapper svelte-rk55q\"><!></div>"), root_5$36 = /* @__PURE__ */ from_html("<kbd class=\"command-menu-kbd svelte-rk55q\"> </kbd>"), root_6$32 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-shortcut svelte-rk55q\"></span>"), root_7$28 = /* @__PURE__ */ from_html("<!> <span class=\"command-menu-item-label svelte-rk55q\"> </span> <!>", 1), root_8$24 = /* @__PURE__ */ from_html("<button type=\"button\" role=\"option\" tabindex=\"-1\"><!></button>"), root_9$18 = /* @__PURE__ */ from_html("<!> <!>", 1), root_10$18 = /* @__PURE__ */ from_html("<div role=\"dialog\" aria-modal=\"true\" tabindex=\"-1\"><div class=\"command-menu-dialog svelte-rk55q\"><div class=\"command-menu-input-wrapper svelte-rk55q\"><!> <input type=\"text\" class=\"command-menu-input svelte-rk55q\" autocomplete=\"off\" spellcheck=\"false\" role=\"combobox\" aria-autocomplete=\"list\"/></div> <div class=\"command-menu-separator svelte-rk55q\"></div> <div class=\"command-menu-list svelte-rk55q\" role=\"listbox\"><!></div></div></div>"), $$css$175 = {
 	hash: "svelte-rk55q",
 	code: ".command-menu-overlay.svelte-rk55q {position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--command-menu-overlay-background, rgba(0, 0, 0, 0.5));display:flex;align-items:var(--command-menu-overlay-align, flex-start);justify-content:center;padding-top:var(--command-menu-overlay-padding-top, 20vh);z-index:var(--command-menu-z-index, 50);-webkit-tap-highlight-color:transparent;}.command-menu-dialog.svelte-rk55q {background-color:var(--command-menu-background, #ffffff);border-radius:var(--command-menu-border-radius, var(--radius, 4px));box-shadow:var(--command-menu-box-shadow, 0 16px 70px rgba(0, 0, 0, 0.2));width:var(--command-menu-width, 560px);max-width:var(--command-menu-max-width, 90vw);max-height:var(--command-menu-max-height, 60vh);display:flex;flex-direction:column;overflow:hidden;border:var(--command-menu-border, 1px solid #e2e8f0);}.command-menu-input-wrapper.svelte-rk55q {display:flex;align-items:center;padding:var(--command-menu-input-wrapper-padding, 12px 16px);gap:var(--command-menu-input-wrapper-gap, 10px);}.command-menu-search-icon.svelte-rk55q {display:inline-flex;align-items:center;justify-content:center;width:var(--command-menu-search-icon-size, 20px);height:var(--command-menu-search-icon-size, 20px);color:var(--command-menu-search-icon-color, #94a3b8);flex-shrink:0;}.command-menu-search-icon.svelte-rk55q svg {width:100%;height:100%;}.command-menu-input.svelte-rk55q {flex:1;border:none;outline:none;background:transparent;font-size:var(--command-menu-input-font-size, 16px);font-family:var(--command-menu-input-font-family, inherit);font-weight:var(--command-menu-input-font-weight, 400);color:var(--command-menu-input-color, #1e293b);caret-color:var(--command-menu-input-caret-color, #3b82f6);}\n\n  /* The input is the only real Tab stop the overlay currently renders (list\n     items are a roving aria-activedescendant selection, not DOM focus -- see\n     .active below), so it is also the only element here that WCAG 2.4.7\n     applies to. A real text input, so :focus rather than :focus-visible: the\n     ring must stay visible regardless of input modality, matching Input.svelte's\n     own textarea/input convention. Positive offset (not Sheet/Modal's inset\n     -2px) because the input sits inside .command-menu-input-wrapper's own\n     padding, not flush against the dialog's edge. */.command-menu-input.svelte-rk55q:focus {outline:var(--command-menu-input-focus-outline, 2px solid #2563eb);outline-offset:var(--command-menu-input-focus-outline-offset, 2px);}.command-menu-input.svelte-rk55q::placeholder {color:var(--command-menu-input-placeholder-color, #94a3b8);}.command-menu-separator.svelte-rk55q {height:var(--command-menu-separator-height, 1px);background-color:var(--command-menu-separator-color, #e2e8f0);flex-shrink:0;}.command-menu-list.svelte-rk55q {overflow-y:auto;padding:var(--command-menu-list-padding, 8px);scrollbar-width:var(--command-menu-scrollbar-width, thin);}.command-menu-empty.svelte-rk55q {padding:var(--command-menu-empty-padding, 32px 16px);text-align:center;color:var(--command-menu-empty-color, #94a3b8);font-size:var(--command-menu-empty-font-size, 14px);font-style:var(--command-menu-empty-font-style, normal);}.command-menu-group-heading.svelte-rk55q {padding:var(--command-menu-group-heading-padding, 8px 12px 4px);font-size:var(--command-menu-group-heading-font-size, 12px);font-weight:var(--command-menu-group-heading-font-weight, 600);color:var(--command-menu-group-heading-color, #94a3b8);text-transform:var(--command-menu-group-heading-text-transform, uppercase);letter-spacing:var(--command-menu-group-heading-letter-spacing, 0.05em);}.command-menu-item.svelte-rk55q {display:flex;align-items:center;padding:var(--command-menu-item-padding, 10px 12px);border-radius:var(--command-menu-item-border-radius, var(--radius, 4px));cursor:pointer;gap:var(--command-menu-item-gap, 10px);font-size:var(--command-menu-item-font-size, 14px);color:var(--command-menu-item-color, #334155);transition:background-color\n      var(--command-menu-item-transition-duration, var(--motion-duration, 0.1s))\n      var(--command-menu-item-transition-easing, var(--motion-easing, ease));background:none;border:none;width:100%;text-align:left;font-family:inherit;}.command-menu-item.active.svelte-rk55q {background-color:var(--command-menu-item-active-background, #f1f5f9);color:var(--command-menu-item-active-color, #0f172a);}.command-menu-item.disabled.svelte-rk55q {opacity:var(--command-menu-item-disabled-opacity, 0.4);cursor:not-allowed;}.command-menu-item-icon.svelte-rk55q {display:flex;align-items:center;justify-content:center;flex-shrink:0;}.command-menu-item-icon-img-wrapper.svelte-rk55q {--image-width: var(--command-menu-item-icon-size, 20px);--image-height: var(--command-menu-item-icon-size, 20px);\n\n    /* Mirrors --command-menu-search-icon-color, which this component already had. */color:var(--command-menu-item-icon-color, inherit);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.command-menu-item-label.svelte-rk55q {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.command-menu-item-shortcut.svelte-rk55q {display:flex;align-items:center;gap:var(--command-menu-shortcut-gap, 4px);flex-shrink:0;}.command-menu-kbd.svelte-rk55q {display:inline-flex;align-items:center;justify-content:center;min-width:var(--command-menu-kbd-min-width, 24px);height:var(--command-menu-kbd-height, 22px);padding:var(--command-menu-kbd-padding, 0 6px);border-radius:var(--command-menu-kbd-border-radius, var(--radius, 4px));background-color:var(--command-menu-kbd-background, #f1f5f9);border:var(--command-menu-kbd-border, 1px solid #e2e8f0);color:var(--command-menu-kbd-color, #64748b);font-size:var(--command-menu-kbd-font-size, 11px);font-family:var(--command-menu-kbd-font-family, inherit);font-weight:var(--command-menu-kbd-font-weight, 500);box-shadow:var(--command-menu-kbd-box-shadow, 0 1px 0 #e2e8f0);}"
 };
@@ -10659,7 +10667,7 @@ function CommandMenu(e, t) {
 			be(e), flushSync();
 		}
 	}, wt = comment(), Tt = first_child(wt), Et = (e) => {
-		var t = root_10$17(), i = child(t), a = child(i), c = child(a), C = (e) => {
+		var t = root_10$18(), i = child(t), a = child(i), c = child(a), C = (e) => {
 			var t = comment();
 			snippet(first_child(t), S), append(e, t);
 		}, k = (e) => {
@@ -16858,12 +16866,14 @@ var rest_excludes$59 = new Set([
 	"buttonAriaPressed"
 ]), $$css$120 = {
 	hash: "svelte-94kscb",
-	code: "\n  /* A custom element defaults to `display: inline`, which has no definite\n     width for a percentage to resolve against -- so a component sizing itself\n     with `width: 100%` resolved against the wrong ancestor, and layout depended\n     on the consumer's surrounding markup rather than on the component. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-button-display, block);}"
+	code: "\n  /* A custom element defaults to `display: inline`, which has no definite\n     width for a percentage to resolve against -- so a component sizing itself\n     with `width: 100%` resolved against the wrong ancestor, and layout depended\n     on the consumer's surrounding markup rather than on the component. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-button-display, block);}\n\n  /* In a custom-element consumer the host, not the inner container, is the flex\n     or grid item, so it is the box that has to be allowed to shrink. The inner\n     container's own rule only caps it at the host's width. */:host([shrinkable]) {min-width:0;max-width:100%;}"
 };
 function Button_wc(e, t) {
 	push(t, !0), append_styles$1(e, $$css$120);
 	let n = prop(t, "buttonAriaExpanded", 7), i = prop(t, "buttonAriaLabel", 7), a = prop(t, "buttonAriaPressed", 7), o = /* @__PURE__ */ rest_props(t, rest_excludes$59), s = t.$$host, c = /* @__PURE__ */ user_derived(() => dispatchEvents(s, o));
-	return Button(e, spread_props(() => o, () => get(c), {
+	return user_effect(() => {
+		s.toggleAttribute("shrinkable", t.shrinkable === !0);
+	}), Button(e, spread_props(() => o, () => get(c), {
 		get ariaLabel() {
 			return i();
 		},
@@ -17000,6 +17010,10 @@ customElements.define("sui-button", create_custom_element(Button_wc, {
 		attribute: "full-width",
 		type: "Boolean"
 	},
+	shrinkable: {
+		attribute: "shrinkable",
+		type: "Boolean"
+	},
 	href: {
 		attribute: "href",
 		type: "String"
@@ -19935,7 +19949,7 @@ customElements.define("sui-menu", create_custom_element(Menu_wc, {
 }, ["trigger"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Animations/ModalAnimation.svelte
-var root$54 = /* @__PURE__ */ from_html("<div><!></div>");
+var root$54 = /* @__PURE__ */ from_html("<div class=\"modal-animation\"><!></div>");
 function ModalAnimation(e, t) {
 	push(t, !0);
 	let n = prop(t, "enable", 7, !0), i = prop(t, "align", 7, "bottom"), a = prop(t, "transitionType", 7, "ALL"), o = prop(t, "entryAnimation", 7), s = prop(t, "children", 7), c = prop(t, "testId", 7), l = /* @__PURE__ */ user_derived(() => {
@@ -20143,9 +20157,9 @@ create_custom_element(OverlayAnimation, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/Modal/Modal.svelte
-var root_1$49 = /* @__PURE__ */ from_html("<div role=\"button\" tabindex=\"0\"><!></div>"), root_2$39 = /* @__PURE__ */ from_html("<div><!></div>"), root_3$36 = /* @__PURE__ */ from_html("<div class=\"header-text svelte-lnufm\"> </div>"), root_4$32 = /* @__PURE__ */ from_html("<div class=\"header svelte-lnufm\"><!> <!> <!></div>"), root_5$28 = /* @__PURE__ */ from_html("<div class=\"footer-content svelte-lnufm\"><!></div>"), root_6$25 = /* @__PURE__ */ from_html("<div class=\"footer-secondary-button svelte-lnufm\"><!></div>"), root_7$23 = /* @__PURE__ */ from_html("<div class=\"footer-primary-button svelte-lnufm\"><!></div>"), root_8$22 = /* @__PURE__ */ from_html("<div class=\"footer-content svelte-lnufm\"><div class=\"footer-action-buttons svelte-lnufm\"><!> <!></div></div>"), root_9$17 = /* @__PURE__ */ from_html("<div tabindex=\"-1\"><!> <div class=\"slot-content svelte-lnufm\"><!></div> <!></div>"), $$css$101 = {
+var root_1$49 = /* @__PURE__ */ from_html("<div role=\"button\" tabindex=\"0\" class=\"svelte-lnufm\"><!></div>"), root_2$39 = /* @__PURE__ */ from_html("<div class=\"svelte-lnufm\"><!></div>"), root_3$36 = /* @__PURE__ */ from_html("<div class=\"header-text svelte-lnufm\"> </div>"), root_4$32 = /* @__PURE__ */ from_html("<div class=\"header svelte-lnufm\"><!> <!> <!></div>"), root_5$28 = /* @__PURE__ */ from_html("<div class=\"footer-content svelte-lnufm\"><!></div>"), root_6$25 = /* @__PURE__ */ from_html("<div class=\"footer-secondary-button svelte-lnufm\"><!></div>"), root_7$23 = /* @__PURE__ */ from_html("<div class=\"footer-primary-button svelte-lnufm\"><!></div>"), root_8$22 = /* @__PURE__ */ from_html("<div class=\"footer-content svelte-lnufm\"><div class=\"footer-action-buttons svelte-lnufm\"><!> <!></div></div>"), root_9$17 = /* @__PURE__ */ from_html("<div tabindex=\"-1\"><!> <div class=\"slot-content svelte-lnufm\"><!></div> <!></div>"), root_10$17 = /* @__PURE__ */ from_html("<div><!></div>"), $$css$101 = {
 	hash: "svelte-lnufm",
-	code: ".modal.svelte-lnufm {position:fixed;top:0;bottom:0;left:0;right:0;width:var(--modal-width, 100vw);height:var(--modal-height, 100vh);display:flex;flex-direction:column;z-index:var(--modal-z-index, 15);-webkit-tap-highlight-color:transparent;margin:var(--modal-margin);}.overlay-active.svelte-lnufm {\n    /* Prefer the modal-specific token; fall back to the legacy generic\n       --background-color (kept for backward compatibility), then the default.\n       The generic name collides with app-level --background-color tokens, which\n       silently override the overlay; --modal-overlay-background-color lets a\n       consumer theme the backdrop without that collision. */background-color:var(--modal-overlay-background-color, var(--background-color, #00000066));backdrop-filter:var(--modal-overlay-backdrop-filter, none);-webkit-backdrop-filter:var(--modal-overlay-backdrop-filter, none);pointer-events:auto;}.overlay-inactive.svelte-lnufm {pointer-events:none;}.modal-content.svelte-lnufm {pointer-events:auto;background-color:var(--modal-content-background-color, #ffffff);cursor:auto;display:flex;flex-direction:column;border-radius:var(--modal-border-radius, var(--radius, 4px));overflow:var(--modal-content-overflow, auto);border-top:var(--modal-content-border-top);outline:none;\n    /* Viewport containment for every size class: only .fit-content used to carry\n       a max-height, so a size whose height var is overridden to fit-content (or\n       anything taller than the screen) grew past the viewport and pushed its\n       footer and bottom rounding off-screen. dvh tracks the real visible\n       viewport on mobile; the vh line is the fallback for engines without dvh. */max-height:var(--modal-max-height, calc(100vh - 32px));max-height:var(--modal-max-height, calc(100dvh - 32px));}\n\n  /* The comment this replaced claimed tabindex=\"-1\" meant this never needed a\n     ring because it's \"never in the Tab order itself\" -- true, but beside the\n     point: onMount calls focusEntryPoint(modalContent), which focuses THIS\n     element directly (real DOM focus, not merely reachable via Tab) whenever\n     the modal has no focusable content of its own. That is exactly Sheet's\n     sheet-panel problem, and sheet-panel got the fix this comment said it\n     \"matches\" -- this one didn't. :focus-visible so the trigger click that\n     opens the modal shows nothing new; offset is negative like Sheet's,\n     since a modal can be sized to fill nearly the whole viewport. */.modal-content.svelte-lnufm:focus-visible {outline:var(--modal-content-focus-outline, 2px solid #2563eb);outline-offset:var(--modal-content-focus-outline-offset, -2px);}.slot-content.svelte-lnufm {display:var(--modal-display, flex);\n    /* Flex children default to min-height: auto and refuse to shrink below their\n       content, which defeats the overflow-y scroll once modal-content is\n       height-capped — the content spills instead of scrolling and the footer is\n       pushed out. 0 lets the slot shrink so its own scrollbar engages and the\n       header/footer stay pinned inside the viewport. */min-height:var(--modal-slot-content-min-height, 0);overflow-y:var(--modal-overflow-y, scroll);scrollbar-width:var(--modal-scrollbar-width, none);padding:var(--modal-content-padding, 0);}.slot-content.svelte-lnufm::-webkit-scrollbar {display:none;}.center.svelte-lnufm {justify-content:var(--modal-center-justify-content, center);align-items:var(--modal-center-align-items, center);}.bottom.svelte-lnufm {justify-content:var(--modal-bottom-justify-content, flex-end);align-items:var(--modal-bottom-align-items);}.top.svelte-lnufm {justify-content:var(--modal-top-justify-content, flex-start);align-items:var(--modal-top-align-items);}.small.svelte-lnufm {height:var(--modal-small-height, 20vh);width:var(--modal-small-width);}.medium.svelte-lnufm {height:var(--modal-medium-height, 50vh);width:var(--modal-medium-width);}.large.svelte-lnufm {height:var(--modal-large-height, 80vh);width:var(--modal-large-width);}.fit-content.svelte-lnufm {height:fit-content;max-height:var(--modal-fit-content-max-height, 80vh);}.header.svelte-lnufm {display:flex;background-color:var(--modal-header-background-color, #f6f7f9);padding:var(--modal-header-padding, 18px 20px);border-radius:var(--modal-header-border-radius, 0px);border-bottom:var(--modal-header-border-bottom, none);align-items:var(--modal-header-align-items, center);}.footer-content.svelte-lnufm {display:flex;background-color:var(--modal-footer-background-color, #f6f7f9);padding:var(--modal-footer-padding, 18px 20px);border-radius:var(--modal-footer-border-radius, 0px);border-top:var(--modal-footer-border-top, none);justify-content:var(--modal-footer-justify-content, none);}.footer-action-buttons.svelte-lnufm {display:flex;gap:var(--modal-footer-gap, 0px);width:var(--modal-footer-action-buttons-width, fit-content);}.footer-secondary-button.svelte-lnufm {--button-max-height: var(--modal-footer-secondary-button-max-height);--button-max-width: var(--modal-footer-secondary-button-max-width);--button-font-family: var(--modal-footer-secondary-button-font-family);--button-font-weight: var(--modal-footer-secondary-button-font-weight, 500);--button-font-size: var(--modal-footer-secondary-button-font-size, 14px);--button-color: var(--modal-footer-secondary-button-color, #3a4550);--button-text-color: var(--modal-footer-secondary-button-text-color, white);--button-height: var(--modal-footer-secondary-button-height, fit-content);--button-padding: var(--modal-footer-secondary-button-padding, 16px);--button-margin: var(--modal-footer-secondary-button-margin);--button-border-radius: var(--modal-footer-secondary-button-border-radius, var(--radius, 4px));--button-width: var(--modal-footer-secondary-button-width, fit-content);--cursor: var(--modal-footer-secondary-button-cursor, pointer);--opacity: var(--modal-footer-secondary-button-opacity, 1);--button-border: var(--modal-footer-secondary-button-border, none);--disabled-background-color: var(\n      --modal-footer-secondary-button-disabled-color,\n      var(--modal-footer-secondary-button-color, #3a4550)\n    );--disabled-text-color: var(\n      --modal-footer-secondary-button-disabled-text-color,\n      var(--modal-footer-secondary-button-text-color, white)\n    );--disabled-border: var(\n      --modal-footer-secondary-button-disabled-border,\n      var(--modal-footer-secondary-button-border, none)\n    );--disabled-opacity: var(--modal-footer-secondary-button-disabled-opacity, 0.4);--button-justify-content: var(--modal-footer-secondary-button-justify-content, center);--button-content-flex-direction: var(\n      --modal-footer-secondary-button-content-flex-direction,\n      row\n    );--button-content-gap: var(--modal-footer-secondary-button-content-gap, 16px);--button-visibility: var(--modal-footer-secondary-button-visibility, visible);--button-box-shadow: var(--modal-footer-secondary-button-box-shadow, none);order:var(--modal-secondary-button-order, none);flex:var(--modal-footer-secondary-button-flex-value, none);}.footer-primary-button.svelte-lnufm {--button-max-height: var(--modal-footer-primary-button-max-height);--button-max-width: var(--modal-footer-primary-button-max-width);--button-font-family: var(--modal-footer-primary-button-font-family);--button-font-weight: var(--modal-footer-primary-button-font-weight, 500);--button-font-size: var(--modal-footer-primary-button-font-size, 14px);--button-color: var(--modal-footer-primary-button-color, #3a4550);--button-text-color: var(--modal-footer-primary-button-text-color, white);--button-height: var(--modal-footer-primary-button-height, fit-content);--button-padding: var(--modal-footer-primary-button-padding, 16px);--button-margin: var(--modal-footer-primary-button-margin);--button-border-radius: var(--modal-footer-primary-button-border-radius, var(--radius, 4px));--button-width: var(--modal-footer-primary-button-width, fit-content);--cursor: var(--modal-footer-primary-button-cursor, pointer);--opacity: var(--modal-footer-primary-button-opacity, 1);--button-border: var(--modal-footer-primary-button-border, none);--disabled-background-color: var(\n      --modal-footer-primary-button-disabled-color,\n      var(--modal-footer-primary-button-color, #3a4550)\n    );--disabled-text-color: var(\n      --modal-footer-primary-button-disabled-text-color,\n      var(--modal-footer-primary-button-text-color, white)\n    );--disabled-border: var(\n      --modal-footer-primary-button-disabled-border,\n      var(--modal-footer-primary-button-border, none)\n    );--disabled-opacity: var(--modal-footer-primary-button-disabled-opacity, 0.4);--button-justify-content: var(--modal-footer-primary-button-justify-content, center);--button-content-flex-direction: var(--modal-footer-primary-button-content-flex-direction, row);--button-content-gap: var(--modal-footer-primary-button-content-gap, 16px);--button-visibility: var(--modal-footer-primary-button-visibility, visible);--button-box-shadow: var(--modal-footer-primary-button-box-shadow, none);order:var(--modal-primary-button-order, none);flex:var(--modal-footer-primary-button-flex-value, none);}.header-text.svelte-lnufm {display:flex;align-items:center;flex:1;font-size:var(--header-text-size, 16px);font-weight:var(--modal-header-text-weight, inherit);line-height:var(--modal-header-text-line-height, inherit);letter-spacing:var(--modal-header-text-letter-spacing, inherit);}\n\n  /* The header images render through the Img component (inline svg or img), so\n     these classes ride on Img's element — match them via :global under the\n     scoped .header to keep the sizing contract. */.header.svelte-lnufm .header-left-img,\n  .header.svelte-lnufm .header-right-img {padding-top:var(--header-img-top-padding, 5px);cursor:pointer;}.header.svelte-lnufm .header-left-img {margin:var(--header-left-image-margin, 0px 18px 0px 0px);width:var(--header-left-image-width, 25px);height:var(--header-left-image-height, 25px);}.header.svelte-lnufm .header-right-img {width:var(--header-right-image-width, 25px);height:var(--header-right-image-height, 25px);padding:var(--header-right-image-padding);}"
+	code: ".modal.svelte-lnufm {position:fixed;top:0;bottom:0;left:0;right:0;width:var(--modal-width, 100vw);height:var(--modal-height, 100vh);display:flex;flex-direction:column;z-index:var(--modal-z-index, 15);-webkit-tap-highlight-color:transparent;margin:var(--modal-margin);}.overlay-active.svelte-lnufm {\n    /* Prefer the modal-specific token; fall back to the legacy generic\n       --background-color (kept for backward compatibility), then the default.\n       The generic name collides with app-level --background-color tokens, which\n       silently override the overlay; --modal-overlay-background-color lets a\n       consumer theme the backdrop without that collision. */background-color:var(--modal-overlay-background-color, var(--background-color, #00000066));backdrop-filter:var(--modal-overlay-backdrop-filter, none);-webkit-backdrop-filter:var(--modal-overlay-backdrop-filter, none);pointer-events:auto;}.overlay-inactive.svelte-lnufm {pointer-events:none;}.modal-content.svelte-lnufm {pointer-events:auto;background-color:var(--modal-content-background-color, #ffffff);cursor:auto;display:flex;flex-direction:column;border-radius:var(--modal-border-radius, var(--radius, 4px));overflow:var(--modal-content-overflow, auto);border-top:var(--modal-content-border-top);outline:none;\n    /* Viewport containment for every size class: only .fit-content used to carry\n       a max-height, so a size whose height var is overridden to fit-content (or\n       anything taller than the screen) grew past the viewport and pushed its\n       footer and bottom rounding off-screen. dvh tracks the real visible\n       viewport on mobile; the vh line is the fallback for engines without dvh. */max-height:var(--modal-max-height, calc(100vh - var(--modal-viewport-gutter, 32px)));max-height:var(--modal-max-height, calc(100dvh - var(--modal-viewport-gutter, 32px)));}\n\n  /* The width rules below are wrapped in :where() so they carry no specificity.\n     An app that already styles .modal-content or .footer-action-buttons wrote\n     that rule before these existed, and Svelte's scope class would otherwise\n     make these tie it or beat it whatever the load order. Svelte compiles\n     :where(.x) to :where(.x.svelte-hash), which stays at zero.\n\n     The ceiling is chosen per alignment on .modal (see .center/.top/.bottom) and\n     only read here. It caps whatever width a size token or a wide child asks for\n     instead of wrapping that token in min(): a keyword such as fit-content or\n     auto makes min() invalid and silently drops the width.\n     The \"+ 0%\" is load-bearing. A max-width that contains a percentage is\n     ignored while the shrink-to-fit transition wrapper works out its own width,\n     so the cap does not narrow the box a percentage size token resolves\n     against: calc(100% - 32px) stays 343px on a 375px phone instead of becoming\n     311px. Laid out, it is the same length. \"none\" makes the calc invalid, which\n     leaves max-width unset, i.e. no cap, as intended. */:where(.modal-content.svelte-lnufm) {max-width:calc(var(--_modal-max-width, 100vw) + 0%);}\n\n  /* The wrapper is sized from the uncapped width, so it can be wider than the\n     capped panel. It stays inside the overlay (or the ceiling, when an embedded\n     overlay is narrower) and lets clicks in the strip beside the panel reach the\n     overlay. The panel is inset by half of what the wrapper has beyond the\n     ceiling, which centres a panel that fills the ceiling; a narrower one is\n     offset by the same amount. Below the ceiling there is no inset and the panel\n     keeps its position at the start of the wrapper, as it always had. */:where(.modal.svelte-lnufm > .modal-animation) {pointer-events:none;max-width:max(100%, var(--_modal-max-width, 100vw));}:where(.modal-animation > .modal-content.svelte-lnufm) {margin-inline-start:max(0px, calc((100% - var(--_modal-max-width, 100vw)) / 2));}\n\n  /* The comment this replaced claimed tabindex=\"-1\" meant this never needed a\n     ring because it's \"never in the Tab order itself\" -- true, but beside the\n     point: onMount calls focusEntryPoint(modalContent), which focuses THIS\n     element directly (real DOM focus, not merely reachable via Tab) whenever\n     the modal has no focusable content of its own. That is exactly Sheet's\n     sheet-panel problem, and sheet-panel got the fix this comment said it\n     \"matches\" -- this one didn't. :focus-visible so the trigger click that\n     opens the modal shows nothing new; offset is negative like Sheet's,\n     since a modal can be sized to fill nearly the whole viewport. */.modal-content.svelte-lnufm:focus-visible {outline:var(--modal-content-focus-outline, 2px solid #2563eb);outline-offset:var(--modal-content-focus-outline-offset, -2px);}.slot-content.svelte-lnufm {display:var(--modal-display, flex);\n    /* Flex children default to min-height: auto and refuse to shrink below their\n       content, which defeats the overflow-y scroll once modal-content is\n       height-capped — the content spills instead of scrolling and the footer is\n       pushed out. 0 lets the slot shrink so its own scrollbar engages and the\n       header/footer stay pinned inside the viewport. */min-height:var(--modal-slot-content-min-height, 0);overflow-y:var(--modal-overflow-y, scroll);scrollbar-width:var(--modal-scrollbar-width, none);padding:var(--modal-content-padding, 0);}.slot-content.svelte-lnufm::-webkit-scrollbar {display:none;}\n\n  /* A dialog keeps a gutter either side; a top or bottom sheet is edge to edge,\n     so only the centred ceiling subtracts one. Each alignment owns its token so\n     an app-wide default for dialogs never reshapes a bottom sheet. */.center.svelte-lnufm {justify-content:var(--modal-center-justify-content, center);align-items:var(--modal-center-align-items, center);--_modal-max-width: var(\n      --modal-center-max-width,\n      calc(100vw - var(--modal-viewport-gutter, 32px))\n    );}.bottom.svelte-lnufm {justify-content:var(--modal-bottom-justify-content, flex-end);align-items:var(--modal-bottom-align-items);--_modal-max-width: var(--modal-bottom-max-width, 100vw);}.top.svelte-lnufm {justify-content:var(--modal-top-justify-content, flex-start);align-items:var(--modal-top-align-items);--_modal-max-width: var(--modal-top-max-width, 100vw);}.small.svelte-lnufm {height:var(--modal-small-height, 20vh);width:var(--modal-small-width);}.medium.svelte-lnufm {height:var(--modal-medium-height, 50vh);width:var(--modal-medium-width);}.large.svelte-lnufm {height:var(--modal-large-height, 80vh);width:var(--modal-large-width);}.fit-content.svelte-lnufm {height:fit-content;max-height:var(--modal-fit-content-max-height, 80vh);}.header.svelte-lnufm {display:flex;background-color:var(--modal-header-background-color, #f6f7f9);padding:var(--modal-header-padding, 18px 20px);border-radius:var(--modal-header-border-radius, 0px);border-bottom:var(--modal-header-border-bottom, none);align-items:var(--modal-header-align-items, center);}.footer-content.svelte-lnufm {display:flex;background-color:var(--modal-footer-background-color, #f6f7f9);padding:var(--modal-footer-padding, 18px 20px);border-radius:var(--modal-footer-border-radius, 0px);border-top:var(--modal-footer-border-top, none);justify-content:var(--modal-footer-justify-content, none);}.footer-action-buttons.svelte-lnufm {display:flex;gap:var(--modal-footer-gap, 0px);width:var(--modal-footer-action-buttons-width, fit-content);}\n\n  /* Zero specificity for the same reason as the width rules above: an app that\n     already wraps and aligns this row keeps doing so. */:where(.footer-action-buttons.svelte-lnufm) {flex-wrap:wrap;justify-content:var(--modal-footer-action-buttons-justify-content, flex-start);}.footer-secondary-button.svelte-lnufm {--button-max-height: var(--modal-footer-secondary-button-max-height);--button-max-width: var(--modal-footer-secondary-button-max-width);--button-font-family: var(--modal-footer-secondary-button-font-family);--button-font-weight: var(--modal-footer-secondary-button-font-weight, 500);--button-font-size: var(--modal-footer-secondary-button-font-size, 14px);--button-color: var(--modal-footer-secondary-button-color, #3a4550);--button-text-color: var(--modal-footer-secondary-button-text-color, white);--button-height: var(--modal-footer-secondary-button-height, fit-content);--button-padding: var(--modal-footer-secondary-button-padding, 16px);--button-margin: var(--modal-footer-secondary-button-margin);--button-border-radius: var(--modal-footer-secondary-button-border-radius, var(--radius, 4px));--button-width: var(--modal-footer-secondary-button-width, fit-content);--cursor: var(--modal-footer-secondary-button-cursor, pointer);--opacity: var(--modal-footer-secondary-button-opacity, 1);--button-border: var(--modal-footer-secondary-button-border, none);--disabled-background-color: var(\n      --modal-footer-secondary-button-disabled-color,\n      var(--modal-footer-secondary-button-color, #3a4550)\n    );--disabled-text-color: var(\n      --modal-footer-secondary-button-disabled-text-color,\n      var(--modal-footer-secondary-button-text-color, white)\n    );--disabled-border: var(\n      --modal-footer-secondary-button-disabled-border,\n      var(--modal-footer-secondary-button-border, none)\n    );--disabled-opacity: var(--modal-footer-secondary-button-disabled-opacity, 0.4);--button-justify-content: var(--modal-footer-secondary-button-justify-content, center);--button-content-flex-direction: var(\n      --modal-footer-secondary-button-content-flex-direction,\n      row\n    );--button-content-gap: var(--modal-footer-secondary-button-content-gap, 16px);--button-visibility: var(--modal-footer-secondary-button-visibility, visible);--button-box-shadow: var(--modal-footer-secondary-button-box-shadow, none);order:var(--modal-secondary-button-order, none);flex:var(--modal-footer-secondary-button-flex-value, none);}.footer-primary-button.svelte-lnufm {--button-max-height: var(--modal-footer-primary-button-max-height);--button-max-width: var(--modal-footer-primary-button-max-width);--button-font-family: var(--modal-footer-primary-button-font-family);--button-font-weight: var(--modal-footer-primary-button-font-weight, 500);--button-font-size: var(--modal-footer-primary-button-font-size, 14px);--button-color: var(--modal-footer-primary-button-color, #3a4550);--button-text-color: var(--modal-footer-primary-button-text-color, white);--button-height: var(--modal-footer-primary-button-height, fit-content);--button-padding: var(--modal-footer-primary-button-padding, 16px);--button-margin: var(--modal-footer-primary-button-margin);--button-border-radius: var(--modal-footer-primary-button-border-radius, var(--radius, 4px));--button-width: var(--modal-footer-primary-button-width, fit-content);--cursor: var(--modal-footer-primary-button-cursor, pointer);--opacity: var(--modal-footer-primary-button-opacity, 1);--button-border: var(--modal-footer-primary-button-border, none);--disabled-background-color: var(\n      --modal-footer-primary-button-disabled-color,\n      var(--modal-footer-primary-button-color, #3a4550)\n    );--disabled-text-color: var(\n      --modal-footer-primary-button-disabled-text-color,\n      var(--modal-footer-primary-button-text-color, white)\n    );--disabled-border: var(\n      --modal-footer-primary-button-disabled-border,\n      var(--modal-footer-primary-button-border, none)\n    );--disabled-opacity: var(--modal-footer-primary-button-disabled-opacity, 0.4);--button-justify-content: var(--modal-footer-primary-button-justify-content, center);--button-content-flex-direction: var(--modal-footer-primary-button-content-flex-direction, row);--button-content-gap: var(--modal-footer-primary-button-content-gap, 16px);--button-visibility: var(--modal-footer-primary-button-visibility, visible);--button-box-shadow: var(--modal-footer-primary-button-box-shadow, none);order:var(--modal-primary-button-order, none);flex:var(--modal-footer-primary-button-flex-value, none);}.header-text.svelte-lnufm {display:flex;align-items:center;flex:1;font-size:var(--header-text-size, 16px);font-weight:var(--modal-header-text-weight, inherit);line-height:var(--modal-header-text-line-height, inherit);letter-spacing:var(--modal-header-text-letter-spacing, inherit);}\n\n  /* The header images render through the Img component (inline svg or img), so\n     these classes ride on Img's element — match them via :global under the\n     scoped .header to keep the sizing contract. */.header.svelte-lnufm .header-left-img,\n  .header.svelte-lnufm .header-right-img {padding-top:var(--header-img-top-padding, 5px);cursor:pointer;}.header.svelte-lnufm .header-left-img {margin:var(--header-left-image-margin, 0px 18px 0px 0px);width:var(--header-left-image-width, 25px);height:var(--header-left-image-height, 25px);}.header.svelte-lnufm .header-right-img {width:var(--header-right-image-width, 25px);height:var(--header-right-image-height, 25px);padding:var(--header-right-image-padding);}"
 };
 function Modal(e, t) {
 	push(t, !0), append_styles$1(e, $$css$101);
@@ -20413,7 +20427,7 @@ function Modal(e, t) {
 				return dt();
 			},
 			children: (e, t) => {
-				var a = root_2$39();
+				var a = root_10$17();
 				ModalAnimation(child(a), {
 					get enable() {
 						return f();

package/package.json

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