@juspay/svelte-ui-components 3.5.1 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +24 -15
  2. package/dist/Checkbox/Checkbox.svelte +12 -1
  3. package/dist/Checkbox/properties.d.ts +10 -0
  4. package/dist/Table/Table.svelte +69 -123
  5. package/dist-wc/index.js +170 -139
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -38,15 +38,25 @@ This library takes a different approach: **components are unstyled by default**
38
38
 
39
39
  ---
40
40
 
41
- ## Coming in 4.0.0: one breaking change
42
-
43
- Advance notice, not a change in this release. **Nothing below has happened yet** —
44
- the current 3.x line still accepts everything it always did.
45
-
46
- In 4.0.0, `children` stops being a declared property on `sui-chat-bubble`,
47
- `sui-draggable` and `sui-resizable`. Assigning it will set an inert expando and
48
- the content will silently disappear. Pass the content as light-DOM children
49
- instead, which those wrappers will forward through their default slot:
41
+ ## Breaking changes, and the release they actually shipped in
42
+
43
+ **Both changes below shipped in 3.5.1, which went out as a patch by mistake.**
44
+ The release workflow picks the version from the newest commit alone, and the
45
+ commit that made the build green was a `fix:` — so the breaking commit beneath
46
+ it was never seen. 4.0.0 is that same content under the version number it
47
+ should have carried. A `^3.5.0` range already resolves to it; **3.5.0 is the
48
+ last release without these changes.**
49
+
50
+ **Every deprecated event-prop spelling is gone.** The 190 camelCase and
51
+ mixed-case event props that 3.x accepted as aliases are now unknown props,
52
+ which Svelte drops without an error — the handler simply stops running.
53
+ `npx sui-codemod ./src` rewrites them, and
54
+ [`docs/MIGRATION_4.0.md`](docs/MIGRATION_4.0.md) lists every pair.
55
+
56
+ **`children` is no longer a declared property** on `sui-chat-bubble`,
57
+ `sui-draggable` and `sui-resizable`. Assigning it sets an inert expando and the
58
+ content silently disappears. Pass the content as light-DOM children instead,
59
+ which those wrappers forward through their default slot:
50
60
 
51
61
  ```js
52
62
  el.children = mySnippet; // before — no longer works
@@ -58,13 +68,12 @@ el.children = mySnippet; // before — no longer works
58
68
  ```
59
69
 
60
70
  **Reading `element.children` is what the change fixes.** Declaring the property
61
- replaces the inherited accessor, so on those three elements `element.children`
62
- returns `undefined` rather than an `HTMLCollection` today and
63
- `el.children.length` throws. That is why the declaration has to go, and why it
64
- cannot go before a major.
71
+ replaced the inherited accessor, so up to 3.5.0 `element.children` returned
72
+ `undefined` on those three elements rather than an `HTMLCollection`, and
73
+ `el.children.length` threw. Removing the declaration gives the collection back.
65
74
 
66
- You can find affected call sites now, well before the major — this reports and
67
- writes nothing:
75
+ You can find affected call sites with a dry run — this reports and writes
76
+ nothing:
68
77
 
