@getflip/swirl-components 0.524.0 → 0.525.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/components.json +49 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-tag.cjs.entry.js +12 -3
- package/dist/collection/components/swirl-tag/swirl-tag.css +30 -0
- package/dist/collection/components/swirl-tag/swirl-tag.js +50 -2
- package/dist/components/swirl-tag2.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-tag.entry.js +12 -3
- package/dist/swirl-components/p-dff515cc.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-tag/swirl-tag.d.ts +3 -0
- package/dist/types/components.d.ts +11 -0
- package/package.json +1 -1
- package/vscode-data.json +4 -0
- package/dist/swirl-components/p-acba183a.entry.js +0 -1
|
@@ -3,20 +3,25 @@
|
|
|
3
3
|
var index = require('./index-DfC2lanl.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
|
|
6
|
-
const swirlTagCss = () => `:host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}`;
|
|
6
|
+
const swirlTagCss = () => `:host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag--interactive{position:relative;font-family:inherit;cursor:pointer}.tag--interactive::after{position:absolute;border-radius:inherit;content:"";inset:calc(-1 * var(--s-border-width-default));pointer-events:none}.tag--interactive:hover::after{background-color:var(--s-state-hovered)}.tag--interactive:active::after{background-color:var(--s-state-pressed)}.tag--interactive:focus:not(:focus-visible){outline:none}.tag--interactive:focus-visible{outline-color:var(--s-focus-default)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}`;
|
|
7
7
|
|
|
8
8
|
const SwirlTag = class {
|
|
9
9
|
constructor(hostRef) {
|
|
10
10
|
index.registerInstance(this, hostRef);
|
|
11
11
|
this.removeTag = index.createEvent(this, "remove", 7);
|
|
12
|
+
this.tagClick = index.createEvent(this, "tagClick", 7);
|
|
12
13
|
this.iconPosition = "start";
|
|
13
14
|
this.intent = "default";
|
|
15
|
+
this.interactive = false;
|
|
14
16
|
this.size = "m";
|
|
15
17
|
this.removalButtonLabel = "Remove";
|
|
16
18
|
this.variant = "default";
|
|
17
19
|
this.onRemove = (event) => {
|
|
18
20
|
this.removeTag?.emit(event);
|
|
19
21
|
};
|
|
22
|
+
this.onClick = (event) => {
|
|
23
|
+
this.tagClick.emit(event);
|
|
24
|
+
};
|
|
20
25
|
}
|
|
21
26
|
componentDidLoad() {
|
|
22
27
|
this.forceIconProps();
|
|
@@ -38,8 +43,12 @@ const SwirlTag = class {
|
|
|
38
43
|
}
|
|
39
44
|
}
|
|
40
45
|
render() {
|
|
41
|
-
const
|
|
42
|
-
|
|
46
|
+
const Tag = this.interactive ? "button" : "span";
|
|
47
|
+
const className = index$1.classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, {
|
|
48
|
+
"tag--hide-label": this.hideLabel,
|
|
49
|
+
"tag--interactive": this.interactive,
|
|
50
|
+
});
|
|
51
|
+
return (index.h(index.Host, { key: '9637cdd4b1ad7b0dccb5c04a0ddefd8ee2325f7a' }, index.h(Tag, { key: '99dc3fb14fd345e4275bb8442be97fd254080c30', class: className, onClick: this.interactive ? this.onClick : undefined, part: "tag", tabIndex: this.interactive && this.el.ariaHidden === "true" ? -1 : undefined, type: this.interactive ? "button" : undefined }, this.icon && (index.h("span", { key: 'ee15018f6a8aa37397f235e7e10c32a567cc63d7', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (index.h("span", { class: "tag__label" }, this.label)) : (index.h("swirl-visually-hidden", null, this.label)), this.removable && (index.h("button", { key: '63fe4e28921608f31474a7a2698193b83cd065e9', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { key: '51d9a82d4a1632c4b990e14ff170d14eeb3c2b45', size: 16 }))))));
|
|
43
52
|
}
|
|
44
53
|
get el() { return index.getElement(this); }
|
|
45
54
|
};
|
|
@@ -196,6 +196,36 @@
|
|
|
196
196
|
border-color: var(--s-text-on-image);
|
|
197
197
|
}
|
|
198
198
|
|
|
199
|
+
.tag--interactive {
|
|
200
|
+
position: relative;
|
|
201
|
+
font-family: inherit;
|
|
202
|
+
cursor: pointer;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.tag--interactive::after {
|
|
206
|
+
position: absolute;
|
|
207
|
+
border-radius: inherit;
|
|
208
|
+
content: "";
|
|
209
|
+
inset: calc(-1 * var(--s-border-width-default));
|
|
210
|
+
pointer-events: none;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.tag--interactive:hover::after {
|
|
214
|
+
background-color: var(--s-state-hovered);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.tag--interactive:active::after {
|
|
218
|
+
background-color: var(--s-state-pressed);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.tag--interactive:focus:not(:focus-visible) {
|
|
222
|
+
outline: none;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.tag--interactive:focus-visible {
|
|
226
|
+
outline-color: var(--s-focus-default);
|
|
227
|
+
}
|
|
228
|
+
|
|
199
229
|
.tag__icon {
|
|
200
230
|
display: inline-flex;
|
|
201
231
|
margin-right: var(--s-space-4);
|
|
@@ -4,12 +4,16 @@ export class SwirlTag {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
this.iconPosition = "start";
|
|
6
6
|
this.intent = "default";
|
|
7
|
+
this.interactive = false;
|
|
7
8
|
this.size = "m";
|
|
8
9
|
this.removalButtonLabel = "Remove";
|
|
9
10
|
this.variant = "default";
|
|
10
11
|
this.onRemove = (event) => {
|
|
11
12
|
this.removeTag?.emit(event);
|
|
12
13
|
};
|
|
14
|
+
this.onClick = (event) => {
|
|
15
|
+
this.tagClick.emit(event);
|
|
16
|
+
};
|
|
13
17
|
}
|
|
14
18
|
componentDidLoad() {
|
|
15
19
|
this.forceIconProps();
|
|
@@ -31,8 +35,12 @@ export class SwirlTag {
|
|
|
31
35
|
}
|
|
32
36
|
}
|
|
33
37
|
render() {
|
|
34
|
-
const
|
|
35
|
-
|
|
38
|
+
const Tag = this.interactive ? "button" : "span";
|
|
39
|
+
const className = classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, {
|
|
40
|
+
"tag--hide-label": this.hideLabel,
|
|
41
|
+
"tag--interactive": this.interactive,
|
|
42
|
+
});
|
|
43
|
+
return (h(Host, { key: '9637cdd4b1ad7b0dccb5c04a0ddefd8ee2325f7a' }, h(Tag, { key: '99dc3fb14fd345e4275bb8442be97fd254080c30', class: className, onClick: this.interactive ? this.onClick : undefined, part: "tag", tabIndex: this.interactive && this.el.ariaHidden === "true" ? -1 : undefined, type: this.interactive ? "button" : undefined }, this.icon && (h("span", { key: 'ee15018f6a8aa37397f235e7e10c32a567cc63d7', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: '63fe4e28921608f31474a7a2698193b83cd065e9', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '51d9a82d4a1632c4b990e14ff170d14eeb3c2b45', size: 16 }))))));
|
|
36
44
|
}
|
|
37
45
|
static get is() { return "swirl-tag"; }
|
|
38
46
|
static get encapsulation() { return "shadow"; }
|
|
@@ -138,6 +146,26 @@ export class SwirlTag {
|
|
|
138
146
|
"attribute": "intent",
|
|
139
147
|
"defaultValue": "\"default\""
|
|
140
148
|
},
|
|
149
|
+
"interactive": {
|
|
150
|
+
"type": "boolean",
|
|
151
|
+
"mutable": false,
|
|
152
|
+
"complexType": {
|
|
153
|
+
"original": "boolean",
|
|
154
|
+
"resolved": "boolean",
|
|
155
|
+
"references": {}
|
|
156
|
+
},
|
|
157
|
+
"required": false,
|
|
158
|
+
"optional": true,
|
|
159
|
+
"docs": {
|
|
160
|
+
"tags": [],
|
|
161
|
+
"text": ""
|
|
162
|
+
},
|
|
163
|
+
"getter": false,
|
|
164
|
+
"setter": false,
|
|
165
|
+
"reflect": false,
|
|
166
|
+
"attribute": "interactive",
|
|
167
|
+
"defaultValue": "false"
|
|
168
|
+
},
|
|
141
169
|
"label": {
|
|
142
170
|
"type": "string",
|
|
143
171
|
"mutable": false,
|
|
@@ -290,6 +318,26 @@ export class SwirlTag {
|
|
|
290
318
|
}
|
|
291
319
|
}
|
|
292
320
|
}
|
|
321
|
+
}, {
|
|
322
|
+
"method": "tagClick",
|
|
323
|
+
"name": "tagClick",
|
|
324
|
+
"bubbles": true,
|
|
325
|
+
"cancelable": true,
|
|
326
|
+
"composed": true,
|
|
327
|
+
"docs": {
|
|
328
|
+
"tags": [],
|
|
329
|
+
"text": ""
|
|
330
|
+
},
|
|
331
|
+
"complexType": {
|
|
332
|
+
"original": "MouseEvent",
|
|
333
|
+
"resolved": "MouseEvent",
|
|
334
|
+
"references": {
|
|
335
|
+
"MouseEvent": {
|
|
336
|
+
"location": "global",
|
|
337
|
+
"id": "global::MouseEvent"
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}
|
|
293
341
|
}];
|
|
294
342
|
}
|
|
295
343
|
static get elementRef() { return "el"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as a,createEvent as
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as a,createEvent as e,h as r,Host as o,transformTag as i}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as s}from"./swirl-icon-close2.js";import{d as c}from"./swirl-visually-hidden2.js";const l=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.removeTag=e(this,"remove",7),this.tagClick=e(this,"tagClick",7),this.iconPosition="start",this.intent="default",this.interactive=!1,this.size="m",this.removalButtonLabel="Remove",this.variant="default",this.onRemove=t=>{this.removeTag?.emit(t)},this.onClick=t=>{this.tagClick.emit(t)}}componentDidLoad(){this.forceIconProps()}componentWillLoad(){this.forceVariant()}componentDidRender(){this.forceIconProps()}forceIconProps(){const t=this.iconEl?.children[0];t?.setAttribute("size","16")}forceVariant(){Boolean(this.bordered)&&(console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.'),this.variant="outline")}render(){const t=this.interactive?"button":"span",a=n("tag",`tag--icon-position-${this.iconPosition}`,`tag--intent-${this.intent}`,`tag--size-${this.size}`,`tag--variant-${this.variant}`,{"tag--hide-label":this.hideLabel,"tag--interactive":this.interactive});return r(o,{key:"9637cdd4b1ad7b0dccb5c04a0ddefd8ee2325f7a"},r(t,{key:"99dc3fb14fd345e4275bb8442be97fd254080c30",class:a,onClick:this.interactive?this.onClick:void 0,part:"tag",tabIndex:this.interactive&&"true"===this.el.ariaHidden?-1:void 0,type:this.interactive?"button":void 0},this.icon&&r("span",{key:"ee15018f6a8aa37397f235e7e10c32a567cc63d7",class:"tag__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),this.hideLabel?r("swirl-visually-hidden",null,this.label):r("span",{class:"tag__label"},this.label),this.removable&&r("button",{key:"63fe4e28921608f31474a7a2698193b83cd065e9","aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,tabIndex:"true"===this.el.ariaHidden?-1:void 0,type:"button"},r("swirl-icon-close",{key:"51d9a82d4a1632c4b990e14ff170d14eeb3c2b45",size:16}))))}get el(){return this}static get style(){return':host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag--interactive{position:relative;font-family:inherit;cursor:pointer}.tag--interactive::after{position:absolute;border-radius:inherit;content:"";inset:calc(-1 * var(--s-border-width-default));pointer-events:none}.tag--interactive:hover::after{background-color:var(--s-state-hovered)}.tag--interactive:active::after{background-color:var(--s-state-pressed)}.tag--interactive:focus:not(:focus-visible){outline:none}.tag--interactive:focus-visible{outline-color:var(--s-focus-default)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}'}},[1,"swirl-tag",{hideLabel:[4,"hide-label"],icon:[1],iconPosition:[1,"icon-position"],intent:[1],interactive:[4],label:[1],removable:[4],bordered:[4],size:[1],removalButtonLabel:[1,"removal-button-label"],variant:[1025]}]);function g(){"undefined"!=typeof customElements&&["swirl-tag","swirl-icon-close","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-tag":customElements.get(i(t))||customElements.define(i(t),l);break;case"swirl-icon-close":customElements.get(i(t))||s();break;case"swirl-visually-hidden":customElements.get(i(t))||c()}}))}export{l as S,g as d}
|