@juspay/svelte-ui-components 4.39.0 → 4.40.1

package/dist/Calendar/Calendar.svelte

@@ -464,10 +464,15 @@
      columns the fixed-width cells sat centred inside wider tracks, leaving
      horizontal gaps between days — which broke the range highlight into
      disconnected boxes instead of one continuous pill. The day-name header must
-     use the same track sizing so it stays aligned with the day grid below. */
+     use the same track sizing so it stays aligned with the day grid below.
+
+     A host that wants the grid to fill a container sets both
+     --calendar-grid-columns and --calendar-cell-width: fluid columns with the
+     default fixed-width cells bring those gaps back, so the cells must be told
+     to fill their tracks too. */
   .day-names {
     display: grid;
-    grid-template-columns: repeat(7, var(--calendar-cell-size, 36px));
+    grid-template-columns: var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));
     justify-content: center;
     text-align: center;
   }
@@ -481,7 +486,7 @@
 
   .grid {
     display: grid;
-    grid-template-columns: repeat(7, var(--calendar-cell-size, 36px));
+    grid-template-columns: var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));
     justify-content: center;
     row-gap: 2px;
   }
@@ -490,7 +495,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--calendar-cell-size, 36px);
+    width: var(--calendar-cell-width, var(--calendar-cell-size, 36px));
     height: var(--calendar-cell-size, 36px);
     font-family: inherit;
     font-size: var(--calendar-cell-font-size, 14px);

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -1482,7 +1482,7 @@
 
   .drp-root {
     position: relative;
-    display: inline-block;
+    display: var(--drp-root-display, inline-block);
   }
 
   /* ── Trigger wrapper ── */

package/dist/Table/Table.svelte

@@ -1779,10 +1779,21 @@
     font-variant-numeric: tabular-nums;
   }
 
