@juspay/svelte-ui-components 4.41.0 → 4.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/Animations/ModalAnimation.svelte +4 -0
  2. package/dist/Modal/Modal.svelte +54 -2
  3. package/dist-wc/index.js +10 -10
  4. package/package.json +1 -1
package/dist/Animations/ModalAnimation.svelte CHANGED
@@ -133,6 +133,7 @@
133
133
  {#if enable}
134
134
  {#if useFlyAnimation && useOutTransition}
135
135
  <div
136
+ class="modal-animation"
136
137
  in:tokenizedFly|global={flyInParams}
137
138
  out:tokenizedFly|global={flyOutParams}
138
139
  data-pw={typeof testId === 'string' ? testId : null}
@@ -142,6 +143,7 @@
142
143
  </div>
143
144
  {:else if useFlyAnimation}
144
145
  <div
146
+ class="modal-animation"
145
147
  in:tokenizedFly|global={flyInParams}
146
148
  data-pw={typeof testId === 'string' ? testId : null}
147
149
  testID={typeof testId === 'string' ? testId : null}
@@ -150,6 +152,7 @@
150
152
  </div>
151
153
  {:else if useOutTransition}
152
154
  <div
155
+ class="modal-animation"
153
156
  in:tokenizedFly|global={fadeInParams}
154
157
  out:tokenizedFly|global={fadeOutParams}
155
158
  data-pw={typeof testId === 'string' ? testId : null}
@@ -159,6 +162,7 @@
159
162
  </div>
160
163
  {:else}
161
164
  <div
165
+ class="modal-animation"
162
166
  in:tokenizedFly|global={fadeInParams}
163
167
  data-pw={typeof testId === 'string' ? testId : null}
164
168
  testID={typeof testId === 'string' ? testId : null}
package/dist/Modal/Modal.svelte CHANGED
@@ -465,8 +465,44 @@
465
465
  anything taller than the screen) grew past the viewport and pushed its
466
466
  footer and bottom rounding off-screen. dvh tracks the real visible
467
467
  viewport on mobile; the vh line is the fallback for engines without dvh. */
468
- max-height: var(--modal-max-height, calc(100vh - 32px));
469
- max-height: var(--modal-max-height, calc(100dvh - 32px));
468
+ max-height: var(--modal-max-height, calc(100vh - var(--modal-viewport-gutter, 32px)));
469
+ max-height: var(--modal-max-height, calc(100dvh - var(--modal-viewport-gutter, 32px)));
470
+ }
471
+
472
+ /* The width rules below are wrapped in :where() so they carry no specificity.
473
+ An app that already styles .modal-content or .footer-action-buttons wrote
474
+ that rule before these existed, and Svelte's scope class would otherwise
475
+ make these tie it or beat it whatever the load order. Svelte compiles
476
+ :where(.x) to :where(.x.svelte-hash), which stays at zero.
477
+
478
+ The ceiling is chosen per alignment on .modal (see .center/.top/.bottom) and
479
+ only read here. It caps whatever width a size token or a wide child asks for
480
+ instead of wrapping that token in min(): a keyword such as fit-content or
481
+ auto makes min() invalid and silently drops the width.
482
+ The "+ 0%" is load-bearing. A max-width that contains a percentage is
483
+ ignored while the shrink-to-fit transition wrapper works out its own width,
484
+ so the cap does not narrow the box a percentage size token resolves
485
+ against: calc(100% - 32px) stays 343px on a 375px phone instead of becoming
486
+ 311px. Laid out, it is the same length. "none" makes the calc invalid, which
487
+ leaves max-width unset, i.e. no cap, as intended. */
488
+ :where(.modal-content) {
489
+ max-width: calc(var(--_modal-max-width, 100vw) + 0%);
490
+ }
491
+
492
+ /* The wrapper is sized from the uncapped width, so it can be wider than the
493
+ capped panel. It stays inside the overlay (or the ceiling, when an embedded
494
+ overlay is narrower) and lets clicks in the strip beside the panel reach the
495
+ overlay. The panel is inset by half of what the wrapper has beyond the
496
+ ceiling, which centres a panel that fills the ceiling; a narrower one is
497
+ offset by the same amount. Below the ceiling there is no inset and the panel
498
+ keeps its position at the start of the wrapper, as it always had. */
499
+ :where(.modal > :global(.modal-animation)) {
500
+ pointer-events: none;
501
+ max-width: max(100%, var(--_modal-max-width, 100vw));
502
+ }
503
+
504
+ :where(:global(.modal-animation) > .modal-content) {
505
+ margin-inline-start: max(0px, calc((100% - var(--_modal-max-width, 100vw)) / 2));
470
506
  }
471
507
 
472
508
  /* The comment this replaced claimed tabindex="-1" meant this never needed a
@@ -500,19 +536,28 @@
500
536
  display: none;
501
537
  }
502
538
 
539
+ /* A dialog keeps a gutter either side; a top or bottom sheet is edge to edge,
540
+ so only the centred ceiling subtracts one. Each alignment owns its token so
541
+ an app-wide default for dialogs never reshapes a bottom sheet. */
503
542
  .center {
504
543
  justify-content: var(--modal-center-justify-content, center);
505
544
  align-items: var(--modal-center-align-items, center);
545
+ --_modal-max-width: var(
546
+ --modal-center-max-width,
547
+ calc(100vw - var(--modal-viewport-gutter, 32px))
548
+ );
506
549
  }
507
550
 
