@juspay/svelte-ui-components 4.40.1 → 4.41.0

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-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: {},
@@ -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"

package/package.json

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