xv-webcomponents 0.1.9 → 0.1.11

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

@@ -0,0 +1,60 @@
+:host {
+  font-family: var(--ff-body, inherit);
+}
+
+:host(.xv-link_inline) {
+  display: inline-block;
+}
+:host(.xv-link_inline) .xv-link {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+}
+
+:host(.xv-link_standalone) {
+  display: block;
+}
+:host(.xv-link_standalone) .xv-link {
+  text-decoration-line: none;
+}
+
+.xv-link {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--link-primary);
+  font-family: var(--ff-body);
+  font-style: normal;
+  font-weight: 400;
+  transition: color 200ms ease-in-out;
+}
+.xv-link:active {
+  color: var(--text-primary);
+}
+.xv-link:visited {
+  color: var(--link-visted);
+}
+.xv-link:hover {
+  color: var(--link-primary-hover);
+  cursor: pointer;
+}
+.xv-link:disabled, .xv-link_disabled, .xv-link::part(disabled) {
+  color: var(--text-disabled);
+  pointer-events: none;
+  cursor: initial;
+}
+.xv-link.sm {
+  font-size: var(--fz-sm);
+  line-height: 137.5%;
+}
+.xv-link.md {
+  font-size: var(--fz-md);
+  line-height: 128.571%;
+}
+.xv-link.lg {
+  font-size: var(--fz-lg);
+  line-height: 133.333%;
+}

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

@@ -0,0 +1,132 @@
+import { h, Host } from "@stencil/core";
+export class XvLink {
+    constructor() {
+        this.disabled = false;
+        this.size = 'md';
+        this.variant = 'inline';
+    }
+    preventLinkHandler(e) {
+        if (!this.disabled)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    render() {
+        return (h(Host, { key: 'f3434063788d5b6ffda532cb527661104df3ce38', class: `xv-link_${this.variant}` }, h("a", { key: '2482f18ac929497b2f27b3da16d12414b24e3046', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: '1ba29bc9189583d78808e9641588da27bdebc445', name: "icon-left" }), h("slot", { key: 'f4cfc7d01a286f74e1ed1536622a097367d47d49' }), h("slot", { key: 'a33ae557aaa112dc88c291273bce04d9425f937d', name: "icon-right" }))));
+    }
+    static get is() { return "xv-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_self' | '_blank' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'standalone' | 'inline'",
+                    "resolved": "\"inline\" | \"standalone\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'inline'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-link.js","sourceRoot":"","sources":["../../../src/components/xv-link/xv-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,MAAM;IALnB;QAQU,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAuB,IAAI,CAAC;QAChC,YAAO,GAA4B,QAAQ,CAAC;KA2BrD;IAzBC,kBAAkB,CAAC,CAAe;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,EAAE;YACpC,0DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACxE,MAAM,EAAE,IAAI,CAAC,MAAM;gBAEnB,6DAAM,IAAI,EAAC,WAAW,GAAQ;gBAE9B,8DAAa;gBAEb,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC7B,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-link',\r\n  styleUrl: 'xv-link.scss',\r\n  shadow: true,\r\n})\r\nexport class XvLink {\r\n  @Prop() href: string;\r\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top';\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n  @Prop() variant: 'standalone' | 'inline' = 'inline';\r\n\r\n  preventLinkHandler(e: PointerEvent) {\r\n    if (!this.disabled) return;\r\n\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={`xv-link_${this.variant}`}>\r\n        <a\r\n          href={this.href}\r\n          onClick={this.preventLinkHandler.bind(this)}\r\n          class={`xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`}\r\n          target={this.target}\r\n        >\r\n          <slot name=\"icon-left\"></slot>\r\n\r\n          <slot></slot>\r\n\r\n          <slot name=\"icon-right\"></slot>\r\n        </a>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.css

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  font-family: var(--ff-body, inherit);
+}

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js

@@ -0,0 +1,70 @@
+import { Host, h } from "@stencil/core";
+export class XvProgressIndicator {
+    constructor() {
+        this.progress = 0;
+    }
+    // Update 'xv-progress-indicator-item' done status
+    updateChildItems() {
+        const items = this.el.children;
+        const itemsCount = this.el.childElementCount;
+        const progressPerItem = 100 / itemsCount;
+        if (!items.length || !itemsCount)
+            return;
+        Array.from(items).forEach((item, index) => {
+            const itemProgress = (index + 1) * progressPerItem;
+            const done = this.progress >= itemProgress;
+            item.setAttribute('done', done ? 'true' : 'false');
+        });
+    }
+    // Load initial done status
+    componentDidLoad() {
+        this.updateChildItems();
+    }
+    render() {
+        return (h(Host, { key: 'ce7e68173d7ec806832282ada99ade50ecc54f92', class: "xv-progress-indicator" }, h("slot", { key: '5ebad467a8d1463d4e4e3fe014135cffe5e59c8b' })));
+    }
+    static get is() { return "xv-progress-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-progress-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-progress-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "progress",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "progress",
+                "methodName": "updateChildItems"
+            }];
+    }
+}
+//# sourceMappingURL=xv-progress-indicator.js.map

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-progress-indicator.js","sourceRoot":"","sources":["../../../src/components/xv-progress-indicator/xv-progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,mBAAmB;IALhC;QAOU,aAAQ,GAAW,CAAC,CAAC;KA8B9B;IA5BC,kDAAkD;IAElD,gBAAgB;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;QAC7C,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU,CAAC;QAEzC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,UAAU;YAAE,OAAO;QAEzC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACxC,MAAM,YAAY,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC;YACnD,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC;YAC1C,IAAoB,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACtE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2BAA2B;IAC3B,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,uBAAuB;YACjC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-progress-indicator',\r\n  styleUrl: 'xv-progress-indicator.scss',\r\n  shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n  @Element() el: HTMLElement;\r\n  @Prop() progress: number = 0;\r\n\r\n  // Update 'xv-progress-indicator-item' done status\r\n  @Watch('progress')\r\n  updateChildItems() {\r\n    const items = this.el.children;\r\n    const itemsCount = this.el.childElementCount;\r\n    const progressPerItem = 100 / itemsCount;\r\n\r\n    if (!items.length || !itemsCount) return;\r\n\r\n    Array.from(items).forEach((item, index) => {\r\n      const itemProgress = (index + 1) * progressPerItem;\r\n      const done = this.progress >= itemProgress;\r\n      (item as HTMLElement).setAttribute('done', done ? 'true' : 'false');\r\n    });\r\n  }\r\n\r\n  // Load initial done status\r\n  componentDidLoad() {\r\n    this.updateChildItems()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class=\"xv-progress-indicator\">\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/xv-progress-indicator-item/xv-progress-indicator-item.css

