xv-webcomponents 2.0.0-beta.2 → 2.0.0-beta.28

package/dist/esm/{xv-accordion-v2_50.entry.js → xv-accordion-v2_49.entry.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, F as Fragment } from './index-Bu8SrOeR.js';
-import { u as uidGenerator, f as forEach, r as resolveFieldMessage, s as setAttr, c as resolveWhitelabel, a as api, g as getMetaNav, b as getBaseUrl, d as debounce$1 } from './index-B6cY-_U1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, F as Fragment } from './index-DJC3-dS3.js';
+import { u as uidGenerator, f as forEach, r as resolveFieldMessage, s as setAttr, c as resolveWhitelabel, a as api, g as getMetaNav, b as getBaseUrl, d as debounce$1 } from './index-ClusqSO5.js';
 import { S as SIZE_VAR, X as XV_SORT_DIR, O as OverflowMenuVariant, a as OverflowMenuItemSelector } from './_vars-CDEU4jkD.js';
 
 const xvAccordionCss = () => `:host{display:block}`;
@@ -83210,20 +83210,21 @@ const XvOverflowMenu = class {
             document.removeEventListener('click', this.handleClickOutside, { capture: true });
         };
         this.handleClickOutside = (ev) => {
-            var _a, _b, _c;
+            var _a, _b;
             if (!this.open)
                 return;
-            // A shadow-DOM click retargets ev.target to the host in the browser (covered by el.contains).
-            // Also check the shadow trigger/list directly so it works when there is no retargeting (jsdom).
-            const target = ev.target;
-            if (this.el.contains(target))
+            // composedPath is the only check that survives shadow-DOM retargeting: a click inside a menu
+            // that lives in another component's shadow root arrives here retargeted to that outer host.
+            const path = (_b = (_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) !== null && _b !== void 0 ? _b : [];
+            const inside = (node) => !!node && (path.includes(node) || (path.length === 0 && node.contains(ev.target)));
+            if (inside(this.el))
                 return;
-            if ((_a = this.triggerButtonEl) === null || _a === void 0 ? void 0 : _a.contains(target))
+            if (inside(this.triggerButtonEl))
                 return;
-            if ((_b = this.listEl) === null || _b === void 0 ? void 0 : _b.contains(target))
+            if (inside(this.listEl))
                 return;
             // A click on the anchor is handled by its own listener (toggle) — don't treat it as "outside".
-            if ((_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.contains(target))
+            if (inside(this.anchorEl))
                 return;
             this.open = false;
         };
@@ -83869,174 +83870,1556 @@ const XvTab = class {
         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)));
     }
 };
 XvTab.style = xvTabCss();
 
