xv-webcomponents 1.25.1 → 2.0.0-beta.28

package/dist/collection/components/xv-table/xv-table.model.js

@@ -0,0 +1,10 @@
+export const XV_TABLE_TAG = 'xv-table';
+export const XV_TABLE_ROW_TAG = 'xv-table-row';
+export const XV_TABLE_CELL_TAG = 'xv-table-cell';
+export const XV_TABLE_LAYOUT_VERSION = 1;
+/** The floor a resize drag may not cross, when the column names no minWidth. */
+export const XV_TABLE_MIN_COLUMN_WIDTH = 64;
+/** Per visible column, the width below which the table scrolls instead of squeezing. */
+export const XV_TABLE_SCROLL_COLUMN_WIDTH = 120;
+export const XV_TABLE_CONTROL_WIDTH = 48;
+export const XV_TABLE_DEFAULT_PAGE_SIZES = [10, 20, 30, 40, 50, 100];

package/dist/collection/components/xv-table/xv-table.utils.js

@@ -0,0 +1,243 @@
+import { XV_SORT_DIR } from "../../types/enum";
+import { XV_TABLE_DEFAULT_PAGE_SIZES, XV_TABLE_LAYOUT_VERSION, XV_TABLE_MIN_COLUMN_WIDTH, XV_TABLE_SCROLL_COLUMN_WIDTH, } from "./xv-table.model";
+const ORDER_BY = /^(asc|desc)\((.+)\)$/;
+/** Array and object props accept their JSON string form so they stay settable from plain markup. */
+export const parseProp = (value, fallback) => {
+    if (typeof value !== 'string')
+        return value !== null && value !== void 0 ? value : fallback;
+    if (!value.trim())
+        return fallback;
+    try {
+        return JSON.parse(value);
+    }
+    catch (_a) {
+        return fallback;
+    }
+};
+export const parsePageSizes = (value) => {
+    const parsed = typeof value === 'string' && value.includes(',')
+        ? value.split(',').map(part => Number(part.trim()))
+        : parseProp(value, XV_TABLE_DEFAULT_PAGE_SIZES);
+    const sizes = (parsed || []).filter(size => Number.isFinite(size) && size > 0);
+    return sizes.length ? sizes : XV_TABLE_DEFAULT_PAGE_SIZES;
+};
+export const parseSortBy = (value) => {
+    if (!value)
+        return null;
+    if (typeof value !== 'string') {
+        return value.name ? { name: value.name, direction: value.direction || XV_SORT_DIR.ASC } : null;
+    }
+    const match = ORDER_BY.exec(value.trim());
+    if (!match)
+        return null;
+    return { name: match[2], direction: match[1] };
+};
+/** The `asc(field)` shape ListStateService already speaks, so an Angular binding needs no adapter. */
+export const formatSortBy = (sort) => sort ? `${sort.direction}(${sort.name})` : '';
+export const nextSortDirection = (current) => current === XV_SORT_DIR.ASC ? XV_SORT_DIR.DESC : XV_SORT_DIR.ASC;
+export const sortName = (column) => column.sortName || column.id;
+export const cellValue = (row, column) => {
+    if (typeof column.value === 'function')
+        return column.value(row);
+    const key = column.value || column.id;
+    return row === null || row === void 0 ? void 0 : row[key];
+};
+const isEmpty = (value) => value === null || value === undefined || value === '';
+// Only a date-shaped string is read as a date: an article number must not sort as a year.
+const DATE_LIKE = /^\d{4}-\d{2}-\d{2}([T ]|$)|^\d{1,2}[./-]\d{1,2}[./-]\d{2,4}$/;
+const toComparable = (value) => {
+    if (value instanceof Date)
+        return value.getTime();
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return value;
+    const text = String(value);
+    const asDate = DATE_LIKE.test(text.trim()) ? Date.parse(text) : NaN;
+    return Number.isNaN(asDate) ? text : asDate;
+};
+/** Empty values sort last in both directions — a blank cell is not "smallest", it is missing. */
+export const compareValues = (a, b, locale) => {
+    if (isEmpty(a) && isEmpty(b))
+        return 0;
+    if (isEmpty(a))
+        return 1;
+    if (isEmpty(b))
+        return -1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    const left = toComparable(a);
+    const right = toComparable(b);
+    if (typeof left === 'string' || typeof right === 'string') {
+        return String(left).localeCompare(String(right), locale, { numeric: true, sensitivity: 'base' });
+    }
+    return Number(left) - Number(right);
+};
+export const sortRows = (rows, column, direction, locale) => {
+    if (!column || direction === XV_SORT_DIR.NONE)
+        return rows;
+    const factor = direction === XV_SORT_DIR.DESC ? -1 : 1;
+    // Read each cell once rather than four times per comparison.
+    const decorated = rows.map(row => ({ row, key: cellValue(row, column) }));
+    decorated.sort((a, b) => {
+        const result = compareValues(a.key, b.key, locale);
+        // Empty always trails, so it must not be flipped by a descending sort.
+        if (isEmpty(a.key) !== isEmpty(b.key))
+            return result;
+        return result * factor;
+    });
+    return decorated.map(item => item.row);
+};
+export const totalPages = (total, pageSize) => Math.ceil((total || 0) / (pageSize || 10)) || 1;
+export const clampPage = (page, pages) => Math.min(Math.max(page || 1, 1), Math.max(pages, 1));
+export const pageSlice = (rows, page, pageSize) => {
+    const size = pageSize || 10;
+    const start = (clampPage(page, totalPages(rows.length, size)) - 1) * size;
+    return rows.slice(start, start + size);
+};
+export const visibleColumns = (columns) => columns.filter(column => !column.hidden);
+export const hideableColumns = (columns) => columns.filter(column => column.hideable);
+/** A column may narrow a table-level switch, never widen it. */
+export const columnAllows = (column, table, key) => { var _a; return table && ((_a = column[key]) !== null && _a !== void 0 ? _a : true); };
+export const clampWidth = (width, column) => {
+    const min = column.minWidth || XV_TABLE_MIN_COLUMN_WIDTH;
+    const max = column.maxWidth || Number.MAX_SAFE_INTEGER;
+    return Math.round(Math.min(Math.max(width, min), max));
+};
+/**
+ * What the rigid parts of the table actually need. A pixel column needs its width; a percentage
+ * column squeezes by definition and asks for nothing; a column that named no width gets the
+ * scroll-width guess. Guessing for all of them made a table of narrow columns scroll for nothing.
+ */
+export const tableMinWidth = (columns, minWidth, controls = 0) => {
+    if (minWidth)
+        return minWidth + controls;
+    const declared = visibleColumns(columns).reduce((total, column) => {
+        if (typeof column.width === 'number')
+            return total + column.width;
+        return column.width ? total : total + XV_TABLE_SCROLL_COLUMN_WIDTH;
+    }, 0);
+    return declared + controls;
+};
+/**
+ * The grid track list. Resize rewrites this one string on the host, which is a single DOM write
+ * per pointermove — a colgroup would need one per `<col>`. One track per control column: a grip
+ * and a checkbox are separate cells, so they need separate tracks.
+ */
+export const buildColumnTracks = (columns, leading = [], trailing = []) => {
+    const shown = visibleColumns(columns);
+    // `table-layout: fixed`, which is what these tables were written against: while some column left
+    // its width open, a declared width is exact and the open ones take what is left. Once every
+    // column has named a width, the widths also become proportions and the table scales up to fit —
+    // but never below what was declared, so a narrow column keeps the room its content needs.
+    const proportional = shown.length > 0 && shown.every(column => !!column.width);
+    return [
+        ...leading.map(width => `${width}px`),
+        // No space inside minmax(): the track list is indexed as an array during a resize drag.
+        ...shown.map(column => {
+            if (!column.width)
+                return `minmax(${column.minWidth || XV_TABLE_MIN_COLUMN_WIDTH}px,1fr)`;
+            if (typeof column.width === 'number') {
+                return proportional
+                    ? `minmax(${column.width}px,${column.width}fr)`
+                    : `${column.width}px`;
+            }
+            // A percentage keeps its exact share of the table and squeezes with it, never forcing a scroll.
+            const percent = /^([0-9.]+)%$/.test(column.width);
+            return percent ? `minmax(0,${column.width})` : column.width;
+        }),
+        ...trailing.map(width => `${width}px`),
+    ];
+};
+export const buildColumnTemplate = (columns, leading = [], trailing = []) => buildColumnTracks(columns, leading, trailing).join(' ');
+export const moveItem = (items, from, to) => {
+    const next = [...items];
+    next.splice(to, 0, next.splice(from, 1)[0]);
+    return next;
+};
+/** Hidden columns keep their absolute slot while the visible ones move around them. */
+export const mergeVisibleOrder = (columns, ordered) => {
+    const queue = [...ordered];
+    return columns.map(column => (column.hidden ? column : queue.shift() || column));
+};
+/**
+ * Only the deviations from the declared columns are stored. An untouched column follows the code,
+ * so a later default still reaches everyone who once dragged a column edge.
+ */
+export const diffLayout = (columns, declared) => {
+    const defaults = new Map(declared.map(column => [column.id, column]));
+    const order = columns.map(column => column.id);
+    const widths = {};
+    const hidden = {};
+    columns.forEach(column => {
+        const base = defaults.get(column.id);
+        // Only a resize writes a width, and a resize always writes pixels: a declared `25%` is not a
+        // deviation, and storing it would freeze the layout the next time the code changes.
+        if (typeof column.width === 'number' && column.width !== (base === null || base === void 0 ? void 0 : base.width)) {
+            widths[column.id] = column.width;
+        }
+        if (!!column.hidden !== !!(base === null || base === void 0 ? void 0 : base.hidden))
+            hidden[column.id] = !!column.hidden;
+    });
+    return {
+        v: XV_TABLE_LAYOUT_VERSION,
+        order: order.join() === declared.map(column => column.id).join() ? [] : order,
+        widths,
+        hidden,
+    };
+};
+export const isLayoutChanged = (layout) => !!layout && (!!layout.order.length || !!Object.keys(layout.widths).length || !!Object.keys(layout.hidden).length);
+/** Merges onto clones, so a stored width never writes back into the page's declared preset. */
+export const applyLayout = (declared, layout) => {
+    const clones = declared.map(column => (Object.assign({}, column)));
+    if (!layout || layout.v !== XV_TABLE_LAYOUT_VERSION)
+        return clones;
+    const byId = new Map(clones.map(column => [column.id, column]));
+    const ordered = layout.order.map(id => byId.get(id)).filter(Boolean);
+    clones.forEach((column, index) => {
+        if (!ordered.includes(column))
+            ordered.splice(Math.min(index, ordered.length), 0, column);
+    });
+    ordered.forEach(column => {
+        const width = layout.widths[column.id];
+        if (width)
+            column.width = width;
+        const hidden = layout.hidden[column.id];
+        if (hidden !== undefined && column.hideable)
+            column.hidden = hidden;
+    });
+    return ordered;
+};
+export const formatCell = (value, column, locale) => {
+    if (isEmpty(value))
+        return '';
+    switch (column.format) {
+        case 'number':
+            return new Intl.NumberFormat(locale).format(Number(value));
+        case 'currency':
+            return new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency: column.formatArg || 'EUR',
+            }).format(Number(value));
+        case 'date': {
+            const date = value instanceof Date ? value : new Date(String(value));
+            return Number.isNaN(date.getTime()) ? String(value) : new Intl.DateTimeFormat(locale).format(date);
+        }
+        case 'period': {
+            const [start, end] = Array.isArray(value) ? value : [];
+            const part = (input, options) => {
+                if (isEmpty(input))
+                    return '';
+                const date = input instanceof Date ? input : new Date(String(input));
+                return Number.isNaN(date.getTime()) ? '' : new Intl.DateTimeFormat(locale, options).format(date);
+            };
+            // A missing end leaves no dangling separator, and the year is only spelled once.
+            return [
+                part(start, { day: '2-digit', month: '2-digit' }),
+                part(end, { day: '2-digit', month: '2-digit', year: '2-digit' }),
+            ].filter(Boolean).join(' - ');
+        }
+        case 'list':
+            return Array.isArray(value) ? value.join(column.formatArg || ', ') : String(value);
+        default:
+            return String(value);
+    }
+};

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

