xv-webcomponents 0.1.43 → 0.1.44

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.css

@@ -0,0 +1,45 @@
+:host {
+  flex: 1;
+  display: inline-block;
+  background-color: transparent;
+  transition: 200ms ease background-color;
+  user-select: none;
+  text-align: left;
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+}
+
+:host(:hover) {
+  cursor: pointer;
+  background-color: var(--layer-hover-01, #E9E9E9);
+}
+
+:host(:active) {
+  background-color: var(--layer-active-01, #D1D1D1);
+}
+
+:host(:focus) {
+  border: 2px solid var(--focus, #273435);
+}
+
+:host([variant=danger]) {
+  background-color: var(--text-error, #D62512);
+  color: var(--text-on-color, #FFF);
+}
+
+:host([variant=danger]:hover) {
+  background-color: var(--support-error, #F1290E);
+}
+
+:host([variant=danger]:active) {
+  background-color: var(--text-error, #D62512);
+}
+
+:host([disabled]) {
+  background-color: var(--layer-01, #F7F7F7) !important;
+  color: var(--text-disabled) !important;
+  cursor: not-allowed;
+}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js

@@ -0,0 +1,137 @@
+import { Host, h } from "@stencil/core";
+import { OverflowMenuVariant } from "../_vars";
+export class XvOverflowMenuItem {
+    constructor() {
+        this.disabled = false;
+        this.variant = OverflowMenuVariant.DEFAULT;
+    }
+    handleClick(event) {
+        if (this.disabled)
+            return;
+        this.itemClick.emit({ event, value: this.value });
+    }
+    render() {
+        return (h(Host, { key: '3dd2a5251f385c53432fbe4964cfa6b506bea62e', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: 'c140fd224ff48c962a85401003d6fc94091d7b05' })));
+    }
+    static get is() { return "xv-overflow-menu-v2-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-overflow-menu-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-overflow-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            },
+            "value": {
+                "type": "any",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "OverflowMenuEvent['value']",
+                    "resolved": "number | object | string",
+                    "references": {
+                        "OverflowMenuEvent": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "OverflowMenuVariant",
+                    "resolved": "OverflowMenuVariant.DANGER | OverflowMenuVariant.DEFAULT",
+                    "references": {
+                        "OverflowMenuVariant": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "OverflowMenuVariant.DEFAULT"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClick",
+                "name": "itemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OverflowMenuEvent",
+                    "resolved": "OverflowMenuEvent",
+                    "references": {
+                        "OverflowMenuEvent": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-overflow-menu-item.js.map

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-overflow-menu-item.js","sourceRoot":"","sources":["../../../../src/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAqB,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAOlE,MAAM,OAAO,kBAAkB;IAL/B;QAM2B,aAAQ,GAAY,KAAK,CAAC;QAE3C,YAAO,GAAwB,mBAAmB,CAAC,OAAO,CAAC;KAqBpE;IAjBC,WAAW,CAAC,KAAmB;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\nimport { OverflowMenuEvent, OverflowMenuVariant } from '../_vars';\n\n@Component({\n  tag: 'xv-overflow-menu-v2-item',\n  styleUrl: 'xv-overflow-menu-item.scss',\n  shadow: true,\n})\nexport class XvOverflowMenuItem {\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) value: OverflowMenuEvent['value'];\n  @Prop() variant: OverflowMenuVariant = OverflowMenuVariant.DEFAULT;\n  @Event() itemClick: EventEmitter<OverflowMenuEvent>;\n\n  @Listen('click')\n  handleClick(event: PointerEvent) {\n    if (this.disabled) return;\n\n    this.itemClick.emit({ event, value: this.value });\n  }\n\n  render() {\n    return (\n      <Host\n        class=\"xv-overflow-menu-item\"\n        role=\"menuitem\"\n        disabled={this.disabled}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.css

@@ -0,0 +1,105 @@
+:host {
+  --overflow-menu-size: 40px;
+  --overflow-menu-item-padding: 11px 16px;
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+}
+:host .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--overflow-menu-size);
+  height: var(--overflow-menu-size);
+  background-color: transparent;
+  border: 1px solid transparent;
+  transition: 300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;
+  font-size: calc(var(--overflow-menu-size) / 2);
+  color: var(--icon-primary);
+  border-radius: 5%;
+  margin: 0;
+  padding: 0;
+}
+:host .btn:hover {
+  cursor: pointer;
+  color: var(--link-primary-hover);
+  background-color: var(--background-hover);
+}
+:host .btn:active {
+  background-color: var(--background-active);
+  color: var(--icon-disabled);
+}
+:host .btn:disabled {
+  background-color: transparent;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+:host .list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  background-color: var(--layer-01);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  max-height: 0;
+  overflow: hidden;
+  border-radius: 3px;
+  transition: 200ms ease-in-out max-height, 100ms ease box-shadow;
+  min-width: 128px;
+  max-width: 50vw;
+  width: max-content;
+}
+:host .list.open {
+  overflow: visible;
+}
+:host .list ::slotted(xv-overflow-menu-v2-item) {
+  padding: var(--overflow-menu-item-padding);
+}
+:host .list.position-right {
+  left: initial;
+  right: 0;
+  border-top-right-radius: 0;
+}
+:host .list.position-left {
+  border-top-left-radius: 0;
+}
+
+:host([size=xs]) {
+  --overflow-menu-item-padding: 4px 16px;
+  --overflow-menu-size: 24px;
+}
+
+:host([size=sm]) {
+  --overflow-menu-size: 32px;
+  --overflow-menu-item-padding: 7px 16px;
+}
+
+:host([size=md]) {
+  --overflow-menu-size: 40px;
+  --overflow-menu-item-padding: 11px 16px;
+}
+
+:host([size=lg]) {
+  --overflow-menu-size: 48px;
+  --overflow-menu-item-padding: 16px;
+}
+
+:host([size=xl]) {
+  --overflow-menu-size: 56px;
+  --overflow-menu-item-padding: 16px;
+}
+
+:host([open]) .btn {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: var(--layer-01);
+  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1;
+}
+:host([open]) .list {
+  max-height: 500px;
+  z-index: 2;
+  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);
+}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js

@@ -0,0 +1,202 @@
+import { h, Host } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvOverflowMenu {
+    constructor() {
+        this.open = false;
+        this.disabled = false;
+        this.position = 'left';
+        this.size = SIZE_VAR.MD;
+        this.handleClose = () => {
+            if (this.open)
+                this.open = false;
+        };
+        this.removeListeners = () => {
+            this.el.removeEventListener('itemClick', this.handleSelectItem);
+            document.body.removeEventListener('click', this.handleClick);
+        };
+        this.handleClick = (ev) => {
+            if (!this.open || this.el.contains(ev.target))
+                return;
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.handleClose();
+        };
+        this.onOpenToggle = () => {
+            this.open = !this.open;
+        };
+        this.handleSelectItem = ({ detail }) => {
+            this.selectItem.emit(detail);
+            this.handleClose();
+        };
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.handleClose();
+        }
+    }
+    openChangeHandle() {
+        if (this.disabled)
+            return;
+        if (this.open) {
+            this.el.addEventListener('itemClick', this.handleSelectItem);
+            document.body.addEventListener('click', this.handleClick);
+        }
+        else {
+            this.removeListeners();
+        }
+    }
+    render() {
+        return (h(Host, { key: '49562a0f5cdd0ffc9d07c175f02133ebf91379f8', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: '512bfdab373dd6f91d747cd780588d743e995aba', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: 'ae162d6550bc87396f6f3307e15c3990b417768c', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '25c4542139eec20f7e04892baab53347901450ec', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), h("div", { key: '4595e1d6334852bc13d9a1ead5534f1947a6697a', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: '83c2cabf49ca7cb8e5c9e51526eae1d1b7202380' }))));
+    }
+    componentDidLoad() {
+        this.openChangeHandle();
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+    }
+    static get is() { return "xv-overflow-menu-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-overflow-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-overflow-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "position": {
+                "type": "string",
+                "attribute": "position",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectItem",
+                "name": "selectItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OverflowMenuEvent",
+                    "resolved": "OverflowMenuEvent",
+                    "references": {
+                        "OverflowMenuEvent": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChangeHandle"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-overflow-menu.js.map

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-overflow-menu.js","sourceRoot":"","sources":["../../../src/components/xv-overflow-menu/xv-overflow-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { OverflowMenuEvent } from './_vars';\n\n@Component({\n  tag: 'xv-overflow-menu-v2',\n  styleUrl: 'xv-overflow-menu.scss',\n  shadow: true,\n})\nexport class XvOverflowMenu {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop() position: 'left' | 'right' = 'left';\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Event() selectItem: EventEmitter<OverflowMenuEvent>;\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape'){\n      ev.stopPropagation();\n      ev.preventDefault();\n      this.handleClose();\n    }\n  }\n\n  @Watch('open')\n  openChangeHandle() {\n    if (this.disabled) return;\n\n    if (this.open) {\n      this.el.addEventListener('itemClick', this.handleSelectItem);\n      document.body.addEventListener('click', this.handleClick);\n    } else {\n      this.removeListeners();\n    }\n  }\n\n  private handleClose = () => {\n    if (this.open) this.open = false;\n  }\n\n  private removeListeners = () => {\n    this.el.removeEventListener('itemClick', this.handleSelectItem);\n    document.body.removeEventListener('click', this.handleClick);\n  }\n\n  private handleClick = (ev: MouseEvent) => {\n    if (!this.open || this.el.contains(ev.target as Node)) return;\n\n    ev.stopPropagation();\n    ev.preventDefault();\n    this.handleClose()\n  }\n\n  private onOpenToggle = () => {\n    this.open = !this.open;\n  };\n\n  private handleSelectItem = ({ detail }: CustomEvent<OverflowMenuEvent>) => {\n    this.selectItem.emit(detail);\n    this.handleClose();\n  }\n\n  render() {\n    return (\n      <Host\n        class=\"xv-overflow-menu\"\n        size={this.size}\n        role=\"menu\"\n        tabindex={-1}\n      >\n        <button class={{ btn: true, open: this.open }} onClick={this.onOpenToggle} disabled={this.disabled}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 128 512\">\n            <path\n              d=\"M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z\" />\n          </svg>\n        </button>\n        <div class={{list: true, open: this.open, [`position-${this.position}`]: true }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.openChangeHandle();\n  }\n\n  disconnectedCallback() {\n    this.removeListeners();\n  }\n}\n"]}

package/dist/{xv-webcomponents/_vars-IZ3lIQzL.js → collection/components/xv-progress-indicator/_vars.js}

@@ -1,16 +1,12 @@
-var PROGRESS_VARIANTS;
+export var PROGRESS_VARIANTS;
 (function (PROGRESS_VARIANTS) {
     PROGRESS_VARIANTS["DEFAULT"] = "";
     PROGRESS_VARIANTS["HORIZONTAL"] = "horizontal";
 })(PROGRESS_VARIANTS || (PROGRESS_VARIANTS = {}));
-var PROGRESS_ITEM_STATUS;
+export var PROGRESS_ITEM_STATUS;
 (function (PROGRESS_ITEM_STATUS) {
     PROGRESS_ITEM_STATUS["DONE"] = "done";
     PROGRESS_ITEM_STATUS["NO_STARTED"] = "not_started";
     PROGRESS_ITEM_STATUS["IN_PROGRESS"] = "in_progress";
 })(PROGRESS_ITEM_STATUS || (PROGRESS_ITEM_STATUS = {}));
-
-export { PROGRESS_VARIANTS as P, PROGRESS_ITEM_STATUS as a };
-//# sourceMappingURL=_vars-IZ3lIQzL.js.map
-
-//# sourceMappingURL=_vars-IZ3lIQzL.js.map
+//# sourceMappingURL=_vars.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-progress-indicator/_vars.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,iCAAY,CAAA;IACZ,8CAAyB,CAAA;AAC3B,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,oBAIX;AAJD,WAAY,oBAAoB;IAC9B,qCAAa,CAAA;IACb,kDAA0B,CAAA;IAC1B,mDAA2B,CAAA;AAC7B,CAAC,EAJW,oBAAoB,KAApB,oBAAoB,QAI/B","sourcesContent":["export enum PROGRESS_VARIANTS {\n  DEFAULT = '',\n  HORIZONTAL = 'horizontal'\n}\n\nexport enum PROGRESS_ITEM_STATUS {\n  DONE = 'done',\n  NO_STARTED = 'not_started',\n  IN_PROGRESS = 'in_progress',\n}\n"]}

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

@@ -0,0 +1,96 @@
+:host(.xv-progress-indicator-item) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 10px 16px;
+  row-gap: var(--gap-sm, 10px);
+}
+: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: var(--progress-indicator-icon-size, 22px);
+  height: var(--progress-indicator-icon-size, 22px);
+  min-width: var(--progress-indicator-icon-size, 22px);
+  min-height: var(--progress-indicator-icon-size, 22px);
+  max-width: var(--progress-indicator-icon-size, 22px);
+  max-height: var(--progress-indicator-icon-size, 22px);
+  border: 2px dashed var(--icon-primary, currentColor);
+  border-radius: 50%;
+}
+:host(.xv-progress-indicator-item) .icon svg {
+  width: calc(var(--progress-indicator-icon-size, 22px) * 0.637);
+  height: calc(var(--progress-indicator-icon-size, 22px) * 0.637);
+  opacity: 0;
+  transition: opacity 500ms ease-in-out;
+}
+:host(.xv-progress-indicator-item) .label {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--progress-indicator-font-size, 14px);
+  line-height: 1.1;
+  letter-spacing: 0.16px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+:host([status=done]) .icon,
+:host([status=in_progress]) .icon {
+  border-color: var(--background-brand, currentColor);
+  color: var(--background-brand, inherit);
+  border-style: solid;
+}
+:host([status=done]) .icon svg,
+:host([status=in_progress]) .icon svg {
+  opacity: 1;
+}
+:host([status=done]) .line,
+:host([status=in_progress]) .line {
+  width: 100%;
+  background-color: var(--background-brand, currentColor);
+}
+
+:host([status=in_progress]) .icon {
+  border-color: var(--background-brand, currentColor);
+  color: var(--background-brand, inherit);
+  border-style: solid;
+  position: relative;
+}
+:host([status=in_progress]) .icon:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 100%;
+  background-color: var(--background-brand, currentColor);
+  border-top-left-radius: 50% 100%;
+  border-bottom-left-radius: 50% 100%;
+}
+:host([status=in_progress]) .icon svg {
+  opacity: 0;
+}

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

@@ -0,0 +1,54 @@
+import { Host, h } from "@stencil/core";
+import { PROGRESS_ITEM_STATUS } from "../_vars";
+export class XvProgressIndicatorItem {
+    constructor() {
+        this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
+    }
+    render() {
+        return (h(Host, { key: 'b648f0b889dbd13effc1e2df2d0b8df4a4310d33', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '9f58d648cf7b954a3be77c2a09c1b0dea135831e', class: "line" }), h("span", { key: 'db4cedc2a3ae0894581658fc7e11059e89c6c805', class: "icon" }, h("svg", { key: '9418f257a253fe9c366fe148c5a24fa715a6f5ca', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'eb7497d0698fde8fbd8f6eedff617ea597802109', 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: 'e71ecb98094b46e8af831d3bc7efd5461819a1cd', class: "label" }, h("slot", { key: 'c2332223f5205aabf5501014e6a4521665c2d1f7' }))));
+    }
+    static get is() { return "xv-progress-indicator-v2-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 {
+            "status": {
+                "type": "string",
+                "attribute": "status",
+                "mutable": false,
+                "complexType": {
+                    "original": "PROGRESS_ITEM_STATUS",
+                    "resolved": "PROGRESS_ITEM_STATUS.DONE | PROGRESS_ITEM_STATUS.IN_PROGRESS | PROGRESS_ITEM_STATUS.NO_STARTED",
+                    "references": {
+                        "PROGRESS_ITEM_STATUS": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-progress-indicator/_vars.ts::PROGRESS_ITEM_STATUS"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "PROGRESS_ITEM_STATUS.NO_STARTED"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-progress-indicator-item.js.map