xv-webcomponents 0.1.43 → 0.1.44

package/dist/collection/components/xv-tabs/xv-tab/xv-tab.css

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+}
+
+:host([loading]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}

package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js

@@ -0,0 +1,106 @@
+import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../../types/enum";
+export class XvTab {
+    constructor() {
+        this.disabled = false;
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, { key: 'ab7f5dbb607ca9c91a2503b4f5a739685e2ec45f', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
+    }
+    static get is() { return "xv-tab-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "any",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-tab.js.map

package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tab.js","sourceRoot":"","sources":["../../../../src/components/xv-tabs/xv-tab/xv-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAO/C,MAAM,OAAO,KAAK;IALlB;QAO2B,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAY,KAAK,CAAC;KAUnD;IAPC,MAAM;QACJ,OAAO,CACP,EAAC,IAAI,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAC3C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAc,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,CAAC,CAAC,CAAC,eAAQ,CACzD,CACN,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { SIZE_VAR } from '../../../types/enum';\n\n@Component({\n  tag: 'xv-tab-v2',\n  styleUrl: 'xv-tab.scss',\n  shadow: true,\n})\nexport class XvTab {\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) loading: boolean = false;\n  @Prop() name?: number | string;\n\n  render() {\n    return (\n    <Host disabled={this.disabled} name={this.name}>\n      {this.loading ? <xv-loader-v2 size={SIZE_VAR.LG} /> : <slot />}\n    </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-tabs/xv-tabs.css

@@ -0,0 +1,139 @@
+:host(.xv-tabs) {
+  display: flex;
+  flex-direction: column;
+}
+:host(.xv-tabs) .tab-headers {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+}
+:host(.xv-tabs) .tab-headers_container {
+  display: flex;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+}
+:host(.xv-tabs) .tab-headers_container::-webkit-scrollbar {
+  display: none;
+}
+:host(.xv-tabs) .tab-headers_tab {
+  background: none;
+  padding: 11px var(--gap-md, 16px);
+  cursor: pointer;
+  font: inherit;
+  transition: border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;
+  position: relative;
+  border: 2px solid transparent;
+  border-bottom-color: var(--border-border-subtle-01, #D1D1D1);
+  background-blend-mode: multiply;
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  height: 40px;
+  white-space: nowrap;
+}
+:host(.xv-tabs) .tab-headers_tab:after {
+  content: "";
+  position: absolute;
+  transition: background-color 0.3s ease, width 0.3s ease;
+  top: 100%;
+  left: 0;
+  right: 0;
+  width: 0;
+  height: 2px;
+  background-color: var(--interactive-01, #273435);
+}
+:host(.xv-tabs) .tab-headers_tab:focus {
+  outline: none;
+  border: 2px solid var(--border-border-subtle-01, #D1D1D1);
+}
+:host(.xv-tabs) .tab-headers_tab:hover {
+  border-bottom-color: var(--border-strong-01, #8B8B8B);
+}
+:host(.xv-tabs) .tab-headers_tab.active {
+  color: var(--text-primary, #333);
+  font-weight: 700;
+}
+:host(.xv-tabs) .tab-headers_tab.active:after {
+  width: 100%;
+}
+:host(.xv-tabs) .tab-headers_tab.active:focus {
+  border-color: var(--interactive-01, #273435);
+}
+:host(.xv-tabs) .tab-headers_tab:disabled {
+  color: var(--text-on-color-disabled, #8B8B8B);
+  border-bottom-color: var(--border-disabled, #D1D1D1);
+  cursor: not-allowed;
+}
+:host(.xv-tabs) .tab-headers_tab:disabled:after {
+  background-color: var(--border-disabled, #D1D1D1);
+}
+:host(.xv-tabs) .tab-headers_btn {
+  outline: none;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: 0.25s ease-in-out opacity;
+}
+:host(.xv-tabs) .tab-headers_btn:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border: solid currentColor;
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 5px;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+:host(.xv-tabs) .tab-headers_btn:active {
+  opacity: 0.3;
+}
+:host(.xv-tabs) .tab-headers_btn.prev:before {
+  transform: translate(-50%, -50%) rotate(135deg);
+}
+:host(.xv-tabs) .tab-headers_btn.next:before {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+:host(.xv-tabs) .tab-content-wrapper {
+  position: relative;
+  overflow: hidden;
+  padding: var(--gap-md, 16px) 0;
+}
+:host(.xv-tabs) ::slotted(xv-tab-v2) {
+  position: absolute;
+  opacity: 0;
+  max-height: 0;
+  transition: max-height 0.5s ease;
+  width: 100%;
+  pointer-events: none;
+}
+:host(.xv-tabs) ::slotted(xv-tab-v2.active) {
+  position: relative;
+  opacity: 1;
+  overflow-y: auto;
+  pointer-events: auto;
+  max-height: 1000px;
+}
+:host(.xv-tabs) .xv-tabs_empty {
+  display: block;
+  text-align: center;
+  margin: 20px auto;
+  font-size: var(--fz-xl);
+  color: var(--text-primary);
+}
+
+:host([loading]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}

package/dist/collection/components/xv-tabs/xv-tabs.js

@@ -0,0 +1,221 @@
+import { Host, h } from "@stencil/core";
+import { TAB_TAGS, TABS_VATIANT } from "./_vars";
+import { SIZE_VAR } from "../../types/enum";
+export class XvTabs {
+    constructor() {
+        /**
+         * Index of active tab
+         */
+        this.active = 0;
+        /**
+         * Variant of tabs from TABS_VATIANT enum
+         */
+        this.variant = TABS_VATIANT.DEFAULT;
+        /**
+         * local variable for tab labels collection
+         */
+        this.tabElements = [];
+        /**
+         * Is show arrows for scroll
+         */
+        this.showArrows = false;
+        this.collectTabs = () => {
+            if (!this.tabElements.length) {
+                this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
+                this.tabElements.forEach((tab) => {
+                    if (tab.hasAttribute('name') && !this.active) {
+                        this.active = tab.getAttribute('name');
+                    }
+                });
+                setTimeout(() => this.updateArrowVisibility(), 100);
+            }
+        };
+    }
+    updateArrowVisibility() {
+        var _a;
+        const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-headers_container');
+        if (!container)
+            return;
+        this.showArrows = container.scrollWidth > container.clientWidth;
+    }
+    updateTabClasses() {
+        this.tabElements.forEach((tab, i) => {
+            tab.classList.toggle('active', (tab.getAttribute('name') || `${i}`) === `${this.active}`);
+        });
+    }
+    handleTabClick(active) {
+        if (active === this.active)
+            return;
+        this.active = active;
+        this.activeChange.emit(Number(this.active) || this.active);
+        this.scrollToActiveTab();
+    }
+    scrollToActiveTab() {
+        if (!this.showArrows)
+            return;
+        // wait next JS tik
+        setTimeout(() => {
+            this.el.shadowRoot
+                .querySelector('.tab-headers_tab.active')
+                .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+        });
+    }
+    setTab(count = 1) {
+        const currentIdx = this.tabElements.findIndex((tab, i) => (tab.getAttribute('name') || `${i}`) === `${this.active}`);
+        const nextIdx = currentIdx + count;
+        if (nextIdx < 0 || nextIdx >= this.tabElements.length)
+            return;
+        const nextTab = this.tabElements[nextIdx];
+        if (!nextTab || nextTab.hasAttribute('disabled'))
+            return;
+        this.handleTabClick(nextTab.getAttribute('name') || nextIdx);
+    }
+    render() {
+        var _a, _b, _c;
+        if (this.loading) {
+            return (h(Host, { class: "xv-tabs", variant: this.variant }, h("xv-loader-v2", { size: SIZE_VAR.XL })));
+        }
+        return (h(Host, { class: "xv-tabs", variant: this.variant }, h("div", { class: "tab-headers", role: "tablist" }, h("button", { hidden: !this.showArrows || !((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), h("div", { class: "tab-headers_container" }, ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length) ? this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
+                'tab-headers_tab': true,
+                active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
+            }, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && h("p", { class: "xv-tabs_empty" }, this.emptyMessage)), h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { onSlotchange: this.collectTabs }))));
+    }
+    componentDidRender() {
+        this.updateTabClasses();
+    }
+    static get is() { return "xv-tabs-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "any",
+                "attribute": "active",
+                "mutable": true,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of active tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loader"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "TABS_VATIANT",
+                    "resolved": "TABS_VATIANT",
+                    "references": {
+                        "TABS_VATIANT": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-tabs/_vars.ts::TABS_VATIANT"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant of tabs from TABS_VATIANT enum"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "TABS_VATIANT.DEFAULT"
+            },
+            "emptyMessage": {
+                "type": "string",
+                "attribute": "empty-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message when have no tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tabElements": {},
+            "showArrows": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "activeChange",
+                "name": "activeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit event to outside"
+                },
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "updateArrowVisibility",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=xv-tabs.js.map

package/dist/collection/components/xv-tabs/xv-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-tabs-v2',\n  styleUrl: 'xv-tabs.scss',\n  shadow: true,\n})\nexport class XvTabs {\n  @Element() el: HTMLElement;\n  /**\n   * Index of active tab\n   */\n  @Prop({ reflect: true, mutable: true }) active: number | string = 0;\n  /**\n   * Emit event to outside\n   */\n  @Event() activeChange: EventEmitter<number | string>;\n  /**\n   * Show loader\n   */\n  @Prop({ reflect: true }) loading?: boolean;\n  /**\n   * Variant of tabs from TABS_VATIANT enum\n   */\n  @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\n  /**\n   * Message when have no tabs\n   */\n  @Prop() emptyMessage?: string;\n  /**\n   * local variable for tab labels collection\n   */\n  @State() tabElements: HTMLElement[] = [];\n  /**\n   * Is show arrows for scroll\n   */\n  @State() showArrows: boolean = false;\n\n  @Listen('resize', { target: 'window' })\n  updateArrowVisibility() {\n    const container = this.el.shadowRoot?.querySelector('.tab-headers_container') as HTMLElement | null;\n    if (!container) return;\n\n    this.showArrows = container.scrollWidth > container.clientWidth;\n  }\n\n  private collectTabs = () => {\n    if (!this.tabElements.length) {\n      this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\n      this.tabElements.forEach((tab) => {\n        if (tab.hasAttribute('name') && !this.active) {\n          this.active = tab.getAttribute('name');\n        }\n      })\n\n      setTimeout(() => this.updateArrowVisibility(), 100);\n    }\n  }\n\n  private updateTabClasses() {\n    this.tabElements.forEach((tab, i) => {\n      tab.classList.toggle(\n        'active',\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\n      );\n    });\n  }\n\n  private handleTabClick(active: string | number) {\n    if (active === this.active) return;\n\n    this.active = active;\n    this.activeChange.emit(Number(this.active) || this.active);\n    this.scrollToActiveTab();\n  }\n\n  private scrollToActiveTab() {\n    if (!this.showArrows) return;\n\n    // wait next JS tik\n    setTimeout(() => {\n      this.el.shadowRoot\n        .querySelector('.tab-headers_tab.active')\n        .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n    });\n  }\n\n  private setTab(count: number = 1) {\n    const currentIdx = this.tabElements.findIndex(\n      (tab, i) =>\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\n      );\n    const nextIdx = currentIdx + count;\n\n    if (nextIdx < 0 || nextIdx >= this.tabElements.length) return;\n\n    const nextTab = this.tabElements[nextIdx];\n\n    if (!nextTab || nextTab.hasAttribute('disabled')) return;\n\n    this.handleTabClick(nextTab.getAttribute('name') || nextIdx);\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"xv-tabs\" variant={this.variant}>\n          <xv-loader-v2 size={SIZE_VAR.XL} />\n        </Host>\n      )\n    }\n\n    return (\n      <Host class=\"xv-tabs\" variant={this.variant}>\n        <div class=\"tab-headers\" role=\"tablist\">\n          <button\n            hidden={!this.showArrows || !this.tabElements?.length}\n            aria-label=\"Previous\"\n            class=\"tab-headers_btn prev\"\n            onClick={() => this.setTab(-1)}\n          />\n          <div class=\"tab-headers_container\">\n            {this.tabElements?.length ? this.tabElements.map((tab, index) => (\n              <button\n                role=\"tab\"\n                disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\n                class={{\n                  'tab-headers_tab': true,\n                  active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\n                }}\n                onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\n              >\n                {tab.getAttribute('label') || `Tab ${index + 1}`}\n              </button>\n            )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\n          </div>\n          <button\n            aria-label=\"Next\"\n            hidden={!this.showArrows || !this.tabElements?.length}\n            class=\"tab-headers_btn next\"\n            onClick={() => this.setTab(1)}\n          />\n        </div>\n\n        <div\n          class=\"tab-content-wrapper\"\n          role=\"tabpanel\"\n          tabindex={-1}\n        >\n          <slot onSlotchange={this.collectTabs} />\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidRender() {\n    this.updateTabClasses();\n  }\n}\n"]}

package/dist/collection/components/xv-tag/xv-tag.css

@@ -0,0 +1,97 @@
+@charset "UTF-8";
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 1000px;
+  background-color: var(--background);
+  color: var(--text-primary);
+  font-family: var(--ff-body, inherit);
+}
+:host .xv-tag_content {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: inherit;
+  font-family: var(--ff-body);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host .xv-tag_close {
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  background-color: inherit;
+  outline: none;
+  border-spacing: 0;
+  list-style: none outside none;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 62px;
+  width: 15px;
+  height: 15px;
+  text-align: left;
+  color: inherit;
+  text-indent: 0;
+  transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;
+}
+:host .xv-tag_close:hover {
+  cursor: pointer;
+  filter: brightness(80%);
+}
+:host .xv-tag_close:active {
+  opacity: 0.7;
+}
+:host .xv-tag_close:focus {
+  outline: 1px solid currentColor;
+}
+:host .xv-tag_close:after {
+  overflow: hidden;
+  width: inherit;
+  height: inherit;
+  color: inherit;
+  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  content: "×";
+}
+
+:host(.sm) {
+  font-size: var(--fz-sm);
+}
+
+:host(.md) {
+  font-size: var(--fz-md);
+}
+:host(.md) .xv-tag_content {
+  line-height: 24px;
+}
+:host(.md) .xv-tag_close {
+  height: 24px;
+  width: 24px;
+}
+
+:host(.lg) {
+  font-size: var(--fz-lg);
+}
+:host(.lg) .xv-tag_content {
+  line-height: 26px;
+}
+:host(.lg) .xv-tag_close {
+  height: 26px;
+  width: 26px;
+}
+
+:host(.disabled) {
+  pointer-events: none;
+  background-color: var(--layer-01);
+  color: var(--text-disabled);
+}