@juspay/svelte-ui-components 4.2.0 → 4.4.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 (8) hide show
  1. package/dist/EmptyState/EmptyState.svelte +19 -2
  2. package/dist/EmptyState/properties.d.ts +10 -0
  3. package/dist/Pill/Pill.svelte +45 -6
  4. package/dist/Pill/pillTone.d.ts +15 -0
  5. package/dist/Pill/pillTone.js +16 -0
  6. package/dist/Pill/properties.d.ts +14 -0
  7. package/dist-wc/index.js +97 -70
  8. package/package.json +1 -1
package/dist/EmptyState/EmptyState.svelte CHANGED
@@ -9,7 +9,8 @@
9
9
  classes,
10
10
  testId,
11
11
  titleSnippet,
12
- descriptionSnippet
12
+ descriptionSnippet,
13
+ density
13
14
  }: EmptyStateProperties = $props();
14
15
  </script>
15
16
 
@@ -17,6 +18,7 @@
17
18
  class="empty-state {classes ?? ''}"
18
19
  data-pw={typeof testId === 'string' ? testId : null}
19
20
  testID={typeof testId === 'string' ? testId : null}
21
+ data-density={typeof density === 'string' ? density : null}
20
22
  >
21
23
  {#if typeof icon === 'function'}
22
24
  <div class="empty-state-icon">
@@ -62,13 +64,28 @@
62
64
  .empty-state {
63
65
  display: flex;
64
66
  flex-direction: column;
65
- align-items: center;
67
+ align-items: var(--empty-state-align-items, center);
66
68
  padding: var(--empty-state-padding, 32px 16px);
67
69
  text-align: var(--empty-state-text-align, center);
68
70
  gap: var(--empty-state-gap, 0px);
69
71
  color: inherit;
70
72
  }
71
73
 
74
+ /* Density-scoped fallbacks. Higher specificity than `.empty-state` alone, so
75
+ these only take over when `data-density` is actually set — no attribute,
76
+ no match, today's defaults above stand untouched. `--empty-state-padding`
77
+ and `--empty-state-gap` are read first in both cases, so an instance-level
78
+ override always wins over either density's default. */
79
+ .empty-state[data-density='page'] {
80
+ padding: var(--empty-state-padding, 48px 24px);
81
+ gap: var(--empty-state-gap, 12px);
82
+ }
83
+
84
+ .empty-state[data-density='panel'] {
85
+ padding: var(--empty-state-padding, 16px 12px);
86
+ gap: var(--empty-state-gap, 4px);
87
+ }
88
+
72
89
  .empty-state-icon {
73
90
  width: var(--empty-state-icon-size, 48px);
74
91
  height: var(--empty-state-icon-size, 48px);
package/dist/EmptyState/properties.d.ts CHANGED
@@ -16,6 +16,16 @@ export type OptionalEmptyStateProperties = {
16
16
  children?: Snippet;
17
17
  classes?: string;
18
18
  testId?: string;
19
+ /**
20
+ * Sets sane padding/gap defaults for the placeholder's context, without
21
+ * requiring a wrapper class. Omit for today's default sizing (unchanged).
22
+ * `'page'` is roomier, for a full route/view standing in for its content.
23
+ * `'panel'` is tighter, for a constrained panel, popover, or rail.
24
+ * Exposed on the root element as `data-density` so a consumer's own CSS can
25
+ * target it too. Either default can still be overridden per-instance with
26
+ * `--empty-state-padding` / `--empty-state-gap`, which always take priority.
27
+ */
28
+ density?: 'page' | 'panel';
19
29
  /**
20
30
  * Optional snippet that replaces the `title` string at render time.
21
31
  * When provided, the mandatory `title` prop is still required for backward-compatibility
package/dist/Pill/Pill.svelte CHANGED
@@ -2,11 +2,13 @@
2
2
  import type { PillProperties } from './properties';
3
3
  import Button from '../Button/Button.svelte';
4
4
  import closeSvg from '../assets/close.svg?raw';
5
+ import { pillToneClass } from './pillTone';
5
6
 
6
7
  let {
7
8
  text,
8
9
  dismissible = false,
9
10
  disabled = false,
11
+ tone,
10
12
  testId,
11
13
  title,
12
14
  dismissIcon,
@@ -49,7 +51,7 @@
49
51
 
50
52
  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
51
53
  <div
52
- class="pill {classes ?? ''}"
54
+ class="pill {pillToneClass(tone)} {classes ?? ''}"
53
55
  class:disabled
54
56
  onclick={interactive ? handleClick : null}
55
57
  onkeydown={interactive ? handleKeydown : null}
@@ -96,23 +98,60 @@
96
98
  justify-content: var(--pill-justify-content, center);
97
99
  text-align: var(--pill-text-align, center);
98
100
  gap: var(--pill-gap, 4px);
99
- background-color: var(--pill-background, #e0e0e0);
100
- color: var(--pill-color, #333333);
101
+ background-color: var(--pill-background, var(--_pill-tone-background, #e0e0e0));
102
+ color: var(--pill-color, var(--_pill-tone-color, #333333));
101
103
  font-size: var(--pill-font-size, 13px);
102
104
  font-weight: var(--pill-font-weight, 500);
103
105
  font-family: var(--pill-font-family);
106
+ letter-spacing: var(--pill-letter-spacing, normal);
107
+ text-transform: var(--pill-text-transform, none);
104
108
  padding: var(--pill-padding, 6px 10px);
105
109
  border-radius: var(--pill-border-radius, 999px);
106
110
  border: var(--pill-border, none);
107
- cursor: var(--pill-cursor, pointer);
111
+ /* Non-interactive by default: nothing is clickable, so nothing should look
112
+ clickable. The pointer default below applies only once role="button" is
113
+ actually present (see handleClick / `interactive`) — an explicit
114
+ --pill-cursor still wins in both cases. */
115
+ cursor: var(--pill-cursor, default);
108
116
  max-width: var(--pill-max-width);
109
117
  line-height: var(--pill-line-height, 1);
110
118
  flex-shrink: var(--pill-flex-shrink);
111
119
  }
112
120
 
121
+ .pill[role='button'] {
122
+ cursor: var(--pill-cursor, pointer);
123
+ }
124
+
125
+ /* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's
126
+ variant classes set --_btn-*: a plain --pill-background/--pill-color
127
+ (explicit, or via `classes`) always wins over the tone's default. */
128
+ .tone-accent {
129
+ --_pill-tone-background: var(--pill-tone-accent-background, #d1ecf1);
130
+ --_pill-tone-color: var(--pill-tone-accent-color, #0c5460);
131
+ }
132
+ .tone-ok {
133
+ --_pill-tone-background: var(--pill-tone-ok-background, #d4edda);
134
+ --_pill-tone-color: var(--pill-tone-ok-color, #155724);
135
+ }
136
+ .tone-warn {
137
+ --_pill-tone-background: var(--pill-tone-warn-background, #fff3cd);
138
+ --_pill-tone-color: var(--pill-tone-warn-color, #856404);
139
+ }
140
+ .tone-danger {
141
+ --_pill-tone-background: var(--pill-tone-danger-background, #f8d7da);
142
+ --_pill-tone-color: var(--pill-tone-danger-color, #721c24);
143
+ }
144
+ .tone-muted {
145
+ --_pill-tone-background: var(--pill-tone-muted-background, #f1f1f1);
146
+ --_pill-tone-color: var(--pill-tone-muted-color, #6b7280);
147
+ }
148
+
113
149
  .pill:hover:not(.disabled) {
114
- background-color: var(--pill-hover-background, var(--pill-background, #d0d0d0));
115
- color: var(--pill-hover-color, var(--pill-color, #333333));
150
+ background-color: var(
151
+ --pill-hover-background,
152
+ var(--pill-background, var(--_pill-tone-background, #d0d0d0))
153
+ );
154
+ color: var(--pill-hover-color, var(--pill-color, var(--_pill-tone-color, #333333)));
116
155
  }
117
156
 
118
157
  .pill.disabled {
package/dist/Pill/pillTone.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { PillTone } from './properties';
2
+ /**
3
+ * Canonical tone list, in the order documented in docs/Pill.md and mirrored by the
4
+ * `.tone-*` rules in Pill.svelte's `<style>` block.
5
+ */
6
+ export declare const PILL_TONES: readonly PillTone[];
7
+ /**
8
+ * Resolves the CSS class Pill.svelte applies for a given tone. Pure and exported — rather
9
+ * than five inline `class:tone-x={tone === 'x'}` directives — so the mapping is unit-testable
10
+ * without rendering: this repo's vitest suite runs no browser, so a `.svelte` template's DOM
11
+ * output cannot be asserted on directly (see `src/lib/Table/normalizeColumns.ts` for the same
12
+ * pattern). No tone passed resolves to `''`, so the class list — and therefore the rendered
13
+ * background/color — is unchanged from before this prop existed.
14
+ */
15
+ export declare function pillToneClass(tone?: PillTone): string;
package/dist/Pill/pillTone.js ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Canonical tone list, in the order documented in docs/Pill.md and mirrored by the
3
+ * `.tone-*` rules in Pill.svelte's `<style>` block.
4
+ */
5
+ export const PILL_TONES = ['accent', 'ok', 'warn', 'danger', 'muted'];
6
+ /**
7
+ * Resolves the CSS class Pill.svelte applies for a given tone. Pure and exported — rather
8
+ * than five inline `class:tone-x={tone === 'x'}` directives — so the mapping is unit-testable
9
+ * without rendering: this repo's vitest suite runs no browser, so a `.svelte` template's DOM
10
+ * output cannot be asserted on directly (see `src/lib/Table/normalizeColumns.ts` for the same
11
+ * pattern). No tone passed resolves to `''`, so the class list — and therefore the rendered
12
+ * background/color — is unchanged from before this prop existed.
13
+ */
14
+ export function pillToneClass(tone) {
15
+ return typeof tone === 'string' ? `tone-${tone}` : '';
16
+ }
package/dist/Pill/properties.d.ts CHANGED
@@ -3,9 +3,23 @@ export type PillProperties = MandatoryPillProperties & OptionalPillProperties &
3
3
  export type MandatoryPillProperties = {
4
4
  text: string;
5
5
  };
6
+ /**
7
+ * Semantic tone for a status/category chip. Each tone maps to a
8
+ * `--pill-tone-{tone}-background` / `--pill-tone-{tone}-color` pair (documented, with a built-in
9
+ * default) instead of a hand-rolled `tone-*` class repeated at every call site. An explicit
10
+ * `--pill-background` / `--pill-color` (set directly or via `classes`) always wins over the tone
11
+ * default — the same precedence Button's `variant` already uses relative to `--button-color`.
12
+ */
13
+ export type PillTone = 'accent' | 'ok' | 'warn' | 'danger' | 'muted';
6
14
  export type OptionalPillProperties = {
7
15
  dismissible?: boolean;
8
16
  disabled?: boolean;
17
+ /**
18
+ * Semantic tone applied via themeable `--pill-tone-{tone}-background` / `-color` CSS
19
+ * variables. Unset by default, which renders exactly as before — no tone class, no CSS
20
+ * variable set. See `PillTone` for the mapping and override precedence.
21
+ */
22
+ tone?: PillTone;
9
23
  testId?: string;
10
24
  title?: string;
11
25
  dismissIcon?: Snippet;
package/dist-wc/index.js CHANGED
@@ -6758,23 +6758,31 @@ delegate([
6758
6758
  ], { mode: "open" });
6759
6759
  //#endregion
6760
6760
  //#region src/lib/assets/close.svg?raw
6761
- var close_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$76 = /* @__PURE__ */ from_html("<span class=\"pill-leading-icon svelte-13eug5u\"><!></span>"), root_1$64 = /* @__PURE__ */ from_html("<div class=\"pill-dismiss svelte-13eug5u\"><!></div>"), root_2$48 = /* @__PURE__ */ from_html("<div><!> <span class=\"pill-text svelte-13eug5u\"> </span> <!></div>"), $$css$75 = {
6761
+ var close_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
6762
+ //#endregion
6763
+ //#region src/lib/Pill/pillTone.ts
6764
+ function pillToneClass(e) {
6765
+ return typeof e == "string" ? `tone-${e}` : "";
6766
+ }
6767
+ //#endregion
6768
+ //#region src/lib/Pill/Pill.svelte
6769
+ var root$76 = /* @__PURE__ */ from_html("<span class=\"pill-leading-icon svelte-13eug5u\"><!></span>"), root_1$64 = /* @__PURE__ */ from_html("<div class=\"pill-dismiss svelte-13eug5u\"><!></div>"), root_2$48 = /* @__PURE__ */ from_html("<div><!> <span class=\"pill-text svelte-13eug5u\"> </span> <!></div>"), $$css$75 = {
6762
6770
  hash: "svelte-13eug5u",
6763
- code: ".pill.svelte-13eug5u {display:inline-flex;align-items:center;\n /* A pill is content-width by default. A caller stacking pills into a menu needs\n them to fill the column and align their labels left, which is a layout choice\n the call site owns — hence tokens rather than a variant. */width:var(--pill-width, auto);justify-content:var(--pill-justify-content, center);text-align:var(--pill-text-align, center);gap:var(--pill-gap, 4px);background-color:var(--pill-background, #e0e0e0);color:var(--pill-color, #333333);font-size:var(--pill-font-size, 13px);font-weight:var(--pill-font-weight, 500);font-family:var(--pill-font-family);padding:var(--pill-padding, 6px 10px);border-radius:var(--pill-border-radius, 999px);border:var(--pill-border, none);cursor:var(--pill-cursor, pointer);max-width:var(--pill-max-width);line-height:var(--pill-line-height, 1);flex-shrink:var(--pill-flex-shrink);}.pill.svelte-13eug5u:hover:not(.disabled) {background-color:var(--pill-hover-background, var(--pill-background, #d0d0d0));color:var(--pill-hover-color, var(--pill-color, #333333));}.pill.disabled.svelte-13eug5u {opacity:var(--pill-disabled-opacity, 0.4);cursor:var(--pill-disabled-cursor, not-allowed);}.pill-text.svelte-13eug5u {overflow:hidden;text-overflow:var(--pill-text-overflow, ellipsis);white-space:var(--pill-text-white-space, nowrap);}.pill-leading-icon.svelte-13eug5u {display:inline-flex;align-items:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u {--button-color: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-text-color: var(\n --pill-dismiss-hover-color,\n var(--pill-dismiss-color, currentColor)\n );--cursor: inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}\n\n /* Consumer themes can set Button tokens on its container, beating inherited\n wrapper values. Pin the painting element too so the chip owns its enabled\n glyph; leave disabled colours and focus indicators to the consumer theme. */.pill-dismiss.svelte-13eug5u .button-container,\n .pill-dismiss.svelte-13eug5u .button-el {--button-color: transparent;--button-background: none;--button-active-background: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-border: none;--button-hover-text-color: var(\n --pill-dismiss-hover-color,\n var(--pill-dismiss-color, currentColor)\n );}.pill-dismiss.svelte-13eug5u svg {width:var(--pill-dismiss-size, 14px);height:var(--pill-dismiss-size, 14px);}"
6771
+ code: ".pill.svelte-13eug5u {display:inline-flex;align-items:center;\n /* A pill is content-width by default. A caller stacking pills into a menu needs\n them to fill the column and align their labels left, which is a layout choice\n the call site owns — hence tokens rather than a variant. */width:var(--pill-width, auto);justify-content:var(--pill-justify-content, center);text-align:var(--pill-text-align, center);gap:var(--pill-gap, 4px);background-color:var(--pill-background, var(--_pill-tone-background, #e0e0e0));color:var(--pill-color, var(--_pill-tone-color, #333333));font-size:var(--pill-font-size, 13px);font-weight:var(--pill-font-weight, 500);font-family:var(--pill-font-family);letter-spacing:var(--pill-letter-spacing, normal);text-transform:var(--pill-text-transform, none);padding:var(--pill-padding, 6px 10px);border-radius:var(--pill-border-radius, 999px);border:var(--pill-border, none);\n /* Non-interactive by default: nothing is clickable, so nothing should look\n clickable. The pointer default below applies only once role=\"button\" is\n actually present (see handleClick / `interactive`) — an explicit\n --pill-cursor still wins in both cases. */cursor:var(--pill-cursor, default);max-width:var(--pill-max-width);line-height:var(--pill-line-height, 1);flex-shrink:var(--pill-flex-shrink);}.pill[role='button'].svelte-13eug5u {cursor:var(--pill-cursor, pointer);}\n\n /* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's\n variant classes set --_btn-*: a plain --pill-background/--pill-color\n (explicit, or via `classes`) always wins over the tone's default. */.tone-accent.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-accent-background, #d1ecf1);--_pill-tone-color: var(--pill-tone-accent-color, #0c5460);}.tone-ok.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-ok-background, #d4edda);--_pill-tone-color: var(--pill-tone-ok-color, #155724);}.tone-warn.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-warn-background, #fff3cd);--_pill-tone-color: var(--pill-tone-warn-color, #856404);}.tone-danger.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-danger-background, #f8d7da);--_pill-tone-color: var(--pill-tone-danger-color, #721c24);}.tone-muted.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-muted-background, #f1f1f1);--_pill-tone-color: var(--pill-tone-muted-color, #6b7280);}.pill.svelte-13eug5u:hover:not(.disabled) {background-color:var(\n --pill-hover-background,\n var(--pill-background, var(--_pill-tone-background, #d0d0d0))\n );color:var(--pill-hover-color, var(--pill-color, var(--_pill-tone-color, #333333)));}.pill.disabled.svelte-13eug5u {opacity:var(--pill-disabled-opacity, 0.4);cursor:var(--pill-disabled-cursor, not-allowed);}.pill-text.svelte-13eug5u {overflow:hidden;text-overflow:var(--pill-text-overflow, ellipsis);white-space:var(--pill-text-white-space, nowrap);}.pill-leading-icon.svelte-13eug5u {display:inline-flex;align-items:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u {--button-color: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-text-color: var(\n --pill-dismiss-hover-color,\n var(--pill-dismiss-color, currentColor)\n );--cursor: inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}\n\n /* Consumer themes can set Button tokens on its container, beating inherited\n wrapper values. Pin the painting element too so the chip owns its enabled\n glyph; leave disabled colours and focus indicators to the consumer theme. */.pill-dismiss.svelte-13eug5u .button-container,\n .pill-dismiss.svelte-13eug5u .button-el {--button-color: transparent;--button-background: none;--button-active-background: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-border: none;--button-hover-text-color: var(\n --pill-dismiss-hover-color,\n var(--pill-dismiss-color, currentColor)\n );}.pill-dismiss.svelte-13eug5u svg {width:var(--pill-dismiss-size, 14px);height:var(--pill-dismiss-size, 14px);}"
6764
6772
  };
6765
6773
  function Pill(e, t) {
6766
6774
  push(t, !0), append_styles$1(e, $$css$75);
6767
- let n = prop(t, "text", 7), i = prop(t, "dismissible", 7, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "testId", 7), s = prop(t, "title", 7), c = prop(t, "dismissIcon", 7), l = prop(t, "dismissLabel", 7), u = prop(t, "leadingIcon", 7), f = prop(t, "onclick", 7), p = prop(t, "ondismiss", 7), h = prop(t, "classes", 7), S = /* @__PURE__ */ user_derived(() => typeof f() == "function");
6768
- function C(e) {
6769
- a() || f()?.(e);
6770
- }
6775
+ let n = prop(t, "text", 7), i = prop(t, "dismissible", 7, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "tone", 7), s = prop(t, "testId", 7), c = prop(t, "title", 7), l = prop(t, "dismissIcon", 7), u = prop(t, "dismissLabel", 7), f = prop(t, "leadingIcon", 7), p = prop(t, "onclick", 7), h = prop(t, "ondismiss", 7), S = prop(t, "classes", 7), C = /* @__PURE__ */ user_derived(() => typeof p() == "function");
6771
6776
  function k(e) {
6772
- e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
6777
+ a() || p()?.(e);
6773
6778
  }
6774
6779
  function R(e) {
6775
- e.stopPropagation(), !a() && p()?.();
6780
+ e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
6776
6781
  }
6777
- var te = {
6782
+ function te(e) {
6783
+ e.stopPropagation(), !a() && h()?.();
6784
+ }
6785
+ var ne = {
6778
6786
  get text() {
6779
6787
  return n();
6780
6788
  },
@@ -6793,89 +6801,95 @@ function Pill(e, t) {
6793
6801
  set disabled(e = !1) {
6794
6802
  a(e), flushSync();
6795
6803
  },
6796
- get testId() {
6804
+ get tone() {
6797
6805
  return o();
6798
6806
  },
6799
- set testId(e) {
6807
+ set tone(e) {
6800
6808
  o(e), flushSync();
6801
6809
  },
6802
- get title() {
6810
+ get testId() {
6803
6811
  return s();
6804
6812
  },
6805
- set title(e) {
6813
+ set testId(e) {
6806
6814
  s(e), flushSync();
6807
6815
  },
6808
- get dismissIcon() {
6816
+ get title() {
6809
6817
  return c();
6810
6818
  },
6811
- set dismissIcon(e) {
6819
+ set title(e) {
6812
6820
  c(e), flushSync();
6813
6821
  },
6814
- get dismissLabel() {
6822
+ get dismissIcon() {
6815
6823
  return l();
6816
6824
  },
6817
- set dismissLabel(e) {
6825
+ set dismissIcon(e) {
6818
6826
  l(e), flushSync();
6819
6827
  },
6820
- get leadingIcon() {
6828
+ get dismissLabel() {
6821
6829
  return u();
6822
6830
  },
6823
- set leadingIcon(e) {
6831
+ set dismissLabel(e) {
6824
6832
  u(e), flushSync();
6825
6833
  },
6826
- get onclick() {
6834
+ get leadingIcon() {
6827
6835
  return f();
6828
6836
  },
6829
- set onclick(e) {
6837
+ set leadingIcon(e) {
6830
6838
  f(e), flushSync();
6831
6839
  },
6832
- get ondismiss() {
6840
+ get onclick() {
6833
6841
  return p();
6834
6842
  },
6835
- set ondismiss(e) {
6843
+ set onclick(e) {
6836
6844
  p(e), flushSync();
6837
6845
  },
6838
- get classes() {
6846
+ get ondismiss() {
6839
6847
  return h();
6840
6848
  },
6841
- set classes(e) {
6849
+ set ondismiss(e) {
6842
6850
  h(e), flushSync();
6851
+ },
6852
+ get classes() {
6853
+ return S();
6854
+ },
6855
+ set classes(e) {
6856
+ S(e), flushSync();
6843
6857
  }
6844
- }, ne = root_2$48();
6845
- let re;
6846
- var G = child(ne), be = (e) => {
6858
+ }, re = root_2$48();
6859
+ let G;
6860
+ var be = child(re), Me = (e) => {
6847
6861
  var t = root$76();
6848
- snippet(child(t), u), reset(t), append(e, t);
6862
+ snippet(child(t), f), reset(t), append(e, t);
6849
6863
  };
6850
- if_block(G, (e) => {
6851
- typeof u() == "function" && e(be);
6864
+ if_block(be, (e) => {
6865
+ typeof f() == "function" && e(Me);
6852
6866
  });
6853
- var Me = sibling(G, 2), Re = child(Me, !0);
6854
- reset(Me);
6855
- var Ue = sibling(Me, 2), it = (e) => {
6867
+ var Re = sibling(be, 2), Ue = child(Re, !0);
6868
+ reset(Re);
6869
+ var it = sibling(Re, 2), at = (e) => {
6856
6870
  var t = root_1$64(), n = child(t);
6857
6871
  {
6858
- let e = /* @__PURE__ */ user_derived(() => l()?.trim() || "Dismiss");
6872
+ let e = /* @__PURE__ */ user_derived(() => u()?.trim() || "Dismiss");
6859
6873
  Button(n, spread_props({
6860
6874
  variant: "ghost",
6861
6875
  get disabled() {
6862
6876
  return a();
6863
6877
  },
6864
- onclick: R,
6878
+ onclick: te,
6865
6879
  get ariaLabel() {
6866
6880
  return get(e);
6867
6881
  }
6868
- }, () => typeof o() == "string" ? { testId: `${o()}-dismiss` } : {}, {
6882
+ }, () => typeof s() == "string" ? { testId: `${s()}-dismiss` } : {}, {
6869
6883
  children: (e, t) => {
6870
6884
  var n = comment(), i = first_child(n), a = (e) => {
6871
6885
  var t = comment();
6872
- snippet(first_child(t), c), append(e, t);
6886
+ snippet(first_child(t), l), append(e, t);
6873
6887
  }, o = (e) => {
6874
6888
  var t = comment();
6875
6889
  html(first_child(t), () => close_default), append(e, t);
6876
6890
  };
6877
6891
  if_block(i, (e) => {
6878
- typeof c() == "function" ? e(a) : e(o, -1);
6892
+ typeof l() == "function" ? e(a) : e(o, -1);
6879
6893
  }), append(e, n);
6880
6894
  },
6881
6895
  $$slots: { default: !0 }
@@ -6883,20 +6897,21 @@ function Pill(e, t) {
6883
6897
  }
6884
6898
  reset(t), append(e, t);
6885
6899
  };
6886
- return if_block(Ue, (e) => {
6887
- i() && e(it);
6888
- }), reset(ne), template_effect(() => {
6889
- re = set_class(ne, 1, `pill ${h() ?? "" ?? ""}`, "svelte-13eug5u", re, { disabled: a() }), set_attribute(ne, "role", get(S) ? "button" : null), set_attribute(ne, "tabindex", get(S) ? 0 : null), set_attribute(ne, "aria-disabled", get(S) && a() ? !0 : null), set_attribute(ne, "data-pw", typeof o() == "string" ? o() : null), set_attribute(ne, "title", s() ?? null), set_attribute(ne, "testid", typeof o() == "string" ? o() : null), set_text(Re, n());
6890
- }), delegated("click", ne, function(...e) {
6891
- (get(S) ? C : null)?.apply(this, e);
6892
- }), delegated("keydown", ne, function(...e) {
6893
- (get(S) ? k : null)?.apply(this, e);
6894
- }), append(e, ne), pop(te);
6900
+ return if_block(it, (e) => {
6901
+ i() && e(at);
6902
+ }), reset(re), template_effect((e) => {
6903
+ G = set_class(re, 1, `pill ${e ?? ""} ${S() ?? "" ?? ""}`, "svelte-13eug5u", G, { disabled: a() }), set_attribute(re, "role", get(C) ? "button" : null), set_attribute(re, "tabindex", get(C) ? 0 : null), set_attribute(re, "aria-disabled", get(C) && a() ? !0 : null), set_attribute(re, "data-pw", typeof s() == "string" ? s() : null), set_attribute(re, "title", c() ?? null), set_attribute(re, "testid", typeof s() == "string" ? s() : null), set_text(Ue, n());
6904
+ }, [() => pillToneClass(o())]), delegated("click", re, function(...e) {
6905
+ (get(C) ? k : null)?.apply(this, e);
6906
+ }), delegated("keydown", re, function(...e) {
6907
+ (get(C) ? R : null)?.apply(this, e);
6908
+ }), append(e, re), pop(ne);
6895
6909
  }
6896
6910
  delegate(["click", "keydown"]), create_custom_element(Pill, {
6897
6911
  text: {},
6898
6912
  dismissible: {},
6899
6913
  disabled: {},
6914
+ tone: {},
6900
6915
  testId: {},
6901
6916
  title: {},
6902
6917
  dismissIcon: {},
@@ -10274,6 +10289,10 @@ customElements.define("sui-pill", create_custom_element(Pill_wc, {
10274
10289
  reflect: !0,
10275
10290
  type: "Boolean"
10276
10291
  },
10292
+ tone: {
10293
+ attribute: "tone",
10294
+ type: "String"
10295
+ },
10277
10296
  testId: {
10278
10297
  attribute: "test-id",
10279
10298
  type: "String"
@@ -13698,12 +13717,12 @@ customElements.define("sui-card", create_custom_element(Card_wc, {
13698
13717
  //#region src/lib/EmptyState/EmptyState.svelte
13699
13718
  var root$44 = /* @__PURE__ */ from_html("<div class=\"empty-state-icon svelte-vmfces\"><!></div>"), root_1$37 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"><!></div>"), root_2$31 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"> </div>"), root_3$29 = /* @__PURE__ */ from_html("<div class=\"empty-state-actions svelte-vmfces\"><!></div>"), root_4$25 = /* @__PURE__ */ from_html("<div><!> <div class=\"empty-state-title svelte-vmfces\"><!></div> <!> <!></div>"), $$css$43 = {
13700
13719
  hash: "svelte-vmfces",
13701
- code: ".empty-state.svelte-vmfces {display:flex;flex-direction:column;align-items:center;padding:var(--empty-state-padding, 32px 16px);text-align:var(--empty-state-text-align, center);gap:var(--empty-state-gap, 0px);color:inherit;}.empty-state-icon.svelte-vmfces {width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);color:var(--empty-state-icon-color, currentColor);opacity:var(--empty-state-icon-opacity, 0.4);margin-bottom:var(--empty-state-icon-margin-bottom, 16px);display:flex;align-items:center;justify-content:center;}.empty-state-icon.svelte-vmfces svg {width:100%;height:100%;}.empty-state-title.svelte-vmfces {font-size:var(--empty-state-title-font-size, 16px);font-weight:var(--empty-state-title-font-weight, 600);color:var(--empty-state-title-color, inherit);}.empty-state-description.svelte-vmfces {font-size:var(--empty-state-description-font-size, 14px);color:var(--empty-state-description-color, inherit);opacity:var(--empty-state-description-opacity, 0.6);max-width:var(--empty-state-description-max-width, 360px);margin-top:4px;}.empty-state-actions.svelte-vmfces {display:var(--empty-state-actions-display, block);flex-direction:var(--empty-state-actions-flex-direction, row);align-items:var(--empty-state-actions-align-items, stretch);justify-content:var(--empty-state-actions-justify-content, normal);gap:var(--empty-state-actions-gap, 0);margin-top:var(--empty-state-actions-margin-top, 16px);}"
13720
+ code: ".empty-state.svelte-vmfces {display:flex;flex-direction:column;align-items:var(--empty-state-align-items, center);padding:var(--empty-state-padding, 32px 16px);text-align:var(--empty-state-text-align, center);gap:var(--empty-state-gap, 0px);color:inherit;}\n\n /* Density-scoped fallbacks. Higher specificity than `.empty-state` alone, so\n these only take over when `data-density` is actually set — no attribute,\n no match, today's defaults above stand untouched. `--empty-state-padding`\n and `--empty-state-gap` are read first in both cases, so an instance-level\n override always wins over either density's default. */.empty-state[data-density='page'].svelte-vmfces {padding:var(--empty-state-padding, 48px 24px);gap:var(--empty-state-gap, 12px);}.empty-state[data-density='panel'].svelte-vmfces {padding:var(--empty-state-padding, 16px 12px);gap:var(--empty-state-gap, 4px);}.empty-state-icon.svelte-vmfces {width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);color:var(--empty-state-icon-color, currentColor);opacity:var(--empty-state-icon-opacity, 0.4);margin-bottom:var(--empty-state-icon-margin-bottom, 16px);display:flex;align-items:center;justify-content:center;}.empty-state-icon.svelte-vmfces svg {width:100%;height:100%;}.empty-state-title.svelte-vmfces {font-size:var(--empty-state-title-font-size, 16px);font-weight:var(--empty-state-title-font-weight, 600);color:var(--empty-state-title-color, inherit);}.empty-state-description.svelte-vmfces {font-size:var(--empty-state-description-font-size, 14px);color:var(--empty-state-description-color, inherit);opacity:var(--empty-state-description-opacity, 0.6);max-width:var(--empty-state-description-max-width, 360px);margin-top:4px;}.empty-state-actions.svelte-vmfces {display:var(--empty-state-actions-display, block);flex-direction:var(--empty-state-actions-flex-direction, row);align-items:var(--empty-state-actions-align-items, stretch);justify-content:var(--empty-state-actions-justify-content, normal);gap:var(--empty-state-actions-gap, 0);margin-top:var(--empty-state-actions-margin-top, 16px);}"
13702
13721
  };
13703
13722
  function EmptyState(e, t) {
13704
13723
  push(t, !0), append_styles$1(e, $$css$43);
13705
- let n = prop(t, "title", 7), i = prop(t, "description", 7), a = prop(t, "icon", 7), o = prop(t, "children", 7), s = prop(t, "classes", 7), c = prop(t, "testId", 7), l = prop(t, "titleSnippet", 7), u = prop(t, "descriptionSnippet", 7);
13706
- var f = {
13724
+ let n = prop(t, "title", 7), i = prop(t, "description", 7), a = prop(t, "icon", 7), o = prop(t, "children", 7), s = prop(t, "classes", 7), c = prop(t, "testId", 7), l = prop(t, "titleSnippet", 7), u = prop(t, "descriptionSnippet", 7), f = prop(t, "density", 7);
13725
+ var p = {
13707
13726
  get title() {
13708
13727
  return n();
13709
13728
  },
@@ -13751,47 +13770,53 @@ function EmptyState(e, t) {
13751
13770
  },
13752
13771
  set descriptionSnippet(e) {
13753
13772
  u(e), flushSync();
13773
+ },
13774
+ get density() {
13775
+ return f();
13776
+ },
13777
+ set density(e) {
13778
+ f(e), flushSync();
13754
13779
  }
13755
- }, p = root_4$25(), h = child(p), S = (e) => {
13780
+ }, h = root_4$25(), S = child(h), C = (e) => {
13756
13781
  var t = root$44();
13757
13782
  snippet(child(t), a), reset(t), append(e, t);
13758
13783
  };
13759
- if_block(h, (e) => {
13760
- typeof a() == "function" && e(S);
13784
+ if_block(S, (e) => {
13785
+ typeof a() == "function" && e(C);
13761
13786
  });
13762
- var C = sibling(h, 2), k = child(C), R = (e) => {
13787
+ var k = sibling(S, 2), R = child(k), te = (e) => {
13763
13788
  var t = comment();
13764
13789
  snippet(first_child(t), l), append(e, t);
13765
- }, te = (e) => {
13790
+ }, ne = (e) => {
13766
13791
  var t = text();
13767
13792
  template_effect(() => set_text(t, n())), append(e, t);
13768
13793
  };
13769
- if_block(k, (e) => {
13770
- typeof l() == "function" ? e(R) : e(te, -1);
13771
- }), reset(C);
13772
- var ne = sibling(C, 2), re = (e) => {
13794
+ if_block(R, (e) => {
13795
+ typeof l() == "function" ? e(te) : e(ne, -1);
13796
+ }), reset(k);
13797
+ var re = sibling(k, 2), G = (e) => {
13773
13798
  var t = root_1$37();
13774
13799
  snippet(child(t), u), reset(t), template_effect(() => {
13775
13800
  set_attribute(t, "data-pw", typeof c() == "string" ? `${c()}-description` : null), set_attribute(t, "testid", typeof c() == "string" ? `${c()}-description` : null);
13776
13801
  }), append(e, t);
13777
- }, G = (e) => {
13802
+ }, be = (e) => {
13778
13803
  var t = root_2$31(), n = child(t, !0);
13779
13804
  reset(t), template_effect(() => {
13780
13805
  set_attribute(t, "data-pw", typeof c() == "string" ? `${c()}-description` : null), set_attribute(t, "testid", typeof c() == "string" ? `${c()}-description` : null), set_text(n, i());
13781
13806
  }), append(e, t);
13782
13807
  };
13783
- if_block(ne, (e) => {
13784
- typeof u() == "function" ? e(re) : typeof i() == "string" && i().length > 0 && e(G, 1);
13808
+ if_block(re, (e) => {
13809
+ typeof u() == "function" ? e(G) : typeof i() == "string" && i().length > 0 && e(be, 1);
13785
13810
  });
13786
- var be = sibling(ne, 2), Me = (e) => {
13811
+ var Me = sibling(re, 2), Re = (e) => {
13787
13812
  var t = root_3$29();
13788
13813
  snippet(child(t), o), reset(t), append(e, t);
13789
13814
  };
13790
- return if_block(be, (e) => {
13791
- typeof o() == "function" && e(Me);
13792
- }), reset(p), template_effect(() => {
13793
- set_class(p, 1, `empty-state ${s() ?? "" ?? ""}`, "svelte-vmfces"), set_attribute(p, "data-pw", typeof c() == "string" ? c() : null), set_attribute(p, "testid", typeof c() == "string" ? c() : null), set_attribute(C, "data-pw", typeof c() == "string" ? `${c()}-title` : null), set_attribute(C, "testid", typeof c() == "string" ? `${c()}-title` : null);
13794
- }), append(e, p), pop(f);
13815
+ return if_block(Me, (e) => {
13816
+ typeof o() == "function" && e(Re);
13817
+ }), reset(h), template_effect(() => {
13818
+ set_class(h, 1, `empty-state ${s() ?? "" ?? ""}`, "svelte-vmfces"), set_attribute(h, "data-pw", typeof c() == "string" ? c() : null), set_attribute(h, "testid", typeof c() == "string" ? c() : null), set_attribute(h, "data-density", typeof f() == "string" ? f() : null), set_attribute(k, "data-pw", typeof c() == "string" ? `${c()}-title` : null), set_attribute(k, "testid", typeof c() == "string" ? `${c()}-title` : null);
13819
+ }), append(e, h), pop(p);
13795
13820
  }
13796
13821
  create_custom_element(EmptyState, {
13797
13822
  title: {},
@@ -13801,7 +13826,8 @@ create_custom_element(EmptyState, {
13801
13826
  classes: {},
13802
13827
  testId: {},
13803
13828
  titleSnippet: {},
13804
- descriptionSnippet: {}
13829
+ descriptionSnippet: {},
13830
+ density: {}
13805
13831
  }, [], [], { mode: "open" });
13806
13832
  //#endregion
13807
13833
  //#region src/wc/components/EmptyState.wc.svelte
@@ -13865,6 +13891,7 @@ customElements.define("sui-empty-state", create_custom_element(EmptyState_wc, {
13865
13891
  attribute: "test-id",
13866
13892
  type: "String"
13867
13893
  },
13894
+ density: { type: "String" },
13868
13895
  icon: { type: "Object" },
13869
13896
  titleSnippet: { type: "Object" },
13870
13897
  descriptionSnippet: { type: "Object" }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "4.2.0",
3
+ "version": "4.4.0",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",