69
78
  ```sh
70
79
  npx sui-codemod --dry-run ./src
package/dist/Checkbox/Checkbox.svelte CHANGED
@@ -14,13 +14,23 @@
14
14
  onclick,
15
15
  classes,
16
16
  ariaControls,
17
- ariaLabel
17
+ ariaLabel,
18
+ controlled = false,
19
+ attributes
18
20
  }: CheckboxProperties = $props();
19
21
 
20
22
  function handleClick(): void {
21
23
  if (disabled) {
22
24
  return;
23
25
  }
26
+ // Controlled: the parent owns the state and is told what the click asked
27
+ // for. Nothing is flipped locally, so a parent that declines the change
28
+ // (a controlled table selection that rejects a row) keeps the box, the
29
+ // native input and aria-checked all agreeing with the value it passed.
30
+ if (controlled) {
31
+ onclick?.(!checked);
32
+ return;
33
+ }
24
34
  checked = !checked;
25
35
  if (indeterminate) {
26
36
  indeterminate = false;
@@ -76,6 +86,7 @@
76
86
  onkeydown={handleKeyDown}
77
87
  data-pw={typeof testId === 'string' ? `${testId}-box` : null}
78
88
  testID={typeof testId === 'string' ? `${testId}-box` : null}
89
+ {...attributes}
79
90
  >
80
91
  {#if checked && !indeterminate}
81
92
  {#if typeof checkedIcon === 'function'}
package/dist/Checkbox/properties.d.ts CHANGED
@@ -17,6 +17,16 @@ export type OptionalCheckboxProperties = {
17
17
  * since name-from-content cannot reach it. Ignored when `text` is non-empty:
18
18
  * a visible label must stay part of the accessible name (WCAG 2.5.3). */
19
19
  ariaLabel?: string;
20
+ /** Controlled mode: a click reports the requested value through `onclick`
21
+ * and changes nothing locally, so the parent's `checked` / `indeterminate`
22
+ * stay the single source of truth. Needed wherever the parent may decline
23
+ * the change (a table selection driven from a consumer-owned set). */
24
+ controlled?: boolean;
25
+ /** Extra DOM attributes spread onto the checkbox element itself (the
26
+ * `role="checkbox"` box, not the wrapping label) — an `id` for
27
+ * `aria-controls` to point at, or a consumer's own test attribute. Spread
28
+ * last, so a value here wins over the component's own `data-pw`. */
29
+ attributes?: Record<string, string>;
20
30
  };
21
31
  export type CheckboxEventProperties = {
22
32
  onclick?: (checked: boolean) => void;
package/dist/Table/Table.svelte CHANGED
@@ -10,12 +10,11 @@
10
10
  import Tooltip from '../Tooltip/Tooltip.svelte';
11
11
  import Pagination from '../Pagination/Pagination.svelte';
12
12
  import Select from '../Select/Select.svelte';
13
+ import Checkbox from '../Checkbox/Checkbox.svelte';
13
14
  import chevronDownSmSvg from '../assets/chevron-down-sm.svg?raw';
14
15
  import sortDefaultSvg from '../assets/sort-default.svg?raw';
15
16
  import searchSvg from '../assets/search.svg?raw';
16
17
  import closeSvg from '../assets/close.svg?raw';
17
- import checkmarkSvg from '../assets/checkmark.svg?raw';
18
- import minusSvg from '../assets/minus.svg?raw';
19
18
 
20
19
  let {
21
20
  tableTitle = '',
@@ -596,11 +595,22 @@
596
595
  checkboxSelection.onSelectionChange?.(new Set(internalSelectedIds));
597
596
  };
598
597
 
599
- const handleCheckboxKeydown = (event: KeyboardEvent, action: () => void): void => {
600
- if (event.key === ' ' || event.key === 'Enter') {
601
- event.preventDefault();
602
- action();
598
+ /**
599
+ * Attributes for one row checkbox (`rowIndex` -1 is the header). The row id
600
+ * doubles as the element id the header's `aria-controls` points at; the
601
+ * consumer's `getRowAttributes` is spread last so its own test attribute wins.
602
+ */
603
+ const checkboxAttributes = (rowId: string, rowIndex: number): Record<string, string> => {
604
+ const suffix = rowIndex === -1 ? 'select-all' : `row-checkbox-${rowId}`;
605
+ const own: Record<string, string> = rowIndex === -1 ? {} : { id: `row-checkbox-${rowId}` };
606
+ if (typeof testId === 'string') {
607
+ own['data-pw'] = `${testId}-${suffix}`;
608
+ own.testID = `${testId}-${suffix}`;
603
609
  }
610
+ const consumer = checkboxSelection?.getRowAttributes
611
+ ? checkboxSelection.getRowAttributes(rowId, rowIndex)
612
+ : {};
613
+ return { ...own, ...consumer };
604
614
  };
605
615
 
606
616
  let isCheckboxMode = $derived(!!checkboxSelection && checkboxSelection.enabled !== false);
@@ -674,37 +684,20 @@
674
684
  class="table-header table-checkbox-col"
675
685
  class:table-header-sticky={isStickyHeader}
676
686
  >
677
- <!-- Header tri-state checkbox -->
678
- <span
679
- class="table-checkbox-box"
680
- class:checked={headerCheckboxState === 'all'}
681
- class:indeterminate={headerCheckboxState === 'some'}
682
- role="checkbox"
683
- tabindex={0}
684
- aria-checked={headerCheckboxState === 'some'
685
- ? 'mixed'
686
- : headerCheckboxState === 'all'}
687
- aria-label="Select all rows"
688
- data-pw={typeof testId === 'string' ? `${testId}-select-all` : null}
689
- testID={typeof testId === 'string' ? `${testId}-select-all` : null}
690
- {...checkboxSelection?.getRowAttributes
691
- ? checkboxSelection.getRowAttributes('__header__', -1)
692
- : {}}
693
- aria-controls={selectableRowIds
687
+ <!-- Header tri-state checkbox: the library Checkbox in controlled mode,
688
+ so the tri-state is computed here and never flipped locally. -->
689
+ <Checkbox
690
+ text=""
691
+ ariaLabel="Select all rows"
692
+ controlled
693
+ checked={headerCheckboxState === 'all'}
694
+ indeterminate={headerCheckboxState === 'some'}
695
+ ariaControls={selectableRowIds
694
696
  .map((rowId) => `row-checkbox-${rowId}`)
695
697
  .join(' ')}
698
+ attributes={checkboxAttributes('__header__', -1)}
696
699
  onclick={toggleAllSelection}
697
- onkeydown={(keyboardEvent) =>
698
- handleCheckboxKeydown(keyboardEvent, toggleAllSelection)}
699
- >
700
- {#if headerCheckboxState === 'all'}
701
- <!-- eslint-disable svelte/no-at-html-tags -->
702
- <span class="table-checkbox-icon">{@html checkmarkSvg}</span>
703
- {:else if headerCheckboxState === 'some'}
704
- <!-- eslint-disable svelte/no-at-html-tags -->
705
- <span class="table-checkbox-icon">{@html minusSvg}</span>
706
- {/if}
707
- </span>
700
+ />
708
701
  </th>
709
702
  {:else if isCheckboxMode && isSingleSelect}
710
703
  <!-- In single-select mode the header cell is an empty spacer -->
@@ -917,40 +910,22 @@
917
910
  tabindex={isRowClickable ? 0 : null}
918
911
  >
919
912
  {#if isCheckboxMode}
920
- <td class="table-content table-checkbox-col">
921
- <span
922
- class="table-checkbox-box"
923
- class:checked={rowSelected}
924
- class:disabled={rowDisabled}
925
- role="checkbox"
926
- id={`row-checkbox-${rowId}`}
927
- tabindex={rowDisabled ? -1 : 0}
928
- aria-checked={rowSelected}
929
- aria-disabled={rowDisabled}
930
- aria-label={`Select row ${rowId || 'non-selectable'}`}
931
- data-pw={typeof testId === 'string'
932
- ? `${testId}-row-checkbox-${rowId}`
933
- : null}
934
- testID={typeof testId === 'string'
935
- ? `${testId}-row-checkbox-${rowId}`
936
- : null}
937
- {...checkboxSelection?.getRowAttributes
938
- ? checkboxSelection.getRowAttributes(rowId, rowIndex)
939
- : {}}
940
- onclick={(mouseEvent) => {
941
- mouseEvent.stopPropagation();
942
- toggleRowSelection(rowId);
943
- }}
944
- onkeydown={(keyboardEvent) => {
945
- keyboardEvent.stopPropagation();
946
- handleCheckboxKeydown(keyboardEvent, () => toggleRowSelection(rowId));
947
- }}
948
- >
949
- {#if rowSelected}
950
- <!-- eslint-disable svelte/no-at-html-tags -->
951
- <span class="table-checkbox-icon">{@html checkmarkSvg}</span>
952
- {/if}
953
- </span>
913
+ <!-- The cell swallows the click and the key so a clickable row does not
914
+ also fire its own handler when the checkbox is toggled. -->
915
+ <td
916
+ class="table-content table-checkbox-col"
917
+ onclick={(mouseEvent) => mouseEvent.stopPropagation()}
918
+ onkeydown={(keyboardEvent) => keyboardEvent.stopPropagation()}
919
+ >
920
+ <Checkbox
921
+ text=""
922
+ ariaLabel={`Select row ${rowId || 'non-selectable'}`}
923
+ controlled
924
+ checked={rowSelected}
925
+ disabled={rowDisabled}
926
+ attributes={checkboxAttributes(rowId, rowIndex)}
927
+ onclick={() => toggleRowSelection(rowId)}
928
+ />
954
929
  </td>
955
930
  {/if}
956
931
  {#if rowNumberColumn}
@@ -1444,64 +1419,35 @@
1444
1419
  }
1445
1420
 
1446
1421
  /* ── C2-1 Checkbox column ───────────────────────────────────────────────── */
1422
+ /* The column renders the library Checkbox. The table's own --table-checkbox-*
1423
+ tokens stay the public API and are bridged onto Checkbox's --checkbox-*
1424
+ variables here, so a consumer theming the table keeps working and a
1425
+ consumer theming Checkbox app-wide is overridden only inside the table. */
1447
1426
  .table-checkbox-col {
1448
1427
  width: var(--table-checkbox-col-width, 44px);
1449
1428
  padding: var(--table-checkbox-col-padding, 12px 12px);
1450
- }
1451
-
1452
- .table-checkbox-box {
1453
- display: inline-flex;
1454
- align-items: center;
1455
- justify-content: center;
1456
- width: var(--table-checkbox-size, 18px);
1457
- height: var(--table-checkbox-size, 18px);
1458
- border: var(--table-checkbox-border, 2px solid #9ca3af);
1459
- border-radius: var(--table-checkbox-border-radius, var(--radius, 4px));
1460
- background-color: var(--table-checkbox-background, transparent);
1461
- cursor: pointer;
1462
- flex-shrink: 0;
1463
- transition:
1464
- background-color 0.15s,
1465
- border-color 0.15s;
1466
- user-select: none;
1467
- }
1468
-
1469
- .table-checkbox-box:focus-visible {
1470
- outline: none;
1471
- box-shadow: var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));
1472
- }
1473
-
1474
- .table-checkbox-box:not(.disabled):hover {
1475
- border-color: var(--table-checkbox-hover-border-color, #6b7280);
1476
- }
1477
-
1478
- .table-checkbox-box.checked {
1479
- background-color: var(--table-checkbox-checked-background, #2563eb);
1480
- border-color: var(--table-checkbox-checked-border-color, #2563eb);
1481
- }
1482
-
1483
- .table-checkbox-box.indeterminate {
1484
- background-color: var(--table-checkbox-indeterminate-background, #2563eb);
1485
- border-color: var(--table-checkbox-indeterminate-border-color, #2563eb);
1486
- }
1487
-
1488
- .table-checkbox-box.disabled {
1489
- opacity: var(--table-checkbox-disabled-opacity, 0.4);
1490
- cursor: not-allowed;
1491
- }
1492
-
1493
- .table-checkbox-icon {
1494
- display: inline-flex;
1495
- align-items: center;
1496
- justify-content: center;
1497
- width: var(--table-checkbox-icon-size, 12px);
1498
- height: var(--table-checkbox-icon-size, 12px);
1499
- color: var(--table-checkbox-icon-color, #ffffff);
1500
- }
1501
-
1502
- .table-checkbox-icon :global(svg) {
1503
- width: 100%;
1504
- height: 100%;
1429
+ --checkbox-container-gap: 0;
1430
+ --checkbox-size: var(--table-checkbox-size, 18px);
1431
+ --checkbox-border: var(--table-checkbox-border, 2px solid #9ca3af);
1432
+ --checkbox-border-radius: var(--table-checkbox-border-radius, var(--radius, 4px));
1433
+ --checkbox-background: var(--table-checkbox-background, transparent);
1434
+ --checkbox-hover-border-color: var(--table-checkbox-hover-border-color, #6b7280);
1435
+ --checkbox-checked-background: var(--table-checkbox-checked-background, #2563eb);
1436
+ --checkbox-checked-border: var(
1437
+ --table-checkbox-checked-border,
1438
+ 2px solid var(--table-checkbox-checked-border-color, #2563eb)
1439
+ );
1440
+ --checkbox-indeterminate-background: var(--table-checkbox-indeterminate-background, #2563eb);
1441
+ --checkbox-indeterminate-border: var(
1442
+ --table-checkbox-indeterminate-border,
1443
+ 2px solid var(--table-checkbox-indeterminate-border-color, #2563eb)
1444
+ );
1445
+ --checkbox-disabled-opacity: var(--table-checkbox-disabled-opacity, 0.4);
1446
+ --checkbox-focus-ring: var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));
1447
+ --checkbox-icon-size: var(--table-checkbox-icon-size, 12px);
1448
+ --checkbox-checkmark-color: var(--table-checkbox-icon-color, #ffffff);
1449
+ --checkbox-dash-color: var(--table-checkbox-icon-color, #ffffff);
1450
+ --checkbox-transition: 0.15s;
1505
1451
  }
1506
1452
 
1507
1453
  /* ── Sort button ────────────────────────────────────────────────────────── */
package/dist-wc/index.js CHANGED
@@ -5739,20 +5739,26 @@ customElements.define("sui-carousel", create_custom_element(Carousel_wc, {
5739
5739
  }, [], [], { mode: "open" }));
5740
5740
  //#endregion
5741
5741
  //#region src/lib/assets/checkmark.svg?raw
5742
- var checkmark_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n</svg>\n", minus_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n</svg>\n", root$79 = /* @__PURE__ */ from_html("<span class=\"icon svelte-f1in4m\"></span>"), root_1$66 = /* @__PURE__ */ from_html("<span class=\"icon dash svelte-f1in4m\"></span>"), root_2$50 = /* @__PURE__ */ from_html("<label><input type=\"checkbox\" class=\"native-checkbox svelte-f1in4m\" aria-hidden=\"true\"/> <span role=\"checkbox\"><!> <!></span> <span class=\"label svelte-f1in4m\"> </span></label>"), $$css$77 = {
5742
+ var checkmark_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n</svg>\n", minus_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n</svg>\n", root$79 = /* @__PURE__ */ from_html("<span class=\"icon svelte-f1in4m\"></span>"), root_1$66 = /* @__PURE__ */ from_html("<span class=\"icon dash svelte-f1in4m\"></span>"), root_2$50 = /* @__PURE__ */ from_html("<label><input type=\"checkbox\" class=\"native-checkbox svelte-f1in4m\" aria-hidden=\"true\"/> <span><!> <!></span> <span class=\"label svelte-f1in4m\"> </span></label>"), $$css$77 = {
5743
5743
  hash: "svelte-f1in4m",
5744
5744
  code: ".container.svelte-f1in4m {display:var(--checkbox-container-display, inline-flex);align-items:var(--checkbox-container-align-items, center);gap:var(--checkbox-container-gap, 8px);cursor:var(--checkbox-container-cursor, pointer);}.container.disabled.svelte-f1in4m {opacity:var(--checkbox-disabled-opacity, 0.4);cursor:var(--checkbox-disabled-cursor, not-allowed);}.native-checkbox.svelte-f1in4m {position:absolute;opacity:0;width:0;height:0;pointer-events:none;}.box.svelte-f1in4m {display:inline-flex;align-items:center;justify-content:center;width:var(--checkbox-size, 20px);height:var(--checkbox-size, 20px);border:var(--checkbox-border, 2px solid #757575);border-radius:var(--checkbox-border-radius, var(--radius, 4px));background-color:var(--checkbox-background, transparent);transition:background-color var(--checkbox-transition, 0.2s),\n border var(--checkbox-transition, 0.2s);flex-shrink:0;}.box.svelte-f1in4m:focus-visible {outline:none;box-shadow:var(--checkbox-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));}.container.svelte-f1in4m:not(.disabled) .box:where(.svelte-f1in4m):hover {border-color:var(--checkbox-hover-border-color, #212121);}.box.checked.svelte-f1in4m {background-color:var(--checkbox-checked-background, #2196f3);border:var(--checkbox-checked-border, 2px solid #2196f3);}.box.indeterminate.svelte-f1in4m {background-color:var(--checkbox-indeterminate-background, #2196f3);border:var(--checkbox-indeterminate-border, 2px solid #2196f3);}.icon.svelte-f1in4m {display:inline-flex;align-items:center;justify-content:center;width:var(--checkbox-icon-size, 14px);height:var(--checkbox-icon-size, 14px);color:var(--checkbox-checkmark-color, white);}.icon.svelte-f1in4m svg {width:100%;height:100%;}.icon.dash.svelte-f1in4m {color:var(--checkbox-dash-color, white);}.label.svelte-f1in4m {font-size:var(--checkbox-label-font-size, 14px);font-weight:var(--checkbox-label-font-weight, 400);color:var(--checkbox-label-color, #212121);}"
5745
5745
  };
5746
5746
  function Checkbox(e, t) {
5747
5747
  push(t, !0), append_styles$1(e, $$css$77);
5748
- let n = prop(t, "text", 7), i = prop(t, "checked", 15, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "indeterminate", 15, !1), s = prop(t, "testId", 7), c = prop(t, "checkedIcon", 7), l = prop(t, "indeterminateIcon", 7), u = prop(t, "onclick", 7), f = prop(t, "classes", 7), p = prop(t, "ariaControls", 7), h = prop(t, "ariaLabel", 7);
5749
- function S() {
5750
- a() || (i(!i()), o() && o(!1), u()?.(i()));
5748
+ let n = prop(t, "text", 7), i = prop(t, "checked", 15, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "indeterminate", 15, !1), s = prop(t, "testId", 7), c = prop(t, "checkedIcon", 7), l = prop(t, "indeterminateIcon", 7), u = prop(t, "onclick", 7), f = prop(t, "classes", 7), p = prop(t, "ariaControls", 7), h = prop(t, "ariaLabel", 7), S = prop(t, "controlled", 7, !1), C = prop(t, "attributes", 7);
5749
+ function k() {
5750
+ if (!a()) {
5751
+ if (S()) {
5752
+ u()?.(!i());
5753
+ return;
5754
+ }
5755
+ i(!i()), o() && o(!1), u()?.(i());
5756
+ }
5751
5757
  }
5752
- function C(e) {
5753
- (e.key === " " || e.key === "Enter") && (e.preventDefault(), S());
5758
+ function R(e) {
5759
+ (e.key === " " || e.key === "Enter") && (e.preventDefault(), k());
5754
5760
  }
5755
- var k = {
5761
+ var te = {
5756
5762
  get text() {
5757
5763
  return n();
5758
5764
  },
@@ -5818,14 +5824,42 @@ function Checkbox(e, t) {
5818
5824
  },
5819
5825
  set ariaLabel(e) {
5820
5826
  h(e), flushSync();
5827
+ },
5828
+ get controlled() {
5829
+ return S();
5830
+ },
5831
+ set controlled(e = !1) {
5832
+ S(e), flushSync();
5833
+ },
5834
+ get attributes() {
5835
+ return C();
5836
+ },
5837
+ set attributes(e) {
5838
+ C(e), flushSync();
5821
5839
  }
5822
- }, R = root_2$50();
5823
- let te;
5824
- var ne = child(R);
5825
- remove_input_defaults(ne), set_attribute(ne, "tabindex", -1);
5826
- var re = sibling(ne, 2);
5827
- let G;
5828
- var be = child(re), Me = (e) => {
5840
+ }, ne = root_2$50();
5841
+ let re;
5842
+ var G = child(ne);
5843
+ remove_input_defaults(G), set_attribute(G, "tabindex", -1);
5844
+ var be = sibling(G, 2);
5845
+ attribute_effect(be, () => ({
5846
+ class: "box",
5847
+ role: "checkbox",
5848
+ tabindex: a() ? -1 : 0,
5849
+ "aria-checked": o() ? "mixed" : i(),
5850
+ "aria-disabled": a(),
5851
+ "aria-controls": p() ?? null,
5852
+ "aria-label": n().length === 0 ? h() ?? null : null,
5853
+ onkeydown: R,
5854
+ "data-pw": typeof s() == "string" ? `${s()}-box` : null,
5855
+ testID: typeof s() == "string" ? `${s()}-box` : null,
5856
+ ...C(),
5857
+ [CLASS]: {
5858
+ checked: i(),
5859
+ indeterminate: o()
5860
+ }
5861
+ }), void 0, void 0, void 0, "svelte-f1in4m");
5862
+ var Me = child(be), Re = (e) => {
5829
5863
  var t = comment(), n = first_child(t), i = (e) => {
5830
5864
  var t = comment();
5831
5865
  snippet(first_child(t), c), append(e, t);
@@ -5837,10 +5871,10 @@ function Checkbox(e, t) {
5837
5871
  typeof c() == "function" ? e(i) : e(a, -1);
5838
5872
  }), append(e, t);
5839
5873
  };
5840
- if_block(be, (e) => {
5841
- i() && !o() && e(Me);
5874
+ if_block(Me, (e) => {
5875
+ i() && !o() && e(Re);
5842
5876
  });
5843
- var Re = sibling(be, 2), Ue = (e) => {
5877
+ var Ue = sibling(Me, 2), it = (e) => {
5844
5878
  var t = comment(), n = first_child(t), i = (e) => {
5845
5879
  var t = comment();
5846
5880
  snippet(first_child(t), l), append(e, t);
@@ -5852,20 +5886,17 @@ function Checkbox(e, t) {
5852
5886
  typeof l() == "function" ? e(i) : e(a, -1);
5853
5887
  }), append(e, t);
5854
5888
  };
5855
- if_block(Re, (e) => {
5856
- o() && e(Ue);
5857
- }), reset(re);
5858
- var it = sibling(re, 2), at = child(it, !0);
5859
- return reset(it), reset(R), template_effect(() => {
5860
- te = set_class(R, 1, `container ${f() ?? "" ?? ""}`, "svelte-f1in4m", te, { disabled: a() }), set_attribute(R, "data-pw", s()), set_attribute(R, "testid", s()), set_checked(ne, i()), ne.disabled = a(), set_attribute(ne, "data-pw", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(ne, "testid", typeof s() == "string" ? `${s()}-native-input` : null), G = set_class(re, 1, "box svelte-f1in4m", null, G, {
5861
- checked: i(),
5862
- indeterminate: o()
5863
- }), set_attribute(re, "tabindex", a() ? -1 : 0), set_attribute(re, "aria-checked", o() ? "mixed" : i()), set_attribute(re, "aria-disabled", a()), set_attribute(re, "aria-controls", p() ?? null), set_attribute(re, "aria-label", n().length === 0 ? h() ?? null : null), set_attribute(re, "data-pw", typeof s() == "string" ? `${s()}-box` : null), set_attribute(re, "testid", typeof s() == "string" ? `${s()}-box` : null), set_attribute(it, "hidden", n().length === 0), set_text(at, n());
5864
- }), delegated("click", R, (e) => {
5865
- e.preventDefault(), S();
5866
- }), delegated("click", ne, (e) => e.stopPropagation()), delegated("keydown", re, C), append(e, R), pop(k);
5867
- }
5868
- delegate(["click", "keydown"]), create_custom_element(Checkbox, {
5889
+ if_block(Ue, (e) => {
5890
+ o() && e(it);
5891
+ }), reset(be);
5892
+ var at = sibling(be, 2), ot = child(at, !0);
5893
+ return reset(at), reset(ne), template_effect(() => {
5894
+ re = set_class(ne, 1, `container ${f() ?? "" ?? ""}`, "svelte-f1in4m", re, { disabled: a() }), set_attribute(ne, "data-pw", s()), set_attribute(ne, "testid", s()), set_checked(G, i()), G.disabled = a(), set_attribute(G, "data-pw", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(G, "testid", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(at, "hidden", n().length === 0), set_text(ot, n());
5895
+ }), delegated("click", ne, (e) => {
5896
+ e.preventDefault(), k();
5897
+ }), delegated("click", G, (e) => e.stopPropagation()), append(e, ne), pop(te);
5898
+ }
5899
+ delegate(["click"]), create_custom_element(Checkbox, {
5869
5900
  text: {},
5870
5901
  checked: {},
5871
5902
  disabled: {},
@@ -5876,7 +5907,9 @@ delegate(["click", "keydown"]), create_custom_element(Checkbox, {
5876
5907
  onclick: {},
5877
5908
  classes: {},
5878
5909
  ariaControls: {},
5879
- ariaLabel: {}
5910
+ ariaLabel: {},
5911
+ controlled: {},
5912
+ attributes: {}
5880
5913
  }, [], [], { mode: "open" });
5881
5914
  //#endregion
5882
5915
  //#region src/wc/components/Checkbox.wc.svelte
@@ -5947,6 +5980,11 @@ customElements.define("sui-checkbox", create_custom_element(Checkbox_wc, {
5947
5980
  attribute: "aria-controls",
5948
5981
  type: "String"
5949
5982
  },
5983
+ controlled: {
5984
+ reflect: !0,
5985
+ type: "Boolean"
5986
+ },
5987
+ attributes: { type: "Object" },
5950
5988
  onclick: { type: "Object" }
5951
5989
  }, ["checked-icon", "indeterminate-icon"], [], { mode: "open" }));
5952
5990
  //#endregion
@@ -18701,9 +18739,9 @@ delegate(["click", "keydown"]), create_custom_element(BuiltinCell, {
18701
18739
  }, [], [], { mode: "open" });
18702
18740
  //#endregion
18703
18741
  //#region src/lib/assets/sort-default.svg?raw
18704
- 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$28 = /* @__PURE__ */ from_html("<div class=\"table-title svelte-171ci2i\"> </div>"), root_1$24 = /* @__PURE__ */ from_html("<button class=\"table-search-clear svelte-171ci2i\" type=\"button\" aria-label=\"Clear search\"></button>"), root_2$19 = /* @__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$17 = /* @__PURE__ */ from_html("<div class=\"table-toolbar svelte-171ci2i\"><!></div>"), root_4$14 = /* @__PURE__ */ from_html("<caption class=\"sr-only svelte-171ci2i\"> </caption>"), root_5$13 = /* @__PURE__ */ from_html("<span class=\"table-checkbox-icon svelte-171ci2i\"></span>"), root_6$13 = /* @__PURE__ */ from_html("<th><span><!></span></th>"), root_7$11 = /* @__PURE__ */ from_html("<th></th>"), root_8$10 = /* @__PURE__ */ from_html("<th> </th>"), root_9$7 = /* @__PURE__ */ from_html("<span> </span>"), root_10$6 = /* @__PURE__ */ from_html("<span class=\"table-header-filter-icon svelte-171ci2i\"></span>"), root_11$6 = /* @__PURE__ */ from_html("<span><!></span>"), root_12$6 = /* @__PURE__ */ from_html("<span class=\"table-header-filter svelte-171ci2i\"><!></span>"), root_13$5 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-asc\"></span>"), root_14$5 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-desc\"></span>"), root_15$5 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-idle\"></span>"), root_16$4 = /* @__PURE__ */ from_html("<div class=\"sort-button svelte-171ci2i\"><!></div>"), root_17$3 = /* @__PURE__ */ from_html("<!> <span class=\"table-inline-search-clear svelte-171ci2i\"><!></span>", 1), root_18$3 = /* @__PURE__ */ from_html("<span class=\"table-inline-search-trigger svelte-171ci2i\"><!></span>"), root_19$3 = /* @__PURE__ */ from_html("<span class=\"table-header-inline-search svelte-171ci2i\"><!></span>"), root_20$2 = /* @__PURE__ */ from_html("<th><span class=\"table-header-content svelte-171ci2i\"><!> <!> <!> <!></span></th>"), root_21$2 = /* @__PURE__ */ from_html("<tr><td class=\"table-empty svelte-171ci2i\"><!></td></tr>"), root_22$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-checkbox-col svelte-171ci2i\"><span><!></span></td>"), root_23$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-row-number-col svelte-171ci2i\"> </td>"), root_24$2 = /* @__PURE__ */ from_html("<td><div><!></div></td>"), root_25$1 = /* @__PURE__ */ from_html("<tr><!><!><!></tr>"), root_26$1 = /* @__PURE__ */ from_html("<div class=\"table-footer svelte-171ci2i\"><!></div>"), root_27 = /* @__PURE__ */ from_html("<span class=\"table-paginator-size svelte-171ci2i\"><!></span>"), root_28 = /* @__PURE__ */ from_html("<span class=\"table-paginator-controls svelte-171ci2i\"><!> <!></span>"), root_29 = /* @__PURE__ */ from_html("<div class=\"table-footer table-paginator svelte-171ci2i\"><span class=\"table-paginator-range svelte-171ci2i\"> </span> <!></div>"), root_30 = /* @__PURE__ */ from_html("<div><div><div class=\"table-scroll svelte-171ci2i\"><table class=\"svelte-171ci2i\"><!><thead><tr><!><!><!></tr></thead><tbody><!></tbody></table></div></div> <!></div>"), root_31 = /* @__PURE__ */ from_html("<!> <!> <!> <!>", 1), $$css$29 = {
18742
+ 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$28 = /* @__PURE__ */ from_html("<div class=\"table-title svelte-171ci2i\"> </div>"), root_1$24 = /* @__PURE__ */ from_html("<button class=\"table-search-clear svelte-171ci2i\" type=\"button\" aria-label=\"Clear search\"></button>"), root_2$19 = /* @__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$17 = /* @__PURE__ */ from_html("<div class=\"table-toolbar svelte-171ci2i\"><!></div>"), root_4$14 = /* @__PURE__ */ from_html("<caption class=\"sr-only svelte-171ci2i\"> </caption>"), root_5$13 = /* @__PURE__ */ from_html("<th><!></th>"), root_6$13 = /* @__PURE__ */ from_html("<th></th>"), root_7$11 = /* @__PURE__ */ from_html("<th> </th>"), root_8$10 = /* @__PURE__ */ from_html("<span> </span>"), root_9$7 = /* @__PURE__ */ from_html("<span class=\"table-header-filter-icon svelte-171ci2i\"></span>"), root_10$6 = /* @__PURE__ */ from_html("<span><!></span>"), root_11$6 = /* @__PURE__ */ from_html("<span class=\"table-header-filter svelte-171ci2i\"><!></span>"), root_12$6 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-asc\"></span>"), root_13$5 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-desc\"></span>"), root_14$5 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-idle\"></span>"), root_15$5 = /* @__PURE__ */ from_html("<div class=\"sort-button svelte-171ci2i\"><!></div>"), root_16$4 = /* @__PURE__ */ from_html("<!> <span class=\"table-inline-search-clear svelte-171ci2i\"><!></span>", 1), root_17$3 = /* @__PURE__ */ from_html("<span class=\"table-inline-search-trigger svelte-171ci2i\"><!></span>"), root_18$3 = /* @__PURE__ */ from_html("<span class=\"table-header-inline-search svelte-171ci2i\"><!></span>"), root_19$3 = /* @__PURE__ */ from_html("<th><span class=\"table-header-content svelte-171ci2i\"><!> <!> <!> <!></span></th>"), root_20$2 = /* @__PURE__ */ from_html("<tr><td class=\"table-empty svelte-171ci2i\"><!></td></tr>"), root_21$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-checkbox-col svelte-171ci2i\"><!></td>"), root_22$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-row-number-col svelte-171ci2i\"> </td>"), root_23$2 = /* @__PURE__ */ from_html("<td><div><!></div></td>"), root_24$2 = /* @__PURE__ */ from_html("<tr><!><!><!></tr>"), root_25$1 = /* @__PURE__ */ from_html("<div class=\"table-footer svelte-171ci2i\"><!></div>"), root_26$1 = /* @__PURE__ */ from_html("<span class=\"table-paginator-size svelte-171ci2i\"><!></span>"), root_27 = /* @__PURE__ */ from_html("<span class=\"table-paginator-controls svelte-171ci2i\"><!> <!></span>"), root_28 = /* @__PURE__ */ from_html("<div class=\"table-footer table-paginator svelte-171ci2i\"><span class=\"table-paginator-range svelte-171ci2i\"> </span> <!></div>"), root_29 = /* @__PURE__ */ from_html("<div><div><div class=\"table-scroll svelte-171ci2i\"><table class=\"svelte-171ci2i\"><!><thead><tr><!><!><!></tr></thead><tbody><!></tbody></table></div></div> <!></div>"), root_30 = /* @__PURE__ */ from_html("<!> <!> <!> <!>", 1), $$css$29 = {
18705
18743
  hash: "svelte-171ci2i",
18706
- 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);color:var(--table-title-color, #111827);font-family:var(--table-title-font-family);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, #9ca3af);}\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 ──────────────────────────────────────────────────────────── */.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: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 0.2s 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);font-weight:var(--table-header-font-weight, 600);letter-spacing:var(--table-header-letter-spacing, 0.02em);text-transform:var(--table-header-text-transform);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 {background-color:var(--table-content-background, var(--table-content-border-bgcolor));font-size:var(--table-content-font-size, 14px);font-family:var(--table-content-font-family);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 ───────────────────────────────────────────────── */.table-checkbox-col.svelte-171ci2i {width:var(--table-checkbox-col-width, 44px);padding:var(--table-checkbox-col-padding, 12px 12px);}.table-checkbox-box.svelte-171ci2i {display:inline-flex;align-items:center;justify-content:center;width:var(--table-checkbox-size, 18px);height:var(--table-checkbox-size, 18px);border:var(--table-checkbox-border, 2px solid #9ca3af);border-radius:var(--table-checkbox-border-radius, var(--radius, 4px));background-color:var(--table-checkbox-background, transparent);cursor:pointer;flex-shrink:0;transition:background-color 0.15s,\n border-color 0.15s;user-select:none;}.table-checkbox-box.svelte-171ci2i:focus-visible {outline:none;box-shadow:var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));}.table-checkbox-box.svelte-171ci2i:not(.disabled):hover {border-color:var(--table-checkbox-hover-border-color, #6b7280);}.table-checkbox-box.checked.svelte-171ci2i {background-color:var(--table-checkbox-checked-background, #2563eb);border-color:var(--table-checkbox-checked-border-color, #2563eb);}.table-checkbox-box.indeterminate.svelte-171ci2i {background-color:var(--table-checkbox-indeterminate-background, #2563eb);border-color:var(--table-checkbox-indeterminate-border-color, #2563eb);}.table-checkbox-box.disabled.svelte-171ci2i {opacity:var(--table-checkbox-disabled-opacity, 0.4);cursor:not-allowed;}.table-checkbox-icon.svelte-171ci2i {display:inline-flex;align-items:center;justify-content:center;width:var(--table-checkbox-icon-size, 12px);height:var(--table-checkbox-icon-size, 12px);color:var(--table-checkbox-icon-color, #ffffff);}.table-checkbox-icon.svelte-171ci2i svg {width:100%;height:100%;}\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\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;}"
18744
+ 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);color:var(--table-title-color, #111827);font-family:var(--table-title-font-family);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, #9ca3af);}\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 ──────────────────────────────────────────────────────────── */.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: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 0.2s 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);font-weight:var(--table-header-font-weight, 600);letter-spacing:var(--table-header-letter-spacing, 0.02em);text-transform:var(--table-header-text-transform);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 {background-color:var(--table-content-background, var(--table-content-border-bgcolor));font-size:var(--table-content-font-size, 14px);font-family:var(--table-content-font-family);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);--checkbox-transition: 0.15s;}\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\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;}"
18707
18745
  };
18708
18746
  function Table(e, t) {
18709
18747
  push(t, !0), append_styles$1(e, $$css$29);
@@ -18823,7 +18861,13 @@ function Table(e, t) {
18823
18861
  at().onSelectionChange?.(new Set(Cn));
18824
18862
  }
18825
18863
  }, Pn = (e, t) => {
18826
- (e.key === " " || e.key === "Enter") && (e.preventDefault(), t());
18864
+ let n = t === -1 ? "select-all" : `row-checkbox-${e}`, i = t === -1 ? {} : { id: `row-checkbox-${e}` };
18865
+ typeof S() == "string" && (i["data-pw"] = `${S()}-${n}`, i.testID = `${S()}-${n}`);
18866
+ let a = at()?.getRowAttributes ? at().getRowAttributes(e, t) : {};
18867
+ return {
18868
+ ...i,
18869
+ ...a
18870
+ };
18827
18871
  }, Fn = /* @__PURE__ */ user_derived(() => !!at() && at().enabled !== !1), In = /* @__PURE__ */ user_derived(() => at()?.selectionMode === "single");
18828
18872
  var Ln = {
18829
18873
  get tableTitle() {
@@ -19036,7 +19080,7 @@ function Table(e, t) {
19036
19080
  set usePortal(e = !1) {
19037
19081
  gt(e), flushSync();
19038
19082
  }
19039
- }, Rn = root_31(), zn = first_child(Rn), Bn = (e) => {
19083
+ }, Rn = root_30(), zn = first_child(Rn), Bn = (e) => {
19040
19084
  var t = root$28(), i = child(t, !0);
19041
19085
  reset(t), template_effect(() => set_text(i, n())), append(e, t);
19042
19086
  };
@@ -19069,7 +19113,7 @@ function Table(e, t) {
19069
19113
  typeof ut() == "function" && get(Fn) && get(Tn).size > 0 && e(Wn);
19070
19114
  });
19071
19115
  var Gn = sibling(Un, 2), Kn = (e) => {
19072
- var t = root_30(), n = child(t);
19116
+ var t = root_29(), n = child(t);
19073
19117
  let i;
19074
19118
  var a = child(n), s = child(a), c = child(s), l = (e) => {
19075
19119
  var t = root_4$14(), n = child(t, !0);
@@ -19079,57 +19123,52 @@ function Table(e, t) {
19079
19123
  C() && e(l);
19080
19124
  });
19081
19125
  var u = sibling(c), f = child(u), G = child(f), be = (e) => {
19082
- var t = root_6$13();
19126
+ var t = root_5$13();
19083
19127
  let n;
19084
- var i = child(t), a = (e) => Pn(e, Nn);
19085
- attribute_effect(i, (e, t) => ({
19086
- class: "table-checkbox-box",
19087
- role: "checkbox",
19088
- tabindex: 0,
19089
- "aria-checked": get(jn) === "some" ? "mixed" : get(jn) === "all",
19090
- "aria-label": "Select all rows",
19091
- "data-pw": typeof S() == "string" ? `${S()}-select-all` : null,
19092
- testID: typeof S() == "string" ? `${S()}-select-all` : null,
19093
- ...e,
19094
- "aria-controls": t,
19095
- onclick: Nn,
19096
- onkeydown: a,
19097
- [CLASS]: {
19098
- checked: get(jn) === "all",
19099
- indeterminate: get(jn) === "some"
19100
- }
19101
- }), [() => at()?.getRowAttributes ? at().getRowAttributes("__header__", -1) : {}, () => get(An).map((e) => `row-checkbox-${e}`).join(" ")], void 0, void 0, "svelte-171ci2i");
19102
- var o = child(i), s = (e) => {
19103
- var t = root_5$13();
19104
- html(t, () => checkmark_default, !0), reset(t), append(e, t);
19105
- }, c = (e) => {
19106
- var t = root_5$13();
19107
- html(t, () => minus_default, !0), reset(t), append(e, t);
19108
- };
19109
- if_block(o, (e) => {
19110
- get(jn) === "all" ? e(s) : get(jn) === "some" && e(c, 1);
19111
- }), reset(i), reset(t), template_effect(() => n = set_class(t, 1, "table-header table-checkbox-col svelte-171ci2i", null, n, { "table-header-sticky": get(At) })), append(e, t);
19112
- }, ct = (e) => {
19113
- var t = root_7$11();
19128
+ var i = child(t);
19129
+ {
19130
+ let e = /* @__PURE__ */ user_derived(() => get(jn) === "all"), t = /* @__PURE__ */ user_derived(() => get(jn) === "some"), n = /* @__PURE__ */ user_derived(() => get(An).map((e) => `row-checkbox-${e}`).join(" ")), a = /* @__PURE__ */ user_derived(() => Pn("__header__", -1));
19131
+ Checkbox(i, {
19132
+ text: "",
19133
+ ariaLabel: "Select all rows",
19134
+ controlled: !0,
19135
+ get checked() {
19136
+ return get(e);
19137
+ },
19138
+ get indeterminate() {
19139
+ return get(t);
19140
+ },
19141
+ get ariaControls() {
19142
+ return get(n);
19143
+ },
19144
+ get attributes() {
19145
+ return get(a);
19146
+ },
19147
+ onclick: Nn
19148
+ });
19149
+ }
19150
+ reset(t), template_effect(() => n = set_class(t, 1, "table-header table-checkbox-col svelte-171ci2i", null, n, { "table-header-sticky": get(At) })), append(e, t);
19151
+ }, at = (e) => {
19152
+ var t = root_6$13();
19114
19153
  let n;
19115
19154
  template_effect(() => n = set_class(t, 1, "table-header table-checkbox-col svelte-171ci2i", null, n, { "table-header-sticky": get(At) })), append(e, t);
19116
19155
  };
19117
19156
  if_block(G, (e) => {
19118
- get(Fn) && !get(In) ? e(be) : get(Fn) && get(In) && e(ct, 1);
19157
+ get(Fn) && !get(In) ? e(be) : get(Fn) && get(In) && e(at, 1);
19119
19158
  });
19120
- var ut = sibling(G), _t = (e) => {
19121
- var t = root_8$10();
19159
+ var ct = sibling(G), ut = (e) => {
19160
+ var t = root_7$11();
19122
19161
  let n;
19123
19162
  var i = child(t, !0);
19124
19163
  reset(t), template_effect(() => {
19125
19164
  n = set_class(t, 1, "table-header table-row-number-col svelte-171ci2i", null, n, { "table-header-sticky": get(At) }), set_text(i, ft());
19126
19165
  }), append(e, t);
19127
19166
  };
19128
- if_block(ut, (e) => {
19129
- dt() && e(_t);
19130
- }), each(sibling(ut), 17, () => get(vt), index, (e, t, n) => {
19167
+ if_block(ct, (e) => {
19168
+ dt() && e(ut);
19169
+ }), each(sibling(ct), 17, () => get(vt), index, (e, t, n) => {
19131
19170
  let i = /* @__PURE__ */ user_derived(() => o()?.[n]);
19132
- var a = root_20$2();
19171
+ var a = root_19$3();
19133
19172
  let s, c;
19134
19173
  var l = child(a);
19135
19174
  let u;
@@ -19146,7 +19185,7 @@ function Table(e, t) {
19146
19185
  },
19147
19186
  iconPosition: "trailing",
19148
19187
  children: (e, n) => {
19149
- var i = root_9$7();
19188
+ var i = root_8$10();
19150
19189
  let a;
19151
19190
  var o = child(i, !0);
19152
19191
  reset(i), template_effect(() => {
@@ -19164,15 +19203,15 @@ function Table(e, t) {
19164
19203
  });
19165
19204
  var S = sibling(f, 2), C = (e) => {
19166
19205
  let n = /* @__PURE__ */ user_derived(() => get(i).filter);
19167
- var a = root_12$6(), o = child(a);
19206
+ var a = root_11$6(), o = child(a);
19168
19207
  {
19169
19208
  let e = (e) => {
19170
- var a = root_11$6();
19209
+ var a = root_10$6();
19171
19210
  let o;
19172
19211
  var s = child(a);
19173
19212
  {
19174
19213
  let e = (e) => {
19175
- var t = root_10$6();
19214
+ var t = root_9$7();
19176
19215
  html(t, () => chevron_down_sm_default, !0), reset(t), append(e, t);
19177
19216
  }, n = /* @__PURE__ */ user_derived(() => get(i).testId && `${get(i).testId}-filter-trigger`);
19178
19217
  Button(s, {
@@ -19213,7 +19252,7 @@ function Table(e, t) {
19213
19252
  get(i)?.filter && e(C);
19214
19253
  });
19215
19254
  var ne = sibling(S, 2), re = (e) => {
19216
- var i = root_16$4();
19255
+ var i = root_15$5();
19217
19256
  Button(child(i), {
19218
19257
  onclick: () => Et(n),
19219
19258
  get ariaLabel() {
@@ -19225,7 +19264,7 @@ function Table(e, t) {
19225
19264
  var t = comment();
19226
19265
  snippet(first_child(t), k), append(e, t);
19227
19266
  }, a = (e) => {
19228
- var t = root_13$5();
19267
+ var t = root_12$6();
19229
19268
  html(t, () => sort_default_default, !0), reset(t), append(e, t);
19230
19269
  };
19231
19270
  if_block(n, (e) => {
@@ -19236,7 +19275,7 @@ function Table(e, t) {
19236
19275
  var t = comment();
19237
19276
  snippet(first_child(t), R), append(e, t);
19238
19277
  }, a = (e) => {
19239
- var t = root_14$5();
19278
+ var t = root_13$5();
19240
19279
  html(t, () => sort_default_default, !0), reset(t), append(e, t);
19241
19280
  };
19242
19281
  if_block(n, (e) => {
@@ -19246,7 +19285,7 @@ function Table(e, t) {
19246
19285
  var t = comment();
19247
19286
  snippet(first_child(t), te), append(e, t);
19248
19287
  }, l = (e) => {
19249
- var t = root_15$5();
19288
+ var t = root_14$5();
19250
19289
  html(t, () => sort_default_default, !0), reset(t), append(e, t);
19251
19290
  };
19252
19291
  if_block(a, (e) => {
@@ -19260,8 +19299,8 @@ function Table(e, t) {
19260
19299
  get(G) && e(re);
19261
19300
  });
19262
19301
  var be = sibling(ne, 2), Me = (e) => {
19263
- var t = root_19$3(), n = child(t), i = (e) => {
19264
- var t = root_17$3(), n = first_child(t);
19302
+ var t = root_18$3(), n = child(t), i = (e) => {
19303
+ var t = root_16$4(), n = first_child(t);
19265
19304
  {
19266
19305
  let e = /* @__PURE__ */ user_derived(() => ot()?.placeholder ?? "Search…"), t = /* @__PURE__ */ user_derived(() => ot()?.testId ?? ""), i = /* @__PURE__ */ user_derived(() => ot()?.placeholder ?? "Search");
19267
19306
  bind_this(Input(n, {
@@ -19297,7 +19336,7 @@ function Table(e, t) {
19297
19336
  $$slots: { icon: !0 }
19298
19337
  }), reset(i), append(e, t);
19299
19338
  }, a = (e) => {
19300
- var t = root_18$3(), n = child(t);
19339
+ var t = root_17$3(), n = child(t);
19301
19340
  {
19302
19341
  let e = (e) => {
19303
19342
  var t = comment();
@@ -19336,59 +19375,51 @@ function Table(e, t) {
19336
19375
  }), u = set_style(l, "", u, { "justify-content": get(i)?.align === "right" ? "flex-end" : get(i)?.align === "center" ? "center" : null });
19337
19376
  }), append(e, a);
19338
19377
  }), reset(f), reset(u);
19339
- var yt = sibling(u), xt = child(yt), Lt = (e) => {
19340
- var t = root_21$2(), n = child(t);
19378
+ var _t = sibling(u), yt = child(_t), xt = (e) => {
19379
+ var t = root_20$2(), n = child(t);
19341
19380
  snippet(child(n), re), reset(n), reset(t), template_effect(() => set_attribute(n, "colspan", get(vt).length + +!!get(Fn) + +!!dt())), append(e, t);
19342
- }, Rt = (e) => {
19381
+ }, Lt = (e) => {
19343
19382
  var t = comment();
19344
19383
  each(first_child(t), 19, () => get(pn), (e, t) => get(kn).get(e) ?? t, (e, t, n) => {
19345
19384
  let i = /* @__PURE__ */ user_derived(() => get(n) + get(xn)), a = /* @__PURE__ */ user_derived(() => get(bt).get(get(t)) ?? get(i)), s = /* @__PURE__ */ user_derived(() => get(kn).get(get(t)) ?? String(get(i))), c = /* @__PURE__ */ user_derived(() => get(Fn) && En(get(s))), l = /* @__PURE__ */ user_derived(() => get(Fn) && Dn(get(s)));
19346
- var u = root_25$1();
19385
+ var u = root_24$2();
19347
19386
  let f;
19348
- var p = child(u), C = (e) => {
19349
- var t = root_22$2(), n = child(t), a = (e) => {
19350
- e.stopPropagation(), Mn(get(s));
19351
- }, o = (e) => {
19352
- e.stopPropagation(), Pn(e, () => Mn(get(s)));
19353
- };
19354
- attribute_effect(n, (e) => ({
19355
- class: "table-checkbox-box",
19356
- role: "checkbox",
19357
- id: `row-checkbox-${get(s)}`,
19358
- tabindex: get(c) ? -1 : 0,
19359
- "aria-checked": get(l),
19360
- "aria-disabled": get(c),
19361
- "aria-label": `Select row ${get(s) || "non-selectable"}`,
19362
- "data-pw": typeof S() == "string" ? `${S()}-row-checkbox-${get(s)}` : null,
19363
- testID: typeof S() == "string" ? `${S()}-row-checkbox-${get(s)}` : null,
19364
- ...e,
19365
- onclick: a,
19366
- onkeydown: o,
19367
- [CLASS]: {
19368
- checked: get(l),
19369
- disabled: get(c)
19370
- }
19371
- }), [() => at()?.getRowAttributes ? at().getRowAttributes(get(s), get(i)) : {}], void 0, void 0, "svelte-171ci2i");
19372
- var u = child(n), f = (e) => {
19373
- var t = root_5$13();
19374
- html(t, () => checkmark_default, !0), reset(t), append(e, t);
19375
- };
19376
- if_block(u, (e) => {
19377
- get(l) && e(f);
19378
- }), reset(n), reset(t), append(e, t);
19387
+ var p = child(u), S = (e) => {
19388
+ var t = root_21$2(), n = child(t);
19389
+ {
19390
+ let e = /* @__PURE__ */ user_derived(() => `Select row ${get(s) || "non-selectable"}`), t = /* @__PURE__ */ user_derived(() => Pn(get(s), get(i)));
19391
+ Checkbox(n, {
19392
+ text: "",
19393
+ get ariaLabel() {
19394
+ return get(e);
19395
+ },
19396
+ controlled: !0,
19397
+ get checked() {
19398
+ return get(l);
19399
+ },
19400
+ get disabled() {
19401
+ return get(c);
19402
+ },
19403
+ get attributes() {
19404
+ return get(t);
19405
+ },
19406
+ onclick: () => Mn(get(s))
19407
+ });
19408
+ }
19409
+ reset(t), delegated("click", t, (e) => e.stopPropagation()), delegated("keydown", t, (e) => e.stopPropagation()), append(e, t);
19379
19410
  };
19380
19411
  if_block(p, (e) => {
19381
- get(Fn) && e(C);
19412
+ get(Fn) && e(S);
19382
19413
  });
19383
- var k = sibling(p), R = (e) => {
19384
- var t = root_23$2(), i = child(t, !0);
19414
+ var C = sibling(p), k = (e) => {
19415
+ var t = root_22$2(), i = child(t, !0);
19385
19416
  reset(t), template_effect((e) => set_text(i, e), [() => bn(get(n))]), append(e, t);
19386
19417
  };
19387
- if_block(k, (e) => {
19388
- dt() && e(R);
19389
- }), each(sibling(k), 17, () => get(t), index, (e, n, s) => {
19418
+ if_block(C, (e) => {
19419
+ dt() && e(k);
19420
+ }), each(sibling(C), 17, () => get(t), index, (e, n, s) => {
19390
19421
  let c = /* @__PURE__ */ user_derived(() => o()?.[s]), l = /* @__PURE__ */ user_derived(() => get(St)?.get(get(t))), u = /* @__PURE__ */ user_derived(() => typeof get(n) == "string" || typeof get(n) == "number" || typeof get(n) == "boolean");
19391
- var f = root_24$2();
19422
+ var f = root_23$2();
19392
19423
  let p, S;
19393
19424
  var C = child(f);
19394
19425
  let k;
@@ -19446,18 +19477,18 @@ function Table(e, t) {
19446
19477
  }), append(e, u);
19447
19478
  }), append(e, t);
19448
19479
  };
19449
- if_block(xt, (e) => {
19450
- get(an).length === 0 && typeof re() == "function" ? e(Lt) : e(Rt, -1);
19451
- }), reset(yt), reset(s), reset(a), action(a, (e) => Nt?.(e)), reset(n);
19452
- var Zt = sibling(n, 2), en = (e) => {
19453
- var t = root_26$1();
19480
+ if_block(yt, (e) => {
19481
+ get(an).length === 0 && typeof re() == "function" ? e(xt) : e(Lt, -1);
19482
+ }), reset(_t), reset(s), reset(a), action(a, (e) => Nt?.(e)), reset(n);
19483
+ var Rt = sibling(n, 2), Zt = (e) => {
19484
+ var t = root_25$1();
19454
19485
  snippet(child(t), Re), reset(t), append(e, t);
19455
- }, rn = (e) => {
19456
- var t = root_29(), n = child(t), i = child(n, !0);
19486
+ }, en = (e) => {
19487
+ var t = root_28(), n = child(t), i = child(n, !0);
19457
19488
  reset(n);
19458
19489
  var a = sibling(n, 2), o = (e) => {
19459
- var t = root_28(), n = child(t), i = (e) => {
19460
- var t = root_27(), n = child(t);
19490
+ var t = root_27(), n = child(t), i = (e) => {
19491
+ var t = root_26$1(), n = child(t);
19461
19492
  {
19462
19493
  let e = /* @__PURE__ */ user_derived(() => get(hn).map((e) => ({
19463
19494
  id: String(e),
@@ -19529,8 +19560,8 @@ function Table(e, t) {
19529
19560
  set_attribute(t, "data-pw", lt().testId ?? null), set_attribute(t, "testid", lt().testId ?? null), set_attribute(n, "data-pw", lt().rangeTestId ?? (typeof S() == "string" ? `${S()}-paginator-range` : lt()?.testId ? `${lt().testId}-range` : null)), set_attribute(n, "testid", lt().rangeTestId ?? (typeof S() == "string" ? `${S()}-paginator-range` : lt()?.testId ? `${lt().testId}-range` : null)), set_text(i, get(mn));
19530
19561
  }), append(e, t);
19531
19562
  };
19532
- if_block(Zt, (e) => {
19533
- typeof Re() == "function" ? e(en) : lt() && (get(fn) > 1 || lt().hasMore || lt().showFooterOnSinglePage || get(gn) && get(_n)) && e(rn, 1);
19563
+ if_block(Rt, (e) => {
19564
+ typeof Re() == "function" ? e(Zt) : lt() && (get(fn) > 1 || lt().hasMore || lt().showFooterOnSinglePage || get(gn) && get(_n)) && e(en, 1);
19534
19565
  }), reset(t), template_effect(() => {
19535
19566
  set_class(t, 1, `table-container ${p() ? "scrollable-table" : ""} ${Me() ?? "" ?? ""}`, "svelte-171ci2i"), set_attribute(t, "data-pw", S()), set_attribute(t, "testid", S()), i = set_class(n, 1, "table-scroll-shell svelte-171ci2i", null, i, {
19536
19567
  "scrollable-left": get(jt),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "3.5.1",
3
+ "version": "4.1.0",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",