+  /* The outer row wraps, so the controls row has to as well: in a container
+     narrower than the select and stepper need (a Modal at phone width) the
+     footer would clip Next under .table-container's overflow. The stepper
+     wraps too, because moving the select to its own line is not enough when
+     the stepper alone is wider than the host. Wrapped lines start-align, like
+     the outer row's. Nothing changes while the controls fit on one line. */
   .table-paginator-controls {
     display: flex;
     align-items: center;
     gap: var(--table-paginator-gap, 12px);
+    flex-wrap: wrap;
+  }
+
+  .table-paginator-controls :global(.pagination) {
+    flex-wrap: wrap;
   }
 
   .table-paginator-size {

package/dist-wc/index.js

@@ -5647,7 +5647,7 @@ var inited$1 = !1, SvelteDate = class e extends Date {
 	}
 }, chevron_left_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", chevron_right_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$104 = /* @__PURE__ */ from_html("<div class=\"day-name svelte-kboul8\"> </div>"), root_1$92 = /* @__PURE__ */ from_html("<button type=\"button\"> </button>"), root_2$72 = /* @__PURE__ */ from_html("<span class=\"cell outside-month svelte-kboul8\"> </span>"), root_3$64 = /* @__PURE__ */ from_html("<div role=\"application\" aria-label=\"Calendar\"><div class=\"header svelte-kboul8\"><div class=\"nav-button nav-prev svelte-kboul8\"><!></div> <span class=\"header-label svelte-kboul8\"> </span> <div class=\"nav-button nav-next svelte-kboul8\"><!></div></div> <div class=\"day-names svelte-kboul8\"></div> <div class=\"grid svelte-kboul8\" role=\"grid\"></div></div>"), $$css$191 = {
 	hash: "svelte-kboul8",
-	code: ".calendar.svelte-kboul8 {font-family:var(--calendar-font-family, inherit);width:var(--calendar-width, 280px);padding:var(--calendar-padding, 16px);background-color:var(--calendar-background, #ffffff);border:var(--calendar-border, 1px solid #e0e0e0);border-radius:var(--calendar-border-radius, var(--radius, 4px));box-shadow:var(--calendar-box-shadow, none);box-sizing:border-box;user-select:none;}.header.svelte-kboul8 {display:var(--calendar-header-display, flex);align-items:center;justify-content:space-between;margin-bottom:var(--calendar-header-margin-bottom, 12px);}.header-label.svelte-kboul8 {font-size:var(--calendar-header-font-size, 16px);font-weight:var(--calendar-header-font-weight, 600);color:var(--calendar-header-color, #000000);text-transform:capitalize;}.nav-button.svelte-kboul8 {display:flex;align-items:center;justify-content:center;--button-width: var(--calendar-nav-button-size, 32px);--button-height: var(--calendar-nav-button-size, 32px);--button-border: none;--button-color: transparent;--button-border-radius: var(--calendar-nav-button-border-radius, var(--radius, 4px));--button-text-color: var(--calendar-nav-button-color, #666666);--button-padding: 0;--button-hover-color: var(--calendar-nav-button-hover-background, #f0f0f0);}\n\n  /* Size the columns to the cell, not 1fr, and centre the whole grid. With 1fr\n     columns the fixed-width cells sat centred inside wider tracks, leaving\n     horizontal gaps between days — which broke the range highlight into\n     disconnected boxes instead of one continuous pill. The day-name header must\n     use the same track sizing so it stays aligned with the day grid below. */.day-names.svelte-kboul8 {display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size, 36px));justify-content:center;text-align:center;}.day-name.svelte-kboul8 {font-size:var(--calendar-day-name-font-size, 12px);font-weight:var(--calendar-day-name-font-weight, 600);color:var(--calendar-day-name-color, #595959);padding:var(--calendar-day-name-padding, 4px 0);}.grid.svelte-kboul8 {display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size, 36px));justify-content:center;row-gap:2px;}.cell.svelte-kboul8 {display:flex;align-items:center;justify-content:center;width:var(--calendar-cell-size, 36px);height:var(--calendar-cell-size, 36px);font-family:inherit;font-size:var(--calendar-cell-font-size, 14px);border-radius:var(--calendar-cell-border-radius, 50%);color:var(--calendar-cell-color, #000000);border:none;background:none;cursor:pointer;padding:0;outline:none;}.cell.svelte-kboul8:hover:not(.disabled, .outside-month, .selected, .range-start, .range-end) {background-color:var(--calendar-cell-hover-background, #f0f0f0);}.cell.svelte-kboul8:focus-visible {outline:2px solid var(--calendar-focus-ring-color, #000000);outline-offset:-2px;}.today.svelte-kboul8 {border:var(--calendar-today-border, 1px solid #000000);font-weight:var(--calendar-today-font-weight, 700);}.selected.svelte-kboul8 {background-color:var(--calendar-selected-background, #000000);color:var(--calendar-selected-color, #ffffff);}.range-start.svelte-kboul8 {background-color:var(--calendar-range-start-background, #000000);color:var(--calendar-range-start-color, #ffffff);border-radius:50% 0 0 50%;}.range-end.svelte-kboul8 {background-color:var(--calendar-range-end-background, #000000);color:var(--calendar-range-end-color, #ffffff);border-radius:0 50% 50% 0;}.range-start.range-end.svelte-kboul8 {border-radius:var(--calendar-cell-border-radius, 50%);}.in-range.svelte-kboul8 {background-color:var(--calendar-range-background, #e8e8e8);border-radius:0;}\n\n  /* #cccccc (1.61:1 on white) read as blank space, not as a disabled digit --\n     disabled controls are contrast-exempt under WCAG 1.4.3, but the demo's own\n     disabledDates run (10th-15th) is information the user must be able to read,\n     not just infer. #949494 lands near the 3:1 floor WCAG 1.4.11 uses elsewhere\n     for \"must stay perceivable\" content, while staying well short of the 4.5:1\n     enabled-text weight so disabled still reads as visually recessive. */.disabled.svelte-kboul8 {color:var(--calendar-disabled-color, #949494);cursor:var(--calendar-disabled-cursor, not-allowed);}.outside-month.svelte-kboul8 {color:var(--calendar-outside-month-color, #6b7280);cursor:default;}"
+	code: ".calendar.svelte-kboul8 {font-family:var(--calendar-font-family, inherit);width:var(--calendar-width, 280px);padding:var(--calendar-padding, 16px);background-color:var(--calendar-background, #ffffff);border:var(--calendar-border, 1px solid #e0e0e0);border-radius:var(--calendar-border-radius, var(--radius, 4px));box-shadow:var(--calendar-box-shadow, none);box-sizing:border-box;user-select:none;}.header.svelte-kboul8 {display:var(--calendar-header-display, flex);align-items:center;justify-content:space-between;margin-bottom:var(--calendar-header-margin-bottom, 12px);}.header-label.svelte-kboul8 {font-size:var(--calendar-header-font-size, 16px);font-weight:var(--calendar-header-font-weight, 600);color:var(--calendar-header-color, #000000);text-transform:capitalize;}.nav-button.svelte-kboul8 {display:flex;align-items:center;justify-content:center;--button-width: var(--calendar-nav-button-size, 32px);--button-height: var(--calendar-nav-button-size, 32px);--button-border: none;--button-color: transparent;--button-border-radius: var(--calendar-nav-button-border-radius, var(--radius, 4px));--button-text-color: var(--calendar-nav-button-color, #666666);--button-padding: 0;--button-hover-color: var(--calendar-nav-button-hover-background, #f0f0f0);}\n\n  /* Size the columns to the cell, not 1fr, and centre the whole grid. With 1fr\n     columns the fixed-width cells sat centred inside wider tracks, leaving\n     horizontal gaps between days — which broke the range highlight into\n     disconnected boxes instead of one continuous pill. The day-name header must\n     use the same track sizing so it stays aligned with the day grid below.\n\n     A host that wants the grid to fill a container sets both\n     --calendar-grid-columns and --calendar-cell-width: fluid columns with the\n     default fixed-width cells bring those gaps back, so the cells must be told\n     to fill their tracks too. */.day-names.svelte-kboul8 {display:grid;grid-template-columns:var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));justify-content:center;text-align:center;}.day-name.svelte-kboul8 {font-size:var(--calendar-day-name-font-size, 12px);font-weight:var(--calendar-day-name-font-weight, 600);color:var(--calendar-day-name-color, #595959);padding:var(--calendar-day-name-padding, 4px 0);}.grid.svelte-kboul8 {display:grid;grid-template-columns:var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));justify-content:center;row-gap:2px;}.cell.svelte-kboul8 {display:flex;align-items:center;justify-content:center;width:var(--calendar-cell-width, var(--calendar-cell-size, 36px));height:var(--calendar-cell-size, 36px);font-family:inherit;font-size:var(--calendar-cell-font-size, 14px);border-radius:var(--calendar-cell-border-radius, 50%);color:var(--calendar-cell-color, #000000);border:none;background:none;cursor:pointer;padding:0;outline:none;}.cell.svelte-kboul8:hover:not(.disabled, .outside-month, .selected, .range-start, .range-end) {background-color:var(--calendar-cell-hover-background, #f0f0f0);}.cell.svelte-kboul8:focus-visible {outline:2px solid var(--calendar-focus-ring-color, #000000);outline-offset:-2px;}.today.svelte-kboul8 {border:var(--calendar-today-border, 1px solid #000000);font-weight:var(--calendar-today-font-weight, 700);}.selected.svelte-kboul8 {background-color:var(--calendar-selected-background, #000000);color:var(--calendar-selected-color, #ffffff);}.range-start.svelte-kboul8 {background-color:var(--calendar-range-start-background, #000000);color:var(--calendar-range-start-color, #ffffff);border-radius:50% 0 0 50%;}.range-end.svelte-kboul8 {background-color:var(--calendar-range-end-background, #000000);color:var(--calendar-range-end-color, #ffffff);border-radius:0 50% 50% 0;}.range-start.range-end.svelte-kboul8 {border-radius:var(--calendar-cell-border-radius, 50%);}.in-range.svelte-kboul8 {background-color:var(--calendar-range-background, #e8e8e8);border-radius:0;}\n\n  /* #cccccc (1.61:1 on white) read as blank space, not as a disabled digit --\n     disabled controls are contrast-exempt under WCAG 1.4.3, but the demo's own\n     disabledDates run (10th-15th) is information the user must be able to read,\n     not just infer. #949494 lands near the 3:1 floor WCAG 1.4.11 uses elsewhere\n     for \"must stay perceivable\" content, while staying well short of the 4.5:1\n     enabled-text weight so disabled still reads as visually recessive. */.disabled.svelte-kboul8 {color:var(--calendar-disabled-color, #949494);cursor:var(--calendar-disabled-cursor, not-allowed);}.outside-month.svelte-kboul8 {color:var(--calendar-outside-month-color, #6b7280);cursor:default;}"
 };
 function Calendar(e, t) {
 	push(t, !0), append_styles$1(e, $$css$191);
@@ -23854,7 +23854,7 @@ delegate(["click", "keydown"]), create_custom_element(BuiltinCell, {
 //#region src/lib/assets/sort-default.svg?raw
 var sort_default_default = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z\" fill=\"currentColor\"/>\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z\" fill=\"currentColor\"/>\n</svg>\n", root$44 = /* @__PURE__ */ from_html("<div class=\"table-title svelte-171ci2i\"> </div>"), root_1$40 = /* @__PURE__ */ from_html("<button class=\"table-search-clear svelte-171ci2i\" type=\"button\"></button>"), root_2$31 = /* @__PURE__ */ from_html("<div class=\"table-search svelte-171ci2i\"><span class=\"table-search-icon svelte-171ci2i\"></span> <input class=\"table-search-input svelte-171ci2i\" type=\"search\" autocomplete=\"off\"/> <!></div>"), root_3$29 = /* @__PURE__ */ from_html("<div class=\"table-toolbar svelte-171ci2i\"><!></div>"), root_4$25 = /* @__PURE__ */ from_html("<caption class=\"sr-only svelte-171ci2i\"> </caption>"), root_5$24 = /* @__PURE__ */ from_html("<th><!></th>"), root_6$22 = /* @__PURE__ */ from_html("<th></th>"), root_7$20 = /* @__PURE__ */ from_html("<th> </th>"), root_8$19 = /* @__PURE__ */ from_html("<span> </span>"), root_9$14 = /* @__PURE__ */ from_html("<span class=\"table-header-filter-icon svelte-171ci2i\"></span>"), root_10$14 = /* @__PURE__ */ from_html("<span><!></span>"), root_11$13 = /* @__PURE__ */ from_html("<span class=\"table-header-filter svelte-171ci2i\"><!></span>"), root_12$12 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-asc\"></span>"), root_13$10 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-desc\"></span>"), root_14$9 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-idle\"></span>"), root_15$7 = /* @__PURE__ */ from_html("<div class=\"sort-button svelte-171ci2i\"><!></div>"), root_16$6 = /* @__PURE__ */ from_html("<!> <span class=\"table-inline-search-clear svelte-171ci2i\"><!></span>", 1), root_17$6 = /* @__PURE__ */ from_html("<span class=\"table-inline-search-trigger svelte-171ci2i\"><!></span>"), root_18$5 = /* @__PURE__ */ from_html("<span class=\"table-header-inline-search svelte-171ci2i\"><!></span>"), root_19$5 = /* @__PURE__ */ from_html("<th><span class=\"table-header-content svelte-171ci2i\"><!> <!> <!> <!></span></th>"), root_20$3 = /* @__PURE__ */ from_html("<tr class=\"svelte-171ci2i\"><td class=\"table-empty svelte-171ci2i\"><!></td></tr>"), root_21$2 = /* @__PURE__ */ from_html("<span class=\"table-mobile-label svelte-171ci2i\" aria-hidden=\"true\">Select</span>"), root_22$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-checkbox-col svelte-171ci2i\"><!><!></td>"), root_23$2 = /* @__PURE__ */ from_html("<span class=\"table-mobile-label svelte-171ci2i\" aria-hidden=\"true\"> </span>"), root_24$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-row-number-col svelte-171ci2i\"><!><span class=\"table-mobile-value svelte-171ci2i\"> </span></td>"), root_25$1 = /* @__PURE__ */ from_html("<div><!></div>"), root_26$1 = /* @__PURE__ */ from_html("<td><!><!></td>"), root_27 = /* @__PURE__ */ from_html("<tr><!><!><!></tr>"), root_28 = /* @__PURE__ */ from_html("<div class=\"table-footer svelte-171ci2i\"><!></div>"), root_29 = /* @__PURE__ */ from_html("<span class=\"table-paginator-size svelte-171ci2i\"><!></span>"), root_30 = /* @__PURE__ */ from_html("<span class=\"table-paginator-controls svelte-171ci2i\"><!> <!></span>"), root_31 = /* @__PURE__ */ from_html("<div class=\"table-footer table-paginator svelte-171ci2i\"><span class=\"table-paginator-range svelte-171ci2i\"> </span> <!></div>"), root_32 = /* @__PURE__ */ from_html("<div><div><div class=\"table-scroll svelte-171ci2i\"><table class=\"svelte-171ci2i\"><!><thead class=\"svelte-171ci2i\"><tr class=\"svelte-171ci2i\"><!><!><!></tr></thead><tbody class=\"svelte-171ci2i\"><!></tbody></table></div></div> <!></div>"), root_33 = /* @__PURE__ */ from_html("<!> <!> <!> <!>", 1), $$css$86 = {
 	hash: "svelte-171ci2i",
-	code: "\n  /* ── Title ─────────────────────────────────────────────────────────────── */.table-title.svelte-171ci2i {margin:var(--table-title-margin, 0px 0px 12px 0px);font-size:var(--table-title-font-size, var(--table-tile-font-size, 18px));font-weight:var(--table-title-font-weight, 600);\n    /* Unlike .table-content, a heading legitimately has no background of its\n       own -- it sits directly on whatever surface the consumer places it on.\n       The old #111827 literal ignored that surface entirely: on a dark page\n       it measured a contrast of 1.03 against #1a1a26, i.e. invisible. `color`\n       already inherits by default, so `inherit` states that explicitly and\n       lets the title track its container's text colour; `currentColor` would\n       resolve to the same value here (the spec special-cases it to mean\n       exactly `inherit` for the `color` property) but reads as if it were\n       referencing a colour set elsewhere on this rule, which it isn't. */color:var(--table-title-color, inherit);font-family:var(--table-title-font-family, inherit);padding:var(--table-title-padding);}\n\n  /* ── C2-3 Search bar ────────────────────────────────────────────────────── */.table-search.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-search-gap, 8px);padding:var(--table-search-padding, 8px 12px);border:var(--table-search-border, 1px solid #e5e7eb);border-radius:var(--table-search-border-radius, var(--radius, 4px));background-color:var(--table-search-background, #ffffff);margin-bottom:var(--table-search-margin-bottom, 8px);}.table-search-icon.svelte-171ci2i {display:inline-flex;align-items:center;color:var(--table-search-icon-color, #9ca3af);flex-shrink:0;}.table-search-icon.svelte-171ci2i svg {width:var(--table-search-icon-size, 16px);height:var(--table-search-icon-size, 16px);}.table-search-input.svelte-171ci2i {flex:1;border:none;outline:none;background:transparent;font-size:var(--table-search-font-size, 14px);color:var(--table-search-color, #111827);min-width:0;}.table-search-input.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:2px;border-radius:var(--table-search-focus-border-radius, var(--radius, 4px));}.table-search-input.svelte-171ci2i::placeholder {color:var(--table-search-placeholder-color, #4b5563);}\n\n  /* Hide browser-default clear button on search inputs */.table-search-input.svelte-171ci2i::-webkit-search-cancel-button {display:none;}.table-search-clear.svelte-171ci2i {display:inline-flex;align-items:center;padding:2px;border:none;background:transparent;color:var(--table-search-clear-color, #6b7280);cursor:pointer;border-radius:4px;flex-shrink:0;}.table-search-clear.svelte-171ci2i:hover {color:var(--table-search-clear-hover-color, #111827);background-color:var(--table-search-clear-hover-background, rgba(0, 0, 0, 0.05));}.table-search-clear.svelte-171ci2i svg {width:var(--table-search-clear-icon-size, 14px);height:var(--table-search-clear-icon-size, 14px);}.table-header-inline-search.svelte-171ci2i {display:inline-flex;align-items:center;gap:var(--table-inline-search-gap, 6px);margin-left:auto;}.table-inline-search-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-trigger-padding, 4px);--button-text-color: var(--table-inline-search-icon-color, #9ca3af);}.table-inline-search-trigger.svelte-171ci2i svg {width:var(--table-inline-search-icon-size, 16px);height:var(--table-inline-search-icon-size, 16px);display:block;}.table-inline-search-input.svelte-171ci2i {--input-margin: 0;width:var(--table-inline-search-input-width, 160px);}.table-inline-search-clear.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-clear-padding, 2px);--button-text-color: var(--table-inline-search-clear-color, #6b7280);}.table-inline-search-clear.svelte-171ci2i svg {width:var(--table-inline-search-clear-icon-size, 14px);height:var(--table-inline-search-clear-icon-size, 14px);}\n\n  /* ── Container ──────────────────────────────────────────────────────────── */\n  /* `hidden` is the default because it is what clips the table's corners to\n     this element's border-radius; without it the first and last cells square\n     off over the rounded border. A consumer who needs the container itself to\n     scroll sideways sets this to `auto` and accepts that trade. Note the\n     scrollable variant below sets `overflow-y`, and per the CSS overflow spec\n     a `visible` on one axis computes to `auto` when the other is not visible,\n     so `visible` here does not survive on a scrollable table. */.table-container.svelte-171ci2i {border:var(--table-border, 1px solid #e5e7eb);border-radius:var(--table-border-radius, var(--radius, 4px));width:var(--table-container-width, 100%);overflow:var(--table-container-overflow, hidden);}.scrollable-table.svelte-171ci2i {height:var(--table-container-height, 143px);overflow-y:auto;}.table-scroll-shell.svelte-171ci2i {position:relative;min-width:0;}\n\n  /* Edge scrims: fade the clipped side of the table into its background so\n     hidden columns read as \"more content this way\". Class-driven from live\n     scroll state — never shown when the table fits. pointer-events: none\n     keeps cells under the fade clickable; z-index 2 paints above sticky\n     headers (z-index 1). */.table-scroll-shell.svelte-171ci2i::before,\n  .table-scroll-shell.svelte-171ci2i::after {content:'';position:absolute;top:0;bottom:0;width:var(--table-scroll-scrim-width, 32px);opacity:0;pointer-events:none;transition:opacity\n      var(\n        --table-scroll-scrim-transition-duration,\n        var(--duration-base, var(--motion-duration, 0.2s))\n      )\n      var(--table-scroll-scrim-transition-easing, var(--motion-easing, ease));z-index:2;}.table-scroll-shell.svelte-171ci2i::before {left:0;border-radius:var(--table-border-radius, var(--radius, 4px)) 0 0\n      var(--table-border-radius, var(--radius, 4px));background:linear-gradient(to right, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.svelte-171ci2i::after {right:0;border-radius:0 var(--table-border-radius, var(--radius, 4px))\n      var(--table-border-radius, var(--radius, 4px)) 0;background:linear-gradient(to left, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.scrollable-left.svelte-171ci2i::before {opacity:1;}.table-scroll-shell.scrollable-right.svelte-171ci2i::after {opacity:1;}.table-scroll.svelte-171ci2i {overflow-x:auto;min-width:0;scrollbar-width:thin;}table.svelte-171ci2i {width:var(--table-width, 100%);border-collapse:var(--table-border-collapse, collapse);}.table-header.svelte-171ci2i,\n  .table-content.svelte-171ci2i {border:var(--table-inner-border, none);padding:var(--table-padding, 12px 16px);text-align:var(--table-text-align, left);width:var(--table-column-width);\n    /* Wrap at word boundaries; only a single word wider than the column may\n       split as a last resort. break-word (not anywhere) keeps each column's\n       min-content width at its longest word, so ordinary labels never split\n       mid-word — the old break-all default did. Opt back in per consumer via\n       --table-word-break / --table-overflow-wrap. */word-break:var(--table-word-break, normal);overflow-wrap:var(--table-overflow-wrap, break-word);}.scrollable-content.svelte-171ci2i {overflow-y:auto;height:var(--scrollable-column-height, 20px);}.table-header.svelte-171ci2i {background-color:var(--table-header-background, var(--table-header-border-bgcolor, #f9fafb));font-size:var(--table-header-font-size, 13px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 600);letter-spacing:var(--table-header-letter-spacing, 0.02em);text-transform:var(--table-header-text-transform, inherit);color:var(--table-header-color, var(--table-header-font-color, #6b7280));border-bottom:var(--table-header-border, var(--table-inner-border, none));}.table-header-content.svelte-171ci2i {display:flex;align-items:center;gap:4px;justify-content:var(--table-header-justify, flex-start);}.table-header-label.svelte-171ci2i {text-decoration:var(--table-header-tooltip-underline, underline dotted);text-underline-offset:2px;cursor:help;}.table-header-label-plain.svelte-171ci2i {text-decoration:none;}.table-header-filter.svelte-171ci2i {display:inline-flex;align-items:center;}.table-header-filter-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-width: fit-content;--button-height: fit-content;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));display:inline-flex;align-items:center;opacity:var(--table-sort-idle-opacity, 0.5);}.table-header-filter-trigger.svelte-171ci2i:hover {opacity:var(--table-sort-idle-hover-opacity, 0.85);}.table-header-filter-active.svelte-171ci2i {opacity:1;color:var(--table-filter-active-color, #2563eb);}.table-header-filter-icon.svelte-171ci2i svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}.table-cell-clamp.svelte-171ci2i {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.table-header-sticky.svelte-171ci2i {position:sticky;top:var(--table-header-sticky-top, 0);z-index:1;}.table-content.svelte-171ci2i {\n    /* The terminal #ffffff matters as much as the colour beside it. Without it\n       the whole declaration is invalid at computed-value time when neither\n       variable is set, so the cell falls back to `transparent` and inherits\n       whatever surface it lands on -- while `color` still resolves to a\n       hardcoded near-black. On a dark page that is #111827 on #1a1a26: a\n       measured contrast of 1.03, i.e. invisible. The header row never had the\n       bug because it pairs its colour with a background of its own. */background-color:var(--table-content-background, var(--table-content-border-bgcolor, #ffffff));font-size:var(--table-content-font-size, 14px);font-family:var(--table-content-font-family, inherit);color:var(--table-content-color, var(--table-content-font-color, #111827));}\n\n  /* Column highlight (TableColumn.highlighted). Row hover keeps higher\n     specificity and row selection is declared later at equal specificity, so\n     both row states paint over the column wash. */.table-header.table-col-highlighted.svelte-171ci2i {background-color:var(\n      --table-col-highlight-header-background,\n      var(--table-col-highlight-background, #f3f9ff)\n    );}.table-content.table-col-highlighted.svelte-171ci2i {background-color:var(--table-col-highlight-background, #f3f9ff);}.table-row.svelte-171ci2i {border-bottom:var(--table-row-border, 1px solid #f3f4f6);background-color:var(--table-row-background);}.table-row.svelte-171ci2i:last-child {border-bottom:var(--table-row-last-border, none);}.table-row.svelte-171ci2i:nth-child(even) {background-color:var(--table-row-alt-background, var(--table-row-background));}.table-row.svelte-171ci2i:hover {background-color:var(--table-row-hover-background);}.table-row.svelte-171ci2i:hover > .table-content:where(.svelte-171ci2i) {background-color:var(\n      --table-row-hover-background,\n      var(--table-content-background, var(--table-content-border-bgcolor))\n    );}.table-row-clickable.svelte-171ci2i {cursor:pointer;}.table-row-clickable.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:-2px;}\n\n  /* C2-1: Selected row highlight */.table-row-selected.svelte-171ci2i {background-color:var(--table-row-selected-background, #eff6ff);}.table-row-selected.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-row-selected-background, #eff6ff);}\n\n  /* Summary/period-total row (summaryRowIndex): both the row and its cells,\n     since a themed --table-content-background would otherwise paint over a\n     row-level background. Falls back to the regular cell background. */.table-summary-row.svelte-171ci2i {background-color:var(--table-summary-row-background, var(--table-content-background));}.table-summary-row.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-summary-row-background, var(--table-content-background));}\n\n  /* ── C2-1 Checkbox column ───────────────────────────────────────────────── */\n  /* The column renders the library Checkbox. The table's own --table-checkbox-*\n     tokens stay the public API and are bridged onto Checkbox's --checkbox-*\n     variables here, so a consumer theming the table keeps working and a\n     consumer theming Checkbox app-wide is overridden only inside the table. */.table-checkbox-col.svelte-171ci2i {width:var(--table-checkbox-col-width, 44px);padding:var(--table-checkbox-col-padding, 12px 12px);--checkbox-container-gap: 0;--checkbox-size: var(--table-checkbox-size, 18px);--checkbox-border: var(--table-checkbox-border, 2px solid #9ca3af);--checkbox-border-radius: var(--table-checkbox-border-radius, var(--radius, 4px));--checkbox-background: var(--table-checkbox-background, transparent);--checkbox-hover-border-color: var(--table-checkbox-hover-border-color, #6b7280);--checkbox-checked-background: var(--table-checkbox-checked-background, #2563eb);--checkbox-checked-border: var(\n      --table-checkbox-checked-border,\n      2px solid var(--table-checkbox-checked-border-color, #2563eb)\n    );--checkbox-indeterminate-background: var(--table-checkbox-indeterminate-background, #2563eb);--checkbox-indeterminate-border: var(\n      --table-checkbox-indeterminate-border,\n      2px solid var(--table-checkbox-indeterminate-border-color, #2563eb)\n    );--checkbox-disabled-opacity: var(--table-checkbox-disabled-opacity, 0.4);--checkbox-focus-ring: var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));--checkbox-icon-size: var(--table-checkbox-icon-size, 12px);--checkbox-checkmark-color: var(--table-checkbox-icon-color, #ffffff);--checkbox-dash-color: var(--table-checkbox-icon-color, #ffffff);\n    /* Named so a consumer can reach it. Table sets the Checkbox child's token\n       directly, and a rule on the element beats anything declared at :root, so\n       through <sui-table> the selection checkboxes' transition could not be\n       slowed or stopped by any means -- custom properties are the only route\n       across a shadow boundary and this one was already spoken for. */--checkbox-transition: var(\n      --table-checkbox-transition,\n      var(--duration-quick, var(--motion-duration, 0.15s))\n    );}\n\n  /* ── Sort button ────────────────────────────────────────────────────────── */.sort-button.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-width: fit-content;--button-height: fit-content;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));--button-hover-text-color: var(\n      --table-sort-button-hover-color,\n      var(--table-sort-button-color, inherit)\n    );display:inline-flex;align-items:center;line-height:1;}.sort-button.svelte-171ci2i .sort-icon {display:inline-flex;align-items:center;}\n\n  /* The sorted-direction half paints via currentColor; without an explicit\n     color it inherits the Button's text color (white on the default button\n     theme), which disappears on light headers. Default to the design\n     system's active blue. */.sort-button.svelte-171ci2i .sort-icon:not(.sort-icon-idle) {color:var(--table-sort-active-color, #1b85ff);}.sort-button.svelte-171ci2i .sort-icon svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}\n\n  /* Two-tone state painting. The shared sort-default.svg asset stays\n     color-agnostic (fill=\"currentColor\", like every other icon asset); the\n     state colors live here. All halves default to the inactive fill, then\n     the sorted direction's half is released back to currentColor (the\n     active color above). Path order in the asset is up-chevron first,\n     down-chevron second. */.sort-button.svelte-171ci2i .sort-icon svg path {fill:var(--table-sort-inactive-color, #c7c7c7);}.sort-button.svelte-171ci2i .sort-icon-asc svg path:first-child,\n  .sort-button.svelte-171ci2i .sort-icon-desc svg path:last-child {fill:currentColor;}\n\n  /* The design system draws every sort state fully opaque — faintness comes\n     from the glyph fills (inactive halves #C7C7C7, active direction\n     currentColor), never from transparency. The opacity vars remain for\n     consumers that prefer a fade but now default to solid; hover steps the\n     inactive halves to the design system's hover gray. */.sort-button.svelte-171ci2i .sort-icon-idle {opacity:var(--table-sort-idle-opacity, 1);}.sort-button.svelte-171ci2i:hover .sort-icon-idle {opacity:var(--table-sort-idle-hover-opacity, 1);--table-sort-inactive-color: var(--table-sort-hover-color, #797979);}\n\n  /* ── Empty ──────────────────────────────────────────────────────────────── */.table-empty.svelte-171ci2i {padding:var(--table-empty-padding, 32px 24px);text-align:center;color:var(--table-empty-color, #9ca3af);}\n\n  /* ── Footer ─────────────────────────────────────────────────────────────── */.table-footer.svelte-171ci2i {border-top:var(--table-footer-border, 1px solid #e5e7eb);padding:var(--table-footer-padding, 8px 16px);background-color:var(--table-footer-background, transparent);}.table-paginator.svelte-171ci2i {display:flex;align-items:center;justify-content:space-between;gap:var(--table-paginator-gap, 12px);flex-wrap:wrap;}.table-paginator-range.svelte-171ci2i {font-size:var(--table-paginator-range-font-size, 13px);color:var(--table-paginator-range-color, #6b7280);font-variant-numeric:tabular-nums;}.table-paginator-controls.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-paginator-gap, 12px);}.table-paginator-size.svelte-171ci2i {display:inline-flex;min-width:var(--table-paginator-size-width, 72px);\n    /* Select's standalone defaults (40px min-height, 8px 12px padding) render\n       58px tall next to the 36px pagination buttons sharing this row. Match the\n       steppers instead of towering over them. */--select-trigger-min-height: var(--table-paginator-size-height, 36px);--select-trigger-padding: var(--table-paginator-size-padding, 0 8px);}\n\n  /* ── Toolbar (bulk actions) ─────────────────────────────────────────────── */.table-toolbar.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-toolbar-gap, 12px);padding:var(--table-toolbar-padding, 8px 12px);border:var(--table-toolbar-border, 1px solid #e5e7eb);border-radius:var(--table-toolbar-border-radius, var(--radius, 4px));background-color:var(--table-toolbar-background, #f9fafb);margin-bottom:var(--table-toolbar-margin-bottom, 8px);}\n\n  /* ── Row-number column ──────────────────────────────────────────────────── */.table-row-number-col.svelte-171ci2i {width:var(--table-row-number-col-width, 48px);color:var(--table-row-number-color, #6b7280);font-variant-numeric:tabular-nums;text-align:var(--table-row-number-align, var(--table-text-align, left));}\n\n  /* ── Accessibility ──────────────────────────────────────────────────────── */.sr-only.svelte-171ci2i {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  /* ── Mobile record cards (opt-in via `mobileCardLayout`) ──────────────────\n     The label span is always in the DOM -- rendering it only under the media\n     query below would mean an AT that queries computed style rather than\n     layout (or a print stylesheet, or a future breakpoint change) sees no\n     label at all until the exact 640px condition is re-evaluated. Keeping the\n     element and toggling `display` is what lets `aria-hidden` on it (see the\n     template) stay meaningful at every width: hidden today, but never a\n     generated-content trick that could not carry that attribute in the first\n     place. */.table-mobile-label.svelte-171ci2i {display:none;}\n\n  /* The breakpoint is a literal, not `var(--table-mobile-breakpoint)`: a\n     custom property can't be read inside an `@media` condition (only inside\n     a declaration value), so a themable breakpoint was never on the table --\n     documented in docs/Table.md rather than silently unsupported. */\n  @media (max-width: 640px) {\n    /* `display: table` (and its `-row`/`-cell`/etc. companions) is what gives\n       a table its IMPLICIT header/cell ARIA semantics -- switching every one\n       of these to `block` for the stacked-card look throws that away, which\n       is exactly why `mobileRole()` in the script restates it explicitly as\n       `table`/`rowgroup`/`row`/`columnheader`/`cell` on the elements below.\n       Without both halves this rule would silently turn every consumer's\n       table into an AX-tree list the moment their viewport narrowed. */.table-mobile-cards.svelte-171ci2i table:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i thead:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i tbody:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i tr:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i th:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i td:where(.svelte-171ci2i) {display:block;width:100%;}\n\n    /* Headers are not shown as a row anymore -- their text now repeats per\n       card as the `.table-mobile-label` beside each value -- but they stay\n       in the DOM (not `display: none`) so `role=\"columnheader\"` continues\n       naming its `role=\"cell\"` for any reading that still associates the\n       two by DOM structure rather than only by the label span's text. */.table-mobile-cards.svelte-171ci2i thead:where(.svelte-171ci2i) {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    /* The horizontal-scroll affordance this table uses at desktop width (see\n       .table-scroll / .table-scroll-shell above) has nothing to scroll once\n       every cell is a full-width block, and a lingering scrim would fade a\n       card edge that no longer clips anything. */.table-mobile-cards.svelte-171ci2i .table-scroll:where(.svelte-171ci2i) {overflow-x:visible;}.table-mobile-cards.svelte-171ci2i .table-scroll-shell:where(.svelte-171ci2i)::before,\n    .table-mobile-cards.svelte-171ci2i .table-scroll-shell:where(.svelte-171ci2i)::after {display:none;}.table-mobile-cards.svelte-171ci2i tbody:where(.svelte-171ci2i) tr.table-row:where(.svelte-171ci2i) {border:var(--table-mobile-card-border, 1px solid #e5e7eb);border-radius:var(\n        --table-mobile-card-radius,\n        var(--table-border-radius, var(--radius, 4px))\n      );padding:var(--table-mobile-card-padding, 12px);margin-block-end:var(--table-mobile-card-gap, 12px);}.table-mobile-cards.svelte-171ci2i tbody:where(.svelte-171ci2i) tr.table-row:where(.svelte-171ci2i):last-child {margin-block-end:0;}\n\n    /* Each cell becomes a label/value pair instead of a table column; the\n       label span (hidden above) is the only thing `display: inline` turns\n       back on inside this query. */.table-mobile-cards.svelte-171ci2i td.table-content:where(.svelte-171ci2i) {display:flex;align-items:baseline;gap:var(--table-mobile-label-gap, 8px);border:none;}.table-mobile-cards.svelte-171ci2i .table-mobile-label:where(.svelte-171ci2i) {display:inline;flex:0 0 var(--table-mobile-label-width, 40%);font-weight:var(--table-mobile-label-font-weight, 600);color:var(--table-mobile-label-color, #6b7280);}.table-mobile-cards.svelte-171ci2i .table-mobile-value:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i td.table-content:where(.svelte-171ci2i) > div:where(.svelte-171ci2i) {flex:1 1 auto;min-width:0;}\n  }"
+	code: "\n  /* ── Title ─────────────────────────────────────────────────────────────── */.table-title.svelte-171ci2i {margin:var(--table-title-margin, 0px 0px 12px 0px);font-size:var(--table-title-font-size, var(--table-tile-font-size, 18px));font-weight:var(--table-title-font-weight, 600);\n    /* Unlike .table-content, a heading legitimately has no background of its\n       own -- it sits directly on whatever surface the consumer places it on.\n       The old #111827 literal ignored that surface entirely: on a dark page\n       it measured a contrast of 1.03 against #1a1a26, i.e. invisible. `color`\n       already inherits by default, so `inherit` states that explicitly and\n       lets the title track its container's text colour; `currentColor` would\n       resolve to the same value here (the spec special-cases it to mean\n       exactly `inherit` for the `color` property) but reads as if it were\n       referencing a colour set elsewhere on this rule, which it isn't. */color:var(--table-title-color, inherit);font-family:var(--table-title-font-family, inherit);padding:var(--table-title-padding);}\n\n  /* ── C2-3 Search bar ────────────────────────────────────────────────────── */.table-search.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-search-gap, 8px);padding:var(--table-search-padding, 8px 12px);border:var(--table-search-border, 1px solid #e5e7eb);border-radius:var(--table-search-border-radius, var(--radius, 4px));background-color:var(--table-search-background, #ffffff);margin-bottom:var(--table-search-margin-bottom, 8px);}.table-search-icon.svelte-171ci2i {display:inline-flex;align-items:center;color:var(--table-search-icon-color, #9ca3af);flex-shrink:0;}.table-search-icon.svelte-171ci2i svg {width:var(--table-search-icon-size, 16px);height:var(--table-search-icon-size, 16px);}.table-search-input.svelte-171ci2i {flex:1;border:none;outline:none;background:transparent;font-size:var(--table-search-font-size, 14px);color:var(--table-search-color, #111827);min-width:0;}.table-search-input.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:2px;border-radius:var(--table-search-focus-border-radius, var(--radius, 4px));}.table-search-input.svelte-171ci2i::placeholder {color:var(--table-search-placeholder-color, #4b5563);}\n\n  /* Hide browser-default clear button on search inputs */.table-search-input.svelte-171ci2i::-webkit-search-cancel-button {display:none;}.table-search-clear.svelte-171ci2i {display:inline-flex;align-items:center;padding:2px;border:none;background:transparent;color:var(--table-search-clear-color, #6b7280);cursor:pointer;border-radius:4px;flex-shrink:0;}.table-search-clear.svelte-171ci2i:hover {color:var(--table-search-clear-hover-color, #111827);background-color:var(--table-search-clear-hover-background, rgba(0, 0, 0, 0.05));}.table-search-clear.svelte-171ci2i svg {width:var(--table-search-clear-icon-size, 14px);height:var(--table-search-clear-icon-size, 14px);}.table-header-inline-search.svelte-171ci2i {display:inline-flex;align-items:center;gap:var(--table-inline-search-gap, 6px);margin-left:auto;}.table-inline-search-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-trigger-padding, 4px);--button-text-color: var(--table-inline-search-icon-color, #9ca3af);}.table-inline-search-trigger.svelte-171ci2i svg {width:var(--table-inline-search-icon-size, 16px);height:var(--table-inline-search-icon-size, 16px);display:block;}.table-inline-search-input.svelte-171ci2i {--input-margin: 0;width:var(--table-inline-search-input-width, 160px);}.table-inline-search-clear.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-clear-padding, 2px);--button-text-color: var(--table-inline-search-clear-color, #6b7280);}.table-inline-search-clear.svelte-171ci2i svg {width:var(--table-inline-search-clear-icon-size, 14px);height:var(--table-inline-search-clear-icon-size, 14px);}\n\n  /* ── Container ──────────────────────────────────────────────────────────── */\n  /* `hidden` is the default because it is what clips the table's corners to\n     this element's border-radius; without it the first and last cells square\n     off over the rounded border. A consumer who needs the container itself to\n     scroll sideways sets this to `auto` and accepts that trade. Note the\n     scrollable variant below sets `overflow-y`, and per the CSS overflow spec\n     a `visible` on one axis computes to `auto` when the other is not visible,\n     so `visible` here does not survive on a scrollable table. */.table-container.svelte-171ci2i {border:var(--table-border, 1px solid #e5e7eb);border-radius:var(--table-border-radius, var(--radius, 4px));width:var(--table-container-width, 100%);overflow:var(--table-container-overflow, hidden);}.scrollable-table.svelte-171ci2i {height:var(--table-container-height, 143px);overflow-y:auto;}.table-scroll-shell.svelte-171ci2i {position:relative;min-width:0;}\n\n  /* Edge scrims: fade the clipped side of the table into its background so\n     hidden columns read as \"more content this way\". Class-driven from live\n     scroll state — never shown when the table fits. pointer-events: none\n     keeps cells under the fade clickable; z-index 2 paints above sticky\n     headers (z-index 1). */.table-scroll-shell.svelte-171ci2i::before,\n  .table-scroll-shell.svelte-171ci2i::after {content:'';position:absolute;top:0;bottom:0;width:var(--table-scroll-scrim-width, 32px);opacity:0;pointer-events:none;transition:opacity\n      var(\n        --table-scroll-scrim-transition-duration,\n        var(--duration-base, var(--motion-duration, 0.2s))\n      )\n      var(--table-scroll-scrim-transition-easing, var(--motion-easing, ease));z-index:2;}.table-scroll-shell.svelte-171ci2i::before {left:0;border-radius:var(--table-border-radius, var(--radius, 4px)) 0 0\n      var(--table-border-radius, var(--radius, 4px));background:linear-gradient(to right, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.svelte-171ci2i::after {right:0;border-radius:0 var(--table-border-radius, var(--radius, 4px))\n      var(--table-border-radius, var(--radius, 4px)) 0;background:linear-gradient(to left, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.scrollable-left.svelte-171ci2i::before {opacity:1;}.table-scroll-shell.scrollable-right.svelte-171ci2i::after {opacity:1;}.table-scroll.svelte-171ci2i {overflow-x:auto;min-width:0;scrollbar-width:thin;}table.svelte-171ci2i {width:var(--table-width, 100%);border-collapse:var(--table-border-collapse, collapse);}.table-header.svelte-171ci2i,\n  .table-content.svelte-171ci2i {border:var(--table-inner-border, none);padding:var(--table-padding, 12px 16px);text-align:var(--table-text-align, left);width:var(--table-column-width);\n    /* Wrap at word boundaries; only a single word wider than the column may\n       split as a last resort. break-word (not anywhere) keeps each column's\n       min-content width at its longest word, so ordinary labels never split\n       mid-word — the old break-all default did. Opt back in per consumer via\n       --table-word-break / --table-overflow-wrap. */word-break:var(--table-word-break, normal);overflow-wrap:var(--table-overflow-wrap, break-word);}.scrollable-content.svelte-171ci2i {overflow-y:auto;height:var(--scrollable-column-height, 20px);}.table-header.svelte-171ci2i {background-color:var(--table-header-background, var(--table-header-border-bgcolor, #f9fafb));font-size:var(--table-header-font-size, 13px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 600);letter-spacing:var(--table-header-letter-spacing, 0.02em);text-transform:var(--table-header-text-transform, inherit);color:var(--table-header-color, var(--table-header-font-color, #6b7280));border-bottom:var(--table-header-border, var(--table-inner-border, none));}.table-header-content.svelte-171ci2i {display:flex;align-items:center;gap:4px;justify-content:var(--table-header-justify, flex-start);}.table-header-label.svelte-171ci2i {text-decoration:var(--table-header-tooltip-underline, underline dotted);text-underline-offset:2px;cursor:help;}.table-header-label-plain.svelte-171ci2i {text-decoration:none;}.table-header-filter.svelte-171ci2i {display:inline-flex;align-items:center;}.table-header-filter-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-width: fit-content;--button-height: fit-content;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));display:inline-flex;align-items:center;opacity:var(--table-sort-idle-opacity, 0.5);}.table-header-filter-trigger.svelte-171ci2i:hover {opacity:var(--table-sort-idle-hover-opacity, 0.85);}.table-header-filter-active.svelte-171ci2i {opacity:1;color:var(--table-filter-active-color, #2563eb);}.table-header-filter-icon.svelte-171ci2i svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}.table-cell-clamp.svelte-171ci2i {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.table-header-sticky.svelte-171ci2i {position:sticky;top:var(--table-header-sticky-top, 0);z-index:1;}.table-content.svelte-171ci2i {\n    /* The terminal #ffffff matters as much as the colour beside it. Without it\n       the whole declaration is invalid at computed-value time when neither\n       variable is set, so the cell falls back to `transparent` and inherits\n       whatever surface it lands on -- while `color` still resolves to a\n       hardcoded near-black. On a dark page that is #111827 on #1a1a26: a\n       measured contrast of 1.03, i.e. invisible. The header row never had the\n       bug because it pairs its colour with a background of its own. */background-color:var(--table-content-background, var(--table-content-border-bgcolor, #ffffff));font-size:var(--table-content-font-size, 14px);font-family:var(--table-content-font-family, inherit);color:var(--table-content-color, var(--table-content-font-color, #111827));}\n\n  /* Column highlight (TableColumn.highlighted). Row hover keeps higher\n     specificity and row selection is declared later at equal specificity, so\n     both row states paint over the column wash. */.table-header.table-col-highlighted.svelte-171ci2i {background-color:var(\n      --table-col-highlight-header-background,\n      var(--table-col-highlight-background, #f3f9ff)\n    );}.table-content.table-col-highlighted.svelte-171ci2i {background-color:var(--table-col-highlight-background, #f3f9ff);}.table-row.svelte-171ci2i {border-bottom:var(--table-row-border, 1px solid #f3f4f6);background-color:var(--table-row-background);}.table-row.svelte-171ci2i:last-child {border-bottom:var(--table-row-last-border, none);}.table-row.svelte-171ci2i:nth-child(even) {background-color:var(--table-row-alt-background, var(--table-row-background));}.table-row.svelte-171ci2i:hover {background-color:var(--table-row-hover-background);}.table-row.svelte-171ci2i:hover > .table-content:where(.svelte-171ci2i) {background-color:var(\n      --table-row-hover-background,\n      var(--table-content-background, var(--table-content-border-bgcolor))\n    );}.table-row-clickable.svelte-171ci2i {cursor:pointer;}.table-row-clickable.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:-2px;}\n\n  /* C2-1: Selected row highlight */.table-row-selected.svelte-171ci2i {background-color:var(--table-row-selected-background, #eff6ff);}.table-row-selected.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-row-selected-background, #eff6ff);}\n\n  /* Summary/period-total row (summaryRowIndex): both the row and its cells,\n     since a themed --table-content-background would otherwise paint over a\n     row-level background. Falls back to the regular cell background. */.table-summary-row.svelte-171ci2i {background-color:var(--table-summary-row-background, var(--table-content-background));}.table-summary-row.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-summary-row-background, var(--table-content-background));}\n\n  /* ── C2-1 Checkbox column ───────────────────────────────────────────────── */\n  /* The column renders the library Checkbox. The table's own --table-checkbox-*\n     tokens stay the public API and are bridged onto Checkbox's --checkbox-*\n     variables here, so a consumer theming the table keeps working and a\n     consumer theming Checkbox app-wide is overridden only inside the table. */.table-checkbox-col.svelte-171ci2i {width:var(--table-checkbox-col-width, 44px);padding:var(--table-checkbox-col-padding, 12px 12px);--checkbox-container-gap: 0;--checkbox-size: var(--table-checkbox-size, 18px);--checkbox-border: var(--table-checkbox-border, 2px solid #9ca3af);--checkbox-border-radius: var(--table-checkbox-border-radius, var(--radius, 4px));--checkbox-background: var(--table-checkbox-background, transparent);--checkbox-hover-border-color: var(--table-checkbox-hover-border-color, #6b7280);--checkbox-checked-background: var(--table-checkbox-checked-background, #2563eb);--checkbox-checked-border: var(\n      --table-checkbox-checked-border,\n      2px solid var(--table-checkbox-checked-border-color, #2563eb)\n    );--checkbox-indeterminate-background: var(--table-checkbox-indeterminate-background, #2563eb);--checkbox-indeterminate-border: var(\n      --table-checkbox-indeterminate-border,\n      2px solid var(--table-checkbox-indeterminate-border-color, #2563eb)\n    );--checkbox-disabled-opacity: var(--table-checkbox-disabled-opacity, 0.4);--checkbox-focus-ring: var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));--checkbox-icon-size: var(--table-checkbox-icon-size, 12px);--checkbox-checkmark-color: var(--table-checkbox-icon-color, #ffffff);--checkbox-dash-color: var(--table-checkbox-icon-color, #ffffff);\n    /* Named so a consumer can reach it. Table sets the Checkbox child's token\n       directly, and a rule on the element beats anything declared at :root, so\n       through <sui-table> the selection checkboxes' transition could not be\n       slowed or stopped by any means -- custom properties are the only route\n       across a shadow boundary and this one was already spoken for. */--checkbox-transition: var(\n      --table-checkbox-transition,\n      var(--duration-quick, var(--motion-duration, 0.15s))\n    );}\n\n  /* ── Sort button ────────────────────────────────────────────────────────── */.sort-button.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-width: fit-content;--button-height: fit-content;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));--button-hover-text-color: var(\n      --table-sort-button-hover-color,\n      var(--table-sort-button-color, inherit)\n    );display:inline-flex;align-items:center;line-height:1;}.sort-button.svelte-171ci2i .sort-icon {display:inline-flex;align-items:center;}\n\n  /* The sorted-direction half paints via currentColor; without an explicit\n     color it inherits the Button's text color (white on the default button\n     theme), which disappears on light headers. Default to the design\n     system's active blue. */.sort-button.svelte-171ci2i .sort-icon:not(.sort-icon-idle) {color:var(--table-sort-active-color, #1b85ff);}.sort-button.svelte-171ci2i .sort-icon svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}\n\n  /* Two-tone state painting. The shared sort-default.svg asset stays\n     color-agnostic (fill=\"currentColor\", like every other icon asset); the\n     state colors live here. All halves default to the inactive fill, then\n     the sorted direction's half is released back to currentColor (the\n     active color above). Path order in the asset is up-chevron first,\n     down-chevron second. */.sort-button.svelte-171ci2i .sort-icon svg path {fill:var(--table-sort-inactive-color, #c7c7c7);}.sort-button.svelte-171ci2i .sort-icon-asc svg path:first-child,\n  .sort-button.svelte-171ci2i .sort-icon-desc svg path:last-child {fill:currentColor;}\n\n  /* The design system draws every sort state fully opaque — faintness comes\n     from the glyph fills (inactive halves #C7C7C7, active direction\n     currentColor), never from transparency. The opacity vars remain for\n     consumers that prefer a fade but now default to solid; hover steps the\n     inactive halves to the design system's hover gray. */.sort-button.svelte-171ci2i .sort-icon-idle {opacity:var(--table-sort-idle-opacity, 1);}.sort-button.svelte-171ci2i:hover .sort-icon-idle {opacity:var(--table-sort-idle-hover-opacity, 1);--table-sort-inactive-color: var(--table-sort-hover-color, #797979);}\n\n  /* ── Empty ──────────────────────────────────────────────────────────────── */.table-empty.svelte-171ci2i {padding:var(--table-empty-padding, 32px 24px);text-align:center;color:var(--table-empty-color, #9ca3af);}\n\n  /* ── Footer ─────────────────────────────────────────────────────────────── */.table-footer.svelte-171ci2i {border-top:var(--table-footer-border, 1px solid #e5e7eb);padding:var(--table-footer-padding, 8px 16px);background-color:var(--table-footer-background, transparent);}.table-paginator.svelte-171ci2i {display:flex;align-items:center;justify-content:space-between;gap:var(--table-paginator-gap, 12px);flex-wrap:wrap;}.table-paginator-range.svelte-171ci2i {font-size:var(--table-paginator-range-font-size, 13px);color:var(--table-paginator-range-color, #6b7280);font-variant-numeric:tabular-nums;}\n\n  /* The outer row wraps, so the controls row has to as well: in a container\n     narrower than the select and stepper need (a Modal at phone width) the\n     footer would clip Next under .table-container's overflow. The stepper\n     wraps too, because moving the select to its own line is not enough when\n     the stepper alone is wider than the host. Wrapped lines start-align, like\n     the outer row's. Nothing changes while the controls fit on one line. */.table-paginator-controls.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-paginator-gap, 12px);flex-wrap:wrap;}.table-paginator-controls.svelte-171ci2i .pagination {flex-wrap:wrap;}.table-paginator-size.svelte-171ci2i {display:inline-flex;min-width:var(--table-paginator-size-width, 72px);\n    /* Select's standalone defaults (40px min-height, 8px 12px padding) render\n       58px tall next to the 36px pagination buttons sharing this row. Match the\n       steppers instead of towering over them. */--select-trigger-min-height: var(--table-paginator-size-height, 36px);--select-trigger-padding: var(--table-paginator-size-padding, 0 8px);}\n\n  /* ── Toolbar (bulk actions) ─────────────────────────────────────────────── */.table-toolbar.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-toolbar-gap, 12px);padding:var(--table-toolbar-padding, 8px 12px);border:var(--table-toolbar-border, 1px solid #e5e7eb);border-radius:var(--table-toolbar-border-radius, var(--radius, 4px));background-color:var(--table-toolbar-background, #f9fafb);margin-bottom:var(--table-toolbar-margin-bottom, 8px);}\n\n  /* ── Row-number column ──────────────────────────────────────────────────── */.table-row-number-col.svelte-171ci2i {width:var(--table-row-number-col-width, 48px);color:var(--table-row-number-color, #6b7280);font-variant-numeric:tabular-nums;text-align:var(--table-row-number-align, var(--table-text-align, left));}\n\n  /* ── Accessibility ──────────────────────────────────────────────────────── */.sr-only.svelte-171ci2i {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  /* ── Mobile record cards (opt-in via `mobileCardLayout`) ──────────────────\n     The label span is always in the DOM -- rendering it only under the media\n     query below would mean an AT that queries computed style rather than\n     layout (or a print stylesheet, or a future breakpoint change) sees no\n     label at all until the exact 640px condition is re-evaluated. Keeping the\n     element and toggling `display` is what lets `aria-hidden` on it (see the\n     template) stay meaningful at every width: hidden today, but never a\n     generated-content trick that could not carry that attribute in the first\n     place. */.table-mobile-label.svelte-171ci2i {display:none;}\n\n  /* The breakpoint is a literal, not `var(--table-mobile-breakpoint)`: a\n     custom property can't be read inside an `@media` condition (only inside\n     a declaration value), so a themable breakpoint was never on the table --\n     documented in docs/Table.md rather than silently unsupported. */\n  @media (max-width: 640px) {\n    /* `display: table` (and its `-row`/`-cell`/etc. companions) is what gives\n       a table its IMPLICIT header/cell ARIA semantics -- switching every one\n       of these to `block` for the stacked-card look throws that away, which\n       is exactly why `mobileRole()` in the script restates it explicitly as\n       `table`/`rowgroup`/`row`/`columnheader`/`cell` on the elements below.\n       Without both halves this rule would silently turn every consumer's\n       table into an AX-tree list the moment their viewport narrowed. */.table-mobile-cards.svelte-171ci2i table:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i thead:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i tbody:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i tr:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i th:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i td:where(.svelte-171ci2i) {display:block;width:100%;}\n\n    /* Headers are not shown as a row anymore -- their text now repeats per\n       card as the `.table-mobile-label` beside each value -- but they stay\n       in the DOM (not `display: none`) so `role=\"columnheader\"` continues\n       naming its `role=\"cell\"` for any reading that still associates the\n       two by DOM structure rather than only by the label span's text. */.table-mobile-cards.svelte-171ci2i thead:where(.svelte-171ci2i) {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    /* The horizontal-scroll affordance this table uses at desktop width (see\n       .table-scroll / .table-scroll-shell above) has nothing to scroll once\n       every cell is a full-width block, and a lingering scrim would fade a\n       card edge that no longer clips anything. */.table-mobile-cards.svelte-171ci2i .table-scroll:where(.svelte-171ci2i) {overflow-x:visible;}.table-mobile-cards.svelte-171ci2i .table-scroll-shell:where(.svelte-171ci2i)::before,\n    .table-mobile-cards.svelte-171ci2i .table-scroll-shell:where(.svelte-171ci2i)::after {display:none;}.table-mobile-cards.svelte-171ci2i tbody:where(.svelte-171ci2i) tr.table-row:where(.svelte-171ci2i) {border:var(--table-mobile-card-border, 1px solid #e5e7eb);border-radius:var(\n        --table-mobile-card-radius,\n        var(--table-border-radius, var(--radius, 4px))\n      );padding:var(--table-mobile-card-padding, 12px);margin-block-end:var(--table-mobile-card-gap, 12px);}.table-mobile-cards.svelte-171ci2i tbody:where(.svelte-171ci2i) tr.table-row:where(.svelte-171ci2i):last-child {margin-block-end:0;}\n\n    /* Each cell becomes a label/value pair instead of a table column; the\n       label span (hidden above) is the only thing `display: inline` turns\n       back on inside this query. */.table-mobile-cards.svelte-171ci2i td.table-content:where(.svelte-171ci2i) {display:flex;align-items:baseline;gap:var(--table-mobile-label-gap, 8px);border:none;}.table-mobile-cards.svelte-171ci2i .table-mobile-label:where(.svelte-171ci2i) {display:inline;flex:0 0 var(--table-mobile-label-width, 40%);font-weight:var(--table-mobile-label-font-weight, 600);color:var(--table-mobile-label-color, #6b7280);}.table-mobile-cards.svelte-171ci2i .table-mobile-value:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i td.table-content:where(.svelte-171ci2i) > div:where(.svelte-171ci2i) {flex:1 1 auto;min-width:0;}\n  }"
 };
 function Table(e, t) {
 	push(t, !0), append_styles$1(e, $$css$86);
@@ -26529,7 +26529,7 @@ var TIME_DISPLAY_PATTERN = /^(1[0-2]|0?[1-9]):([0-5][0-9])\s?(AM|PM)$/i, pad = (
 	}), append(e, a);
 }, root$37 = /* @__PURE__ */ from_html("<span class=\"drp-field-error svelte-gpybdi\" role=\"alert\"> </span>"), root_1$35 = /* @__PURE__ */ from_html("<span class=\"drp-trigger-label svelte-gpybdi\"> </span> <span class=\"drp-trigger-icon svelte-gpybdi\" aria-hidden=\"true\"><!></span>", 1), root_2$27 = /* @__PURE__ */ from_html("<div class=\"drp-compare-panel-body svelte-gpybdi\"><!></div>"), root_3$25 = /* @__PURE__ */ from_html("<div class=\"drp-compare-panel svelte-gpybdi\" role=\"dialog\" aria-label=\"Compare period picker\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"drp-footer svelte-gpybdi\"><!> <!></div></div>"), root_4$22 = /* @__PURE__ */ from_html("<div class=\"drp-compare-trigger-wrapper svelte-gpybdi\"><!> <!></div>"), root_5$21 = /* @__PURE__ */ from_html("<span class=\"drp-preset-group-label svelte-gpybdi\"> </span>"), root_6$20 = /* @__PURE__ */ from_html("<div class=\"drp-preset-divider svelte-gpybdi\" role=\"separator\" aria-hidden=\"true\"><!></div>"), root_7$18 = /* @__PURE__ */ from_html("<span class=\"drp-preset-check svelte-gpybdi\" aria-hidden=\"true\"></span>"), root_8$17 = /* @__PURE__ */ from_html("<!> <button type=\"button\" role=\"option\"> <!></button>", 1), root_9$13 = /* @__PURE__ */ from_html("<div class=\"drp-sidebar svelte-gpybdi\" role=\"listbox\" aria-label=\"Date presets\"></div>"), root_10$13 = /* @__PURE__ */ from_html("<div class=\"drp-date-time-group svelte-gpybdi\"><div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"Start date\" aria-label=\"Start date\"/></div> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"12:00 AM\" aria-label=\"Start time\"/></div> <!></div> <!> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div class=\"drp-date-time-group svelte-gpybdi\"><div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"End date\" aria-label=\"End date\"/></div> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"11:59 PM\" aria-label=\"End time\"/></div> <!></div> <!>", 1), root_11$12 = /* @__PURE__ */ from_html("<button type=\"button\" aria-label=\"Toggle time selection\"><span class=\"drp-time-toggle-icon svelte-gpybdi\" aria-hidden=\"true\"></span></button>"), root_12$11 = /* @__PURE__ */ from_html("<div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"Start date\" aria-label=\"Start date\"/> <!></div> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"End date\" aria-label=\"End date\"/> <!></div> <!>", 1), root_13$9 = /* @__PURE__ */ from_html("<div class=\"drp-time-input-row svelte-gpybdi\"><div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"12:00 AM\" aria-label=\"Start time\"/> <!></div> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"11:59 PM\" aria-label=\"End time\"/> <!></div></div>"), root_14$8 = /* @__PURE__ */ from_html("<div><div class=\"drp-date-input-row svelte-gpybdi\"><!></div> <!></div>"), root_15$6 = /* @__PURE__ */ from_html("<!> <!>", 1), root_16$5 = /* @__PURE__ */ from_html("<div class=\"drp-dual-header svelte-gpybdi\"><button type=\"button\" class=\"drp-nav-btn svelte-gpybdi\" aria-label=\"Previous months\"><span class=\"drp-nav-chevron drp-nav-chevron-left svelte-gpybdi\" aria-hidden=\"true\"></span></button> <div class=\"drp-dual-month-labels svelte-gpybdi\"><span class=\"drp-month-label svelte-gpybdi\"> </span> <span class=\"drp-month-label svelte-gpybdi\"> </span></div> <button type=\"button\" class=\"drp-nav-btn svelte-gpybdi\" aria-label=\"Next months\"><span class=\"drp-nav-chevron drp-nav-chevron-right svelte-gpybdi\" aria-hidden=\"true\"></span></button></div> <div class=\"drp-months-row svelte-gpybdi\"><!></div>", 1), root_17$5 = /* @__PURE__ */ from_html("<div class=\"drp-time-row svelte-gpybdi\"><!></div>"), root_18$4 = /* @__PURE__ */ from_html("<div class=\"drp-compare-section svelte-gpybdi\"><!></div>"), root_19$4 = /* @__PURE__ */ from_html("<div role=\"dialog\" aria-label=\"Date range picker\" aria-modal=\"true\" tabindex=\"-1\"><div class=\"drp-panel-inner svelte-gpybdi\"><!> <div class=\"drp-calendars svelte-gpybdi\"><!> <!> <!> <!></div></div> <div class=\"drp-footer svelte-gpybdi\"><!> <!> <!></div></div>"), root_20$2 = /* @__PURE__ */ from_html("<div><div class=\"drp-trigger-wrapper svelte-gpybdi\"><!></div> <!> <!></div>"), $$css$78 = {
 	hash: "svelte-gpybdi",
-	code: ".drp-field-error.svelte-gpybdi {display:block;color:var(--drp-field-error-color, #b3261e);font-size:var(--drp-field-error-font-size, 11px);line-height:var(--drp-field-error-line-height, 1.4);margin-top:var(--drp-field-error-margin-top, 2px);}.drp-root.svelte-gpybdi {position:relative;display:inline-block;}\n\n  /* ── Trigger wrapper ── */.drp-trigger-wrapper.svelte-gpybdi {display:inline-block;}\n\n  /* Bridge drp-trigger CSS vars to Button CSS vars on the wrapper */.drp-trigger-wrapper.svelte-gpybdi {--button-color: var(--drp-trigger-background, inherit);--button-border: var(--drp-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-trigger-color, inherit);--button-padding: var(--drp-trigger-padding, 8px 12px);--button-min-width: var(--drp-trigger-min-width, 200px);--button-gap: var(--drp-trigger-gap, 8px);--button-hover-border: var(\n      --drp-trigger-hover-border,\n      var(--drp-trigger-border, 1px solid currentColor)\n    );}.drp-trigger-wrapper .drp-trigger {display:inline-flex;align-items:center;gap:var(--drp-trigger-gap, 8px);white-space:nowrap;min-width:var(--drp-trigger-min-width, 200px);}.drp-trigger-wrapper .drp-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}.drp-trigger-label.svelte-gpybdi {flex:1;text-align:left;}.drp-trigger-icon.svelte-gpybdi {display:inline-flex;align-items:center;color:var(--drp-trigger-icon-color, inherit);flex-shrink:0;}\n\n  /* ── Panel ── */.drp-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-panel-min-width, 320px);max-width:var(--drp-panel-max-width, 760px);max-height:var(--drp-panel-max-height, calc(100dvh - 80px));overflow:hidden;\n    /* A host may disable pointer events on an ancestor (a collapsing sidebar, say) and\n       an open aria-modal panel must stay usable, as Modal's content does. */pointer-events:auto;}\n\n  /* Set only when the panel would not fit below the trigger — see positionPanel(). */.drp-panel-above.svelte-gpybdi {top:auto;bottom:calc(100% + var(--drp-panel-offset, 6px));}.drp-panel-align-left.svelte-gpybdi {left:0;right:auto;}.drp-panel-align-right.svelte-gpybdi {right:0;left:auto;}\n\n  /* Opt-in sheet (responsiveLayout): confine the panel to the viewport instead of the\n     trigger. The insets are tokens because the free area differs per host (a fixed\n     sidebar, an embedding shell, safe-area insets); the defaults suit a bare page. */.drp-panel.drp-panel-sheet.svelte-gpybdi {position:fixed;top:var(--drp-sheet-top, auto);right:var(--drp-sheet-right, 16px);bottom:var(--drp-sheet-bottom, 16px);left:var(--drp-sheet-left, 16px);z-index:var(--drp-sheet-z-index, var(--drp-panel-z-index, 1000));width:auto;min-width:0;max-width:var(--drp-sheet-max-width, 48rem);max-height:var(--drp-sheet-max-height, calc(100dvh - 2rem));margin-inline:auto;}.drp-panel-inner.svelte-gpybdi {display:flex;flex-direction:row;flex:1;min-height:0;overflow-y:auto;}\n\n  /* ── Presets above the calendars (presetsPosition=\"top\", and every sheet) ── */.drp-panel-presets-top.svelte-gpybdi .drp-panel-inner:where(.svelte-gpybdi) {flex-direction:column;}.drp-panel-presets-top.svelte-gpybdi .drp-sidebar:where(.svelte-gpybdi) {flex:none;flex-direction:row;flex-wrap:wrap;min-width:0;max-height:none;overflow-y:visible;border-right:0;border-bottom:var(--drp-sidebar-border, 1px solid #e8e8e8);}.drp-panel-presets-top.svelte-gpybdi .drp-preset-item:where(.svelte-gpybdi) {width:auto;}.drp-panel-presets-top.svelte-gpybdi .drp-preset-divider:where(.svelte-gpybdi) {display:none;}.drp-panel-presets-top.svelte-gpybdi .drp-calendars:where(.svelte-gpybdi) {flex:none;}.drp-panel-presets-top.svelte-gpybdi .drp-months-row:where(.svelte-gpybdi) {justify-content:center;}\n\n  /* ── Narrow layout (responsiveLayout, <= 688px): one month, stacked inputs ── */.drp-panel-narrow.svelte-gpybdi .drp-calendars:where(.svelte-gpybdi) {padding:var(--drp-calendars-padding-narrow, 16px 8px);}.drp-panel-narrow.svelte-gpybdi .drp-calendar-embedded {max-width:100%;}.drp-panel-narrow.svelte-gpybdi .drp-date-input-row:where(.svelte-gpybdi),\n  .drp-panel-narrow.svelte-gpybdi .drp-time-input-row:where(.svelte-gpybdi) {flex-direction:column;align-items:stretch;}.drp-panel-narrow.svelte-gpybdi .drp-datetime-arrow:where(.svelte-gpybdi) {display:none;}\n\n  /* ── Sidebar ── */.drp-sidebar.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-sidebar-padding, 12px 8px);border-right:var(--drp-sidebar-border, 1px solid #e8e8e8);min-width:var(--drp-sidebar-min-width, 140px);gap:2px;overflow-y:auto;max-height:var(--drp-sidebar-max-height, 400px);}.drp-preset-item.svelte-gpybdi {display:block;width:100%;text-align:left;padding:var(--drp-preset-padding, 7px 12px);background:none;border:none;border-radius:var(--drp-preset-border-radius, var(--radius, 4px));color:var(--drp-preset-color, inherit);cursor:pointer;white-space:nowrap;transition:background var(--drp-preset-item-transition-duration, var(--motion-duration, 0.12s))\n      var(--drp-preset-item-transition-easing, var(--motion-easing, ease));}.drp-preset-item.svelte-gpybdi:hover {background:var(--drp-preset-hover-background, #f5f5f5);}.drp-preset-active.svelte-gpybdi {background:var(--drp-preset-active-background, currentColor);color:var(--drp-preset-active-color, #ffffff);}.drp-preset-active.svelte-gpybdi:hover {background:var(--drp-preset-active-hover-background, #333333);}\n\n  /* Opt-in checkmark layout: reserve a trailing slot so the active preset's tick\n     sits flush-right while the label stays left. A preset with no tick (or a\n     label-only preset) keeps its single flex child at the start, unchanged. */.drp-preset-checkable.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:var(--drp-preset-check-gap, 8px);}.drp-preset-check.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-preset-check-size, 16px);height:var(--drp-preset-check-size, 16px);color:var(--drp-preset-check-color, inherit);}.drp-preset-check.svelte-gpybdi svg {width:100%;height:100%;}\n\n  /* ── Calendar area ── */.drp-calendars.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-calendars-padding, 16px);gap:var(--drp-calendars-gap, 16px);flex:1;}\n\n  /* Dual-month shared nav header */.drp-dual-header.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:8px;}.drp-dual-month-labels.svelte-gpybdi {display:flex;flex:1;justify-content:space-around;}.drp-month-label.svelte-gpybdi {color:var(--drp-month-label-color, inherit);text-transform:capitalize;}.drp-nav-btn.svelte-gpybdi {display:inline-flex;align-items:center;justify-content:center;width:var(--drp-nav-btn-size, 32px);height:var(--drp-nav-btn-size, 32px);background:none;border:none;border-radius:var(--drp-nav-btn-border-radius, var(--radius, 4px));cursor:pointer;color:var(--drp-nav-btn-color, inherit);transition:background var(--drp-nav-btn-transition-duration, var(--motion-duration, 0.12s))\n      var(--drp-nav-btn-transition-easing, var(--motion-easing, ease));padding:0;}.drp-nav-btn.svelte-gpybdi:hover {background:var(--drp-nav-btn-hover-background, #f0f0f0);}\n\n  /* CSS-only chevrons for the dual-nav */.drp-nav-chevron.svelte-gpybdi {display:inline-block;width:8px;height:8px;border-right:var(--drp-nav-chevron-border, 2px solid currentColor);border-top:var(--drp-nav-chevron-border, 2px solid currentColor);}.drp-nav-chevron-left.svelte-gpybdi {transform:rotate(-135deg);margin-left:2px;}.drp-nav-chevron-right.svelte-gpybdi {transform:rotate(45deg);margin-right:2px;}.drp-months-row.svelte-gpybdi {display:flex;gap:var(--drp-months-gap, 24px);}\n\n  /* Embedded calendar: strip outer chrome so only the grid shows */.drp-calendar-embedded {--calendar-border: none;--calendar-box-shadow: none;--calendar-background: transparent;--calendar-padding: 0;}\n\n  /* Suppress Calendar's own header in dual-month mode; single mode keeps it for navigation */.drp-months-row .drp-calendar-embedded {--calendar-header-display: none;}\n\n  /* ── Time picker slot ── */.drp-time-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-time-row-gap, 16px);padding-top:var(--drp-time-row-padding-top, 8px);border-top:var(--drp-time-divider, 1px solid #e8e8e8);flex-wrap:wrap;}\n\n  /* ── Built-in date + time inputs (showDateInputs / showTimeSelection) ── */.drp-datetime-header.svelte-gpybdi {display:flex;flex-direction:column;gap:var(--drp-datetime-gap, 8px);padding-bottom:var(--drp-datetime-padding-bottom, 12px);margin-bottom:var(--drp-datetime-margin-bottom, 4px);border-bottom:var(--drp-datetime-divider, 1px solid #e8e8e8);}.drp-date-input-row.svelte-gpybdi,\n  .drp-time-input-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-datetime-row-gap, 12px);}.drp-date-input.svelte-gpybdi {flex:1;min-width:0;padding:var(--drp-date-input-padding, 10px 14px);border:var(--drp-date-input-border, 1px solid #d4d4d4);border-radius:var(--drp-date-input-radius, var(--radius, 4px));background:var(--drp-date-input-background, #ffffff);}.drp-date-input-invalid.svelte-gpybdi {border-color:var(--drp-date-input-invalid-border, #e5484d);}\n\n  /* .drp-date-input-value below sets outline: none with nothing standing in\n     for it, so the visible replacement lives on the bordered wrapper instead\n     -- :focus-within lights up whenever the text input inside is focused.\n     class:drp-date-input-invalid sits alongside .drp-date-input on the same\n     div (see markup), and :focus-within's extra pseudo-class outweighs that\n     single class, so a focused invalid field shows the focus border, not the\n     invalid one -- focus location is the more time-sensitive signal. */.drp-date-input.svelte-gpybdi:focus-within {border-color:var(--drp-date-input-focus-border, #2563eb);box-shadow:var(--drp-date-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-date-input-value.svelte-gpybdi {display:block;width:100%;min-width:0;padding:0;border:none;outline:none;background:transparent;color:var(--drp-date-input-color, #333333);font-size:var(--drp-date-input-font-size, 13px);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.drp-date-input-value.svelte-gpybdi::placeholder {color:var(--drp-date-input-placeholder-color, #aaaaaa);}.drp-datetime-arrow.svelte-gpybdi {flex-shrink:0;display:inline-flex;width:var(--drp-datetime-arrow-size, 16px);height:var(--drp-datetime-arrow-size, 16px);color:var(--drp-datetime-arrow-color, #888888);}.drp-datetime-arrow.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-toggle.svelte-gpybdi {flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--drp-time-toggle-size, 40px);height:var(--drp-time-toggle-size, 40px);padding:0;border:var(--drp-time-toggle-border, 1px solid #d4d4d4);border-radius:var(--drp-time-toggle-radius, var(--radius, 4px));background:var(--drp-time-toggle-background, #f6f7f9);color:var(--drp-time-toggle-color, #555555);cursor:pointer;}.drp-time-toggle-active.svelte-gpybdi {border-color:var(--drp-time-toggle-active-border, currentColor);color:var(--drp-time-toggle-active-color, #1b85ff);}.drp-time-toggle-icon.svelte-gpybdi {display:inline-flex;width:var(--drp-time-toggle-icon-size, 16px);height:var(--drp-time-toggle-icon-size, 16px);}.drp-time-toggle-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-input.svelte-gpybdi {position:relative;flex:1;min-width:0;display:flex;align-items:center;border:var(--drp-time-input-border, 1px solid #d4d4d4);border-radius:var(--drp-time-input-radius, var(--radius, 4px));background:var(--drp-time-input-background, #ffffff);}.drp-time-input-invalid.svelte-gpybdi {border-color:var(--drp-time-input-invalid-border, #e5484d);}\n\n  /* .drp-time-field below sets outline: none with nothing standing in for it;\n     same fix as .drp-date-input:focus-within above, same specificity\n     reasoning against .drp-time-input-invalid. */.drp-time-input.svelte-gpybdi:focus-within {border-color:var(--drp-time-input-focus-border, #2563eb);box-shadow:var(--drp-time-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-time-input-icon.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-time-input-icon-size, 16px);height:var(--drp-time-input-icon-size, 16px);margin-left:var(--drp-time-input-icon-gap, 12px);color:var(--drp-time-input-icon-color, #888888);pointer-events:none;}.drp-time-input-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-field.svelte-gpybdi {flex:1;min-width:0;width:100%;padding:var(--drp-time-field-padding, 10px 14px 10px 8px);border:none;outline:none;background:transparent;color:var(--drp-time-field-color, #333333);font-size:var(--drp-time-field-font-size, 13px);font-family:inherit;}.drp-time-field.svelte-gpybdi::placeholder {color:var(--drp-time-field-placeholder-color, #aaaaaa);}\n\n  /* ── Inline time layout (timeSelectionLayout=\"inline\") ── */\n  /* Each date input is paired with its time input on the same row: the date box\n     flexes to fill, the time input takes a fixed compact width beside it. */.drp-date-time-group.svelte-gpybdi {display:flex;align-items:center;flex:1;min-width:0;gap:var(--drp-datetime-inline-gap, 8px);}.drp-date-time-group.svelte-gpybdi .drp-date-input:where(.svelte-gpybdi) {flex:1;}.drp-time-input.drp-time-input-inline.svelte-gpybdi {flex:0 0 var(--drp-time-inline-width, 116px);}\n\n  /* ── Compare calendar slot ── */.drp-compare-section.svelte-gpybdi {display:flex;flex-direction:column;gap:8px;padding-top:var(--drp-compare-padding-top, 12px);border-top:var(--drp-compare-divider, 1px solid #e8e8e8);}\n\n  /* ── Footer ── */.drp-footer.svelte-gpybdi {display:flex;justify-content:flex-end;align-items:center;gap:var(--drp-footer-gap, 8px);padding:var(--drp-footer-padding, 12px 16px);border-top:var(--drp-footer-border, 1px solid #e8e8e8);}\n\n  /* ── Preset group dividers ── */.drp-preset-divider.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-preset-divider-gap, 6px);margin:var(--drp-preset-divider-margin, 4px 0);padding:0 var(--drp-preset-padding-left, 12px);}.drp-preset-divider.svelte-gpybdi::before {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}.drp-preset-group-label.svelte-gpybdi {color:var(--drp-preset-group-label-color, #999999);white-space:nowrap;flex-shrink:0;}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi)) {padding-right:var(--drp-preset-padding-right, 12px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::before {flex:none;width:var(--drp-preset-divider-leader-width, 8px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::after {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}\n\n  /* Cancel button variant via Button's CSS vars */.drp-btn-cancel {--button-color: transparent;--button-border: 1px solid var(--drp-cancel-border-color, #d0d0d0);--button-text-color: var(--drp-cancel-color, inherit);--button-hover-color: var(--drp-cancel-hover-background, #f5f5f5);}\n\n  /* Clear button variant (single-mode reset) */.drp-btn-clear {--button-color: transparent;--button-border: 1px solid var(--drp-clear-border-color, #d0d0d0);--button-text-color: var(--drp-clear-color, inherit);--button-hover-color: var(--drp-clear-hover-background, #f5f5f5);margin-right:auto;}\n\n  /* Apply button variant */.drp-btn-apply {--button-color: var(--drp-apply-background, currentColor);--button-border: none;--button-text-color: var(--drp-apply-color, #ffffff);--button-hover-color: var(--drp-apply-hover-background, #333333);--disabled-background-color: var(--drp-apply-disabled-background, #cccccc);--disabled-text-color: var(--drp-apply-disabled-color, #888888);}\n\n  /* ── Compare standalone trigger ── */.drp-compare-trigger-wrapper.svelte-gpybdi {display:inline-block;position:relative;--button-color: var(--drp-compare-trigger-background, inherit);--button-border: var(--drp-compare-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-compare-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-compare-trigger-color, inherit);--button-padding: var(--drp-compare-trigger-padding, 8px 12px);--button-min-width: var(--drp-compare-trigger-min-width, 160px);}.drp-compare-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}\n\n  /* ── Compare standalone panel ── */.drp-compare-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));left:var(--drp-compare-panel-left, 0);z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-compare-panel-min-width, 280px);overflow:hidden;pointer-events:auto;}.drp-compare-panel-body.svelte-gpybdi {padding:var(--drp-calendars-padding, 16px);}"
+	code: ".drp-field-error.svelte-gpybdi {display:block;color:var(--drp-field-error-color, #b3261e);font-size:var(--drp-field-error-font-size, 11px);line-height:var(--drp-field-error-line-height, 1.4);margin-top:var(--drp-field-error-margin-top, 2px);}.drp-root.svelte-gpybdi {position:relative;display:var(--drp-root-display, inline-block);}\n\n  /* ── Trigger wrapper ── */.drp-trigger-wrapper.svelte-gpybdi {display:inline-block;}\n\n  /* Bridge drp-trigger CSS vars to Button CSS vars on the wrapper */.drp-trigger-wrapper.svelte-gpybdi {--button-color: var(--drp-trigger-background, inherit);--button-border: var(--drp-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-trigger-color, inherit);--button-padding: var(--drp-trigger-padding, 8px 12px);--button-min-width: var(--drp-trigger-min-width, 200px);--button-gap: var(--drp-trigger-gap, 8px);--button-hover-border: var(\n      --drp-trigger-hover-border,\n      var(--drp-trigger-border, 1px solid currentColor)\n    );}.drp-trigger-wrapper .drp-trigger {display:inline-flex;align-items:center;gap:var(--drp-trigger-gap, 8px);white-space:nowrap;min-width:var(--drp-trigger-min-width, 200px);}.drp-trigger-wrapper .drp-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}.drp-trigger-label.svelte-gpybdi {flex:1;text-align:left;}.drp-trigger-icon.svelte-gpybdi {display:inline-flex;align-items:center;color:var(--drp-trigger-icon-color, inherit);flex-shrink:0;}\n\n  /* ── Panel ── */.drp-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-panel-min-width, 320px);max-width:var(--drp-panel-max-width, 760px);max-height:var(--drp-panel-max-height, calc(100dvh - 80px));overflow:hidden;\n    /* A host may disable pointer events on an ancestor (a collapsing sidebar, say) and\n       an open aria-modal panel must stay usable, as Modal's content does. */pointer-events:auto;}\n\n  /* Set only when the panel would not fit below the trigger — see positionPanel(). */.drp-panel-above.svelte-gpybdi {top:auto;bottom:calc(100% + var(--drp-panel-offset, 6px));}.drp-panel-align-left.svelte-gpybdi {left:0;right:auto;}.drp-panel-align-right.svelte-gpybdi {right:0;left:auto;}\n\n  /* Opt-in sheet (responsiveLayout): confine the panel to the viewport instead of the\n     trigger. The insets are tokens because the free area differs per host (a fixed\n     sidebar, an embedding shell, safe-area insets); the defaults suit a bare page. */.drp-panel.drp-panel-sheet.svelte-gpybdi {position:fixed;top:var(--drp-sheet-top, auto);right:var(--drp-sheet-right, 16px);bottom:var(--drp-sheet-bottom, 16px);left:var(--drp-sheet-left, 16px);z-index:var(--drp-sheet-z-index, var(--drp-panel-z-index, 1000));width:auto;min-width:0;max-width:var(--drp-sheet-max-width, 48rem);max-height:var(--drp-sheet-max-height, calc(100dvh - 2rem));margin-inline:auto;}.drp-panel-inner.svelte-gpybdi {display:flex;flex-direction:row;flex:1;min-height:0;overflow-y:auto;}\n\n  /* ── Presets above the calendars (presetsPosition=\"top\", and every sheet) ── */.drp-panel-presets-top.svelte-gpybdi .drp-panel-inner:where(.svelte-gpybdi) {flex-direction:column;}.drp-panel-presets-top.svelte-gpybdi .drp-sidebar:where(.svelte-gpybdi) {flex:none;flex-direction:row;flex-wrap:wrap;min-width:0;max-height:none;overflow-y:visible;border-right:0;border-bottom:var(--drp-sidebar-border, 1px solid #e8e8e8);}.drp-panel-presets-top.svelte-gpybdi .drp-preset-item:where(.svelte-gpybdi) {width:auto;}.drp-panel-presets-top.svelte-gpybdi .drp-preset-divider:where(.svelte-gpybdi) {display:none;}.drp-panel-presets-top.svelte-gpybdi .drp-calendars:where(.svelte-gpybdi) {flex:none;}.drp-panel-presets-top.svelte-gpybdi .drp-months-row:where(.svelte-gpybdi) {justify-content:center;}\n\n  /* ── Narrow layout (responsiveLayout, <= 688px): one month, stacked inputs ── */.drp-panel-narrow.svelte-gpybdi .drp-calendars:where(.svelte-gpybdi) {padding:var(--drp-calendars-padding-narrow, 16px 8px);}.drp-panel-narrow.svelte-gpybdi .drp-calendar-embedded {max-width:100%;}.drp-panel-narrow.svelte-gpybdi .drp-date-input-row:where(.svelte-gpybdi),\n  .drp-panel-narrow.svelte-gpybdi .drp-time-input-row:where(.svelte-gpybdi) {flex-direction:column;align-items:stretch;}.drp-panel-narrow.svelte-gpybdi .drp-datetime-arrow:where(.svelte-gpybdi) {display:none;}\n\n  /* ── Sidebar ── */.drp-sidebar.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-sidebar-padding, 12px 8px);border-right:var(--drp-sidebar-border, 1px solid #e8e8e8);min-width:var(--drp-sidebar-min-width, 140px);gap:2px;overflow-y:auto;max-height:var(--drp-sidebar-max-height, 400px);}.drp-preset-item.svelte-gpybdi {display:block;width:100%;text-align:left;padding:var(--drp-preset-padding, 7px 12px);background:none;border:none;border-radius:var(--drp-preset-border-radius, var(--radius, 4px));color:var(--drp-preset-color, inherit);cursor:pointer;white-space:nowrap;transition:background var(--drp-preset-item-transition-duration, var(--motion-duration, 0.12s))\n      var(--drp-preset-item-transition-easing, var(--motion-easing, ease));}.drp-preset-item.svelte-gpybdi:hover {background:var(--drp-preset-hover-background, #f5f5f5);}.drp-preset-active.svelte-gpybdi {background:var(--drp-preset-active-background, currentColor);color:var(--drp-preset-active-color, #ffffff);}.drp-preset-active.svelte-gpybdi:hover {background:var(--drp-preset-active-hover-background, #333333);}\n\n  /* Opt-in checkmark layout: reserve a trailing slot so the active preset's tick\n     sits flush-right while the label stays left. A preset with no tick (or a\n     label-only preset) keeps its single flex child at the start, unchanged. */.drp-preset-checkable.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:var(--drp-preset-check-gap, 8px);}.drp-preset-check.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-preset-check-size, 16px);height:var(--drp-preset-check-size, 16px);color:var(--drp-preset-check-color, inherit);}.drp-preset-check.svelte-gpybdi svg {width:100%;height:100%;}\n\n  /* ── Calendar area ── */.drp-calendars.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-calendars-padding, 16px);gap:var(--drp-calendars-gap, 16px);flex:1;}\n\n  /* Dual-month shared nav header */.drp-dual-header.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:8px;}.drp-dual-month-labels.svelte-gpybdi {display:flex;flex:1;justify-content:space-around;}.drp-month-label.svelte-gpybdi {color:var(--drp-month-label-color, inherit);text-transform:capitalize;}.drp-nav-btn.svelte-gpybdi {display:inline-flex;align-items:center;justify-content:center;width:var(--drp-nav-btn-size, 32px);height:var(--drp-nav-btn-size, 32px);background:none;border:none;border-radius:var(--drp-nav-btn-border-radius, var(--radius, 4px));cursor:pointer;color:var(--drp-nav-btn-color, inherit);transition:background var(--drp-nav-btn-transition-duration, var(--motion-duration, 0.12s))\n      var(--drp-nav-btn-transition-easing, var(--motion-easing, ease));padding:0;}.drp-nav-btn.svelte-gpybdi:hover {background:var(--drp-nav-btn-hover-background, #f0f0f0);}\n\n  /* CSS-only chevrons for the dual-nav */.drp-nav-chevron.svelte-gpybdi {display:inline-block;width:8px;height:8px;border-right:var(--drp-nav-chevron-border, 2px solid currentColor);border-top:var(--drp-nav-chevron-border, 2px solid currentColor);}.drp-nav-chevron-left.svelte-gpybdi {transform:rotate(-135deg);margin-left:2px;}.drp-nav-chevron-right.svelte-gpybdi {transform:rotate(45deg);margin-right:2px;}.drp-months-row.svelte-gpybdi {display:flex;gap:var(--drp-months-gap, 24px);}\n\n  /* Embedded calendar: strip outer chrome so only the grid shows */.drp-calendar-embedded {--calendar-border: none;--calendar-box-shadow: none;--calendar-background: transparent;--calendar-padding: 0;}\n\n  /* Suppress Calendar's own header in dual-month mode; single mode keeps it for navigation */.drp-months-row .drp-calendar-embedded {--calendar-header-display: none;}\n\n  /* ── Time picker slot ── */.drp-time-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-time-row-gap, 16px);padding-top:var(--drp-time-row-padding-top, 8px);border-top:var(--drp-time-divider, 1px solid #e8e8e8);flex-wrap:wrap;}\n\n  /* ── Built-in date + time inputs (showDateInputs / showTimeSelection) ── */.drp-datetime-header.svelte-gpybdi {display:flex;flex-direction:column;gap:var(--drp-datetime-gap, 8px);padding-bottom:var(--drp-datetime-padding-bottom, 12px);margin-bottom:var(--drp-datetime-margin-bottom, 4px);border-bottom:var(--drp-datetime-divider, 1px solid #e8e8e8);}.drp-date-input-row.svelte-gpybdi,\n  .drp-time-input-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-datetime-row-gap, 12px);}.drp-date-input.svelte-gpybdi {flex:1;min-width:0;padding:var(--drp-date-input-padding, 10px 14px);border:var(--drp-date-input-border, 1px solid #d4d4d4);border-radius:var(--drp-date-input-radius, var(--radius, 4px));background:var(--drp-date-input-background, #ffffff);}.drp-date-input-invalid.svelte-gpybdi {border-color:var(--drp-date-input-invalid-border, #e5484d);}\n\n  /* .drp-date-input-value below sets outline: none with nothing standing in\n     for it, so the visible replacement lives on the bordered wrapper instead\n     -- :focus-within lights up whenever the text input inside is focused.\n     class:drp-date-input-invalid sits alongside .drp-date-input on the same\n     div (see markup), and :focus-within's extra pseudo-class outweighs that\n     single class, so a focused invalid field shows the focus border, not the\n     invalid one -- focus location is the more time-sensitive signal. */.drp-date-input.svelte-gpybdi:focus-within {border-color:var(--drp-date-input-focus-border, #2563eb);box-shadow:var(--drp-date-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-date-input-value.svelte-gpybdi {display:block;width:100%;min-width:0;padding:0;border:none;outline:none;background:transparent;color:var(--drp-date-input-color, #333333);font-size:var(--drp-date-input-font-size, 13px);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.drp-date-input-value.svelte-gpybdi::placeholder {color:var(--drp-date-input-placeholder-color, #aaaaaa);}.drp-datetime-arrow.svelte-gpybdi {flex-shrink:0;display:inline-flex;width:var(--drp-datetime-arrow-size, 16px);height:var(--drp-datetime-arrow-size, 16px);color:var(--drp-datetime-arrow-color, #888888);}.drp-datetime-arrow.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-toggle.svelte-gpybdi {flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--drp-time-toggle-size, 40px);height:var(--drp-time-toggle-size, 40px);padding:0;border:var(--drp-time-toggle-border, 1px solid #d4d4d4);border-radius:var(--drp-time-toggle-radius, var(--radius, 4px));background:var(--drp-time-toggle-background, #f6f7f9);color:var(--drp-time-toggle-color, #555555);cursor:pointer;}.drp-time-toggle-active.svelte-gpybdi {border-color:var(--drp-time-toggle-active-border, currentColor);color:var(--drp-time-toggle-active-color, #1b85ff);}.drp-time-toggle-icon.svelte-gpybdi {display:inline-flex;width:var(--drp-time-toggle-icon-size, 16px);height:var(--drp-time-toggle-icon-size, 16px);}.drp-time-toggle-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-input.svelte-gpybdi {position:relative;flex:1;min-width:0;display:flex;align-items:center;border:var(--drp-time-input-border, 1px solid #d4d4d4);border-radius:var(--drp-time-input-radius, var(--radius, 4px));background:var(--drp-time-input-background, #ffffff);}.drp-time-input-invalid.svelte-gpybdi {border-color:var(--drp-time-input-invalid-border, #e5484d);}\n\n  /* .drp-time-field below sets outline: none with nothing standing in for it;\n     same fix as .drp-date-input:focus-within above, same specificity\n     reasoning against .drp-time-input-invalid. */.drp-time-input.svelte-gpybdi:focus-within {border-color:var(--drp-time-input-focus-border, #2563eb);box-shadow:var(--drp-time-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-time-input-icon.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-time-input-icon-size, 16px);height:var(--drp-time-input-icon-size, 16px);margin-left:var(--drp-time-input-icon-gap, 12px);color:var(--drp-time-input-icon-color, #888888);pointer-events:none;}.drp-time-input-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-field.svelte-gpybdi {flex:1;min-width:0;width:100%;padding:var(--drp-time-field-padding, 10px 14px 10px 8px);border:none;outline:none;background:transparent;color:var(--drp-time-field-color, #333333);font-size:var(--drp-time-field-font-size, 13px);font-family:inherit;}.drp-time-field.svelte-gpybdi::placeholder {color:var(--drp-time-field-placeholder-color, #aaaaaa);}\n\n  /* ── Inline time layout (timeSelectionLayout=\"inline\") ── */\n  /* Each date input is paired with its time input on the same row: the date box\n     flexes to fill, the time input takes a fixed compact width beside it. */.drp-date-time-group.svelte-gpybdi {display:flex;align-items:center;flex:1;min-width:0;gap:var(--drp-datetime-inline-gap, 8px);}.drp-date-time-group.svelte-gpybdi .drp-date-input:where(.svelte-gpybdi) {flex:1;}.drp-time-input.drp-time-input-inline.svelte-gpybdi {flex:0 0 var(--drp-time-inline-width, 116px);}\n\n  /* ── Compare calendar slot ── */.drp-compare-section.svelte-gpybdi {display:flex;flex-direction:column;gap:8px;padding-top:var(--drp-compare-padding-top, 12px);border-top:var(--drp-compare-divider, 1px solid #e8e8e8);}\n\n  /* ── Footer ── */.drp-footer.svelte-gpybdi {display:flex;justify-content:flex-end;align-items:center;gap:var(--drp-footer-gap, 8px);padding:var(--drp-footer-padding, 12px 16px);border-top:var(--drp-footer-border, 1px solid #e8e8e8);}\n\n  /* ── Preset group dividers ── */.drp-preset-divider.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-preset-divider-gap, 6px);margin:var(--drp-preset-divider-margin, 4px 0);padding:0 var(--drp-preset-padding-left, 12px);}.drp-preset-divider.svelte-gpybdi::before {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}.drp-preset-group-label.svelte-gpybdi {color:var(--drp-preset-group-label-color, #999999);white-space:nowrap;flex-shrink:0;}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi)) {padding-right:var(--drp-preset-padding-right, 12px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::before {flex:none;width:var(--drp-preset-divider-leader-width, 8px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::after {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}\n\n  /* Cancel button variant via Button's CSS vars */.drp-btn-cancel {--button-color: transparent;--button-border: 1px solid var(--drp-cancel-border-color, #d0d0d0);--button-text-color: var(--drp-cancel-color, inherit);--button-hover-color: var(--drp-cancel-hover-background, #f5f5f5);}\n\n  /* Clear button variant (single-mode reset) */.drp-btn-clear {--button-color: transparent;--button-border: 1px solid var(--drp-clear-border-color, #d0d0d0);--button-text-color: var(--drp-clear-color, inherit);--button-hover-color: var(--drp-clear-hover-background, #f5f5f5);margin-right:auto;}\n\n  /* Apply button variant */.drp-btn-apply {--button-color: var(--drp-apply-background, currentColor);--button-border: none;--button-text-color: var(--drp-apply-color, #ffffff);--button-hover-color: var(--drp-apply-hover-background, #333333);--disabled-background-color: var(--drp-apply-disabled-background, #cccccc);--disabled-text-color: var(--drp-apply-disabled-color, #888888);}\n\n  /* ── Compare standalone trigger ── */.drp-compare-trigger-wrapper.svelte-gpybdi {display:inline-block;position:relative;--button-color: var(--drp-compare-trigger-background, inherit);--button-border: var(--drp-compare-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-compare-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-compare-trigger-color, inherit);--button-padding: var(--drp-compare-trigger-padding, 8px 12px);--button-min-width: var(--drp-compare-trigger-min-width, 160px);}.drp-compare-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}\n\n  /* ── Compare standalone panel ── */.drp-compare-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));left:var(--drp-compare-panel-left, 0);z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-compare-panel-min-width, 280px);overflow:hidden;pointer-events:auto;}.drp-compare-panel-body.svelte-gpybdi {padding:var(--drp-calendars-padding, 16px);}"
 };
 function DateRangePicker(e, t) {
 	let n = props_id();

package/package.json

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