@juspay/svelte-ui-components 4.10.5 → 4.11.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.
- package/dist/Pill/Pill.svelte +52 -9
- package/dist/Pill/properties.d.ts +33 -0
- package/dist-wc/index.js +146 -87
- package/package.json +1 -1
package/dist/Pill/Pill.svelte
CHANGED
|
@@ -9,6 +9,9 @@
|
|
|
9
9
|
dismissible = false,
|
|
10
10
|
disabled = false,
|
|
11
11
|
tone,
|
|
12
|
+
as,
|
|
13
|
+
ariaExpanded,
|
|
14
|
+
ariaPressed,
|
|
12
15
|
testId,
|
|
13
16
|
title,
|
|
14
17
|
dismissIcon,
|
|
@@ -22,6 +25,26 @@
|
|
|
22
25
|
|
|
23
26
|
let interactive = $derived(typeof onclick === 'function');
|
|
24
27
|
|
|
28
|
+
// A <button> may not contain another button, and a dismissible pill is inherently two
|
|
29
|
+
// controls. Rather than emit invalid markup, that combination degrades to the div root —
|
|
30
|
+
// the same graceful-degradation rule Card applies to `as="a"` with no `href`.
|
|
31
|
+
const isButtonRoot = $derived(as === 'button' && !dismissible);
|
|
32
|
+
const rootTag = $derived(isButtonRoot ? 'button' : 'div');
|
|
33
|
+
|
|
34
|
+
// The synthetic shim exists only because a <div> has no button semantics. A real button
|
|
35
|
+
// already has them, and adding role/tabindex/keydown on top would duplicate the platform's
|
|
36
|
+
// own activation — Enter would fire the handler twice.
|
|
37
|
+
const needsInteractiveShim = $derived(interactive && !isButtonRoot);
|
|
38
|
+
|
|
39
|
+
// aria-expanded / aria-pressed / aria-disabled describe a control's state, so they are
|
|
40
|
+
// meaningless on a plain label and are emitted only once the pill actually is one.
|
|
41
|
+
//
|
|
42
|
+
// Note this is deliberately NOT gated on `onclick`: a button root is a real, focusable
|
|
43
|
+
// control whether or not a handler was supplied, so `<Pill as="button" disabled />` alone
|
|
44
|
+
// still has to announce that it is disabled. Gating on the handler left it reachable by
|
|
45
|
+
// keyboard with nothing saying it was inert.
|
|
46
|
+
const exposesControlState = $derived(isButtonRoot || needsInteractiveShim);
|
|
47
|
+
|
|
25
48
|
function handleClick(event: MouseEvent): void {
|
|
26
49
|
if (disabled) {
|
|
27
50
|
return;
|
|
@@ -50,16 +73,19 @@
|
|
|
50
73
|
}
|
|
51
74
|
</script>
|
|
52
75
|
|
|
53
|
-
|
|
54
|
-
|
|
76
|
+
<svelte:element
|
|
77
|
+
this={rootTag}
|
|
55
78
|
{...attrs ?? {}}
|
|
56
79
|
class="pill {pillToneClass(tone)} {classes ?? ''}"
|
|
57
80
|
class:disabled
|
|
81
|
+
type={isButtonRoot ? 'button' : null}
|
|
58
82
|
onclick={interactive ? handleClick : null}
|
|
59
|
-
onkeydown={
|
|
60
|
-
role={
|
|
61
|
-
tabindex={
|
|
62
|
-
aria-disabled={
|
|
83
|
+
onkeydown={needsInteractiveShim ? handleKeydown : null}
|
|
84
|
+
role={needsInteractiveShim ? 'button' : null}
|
|
85
|
+
tabindex={needsInteractiveShim ? 0 : null}
|
|
86
|
+
aria-disabled={exposesControlState && disabled ? true : null}
|
|
87
|
+
aria-expanded={exposesControlState && typeof ariaExpanded === 'boolean' ? ariaExpanded : null}
|
|
88
|
+
aria-pressed={exposesControlState && typeof ariaPressed === 'boolean' ? ariaPressed : null}
|
|
63
89
|
data-pw={typeof testId === 'string' ? testId : null}
|
|
64
90
|
title={title ?? null}
|
|
65
91
|
testID={typeof testId === 'string' ? testId : null}
|
|
@@ -87,7 +113,7 @@
|
|
|
87
113
|
</Button>
|
|
88
114
|
</div>
|
|
89
115
|
{/if}
|
|
90
|
-
</
|
|
116
|
+
</svelte:element>
|
|
91
117
|
|
|
92
118
|
<style>
|
|
93
119
|
.pill {
|
|
@@ -120,15 +146,32 @@
|
|
|
120
146
|
flex-shrink: var(--pill-flex-shrink);
|
|
121
147
|
}
|
|
122
148
|
|
|
123
|
-
.pill[role='button']
|
|
149
|
+
.pill[role='button'],
|
|
150
|
+
button.pill {
|
|
124
151
|
cursor: var(--pill-cursor, pointer);
|
|
125
152
|
}
|
|
126
153
|
|
|
127
|
-
.pill[role='button']:focus-visible
|
|
154
|
+
.pill[role='button']:focus-visible,
|
|
155
|
+
button.pill:focus-visible {
|
|
128
156
|
outline: var(--pill-focus-outline, 2px solid currentColor);
|
|
129
157
|
outline-offset: var(--pill-focus-outline-offset, 2px);
|
|
130
158
|
}
|
|
131
159
|
|
|
160
|
+
/* A button root arrives with user-agent styling a div never had: a default margin, the
|
|
161
|
+
native control appearance, and its own font stack. Neutralise exactly those three and
|
|
162
|
+
nothing else, so `as="button"` is a semantics change and not a visual one.
|
|
163
|
+
|
|
164
|
+
Deliberately NOT `font: inherit` here: that shorthand also resets line-height, and this
|
|
165
|
+
rule outranks .pill on specificity, so it would silently override
|
|
166
|
+
`--pill-line-height` and make a button chip 5px taller than the identical div. Every
|
|
167
|
+
other typographic property is already owned by .pill and needs no restatement. */
|
|
168
|
+
button.pill {
|
|
169
|
+
margin: 0;
|
|
170
|
+
font-family: var(--pill-font-family, inherit);
|
|
171
|
+
appearance: none;
|
|
172
|
+
-webkit-appearance: none;
|
|
173
|
+
}
|
|
174
|
+
|
|
132
175
|
/* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's
|
|
133
176
|
variant classes set --_btn-*: a plain --pill-background/--pill-color
|
|
134
177
|
(explicit, or via `classes`) always wins over the tone's default. */
|
|
@@ -11,6 +11,14 @@ export type MandatoryPillProperties = {
|
|
|
11
11
|
* default — the same precedence Button's `variant` already uses relative to `--button-color`.
|
|
12
12
|
*/
|
|
13
13
|
export type PillTone = 'accent' | 'ok' | 'warn' | 'danger' | 'muted';
|
|
14
|
+
/**
|
|
15
|
+
* Root element for the pill. `'div'` is the default and renders exactly as before —
|
|
16
|
+
* non-interactive, or carrying the synthetic `role="button"`/`tabindex`/keydown shim when
|
|
17
|
+
* an `onclick` is supplied. `'button'` renders a real `<button type="button">` instead, so
|
|
18
|
+
* a chip-shaped control gets native focus, activation and announcement rather than an
|
|
19
|
+
* imitation of them.
|
|
20
|
+
*/
|
|
21
|
+
export type PillRootTag = 'div' | 'button';
|
|
14
22
|
export type OptionalPillProperties = {
|
|
15
23
|
dismissible?: boolean;
|
|
16
24
|
disabled?: boolean;
|
|
@@ -20,6 +28,31 @@ export type OptionalPillProperties = {
|
|
|
20
28
|
* variable set. See `PillTone` for the mapping and override precedence.
|
|
21
29
|
*/
|
|
22
30
|
tone?: PillTone;
|
|
31
|
+
/**
|
|
32
|
+
* Root element. Defaults to `'div'`, which renders exactly as before this prop existed.
|
|
33
|
+
*
|
|
34
|
+
* `'button'` gives a chip real control semantics — native keyboard activation, focus and
|
|
35
|
+
* announcement — instead of the `role="button"`/`tabindex`/keydown shim a `<div>` needs.
|
|
36
|
+
* Reach for it when the chip is a disclosure or a toggle (see `ariaExpanded` /
|
|
37
|
+
* `ariaPressed`), which a shimmed div cannot express correctly.
|
|
38
|
+
*
|
|
39
|
+
* One combination cannot be honoured: a `<button>` may not contain another button, and a
|
|
40
|
+
* `dismissible` pill is inherently two controls. `as="button"` together with
|
|
41
|
+
* `dismissible` therefore falls back to the `div` root and its shim rather than emitting
|
|
42
|
+
* invalid markup — the same rule `Card` applies to `as="a"` with no `href`.
|
|
43
|
+
*/
|
|
44
|
+
as?: PillRootTag;
|
|
45
|
+
/**
|
|
46
|
+
* Expanded state of a disclosure chip, rendered as `aria-expanded`. Applied only when the
|
|
47
|
+
* pill is interactive (a `button` root, or a `div` with `onclick`), since the attribute is
|
|
48
|
+
* meaningless on a plain label. Omitted by default.
|
|
49
|
+
*/
|
|
50
|
+
ariaExpanded?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Pressed state of a toggle chip, rendered as `aria-pressed`. Applied only when the pill
|
|
53
|
+
* is interactive, for the same reason as `ariaExpanded`. Omitted by default.
|
|
54
|
+
*/
|
|
55
|
+
ariaPressed?: boolean;
|
|
23
56
|
testId?: string;
|
|
24
57
|
title?: string;
|
|
25
58
|
dismissIcon?: Snippet;
|
package/dist-wc/index.js
CHANGED
|
@@ -6769,23 +6769,23 @@ function pillToneClass(e) {
|
|
|
6769
6769
|
}
|
|
6770
6770
|
//#endregion
|
|
6771
6771
|
//#region src/lib/Pill/Pill.svelte
|
|
6772
|
-
var root$75 = /* @__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("
|
|
6772
|
+
var root$75 = /* @__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("<!> <span class=\"pill-text svelte-13eug5u\"> </span> <!>", 1), $$css$75 = {
|
|
6773
6773
|
hash: "svelte-13eug5u",
|
|
6774
|
-
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);}.pill[role='button'].svelte-13eug5u:focus-visible {outline:var(--pill-focus-outline, 2px solid currentColor);outline-offset:var(--pill-focus-outline-offset, 2px);}\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);}"
|
|
6774
|
+
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,\n button.pill.svelte-13eug5u {cursor:var(--pill-cursor, pointer);}.pill[role='button'].svelte-13eug5u:focus-visible,\n button.pill.svelte-13eug5u:focus-visible {outline:var(--pill-focus-outline, 2px solid currentColor);outline-offset:var(--pill-focus-outline-offset, 2px);}\n\n /* A button root arrives with user-agent styling a div never had: a default margin, the\n native control appearance, and its own font stack. Neutralise exactly those three and\n nothing else, so `as=\"button\"` is a semantics change and not a visual one.\n\n Deliberately NOT `font: inherit` here: that shorthand also resets line-height, and this\n rule outranks .pill on specificity, so it would silently override\n `--pill-line-height` and make a button chip 5px taller than the identical div. Every\n other typographic property is already owned by .pill and needs no restatement. */button.pill.svelte-13eug5u {margin:0;font-family:var(--pill-font-family, inherit);appearance:none;-webkit-appearance:none;}\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);}"
|
|
6775
6775
|
};
|
|
6776
6776
|
function Pill(e, t) {
|
|
6777
6777
|
push(t, !0), append_styles$1(e, $$css$75);
|
|
6778
|
-
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, "
|
|
6779
|
-
function
|
|
6780
|
-
a() ||
|
|
6778
|
+
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, "as", 7), c = prop(t, "ariaExpanded", 7), l = prop(t, "ariaPressed", 7), u = prop(t, "testId", 7), f = prop(t, "title", 7), p = prop(t, "dismissIcon", 7), h = prop(t, "dismissLabel", 7), S = prop(t, "leadingIcon", 7), C = prop(t, "onclick", 7), k = prop(t, "ondismiss", 7), R = prop(t, "classes", 7), G = prop(t, "attrs", 7), te = /* @__PURE__ */ user_derived(() => typeof C() == "function"), ne = /* @__PURE__ */ user_derived(() => s() === "button" && !i()), re = /* @__PURE__ */ user_derived(() => get(ne) ? "button" : "div"), be = /* @__PURE__ */ user_derived(() => get(te) && !get(ne)), Me = /* @__PURE__ */ user_derived(() => get(ne) || get(be));
|
|
6779
|
+
function Re(e) {
|
|
6780
|
+
a() || C()?.(e);
|
|
6781
6781
|
}
|
|
6782
|
-
function
|
|
6782
|
+
function Ue(e) {
|
|
6783
6783
|
e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
|
|
6784
6784
|
}
|
|
6785
|
-
function
|
|
6786
|
-
e.stopPropagation(), !a() &&
|
|
6785
|
+
function it(e) {
|
|
6786
|
+
e.stopPropagation(), !a() && k()?.();
|
|
6787
6787
|
}
|
|
6788
|
-
var
|
|
6788
|
+
var at = {
|
|
6789
6789
|
get text() {
|
|
6790
6790
|
return n();
|
|
6791
6791
|
},
|
|
@@ -6810,123 +6810,149 @@ function Pill(e, t) {
|
|
|
6810
6810
|
set tone(e) {
|
|
6811
6811
|
o(e), flushSync();
|
|
6812
6812
|
},
|
|
6813
|
-
get
|
|
6813
|
+
get as() {
|
|
6814
6814
|
return s();
|
|
6815
6815
|
},
|
|
6816
|
-
set
|
|
6816
|
+
set as(e) {
|
|
6817
6817
|
s(e), flushSync();
|
|
6818
6818
|
},
|
|
6819
|
-
get
|
|
6819
|
+
get ariaExpanded() {
|
|
6820
6820
|
return c();
|
|
6821
6821
|
},
|
|
6822
|
-
set
|
|
6822
|
+
set ariaExpanded(e) {
|
|
6823
6823
|
c(e), flushSync();
|
|
6824
6824
|
},
|
|
6825
|
-
get
|
|
6825
|
+
get ariaPressed() {
|
|
6826
6826
|
return l();
|
|
6827
6827
|
},
|
|
6828
|
-
set
|
|
6828
|
+
set ariaPressed(e) {
|
|
6829
6829
|
l(e), flushSync();
|
|
6830
6830
|
},
|
|
6831
|
-
get
|
|
6831
|
+
get testId() {
|
|
6832
6832
|
return u();
|
|
6833
6833
|
},
|
|
6834
|
-
set
|
|
6834
|
+
set testId(e) {
|
|
6835
6835
|
u(e), flushSync();
|
|
6836
6836
|
},
|
|
6837
|
-
get
|
|
6837
|
+
get title() {
|
|
6838
6838
|
return f();
|
|
6839
6839
|
},
|
|
6840
|
-
set
|
|
6840
|
+
set title(e) {
|
|
6841
6841
|
f(e), flushSync();
|
|
6842
6842
|
},
|
|
6843
|
-
get
|
|
6843
|
+
get dismissIcon() {
|
|
6844
6844
|
return p();
|
|
6845
6845
|
},
|
|
6846
|
-
set
|
|
6846
|
+
set dismissIcon(e) {
|
|
6847
6847
|
p(e), flushSync();
|
|
6848
6848
|
},
|
|
6849
|
-
get
|
|
6849
|
+
get dismissLabel() {
|
|
6850
6850
|
return h();
|
|
6851
6851
|
},
|
|
6852
|
-
set
|
|
6852
|
+
set dismissLabel(e) {
|
|
6853
6853
|
h(e), flushSync();
|
|
6854
6854
|
},
|
|
6855
|
-
get
|
|
6855
|
+
get leadingIcon() {
|
|
6856
6856
|
return S();
|
|
6857
6857
|
},
|
|
6858
|
-
set
|
|
6858
|
+
set leadingIcon(e) {
|
|
6859
6859
|
S(e), flushSync();
|
|
6860
6860
|
},
|
|
6861
|
-
get
|
|
6861
|
+
get onclick() {
|
|
6862
6862
|
return C();
|
|
6863
6863
|
},
|
|
6864
|
-
set
|
|
6864
|
+
set onclick(e) {
|
|
6865
6865
|
C(e), flushSync();
|
|
6866
|
+
},
|
|
6867
|
+
get ondismiss() {
|
|
6868
|
+
return k();
|
|
6869
|
+
},
|
|
6870
|
+
set ondismiss(e) {
|
|
6871
|
+
k(e), flushSync();
|
|
6872
|
+
},
|
|
6873
|
+
get classes() {
|
|
6874
|
+
return R();
|
|
6875
|
+
},
|
|
6876
|
+
set classes(e) {
|
|
6877
|
+
R(e), flushSync();
|
|
6878
|
+
},
|
|
6879
|
+
get attrs() {
|
|
6880
|
+
return G();
|
|
6881
|
+
},
|
|
6882
|
+
set attrs(e) {
|
|
6883
|
+
G(e), flushSync();
|
|
6866
6884
|
}
|
|
6867
|
-
},
|
|
6868
|
-
|
|
6869
|
-
|
|
6870
|
-
|
|
6871
|
-
|
|
6872
|
-
|
|
6873
|
-
|
|
6874
|
-
|
|
6875
|
-
|
|
6876
|
-
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6890
|
-
|
|
6891
|
-
|
|
6892
|
-
|
|
6893
|
-
|
|
6894
|
-
|
|
6895
|
-
|
|
6896
|
-
|
|
6897
|
-
|
|
6898
|
-
|
|
6899
|
-
|
|
6900
|
-
|
|
6901
|
-
|
|
6902
|
-
|
|
6903
|
-
|
|
6904
|
-
|
|
6905
|
-
|
|
6906
|
-
|
|
6907
|
-
|
|
6908
|
-
|
|
6909
|
-
var
|
|
6910
|
-
|
|
6911
|
-
|
|
6912
|
-
|
|
6913
|
-
|
|
6914
|
-
|
|
6915
|
-
|
|
6916
|
-
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
|
|
6920
|
-
|
|
6921
|
-
|
|
6922
|
-
|
|
6923
|
-
|
|
6885
|
+
}, ot = comment();
|
|
6886
|
+
return element(first_child(ot), () => get(re), !1, (e, t) => {
|
|
6887
|
+
attribute_effect(e, (e) => ({
|
|
6888
|
+
...G() ?? {},
|
|
6889
|
+
class: `pill ${e ?? ""} ${R() ?? "" ?? ""}`,
|
|
6890
|
+
type: get(ne) ? "button" : null,
|
|
6891
|
+
onclick: get(te) ? Re : null,
|
|
6892
|
+
onkeydown: get(be) ? Ue : null,
|
|
6893
|
+
role: get(be) ? "button" : null,
|
|
6894
|
+
tabindex: get(be) ? 0 : null,
|
|
6895
|
+
"aria-disabled": get(Me) && a() ? !0 : null,
|
|
6896
|
+
"aria-expanded": get(Me) && typeof c() == "boolean" ? c() : null,
|
|
6897
|
+
"aria-pressed": get(Me) && typeof l() == "boolean" ? l() : null,
|
|
6898
|
+
"data-pw": typeof u() == "string" ? u() : null,
|
|
6899
|
+
title: f() ?? null,
|
|
6900
|
+
testID: typeof u() == "string" ? u() : null,
|
|
6901
|
+
[CLASS]: { disabled: a() }
|
|
6902
|
+
}), [() => pillToneClass(o())], void 0, void 0, "svelte-13eug5u");
|
|
6903
|
+
var s = root_2$48(), C = first_child(s), k = (e) => {
|
|
6904
|
+
var t = root$75();
|
|
6905
|
+
snippet(child(t), S), reset(t), append(e, t);
|
|
6906
|
+
};
|
|
6907
|
+
if_block(C, (e) => {
|
|
6908
|
+
typeof S() == "function" && e(k);
|
|
6909
|
+
});
|
|
6910
|
+
var re = sibling(C, 2), at = child(re, !0);
|
|
6911
|
+
reset(re);
|
|
6912
|
+
var ot = sibling(re, 2), ct = (e) => {
|
|
6913
|
+
var t = root_1$64(), n = child(t);
|
|
6914
|
+
{
|
|
6915
|
+
let e = /* @__PURE__ */ user_derived(() => h()?.trim() || "Dismiss");
|
|
6916
|
+
Button(n, spread_props({
|
|
6917
|
+
variant: "ghost",
|
|
6918
|
+
get disabled() {
|
|
6919
|
+
return a();
|
|
6920
|
+
},
|
|
6921
|
+
onclick: it,
|
|
6922
|
+
get ariaLabel() {
|
|
6923
|
+
return get(e);
|
|
6924
|
+
}
|
|
6925
|
+
}, () => typeof u() == "string" ? { testId: `${u()}-dismiss` } : {}, {
|
|
6926
|
+
children: (e, t) => {
|
|
6927
|
+
var n = comment(), i = first_child(n), a = (e) => {
|
|
6928
|
+
var t = comment();
|
|
6929
|
+
snippet(first_child(t), p), append(e, t);
|
|
6930
|
+
}, o = (e) => {
|
|
6931
|
+
var t = comment();
|
|
6932
|
+
html(first_child(t), () => close_default), append(e, t);
|
|
6933
|
+
};
|
|
6934
|
+
if_block(i, (e) => {
|
|
6935
|
+
typeof p() == "function" ? e(a) : e(o, -1);
|
|
6936
|
+
}), append(e, n);
|
|
6937
|
+
},
|
|
6938
|
+
$$slots: { default: !0 }
|
|
6939
|
+
}));
|
|
6940
|
+
}
|
|
6941
|
+
reset(t), append(e, t);
|
|
6942
|
+
};
|
|
6943
|
+
if_block(ot, (e) => {
|
|
6944
|
+
i() && e(ct);
|
|
6945
|
+
}), template_effect(() => set_text(at, n())), append(t, s);
|
|
6946
|
+
}), append(e, ot), pop(at);
|
|
6924
6947
|
}
|
|
6925
6948
|
create_custom_element(Pill, {
|
|
6926
6949
|
text: {},
|
|
6927
6950
|
dismissible: {},
|
|
6928
6951
|
disabled: {},
|
|
6929
6952
|
tone: {},
|
|
6953
|
+
as: {},
|
|
6954
|
+
ariaExpanded: {},
|
|
6955
|
+
ariaPressed: {},
|
|
6930
6956
|
testId: {},
|
|
6931
6957
|
title: {},
|
|
6932
6958
|
dismissIcon: {},
|
|
@@ -10289,15 +10315,23 @@ var rest_excludes$62 = new Set([
|
|
|
10289
10315
|
"$$events",
|
|
10290
10316
|
"$$legacy",
|
|
10291
10317
|
"$$host",
|
|
10292
|
-
"pillTitle"
|
|
10318
|
+
"pillTitle",
|
|
10319
|
+
"pillAriaExpanded",
|
|
10320
|
+
"pillAriaPressed"
|
|
10293
10321
|
]);
|
|
10294
10322
|
function Pill_wc(e, t) {
|
|
10295
10323
|
push(t, !0);
|
|
10296
|
-
let n = prop(t, "pillTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$62);
|
|
10297
|
-
return Pill(e, spread_props(() =>
|
|
10324
|
+
let n = prop(t, "pillTitle", 7), i = prop(t, "pillAriaExpanded", 7), a = prop(t, "pillAriaPressed", 7), o = /* @__PURE__ */ rest_props(t, rest_excludes$62);
|
|
10325
|
+
return Pill(e, spread_props(() => o, {
|
|
10298
10326
|
get title() {
|
|
10299
10327
|
return n();
|
|
10300
10328
|
},
|
|
10329
|
+
get ariaExpanded() {
|
|
10330
|
+
return i();
|
|
10331
|
+
},
|
|
10332
|
+
get ariaPressed() {
|
|
10333
|
+
return a();
|
|
10334
|
+
},
|
|
10301
10335
|
leadingIcon: (e) => {
|
|
10302
10336
|
var n = comment();
|
|
10303
10337
|
slot(first_child(n), t, "leading-icon", {}, null), append(e, n);
|
|
@@ -10319,6 +10353,18 @@ function Pill_wc(e, t) {
|
|
|
10319
10353
|
},
|
|
10320
10354
|
set pillTitle(e) {
|
|
10321
10355
|
n(e), flushSync();
|
|
10356
|
+
},
|
|
10357
|
+
get pillAriaExpanded() {
|
|
10358
|
+
return i();
|
|
10359
|
+
},
|
|
10360
|
+
set pillAriaExpanded(e) {
|
|
10361
|
+
i(e), flushSync();
|
|
10362
|
+
},
|
|
10363
|
+
get pillAriaPressed() {
|
|
10364
|
+
return a();
|
|
10365
|
+
},
|
|
10366
|
+
set pillAriaPressed(e) {
|
|
10367
|
+
a(e), flushSync();
|
|
10322
10368
|
}
|
|
10323
10369
|
});
|
|
10324
10370
|
}
|
|
@@ -10339,6 +10385,19 @@ customElements.define("sui-pill", create_custom_element(Pill_wc, {
|
|
|
10339
10385
|
attribute: "tone",
|
|
10340
10386
|
type: "String"
|
|
10341
10387
|
},
|
|
10388
|
+
as: {
|
|
10389
|
+
attribute: "as",
|
|
10390
|
+
reflect: !0,
|
|
10391
|
+
type: "String"
|
|
10392
|
+
},
|
|
10393
|
+
pillAriaExpanded: {
|
|
10394
|
+
attribute: "aria-expanded",
|
|
10395
|
+
type: "Boolean"
|
|
10396
|
+
},
|
|
10397
|
+
pillAriaPressed: {
|
|
10398
|
+
attribute: "aria-pressed",
|
|
10399
|
+
type: "Boolean"
|
|
10400
|
+
},
|
|
10342
10401
|
testId: {
|
|
10343
10402
|
attribute: "test-id",
|
|
10344
10403
|
type: "String"
|