508
551
  .bottom {
509
552
  justify-content: var(--modal-bottom-justify-content, flex-end);
510
553
  align-items: var(--modal-bottom-align-items);
554
+ --_modal-max-width: var(--modal-bottom-max-width, 100vw);
511
555
  }
512
556
 
513
557
  .top {
514
558
  justify-content: var(--modal-top-justify-content, flex-start);
515
559
  align-items: var(--modal-top-align-items);
560
+ --_modal-max-width: var(--modal-top-max-width, 100vw);
516
561
  }
517
562
 
518
563
  .small {
@@ -559,6 +604,13 @@
559
604
  width: var(--modal-footer-action-buttons-width, fit-content);
560
605
  }
561
606
 
607
+ /* Zero specificity for the same reason as the width rules above: an app that
608
+ already wraps and aligns this row keeps doing so. */
609
+ :where(.footer-action-buttons) {
610
+ flex-wrap: wrap;
611
+ justify-content: var(--modal-footer-action-buttons-justify-content, flex-start);
612
+ }
613
+
562
614
  .footer-secondary-button {
563
615
  --button-max-height: var(--modal-footer-secondary-button-max-height);
564
616
  --button-max-width: var(--modal-footer-secondary-button-max-width);
package/dist-wc/index.js CHANGED
@@ -6995,7 +6995,7 @@ function getActiveElement(e) {
6995
6995
  }
6996
6996
  //#endregion
6997
6997
  //#region src/lib/Input/Input.svelte
6998
- 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 = {
6998
+ 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 = {
6999
6999
  hash: "svelte-1h0c2oe",
7000
7000
  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);}"
7001
7001
  };
@@ -7550,7 +7550,7 @@ function Input(e, t) {
7550
7550
  get(ln) || get(un) ? e(En) : e(Dn, -1);
7551
7551
  });
7552
7552
  var On = sibling(Tn, 2), kn = (e) => {
7553
- var t = root_10$19(), n = child(t, !0);
7553
+ var t = root_10$20(), n = child(t, !0);
7554
7554
  reset(t), template_effect(() => {
7555
7555
  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());
7556
7556
  }), append(e, t);
@@ -9170,7 +9170,7 @@ customElements.define("sui-color-picker", create_custom_element(ColorPicker_wc,
9170
9170
  }, [], [], { mode: "open" }));
9171
9171
  //#endregion
9172
9172
  //#region src/lib/Combobox/Combobox.svelte
9173
- 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 = {
9173
+ 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 = {
9174
9174
  hash: "svelte-178p70i",
9175
9175
  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);}"
9176
9176
  };
@@ -9645,7 +9645,7 @@ function Combobox(e, t) {
9645
9645
  typeof Me() == "function" && e(Pn);
9646
9646
  }), reset(Tn);
9647
9647
  var Fn = sibling(Tn, 2), In = (e) => {
9648
- var t = root_10$18(), n = child(t), i = (e) => {
9648
+ var t = root_10$19(), n = child(t), i = (e) => {
9649
9649
  var t = root_2$63();
9650
9650
  snippet(child(t), Re), reset(t), append(e, t);
9651
9651
  };
@@ -10429,7 +10429,7 @@ function tokenizedFly(e, t) {
10429
10429
  }
10430
10430
  //#endregion
10431
10431
  //#region src/lib/assets/search.svg?raw
10432
- 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 = {
10432
+ 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 = {
10433
10433
  hash: "svelte-rk55q",
10434
10434
  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);}"
10435
10435
  };
@@ -10667,7 +10667,7 @@ function CommandMenu(e, t) {
10667
10667
  be(e), flushSync();
10668
10668
  }
10669
10669
  }, wt = comment(), Tt = first_child(wt), Et = (e) => {
10670
- var t = root_10$17(), i = child(t), a = child(i), c = child(a), C = (e) => {
10670
+ var t = root_10$18(), i = child(t), a = child(i), c = child(a), C = (e) => {
10671
10671
  var t = comment();
10672
10672
  snippet(first_child(t), S), append(e, t);
10673
10673
  }, k = (e) => {
@@ -19949,7 +19949,7 @@ customElements.define("sui-menu", create_custom_element(Menu_wc, {
19949
19949
  }, ["trigger"], [], { mode: "open" }));
19950
19950
  //#endregion
19951
19951
  //#region src/lib/Animations/ModalAnimation.svelte
19952
- var root$54 = /* @__PURE__ */ from_html("<div><!></div>");
19952
+ var root$54 = /* @__PURE__ */ from_html("<div class=\"modal-animation\"><!></div>");
19953
19953
  function ModalAnimation(e, t) {
19954
19954
  push(t, !0);
19955
19955
  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(() => {
@@ -20157,9 +20157,9 @@ create_custom_element(OverlayAnimation, {
20157
20157
  }, [], [], { mode: "open" });
20158
20158
  //#endregion
20159
20159
  //#region src/lib/Modal/Modal.svelte
20160
- 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 = {
20160
+ 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 = {
20161
20161
  hash: "svelte-lnufm",
20162
- 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);}"
20162
+ 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);}"
20163
20163
  };
20164
20164
  function Modal(e, t) {
20165
20165
  push(t, !0), append_styles$1(e, $$css$101);
@@ -20427,7 +20427,7 @@ function Modal(e, t) {
20427
20427
  return dt();
20428
20428
  },
20429
20429
  children: (e, t) => {
20430
- var a = root_2$39();
20430
+ var a = root_10$17();
20431
20431
  ModalAnimation(child(a), {
20432
20432
  get enable() {
20433
20433
  return f();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "4.41.0",
3
+ "version": "4.42.0",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",