-const xvTableCss = () => `:host{--xv-table-min-height:51.11px;--xv-table-padding-x:16px;--xv-table-padding-y:15px;--xv-table-cols-template:repeat(auto-fit, minmax(0, 1fr));display:block}:host .batch-actions{user-select:none;pointer-events:none;position:absolute;left:0;bottom:100%;width:0;min-height:48px;overflow:hidden;border-radius:3px 3px 0 0;background-color:var(--interactive-01, #273435);display:flex;align-items:center;justify-content:space-between;column-gap:var(--spacing-04);flex-wrap:nowrap;box-sizing:border-box;transition:250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;color:var(--text-on-color, #fff)}:host .batch-actions_content{display:block;overflow:hidden;white-space:nowrap}:host .batch-actions_count{margin:0;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:var(--fz-lg, 18px);letter-spacing:0.16px}:host .xv-table{display:flex;flex-direction:column;position:relative}:host .xv-table_wrapper{display:flex;flex-direction:column;position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .xv-table_wrapper ::slotted(*){min-width:1000px}:host .xv-table ::slotted([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host .xv-table ::slotted([checked]:not([header]):hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host .xv-table ::slotted(xv-table-v2-row[disabled]){pointer-events:none;opacity:0.4;cursor:not-allowed;user-select:none}:host .xv-table ::slotted([slot=footer]:hover),:host .xv-table ::slotted([slot=footer]){background-color:var(--layer-accent-02, #E3E3E3)}:host .xv-table_loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:var(--xv-table-min-height, 51.11px);position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host .xv-table-title,:host ::slotted([slot=title]){color:var(--text-primary, #333) !important;font-size:var(--fz-xl, 21px) !important;margin-top:var(--spacing-05, 16px) !important;margin-bottom:var(--spacing-06, 24px) !important;font-family:var(--ff-heading, "Gill Sans");font-style:normal;font-weight:400;line-height:normal}:host([hover]) .xv-table ::slotted(:hover:not([header])){background-color:var(--layer-hover-01, #E9E9E9)}:host(.batchVisible) .batch-actions{pointer-events:initial;user-select:initial;width:100%;padding-inline:var(--xv-table-padding-x)}:host([expandable]) ::slotted(xv-table-v2-row){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px)}:host([size=xs]){--xv-table-padding-y:7px;--xv-table-min-height:35.1px}:host([size=sm]){--xv-table-padding-y:10px;--xv-table-min-height:41.11px}:host([size=lg]){--xv-table-padding-y:21px;--xv-table-min-height:63.09px}:host([size=xl]){--xv-table-padding-y:31px;--xv-table-min-height:78.77px}`;
+const DB_NAME = 'xv-webcomponents';
+const DB_VERSION = 1;
+const STORE = 'table-layouts';
+const MAX_AGE_MS = 180 * 24 * 60 * 60 * 1000;
+const READ_TIMEOUT_MS = 1500;
+let connection = null;
+let pruned = false;
+const layoutId = (owner, storageKey) => `${owner || 'anonymous'}:${storageKey}`;
+const request = (req) => new Promise((resolve, reject) => {
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+});
+/**
+ * Our own database on purpose. XvMarketplaceNG's origin already carries a Dexie database, and Dexie
+ * multiplies its version by ten — sharing a name loses the version race and kills the feature (MAR-15943).
+ */
+const openDb = () => {
+    if (connection)
+        return connection;
+    connection = new Promise(resolve => {
+        if (typeof indexedDB === 'undefined')
+            return resolve(null);
+        let req;
+        try {
+            req = indexedDB.open(DB_NAME, DB_VERSION);
+        }
+        catch (_a) {
+            return resolve(null);
+        }
+        req.onupgradeneeded = () => {
+            const db = req.result;
+            if (db.objectStoreNames.contains(STORE))
+                return;
+            const store = db.createObjectStore(STORE, { keyPath: 'id' });
+            store.createIndex('owner', 'owner');
+            store.createIndex('updatedAt', 'updatedAt');
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => resolve(null);
+        req.onblocked = () => resolve(null);
+    });
+    return connection;
+};
+const store = async (mode) => {
+    const db = await openDb();
+    if (!db)
+        return null;
+    try {
+        return db.transaction(STORE, mode).objectStore(STORE);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+/** A cold database must not hold the first paint hostage — past this, the declared columns win. */
+const withTimeout = (promise, fallback, ms = READ_TIMEOUT_MS) => Promise.race([promise, new Promise(resolve => setTimeout(() => resolve(fallback), ms))]);
+const readLayout = async (owner, storageKey) => {
+    if (!storageKey)
+        return null;
+    const read = (async () => {
+        var _a;
+        try {
+            const objectStore = await store('readonly');
+            if (!objectStore)
+                return null;
+            const record = await request(objectStore.get(layoutId(owner, storageKey)));
+            return (_a = record === null || record === void 0 ? void 0 : record.layout) !== null && _a !== void 0 ? _a : null;
+        }
+        catch (_b) {
+            return null;
+        }
+    })();
+    const layout = await withTimeout(read, null);
+    void pruneLayouts();
+    return layout;
+};
+const writeLayout = async (owner, storageKey, layout) => {
+    if (!storageKey)
+        return;
+    try {
+        const objectStore = await store('readwrite');
+        if (!objectStore)
+            return;
+        const record = {
+            id: layoutId(owner, storageKey),
+            owner: owner || 'anonymous',
+            storageKey,
+            layout,
+            updatedAt: Date.now(),
+        };
+        await request(objectStore.put(record));
+    }
+    catch (_a) {
+        // Private mode and a full quota both degrade to "this table does not remember".
+    }
+};
+const deleteLayout = async (owner, storageKey) => {
+    if (!storageKey)
+        return;
+    try {
+        const objectStore = await store('readwrite');
+        if (!objectStore)
+            return;
+        await request(objectStore.delete(layoutId(owner, storageKey)));
+    }
+    catch (_a) {
+        // See writeLayout.
+    }
+};
+const pruneLayouts = async () => {
+    if (pruned)
+        return;
+    pruned = true;
+    try {
+        const objectStore = await store('readwrite');
+        if (!objectStore)
+            return;
+        const range = IDBKeyRange.upperBound(Date.now() - MAX_AGE_MS);
+        const stale = await request(objectStore.index('updatedAt').getAll(range));
+        stale.forEach(record => objectStore.delete(record.id));
+    }
+    catch (_a) {
+        // See writeLayout.
+    }
+};
+
+const XV_TABLE_ROW_TAG = 'xv-table-row';
+const XV_TABLE_CELL_TAG = 'xv-table-cell';
+const XV_TABLE_LAYOUT_VERSION = 1;
+/** The floor a resize drag may not cross, when the column names no minWidth. */
+const XV_TABLE_MIN_COLUMN_WIDTH = 64;
+/** Per visible column, the width below which the table scrolls instead of squeezing. */
+const XV_TABLE_SCROLL_COLUMN_WIDTH = 120;
+const XV_TABLE_CONTROL_WIDTH = 48;
+const XV_TABLE_DEFAULT_PAGE_SIZES = [10, 20, 30, 40, 50, 100];
+
+const ORDER_BY = /^(asc|desc)\((.+)\)$/;
+/** Array and object props accept their JSON string form so they stay settable from plain markup. */
+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;
+    }
+};
+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;
+};
+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] };
+};
+const nextSortDirection = (current) => current === XV_SORT_DIR.ASC ? XV_SORT_DIR.DESC : XV_SORT_DIR.ASC;
+const sortName = (column) => column.sortName || column.id;
+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. */
+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);
+};
+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);
+};
+const totalPages = (total, pageSize) => Math.ceil((total || 0) / (pageSize || 10)) || 1;
+const clampPage = (page, pages) => Math.min(Math.max(page || 1, 1), Math.max(pages, 1));
+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);
+};
+const visibleColumns = (columns) => columns.filter(column => !column.hidden);
+const hideableColumns = (columns) => columns.filter(column => column.hideable);
+/** A column may narrow a table-level switch, never widen it. */
+const columnAllows = (column, table, key) => { var _a; return table && ((_a = column[key]) !== null && _a !== void 0 ? _a : true); };
+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.
+ */
+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.
+ */
+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`),
+    ];
+};
+const buildColumnTemplate = (columns, leading = [], trailing = []) => buildColumnTracks(columns, leading, trailing).join(' ');
+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. */
+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.
+ */
+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,
+    };
+};
+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. */
+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;
+};
+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);
+    }
+};
+
+const xvTableCss = () => `@charset "UTF-8";:host{--xv-table-columns:1fr;--xv-table-height:40px;--xv-table-padding-x:var(--spacing-05);--xv-table-padding-y:var(--spacing-03);--xv-table-border-color:var(--border-subtle-01);--xv-table-header-bg:var(--layer-accent-01);--xv-table-loading-bg:var(--layer-02);--xv-table-loading-opacity:0.8;--xv-table-max-height:none;--xv-table-scroll-width:1180px;display:block;position:relative;color:var(--text-primary);font-family:var(--ff-body);font-size:var(--fz-md)}:host([block]){width:100%}:host([size=xs]){--xv-table-height:24px;--xv-table-padding-x:var(--spacing-03);--xv-table-padding-y:var(--spacing-01)}:host([size=sm]){--xv-table-height:32px;--xv-table-padding-x:var(--spacing-04);--xv-table-padding-y:var(--spacing-02)}:host([size=md]){--xv-table-height:40px;--xv-table-padding-x:var(--spacing-05);--xv-table-padding-y:var(--spacing-03)}:host([size=lg]){--xv-table-height:48px;--xv-table-padding-x:var(--spacing-05);--xv-table-padding-y:var(--spacing-04)}:host([size=xl]){--xv-table-height:64px;--xv-table-padding-x:var(--spacing-06);--xv-table-padding-y:var(--spacing-05)}:host(.is-dragging){cursor:grabbing;user-select:none}.heading{padding:var(--spacing-05) var(--spacing-05) var(--spacing-06)}.heading_title{margin:0;font-family:var(--ff-heading);font-size:var(--fz-xl);font-weight:400;line-height:28px}.heading_description{margin:var(--spacing-02) 0 0;color:var(--text-secondary);line-height:18px}.bar{position:sticky;left:0;z-index:10}.bar_toolbar{display:flex;align-items:center;gap:var(--spacing-03);min-height:var(--xv-table-height)}.bar_toolbar ::slotted(*){flex:1 1 auto;min-width:0}.bar_batch{position:absolute;inset:0;z-index:2;display:flex;align-items:center;gap:var(--spacing-03);padding:0 var(--spacing-05);border-radius:3px 3px 0 0;background:var(--interactive-01);color:var(--text-on-color)}.bar_count{margin-left:auto;font-weight:600}.scroll{position:relative}@media screen and (max-width: 1180px){.scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}.grid{min-width:max(var(--xv-table-min-width), var(--xv-table-scroll-width))}}.scroll--overflowing{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host([min-width]:not([min-width="0"])) .scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host([min-width]:not([min-width="0"])) .grid{min-width:var(--xv-table-min-width)}:host([sticky-header]) .scroll{min-height:0;max-height:var(--xv-table-max-height);overflow-y:auto}.grid{display:grid;grid-template-columns:var(--xv-table-columns);box-sizing:border-box;border:1px solid var(--xv-table-border-color);border-bottom:0}:host([sticky-header]) ::slotted(xv-table-row[header]),:host([sticky-header]) xv-table-row[header]{position:sticky;top:0;z-index:5}.body{grid-column:1/-1;display:grid;grid-template-columns:subgrid}.body[hidden]{display:none}.skeleton_row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;min-height:var(--xv-table-height);box-shadow:inset 0 -1px 0 0 var(--border-subtle-00)}.skeleton_cell{display:flex;align-items:center;padding:var(--xv-table-padding-y) var(--xv-table-padding-x)}.skeleton_bar{width:100%;height:12px;border-radius:2px;background:var(--layer-accent-01);animation:xv-table-pulse 1.4s ease-in-out infinite}@keyframes xv-table-pulse{0%,100%{opacity:1}50%{opacity:0.4}}.empty{display:flex;align-items:center;justify-content:center;min-height:calc(var(--xv-table-height) * 2);border:1px solid var(--xv-table-border-color);border-top:0;color:var(--text-secondary)}.loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.loading::before{content:"";position:absolute;inset:0;background:var(--xv-table-loading-bg);opacity:var(--xv-table-loading-opacity)}.picker{margin-left:auto}.picker_list{display:flex;flex-direction:column;gap:var(--spacing-02);max-height:320px;overflow-y:auto;padding:var(--spacing-03)}.picker_trigger{position:relative;display:inline-flex;color:var(--icon-primary)}.picker_marker{position:absolute;top:-2px;right:-4px;width:6px;height:6px;border-radius:50%;background:var(--background-brand)}.pagination{border:1px solid var(--xv-table-border-color);border-top:0}`;
 
+const CHECKBOX_EVENT = 'eventChange';
+const INTERACTIVE = 'a,button,input,select,textarea,[role="button"],xv-button-v2,xv-link-v2,xv-checkbox-v2,xv-radio-v2,xv-overflow-menu-v2,xv-tooltip-v2';
 const XvTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.sortChange = createEvent(this, "sortChange", 7);
+        this.selectedChange = createEvent(this, "selectedChange", 7);
+        this.expandedChange = createEvent(this, "expandedChange", 7);
+        this.pageChange = createEvent(this, "pageChange", 7);
+        this.layoutChange = createEvent(this, "layoutChange", 7);
+        this.rowClick = createEvent(this, "rowClick", 7);
+        this.rowOrderChange = createEvent(this, "rowOrderChange", 7);
+        /** Column definitions. Accepts its JSON string form so it is settable from plain markup. */
+        this.columns = [];
+        /** Row data. Ignored when `xv-table-row` children are slotted. */
+        this.rows = [];
+        /** Property of a row object that identifies it in selection and expansion payloads. */
+        this.rowKey = 'id';
+        /** Row height ladder. */
         this.size = SIZE_VAR.MD;
-        this.selected = new Map();
-        this.selectedCount = 0;
+        /** Stretches the table to the full width of its container. */
+        this.block = false;
+        /** Covers the body with a loading state. */
+        this.loading = false;
+        /** Placeholder rows drawn while `loading`. Zero draws a spinner instead. */
+        this.skeletonRows = 0;
+        /** Highlights a row on pointer hover. */
+        this.hover = false;
+        /** Emits `rowClick` when a row is clicked outside an interactive element. */
+        this.rowClickable = false;
+        /** Title above the table. */
+        this.label = '';
+        /** Supporting text under the title. */
+        this.description = '';
+        /** Shown when there are no rows. */
+        this.emptyLabel = '';
+        /** Text of the batch bar counter. `{count}` is replaced with the number of selected rows. */
+        this.selectedLabel = '';
+        /** Tooltip on the column picker trigger. */
+        this.columnsLabel = 'Columns';
+        /** Text of the button that restores the declared column layout. */
+        this.resetLabel = 'Reset';
+        /** Accessible name of a row's expand toggle. */
+        this.expandLabel = 'Toggle row';
+        /** Accessible name of a row's drag grip. */
+        this.reorderLabel = 'Drag to reorder';
+        /**
+         * `none` makes headers inert whatever the column says; `client` sorts the `rows` prop itself;
+         * `server` offers the affordance and only emits `sortChange` for the consumer to reload.
+         */
+        this.sortMode = 'none';
+        /** Active sort, as `asc(field)` / `desc(field)` or an object. */
+        this.sortBy = '';
+        /** `multiple` renders checkboxes, `single` renders radios. */
+        this.selection = 'none';
+        /** Values of the selected rows. */
+        this.selected = [];
+        /** Whether rows expand, and whether more than one may be open. */
+        this.expandMode = 'none';
+        /** Values of the expanded rows. */
+        this.expanded = [];
+        /** `client` slices the `rows` prop; `server` only emits `pageChange`. */
+        this.paginationMode = 'none';
+        /** Current page, 1-based. */
+        this.page = 1;
+        /** Rows per page. */
+        this.pageSize = 10;
+        /** Total row count, for `server` pagination. */
+        this.total = 0;
+        /** Page size choices. Accepts a comma-separated attribute. */
+        this.pageSizeOptions = [10, 20, 30, 40, 50, 100];
+        /**
+         * Allows dragging column edges. Off by default: no handle is rendered and nothing is bound
+         * until it is switched on. A column may switch itself off, never on.
+         */
+        this.resizable = false;
+        /** Allows dragging column headers into a new order. Off by default, like `resizable`. */
+        this.reorderable = false;
+        /**
+         * Allows dragging rows into a new order. Off by default: nothing is bound and no handle is
+         * rendered until it is switched on.
+         */
+        this.rowReorderable = false;
+        /** Whether the whole row drags, or only a grip in a leading control cell. */
+        this.rowReorderHandle = 'icon';
+        /** Keeps the header visible while the body scrolls. */
+        this.stickyHeader = false;
+        /**
+         * Width below which the table scrolls instead of squeezing, at any viewport. Left unset, a table
+         * only stops squeezing below 1180px, where it scrolls at the width its columns declared.
+         */
+        this.minWidth = 0;
+        /** Persists the column layout under this key. Empty means the layout is not remembered. */
+        this.storageKey = '';
+        /** Scopes the stored layout to a user. */
+        this.storageOwner = 'anonymous';
+        /** Controlled column layout. Overrides whatever is stored. */
+        this.layout = null;
+        /** Locale used for sorting and cell formatting. Falls back to the nearest `[lang]` ancestor. */
+        this.locale = '';
+        this.columnState = [];
+        this.sortState = null;
+        this.selectedValues = [];
+        this.expandedValues = [];
+        this.layoutPending = false;
+        this.columnDragging = false;
+        this.dragOverId = '';
+        this.dropRowIndex = -1;
+        this.slottedRowCount = 0;
+        this.derivedTracks = [];
+        this.hasSlottedHeader = false;
+        this.hasSlottedHeading = false;
+        this.hasSlottedEmpty = false;
+        this.overflowing = false;
+        this.declared = [];
+        this.declaredSignature = '';
+        /** Whether the columns came from a slotted header rather than the `columns` prop. */
+        this.fromMarkup = false;
+        this.rowData = [];
+        this.seededExpanded = false;
+        // Only rows this table collapsed are re-shown, so a consumer's own [hidden] is left alone.
+        this.collapsed = new WeakSet();
+        this.dragRowIndex = -1;
+        this.layoutToken = 0;
+        this.dragColumnId = '';
+        /**
+         * A declared width is a floor, so columns that cannot fit overflow rather than squeeze. The table
+         * scrolls them into reach instead of letting them hang outside the block they were given.
+         */
+        this.measureOverflow = () => {
+            if (!this.scrollEl)
+                return;
+            const overflowing = this.scrollEl.scrollWidth - this.scrollEl.clientWidth > 1;
+            if (overflowing !== this.overflowing)
+                this.overflowing = overflowing;
+        };
+        this.toggleSort = (column) => {
+            var _a;
+            // A finished column drag still fires a click on the header — that must not sort it.
+            if (!this.isSortable(column) || this.columnDragging)
+                return;
+            const name = sortName(column);
+            const direction = nextSortDirection(((_a = this.sortState) === null || _a === void 0 ? void 0 : _a.name) === name ? this.sortState.direction : null);
+            this.sortState = { name, direction };
+            this.sortChange.emit(this.sortState);
+        };
+        this.resizeStart = (event, column, handle) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const shown = this.visible;
+            const index = shown.indexOf(column);
+            // Trading with a neighbour keeps the total, so the table never stops filling its container.
+            const pairIndex = index + 1 < shown.length ? index + 1 : index - 1;
+            const pair = shown[pairIndex];
+            const cells = this.headerCells();
+            const startWidth = cells[index].getBoundingClientRect().width;
+            const pairStart = pair ? cells[pairIndex].getBoundingClientRect().width : 0;
+            const startX = event.clientX;
+            const offset = this.leadingTracks.length;
+            let width = startWidth;
+            let pairWidth = pairStart;
+            handle.setPointerCapture(event.pointerId);
+            // Written straight onto the grid: a re-render per pointermove stutters on a full page.
+            const move = (moveEvent) => {
+                var _a;
+                width = clampWidth(startWidth + moveEvent.clientX - startX, column);
+                if (pair) {
+                    // The neighbour's own floor caps the drag, so neither column is squeezed past its minimum.
+                    pairWidth = clampWidth(pairStart - (width - startWidth), pair);
+                    width = clampWidth(startWidth + (pairStart - pairWidth), column);
+                }
+                const tracks = buildColumnTracks(this.columnState, this.leadingTracks, this.trailingTracks);
+                tracks[index + offset] = `${width}px`;
+                if (pair)
+                    tracks[pairIndex + offset] = `${pairWidth}px`;
+                (_a = this.gridEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('--xv-table-columns', tracks.join(' '));
+            };
+            const stop = () => {
+                handle.removeEventListener('pointermove', move);
+                handle.removeEventListener('pointerup', stop);
+                handle.removeEventListener('pointercancel', stop);
+                this.columnState = this.columnState.map(item => {
+                    if (item.id === column.id)
+                        return Object.assign(Object.assign({}, item), { width });
+                    if (pair && item.id === pair.id)
+                        return Object.assign(Object.assign({}, item), { width: pairWidth });
+                    return item;
+                });
+                this.commitLayout();
+            };
+            handle.addEventListener('pointermove', move);
+            handle.addEventListener('pointerup', stop);
+            handle.addEventListener('pointercancel', stop);
+        };
+        this.resizeReset = (column) => {
+            var _a;
+            const width = (_a = this.declared.find(item => item.id === column.id)) === null || _a === void 0 ? void 0 : _a.width;
+            this.columnState = this.columnState.map(item => (item.id === column.id ? Object.assign(Object.assign({}, item), { width }) : item));
+            this.commitLayout();
+        };
+        this.headPointerDown = (event) => {
+            const hit = this.headerCellFrom(event);
+            if (!hit)
+                return;
+            const path = event.composedPath();
+            if (!path.some(node => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains('resize'); }))
+                return;
+            this.resizeStart(event, hit.column, event.composedPath()[0]);
+        };
+        this.headKeyDown = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            const hit = this.headerCellFrom(event);
+            if (!hit)
+                return;
+            event.preventDefault();
+            this.toggleSort(hit.column);
+        };
+        this.headDblClick = (event) => {
+            const path = event.composedPath();
+            if (!path.some(node => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains('resize'); }))
+                return;
+            const hit = this.headerCellFrom(event);
+            if (hit)
+                this.resizeReset(hit.column);
+        };
+        this.headDragStart = (event) => {
+            const hit = this.headerCellFrom(event);
+            if (hit)
+                this.dragStart(event, hit.column);
+        };
+        this.headDragOver = (event) => {
+            const hit = this.headerCellFrom(event);
+            if (hit)
+                this.dragOver(event, hit.column, hit.cell);
+        };
+        this.headDrop = (event) => {
+            const hit = this.headerCellFrom(event);
+            if (hit)
+                this.drop(event, hit.column);
+        };
+        this.dragStart = (event, column) => {
+            var _a;
+            this.dragColumnId = column.id;
+            this.columnDragging = true;
+            (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('text/plain', column.id);
+            if (event.dataTransfer)
+                event.dataTransfer.effectAllowed = 'move';
+        };
+        this.dragOver = (event, column, cell) => {
+            if (!this.dragColumnId || column.id === this.dragColumnId)
+                return;
+            if (!columnAllows(column, this.reorderable, 'reorderable'))
+                return;
+            event.preventDefault();
+            if (this.dragOverId === column.id)
+                return;
+            this.dragOverId = column.id;
+            this.headerCells().forEach(item => item.classList.toggle('drag-over', item === cell));
+        };
+        this.drop = (event, column) => {
+            event.preventDefault();
+            this.clearDragOver();
+            if (!this.dragColumnId || column.id === this.dragColumnId)
+                return;
+            if (!columnAllows(column, this.reorderable, 'reorderable'))
+                return;
+            const shown = this.visible;
+            const from = shown.findIndex(item => item.id === this.dragColumnId);
+            const to = shown.findIndex(item => item.id === column.id);
+            if (from < 0 || to < 0)
+                return;
+            this.columnState = mergeVisibleOrder(this.columnState, moveItem(shown, from, to));
+            this.commitLayout();
+        };
+        this.dragEnd = () => {
+            this.dragColumnId = '';
+            this.clearDragOver();
+            // The trailing click lands after dragend, so the sort guard has to outlive the gesture.
+            setTimeout(() => (this.columnDragging = false), 0);
+        };
+        this.toggleSelectAll = () => {
+            // Tri-state: a partial box clears what is picked rather than completing the set.
+            this.setSelection(this.selectedValues.length ? [] : this.rowValues());
+        };
+        this.toggleColumn = (column) => {
+            this.columnState = this.columnState.map(item => item.id === column.id ? Object.assign(Object.assign({}, item), { hidden: !item.hidden }) : item);
+            this.commitLayout();
+        };
+        this.rowDragStart = (event) => {
+            const row = this.rowFrom(event);
+            if (!row || row.group || row.disabled)
+                return;
+            this.dragRowIndex = this.bodyRows().indexOf(row);
+            if (this.dragRowIndex < 0)
+                return;
+            row.classList.add('is-dragging');
+            if (event.dataTransfer)
+                event.dataTransfer.effectAllowed = 'move';
+        };
+        this.rowDragOver = (event) => {
+            if (this.dragRowIndex < 0)
+                return;
+            const row = this.rowFrom(event);
+            if (!row || row.group)
+                return;
+            const index = this.bodyRows().indexOf(row);
+            if (index < 0 || index === this.dragRowIndex)
+                return;
+            event.preventDefault();
+            if (index === this.dropRowIndex)
+                return;
+            this.dropRowIndex = index;
+            // The line marks the edge the row will land against, so its side follows the drag direction.
+            this.bodyRows().forEach((item, i) => {
+                item.classList.toggle('drop-above', i === index && index < this.dragRowIndex);
+                item.classList.toggle('drop-below', i === index && index > this.dragRowIndex);
+            });
+        };
+        this.rowDrop = (event) => {
+            if (this.dragRowIndex < 0)
+                return;
+            event.preventDefault();
+            const to = this.dropRowIndex;
+            const from = this.dragRowIndex;
+            this.rowDragEnd();
+            if (to < 0 || from === to)
+                return;
+            this.rowOrderChange.emit({ from, to });
+        };
+        this.rowDragEnd = () => {
+            this.bodyRows().forEach(row => row.classList.remove('is-dragging', 'drop-above', 'drop-below'));
+            this.dragRowIndex = -1;
+            this.dropRowIndex = -1;
+        };
+        /** One listener for the whole body instead of a child event per row. */
+        this.bodyChange = (event) => {
+            var _a;
+            const path = event.composedPath();
+            const row = path.find(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === XV_TABLE_ROW_TAG; });
+            if (!row || row.disabled)
+                return;
+            // A checkbox the consumer put in a cell is its own; only the row's own control selects a row.
+            const control = path.find(node => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains('control_input'); });
+            if (!control || !((_a = row.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(control)))
+                return;
+            event.stopPropagation();
+            if (row.hasAttribute('header'))
+                return this.toggleSelectAll();
+            this.toggleRowSelection(row.value);
+        };
+        this.gridClick = (event) => {
+            const path = event.composedPath();
+            if (path.some(node => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains('resize'); }))
+                return;
+            const header = this.headerCellFrom(event);
+            if (header)
+                return this.toggleSort(header.column);
+            this.bodyClick(event);
+        };
+        this.bodyClick = (event) => {
+            const path = event.composedPath();
+            const row = path.find(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === XV_TABLE_ROW_TAG; });
+            if (!row || row.disabled)
+                return;
+            if (path.some(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.getAttribute) === null || _a === void 0 ? void 0 : _a.call(node, 'part')) === 'expand-button'; })) {
+                this.toggleExpanded(row.value);
+                return;
+            }
+            if (!this.rowClickable)
+                return;
+            // event.target is retargeted to the row at this boundary, so the path is the only honest check.
+            if (path.some(node => { var _a; return node !== row && ((_a = node === null || node === void 0 ? void 0 : node.matches) === null || _a === void 0 ? void 0 : _a.call(node, INTERACTIVE)); }))
+                return;
+            this.rowClick.emit({ value: row.value, index: this.renderedRows().indexOf(row) });
+        };
+        this.paginationChanged = (event) => {
+            event.stopPropagation();
+            this.page = event.detail.page || this.page;
+            this.pageSize = event.detail.itemsPerPage || this.pageSize;
+            this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
+        };
+    }
+    componentWillLoad() {
+        this.declared = parseProp(this.columns, []);
+        this.rowData = parseProp(this.rows, []);
+        this.columnState = this.declared.map(column => (Object.assign({}, column)));
+        this.sortState = parseSortBy(this.sortBy);
+        this.selectedValues = parseProp(this.selected, []);
+        this.expandedValues = parseProp(this.expanded, []);
+        this.slottedRowCount = this.slottedRows().length;
+        if (this.storageKey || this.layout)
+            this.restoreLayout();
+    }
+    componentDidLoad() {
+        // Bound imperatively: a custom event has no typed JSX handler on a plain element.
+        this.el.addEventListener(CHECKBOX_EVENT, this.bodyChange);
+        // Absent in mock-doc and in hydrate builds; componentDidRender still keeps the rows in sync.
+        if (typeof MutationObserver !== 'undefined') {
+            this.rowObserver = new MutationObserver(records => {
+                // A framework re-rendering its own markup inside a cell must not trigger a full resync.
+                if (!records.some(record => this.touchesStructure(record)))
+                    return;
+                this.syncStructure();
+                this.syncRows();
+            });
+            this.rowObserver.observe(this.el, {
+                childList: true,
+                subtree: true,
+                // A framework can reflect these after the table has already read the header once.
+                attributes: true,
+                attributeFilter: ['column-id', 'width', 'sortable', 'hideable', 'parent'],
+            });
+        }
+        // Fires after layout, so reading the two widths costs no extra reflow.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.sizeObserver = new ResizeObserver(() => this.measureOverflow());
+            if (this.scrollEl)
+                this.sizeObserver.observe(this.scrollEl);
+            if (this.gridEl)
+                this.sizeObserver.observe(this.gridEl);
+        }
+        this.syncStructure();
+        this.syncRows();
+    }
+    componentDidRender() {
+        this.syncRows();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.el.removeEventListener(CHECKBOX_EVENT, this.bodyChange);
+        (_a = this.rowObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.rowObserver = undefined;
+        (_b = this.sizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.sizeObserver = undefined;
+    }
+    columnsChanged() {
+        this.declared = parseProp(this.columns, []);
+        this.restoreLayout();
     }
-    handleCheckedChange({ detail }) {
-        if (detail.header || detail.expandable)
+    layoutInputChanged() {
+        this.restoreLayout();
+    }
+    sortByChanged() {
+        this.sortState = parseSortBy(this.sortBy);
+    }
+    selectedChanged() {
+        this.selectedValues = parseProp(this.selected, []);
+    }
+    expandedChanged() {
+        this.expandedValues = parseProp(this.expanded, []);
+    }
+    rowsChanged() {
+        this.rowData = parseProp(this.rows, []);
+    }
+    /** Selects every selectable row. */
+    async selectAll() {
+        this.setSelection(this.rowValues());
+    }
+    /** Clears the selection. */
+    async clearSelection() {
+        this.setSelection([]);
+    }
+    /** Drops the stored layout and returns to the declared columns. */
+    async resetLayout() {
+        this.columnState = this.declared.map(column => (Object.assign({}, column)));
+        await deleteLayout(this.storageOwner, this.storageKey);
+        this.layoutChange.emit(diffLayout(this.columnState, this.declared));
+    }
+    /** The layout as it would be stored: only the deviations from the declared columns. */
+    async getLayout() {
+        return diffLayout(this.columnState, this.declared);
+    }
+    async restoreLayout() {
+        const token = ++this.layoutToken;
+        const controlled = parseProp(this.layout, null);
+        if (controlled) {
+            this.columnState = applyLayout(this.declared, controlled);
             return;
-        if (detail.checked) {
-            this.selected.set(detail.name, detail);
         }
-        else {
-            this.selected.delete(detail.name);
+        if (!this.storageKey) {
+            this.columnState = this.declared.map(column => (Object.assign({}, column)));
+            return;
         }
-        this.selectedCount = this.selected.size;
+        // Painting declared widths and correcting them afterwards is visible, so the body waits.
+        this.layoutPending = true;
+        const stored = await readLayout(this.storageOwner, this.storageKey);
+        if (token !== this.layoutToken)
+            return;
+        this.columnState = applyLayout(this.declared, stored);
+        this.layoutPending = false;
+    }
+    commitLayout() {
+        const next = diffLayout(this.columnState, this.declared);
+        void writeLayout(this.storageOwner, this.storageKey, next);
+        this.layoutChange.emit(next);
+    }
+    get localeTag() {
+        var _a;
+        return this.locale || ((_a = this.el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang')) || 'de';
+    }
+    get visible() {
+        return visibleColumns(this.columnState);
+    }
+    get hasSelection() {
+        return this.selection !== 'none';
+    }
+    get hasExpand() {
+        return this.expandMode !== 'none';
+    }
+    get template() {
+        if (this.columnState.length) {
+            return buildColumnTemplate(this.columnState, this.leadingTracks, this.trailingTracks);
+        }
+        // No columns declared: a plain table takes its structure from the markup itself.
+        return [...this.leadingTracks.map(w => `${w}px`), ...this.derivedTracks, ...this.trailingTracks.map(w => `${w}px`)].join(' ');
+    }
+    /** Grip, then the expand toggle, then selection — one track each, in render order. */
+    get leadingTracks() {
+        return [
+            ...(this.rowReorderable ? [XV_TABLE_CONTROL_WIDTH] : []),
+            ...(this.hasExpand ? [XV_TABLE_CONTROL_WIDTH] : []),
+            ...(this.hasSelection ? [XV_TABLE_CONTROL_WIDTH] : []),
+        ];
+    }
+    get trailingTracks() {
+        return [];
     }
-    setColsSizeTemplate() {
+    get dataRows() {
+        const all = this.rowData;
+        const sorted = this.sortMode === 'client' && this.sortState
+            ? sortRows(all, this.columnBySortName(this.sortState.name), this.sortState.direction, this.localeTag)
+            : all;
+        return this.paginationMode === 'client' ? pageSlice(sorted, this.page, this.pageSize) : sorted;
+    }
+    get rowTotal() {
+        if (this.paginationMode === 'server')
+            return this.total;
+        const slotted = this.topRows(this.slottedRows()).length;
+        return slotted || this.rowData.length;
+    }
+    // Nothing to show is not the same as something to say: a consumer that draws its own empty state
+    // next to the table would otherwise get an empty frame above it.
+    get isEmpty() {
+        return !this.loading && !this.rowTotal && (!!this.emptyLabel || this.hasSlottedEmpty);
+    }
+    columnBySortName(name) {
+        return this.columnState.find(column => sortName(column) === name) || null;
+    }
+    touchesStructure(record) {
+        // The filter already narrows attributes to the ones that shape a column.
+        if (record.type === 'attributes')
+            return true;
+        const structural = (node) => {
+            var _a;
+            const tag = (_a = node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            // Anything that fills a slot shapes the table; markup inside a cell does not.
+            return tag === XV_TABLE_ROW_TAG || tag === XV_TABLE_CELL_TAG || !!node.slot;
+        };
+        return (Array.from(record.addedNodes).some(structural) || Array.from(record.removedNodes).some(structural));
+    }
+    isBodyRow(row) {
+        return !row.hasAttribute('header') && row.getAttribute('slot') !== 'footer';
+    }
+    /** Body rows only — these are the ones selection and expansion count. */
+    slottedRows() {
+        return this.slottedRowsAll().filter(row => this.isBodyRow(row));
+    }
+    /** A page is counted in top-level rows: a group and its children travel together. */
+    topRows(rows) {
+        return rows.filter(row => this.isBodyRow(row) && !this.parentOf(row));
+    }
+    /** Every slotted row, footer included: they all need the column tracks lined up. */
+    slottedRowsAll() {
+        return Array.from(this.el.children).filter(child => child.tagName.toLowerCase() === XV_TABLE_ROW_TAG);
+    }
+    /** Every row on screen, whichever mode produced it. */
+    renderedRows() {
         var _a;
-        if (!this.colsSize || !((_a = this.colsSize) === null || _a === void 0 ? void 0 : _a.length))
+        const slotted = this.slottedRows();
+        if (slotted.length)
+            return slotted;
+        return Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${XV_TABLE_ROW_TAG}:not([header])`)) || []);
+    }
+    rowValues() {
+        const slotted = this.slottedRows();
+        if (slotted.length) {
+            const parents = this.parentValues(slotted);
+            return slotted
+                .filter(row => !this.isDisabled(row))
+                .map(row => row.value)
+                .filter(value => !parents.has(String(value)));
+        }
+        return this.dataRows.map(row => row === null || row === void 0 ? void 0 : row[this.rowKey]);
+    }
+    /** A disabled row is not selectable, so it stays out of every selection set. */
+    isDisabled(row) {
+        return !!row.disabled || row.hasAttribute('disabled');
+    }
+    /** `parent` may arrive as an attribute or as a property, depending on the consumer. */
+    parentOf(row) {
+        return String(row.parent || row.getAttribute('parent') || '');
+    }
+    parentValues(rows) {
+        return new Set(rows.map(row => this.parentOf(row)).filter(Boolean));
+    }
+    childValuesOf(value) {
+        return this.buildTree(this.slottedRows()).get(String(value)) || [];
+    }
+    /** One walk of the rows answers every parent/child question asked during a sync. */
+    buildTree(rows) {
+        const children = new Map();
+        rows.forEach(row => {
+            const parent = this.parentOf(row);
+            if (!parent)
+                return;
+            const values = children.get(parent) || [];
+            if (!this.isDisabled(row))
+                values.push(row.value);
+            children.set(parent, values);
+        });
+        return children;
+    }
+    /**
+     * Child rows declare their parent by value. They stay siblings in the grid — that is what keeps
+     * them in the table's columns, rather than a nested table inside a panel.
+     */
+    syncRowTree(rows, children, expanded) {
+        const page = this.pageWindow(rows);
+        const groups = new Map();
+        rows.forEach(row => {
+            var _a;
+            const value = String((_a = row.value) !== null && _a !== void 0 ? _a : '');
+            if (value && !this.parentOf(row))
+                groups.set(value, row);
+        });
+        rows.forEach(row => {
+            var _a;
+            const props = row;
+            const parent = this.parentOf(row);
+            const value = String((_a = props.value) !== null && _a !== void 0 ? _a : '');
+            if (parent) {
+                const group = groups.get(parent);
+                // A child follows its group: it shows when the group is open and on the current page.
+                const show = expanded.has(parent) && (!page || (!!group && page.has(group)));
+                this.showRow(row, show);
+                props.expandable = false;
+                return;
+            }
+            const hasChildren = children.has(value);
+            const panel = !!row.querySelector('[slot="expand"]');
+            // a row is expandable when it has children, or content for the panel
+            props.expandable = hasChildren || panel;
+            props.hasPanel = panel;
+            row.classList.toggle('has-children', hasChildren);
+            this.showRow(row, !page || !this.isBodyRow(row) || page.has(row));
+        });
+    }
+    /** Only rows this table hid are shown again, so a consumer's own `hidden` survives a sync. */
+    showRow(row, show) {
+        if (!show) {
+            this.collapsed.add(row);
+            row.hidden = true;
             return;
-        this.el.style.setProperty('--xv-table-cols-template', this.colsSize
-            .map((v) => {
-            if (!v)
-                return 'minmax(0, 1fr)';
-            if (v === 'auto')
-                return 'minmax(0, auto)';
-            return `calc(${v} - ${50 / this.colsSize.length}px)`;
-        })
-            .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
+        }
+        if (this.collapsed.delete(row))
+            row.hidden = false;
     }
-    render() {
-        return (h(Host, { key: '1f954a0f71091fec58ed541ab9b71e07e756acf2', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'cc4af9285051a8ce0eda8df5d306b9834815513c', name: "title" }, !!this.el.title && h("h2", { key: 'd74ca7c913d6b5239acce4a6e154dae57a325dd4', class: "xv-table-title" }, this.el.title)), h("slot", { key: '00df66a0aae78ac291ed818f123fa508e7437b91', name: "toolbar" }), h("div", { key: 'b5d81c782aa533dc591ec77ffe4fc71cffeafc86', class: "xv-table" }, h("div", { key: 'efa26ad85d880de121d53ecae616f0b0468b8c74', class: "batch-actions" }, h(Fragment, { key: '4a808f4de6683dd524057c6199c2e80b11860d8d' }, h("div", { key: 'ae5cce54e37780f32724e7ff9ef2549e5020b7f7', class: "batch-actions_content" }, h("slot", { key: 'f5b19fc73ca2e7cb1af08fcf23d42c817d531870', name: "batch" })), h("p", { key: '2f445105146d1d2ebb080f76c5bb81848e3e2a43', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: '6f41e51583e6d2a5dc076999fee3e573b062ad1f', class: "xv-table_wrapper" }, h("slot", { key: 'acccd9efedf38d59bde44f2f9d6ac2aec0ffa948' }), h("slot", { key: 'db6b9a957e4bc4e670f5c082c999c1931e36b6c1', name: "footer" })), !!this.loading && (h("div", { key: '3096c66919118c66992dd13e7b868c588876974c', class: "xv-table_loading" }, h("xv-loader-v2", { key: 'f469390775597fcfb9787749a915098eb0567d64', size: SIZE_VAR.LG }))))));
+    /** The rows of the current page, or null while the table is not the one paging. */
+    pageWindow(rows) {
+        if (this.paginationMode !== 'client')
+            return null;
+        const top = this.topRows(rows);
+        if (!top.length)
+            return null;
+        const size = this.pageSize || 10;
+        const start = (clampPage(this.page, totalPages(top.length, size)) - 1) * size;
+        return new Set(top.slice(start, start + size));
     }
-    componentWillLoad() {
-        this.setColsSizeTemplate();
+    /** Cells are written in declared order; hiding and reordering only move them visually. */
+    syncCells(row, order) {
+        const cells = Array.from(row.children).filter(cell => cell.getAttribute('slot') !== 'expand');
+        cells.forEach((cell, index) => {
+            var _a;
+            const column = this.declared[index];
+            if (!column)
+                return;
+            const current = this.columnState.find(item => item.id === column.id);
+            const props = cell;
+            props.columnId = column.id;
+            if (column.align)
+                props.align = column.align;
+            if (column.overflow)
+                props.overflow = column.overflow;
+            if (column.clampLines)
+                props.clampLines = column.clampLines;
+            cell.style.order = String((_a = order.get(column.id)) !== null && _a !== void 0 ? _a : index);
+            cell.hidden = !!(current === null || current === void 0 ? void 0 : current.hidden);
+        });
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "colsSize": [{
-                "setColsSizeTemplate": 0
-            }]
-    }; }
-};
-XvTable.style = xvTableCss();
-
-const xvTableCellCss = () => `@charset "UTF-8";:host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:var(--xv-table-padding-y) var(--xv-table-padding-x);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:0.16px;transition:0.25s ease-in-out background-color}:host([multiline]){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:initial;padding-bottom:1px;padding-top:0;line-height:1.2}:host([align=left]){text-align:left}:host([align=right]){text-align:right}:host([align=center]){text-align:center}:host([sort]){position:relative;cursor:pointer;user-select:none}:host([sort]):before,:host([sort]):after{font-size:12px;line-height:10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;right:8px;pointer-events:none;transition:350ms ease-in-out opacity;opacity:0}:host([sort]):before{content:"▲";top:50%;transform:translateY(calc(-50% - 5px))}:host([sort])::after{content:"▼";top:50%;transform:translateY(calc(-50% + 5px))}:host([sort]:hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host([sort]:hover)::before,:host([sort]:hover)::after{opacity:1}:host([sort=asc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=asc])::before{opacity:1}:host([sort=asc])::after{display:none}:host([sort=desc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=desc])::before{display:none}:host([sort=desc])::after{opacity:1}`;
-
-const XvTableCell = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sortChange = createEvent(this, "sortChange", 7);
+    /** Structure writes @State, so it runs outside the render cycle: on load and on childList. */
+    syncStructure() {
+        const rows = this.slottedRowsAll();
+        this.slottedRowCount = this.slottedRows().length;
+        // The heading block is not rendered at all unless something fills it, and a slotted title is
+        // just as much a title as the prop.
+        const heading = Array.from(this.el.children).some(child => child.slot === 'label' || child.slot === 'description');
+        if (this.hasSlottedHeading !== heading)
+            this.hasSlottedHeading = heading;
+        const empty = Array.from(this.el.children).some(child => child.slot === 'empty');
+        if (this.hasSlottedEmpty !== empty)
+            this.hasSlottedEmpty = empty;
+        this.seedExpanded(rows);
+        this.syncDerivedTracks(rows);
     }
-    handleSort() {
-        if (this.sort === undefined)
+    /**
+     * A row may declare itself open in markup. Read once, before the table starts writing the
+     * attribute itself — after that there is no telling a declared value from a toggled one.
+     */
+    seedExpanded(rows) {
+        // Rows that arrive from an HTTP call are not there on the first pass, so seeding waits for them.
+        if (this.seededExpanded || !rows.length)
             return;
-        let sort = this.sort;
-        if (this.sort === '')
-            sort = XV_SORT_DIR.NONE;
-        this.sort = sort === XV_SORT_DIR.NONE ?
-            XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?
-            XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;
-        forEach(this.el.parentElement.children, (cell) => {
-            if (cell !== this.el && cell.hasAttribute('sort')) {
-                cell.setAttribute('sort', 'none');
+        this.seededExpanded = true;
+        const open = rows
+            .filter(row => row.hasAttribute('expanded'))
+            .map(row => row.value)
+            .filter(value => value !== '' && value !== undefined);
+        const merged = [...this.expandedValues, ...open.filter(v => !this.expandedValues.includes(v))];
+        if (merged.length !== this.expandedValues.length)
+            this.expandedValues = merged;
+    }
+    /** Pushing props onto children is safe during render; nothing here touches @State. */
+    syncRows() {
+        const rows = this.slottedRowsAll();
+        const tree = this.buildTree(rows);
+        // A value may reach the table as a number and come back from an attribute as a string.
+        const expanded = new Set(this.expandedValues.map(String));
+        const selected = new Set(this.selectedValues.map(String));
+        const order = new Map(this.columnState.map((column, index) => [column.id, index]));
+        this.syncRowTree(rows, tree, expanded);
+        this.syncHeaderCells(rows.find(row => row.hasAttribute('header')));
+        rows.forEach(row => {
+            const value = row.value;
+            const props = row;
+            props.selectionMode = this.selection;
+            props.expandMode = this.expandMode;
+            props.size = this.size;
+            props.hover = this.hover;
+            props.rowReorderable = this.rowReorderable;
+            props.rowReorderHandle = this.rowReorderHandle;
+            props.expandLabel = this.expandLabel;
+            props.reorderLabel = this.reorderLabel;
+            if (row.hasAttribute('header')) {
+                // A slotted header carries select-all too, so it reflects the whole table.
+                const all = this.rowValues();
+                const picked = this.selectedValues.length;
+                props.selected = !!picked && picked === all.length;
+                props.partial = !!picked && picked < all.length;
+                props.selectable = all.length > 0;
+                this.syncCells(row, order);
+                return;
             }
+            const children = tree.get(String(value)) || [];
+            if (children.length) {
+                const picked = children.filter(child => selected.has(String(child)));
+                props.selected = picked.length === children.length;
+                props.partial = !!picked.length && picked.length < children.length;
+            }
+            else {
+                props.selected = selected.has(String(value));
+                props.partial = false;
+            }
+            props.expanded = expanded.has(String(value));
+            this.syncCells(row, order);
         });
-        if (!this.name)
-            this.name = uidGenerator();
-        this.sortChange.emit({ name: this.name, value: this.sort });
     }
-    ;
+    /** Sorting is offered only when a mode asks for it, so `none` and `server` cannot look alike. */
+    isSortable(column) {
+        return !!column.sortable && this.sortMode !== 'none';
+    }
+    /**
+     * A slotted header is the consumer's markup, so the table pushes the column state onto its cells
+     * rather than rendering a second header of its own.
+     */
+    syncHeaderCells(header) {
+        if (!header)
+            return;
+        const cells = Array.from(header.children).filter(child => child.tagName.toLowerCase() === XV_TABLE_CELL_TAG);
+        cells.forEach((cell, index) => {
+            var _a;
+            const declared = cell.columnId || cell.getAttribute('column-id');
+            const column = declared
+                ? this.columnState.find(item => item.id === declared)
+                : this.visible[index];
+            const props = cell;
+            props.header = true;
+            props.reorderLabel = this.reorderLabel;
+            if (!column) {
+                props.resizable = false;
+                props.reorderable = false;
+                return;
+            }
+            const sortable = this.isSortable(column);
+            props.columnId = column.id;
+            // A markup header declares `sortable` itself. Writing the table's own idea of it back would
+            // overwrite what the consumer just bound, and the table would then read its own answer.
+            if (!this.fromMarkup)
+                props.sortable = sortable;
+            props.sortDirection =
+                sortable && ((_a = this.sortState) === null || _a === void 0 ? void 0 : _a.name) === sortName(column) ? this.sortState.direction : '';
+            props.resizable = columnAllows(column, this.resizable, 'resizable');
+            props.reorderable = columnAllows(column, this.reorderable, 'reorderable');
+            if (column.headerAlign)
+                props.align = column.headerAlign;
+            cell.draggable = props.reorderable;
+        });
+    }
+    /** Reads the column shape out of the markup when no `columns` prop was given. */
+    syncDerivedTracks(rows) {
+        const header = rows.find(row => row.hasAttribute('header')) || null;
+        if (this.hasSlottedHeader !== !!header)
+            this.hasSlottedHeader = !!header;
+        // Re-read the header while it is the declaration: a framework sets `sortable`, `hideable` or a
+        // width as properties, and those can land after the first read. `columns` wins when it is given.
+        if (header && (this.fromMarkup || !this.declared.length))
+            this.deriveColumns(header);
+        if (this.columnState.length)
+            return;
+        const source = header || rows[0];
+        if (!source)
+            return;
+        const cells = Array.from(source.children).filter(cell => cell.getAttribute('slot') !== 'expand');
+        const widths = cells.map(cell => String(cell.width || cell.getAttribute('width') || ''));
+        // Every width fixed leaves nothing to absorb the slack, so they share it by weight.
+        const share = widths.length > 0 && widths.every(width => /^[0-9.]+$/.test(width));
+        const tracks = widths.map(width => {
+            if (!width)
+                return `minmax(${XV_TABLE_MIN_COLUMN_WIDTH}px,1fr)`;
+            if (!/^[0-9.]+$/.test(width))
+                return width;
+            return share ? `minmax(${width}px,${width}fr)` : `${width}px`;
+        });
+        if (tracks.join(' ') !== this.derivedTracks.join(' '))
+            this.derivedTracks = tracks;
+    }
+    /**
+     * With no `columns` prop the header cells are the declaration: their attributes carry the id,
+     * width and switches, so a markup-only table still resizes, reorders and remembers its layout.
+     */
+    deriveColumns(header) {
+        const cells = Array.from(header.children).filter(child => child.tagName.toLowerCase() === XV_TABLE_CELL_TAG);
+        if (!cells.length)
+            return;
+        const taken = new Set();
+        const derived = cells.map((cell, index) => {
+            var _a;
+            // The property wins over the attribute: a framework binds properties, and it may have done so
+            // before the cell upgraded. The attribute is the fallback for plain markup.
+            const props = cell;
+            const flag = (name, value) => (value !== null && value !== void 0 ? value : cell.hasAttribute(name));
+            // `240` and `240px` are both pixels; `25%`, `auto` or `12rem` land in the track as written.
+            const width = String(props.width || cell.getAttribute('width') || '');
+            const pixels = /^([0-9.]+)(px)?$/.exec(width);
+            // Two columns may honestly carry the same name — a details and a delete cell both keyed by
+            // `id`. Ids address a column, so a repeat is made unique here rather than silently sharing
+            // a track with the column it collides with.
+            let id = props.columnId || cell.getAttribute('column-id') || `col-${index}`;
+            while (taken.has(id))
+                id = `${id}-${index}`;
+            taken.add(id);
+            return {
+                id,
+                label: ((_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
+                sortable: flag('sortable', props.sortable),
+                hideable: flag('hideable', props.hideable),
+                width: !width ? undefined : pixels ? Number(pixels[1]) : width,
+            };
+        });
+        // Compared on everything the header declares, not only the ids: a framework sets `sortable` as
+        // a property, and it may land after the table first read the markup. Ids alone would freeze
+        // that first reading and quietly drop the sort affordance the consumer asked for.
+        const signature = derived.map(c => `${c.id}|${c.sortable}|${c.hideable}|${c.width}`).join();
+        if (signature === this.declaredSignature)
+            return;
+        this.declaredSignature = signature;
+        this.fromMarkup = true;
+        this.declared = derived;
+        this.columnState = derived.map(column => (Object.assign({}, column)));
+        if (this.storageKey)
+            this.restoreLayout();
+    }
+    /** Every header cell on screen, whether the table rendered it or the consumer slotted it. */
+    headerCells() {
+        var _a;
+        const row = this.slottedRowsAll().find(item => item.hasAttribute('header')) ||
+            ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${XV_TABLE_ROW_TAG}[header]`));
+        if (!row)
+            return [];
+        return Array.from(row.children).filter(
+        // Hidden cells are left out: these are indexed against the visible columns.
+        child => child.tagName.toLowerCase() === XV_TABLE_CELL_TAG && !child.hidden);
+    }
+    /** A header cell knows its column by id, or failing that by its position in the row. */
+    columnOf(cell) {
+        const id = cell.columnId || cell.getAttribute('column-id');
+        if (id)
+            return this.columnState.find(column => column.id === id) || null;
+        const index = this.headerCells().indexOf(cell);
+        return this.visible[index] || null;
+    }
+    headerCellFrom(event) {
+        const path = event.composedPath();
+        const cell = path.find(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === XV_TABLE_CELL_TAG && node.hasAttribute('header'); });
+        if (!cell)
+            return null;
+        const column = this.columnOf(cell);
+        return column ? { cell, column } : null;
+    }
+    clearDragOver() {
+        this.dragOverId = '';
+        this.headerCells().forEach(item => item.classList.remove('drag-over'));
+    }
+    setSelection(values) {
+        this.selectedValues = values;
+        const all = !!values.length && values.length === this.rowValues().length;
+        this.selectedChange.emit({ values, all, partial: !!values.length && !all });
+    }
+    toggleRowSelection(value) {
+        const children = this.childValuesOf(value);
+        if (children.length) {
+            const picked = children.some(child => this.selectedValues.includes(child));
+            this.setSelection(picked
+                ? this.selectedValues.filter(item => !children.includes(item))
+                : [...this.selectedValues, ...children]);
+            return;
+        }
+        if (this.selection === 'single') {
+            this.setSelection(this.selectedValues.includes(value) ? [] : [value]);
+            return;
+        }
+        const next = this.selectedValues.includes(value)
+            ? this.selectedValues.filter(item => item !== value)
+            : [...this.selectedValues, value];
+        this.setSelection(next);
+    }
+    toggleExpanded(value) {
+        const open = this.expandedValues.includes(value);
+        const next = open
+            ? this.expandedValues.filter(item => item !== value)
+            : this.expandMode === 'single'
+                ? [value]
+                : [...this.expandedValues, value];
+        this.expandedValues = next;
+        this.expandedChange.emit({ values: next });
+    }
+    bodyRows() {
+        // A collapsed child is not on screen, so it must not take an index in `rowOrderChange`.
+        return this.renderedRows().filter(row => row.getAttribute('slot') !== 'footer' && !row.hidden);
+    }
+    rowFrom(event) {
+        if (!this.rowReorderable)
+            return null;
+        const path = event.composedPath();
+        return path.find(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === XV_TABLE_ROW_TAG; }) || null;
+    }
+    /** The same row and cell components the consumer would write by hand. */
+    renderHead() {
+        const values = this.rowValues();
+        const count = this.selectedValues.length;
+        return (h("xv-table-row", { header: true, part: "head", size: this.size, selectionMode: this.selection, expandMode: this.expandMode, expandable: this.expandMode !== 'none', rowReorderable: this.rowReorderable, rowReorderHandle: this.rowReorderHandle, selected: !!count && count === values.length, partial: !!count && count < values.length, selectable: values.length > 0 }, this.visible.map(column => {
+            var _a;
+            const sortable = this.isSortable(column);
+            const active = sortable && ((_a = this.sortState) === null || _a === void 0 ? void 0 : _a.name) === sortName(column);
+            return (h("xv-table-cell", { key: column.id, header: true, part: "header-cell", columnId: column.id, align: column.headerAlign || 'start', tooltip: column.headerTooltip || '', sortable: sortable, sortDirection: active ? this.sortState.direction : '', resizable: columnAllows(column, this.resizable, 'resizable'), reorderable: columnAllows(column, this.reorderable, 'reorderable'), reorderLabel: this.reorderLabel, ref: element => element && (element.draggable = columnAllows(column, this.reorderable, 'reorderable')) }, column.label));
+        })));
+    }
+    renderDataRow(row, index) {
+        const value = row === null || row === void 0 ? void 0 : row[this.rowKey];
+        return (h("xv-table-row", { key: value !== null && value !== void 0 ? value : index, value: value, size: this.size, hover: this.hover, selectionMode: this.selection, expandMode: this.expandMode, expandable: this.expandMode !== 'none', rowReorderable: this.rowReorderable, rowReorderHandle: this.rowReorderHandle, expandLabel: this.expandLabel, reorderLabel: this.reorderLabel, selected: this.selectedValues.includes(value), expanded: this.expandedValues.includes(value) }, this.visible.map(column => (h("xv-table-cell", { key: column.id, columnId: column.id, align: column.align || 'start', overflow: column.overflow || 'ellipsis', clampLines: column.clampLines || 2 }, formatCell(cellValue(row, column), column, this.localeTag))))));
+    }
+    renderSkeleton() {
+        return Array.from({ length: this.skeletonRows }).map((_, index) => (h("div", { class: "skeleton_row", key: `skeleton-${index}`, "aria-hidden": "true" }, this.visible.map(column => (h("div", { class: "skeleton_cell", key: column.id }, h("span", { class: "skeleton_bar" })))))));
+    }
+    renderColumnPicker() {
+        const hideable = hideableColumns(this.columnState);
+        if (!hideable.length)
+            return null;
+        const changed = isLayoutChanged(diffLayout(this.columnState, this.declared));
+        return (
+        // The picker sits at the right edge, so it opens inward or a container with overflow clips it.
+        h("xv-overflow-menu-v2", { class: "picker", part: "column-picker", position: "right", tooltip: this.columnsLabel }, h("span", { slot: "trigger", class: "picker_trigger" }, h("svg", { viewBox: "0 0 640 512", width: "16", height: "16", role: "img", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M448 80l0 352 128 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L448 80zm-48 0L240 80l0 352 160 0 0-352zM192 432l0-352L64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l128 0zM0 96C0 60.7 28.7 32 64 32l512 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96z" })), changed && h("span", { class: "picker_marker" })), h("div", { class: "picker_list" }, hideable.map(column => (h("xv-checkbox-v2", { key: column.id, class: "picker_item", checked: !column.hidden, label: column.label || column.id, size: this.size, onEventChange: () => this.toggleColumn(column) }))), changed && (h("xv-button-v2", { variant: "tertiary", size: "sm", onClick: () => this.resetLayout() }, this.resetLabel)))));
+    }
     render() {
-        return (h(Host, { key: 'f1ae644f52064308240bda543eb23999a9a6eb8a' }, h("slot", { key: '7ce7b7c7f36cdaa8cf5e31ec5ed028af1c0db625' })));
+        const hasHeading = !!this.label || !!this.description || this.hasSlottedHeading;
+        const count = this.selectedValues.length;
+        const composed = !!this.slottedRowCount;
+        const pages = totalPages(this.rowTotal, this.pageSize);
+        return (h(Host, { key: 'c2f1eeb31477c009112ea67964859a06f32fb0be', class: { 'is-dragging': this.columnDragging } }, hasHeading && (h("div", { key: 'b16d5ed6a0ec41e1e93938c136720a9b3f076718', class: "heading", part: "heading" }, h("slot", { key: 'b5597ee8f3e1b43c8a003bf51f0dd1fdea307584', name: "label" }, this.label && h("h3", { key: '7b5c70866bbea7f38bd9ed3f12f5f79abdec9b5b', class: "heading_title", part: "title" }, this.label)), h("slot", { key: 'e3fc65553d7d8afa5617116ef03c0e71c4083092', name: "description" }, this.description && h("p", { key: 'f3545d3da1697eadb58b081db1f63dbc758446a2', class: "heading_description", part: "description" }, this.description)))), h("div", { key: 'b2363cd4706ef813a7986a46e634c7a17c2887e7', class: "bar", part: "bar" }, h("div", { key: 'b4ed99838d302c23e539d3f0aed986d6597cfa97', class: "bar_toolbar", part: "toolbar" }, h("slot", { key: '7dfe5fe111ac94245b57d9b16db98e86df96e14d', name: "toolbar" }), this.renderColumnPicker()), !!count && (h("div", { key: '00e6baa9e59099c688f398f98552e96accfcfdbd', class: "bar_batch", part: "batch" }, h("slot", { key: '719ccca8dc2d5728ceec0fa5953ec45148fbfca7', name: "batch" }), !!this.selectedLabel && (h("span", { key: 'ae71c3c543d5faef29145a32c0cee9f2d9c5441e', class: "bar_count" }, this.selectedLabel.replace('{count}', String(count))))))), h("div", { key: '0739869a681a870c611b50b8cec858bf8c60b2fb', class: { scroll: true, 'scroll--overflowing': this.overflowing }, part: "scroll", ref: element => (this.scrollEl = element) }, h("div", { key: '978390fa1eed594533ac9911eae893cdbcb48f01', class: "grid", part: "grid", role: "table", onPointerDown: this.headPointerDown, onDblClick: this.headDblClick, onKeyDown: this.headKeyDown, onDragStart: this.headDragStart, onDragOver: this.headDragOver, onDrop: this.headDrop, onDragEnd: this.dragEnd, ref: element => (this.gridEl = element), style: {
+                '--xv-table-columns': this.template,
+                // Handed to CSS rather than applied here: a wide table squeezes like a real one, and
+                // only a narrow viewport turns this into the width it scrolls at.
+                '--xv-table-min-width': `${tableMinWidth(this.columnState, this.minWidth, [...this.leadingTracks, ...this.trailingTracks].reduce((a, b) => a + b, 0))}px`,
+            }, onClick: this.gridClick }, !this.hasSlottedHeader && this.renderHead(), h("div", { key: '22295be916a60272a46fe01cf3399b345e274948', class: "body", part: "body", role: "rowgroup", hidden: this.layoutPending, onDragStart: this.rowReorderable ? this.rowDragStart : undefined, onDragOver: this.rowReorderable ? this.rowDragOver : undefined, onDrop: this.rowReorderable ? this.rowDrop : undefined, onDragEnd: this.rowReorderable ? this.rowDragEnd : undefined }, this.loading && this.skeletonRows > 0
+            ? this.renderSkeleton()
+            : composed
+                ? null
+                : this.dataRows.map((row, index) => this.renderDataRow(row, index)), h("slot", { key: '05441531d73c716d3846794bea921eafa2b61533' })), h("slot", { key: 'e9f573271b2a6b19f212b598cd4471ee0070e340', name: "footer" }))), this.isEmpty && (h("div", { key: '4ceb6586322442b2fe48c3191641ce7857ef8f4b', class: "empty", part: "empty" }, h("slot", { key: '6213459f9c9657174edbb8b41daa48672b8f0a51', name: "empty" }, this.emptyLabel))), this.loading && !this.skeletonRows && (h("div", { key: 'edd362ca185dcd335b76b6c1c1369b886a97864c', class: "loading", part: "loading" }, h("xv-loader-v2", { key: '8d73899654faa6bb8b403f1aad2a426ad595bfa9', size: SIZE_VAR.LG }))), this.paginationMode !== 'none' && !!this.rowTotal && (h("xv-pagination", { key: '64f7884cf9dd446c5cad790f5bca97fbe33522b9', class: "pagination", part: "pagination", size: this.size, variant: "full", block: true, total: pages, page: this.page, totalItems: this.rowTotal, itemsPerPage: this.pageSize, itemsPerPageOptions: parsePageSizes(this.pageSizeOptions), responsiveVariant: { compact: [0, 768] }, onPageChange: this.paginationChanged }))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "columns": [{
+                "columnsChanged": 0
+            }],
+        "layout": [{
+                "layoutInputChanged": 0
+            }],
+        "storageKey": [{
+                "layoutInputChanged": 0
+            }],
+        "storageOwner": [{
+                "layoutInputChanged": 0
+            }],
+        "sortBy": [{
+                "sortByChanged": 0
+            }],
+        "selected": [{
+                "selectedChanged": 0
+            }],
+        "expanded": [{
+                "expandedChanged": 0
+            }],
+        "rows": [{
+                "rowsChanged": 0
+            }]
+    }; }
 };
-XvTableCell.style = xvTableCellCss();
-
-const XV_EXPANDABLE_KEY = 'expandable';
-const XV_TABLE_TAG = 'xv-table-v2';
+XvTable.style = xvTableCss();
 
-const xvTableExpandCss = () => `:host{display:block;position:relative;transition:0.25s ease-in-out background-color}:host .expand-btn{z-index:9;position:absolute;left:max(10px, var(--xv-table-padding-x));top:max(2px, var(--xv-table-padding-y) + 2px);background-color:transparent;cursor:pointer;outline:none;margin:0;padding:0;box-sizing:border-box;display:block;width:8.5px;height:8.5px;border-top:none;border-left:none;border-right:2px solid var(--icon-primary, #333);border-bottom:2px solid var(--icon-primary, #333);transform:rotate(45deg);transform-origin:center center;transition:0.2s ease-in-out transform}:host .expand-btn:disabled{cursor:not-allowed;opacity:0.5}:host .expand-btn.open{transform:rotate(-135deg)}:host .expandableContent{overflow:hidden;margin:0;padding:0;max-height:0;transition:250ms ease max-height}:host .expandableContent.open{max-height:600px}:host ::slotted([slot=expandable]){display:grid;align-items:center}:host ::slotted(xv-table-v2-row),:host ::slotted([slot=expandable]){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host ::slotted([disabled]){pointer-events:none;opacity:0.4;cursor:not-allowed;user-select:none}`;
+const xvTableCellCss = () => `:host{--xv-table-cell-padding-x:var(--xv-table-padding-x, var(--spacing-05));--xv-table-cell-padding-y:var(--xv-table-padding-y, var(--spacing-03));--xv-table-cell-clamp:2;display:flex;align-items:center;box-sizing:border-box;min-width:0;padding-block:var(--xv-table-cell-padding-y);padding-inline:min(var(--xv-table-cell-padding-x), 25%);color:var(--text-primary);font-family:var(--ff-body);font-size:var(--fz-md);line-height:18px;letter-spacing:0.16px}:host([align=center]){justify-content:center;text-align:center}:host([align=end]){justify-content:flex-end;text-align:right}.content{min-width:0;max-width:100%}[part=tooltip]{min-width:0;max-width:100%}:host([overflow=ellipsis]) .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([overflow=ellipsis]) .content ::slotted(*){min-width:0;max-width:100%}:host([overflow=clamp]) .content{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--xv-table-cell-clamp);overflow:hidden}:host([overflow=clamp]) .content ::slotted(*){display:inline}:host([overflow=wrap]) .content{overflow:visible;white-space:normal}:host([header]){position:relative;gap:var(--spacing-02);font-weight:600}:host([header]) .content{flex:1}:host([header][align=end]) .sort{order:-1}:host([header][sortable]){cursor:pointer}:host([header][sortable]):hover{background:var(--layer-accent-hover-01)}:host([header][sortable]):focus-visible{outline:2px solid var(--focus);outline-offset:0}:host([header][sortable]):focus-visible{outline-offset:-2px}:host([header][sort-direction=asc]),:host([header][sort-direction=desc]){background:var(--layer-accent-active-01)}.sort{flex:none;width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;opacity:0;transform:rotate(45deg) translate(-2px, -2px)}:host([header][sortable]:hover) .sort{opacity:0.5}:host([header][sort-direction=asc]) .sort,:host([header][sort-direction=desc]) .sort{opacity:1}:host([header][sort-direction=asc]) .sort{transform:rotate(-135deg) translate(-2px, -2px)}.grip{position:absolute;top:50%;left:4px;transform:translateY(-50%);width:8px;height:14px;opacity:0;cursor:grab;background-image:radial-gradient(currentColor 1px, transparent 1px);background-size:4px 4px}:host([header]:hover) .grip{opacity:0.5}:host(.drag-over){box-shadow:inset 2px 0 0 0 var(--interactive-01)}.resize{position:absolute;top:0;right:0;z-index:1;width:6px;height:100%;cursor:col-resize;touch-action:none}.resize:hover,.resize:active{background:var(--interactive-01)}:host([hidden]){display:none}`;
 
-const XvTableExpand = class {
+const XvTableCell = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.open = false;
-        this.disabled = false;
-        this.handleExpand = () => {
-            this.open = !this.open;
-        };
+        /** Column this cell belongs to. Identifies it for sorting, resizing and the stored layout. */
+        this.columnId = '';
+        /** Horizontal alignment of the content. */
+        this.align = 'start';
+        /** How content wider than the column behaves. */
+        this.overflow = 'ellipsis';
+        /** Lines kept before clamping, when `overflow` is `clamp`. */
+        this.clampLines = 2;
+        /** Tooltip shown on hover. Only a cell that sets it pays for the tooltip component. */
+        this.tooltip = '';
+        /** Column width. Read off the header row when the table has no `columns`. Any CSS length. */
+        this.width = '';
+        /** Renders the cell as a column header. Set by the table from the row it sits in. */
+        this.header = false;
+        /** Offers the sort affordance. A header cell only. */
+        this.sortable = false;
+        /** Direction currently sorted by; empty when this column is not the active one. */
+        this.sortDirection = '';
+        /** Lets the column picker hide this column. A header cell only. */
+        this.hideable = false;
+        /** Offers the resize handle. A header cell only. */
+        this.resizable = false;
+        /** Offers the drag grip. A header cell only. */
+        this.reorderable = false;
+        /** Accessible name of the drag grip. */
+        this.reorderLabel = 'Drag to reorder';
     }
-    render() {
-        return (h(Host, { key: '8fe9adf5fd39b640b89bddf303fcc4fb97f03cbd' }, h("button", { key: '1df684103a777e3a54ac94fa8f3c570d4ecbbe41', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: 'e092ff357605223aa974a8f5061c7a0667c3917f', name: XV_EXPANDABLE_KEY }), h("div", { key: 'e4313af9e98ac24f25c5fc9c8250aff052f7c19b', class: { expandableContent: true, open: this.open } }, h("slot", { key: 'f5cb16c98a69917b6679eb620b2bfc1856a48501' }))));
+    get ariaSort() {
+        if (!this.header || !this.sortable)
+            return null;
+        if (this.sortDirection === XV_SORT_DIR.ASC)
+            return 'ascending';
+        if (this.sortDirection === XV_SORT_DIR.DESC)
+            return 'descending';
+        return 'none';
     }
-    componentDidLoad() {
-        setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
+    render() {
+        const content = (h("div", { key: 'eefd1609b456cdcc9e802c27e524613b64a9ce39', class: "content", part: "content", style: this.overflow === 'clamp' ? { '--xv-table-cell-clamp': `${this.clampLines}` } : undefined }, h("slot", { key: 'a00460b7e2fbf775c7607af68b078a4fcff70c11' })));
+        return (h(Host, { key: '54976b9c9740d576bb4a81a15af65aa79a2f0888', role: this.header ? 'columnheader' : 'cell', part: "cell", "aria-sort": this.ariaSort, tabindex: this.header && this.sortable ? 0 : null }, this.header && this.reorderable && h("span", { key: 'f443393d1ea62a0c94bfa59b77c377bf5fc04a66', class: "grip", part: "grip", "aria-label": this.reorderLabel }), this.tooltip ? (
+        // Popper puts the panel on document.body, so the scroll container cannot clip it.
+        h("xv-tooltip-v2", { part: "tooltip", dashed: true, position: "top-start", message: this.tooltip }, content)) : (content), this.header && this.sortable && h("span", { key: 'c26fa895c0a9a17cbe6c33c68f9e14b05781554e', class: "sort", "aria-hidden": "true" }), this.header && this.resizable && h("span", { key: '37fa59799c363ed83f2dd0052b3203aa3bf01a6c', class: "resize", part: "resize", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
 };
-XvTableExpand.style = xvTableExpandCss();
+XvTableCell.style = xvTableCellCss();
 
-const xvTableRowCss = () => `:host{display:grid;grid-template-columns:var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));border-bottom:1px solid #E3E3E3;border-right:1px solid #E3E3E3;border-left:1px solid #E3E3E3;min-height:var(--xv-table-min-height);align-items:center;align-content:center;transition:0.25s ease-in-out background-color}:host .cell-control{min-height:20px;display:flex;align-items:center;justify-content:center}:host([variant]){grid-template-columns:minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)))}:host([hover]:not([header]):hover){background-color:var(--layer-hover-01, #E9E9E9)}:host([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host([checked]:hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host([header]){background-color:var(--layer-accent-01, #F7F7F7);box-shadow:0 0 0 1px #E3E3E3 inset;border-bottom:none}`;
+const xvTableRowCss = () => `:host{--xv-table-row-bg:var(--layer-02);--xv-table-row-height:var(--xv-table-height, 40px);--xv-table-row-disabled-opacity:0.5;grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:stretch;min-height:var(--xv-table-row-height);background:var(--xv-table-row-bg);box-shadow:inset 0 -1px 0 0 var(--border-subtle-00)}@supports not (grid-template-columns: subgrid){:host{display:contents}}:host([hover]:not([disabled]):hover){--xv-table-row-bg:var(--layer-hover-01)}:host([selected]){--xv-table-row-bg:var(--layer-selected-01)}:host([selected][hover]:hover){--xv-table-row-bg:var(--layer-selected-hover-01)}:host([row-reorderable][draggable=true]){cursor:grab}:host(.is-dragging){opacity:0.4}:host(.drop-above){box-shadow:inset 0 2px 0 0 var(--interactive-01)}:host(.drop-below){box-shadow:inset 0 -2px 0 0 var(--interactive-01)}:host([group]){--xv-table-row-bg:var(--layer-accent-01);font-weight:600}:host(.has-children){--xv-table-row-bg:var(--layer-accent-01)}:host(.has-children[hover]:hover){--xv-table-row-bg:var(--layer-accent-hover-01)}:host([header]){--xv-table-row-bg:var(--xv-table-header-bg, var(--layer-accent-01));box-shadow:inset 0 -1px 0 0 var(--border-subtle-01);font-weight:600}:host([disabled]:not([header])){cursor:not-allowed;color:var(--text-disabled);pointer-events:none;opacity:var(--xv-table-row-disabled-opacity)}.control{display:flex;align-items:center;justify-content:center;padding:0 var(--spacing-03)}.control--grip{order:-3}.control--expand{order:-2}.control--lead{order:-1}.control_grip{width:8px;height:14px;opacity:0.4;cursor:grab;background-image:radial-gradient(currentColor 1px, transparent 1px);background-size:4px 4px}.control_grip:active{cursor:grabbing}.control_expand{width:24px;height:24px;padding:0;border:0;background:none;color:var(--icon-primary);cursor:pointer}.control_expand::before{content:"";display:block;width:8px;height:8px;margin:0 auto;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-2px, -2px);transition:transform 0.15s ease}.control_expand.open::before{transform:rotate(-135deg) translate(-2px, -2px)}.control_expand:disabled{color:var(--icon-disabled);cursor:not-allowed}.control_expand:focus-visible{outline:2px solid var(--focus);outline-offset:0}.control_expand:focus-visible{outline-offset:-2px}.expand{order:10000;grid-column:1/-1;padding:var(--spacing-05);background:var(--layer-01);box-shadow:inset 0 1px 0 0 var(--border-subtle-00)}.expand[hidden]{display:none}:host([hidden]){display:none}`;
 
 const XvTableRow = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.checkedChange = createEvent(this, "checkedChange", 7);
-        this.selectRow = createEvent(this, "selectRow", 7);
-        this.checkHandle = ({ detail: checked }) => {
-            if (!checked && this.partial)
-                this.partial = checked;
-            if (!this.name)
-                this.name = uidGenerator();
-            this.selectRow.emit({
-                name: this.name,
-                value: this.value,
-                checked: checked,
-                partial: this.partial,
-                header: this.header,
-                expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
-            });
-        };
+        /** Identifies the row in selection and expansion payloads. */
+        this.value = '';
+        /** Selection control rendered in the leading cell. Set by the table. */
+        this.selectionMode = 'none';
+        /** Whether the row can be expanded. Set by the table. */
+        this.expandMode = 'none';
+        /** Whether the row offers its selection control. A header with no rows under it has nothing to pick. */
+        this.selectable = true;
+        /** Row height ladder. Set by the table. */
+        this.size = SIZE_VAR.MD;
+        /** Whether the row is selected. */
+        this.selected = false;
+        /** Indeterminate state of the header row's select-all checkbox. */
+        this.partial = false;
+        /** Whether the row's expand panel is open. */
+        this.expanded = false;
+        /**
+         * Value of the row this one belongs to. Child rows are siblings in the same grid, so they keep
+         * the table's columns instead of living in a panel of their own.
+         */
+        // Not reflected: an empty default would put parent="" on every row and break [parent] selectors.
+        this.parent = '';
+        /** Whether this row has anything to expand. Set by the table. */
+        this.expandable = false;
+        /** Whether the row carries `slot="expand"` content. Set by the table. */
+        this.hasPanel = false;
+        /** Renders the row as a subtotal or grouping row: no controls, accented background. */
+        this.group = false;
+        /** Marks the row as the table's header. Its cells supply the column labels. */
+        this.header = false;
+        /** Highlights the row on pointer hover. Set by the table. */
+        this.hover = false;
+        /** Blocks selection and expansion. */
+        this.disabled = false;
+        /** Whether this row can be dragged into a new position. Set by the table. */
+        this.rowReorderable = false;
+        /** Whether the whole row drags, or only its grip. Set by the table. */
+        this.rowReorderHandle = 'icon';
+        /** Accessible name of the expand toggle. Set by the table. */
+        this.expandLabel = 'Toggle row';
+        /** Accessible name of the drag grip. Set by the table. */
+        this.reorderLabel = 'Drag to reorder';
     }
-    checkedChangeHandle() {
-        if (!this.name)
-            this.name = uidGenerator();
-        this.checkedChange.emit({
-            name: this.name,
-            value: this.value,
-            checked: this.checked,
-            partial: this.partial,
-            header: this.header,
-            expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
-        });
+    // `draggable` is an enumerated attribute, not a boolean one: rendered as `draggable=""` it reads
+    // as `auto`, which never drags. The property reflects the string the browser expects.
+    componentDidRender() {
+        this.el.draggable = this.dragsWholeRow;
     }
-    setInitialAttrs() {
-        if (this.variant || !this.hover) {
-            const tableEl = this.el.closest(XV_TABLE_TAG);
-            if (!this.hover) {
-                this.hover = tableEl.hasAttribute('hover');
-            }
-            if (this.variant) {
-                setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
-            }
-        }
+    get dragsWholeRow() {
+        return (this.rowReorderable &&
+            this.rowReorderHandle === 'row' &&
+            !this.group &&
+            !this.header &&
+            !this.disabled &&
+            this.el.slot !== 'footer');
     }
     render() {
-        return (h(Host, { key: '96836583a7db08fbbe974a6ece55d5a909a7e415' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '0783aad6e26302d3430333cad806fc1747e26e39', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'bd4e052458eeda60f79e22507ac25d5914f39c0c', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '1cda8e32f1e8d6ad47fc93e63ee3c879651faa2a', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '2a74a7a6ab1c5d997bf71fe99b6cd98b61a70219' })));
-    }
-    componentWillLoad() {
-        this.setInitialAttrs();
+        // Empty spacers, or a group row's cells slide into the control tracks.
+        const hasSelect = this.selectionMode !== 'none';
+        const hasExpand = this.expandMode !== 'none';
+        // A header keeps the control cells as spacers, like a group row: it has nothing to expand or drag.
+        const expandable = hasExpand && !this.group && !this.header && this.expandable;
+        const draggable = this.rowReorderable && !this.group && !this.header && !this.disabled && this.el.slot !== 'footer';
+        // An empty panel would still paint its padding and background, so it is not rendered at all.
+        const panel = expandable && this.hasPanel;
+        return (h(Host, { key: 'ff2940779a1781b9a953629e4c8bf9a7431105fb', role: "row", part: "row" }, this.rowReorderable && (h("div", { key: 'd37b95aa6e56d073f1a9183be0475835b991f9d9', class: "control control--grip", part: "control", role: "cell" }, draggable && this.rowReorderHandle === 'icon' && (h("span", { key: '806316bd3cfb4340069418b3a43791073800d8fd', class: "control_grip", part: "grip", ref: element => element && (element.draggable = true), "aria-label": this.reorderLabel })))), hasExpand && (h("div", { key: 'e8455932d6147a965a27fbe2543ceeece4a65be8', class: "control control--expand", part: "control", role: "cell" }, expandable && (h("button", { key: 'eff064a985e9e6e44f122a42658f36ebd4f8d443', type: "button", class: { control_expand: true, open: this.expanded }, part: "expand-button", disabled: this.disabled, "aria-expanded": String(this.expanded), "aria-label": this.expandLabel })))), hasSelect && (h("div", { key: '97ffdebfe4ef650aa45020ff54449db83f252f68', class: "control control--lead", part: "control", role: "cell" }, !this.group &&
+            this.selectable &&
+            (this.selectionMode === 'multiple' ? (h("xv-checkbox-v2", { class: "control_input", checked: this.selected || this.partial, partial: this.partial, disabled: this.disabled, size: this.size })) : (h("xv-radio-v2", { class: "control_input", checked: this.selected, disabled: this.disabled, size: this.size }))))), h("slot", { key: '77414059aab52c6b11fe4b3571742eb9f4781fa8' }), panel && (h("div", { key: 'df45265616deac76f9bdb571def33be0a917bb01', class: "expand", part: "expand-panel", role: "cell", hidden: !this.expanded }, h("slot", { key: '986cbf15abb19462e98b4650ac707d0c79be54f4', name: "expand" })))));
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "checked": [{
-                "checkedChangeHandle": 0
-            }]
-    }; }
 };
 XvTableRow.style = xvTableRowCss();
 
@@ -84393,12 +85776,12 @@ const XvTagCombobox = class {
         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: '5b78581d7d76f3f8548a8879831c1774b0f6e3ba', class: "xv-combobox", part: "root", size: this.size }, this.label && h("label", { key: 'd2d7249c6b2c65018ab203ce71b72df3e19aa2d8', class: "label" }, this.label), h("div", { key: '5d5782acb42a47e6b61151eeb3a2b20bb440b335', 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: 'bcebbb940ffacac018068926ff3f714d60848d31', 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: '231998800b3984fc5d8f98e3b387c856aefe2c3f', 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: '06553869f491586642f501cb5fcfc14e2ba6f1f4', class: "control-loader", part: "loader", "aria-hidden": "true" }, h("xv-loader-v2", { key: 'db81d3335f20e26a0049508340da8cb3f59c24d9', size: "sm", variant: "horizontal" })))), message && (h("p", { key: '912315e151754bf4f8c63fbec64f3433bdbfac9d', class: { message: true, [message.level]: true } }, message.text)), suggestionsVisible && (h("ul", { key: 'c68bdb4c63e330440a038be034c1edefee84015c', 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)))))))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -84430,7 +85813,7 @@ const XvTag = class {
         this.closeClick.emit(e);
     }
     render() {
-        return (h(Host, { key: 'cd0cab01aba5ad627de9cc282c57032b83280c92', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '094a98000cf24d32d8fc47821f0aa704ab61419e', class: "xv-tag_content", part: "details-content" }, h("slot", { key: 'c19eeb245989563c381268b0ffdaf6d228c9bc04' })), this.closeable && (h("button", { key: '38df038e4ec7ebcf387ba1008f7bb3e66fe93cfa', 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" }))));
     }
 };
 XvTag.style = xvTagCss();
@@ -84470,13 +85853,13 @@ const XvTextInput = class {
     }
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: 'bb73bf066f367a9062cebeb186bce1310929d6ac', class: { disabled: !!this.disabled } }, h("label", { key: 'c6051d9ecac23444845e61345631aede0c5a14c2', class: "control" }, this.label && h("span", { key: '921f096a485031eeb34b3385200270a29f1d61d1', class: "control_label" }, this.label), h("div", { key: '2e8a94946100504e6a5d820f4a2c67c03557fe1f', 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: '2f458206c2ba1960611e57e14167d2d40b34c433', 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: '1028060cff07974a58f87e6ee097e0f7eeaf00ee', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: '478195557f75714c67a98020229c4c1591ab015e', size: SIZE_VAR.XS }), this.clearable && this.value && !this.loading && !this.disabled && !this.readonly && (h("button", { key: '4019006c7b199a3f2014d36284d20e1a17d122ae', 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: 'b3405a4b94e72b0e577c36448cae2afdea3e6b7a', onClick: this.togglePassword, disabled: this.disabled, class: "status-icon" }, h("svg", { key: '39cbc33366ff94fc0893f3ccff1716b862d232bd', 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: '13bdeb70bde027cd09a66645298efe8b0d98b9a6', 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 formAssociated() { return true; }
 };
@@ -84514,12 +85897,12 @@ const XvTextarea = class {
     }
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: '658e393a65602e686906bd2ad9eca9efd0d185fc', class: { disabled: !!this.disabled } }, h("label", { key: '93ad9edea381b99bcb7bcf1f692db00800776bf3', class: "control" }, (this.label || this.max) && (h("p", { key: 'fa5d19c60d4d528fe1fb7e7d5505d9927e69b1ec', class: "control_label" }, h("span", { key: '4bf48eb50474b3b74417a5ad3c01d09f6b485034' }, this.label, this.info && h("xv-tooltip-v2", { key: 'd7f1d420fbb2fa18d598b83e75a5218e4de1bfd4', message: this.info })), this.max !== undefined && !this.counterHide && (h("span", { key: '5053f5fa4902e4079d6163db7c13ff659bb656e5', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), h("div", { key: '52762934c658eb768e494963ece43228dfa5926e', 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: '7b2e78e20deaf989e72df9ff44a78d3111b775ac', 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: '9cea8ecb9db775ce6aaa7573a140d5d308ff0d30', class: "control_input__icons" }, this._renderIcon()))), message && (h("p", { key: '7ddc85f57fca259024f1060ec85265f5c661e4e8', 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)
@@ -84570,7 +85953,7 @@ const XvTile = class {
         this.checked = !this.checked;
     }
     render() {
-        return (h(Host, { key: 'a2c476c09c531b51f71f991e1880b2a47204491a', class: "xv-tile--host" }, h("label", { key: '3e2a54ab149f6043179bb7d1cc9e37496482cde4', 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,
@@ -84578,7 +85961,7 @@ const XvTile = class {
                 'xv-tile--disabled': !!this.disabled,
                 'selected': !!this.checked,
                 'xv-tile--error': !!this.error,
-            } }, h("div", { key: 'fc25a98acbca605f9dc1184d60303e8114e2e43b', class: "xv-tile_content" }, this.label && h("p", { key: '0f466d3aa936261cdc54a0b7492b5f5737b2a778', class: "xv-tile_content__title" }, this.label), h("slot", { key: '8e6c17221070c8c5bde4049b55943155ba2e7c17' })), this.variant === 'selectable' && (h("div", { key: '98a511f78a1dfbbcc65e971a0dad71510a6830c5', 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: '0bcfa73c1f2fb1b2d6d2740258cde9483dbdcd87', class: "xv-tile_footer" }, h("button", { key: 'e6a2b02d5b4596596ba216c300c954fbb08268ee', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '700535d5440bb57fd31382a2c0d0803f7cbdf239', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '3888e0d07a757ef7e9f8d9a16ca04c9cce814b06', 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" })))));
     }
     get el() { return getElement(this); }
 };
@@ -84610,7 +85993,7 @@ const XvToggle = class {
         };
     }
     render() {
-        return (h(Host, { key: '37a5b9544456493cc34c79b2b7f5b00e23e287c2', class: { 'xv-toggle': true, disabled: this.disabled, readonly: !!this.readonly, block: !!this.block } }, this.label && h("span", { key: '0a25845f45dafed5e868dc09443c45d566dc9c3f', class: "label" }, this.label), h("label", { key: '5d1da814a7de2b5965d51fe2eb1f17cfa30f6a0d', class: "control" }, h("slot", { key: 'c739617e825bf2ed051175cbeb5eb83d1fc298f3', name: "before" }), h("div", { key: '32bd77c1ca5f8e58892cf41d9004f3f38a63bb10', class: "control_input" }, h("input", { key: '9447c95ba00b07b288f650ac169f816607d624b9', 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: 'ce5ae18fa782dda6a28e45e297cc9e04ace9c7cd', class: "toggle" })), h("slot", { key: 'e4005eee0f127a0a1a59c1930aae06fac534ae77', 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 formAssociated() { return true; }
 };
@@ -84687,7 +86070,7 @@ const XvToggleTip = class {
     }
     ;
     render() {
-        return (h(Host, { key: 'fd081052d0ce9e3c3505e99914eb765e2c708144', class: "xv-toggle-tip" }, h("div", { key: '7820225106348327e96a5620a64e2c13c15e7129', 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: 'daa48bf90a6b283a361414047b9f5cc194d6969c', name: "trigger" }, h("svg", { key: '37abc5de519c6b48bff301a48ddc11edffc23008', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '120b7659351f0dacc52c818803dc735fe4e4dfc8', 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: 'edc6f66c90815a764e884bbb3adea6687a9148a8', class: { popover: true, autoSize: !!this.autoSize }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: '592926c0f4c6534bfcf5d01b6ca6b4bfe63f1337', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: 'e91dc73a6c6acf68173a05a932615fcf3e3dfe27', class: "popover-content" }, h("slot", { key: 'afaac527e6f4853075417b598795a37322612888', name: "header" }), h("slot", { key: 'cc047953642b7c4b686c1f7af1a0647cf84e6001', name: "body" }), h("slot", { key: 'b4b8a501b0fc655fb2151726121ab5b882af0ce7', 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();
@@ -84742,14 +86125,14 @@ const XvTooltip = class {
         this.destroyTooltip();
     }
     render() {
-        return (h(Host, { key: 'a435539ec69538a238bd35c6d4867c18da9a7a40', 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: 'd766446f98777a9e680867a372ed4df0843b77b0' }, h("svg", { key: '9b2c7d9ed60fb6b4b82c034feef022468df3bf5c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '526be5c67ca24171376da19d7dd1c1f7c09d8edc', 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" })))));
     }
     get el() { return getElement(this); }
 };
 XvTooltip.style = xvTooltipCss();
 
-export { XvAccordion as xv_accordion_v2, XvAccordionItem as xv_accordion_v2_item, XvBreadcrumbs as xv_breadcrumbs_v2, XvButtonGroup as xv_button_group_v2, XvButton as xv_button_v2, XvCard as xv_card_v2, XvCheckbox as xv_checkbox_v2, XvContentSwitcherItem as xv_content_switcher_item_v2, XvContentSwitcher as xv_content_switcher_v2, XvDataTable as xv_data_table, XvDataTableCell as xv_data_table_cell, XvDataTableCollapse as xv_data_table_collapse, XvDataTableRow as xv_data_table_row, XvDatePicker as xv_date_picker, XvDatepicker as xv_datepicker, XvDropdown as xv_dropdown_v2, XvDropdownItem as xv_dropdown_v2_item, XvFileUploader as xv_file_uploader, Xvfooter as xv_footer, XvGeoMap as xv_geo_map_v2, XvHeader as xv_header, XvImageViewer as xv_image_viewer, XvLink as xv_link_v2, XvLoader as xv_loader_v2, XvLoginModal as xv_login_modal, XvMegaMenu as xv_mega_menu, XvModal as xv_modal_v2, XvNotification as xv_notification_v2, XvNumberInput as xv_number_input_v2, XvOverflowMenu as xv_overflow_menu_v2, XvOverflowMenuItem as xv_overflow_menu_v2_item, XvPagination as xv_pagination, XvProgressIndicator as xv_progress_indicator_v2, XvProgressIndicatorItem as xv_progress_indicator_v2_item, XvRadio as xv_radio_v2, XvSlider as xv_slider_v2, XvTab as xv_tab_v2, XvTable as xv_table_v2, XvTableCell as xv_table_v2_cell, XvTableExpand as xv_table_v2_expand, XvTableRow as xv_table_v2_row, XvTabs as xv_tabs_v2, XvTagCombobox as xv_tag_combobox, XvTag as xv_tag_v2, XvTextInput as xv_text_input_v2, XvTextarea as xv_textarea, XvTile as xv_tile, XvToggle as xv_toggle, XvToggleTip as xv_toggle_tip, XvTooltip as xv_tooltip_v2 };
+export { XvAccordion as xv_accordion_v2, XvAccordionItem as xv_accordion_v2_item, XvBreadcrumbs as xv_breadcrumbs_v2, XvButtonGroup as xv_button_group_v2, XvButton as xv_button_v2, XvCard as xv_card_v2, XvCheckbox as xv_checkbox_v2, XvContentSwitcherItem as xv_content_switcher_item_v2, XvContentSwitcher as xv_content_switcher_v2, XvDataTable as xv_data_table, XvDataTableCell as xv_data_table_cell, XvDataTableCollapse as xv_data_table_collapse, XvDataTableRow as xv_data_table_row, XvDatePicker as xv_date_picker, XvDatepicker as xv_datepicker, XvDropdown as xv_dropdown_v2, XvDropdownItem as xv_dropdown_v2_item, XvFileUploader as xv_file_uploader, Xvfooter as xv_footer, XvGeoMap as xv_geo_map_v2, XvHeader as xv_header, XvImageViewer as xv_image_viewer, XvLink as xv_link_v2, XvLoader as xv_loader_v2, XvLoginModal as xv_login_modal, XvMegaMenu as xv_mega_menu, XvModal as xv_modal_v2, XvNotification as xv_notification_v2, XvNumberInput as xv_number_input_v2, XvOverflowMenu as xv_overflow_menu_v2, XvOverflowMenuItem as xv_overflow_menu_v2_item, XvPagination as xv_pagination, XvProgressIndicator as xv_progress_indicator_v2, XvProgressIndicatorItem as xv_progress_indicator_v2_item, XvRadio as xv_radio_v2, XvSlider as xv_slider_v2, XvTab as xv_tab_v2, XvTable as xv_table, XvTableCell as xv_table_cell, XvTableRow as xv_table_row, XvTabs as xv_tabs_v2, XvTagCombobox as xv_tag_combobox, XvTag as xv_tag_v2, XvTextInput as xv_text_input_v2, XvTextarea as xv_textarea, XvTile as xv_tile, XvToggle as xv_toggle, XvToggleTip as xv_toggle_tip, XvTooltip as xv_tooltip_v2 };