@@ -6,7 +6,7 @@ export class XvTab {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '8dcdf7d006b2e187067bf598828007175d15cae8', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
+        return (h(Host, { key: '7147f87058327e099ad257d3821447dac8e3affb', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
     }
     static get is() { return "xv-tab-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -151,7 +151,8 @@ export class XvTabs {
                         "TABS_VATIANT_STR": {
                             "location": "import",
                             "path": "./_vars",
-                            "id": "src/components/xv-tabs/_vars.ts::TABS_VATIANT_STR"
+                            "id": "src/components/xv-tabs/_vars.ts::TABS_VATIANT_STR",
+                            "referenceLocation": "TABS_VATIANT_STR"
                         }
                     }
                 },

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

@@ -13,7 +13,7 @@ export class XvTag {
         this.closeClick.emit(e);
     }
     render() {
-        return (h(Host, { key: '77385d3b4d4d91c3a10b874542a84d8cc0387053', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: 'aaf0387d916f0956ce14b55157da88c9e395a78b', class: "xv-tag_content", part: "details-content" }, h("slot", { key: '16103821bce77aa4bc9349171e993992063c7b28' })), this.closeable && (h("button", { key: '50b594b2751c2c331bb8eed3c92059318c018290', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+        return (h(Host, { key: '138d2cd5c76589ffd98054c7af17905921725aab', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: 'd3fe0db007cf464d64a63ed907c60dc0fd61c19c', class: "xv-tag_content", part: "details-content" }, h("slot", { key: 'caaebab8bce651040ac5c3291ffa2668b04cac56' })), this.closeable && (h("button", { key: 'ab6790f6b80906dcf28aee7fc739e375ae774df4', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
     static get is() { return "xv-tag-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -242,12 +242,12 @@ export class XvTagCombobox {
         const ariaOwns = suggestionsVisible ? `${this.uid}-listbox` : undefined;
         const activedesc = this.highlighted >= 0 ? this.optionId(this.highlighted) : undefined;
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: 'e60929011a37dadc02b6c97074b9ea3597efc69e', class: "xv-combobox", part: "root", size: this.size }, this.label && h("label", { key: '7b50d4e03f1f710d47a331f8a34955f1286c18e2', class: "label" }, this.label), h("div", { key: '496e2f93831c245ff07bfd091df93464a02700e6', class: {
+        return (h(Host, { key: '5351ddba9ec53411d14582d3e4c013000f560540', class: "xv-combobox", part: "root", size: this.size }, this.label && h("label", { key: '9072c85cbd926b16e08827dacccd4d7f0a86d411', class: "label" }, this.label), h("div", { key: 'd63f9438b385fc05b53f29be87d5e1cf77a02f88', class: {
                 'control': true,
                 'control--disabled': this.disabled,
                 'control--error': !!this.error,
                 'control--readonly': !!this.readonly,
-            }, onClick: () => this.blockClick() }, h("div", { key: 'd9d48a15bef226f8fd1b9560033bc2ffe0488ea4', class: "control-chips", role: "list" }, this.selected.map((s, i) => (h("xv-tag-v2", { role: "listitem", part: "chip", "data-value": s.value, size: this.COMPARE_TAG_SIZE[this.size], disabled: this.disabled, bg: (s === null || s === void 0 ? void 0 : s.bg) || 'var(--layer-accent-01, #F7F7F7)', color: (s === null || s === void 0 ? void 0 : s.color) || 'var(--text-primary, #333)', closeable: !this.readonly, onCloseClick: ({ detail }) => this.removeTag(i, detail) }, s.label))), h("input", { key: 'e691b87972ab0ed01b0241b30d34e381d4011d35', ref: (el) => (this.inputEl = el), class: "control-input", readonly: this.readonly, placeholder: this.selected.length ? '' : this.placeholder, value: this.inputValue, onInput: (e) => this.onInput(e), onKeyDown: (e) => this.onKeyDown(e), onFocus: () => { this.onOpen(); this.recomputeFiltered(); }, "aria-autocomplete": "list", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": ariaOwns, "aria-activedescendant": activedesc, disabled: this.disabled })), this.loading && (h("span", { key: '85e296aea064e3a4704d1e436049cd0f17870613', class: "control-loader", part: "loader", "aria-hidden": "true" }, h("xv-loader-v2", { key: '11b47534c6bd60066e996c8554013a04f8bc4a74', size: "sm", variant: "horizontal" })))), message && (h("p", { key: '9cb3dc1d6be3a0bf501a0c4b5138a286057be343', class: { message: true, [message.level]: true } }, message.text)), suggestionsVisible && (h("ul", { key: '48aa3682898fe62d0228f43c4fb11de0b9494710', id: `${this.uid}-listbox`, class: "suggestions", role: "listbox", part: "listbox" }, this.filtered.map((opt, idx) => (h("li", { id: this.optionId(idx), class: { 'suggestions-opt': true, 'suggestions-opt--highlight': idx === this.highlighted }, role: "option", "aria-selected": idx === this.highlighted, onMouseEnter: () => this.onOptionMouseEnter(idx), onMouseDown: (ev) => ev.preventDefault(), onClick: () => this.selectOption(opt) }, h("div", { class: "suggestions-opt-content" }, opt.bg ? h("span", { class: "suggestions-opt-content--color", style: { background: opt.bg } }) : null, h("span", { class: "suggestions-opt-content--label" }, this.highlightLabel(opt.label).map((seg, i) => typeof seg === 'string' ? h("span", { key: i }, seg) : h("strong", { key: i }, seg.match)))))))))));
+            }, onClick: () => this.blockClick() }, h("div", { key: 'e303fef8789d9f1df8a9febe667f8fa0d72f4aaa', class: "control-chips", role: "list" }, this.selected.map((s, i) => (h("xv-tag-v2", { role: "listitem", part: "chip", "data-value": s.value, size: this.COMPARE_TAG_SIZE[this.size], disabled: this.disabled, bg: (s === null || s === void 0 ? void 0 : s.bg) || 'var(--layer-accent-01, #F7F7F7)', color: (s === null || s === void 0 ? void 0 : s.color) || 'var(--text-primary, #333)', closeable: !this.readonly, onCloseClick: ({ detail }) => this.removeTag(i, detail) }, s.label))), h("input", { key: '08ec28c65696a36238aa4f2c7f9ba2a89c34e31c', ref: (el) => (this.inputEl = el), class: "control-input", readonly: this.readonly, placeholder: this.selected.length ? '' : this.placeholder, value: this.inputValue, onInput: (e) => this.onInput(e), onKeyDown: (e) => this.onKeyDown(e), onFocus: () => { this.onOpen(); this.recomputeFiltered(); }, "aria-autocomplete": "list", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": ariaOwns, "aria-activedescendant": activedesc, disabled: this.disabled })), this.loading && (h("span", { key: '434666b2391399635cfe9c18320e4e10c0b67abf', class: "control-loader", part: "loader", "aria-hidden": "true" }, h("xv-loader-v2", { key: '66ffdb3f446ee255495d05c9a456a868b208c52a', size: "sm", variant: "horizontal" })))), message && (h("p", { key: '47f10c7a1e7a0eb5f9cfef0a303a667278833673', class: { message: true, [message.level]: true } }, message.text)), suggestionsVisible && (h("ul", { key: 'cba3064999cd0fa1159bb1a5b0967633de6d2e6f', id: `${this.uid}-listbox`, class: "suggestions", role: "listbox", part: "listbox" }, this.filtered.map((opt, idx) => (h("li", { id: this.optionId(idx), class: { 'suggestions-opt': true, 'suggestions-opt--highlight': idx === this.highlighted }, role: "option", "aria-selected": idx === this.highlighted, onMouseEnter: () => this.onOptionMouseEnter(idx), onMouseDown: (ev) => ev.preventDefault(), onClick: () => this.selectOption(opt) }, h("div", { class: "suggestions-opt-content" }, opt.bg ? h("span", { class: "suggestions-opt-content--color", style: { background: opt.bg } }) : null, h("span", { class: "suggestions-opt-content--label" }, this.highlightLabel(opt.label).map((seg, i) => typeof seg === 'string' ? h("span", { key: i }, seg) : h("strong", { key: i }, seg.match)))))))))));
     }
     static get is() { return "xv-tag-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -273,7 +273,8 @@ export class XvTagCombobox {
                         "TagComboboxOptIn": {
                             "location": "import",
                             "path": "./xv-tag-combobox.config",
-                            "id": "src/components/xv-tag-combobox/xv-tag-combobox.config.ts::TagComboboxOptIn"
+                            "id": "src/components/xv-tag-combobox/xv-tag-combobox.config.ts::TagComboboxOptIn",
+                            "referenceLocation": "TagComboboxOptIn"
                         }
                     }
                 },
@@ -317,7 +318,8 @@ export class XvTagCombobox {
                         "SIZE_VAR_STR": {
                             "location": "import",
                             "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },

package/dist/collection/components/xv-text-input/xv-text-input.js

@@ -30,13 +30,13 @@ export class XvTextInput {
     }
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: '43b395b4ae2d9b12b0b6e8c205832b01b444eff9', class: { disabled: !!this.disabled } }, h("label", { key: 'a5a026fc3effb39012c6915b01e4440e89496c13', class: "control" }, this.label && h("span", { key: '9289ff9d91d277e003257766d5bc828d4c0f5998', class: "control_label" }, this.label), h("div", { key: 'ad3217dc73fbddc134fb823a8b66a605bca4c2e7', class: {
+        return (h(Host, { key: '9aec75a885d16f416708047095897ac987b9e1ec', class: { disabled: !!this.disabled } }, h("label", { key: '4d6934a4208df6e858277366e7a74da9ec7c0ed3', class: "control" }, this.label && h("span", { key: '57c1974e09512b744aecc18dacfe7cae0bac6921', class: "control_label" }, this.label), h("div", { key: '5b0dd4d878da6e8bfc05a0f704954081e9b8058d', class: {
                 'control_input': true,
                 readonly: !!this.readonly,
                 [this.size]: true,
                 error: !!this.error,
                 warning: !!this.warning,
-            } }, h("input", { key: 'a4aa380c75e08596012b32915b5801bb31c6af79', autocomplete: this.autocomplete, type: (this.type === 'password' && this.isPasswordVisible && 'text') || this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), h("div", { key: '35c161e73e8618702d901fb526a5aec4d3bf02d0', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: '43592e719837a391dd0b48465146884739d77a6c', size: SIZE_VAR.XS }), this.clearable && this.value && !this.loading && !this.disabled && !this.readonly && (h("button", { key: 'fb8027d93f562377d70252d07cab8440c0554e35', type: "button", class: "status-icon clear", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, this.type === 'password' && (h("button", { key: '620ed023d03e5e8583fdfeb028d49806094f08de', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, h("svg", { key: '77421524e6041b62fe5675daec3dc9e11c5a49e1', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", width: 16, height: 16 }, this.isPasswordVisible ? (h("path", { fill: "currentColor", d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z" })) : (h("path", { fill: "currentColor", d: "M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z" })))))))), message && (h("p", { key: '6365962d7a21f79f1d705deed078f352ec311b99', class: { message: true, [message.level]: true } }, message.text))));
+            } }, h("input", { key: '0a5d8923bbcf54a551618557037a96b2e3c2166f', autocomplete: this.autocomplete, type: (this.type === 'password' && this.isPasswordVisible && 'text') || this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), h("div", { key: 'a627fa606172a1e8d198b8dc8daadc280d39cfa2', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: 'e2e9bb121daf4aedc173909545b80961db442002', size: SIZE_VAR.XS }), this.clearable && this.value && !this.loading && !this.disabled && !this.readonly && (h("button", { key: '45e514e856569d54bb4c98a8ac78a0aedc70ce37', type: "button", class: "status-icon clear", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, this.type === 'password' && (h("button", { key: 'f7ae4b875d4a515e79fa1699d0fe3d4aa8b27586', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, h("svg", { key: '08bf622486f686fba2309004145c4c340faf8cd0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", width: 16, height: 16 }, this.isPasswordVisible ? (h("path", { fill: "currentColor", d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z" })) : (h("path", { fill: "currentColor", d: "M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z" })))))))), message && (h("p", { key: '2c1d43925fd56c86e47dfd88c4644b030639f81e', class: { message: true, [message.level]: true } }, message.text))));
     }
     static get is() { return "xv-text-input-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -332,7 +332,8 @@ export class XvTextInput {
                         "SIZE_VAR_STR": {
                             "location": "import",
                             "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },

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

@@ -22,12 +22,12 @@ export class XvTextarea {
     }
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: '32cde85fad74f49fc14a928eb652a59c07e909d0', class: { disabled: !!this.disabled } }, h("label", { key: '3ecb0591842d2ca2ba3099e4cf273a85b96c0339', class: "control" }, (this.label || this.max) && (h("p", { key: '1a624bff259ecc4854da70bf784178165f204d8e', class: "control_label" }, h("span", { key: 'c615f9d6b36a782592619421598650594b5983d0' }, this.label, this.info && h("xv-tooltip-v2", { key: '469dd76f58eeb7c7b4664dd8b5c577597bd308ed', message: this.info })), this.max !== undefined && !this.counterHide && (h("span", { key: 'b35c81ea8ced8f91fb1f2c572bb57ddaa111b434', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), h("div", { key: '3176748cbf9379b92bd1b8cfdae87a860545c326', class: {
+        return (h(Host, { key: '8f8a6e5f1886e21e52ffc3e006c4d43b1de420eb', class: { disabled: !!this.disabled } }, h("label", { key: '2097cfb9d893772a0aa1e2aa3aeadd5484ebb48e', class: "control" }, (this.label || this.max) && (h("p", { key: '4a5ce1d5ad1d62ba1ab1249b2f15504eafc727af', class: "control_label" }, h("span", { key: 'f8344446dcf38978181473292c6a748d394538f6' }, this.label, this.info && h("xv-tooltip-v2", { key: 'bf23e43f1b7f0ea94ba9cb376c4893ea413ec5df', message: this.info })), this.max !== undefined && !this.counterHide && (h("span", { key: '7b377f47c6b426428fbaee01746415032b75d0b5', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), h("div", { key: 'b7e1937e704f7493544443d159e7b3c1783a1e45', class: {
                 'control_input': true,
                 readonly: !!this.readonly,
                 error: !!this.error,
                 warning: this.warning !== undefined,
-            } }, h("textarea", { key: 'ff8584218a0d3702cb2047560404e90d28fd1812', class: { 'no-resize': !!this.noResize }, name: this.name, rows: this.rows, value: this.value, maxLength: this.max, disabled: this.disabled, readOnly: this.readonly, placeholder: this.placeholder, onInput: this.onInput }), h("div", { key: '464cdd3d774d99e3362b7b3c68f7e69f32d51687', class: "control_input__icons" }, this._renderIcon()))), message && (h("p", { key: '832b54de9b533b8f0e39540e27c2e49e27b5556e', class: { message: true, [message.level]: true } }, message.text))));
+            } }, h("textarea", { key: '4c09ca41ec313fca1f2df3e4e941d342d6121b6a', class: { 'no-resize': !!this.noResize }, name: this.name, rows: this.rows, value: this.value, maxLength: this.max, disabled: this.disabled, readOnly: this.readonly, placeholder: this.placeholder, onInput: this.onInput }), h("div", { key: '68dcba186158bf977193f908cf2a129452ba904e', class: "control_input__icons" }, this._renderIcon()))), message && (h("p", { key: '150534971f182c93c131fee2b00eae5cc78e7c30', class: { message: true, [message.level]: true } }, message.text))));
     }
     _renderIcon() {
         if (this.loading)
@@ -372,7 +372,8 @@ export class XvTextarea {
                         "SIZE_VAR_STR": {
                             "location": "import",
                             "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },

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

@@ -161,7 +161,7 @@
   background-color: transparent;
 }
 .xv-tile--host .xv-tile_control input[type=checkbox]:checked[readonly]:before, .xv-tile--host .xv-tile_control input[type=checkbox]:checked[readonly]:after {
-  border-color: var(--text-disabled, rgba(18, 18, 18, 0.25));
+  border-color: var(--text-disabled, hsla(0, 0%, 7%, 0.25));
 }
 .xv-tile--host .xv-tile_control input[type=radio] {
   border-radius: 50%;

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

@@ -29,7 +29,7 @@ export class XvTile {
         this.checked = !this.checked;
     }
     render() {
-        return (h(Host, { key: '3db56124d26e5331321aaa2d44ced2db9d4f25e2', class: "xv-tile--host" }, h("label", { key: '4f60c98b1d81496beb2fe393cce26c59a02145c6', class: {
+        return (h(Host, { key: '7a4262c881da376efbba73e6ecdeef845caefa0e', class: "xv-tile--host" }, h("label", { key: '9e3fcc2f59463c39d61352e84f89c6905b8b6754', class: {
                 [this.el.className]: !!this.el.className,
                 'xv-tile': true,
                 [`xv-tile--variant-${this.variant}`]: !!this.variant,
@@ -37,7 +37,7 @@ export class XvTile {
                 'xv-tile--disabled': !!this.disabled,
                 'selected': !!this.checked,
                 'xv-tile--error': !!this.error,
-            } }, h("div", { key: '052af1d2271a3c1ab8e054283bd607d451a7907c', class: "xv-tile_content" }, this.label && h("p", { key: 'd8352f828901347e56fd6dabe4dfd4cbff243437', class: "xv-tile_content__title" }, this.label), h("slot", { key: '292b5129abdcdf19267f9f8affa7ae69b3fc3c5e' })), this.variant === 'selectable' && (h("div", { key: '6e80e294fb9b317c395672511db2aceb04a55d95', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: 'c863ad11287f0287b648a90d5bd511febf9298dc', class: "xv-tile_footer" }, h("button", { key: 'f85a61b433ec3e78c7b2b4037ac4afb8084dae80', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '4c77d1362b02c683f57f38cae820a0795e64f0ea', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '3d83e120b16f1cdfb9dd0bcf3158648f3e70df32', name: "expandable" })))));
+            } }, h("div", { key: 'aacc76f7706cef6b3f7dc642e07f0aa0ed641368', class: "xv-tile_content" }, this.label && h("p", { key: 'c52856112766b1047581570dadd3ca3daa09e191', class: "xv-tile_content__title" }, this.label), h("slot", { key: 'c23faffc735f62a7007ad6ab25caad10278543d8' })), this.variant === 'selectable' && (h("div", { key: 'c9005b66ccb8feea162b43079762f7e2f8a7c5cf', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled || this.readonly, readonly: this.readonly, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: '08d6633d4a19ea03c761d18b20f164ae23002479', class: "xv-tile_footer" }, h("button", { key: 'ff242c00e2dadf564d146a02ac944d1bee7c7ec7', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '27350c54f82cf8c78e49c04fc2b2b4fb0e4bbb96', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '85f9a007a422ca5e7c06239d771cc8ede86a4e21', name: "expandable" })))));
     }
     static get is() { return "xv-tile"; }
     static get originalStyleUrls() {

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

@@ -15,7 +15,7 @@ export class XvToggle {
         };
     }
     render() {
-        return (h(Host, { key: '2b31ae2defc4f7d8e1c210b20f4a3fb8af931866', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && h("span", { key: '2f5d7411afbee3f46952075cd89665266504572d', class: "label" }, this.label), h("label", { key: '529a49324f6b2ee05752427ddf1b2018c1282347', class: "control" }, h("slot", { key: 'cebd95dded17d65d550a8fbbc31e4a59f150a9c8', name: "before" }), h("div", { key: '6ae44e937e46f20e3e4b9666bf4ab47c30e26565', class: "control_input" }, h("input", { key: '4bc5cb456d92ebb6c69be10d8811f77a8e683e7d', type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, onChange: this.onChange }), h("span", { key: '67570ef5b308bdfde75de2f2edc5b06ae56a55dd', class: "toggle" })), h("slot", { key: 'adaf4b0186e737b9f3432a6d89eb3cb6062e84ec', name: "after" }))));
+        return (h(Host, { key: '752b686c9e361b4ca0a0ad48d61072a2c819373c', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && h("span", { key: 'c99e7d648d7886db04fbfaf16bedf40b982f6b72', class: "label" }, this.label), h("label", { key: 'ff15e59d5b7ace403030f997d8b1ddf3640f0bf6', class: "control" }, h("slot", { key: 'bea4d7593d2c7caca6b69e5cc219c1b8dbb55d09', name: "before" }), h("div", { key: '7ad81dc90a00339c8653605cfeb5468377be366b', class: "control_input" }, h("input", { key: 'ffbcaac266859de781476ba06e9e56069fd11ad4', type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, onChange: this.onChange }), h("span", { key: 'd0b1915cd7ab776eb3b573802f5ee73ec417edde', class: "toggle" })), h("slot", { key: '4de504f5a68a747e097fed0260fe55b4dd93de57', name: "after" }))));
     }
     static get is() { return "xv-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -159,7 +159,8 @@ export class XvToggle {
                         "SIZE_VAR_STR": {
                             "location": "import",
                             "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },

package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js

@@ -67,7 +67,7 @@ export class XvToggleTip {
     }
     ;
     render() {
-        return (h(Host, { key: 'e7954243635bd7420feb8a40d130341ae8849bba', class: "xv-toggle-tip" }, h("div", { key: 'd1fc4e4f61880ab219f4ba1b0f908077a58e5134', class: { 'trigger': true, 'trigger--block': this.block }, role: "button", tabindex: "0", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "popover", onClick: () => this.setPopover(!this.open), ref: (el) => (this.triggerEl = el) }, h("slot", { key: '1ab4b9c5f21dacd8b82f8e60585076367567216f', name: "trigger" }, h("svg", { key: '72dcf0c9dada11b0c58ecde78a3b0081d6a2d255', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '610419726f4fca0f6b8793272c7b1f460663e7c1', 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" })))), h("div", { key: 'ac59c68e89edf7aafa9b3dd2576486a70fcbd4e2', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: '9d49318793bf61bfbb64bb4f985ab868bdaf2545', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: '8c165fbef50d7f2adb8a07d16a01e4346083831a', class: "popover-content" }, h("slot", { key: 'ed871e524e5a0b8c3a2e0d230f8d66b7ab99ccc4', name: "header" }), h("slot", { key: '34824d18b0cd7135fc6cc0e7596c315ee60da19a', name: "body" }), h("slot", { key: '1d1ddfc3c731f54fc1d75214839530f95f0f712d', name: "footer" })))));
+        return (h(Host, { key: '355065995790b620e5ed8b5d561b2898f787ac15', class: "xv-toggle-tip" }, h("div", { key: 'ff20f44061ee280105d53176e5c508e0845df871', class: { 'trigger': true, 'trigger--block': this.block }, role: "button", tabindex: "0", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "popover", onClick: () => this.setPopover(!this.open), ref: (el) => (this.triggerEl = el) }, h("slot", { key: 'd407db9a0df2a9f90b628ed79d6c648eed2c2c70', name: "trigger" }, h("svg", { key: 'f82ed966ca4436d8dde8bf5c2b992466f541224f', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '6f5187fbf1560ebd7a3f2e529d3fdd15fa80fea0', 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" })))), h("div", { key: '76fc29909a52ce4701d71e3509c4ebe8d1d32ee2', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: 'afabe0c85104f8c5e204677b53f5815f314a5039', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: 'f274e790046bcf6edc8123b2b0bcda895931772c', class: "popover-content" }, h("slot", { key: '8f28653ab605ae2eee5c7027532b024e914a8c13', name: "header" }), h("slot", { key: '1c26b3cb17db7fc9256fd42f7dcddb51eb182db5', name: "body" }), h("slot", { key: '3b537a669336579f2285784f469d4425d0f1cc31', name: "footer" })))));
     }
     disconnectedCallback() {
         this.destroyPopper();
@@ -156,7 +156,8 @@ export class XvToggleTip {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": "node_modules::Placement"
+                            "id": "node_modules::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },

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

@@ -38,11 +38,11 @@ export class XvTooltip {
         this.destroyTooltip();
     }
     render() {
-        return (h(Host, { key: 'b97a316c17b604ddf3a58d28a6b2ce49f0f3af48', role: "tooltip", class: {
+        return (h(Host, { key: 'a6853dc450f6d063a702a1791297963f1530c003', role: "tooltip", class: {
                 'xv-tooltip-wrapper': true,
                 [`xv-tooltip-wrapper__block`]: !!this.block,
                 [`xv-tooltip-wrapper__dashed`]: !!this.dashed,
-            } }, h("slot", { key: '5120e6069ff93fd43302833401679c94e3577823' }, h("svg", { key: 'a37d0c7930cf87e1c3c4d67cd8ba74c52f061587', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '8b762af654ad54e41816fa28e155fb09a3534867', 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" })))));
+            } }, h("slot", { key: 'db5ea6da812b85930e8c74dc2ceaf59f8e6197b1' }, h("svg", { key: '7ac24beb22b912f77ec3535309019833f28fd375', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'b86e5339a9af99e6011fceea6d8b77e89dcd0e19', 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" })))));
     }
     static get is() { return "xv-tooltip-v2"; }
     static get originalStyleUrls() {
@@ -86,7 +86,8 @@ export class XvTooltip {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": "node_modules::Placement"
+                            "id": "node_modules::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },

package/dist/collection/index.js

@@ -8,3 +8,6 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export { format } from './utils/utils';
+// Re-exported from this package because the transformer is module state inside the
+// Stencil runtime bundled here — a consumer's own @stencil/core would set a different one.
+export { setTagTransformer, transformTag } from '@stencil/core';