xv-webcomponents 0.1.17 → 0.1.18

package/dist/esm/xv-accordion-v2_14.entry.js

@@ -0,0 +1,585 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-83ab73b7.js';
+import { u as uidGenerator } from './utils-9bb6333b.js';
+
+const xvAccordionCss = ":host{display:block}";
+const XvAccordionV2Style0 = xvAccordionCss;
+
+const XvAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.accordionChange = createEvent(this, "accordionChange", 7);
+        this.multiple = false;
+        this.xvId = uidGenerator();
+        this.opened = new Set();
+    }
+    async toggleItem(value) {
+        if (this.opened.has(value)) {
+            this.opened.delete(value);
+        }
+        else {
+            if (!this.multiple)
+                this.opened.clear();
+            this.value = value;
+            this.opened.add(this.value);
+        }
+        this.accordionChange.emit({ opened: this.opened, id: this.xvId });
+        return { opened: this.opened, id: this.xvId };
+    }
+    componentWillLoad() {
+        if (this.value) {
+            return this.toggleItem(this.value);
+        }
+    }
+    render() {
+        return (h(Host, { key: '66ebac5125b765878f7e21225f60f254bde5e07f', class: "xv-accordion", "data-id": this.xvId }, h("slot", { key: 'b5081e54395f14436a7f066fee6e75a48c9b797f' })));
+    }
+};
+XvAccordion.style = XvAccordionV2Style0;
+
+const xvAccordionItemCss = ":host{border-top:1px solid var(--border-subtle-01);display:flex;flex-direction:column;font-family:var(--ff-body, inherit)}:host(.disabled) .label{color:var(--text-disabled)}:host(.disabled) .label:hover{cursor:initial;background-color:transparent}.label{padding:14px 16px;display:inline-flex;align-items:center;column-gap:20px;justify-content:space-between;text-align:left;color:var(--text-primary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:0.16px;background-color:transparent;transition:background-color 200ms ease-in-out}.label>span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.label:hover{cursor:pointer;background-color:var(--layer-hover-01)}.label:after{content:\"\";border:solid black;border-width:0 2px 2px 0;display:inline-block;padding:4.66px;transition:transform 100ms ease-in-out;transform:rotate(45deg)}.label.opened:after{transform:rotate(-135deg)}.content{padding:0 16px;text-align:left;color:var(--text-primary);font-size:14px;overflow:hidden;max-height:0;transition:max-height 300ms ease-in-out, padding 250ms ease 50ms}.content.opened{padding:14px 16px;max-height:500px}";
+const XvAccordionV2ItemStyle0 = xvAccordionItemCss;
+
+const XvAccordionItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemToggle = createEvent(this, "itemToggle", 7);
+        this.disabled = false;
+        this.isOpen = false;
+    }
+    handleAccordionChange(event) {
+        var _a;
+        const parentAccordionId = (_a = this.el.closest('[data-id]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
+        if (event.detail.id !== parentAccordionId)
+            return;
+        this.isOpen = event.detail.opened.has(this.value);
+    }
+    toggle() {
+        var _a, _b;
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        (_b = (_a = this.el.closest('xv-accordion-v2')) === null || _a === void 0 ? void 0 : _a.toggleItem) === null || _b === void 0 ? void 0 : _b.call(_a, this.value);
+    }
+    render() {
+        return (h(Host, { key: '7d536c27a29b4f1e5a54ffb38c485102a4b22301', class: `${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'bd35f139baa3fa9449e4391acb26ceffbeee61c4', class: `label ${this.isOpen ? 'opened' : 'closed'}`, onClick: this.toggle.bind(this) }, h("span", { key: '4b2a948ec962246557b480308e1a7df9712806a1' }, this.label)), h("div", { key: 'b88b7c9c9c724b6d6468c59df391c7ec41c99e97', class: `content ${this.isOpen ? 'opened' : 'closed'}` }, h("slot", { key: '61cb22aabcf159a31bab0a6cca01dc5478a580f1' }))));
+    }
+    get el() { return getElement(this); }
+};
+XvAccordionItem.style = XvAccordionV2ItemStyle0;
+
+const xvButtonV2Css = "@charset \"UTF-8\";:host{--focus-border-width:2px;--focus-border-style:solid;--button-ghost:tarnsparent;--text-disabled-opacity:0.25;--button-border-radius:3px;--button-border-width:1px;--button-border-style:solid;--button-border-color-accent:#97BF0D;--button-border-color-primary:#273435;--button-border-color-secondary:#D1D1D1;--button-border-color-ghost:tarnsparent;--button-ghost-hover:tarnsparent;--button-ghost-active:rgba(139, 139, 139, 0.5);--button-accent-disabled:#D1D1D1;--button-primary-disabled:#D1D1D1;--button-secondary-disabled:#D1D1D1;--button-tertiary-disabled:tarnsparent;--button-ghost-disabled:tarnsparent}:host button{font-family:inherit;font-size:16px;font-weight:700;padding:0 20px;min-height:40px;line-height:40px;cursor:pointer;box-sizing:border-box;transition:background-color 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out, border-width 0.2s ease-in-out, box-shadow 0.2s ease-in-out}:host button.xv-button-block{width:100%}.xv-button{}.xv-button.accent{background-color:var(--button-accent);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);border-radius:var(--button-border-radius)}.xv-button.accent:hover{background-color:var(--button-accent-hover)}.xv-button.accent:active{background-color:var(--button-accent-active);color:var(--text-on-color)}.xv-button.accent:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.accent:disabled{background-color:var(--button-accent-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-accent-disabled)}.xv-button.primary{background-color:var(--button-primary);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);border-radius:var(--button-border-radius)}.xv-button.primary:hover{background-color:var(--button-primary-hover)}.xv-button.primary:active{background-color:var(--button-primary-active)}.xv-button.primary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.primary:disabled{background-color:var(--button-primary-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-primary-disabled)}.xv-button.secondary{background-color:var(--button-secondary);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);border-radius:var(--button-border-radius)}.xv-button.secondary:hover{background-color:var(--button-secondary-hover)}.xv-button.secondary:active{background-color:var(--button-secondary-active)}.xv-button.secondary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.secondary:disabled{background-color:var(--button-secondary-disabled);color:var(--text-on-color-disabled)}.xv-button.tertiary{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-tertiary);border-radius:var(--button-border-radius)}.xv-button.tertiary:hover{background-color:var(--button-tertiary-hover)}.xv-button.tertiary:active{background-color:var(--button-tertiary-active)}.xv-button.tertiary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.tertiary:disabled{background-color:var(--button-tertiary-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}.xv-button.ghost{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);border-radius:var(--button-border-radius)}.xv-button.ghost:hover{background-color:var(--button-ghost-hover)}.xv-button.ghost:active{background-color:var(--button-ghost-active)}.xv-button.ghost:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out}.xv-button.ghost:disabled{background-color:var(--button-ghost-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}";
+const XvButtonV2Style0 = xvButtonV2Css;
+
+const XvButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.buttonClick = createEvent(this, "buttonClick", 7);
+        /** Button label */
+        this.label = '';
+        /** Container width Button */
+        this.block = false;
+        /** Variant */
+        this.variant = 'primary';
+        /** Disabled state */
+        this.disabled = false;
+        /** Handle click only if not disabled */
+        this.handleClick = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.buttonClick.emit();
+        };
+    }
+    render() {
+        return (h("button", { key: '4b6d2d71bd297a7b1e2a00ba36c8e4380395e696', class: `xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '2934a04fa4aae539014f0a283444903dc9807888', name: "icon-left" }), h("slot", { key: '7139fa048b1f6e10f45853f7d1ff3b8cef1b9db6' }, this.label), h("slot", { key: 'ff326b3d02d3c4102f85132b890a595fcfec08d4', name: "icon-right" })));
+    }
+};
+XvButton.style = XvButtonV2Style0;
+
+const xvCardCss = ":host{display:flex;flex-direction:column;border-radius:8px;border:1px solid var(--border-subtle-00);background:var(--layer-layer-02);box-shadow:0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.3);font-family:var(--ff-body, inherit);overflow:visible !important}:host(.xv-card_vertical){width:100% !important}:host(.xv-card_horizontal){flex-direction:row;display:flex;width:max-content}:host(.xv-card_horizontal) .xv-card_media__content,:host(.xv-card_horizontal) .xv-card_media ::slotted([slot=media]){min-height:100%;max-height:100%;max-width:160px;min-width:160px}.xv-card_content{padding:16px;display:flex;flex-direction:column;flex:1;text-align:left}.xv-card_media__content,.xv-card_media ::slotted([slot=media]){max-width:100%;min-width:100%;min-height:199px;max-height:199px;object-fit:cover;object-position:center}.xv-card_header__content,.xv-card_header ::slotted([slot=header]){margin:0 0 8px;color:var(--text-primary);font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:-0.6px}.xv-card_body{flex:1}.xv-card_body__content,.xv-card_body ::slotted([slot=body]){margin:0 0 8px;color:var(--text-secondary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:-0.1px}";
+const XvCardV2Style0 = xvCardCss;
+
+const XvCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = 'vertical';
+    }
+    render() {
+        return (h(Host, { key: '347b7aed9ce24e2e048bb4e6d0b07b23f0f60d5b', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: '9cd9f38cfe7d93fc271907fc8435033df860c246', class: "xv-card_media" }, h("slot", { key: '35e2bae3084a0e7d26e13c0e3116daa9895ea6c1', name: "media" }, this.media && h("img", { key: '60d4305b136766e447653cb399f92ae70e3d9430', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '3751defc0abf18997dca82ae5b5d6601c6e9f60b', class: "xv-card_content" }, h("div", { key: 'cca74475b9e5dba03c82f77851fb503a5323ce3c', class: "xv-card_header" }, h("slot", { key: '02c4e3ddfb73bd56ef8f5b44a22bfe710654171a', name: "header" }, this.header && h("p", { key: '56998aa4742cc7576a023fcbe3e0892f312805ee', class: "xv-card_header__content" }, this.header))), h("div", { key: '86da97df293ff58dbcfe0a2b7bc25c98053ac6a2', class: "xv-card_body" }, h("slot", { key: 'ff8d6dc3ef8e437d28f237c415bf43382df85f19', name: "body" }, this.body && h("p", { key: '7e8e351ac0fa2100fc7929e81cc380a4a32e7019', class: "xv-card_body__content" }, this.header))), h("div", { key: 'dc9824b523f2dbdb4f88dc05ac0e490f9b04f529', class: "xv-card_footer" }, h("slot", { key: 'ea4fbffc436ee2ef43f481be7656aad07dfc55ce', name: "footer" }, this.footer)))));
+    }
+};
+XvCard.style = XvCardV2Style0;
+
+const xvCheckboxCss = ":host{--checkbox-size:20px;box-sizing:border-box;display:inline-flex;flex-direction:column}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox.disabled{cursor:not-allowed;opacity:0.6}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:2px solid var(--border-subtle-03, #D1D1D1);border-radius:4px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1px solid var(--border-strong-01, #8B8B8B)}.xv-checkbox .label{margin-left:8px;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}";
+const XvCheckboxV2Style0 = xvCheckboxCss;
+
+const XvCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.changeEvent = createEvent(this, "eventChange", 7);
+        this.inputEvent = createEvent(this, "eventInput", 7);
+        this.focusEvent = createEvent(this, "eventFocus", 7);
+        this.blurEvent = createEvent(this, "eventBlur", 7);
+        var _a, _b;
+        /**
+         * Default checked status
+         */
+        this.checked = false;
+        /**
+         * Using for forms
+         */
+        this.indeterminate = false;
+        /**
+         * Disabled status
+         */
+        this.disabled = false;
+        /**
+         * Input value
+         */
+        this.value = 'on';
+        /**
+         * The same like default checkbox prop
+         */
+        this.required = false;
+        /**
+         * Change checkmark icon to minus
+         */
+        this.partial = false;
+        this.hasFocus = false;
+        this.onInput = (e) => {
+            const target = e.target;
+            this.checked = target.checked;
+            this.inputEvent.emit(this.checked);
+        };
+        this.onChange = (e) => {
+            const target = e.target;
+            this.checked = target.checked;
+            this.changeEvent.emit(this.checked);
+        };
+        this.onFocus = () => {
+            this.hasFocus = true;
+            this.focusEvent.emit();
+        };
+        this.onBlur = () => {
+            this.hasFocus = false;
+            this.blurEvent.emit();
+        };
+        this.internals = ((_b = (_a = this.el).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
+    }
+    connectedCallback() {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(this.checked ? this.value : null);
+        }
+    }
+    onCheckedChange(newValue) {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(newValue ? this.value : null);
+        }
+    }
+    render() {
+        return (h(Host, { key: '6dc76eae00dd96750977c77db16f31ccfbc15129' }, h("label", { key: '6f8f256877217e0e138673083721db9ffd4e21e3', class: { 'xv-checkbox': true, disabled: this.disabled } }, h("input", { key: 'ef6abcf5e0904f64dac882fef2d58f7275172443', ref: el => (this.inputEl = el), type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: '04bba1b7f7043f2d5a8ddef812f73a9d2248c1c8', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '5f550233505fd663d5876bbc4718c8be44bbeabe', class: "label" }, h("slot", { key: '861d10aafa6c719a3c712325a7425047fe81bc4a' }, this.label))), h("slot", { key: '4e3229b715ec7144816d5119a7f7dc2f6411a86b', name: "info" }), !!this.error && h("span", { key: 'c802d1d194b9490283aecadf766f7c066b9bfd90', class: "error" }, this.error)));
+    }
+    componentDidLoad() {
+        if (this.indeterminate) {
+            this.inputEl.indeterminate = true;
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    formResetCallback() {
+        this.checked = false;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChange"]
+    }; }
+};
+XvCheckbox.style = XvCheckboxV2Style0;
+
+const xvLinkCss = ":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%}";
+const XvLinkV2Style0 = xvLinkCss;
+
+const XvLink = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.disabled = false;
+        this.size = 'md';
+        this.variant = 'inline';
+    }
+    preventLinkHandler(e) {
+        if (!this.disabled)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    render() {
+        return (h(Host, { key: 'd67fa14d10c47ab7c0e3b006f51b1d376f290715', class: `xv-link_${this.variant}` }, h("a", { key: 'abb46cc5fd9f43fa52b0e24b7126fd0cb0d521ca', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: '55ef3b6ede0521719257218092b58b43dedb3e6e', name: "icon-left" }), h("slot", { key: 'bb62dd7d472415956493c97db3df8a61dbd0dbf6' }), h("slot", { key: '61f350ff076285dc83c630c4bb7dc5b19526b7c3', name: "icon-right" }))));
+    }
+};
+XvLink.style = XvLinkV2Style0;
+
+const xvProgressIndicatorCss = ":host{display:flex;align-items:flex-start;justify-content:space-between;font-family:var(--ff-body, inherit);overflow-x:auto}";
+const XvProgressIndicatorV2Style0 = xvProgressIndicatorCss;
+
+const XvProgressIndicator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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: '11ddf0d4e355c52e007b1b0705cb5129edf0acad', class: "xv-progress-indicator" }, h("slot", { key: 'c90e8f5d63fd15d8d70c8f0e4ff221dc723d5654' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "progress": ["updateChildItems"]
+    }; }
+};
+XvProgressIndicator.style = XvProgressIndicatorV2Style0;
+
+const xvProgressIndicatorItemCss = ":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(--icon-primary, 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)}";
+const XvProgressIndicatorV2ItemStyle0 = xvProgressIndicatorItemCss;
+
+const XvProgressIndicatorItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.done = false;
+    }
+    render() {
+        return (h(Host, { key: '601c2068aec197e02e89ca0ba1500abf1c293c7f', class: `xv-progress-indicator-item ${this.done ? 'done' : ''}` }, h("span", { key: 'e32b4d65713a001d4dffbc10335e1ea7e3f36e94', class: "line" }), h("span", { key: 'a0a87861fc4608287dff58a92ad2fd4b5447dc72', class: "icon" }, h("svg", { key: 'b14951a70651ae94e4b4e54f191b7733f45290e0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: 14, height: 14 }, h("path", { key: 'c251fc0b0a4bf4f341ed8bbd36f7e03454d1d80d', 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: 'cd0e21308a5884517fecc6d40a88b20463241228', class: "label" }, h("slot", { key: '3d5ca8fd5742a83f5aa2fc480b0efeb3ceb46bc0' }))));
+    }
+    get el() { return getElement(this); }
+};
+XvProgressIndicatorItem.style = XvProgressIndicatorV2ItemStyle0;
+
+var TABLE_COLOR_SCHEMA;
+(function (TABLE_COLOR_SCHEMA) {
+    TABLE_COLOR_SCHEMA["DEF"] = "";
+    TABLE_COLOR_SCHEMA["ZEBRA"] = "zebra";
+})(TABLE_COLOR_SCHEMA || (TABLE_COLOR_SCHEMA = {}));
+var TABLE_SIZE;
+(function (TABLE_SIZE) {
+    TABLE_SIZE["EXTRA_SMALL"] = "xs";
+    TABLE_SIZE["SMALL"] = "sm";
+    TABLE_SIZE["MEDIUM"] = "md";
+    TABLE_SIZE["LARGE"] = "lg";
+    TABLE_SIZE["EXTRA_LARGE"] = "xl";
+})(TABLE_SIZE || (TABLE_SIZE = {}));
+
+const xvTableCss = ":host ::slotted(xv-table-v2-header-row[cols=\"1\"]),:host ::slotted(xv-table-v2-row[cols=\"1\"]){--xv-table-cols:1}:host ::slotted(xv-table-v2-header-row[cols=\"2\"]),:host ::slotted(xv-table-v2-row[cols=\"2\"]){--xv-table-cols:2}:host ::slotted(xv-table-v2-header-row[cols=\"3\"]),:host ::slotted(xv-table-v2-row[cols=\"3\"]){--xv-table-cols:3}:host ::slotted(xv-table-v2-header-row[cols=\"4\"]),:host ::slotted(xv-table-v2-row[cols=\"4\"]){--xv-table-cols:4}:host ::slotted(xv-table-v2-header-row[cols=\"5\"]),:host ::slotted(xv-table-v2-row[cols=\"5\"]){--xv-table-cols:5}:host ::slotted(xv-table-v2-header-row[cols=\"6\"]),:host ::slotted(xv-table-v2-row[cols=\"6\"]){--xv-table-cols:6}:host ::slotted(xv-table-v2-header-row[cols=\"7\"]),:host ::slotted(xv-table-v2-row[cols=\"7\"]){--xv-table-cols:7}:host ::slotted(xv-table-v2-header-row[cols=\"8\"]),:host ::slotted(xv-table-v2-row[cols=\"8\"]){--xv-table-cols:8}:host ::slotted(xv-table-v2-header-row[cols=\"9\"]),:host ::slotted(xv-table-v2-row[cols=\"9\"]){--xv-table-cols:9}:host ::slotted(xv-table-v2-header-row[cols=\"10\"]),:host ::slotted(xv-table-v2-row[cols=\"10\"]){--xv-table-cols:10}:host ::slotted(xv-table-v2-header-row[cols=\"11\"]),:host ::slotted(xv-table-v2-row[cols=\"11\"]){--xv-table-cols:11}:host ::slotted(xv-table-v2-header-row[cols=\"12\"]),:host ::slotted(xv-table-v2-row[cols=\"12\"]){--xv-table-cols:12}:host ::slotted(xv-table-v2-header-row[cols=\"13\"]),:host ::slotted(xv-table-v2-row[cols=\"13\"]){--xv-table-cols:13}:host ::slotted(xv-table-v2-header-row[cols=\"14\"]),:host ::slotted(xv-table-v2-row[cols=\"14\"]){--xv-table-cols:14}:host ::slotted(xv-table-v2-header-row[cols=\"15\"]),:host ::slotted(xv-table-v2-row[cols=\"15\"]){--xv-table-cols:15}:host ::slotted(xv-table-v2-header-row[cols=\"16\"]),:host ::slotted(xv-table-v2-row[cols=\"16\"]){--xv-table-cols:16}:host ::slotted(xv-table-v2-header-row[cols=\"17\"]),:host ::slotted(xv-table-v2-row[cols=\"17\"]){--xv-table-cols:17}:host ::slotted(xv-table-v2-header-row[cols=\"18\"]),:host ::slotted(xv-table-v2-row[cols=\"18\"]){--xv-table-cols:18}:host ::slotted(xv-table-v2-header-row[cols=\"19\"]),:host ::slotted(xv-table-v2-row[cols=\"19\"]){--xv-table-cols:19}:host ::slotted(xv-table-v2-header-row[cols=\"20\"]),:host ::slotted(xv-table-v2-row[cols=\"20\"]){--xv-table-cols:20}:host([size=xs]) ::slotted(xv-table-v2-row),:host([size=xs]) ::slotted(xv-table-v2-header-row){padding:2px}:host([size=sm]) ::slotted(xv-table-v2-row),:host([size=sm]) ::slotted(xv-table-v2-header-row){padding:8px}:host([size=md]) ::slotted(xv-table-v2-row),:host([size=md]) ::slotted(xv-table-v2-header-row){padding:16px}:host([size=lg]) ::slotted(xv-table-v2-row),:host([size=lg]) ::slotted(xv-table-v2-header-row){padding:18px}:host([size=xl]) ::slotted(xv-table-v2-row),:host([size=xl]) ::slotted(xv-table-v2-header-row){padding:20px}:host([hoverable]) ::slotted(xv-table-v2-row:hover),:host([hoverable]) ::slotted([highlighted]){background-color:var(--layer-hover-01, #E3E3E3)}:host(xv-table-v2) ::slotted(xv-table-v2-row),:host(xv-table-v2) ::slotted(xv-table-v2-header-row){grid-template-columns:0 repeat(var(--xv-table-cols, 1), 1fr)}:host(xv-table-v2) ::slotted(xv-table-v2-row[collapsed]){padding-top:0;padding-bottom:0}:host(xv-table-v2) .caption{padding:16px 16px 18px}:host(xv-table-v2) .caption_title,:host(xv-table-v2) .caption_description{color:var(--text-primary, #333);margin:0}:host(xv-table-v2) .caption_title{font-family:var(--ff-heading, \"Gill Sans\");font-size:21px}:host(xv-table-v2) .caption_description{font-family:var(--ff-body, Tahoma);font-size:14px;line-height:128.571%;letter-spacing:0.16px}:host([expandable]) ::slotted(xv-table-v2-row),:host([expandable]) ::slotted(xv-table-v2-header-row){position:relative;grid-template-columns:48px repeat(var(--xv-table-cols, 1), 1fr)}:host([selectable]) ::slotted(xv-table-v2-row),:host([selectable]) ::slotted(xv-table-v2-header-row){position:relative;grid-template-columns:50px repeat(var(--xv-table-cols, 1), 1fr)}:host([expandable][selectable]) ::slotted(xv-table-v2-row),:host([expandable][selectable]) ::slotted(xv-table-v2-header-row){position:relative;grid-template-columns:98px repeat(var(--xv-table-cols, 1), 1fr)}";
+const XvTableV2Style0 = xvTableCss;
+
+const XvTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.changeSelection = createEvent(this, "changeSelection", 7);
+        /**
+         * Set current color schema type of enum TABLE_COLOR_SCHEMA
+         * Possible options 'zebra'
+         */
+        this.colorSchema = TABLE_COLOR_SCHEMA.DEF;
+        /**
+         * If table is expandable fields
+         */
+        this.expandable = false;
+        /**
+         * Table size
+         * enum TABLE_SIZE
+         */
+        this.size = TABLE_SIZE.MEDIUM;
+        /**
+         * Add checkbox selection to the table
+         */
+        this.selectable = false;
+        this.selectedRows = new Map();
+        this.handleCheckedChange = (e) => {
+            const { name, value, checked } = e.detail;
+            if (checked) {
+                this.selectedRows.set(name, { name, value });
+            }
+            else {
+                this.selectedRows.delete(name);
+            }
+            this.changeSelection.emit(Array.from(this.selectedRows.values()));
+        };
+    }
+    setRowPropsHandler() {
+        const rows = Array
+            .from(this.el.childNodes)
+            .filter((node) => node.nodeType === Node.ELEMENT_NODE &&
+            ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` || (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`));
+        let visualIndex = 0;
+        rows.forEach((node, i) => {
+            var _a;
+            const row = node;
+            const isHeaderRow = (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`;
+            if (this.selectable) {
+                let name = row.getAttribute('selection-name');
+                if (!name) {
+                    name = isHeaderRow ? 'header' : `xv-table-row-${i}`;
+                    row.setAttribute('selection-name', name);
+                }
+                if (row.hasAttribute('checked')) {
+                    this.selectedRows.set(name, {
+                        name,
+                        value: (_a = row.getAttribute('value')) !== null && _a !== void 0 ? _a : undefined,
+                    });
+                }
+            }
+            if (isHeaderRow)
+                return;
+            switch (this.colorSchema) {
+                case TABLE_COLOR_SCHEMA.ZEBRA:
+                    const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';
+                    if (row.hasAttribute('expandable') && rows[i + 1]) {
+                        row.setAttribute(stripe, '');
+                    }
+                    else {
+                        visualIndex++;
+                        row.setAttribute(stripe, '');
+                    }
+                    break;
+                default:
+                    row.removeAttribute('odd');
+                    row.removeAttribute('even');
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: '5d187689ae04f8cf161616defc092b2690831f98', size: this.size, selectable: this.selectable }, (this.el.title || this.description) && (h("div", { key: 'ee66085f185a99c2404d8e398ec356b2e2e5c347', class: "caption" }, this.el.title && h("h5", { key: '652bd665af5fac06bbaecd4aed542246c2a5d002', class: "caption_title" }, this.el.title), this.description && h("p", { key: '650461f500003c3ce70bbaaf24d4764a5c1904f1', class: "caption_description" }, this.description))), h("slot", { key: '7331a48d73167801ccc2d5f8682b62d3656712c3' })));
+    }
+    componentWillLoad() {
+        this.setRowPropsHandler();
+        this.el.addEventListener('checkedChange', this.handleCheckedChange);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('checkedChange', this.handleCheckedChange);
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "colorSchema": ["setRowPropsHandler"]
+    }; }
+};
+XvTable.style = XvTableV2Style0;
+
+const xvTableColCss = ":host{display:block;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;line-height:128.571%;letter-spacing:0.16px}";
+const XvTableV2ColStyle0 = xvTableColCss;
+
+const XvTableCol = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '7b5fadd70a38fcec9fe9885b0d67531d133a9a17' }, h("slot", { key: 'fff4084ecf1148921fc5ab590c8cff21c91f8d89' })));
+    }
+};
+XvTableCol.style = XvTableV2ColStyle0;
+
+const xvTableHeaderRowCss = ":host{display:grid;padding:16px 16px 32px;align-items:center;transition:height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;background:var(--layer-accent-01, #F7F7F7);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-weight:700;line-height:128.571%;letter-spacing:0.16px}:host .left-container{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}";
+const XvTableV2HeaderRowStyle0 = xvTableHeaderRowCss;
+
+const XvTableHeaderRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.checkedChange = createEvent(this, "checkedChange", 7);
+        /**
+         * Checkbox row checked
+         */
+        this.checked = false;
+        this.cols = 1;
+        this.slotChangeHandle = () => {
+            this.cols = this.el.childElementCount;
+        };
+        this.checkboxChange = (e) => {
+            this.checked = e.detail;
+            this.checkedChange.emit({
+                name: this.selectionName,
+                checked: e.detail
+            });
+        };
+    }
+    render() {
+        return (h(Host, { key: '461bc3ab19dc1e01edf70f94b29cf20092a85607', cols: this.cols }, h("div", { key: '960f48a7fb5e9c23922f7dfff28877d420f3385a', class: "left-container" }, this.selectionName !== undefined && (h("xv-checkbox-v2", { key: '68308b0c6c9f45e848bca985b0382479032fbcb5', partial: true, name: this.selectionName, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: '3a25f9011769f4fce43b6091de08995c5635381c', onSlotchange: this.slotChangeHandle })));
+    }
+    get el() { return getElement(this); }
+};
+XvTableHeaderRow.style = XvTableV2HeaderRowStyle0;
+
+const xvTableRowCss = ":host(xv-table-v2-row){display:grid;padding:16px;align-items:center;transition:height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;background:var(--layer-02, #FFF);box-shadow:0 0 0 1px #E3E3E3 inset}:host(xv-table-v2-row) .left-container{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}:host(xv-table-v2-row) .expand-btn{outline:none;background-color:transparent;display:block;margin:0 auto;border:solid black;border-width:0 2px 2px 0;padding:5px;transform:rotate(45deg);cursor:pointer;transition:opacity 300ms ease-in-out, transform 200ms ease-in-out}:host(xv-table-v2-row) .expand-btn:active{opacity:0.5}:host(xv-table-v2-row) .expand-btn.expanded{transform:rotate(225deg)}:host([expanded]){block-size:auto}:host([collapsed]){block-size:0;overflow:hidden;padding-top:0;padding-bottom:0}:host([odd]){background-color:var(--layer-selected-01, #E3E3E3)}:host([even]){background-color:#fff}";
+const XvTableV2RowStyle0 = xvTableRowCss;
+
+const XvTableRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.checkedChange = createEvent(this, "checkedChange", 7);
+        /**
+         * Is row will be expandable
+         * If it's true then the next row will be collapsed
+         */
+        this.expandable = false;
+        /**
+         * Default state of expandable
+         */
+        this.expanded = false;
+        this.prevRowExpanded = false;
+        this.cols = 1;
+        this.checkboxChange = (e) => {
+            this.checked = e.detail;
+            this.checkedChange.emit({
+                name: this.selectionName,
+                value: this.value,
+                checked: e.detail
+            });
+        };
+    }
+    /**
+     * Called from outside (From expandable row)
+     */
+    async setExpandRelation(id, expanded) {
+        this.expandId = id;
+        this.prevRowExpanded = !!expanded;
+        return this.prevRowExpanded;
+    }
+    /**
+     * Called from outside (From expandable row)
+     * to change then expand or collapse
+     */
+    async toggleExpand(id, expanded) {
+        if (this.expandId !== id)
+            return;
+        this.prevRowExpanded = expanded !== undefined ? expanded : !this.prevRowExpanded;
+    }
+    /**
+     * Watch for expandable
+     * When it's false needs to remove unnecessary properties
+     */
+    setExpandableRelationHandle() {
+        const nextEl = this.el.nextElementSibling;
+        if (!nextEl || nextEl.tagName !== this.el.tagName)
+            this.expandable = false;
+        if (!this.expandable)
+            return;
+        if (!this.id)
+            this.id = this.el.id || uidGenerator();
+        return nextEl.setExpandRelation(this.id, this.expanded);
+    }
+    /**
+     * When user press on the expand button
+     */
+    changeExpandHandle() {
+        const nextRow = this.el.nextElementSibling;
+        if (!nextRow || nextRow.tagName !== this.el.tagName)
+            return;
+        this.expanded = !this.expanded;
+        // Call method from new row
+        nextRow.toggleExpand(this.id, this.expanded);
+    }
+    /**
+     * Highlight the expanded row on hover
+     */
+    hoverHandle(active) {
+        const prevRow = this.el.previousElementSibling;
+        const nextRow = this.el.nextElementSibling;
+        if ((nextRow === null || nextRow === void 0 ? void 0 : nextRow.tagName) === this.el.tagName && this.expandable) {
+            if (active) {
+                nextRow.setAttribute('highlighted', '');
+            }
+            else {
+                nextRow.removeAttribute('highlighted');
+            }
+        }
+        if ((prevRow === null || prevRow === void 0 ? void 0 : prevRow.tagName) === this.el.tagName && prevRow.hasAttribute('expandable')) {
+            if (active) {
+                prevRow.setAttribute('highlighted', '');
+            }
+            else {
+                prevRow.removeAttribute('highlighted');
+            }
+        }
+    }
+    async componentWillLoad() {
+        this.id = this.el.id;
+        this.cols = this.el.childElementCount;
+        await this.setExpandableRelationHandle();
+    }
+    render() {
+        return (h(Host, { key: '88df976d496799070ad0011da60871d4984f775e', onMouseEnter: () => this.hoverHandle(true), onMouseLeave: () => this.hoverHandle(false), cols: this.cols, expanded: this.expandId && this.prevRowExpanded, collapsed: this.expandId && !this.prevRowExpanded }, h("div", { key: '2a28bfce934d640db4167ce418bec37bddd18494', class: "left-container" }, this.expandable && (h("button", { key: '0cf1d6a4472c05677e7d2edb8b2402bf7687fae8', class: `expand-btn ${this.expanded ? 'expanded' : ''}`, onClick: () => this.changeExpandHandle() })), this.selectionName && (h("xv-checkbox-v2", { key: 'ea01b82db0a990c0352c3310ceaca1cc55a7d2ca', name: this.selectionName, value: this.value, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: '33be6520fe3e2f7cd352f8ce58ad7286b644d45b' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "expandable": ["setExpandableRelationHandle"]
+    }; }
+};
+XvTableRow.style = XvTableV2RowStyle0;
+
+const xvTagCss = "@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)}";
+const XvTagV2Style0 = xvTagCss;
+
+const XvTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeClick = createEvent(this, "closeClick", 7);
+        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: '3164ae035733d790ba1fb02040dd8ba5430c960a', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '1c540ff9be6a45d89d8a2175bf2603640e43b478', class: "xv-tag_content" }, h("slot", { key: '2d893f03cc168828c932c4995ba2bbb6a649897b' })), this.closeable && (h("button", { key: '459f1f667f3b207fa6f5b24af82e2b5f6470db0d', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+    }
+};
+XvTag.style = XvTagV2Style0;
+
+const xvTooltipCss = ":host{position:relative;display:inline-block;cursor:pointer;line-height:0.5}:host::before,:host::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;z-index:10}:host::before{content:attr(tooltip);background:var(--background-inverse, #333);color:var(--icon-inverse, #fff);padding:var(--gap-sm, 5px) var(--gap-md, 16px);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-family:var(--fz-body, Tahoma);font-size:var(fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px}:host::after{content:\"\";border:6px solid transparent}:host(:hover)::before,:host(:hover)::after,:host(:focus)::before,:host(:focus)::after{opacity:1;visibility:visible}:host(.xv-tooltip_top)::before{bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_top)::after{bottom:100%;left:50%;border-top-color:var(--background-inverse, #333);transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_top-left)::before{bottom:100%;left:0;transform:translateY(-5px)}:host(.xv-tooltip_top-left)::after{bottom:100%;left:10px;border-top-color:black;transform:translateY(5px)}:host(.xv-tooltip_top-right)::before{bottom:100%;right:0;transform:translateY(-5px)}:host(.xv-tooltip_top-right)::after{bottom:100%;right:10px;border-top-color:var(--background-inverse, #333);transform:translateY(5px)}:host(.xv-tooltip_bottom)::before{top:100%;left:50%;transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_bottom)::after{top:100%;left:50%;border-bottom-color:black;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_bottom-left)::before{top:100%;left:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-left)::after{top:100%;left:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_bottom-right)::before{top:100%;right:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-right)::after{top:100%;right:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_left)::before{right:100%;top:50%;transform:translateY(-50%) translateX(-5px)}:host(.xv-tooltip_left)::after{right:100%;top:50%;border-left-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::before{left:100%;top:50%;transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::after{left:100%;top:50%;border-right-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(-5px)}";
+const XvTooltipV2Style0 = xvTooltipCss;
+
+const XvTooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Tooltip and arrow position related to element
+         * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.
+         * By default, "top"
+         */
+        this.position = 'top';
+    }
+    render() {
+        return (h(Host, { key: '476077c0607c160c2374a48f00c5ddabd199da03', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '9ebaf660c304374fd7eb1802a5e145a7856c7b70' }, h("svg", { key: '196a46d3bf15df204853bc092361538dafcbf9f8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '042422978eb1dca37c64df75b076fc25f4f0dd87', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
+    }
+};
+XvTooltip.style = XvTooltipV2Style0;
+
+export { XvAccordion as xv_accordion_v2, XvAccordionItem as xv_accordion_v2_item, XvButton as xv_button_v2, XvCard as xv_card_v2, XvCheckbox as xv_checkbox_v2, XvLink as xv_link_v2, XvProgressIndicator as xv_progress_indicator_v2, XvProgressIndicatorItem as xv_progress_indicator_v2_item, XvTable as xv_table_v2, XvTableCol as xv_table_v2_col, XvTableHeaderRow as xv_table_v2_header_row, XvTableRow as xv_table_v2_row, XvTag as xv_tag_v2, XvTooltip as xv_tooltip_v2 };
+
+//# sourceMappingURL=xv-accordion-v2_14.entry.js.map