@@ -0,0 +1,66 @@
+:host(.xv-progress-indicator-item) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 10px 16px;
+}
+:host(.xv-progress-indicator-item):before {
+  width: 100%;
+}
+:host(.xv-progress-indicator-item):before, :host(.xv-progress-indicator-item) .line {
+  content: "";
+  z-index: 1;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  color: inherit;
+  background-color: var(--border-subtle-01, grey);
+}
+:host(.xv-progress-indicator-item) .line {
+  width: 0;
+  color: inherit;
+  transition: width 250ms ease;
+  background-color: var(--background-brand, currentColor);
+}
+:host(.xv-progress-indicator-item) .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  max-width: 22px;
+  max-height: 22px;
+  border: 2px dashed var(--border-subtle-01, currentColor);
+  border-radius: 50%;
+}
+:host(.xv-progress-indicator-item) .icon svg {
+  opacity: 0;
+  transition: opacity 500ms ease-in-out;
+}
+:host(.xv-progress-indicator-item) .label {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+}
+
+:host(.done) .icon {
+  border-color: var(--background-brand, currentColor);
+  color: var(--background-brand, inherit);
+  border-style: solid;
+}
+:host(.done) .icon svg {
+  opacity: 1;
+}
+:host(.done) .line {
+  width: 100% !important;
+  background-color: var(--background-brand, currentColor);
+}

package/dist/collection/components/xv-progress-indicator-item/xv-progress-indicator-item.js

