@juspay/svelte-ui-components 4.2.0 → 4.3.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 +45 -6
- package/dist/Pill/pillTone.d.ts +15 -0
- package/dist/Pill/pillTone.js +16 -0
- package/dist/Pill/properties.d.ts +14 -0
- package/dist-wc/index.js +67 -48
- package/package.json +1 -1
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
|
-
|
|
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(
|
|
115
|
-
|
|
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 {
|
|
@@ -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;
|
|
@@ -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
|
+
}
|
|
@@ -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"
|
|
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)
|
|
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, "
|
|
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
|
-
|
|
6777
|
+
a() || p()?.(e);
|
|
6773
6778
|
}
|
|
6774
6779
|
function R(e) {
|
|
6775
|
-
e.
|
|
6780
|
+
e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
|
|
6776
6781
|
}
|
|
6777
|
-
|
|
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
|
|
6804
|
+
get tone() {
|
|
6797
6805
|
return o();
|
|
6798
6806
|
},
|
|
6799
|
-
set
|
|
6807
|
+
set tone(e) {
|
|
6800
6808
|
o(e), flushSync();
|
|
6801
6809
|
},
|
|
6802
|
-
get
|
|
6810
|
+
get testId() {
|
|
6803
6811
|
return s();
|
|
6804
6812
|
},
|
|
6805
|
-
set
|
|
6813
|
+
set testId(e) {
|
|
6806
6814
|
s(e), flushSync();
|
|
6807
6815
|
},
|
|
6808
|
-
get
|
|
6816
|
+
get title() {
|
|
6809
6817
|
return c();
|
|
6810
6818
|
},
|
|
6811
|
-
set
|
|
6819
|
+
set title(e) {
|
|
6812
6820
|
c(e), flushSync();
|
|
6813
6821
|
},
|
|
6814
|
-
get
|
|
6822
|
+
get dismissIcon() {
|
|
6815
6823
|
return l();
|
|
6816
6824
|
},
|
|
6817
|
-
set
|
|
6825
|
+
set dismissIcon(e) {
|
|
6818
6826
|
l(e), flushSync();
|
|
6819
6827
|
},
|
|
6820
|
-
get
|
|
6828
|
+
get dismissLabel() {
|
|
6821
6829
|
return u();
|
|
6822
6830
|
},
|
|
6823
|
-
set
|
|
6831
|
+
set dismissLabel(e) {
|
|
6824
6832
|
u(e), flushSync();
|
|
6825
6833
|
},
|
|
6826
|
-
get
|
|
6834
|
+
get leadingIcon() {
|
|
6827
6835
|
return f();
|
|
6828
6836
|
},
|
|
6829
|
-
set
|
|
6837
|
+
set leadingIcon(e) {
|
|
6830
6838
|
f(e), flushSync();
|
|
6831
6839
|
},
|
|
6832
|
-
get
|
|
6840
|
+
get onclick() {
|
|
6833
6841
|
return p();
|
|
6834
6842
|
},
|
|
6835
|
-
set
|
|
6843
|
+
set onclick(e) {
|
|
6836
6844
|
p(e), flushSync();
|
|
6837
6845
|
},
|
|
6838
|
-
get
|
|
6846
|
+
get ondismiss() {
|
|
6839
6847
|
return h();
|
|
6840
6848
|
},
|
|
6841
|
-
set
|
|
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
|
-
},
|
|
6845
|
-
let
|
|
6846
|
-
var
|
|
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),
|
|
6862
|
+
snippet(child(t), f), reset(t), append(e, t);
|
|
6849
6863
|
};
|
|
6850
|
-
if_block(
|
|
6851
|
-
typeof
|
|
6864
|
+
if_block(be, (e) => {
|
|
6865
|
+
typeof f() == "function" && e(Me);
|
|
6852
6866
|
});
|
|
6853
|
-
var
|
|
6854
|
-
reset(
|
|
6855
|
-
var
|
|
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(() =>
|
|
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:
|
|
6878
|
+
onclick: te,
|
|
6865
6879
|
get ariaLabel() {
|
|
6866
6880
|
return get(e);
|
|
6867
6881
|
}
|
|
6868
|
-
}, () => typeof
|
|
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),
|
|
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
|
|
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(
|
|
6887
|
-
i() && e(
|
|
6888
|
-
}), reset(
|
|
6889
|
-
|
|
6890
|
-
}), delegated("click",
|
|
6891
|
-
(get(
|
|
6892
|
-
}), delegated("keydown",
|
|
6893
|
-
(get(
|
|
6894
|
-
}), append(e,
|
|
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"
|