xv-webcomponents 0.1.42 → 0.1.43

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

@@ -1,10 +0,0 @@
-: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

@@ -1,106 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,139 +0,0 @@
-: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

@@ -1,221 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,97 +0,0 @@
-@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);
-}