@@ -0,0 +1,47 @@
+import { Host, h } from "@stencil/core";
+export class XvProgressIndicatorItem {
+    constructor() {
+        this.done = false;
+    }
+    render() {
+        return (h(Host, { key: 'c26fd7f411c7eb2111c74011ba1217289541919b', class: `xv-progress-indicator-item ${this.done ? 'done' : ''}` }, h("span", { key: 'dbc80d2176c9ce9ba8e685888f44c5081af9d92c', class: "line" }), h("span", { key: '57937d7d83193248ac110257b01e548e7da850da', class: "icon" }, h("svg", { key: '83691b60f9f5c1521e8ee2abeafe716c2713fefe', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: 14, height: 14 }, h("path", { key: '7e4f043bb9e81434f448efa6e95683870952760c', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '4b0daea5e910474dd1167c5ed70159169c317b63', class: "label" }, h("slot", { key: '2a2afe80a3070f53d6d6d9a71a6ea7c4869cd4cd' }))));
+    }
+    static get is() { return "xv-progress-indicator-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-progress-indicator-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-progress-indicator-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "done": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "done",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-progress-indicator-item.js.map

package/dist/collection/components/xv-progress-indicator-item/xv-progress-indicator-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-progress-indicator-item.js","sourceRoot":"","sources":["../../../src/components/xv-progress-indicator-item/xv-progress-indicator-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,uBAAuB;IALpC;QAO4B,SAAI,GAAY,KAAK,CAAC;KAuBjD;IArBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;YAClE,6DAAM,KAAK,EAAC,MAAM,GAAE;YACpB,6DAAM,KAAK,EAAC,MAAM;gBAChB,4DACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;oBAEN,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,sLAAsL,GACxL,CACF,CACD;YACP,0DAAG,KAAK,EAAC,OAAO;gBAAC,8DAAO,CAAI,CACvB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-progress-indicator-item',\r\n  styleUrl: 'xv-progress-indicator-item.scss',\r\n  shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: false }) done: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host class={`xv-progress-indicator-item ${this.done ? 'done' : ''}`}>\r\n        <span class=\"line\"/>\r\n        <span class=\"icon\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            viewBox=\"0 0 448 512\"\r\n            width={14}\r\n            height={14}\r\n          >\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n                />\r\n          </svg>\r\n        </span>\r\n        <p class=\"label\"><slot/></p>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\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);
+}

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

@@ -0,0 +1,158 @@
+import { Host, h } from "@stencil/core";
+export class XvTag {
+    constructor() {
+        this.size = 'md';
+        this.color = '';
+        this.bg = '';
+        this.disabled = false;
+        this.closeable = false;
+    }
+    closeHandler(e) {
+        if (this.disabled)
+            return;
+        this.closeClick.emit(e);
+    }
+    render() {
+        return (h(Host, { key: 'a80efe5ce83faee34abb8f23956e0a5dad597734', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: 'def67b2d9a6638de4941b071e529c41daf8150b0', class: "xv-tag_content" }, h("slot", { key: '0489ac38e1eea6a1ba186b78b2e17637650c4c2d' })), this.closeable && (h("button", { key: 'be5108f430f4f4d11d76a4b88a69ca2997a2c939', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+    }
+    static get is() { return "xv-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "bg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "bg",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "closeable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "closeable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeClick",
+                "name": "closeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PointerEvent",
+                    "resolved": "PointerEvent",
+                    "references": {
+                        "PointerEvent": {
+                            "location": "global",
+                            "id": "global::PointerEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xv-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tag.js","sourceRoot":"","sources":["../../../src/components/xv-tag/xv-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,KAAK;IALlB;QAMU,SAAI,GAAuB,IAAI,CAAC;QAChC,UAAK,GAAW,EAAE,CAAC;QACnB,OAAE,GAAW,EAAE,CAAC;QAChB,aAAQ,GAAY,KAAK,CAAC;QAC1B,cAAS,GAAY,KAAK,CAAC;KAwBpC;IArBC,YAAY,CAAC,CAAe;QAC1B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,EACjD,KAAK,EAAE,UAAU,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE;YAE/D,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,8DAAa,CACT;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,cAAc,GAAU,CAC9E,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-tag',\r\n  styleUrl: 'xv-tag.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTag {\r\n  @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n  @Prop() color: string = '';\r\n  @Prop() bg: string = '';\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() closeable: boolean = false;\r\n  @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n  closeHandler(e: PointerEvent) {\r\n    if (this.disabled) return;\r\n\r\n    this.closeClick.emit(e);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{ color: this.color, background: this.bg }}\r\n        class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n      >\r\n        <div class=\"xv-tag_content\">\r\n          <slot></slot>\r\n        </div>\r\n        {this.closeable && (\r\n          <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}