@vonage/vwc-tags 2.30.3 → 2.33.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/package.json +7 -7
- package/vwc-tag-base.d.ts +2 -0
- package/vwc-tag-base.js +11 -0
- package/vwc-tag-base.js.map +1 -1
- package/vwc-tag.css.js +1 -1
- package/vwc-tag.css.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-tags",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.33.0",
|
|
4
4
|
"description": "tags component",
|
|
5
5
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/tags#readme",
|
|
6
6
|
"license": "ISC",
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@material/mwc-ripple": "^0.22.1",
|
|
29
|
-
"@vonage/vvd-core": "2.
|
|
30
|
-
"@vonage/vvd-foundation": "2.
|
|
31
|
-
"@vonage/vvd-typography": "2.
|
|
32
|
-
"@vonage/vwc-icon": "2.
|
|
29
|
+
"@vonage/vvd-core": "2.33.0",
|
|
30
|
+
"@vonage/vvd-foundation": "2.33.0",
|
|
31
|
+
"@vonage/vvd-typography": "2.33.0",
|
|
32
|
+
"@vonage/vwc-icon": "2.33.0",
|
|
33
33
|
"lit-element": "^2.4.0",
|
|
34
34
|
"lit-html": "^1.3.0",
|
|
35
35
|
"tslib": "^2.3.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@vonage/vvd-umbrella": "2.
|
|
38
|
+
"@vonage/vvd-umbrella": "2.33.0"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "7230fa2eb98d250fb91f43ec9a991be31919fe05"
|
|
41
41
|
}
|
package/vwc-tag-base.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export declare class VWCTagBase extends LitElement {
|
|
|
16
16
|
shape?: TagShape;
|
|
17
17
|
layout?: TagLayout;
|
|
18
18
|
selectable: boolean;
|
|
19
|
+
removable: boolean;
|
|
19
20
|
protected shouldRenderRipple: boolean;
|
|
20
21
|
protected rippleHandlers: RippleHandlers;
|
|
21
22
|
focus(): void;
|
|
@@ -24,6 +25,7 @@ export declare class VWCTagBase extends LitElement {
|
|
|
24
25
|
protected renderIcon(type?: string): TemplateResult;
|
|
25
26
|
protected getRenderClasses(): ClassInfo;
|
|
26
27
|
protected renderTagSelectable(): TemplateResult;
|
|
28
|
+
protected renderRemoveButton(): TemplateResult;
|
|
27
29
|
render(): TemplateResult;
|
|
28
30
|
handleKeydown({ key }: KeyboardEvent): void;
|
|
29
31
|
protected handleRippleActivate(evt?: Event): void;
|
package/vwc-tag-base.js
CHANGED
|
@@ -3,11 +3,13 @@ import '@material/mwc-ripple';
|
|
|
3
3
|
import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers.js';
|
|
4
4
|
import { classMap } from 'lit-html/directives/class-map.js';
|
|
5
5
|
import { LitElement, html, property, queryAsync, state, query, eventOptions } from 'lit-element';
|
|
6
|
+
import { nothing } from 'lit-html';
|
|
6
7
|
export class VWCTagBase extends LitElement {
|
|
7
8
|
constructor() {
|
|
8
9
|
super(...arguments);
|
|
9
10
|
this.selected = false;
|
|
10
11
|
this.selectable = false;
|
|
12
|
+
this.removable = false;
|
|
11
13
|
this.shouldRenderRipple = false;
|
|
12
14
|
this.rippleHandlers = new RippleHandlers(() => {
|
|
13
15
|
this.shouldRenderRipple = true;
|
|
@@ -67,11 +69,17 @@ export class VWCTagBase extends LitElement {
|
|
|
67
69
|
</span>
|
|
68
70
|
</span>`;
|
|
69
71
|
}
|
|
72
|
+
renderRemoveButton() {
|
|
73
|
+
return html `<button class="remove-button" @click="${() => this.remove()}">
|
|
74
|
+
${this.renderIcon('close-line')}
|
|
75
|
+
</button>`;
|
|
76
|
+
}
|
|
70
77
|
render() {
|
|
71
78
|
return this.selectable
|
|
72
79
|
? this.renderTagSelectable()
|
|
73
80
|
: html `<span class="vwc-tag ${classMap(this.getRenderClasses())}">
|
|
74
81
|
${this.text}
|
|
82
|
+
${this.removable ? this.renderRemoveButton() : nothing}
|
|
75
83
|
</span>`;
|
|
76
84
|
}
|
|
77
85
|
handleKeydown({ key }) {
|
|
@@ -127,6 +135,9 @@ __decorate([
|
|
|
127
135
|
__decorate([
|
|
128
136
|
property({ type: Boolean, reflect: true })
|
|
129
137
|
], VWCTagBase.prototype, "selectable", void 0);
|
|
138
|
+
__decorate([
|
|
139
|
+
property({ type: Boolean, reflect: true })
|
|
140
|
+
], VWCTagBase.prototype, "removable", void 0);
|
|
130
141
|
__decorate([
|
|
131
142
|
state()
|
|
132
143
|
], VWCTagBase.prototype, "shouldRenderRipple", void 0);
|
package/vwc-tag-base.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-tag-base.js","sourceRoot":"","sources":["src/vwc-tag-base.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAGzE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EACN,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAkB,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAClF,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"vwc-tag-base.js","sourceRoot":"","sources":["src/vwc-tag-base.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-ripple';\nimport type { Ripple } from '@material/mwc-ripple';\nimport { RippleHandlers } from '@material/mwc-ripple/ripple-handlers.js';\n\nimport type { Connotation, Shape, Layout } from '@vonage/vvd-foundation/constants.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport type { ClassInfo } from 'lit-html/directives/class-map.js';\nimport {\n\tLitElement, html, property, TemplateResult, queryAsync, state, query, eventOptions\n} from 'lit-element';\nimport { nothing } from 'lit-html';\n\n\ntype TagConnotation = Extract<\n\tConnotation,\n\t| Connotation.Primary\n\t| Connotation.CTA\n>;\n\ntype TagShape = Extract<Shape, Shape.Rounded | Shape.Pill>;\n\ntype TagLayout = Extract<\n\tLayout, Layout.Outlined | Layout.Soft\n>;\nexport class VWCTagBase extends LitElement {\n\t@queryAsync('mwc-ripple') ripple!: Promise<Ripple | null>;\n\n\t@query('#selectable') selectableElement!: HTMLElement;\n\n\t@property({ type: String, reflect: true })\n\t\ttext?: string;\n\n\t@property({ type: Boolean, reflect: true })\n\t\tselected = false;\n\n\t@property({ type: String, reflect: true })\n\t\tconnotation?: TagConnotation;\n\n\t@property({ type: String, reflect: true })\n\t\tshape?: TagShape;\n\n\t@property({ type: String, reflect: true })\n\t\tlayout?: TagLayout;\n\n\t@property({ type: Boolean, reflect: true })\n\t\tselectable = false;\n\n\t@property({ type: Boolean, reflect: true })\n\t\tremovable = false;\n\n\t@state() protected shouldRenderRipple = false;\n\n\tprotected rippleHandlers = new RippleHandlers(() => {\n\t\tthis.shouldRenderRipple = true;\n\t\treturn this.ripple;\n\t});\n\n\toverride focus(): void {\n\t\tconst selectableElement = this.selectableElement;\n\t\tif (selectableElement) {\n\t\t\tthis.rippleHandlers.startFocus();\n\t\t\tselectableElement.focus();\n\t\t}\n\t}\n\n\toverride blur(): void {\n\t\tconst selectableElement = this.selectableElement;\n\t\tif (selectableElement) {\n\t\t\tthis.rippleHandlers.endFocus();\n\t\t\tselectableElement.blur();\n\t\t}\n\t}\n\n\t// protected firstUpdated(): void {\n\t// \tif (this.selected) {\n\t// \t\tthis.handleRippleActivate();\n\t// \t}\n\t// }\n\n\tprotected renderRipple(): TemplateResult | string {\n\t\treturn this.shouldRenderRipple ?\n\t\t\thtml`<mwc-ripple class=\"ripple\"></mwc-ripple>` : '';\n\t}\n\n\tprotected renderIcon(type?: string): TemplateResult {\n\t\treturn html`<vwc-icon class=\"vwc-tag__icon\" .type=\"${type}\"></vwc-icon>`;\n\t}\n\n\tprotected getRenderClasses(): ClassInfo {\n\t\treturn {\n\t\t\t[`connotation-${this.connotation}`]: !!this.connotation,\n\t\t\t[`layout-${this.layout}`]: !!this.layout\n\t\t};\n\t}\n\n\tprotected renderTagSelectable(): TemplateResult {\n\t\tconst classes = {\n\t\t\t'vwc-tag--selected': this.selected,\n\t\t\t...this.getRenderClasses()\n\t\t};\n\n\t\treturn html`<span\n\t\t\tid=\"selectable\"\n\t\t\tclass=\"vwc-tag vwc-tag-selectable ${classMap(classes)}\"\n\t\t\trole=\"option\"\n\t\t\taria-selected=\"${this.selected}\"\n\t\t\t@focus=\"${this.handleRippleFocus}\"\n\t\t\t@blur=\"${this.handleRippleBlur}\"\n\t\t\t@mousedown=\"${this.handleRippleActivate}\"\n\t\t\t@mouseenter=\"${this.handleRippleMouseEnter}\"\n\t\t\t@mouseleave=\"${this.handleRippleMouseLeave}\"\n\t\t\t@touchstart=\"${this.handleRippleActivate}\"\n\t\t\t@touchend=\"${this.handleRippleDeactivate}\"\n\t\t\t@touchcancel=\"${this.handleRippleDeactivate}\"\n\t\t\t@click=\"${() => this.selected = !this.selected}\"\n\t\t\t@keydown=\"${this.handleKeydown}\">\n\t\t\t${this.renderRipple()}\n\t\t\t<span class=\"vwc-tag__checkmark\">\n\t\t\t\t${this.renderIcon('check-circle-solid')}\n\t\t\t</span>\n\t\t\t<span class=\"text\">\n\t\t\t\t${this.text}\n\t\t\t</span>\n\t\t</span>`;\n\t}\n\n\tprotected renderRemoveButton(): TemplateResult {\n\t\treturn html`<button class=\"remove-button\" @click=\"${()=> this.remove()}\">\n\t\t\t${this.renderIcon('close-line')}\n\t\t</button>`;\n\t}\n\n\toverride render(): TemplateResult {\n\t\treturn this.selectable\n\t\t\t? this.renderTagSelectable()\n\t\t\t: html`<span class=\"vwc-tag ${classMap(this.getRenderClasses())}\">\n\t\t\t${this.text}\n\t\t\t${this.removable ? this.renderRemoveButton() : nothing}\n\t\t</span>`;\n\t}\n\n\thandleKeydown({ key }: KeyboardEvent): void {\n\t\tif (key === ' '/* spacebar */) {\n\t\t\tthis.selected = !this.selected;\n\t\t}\n\t}\n\n\t@eventOptions({ passive: true })\n\tprotected handleRippleActivate(evt?: Event): void {\n\t\tconst onUp = () => {\n\t\t\twindow.removeEventListener('mouseup', onUp);\n\n\t\t\tthis.handleRippleDeactivate();\n\t\t};\n\n\t\twindow.addEventListener('mouseup', onUp);\n\t\tthis.rippleHandlers.startPress(evt);\n\t}\n\n\tprotected handleRippleDeactivate(): void {\n\t\tthis.rippleHandlers.endPress();\n\t}\n\n\tprotected handleRippleMouseEnter(): void {\n\t\tthis.rippleHandlers.startHover();\n\t}\n\n\tprotected handleRippleMouseLeave(): void {\n\t\tthis.rippleHandlers.endHover();\n\t}\n\n\tprotected handleRippleFocus(): void {\n\t\tthis.rippleHandlers.startFocus();\n\t}\n\n\tprotected handleRippleBlur(): void {\n\t\tthis.rippleHandlers.endFocus();\n\t}\n}\n"]}
|
package/vwc-tag.css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
export const style = css `.vwc-tag.layout-outlined{--layout-color-fill:transparent;--layout-color-outline:var(--connotation);--layout-color-text:var(--connotation-contrast)}.vwc-tag.layout-soft,.vwc-tag:not(.layout-outlined){--layout-color-fill:var(--connotation-soft);--layout-color-text:var(--connotation-contrast)}:host([shape=rounded i]){--vvd-tag--shape:4px}:host(:not([shape=rounded i])),:host([shape=pill i]){--vvd-tag--shape:14px}.vwc-tag{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;--vvd-tag--padding-inline:10px;--vvd-tag__icon-checkmark--padding-inline-end:6px;--vvd-tag--block-size:24px;--vvd-tag__icon-checkmark--size:16px;--layout-color-outline:var(--vvd-color-neutral-50);z-index:0;display:inline-flex;align-items:center;padding:0 var(--vvd-tag--padding-inline);border-color:var(--vvd-color-neutral-50);background-color:var(--layout-color-fill);block-size:var(--vvd-tag--block-size);border-radius:var(--vvd-tag--shape);color:var(--layout-color-text);vertical-align:top}.vwc-tag.connotation-primary,.vwc-tag:not(.connotation-cta){--connotation:var(--vvd-color-primary);--on-connotation:var(--vvd-color-on-primary);--connotation-soft:var(--vvd-color-neutral-20);--connotation-contrast:var(--vvd-color-primary)}.vwc-tag.connotation-cta{--connotation:var(--vvd-color-cta);--on-connotation:var(--vvd-color-on-cta);--connotation-soft:var(--vvd-color-cta-20);--connotation-contrast:var(--vvd-color-cta-90)}.vwc-tag.layout-outlined{box-sizing:border-box;border-width:1px;border-style:solid}.vwc-tag:not(.vwc-tag-selectable){--layout-color-text:var(--vvd-color-neutral-90)}.vwc-tag:not(.vwc-tag-selectable).layout-filled,.vwc-tag:not(.vwc-tag-selectable):not(.layout-filled):not(.layout-outlined){--layout-color-fill:var(--vvd-color-neutral-20)}.vwc-tag-selectable{position:relative;overflow:hidden;cursor:pointer}.vwc-tag-selectable .ripple{--mdc-ripple-color: currentColor}.vwc-tag-selectable:not(.vwc-tag--selected){--layout-color-text:var(--vvd-color-neutral-90)}.vwc-tag-selectable:not(.vwc-tag--selected).layout-filled,.vwc-tag-selectable:not(.vwc-tag--selected):not(.layout-filled):not(.layout-outlined){background-color:var(--vvd-color-neutral-20)}.vwc-tag-selectable.vwc-tag--selected.layout-outlined{background-color:var(--connotation-soft);color:var(--connotation-contrast)}.vwc-tag__checkmark{block-size:var(--vvd-tag__icon-checkmark--size);line-height:1;margin-inline-end:0;margin-inline-start:0}@media(prefers-reduced-motion: no-preference){.vwc-tag__checkmark{transition-duration:.1s;transition-property:margin-inline-start,margin-inline-end}}.vwc-tag.vwc-tag--selected .vwc-tag__checkmark{margin-inline-end:var(--vvd-tag__icon-checkmark--padding-inline-end);margin-inline-start:calc(4px - var(--vvd-tag--padding-inline))}.vwc-tag__checkmark>.vwc-tag__icon{block-size:var(--vvd-tag__icon-checkmark--size);inline-size:var(--vvd-tag__icon-checkmark--size)}@media(prefers-reduced-motion: no-preference){.vwc-tag__checkmark>.vwc-tag__icon{transition:inline-size .1s}}.vwc-tag:not(.vwc-tag--selected) .vwc-tag__checkmark>.vwc-tag__icon{inline-size:0}`;
|
|
2
|
+
export const style = css `.vwc-tag.layout-outlined{--layout-color-fill:transparent;--layout-color-outline:var(--connotation);--layout-color-text:var(--connotation-contrast)}.vwc-tag.layout-soft,.vwc-tag:not(.layout-outlined){--layout-color-fill:var(--connotation-soft);--layout-color-text:var(--connotation-contrast)}:host([shape=rounded i]){--vvd-tag--shape:4px}:host(:not([shape=rounded i])),:host([shape=pill i]){--vvd-tag--shape:14px}.vwc-tag{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;--vvd-tag--padding-inline:10px;--vvd-tag__icon-checkmark--padding-inline-end:6px;--vvd-tag--block-size:24px;--vvd-tag__icon-checkmark--size:16px;--layout-color-outline:var(--vvd-color-neutral-50);z-index:0;display:inline-flex;align-items:center;padding:0 var(--vvd-tag--padding-inline);border-color:var(--vvd-color-neutral-50);background-color:var(--layout-color-fill);block-size:var(--vvd-tag--block-size);border-radius:var(--vvd-tag--shape);color:var(--layout-color-text);vertical-align:top}.vwc-tag.connotation-primary,.vwc-tag:not(.connotation-cta){--connotation:var(--vvd-color-primary);--on-connotation:var(--vvd-color-on-primary);--connotation-soft:var(--vvd-color-neutral-20);--connotation-contrast:var(--vvd-color-primary)}.vwc-tag.connotation-cta{--connotation:var(--vvd-color-cta);--on-connotation:var(--vvd-color-on-cta);--connotation-soft:var(--vvd-color-cta-20);--connotation-contrast:var(--vvd-color-cta-90)}.vwc-tag.layout-outlined{box-sizing:border-box;border-width:1px;border-style:solid}.vwc-tag:not(.vwc-tag-selectable){--layout-color-text:var(--vvd-color-neutral-90)}.vwc-tag:not(.vwc-tag-selectable).layout-filled,.vwc-tag:not(.vwc-tag-selectable):not(.layout-filled):not(.layout-outlined){--layout-color-fill:var(--vvd-color-neutral-20)}.vwc-tag-selectable{position:relative;overflow:hidden;cursor:pointer}.vwc-tag-selectable .ripple{--mdc-ripple-color: currentColor}.vwc-tag-selectable:not(.vwc-tag--selected){--layout-color-text:var(--vvd-color-neutral-90)}.vwc-tag-selectable:not(.vwc-tag--selected).layout-filled,.vwc-tag-selectable:not(.vwc-tag--selected):not(.layout-filled):not(.layout-outlined){background-color:var(--vvd-color-neutral-20)}.vwc-tag-selectable.vwc-tag--selected.layout-outlined{border-color:var(--layout-color-outline);background-color:var(--connotation-soft);color:var(--connotation-contrast)}.vwc-tag__checkmark{block-size:var(--vvd-tag__icon-checkmark--size);line-height:1;margin-inline-end:0;margin-inline-start:0}@media(prefers-reduced-motion: no-preference){.vwc-tag__checkmark{transition-duration:.1s;transition-property:margin-inline-start,margin-inline-end}}.vwc-tag.vwc-tag--selected .vwc-tag__checkmark{margin-inline-end:var(--vvd-tag__icon-checkmark--padding-inline-end);margin-inline-start:calc(4px - var(--vvd-tag--padding-inline))}.vwc-tag__checkmark>.vwc-tag__icon{--connotation:initial;block-size:var(--vvd-tag__icon-checkmark--size);inline-size:var(--vvd-tag__icon-checkmark--size)}@media(prefers-reduced-motion: no-preference){.vwc-tag__checkmark>.vwc-tag__icon{transition:inline-size .1s}}.vwc-tag:not(.vwc-tag--selected) .vwc-tag__checkmark>.vwc-tag__icon{inline-size:0}.remove-button{all:unset;margin-inline-start:10px}.remove-button .vwc-tag__icon{--vvd-icon-size: 12px}`;
|
|
3
3
|
//# sourceMappingURL=vwc-tag.css.js.map
|
package/vwc-tag.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-tag.css.js","sourceRoot":"","sources":["src/vwc-tag.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"vwc-tag.css.js","sourceRoot":"","sources":["src/vwc-tag.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,8sGAA8sG,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`.vwc-tag.layout-outlined{--layout-color-fill:transparent;--layout-color-outline:var(--connotation);--layout-color-text:var(--connotation-contrast)}.vwc-tag.layout-soft,.vwc-tag:not(.layout-outlined){--layout-color-fill:var(--connotation-soft);--layout-color-text:var(--connotation-contrast)}:host([shape=rounded i]){--vvd-tag--shape:4px}:host(:not([shape=rounded i])),:host([shape=pill i]){--vvd-tag--shape:14px}.vwc-tag{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;--vvd-tag--padding-inline:10px;--vvd-tag__icon-checkmark--padding-inline-end:6px;--vvd-tag--block-size:24px;--vvd-tag__icon-checkmark--size:16px;--layout-color-outline:var(--vvd-color-neutral-50);z-index:0;display:inline-flex;align-items:center;padding:0 var(--vvd-tag--padding-inline);border-color:var(--vvd-color-neutral-50);background-color:var(--layout-color-fill);block-size:var(--vvd-tag--block-size);border-radius:var(--vvd-tag--shape);color:var(--layout-color-text);vertical-align:top}.vwc-tag.connotation-primary,.vwc-tag:not(.connotation-cta){--connotation:var(--vvd-color-primary);--on-connotation:var(--vvd-color-on-primary);--connotation-soft:var(--vvd-color-neutral-20);--connotation-contrast:var(--vvd-color-primary)}.vwc-tag.connotation-cta{--connotation:var(--vvd-color-cta);--on-connotation:var(--vvd-color-on-cta);--connotation-soft:var(--vvd-color-cta-20);--connotation-contrast:var(--vvd-color-cta-90)}.vwc-tag.layout-outlined{box-sizing:border-box;border-width:1px;border-style:solid}.vwc-tag:not(.vwc-tag-selectable){--layout-color-text:var(--vvd-color-neutral-90)}.vwc-tag:not(.vwc-tag-selectable).layout-filled,.vwc-tag:not(.vwc-tag-selectable):not(.layout-filled):not(.layout-outlined){--layout-color-fill:var(--vvd-color-neutral-20)}.vwc-tag-selectable{position:relative;overflow:hidden;cursor:pointer}.vwc-tag-selectable .ripple{--mdc-ripple-color: currentColor}.vwc-tag-selectable:not(.vwc-tag--selected){--layout-color-text:var(--vvd-color-neutral-90)}.vwc-tag-selectable:not(.vwc-tag--selected).layout-filled,.vwc-tag-selectable:not(.vwc-tag--selected):not(.layout-filled):not(.layout-outlined){background-color:var(--vvd-color-neutral-20)}.vwc-tag-selectable.vwc-tag--selected.layout-outlined{border-color:var(--layout-color-outline);background-color:var(--connotation-soft);color:var(--connotation-contrast)}.vwc-tag__checkmark{block-size:var(--vvd-tag__icon-checkmark--size);line-height:1;margin-inline-end:0;margin-inline-start:0}@media(prefers-reduced-motion: no-preference){.vwc-tag__checkmark{transition-duration:.1s;transition-property:margin-inline-start,margin-inline-end}}.vwc-tag.vwc-tag--selected .vwc-tag__checkmark{margin-inline-end:var(--vvd-tag__icon-checkmark--padding-inline-end);margin-inline-start:calc(4px - var(--vvd-tag--padding-inline))}.vwc-tag__checkmark>.vwc-tag__icon{--connotation:initial;block-size:var(--vvd-tag__icon-checkmark--size);inline-size:var(--vvd-tag__icon-checkmark--size)}@media(prefers-reduced-motion: no-preference){.vwc-tag__checkmark>.vwc-tag__icon{transition:inline-size .1s}}.vwc-tag:not(.vwc-tag--selected) .vwc-tag__checkmark>.vwc-tag__icon{inline-size:0}.remove-button{all:unset;margin-inline-start:10px}.remove-button .vwc-tag__icon{--vvd-icon-size: 12px}`;"]}
|