@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/collection/components/xpl-table/xpl-table.js

@@ -17,13 +17,12 @@ export class Table {
         this.areAllSelected = false;
         this.hasScrolled = false;
         this.sortTypeArray = [];
-        this.selectAllValue = Math.random().toString(36).slice(2);
         this.selectAll = (e) => {
             const checked = e.detail;
             this.areAllSelected = checked;
             this.selected =
                 this.selectedValues.length > 0
-                    ? Array.from(this.el.querySelectorAll('tbody td:first-child xpl-checkbox')).map((checkbox) => (checked ? checkbox.value : checked))
+                    ? Array.from(this.el.querySelectorAll('tbody td:first-child xpl-checkbox')).map((checkbox) => (checked ? (checkbox.value ?? checked) : checked))
                     : this.selected.map(() => checked);
             this.onChange();
         };
@@ -33,7 +32,11 @@ export class Table {
             this.selected = this.selected.map((v, selectedIdx) => {
                 if (selectedIdx !== checkboxIdx)
                     return v;
-                return this.selectedValues.length > 0 ? (checked ? value : checked) : checked;
+                return this.selectedValues.length > 0
+                    ? checked
+                        ? (value ?? checked)
+                        : checked
+                    : checked;
             });
             this.areAllSelected = this.selected.every((v) => !!v);
             this.onChange();
@@ -65,19 +68,15 @@ export class Table {
                     this.rowData.sort((a, b) => handleSort(b, a));
                     break;
                 default:
-                    this.rowData = this.data;
+                    this.rowData = this.data ? Array.from(this.data) : [];
                     this.sortTypeArray[col] = null;
                     break;
             }
             this.rowData = Array.from(this.rowData);
-            this.render();
         };
         this.setData = () => {
             this.rowData = this.data !== undefined ? Array.from(this.data) : [];
         };
-        this.setFooterData = () => {
-            this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
-        };
     }
     handleSort(clickEvt, isColumnSortable, colNum, colName) {
         clickEvt.preventDefault();
@@ -107,43 +106,63 @@ export class Table {
     watchData() {
         this.setData();
     }
-    watchFooterData() {
-        this.setFooterData();
-    }
     watchColumns() {
         this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
     }
     componentWillLoad() {
+        this.ensureSelectAllValue();
         this.areAllSelected = false;
         this.setData();
-        this.setFooterData();
         this.selected = new Array(this.rowData.length).fill(false);
-        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+        this.ensureSortTypeArray();
     }
-    render() {
-        var _a;
+    ensureSelectAllValue() {
+        if (this.selectAllValue !== undefined) {
+            return;
+        }
+        const hostId = this.el.id?.trim();
+        if (hostId) {
+            this.selectAllValue = `${hostId}-select-all`;
+            return;
+        }
+        const persisted = this.el.getAttribute('data-select-all-value');
+        if (persisted) {
+            this.selectAllValue = persisted;
+            return;
+        }
+        Table.selectAllSeq += 1;
+        this.selectAllValue = `select-all-${Table.selectAllSeq}`;
+        this.el.setAttribute('data-select-all-value', this.selectAllValue);
+    }
+    ensureSortTypeArray() {
         if (this.columns &&
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (h(Host, { key: 'feca62966731c111adc18988af07bd269dd63868' }, h("div", { key: 'b585fe5b3161eb7763e4292a7015fb3209a3fa90', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
-                this.container = el;
-            } }, h("table", { key: '37930d45de6739b43ff6d541d46d7f960d922716', class: {
+        else if (!this.columns) {
+            this.sortTypeArray = [];
+        }
+    }
+    render() {
+        const rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
+        return (h(Host, { key: '1e6bf436320a44e1e22e8590a881bc90c4a091d5' }, h("div", { key: '3d2e5361fbe615a6ae8ebe916ce07e00f82c444c', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+                if (el)
+                    this.container = el;
+            } }, h("table", { key: '036672b3ba45a90a42f906c155ce3d59e33c8a7a', class: {
                 'xpl-table': true,
-                'xpl-table--striped': this.striped,
-                'xpl-table--freeze': this.freeze,
+                'xpl-table--striped': !!this.striped,
+                'xpl-table--freeze': !!this.freeze,
                 'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (h("thead", { key: '40e9b8bb9cb641a2f89a63a707ecaa3a286fc99d' }, this.columns.map((column, i) => {
-            var _a;
-            const iconType = getIconType((_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]);
+            } }, this.columns && (h("thead", { key: 'bf0d5a808624234ba985c1c32064f1dab11bfefa' }, this.columns.map((column, i) => {
+            const iconType = getIconType(this.sortTypeArray?.[i]);
             const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
             return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (h("xpl-checkbox", { checked: this.areAllSelected, indeterminate: !this.areAllSelected &&
-                    this.selected.some((a) => a), onClick: (e) => e.stopPropagation(), onCheckboxChange: (e) => this.selectAll(e), value: `select-all-${this.selectAllValue}`, "aria-label": "Select all rows" })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), h("tbody", { key: '99bc5a0fd8b91d040483cc5749490b5319097ab9' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+                    this.selected.some((a) => a), onClick: (e) => e.stopPropagation(), onCheckboxChange: (e) => this.selectAll(e), value: this.selectAllValue, "aria-label": "Select all rows" })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
+        }))), h("tbody", { key: '7915dbfbf1a9b68719c4168e09c5f0e3ab7fa35a' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
                 : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", null, h("xpl-checkbox", { checked: !!this.selected[rowNum], onCheckboxChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: '404659d5846461f017e974786ec359473be0a7b6' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
+                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), rowFooterData.length > 0 && (h("tfoot", { key: '78ee72f80c77e61c6234be9500770780952ca669' }, rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
     }
     static get is() { return "xpl-table"; }
     static get properties() {
@@ -265,7 +284,7 @@ export class Table {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The values for the input for each row when multiselect is activated."
@@ -283,7 +302,7 @@ export class Table {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Toggles to show the sort button on each table head"
@@ -303,7 +322,7 @@ export class Table {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Manually determined if the column is sortable"
@@ -318,7 +337,6 @@ export class Table {
         return {
             "areAllSelected": {},
             "rowData": {},
-            "rowFooterData": {},
             "hasScrolled": {},
             "selected": {},
             "sortTypeArray": {}
@@ -348,11 +366,11 @@ export class Table {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits an event whenever the sort changes.\nThe 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(string[]).\nThe default action can be overridden by calling event.preventDefault()."
+                    "text": "Emits an event whenever the sort changes.\nThe 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(('asc' | 'desc' | null)[]).\nThe default action can be overridden by calling event.preventDefault()."
                 },
                 "complexType": {
-                    "original": "{\n        colNum: number;\n        colName: string;\n        sortTypeArr: string[];\n    }",
-                    "resolved": "{ colNum: number; colName: string; sortTypeArr: string[]; }",
+                    "original": "{\n        colNum: number;\n        colName: string;\n        sortTypeArr: ('asc' | 'desc' | null)[];\n    }",
+                    "resolved": "{ colNum: number; colName: string; sortTypeArr: (\"desc\" | \"asc\")[]; }",
                     "references": {}
                 }
             }];
@@ -362,12 +380,10 @@ export class Table {
         return [{
                 "propName": "data",
                 "methodName": "watchData"
-            }, {
-                "propName": "footer",
-                "methodName": "watchFooterData"
             }, {
                 "propName": "columns",
                 "methodName": "watchColumns"
             }];
     }
 }
+Table.selectAllSeq = 0;

package/dist/collection/components/xpl-table-header/xpl-table-header.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class TableHeader {
     render() {
-        return (h(Host, { key: '1123c671d82d987a74264ef2869494155746d7d8', role: "row", class: "xpl-table-header" }, h("slot", { key: 'f1a238ba023ce03559f87cf92214a1804c8ac821' })));
+        return (h(Host, { key: '94e6c6f38fa4672ef3c728bf196946801da855d4', role: "row", class: "xpl-table-header" }, h("slot", { key: 'fa41686f082c65d27555273945f734a36c670869' })));
     }
     static get is() { return "xpl-table-header"; }
 }

package/dist/collection/components/xpl-table-header-cell/xpl-table-header-cell.js

@@ -19,7 +19,9 @@ export class TableHeaderCell {
         this.sortChanged.emit(this.sortDirection);
     }
     render() {
-        const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
+        const colIndex = this.el.parentElement
+            ? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
+            : 0;
         const renderContent = () => {
             switch (this.type) {
                 case 'label':
@@ -27,7 +29,7 @@ export class TableHeaderCell {
                 case 'checkbox':
                     return h("xpl-checkbox", null);
                 case 'icon':
-                    return h("xpl-icon", { icon: this.icon, size: 20 });
+                    return this.icon ? h("xpl-icon", { icon: this.icon, size: 20 }) : null;
                 default:
                     return '';
             }

package/dist/collection/components/xpl-tabs/tabs.shared.js

@@ -8,7 +8,6 @@ export function clampTabCount(n) {
     return Math.min(200, Math.floor(n));
 }
 export function coerceTabsStoryValue(args) {
-    var _a;
     const n = clampTabCount(args.tabCount);
     const targets = Array.from({ length: n }, (_, i) => `tab${i}`);
     const valueTrim = args.value.trim();
@@ -18,7 +17,7 @@ export function coerceTabsStoryValue(args) {
     if (targets.includes(valueTrim)) {
         return valueTrim;
     }
-    return (_a = targets[0]) !== null && _a !== void 0 ? _a : '';
+    return targets[0] ?? '';
 }
 export function buildTabsMarkup(args) {
     const n = clampTabCount(args.tabCount);
@@ -43,14 +42,19 @@ export function buildTabsMarkup(args) {
     if (args.tabDisabled) {
         firstTabParts.push('disabled');
     }
-    if (args.type === 'segment') {
-        const icon = args.icon.trim();
-        if (icon) {
-            firstTabParts.push(`icon="${escapeHtmlAttr(icon)}"`);
-        }
-        if (args.iconPosition !== 'start') {
-            firstTabParts.push(`icon-position="${args.iconPosition}"`);
-        }
+    const icon = args.icon.trim();
+    if (icon) {
+        firstTabParts.push(`icon="${escapeHtmlAttr(icon)}"`);
+    }
+    if (args.iconPosition !== 'start') {
+        firstTabParts.push(`icon-position="${args.iconPosition}"`);
+    }
+    const badge = args.badge.trim();
+    if (badge) {
+        firstTabParts.push(`badge="${escapeHtmlAttr(badge)}"`);
+    }
+    if (badge && args.badgeVariant !== 'purple') {
+        firstTabParts.push(`badge-variant="${escapeHtmlAttr(args.badgeVariant)}"`);
     }
     const firstHeading = args.type === 'tabs' ? 'Tab' : 'Segment';
     lines.push(`    <xpl-tab ${firstTabParts.join(' ')}>${firstHeading} 1</xpl-tab>`);
@@ -64,46 +68,12 @@ export function buildTabsMarkup(args) {
     return lines.join('\n');
 }
 export function renderTabsStoryMarkup(args, context = {}) {
-    var _a;
     const value = coerceTabsStoryValue(args);
     if (value !== args.value) {
-        (_a = context.updateArgs) === null || _a === void 0 ? void 0 : _a.call(context, { value });
+        context.updateArgs?.({ value });
     }
-    return buildTabsMarkup(Object.assign(Object.assign({}, args), { value }));
+    return buildTabsMarkup({ ...args, value });
 }
-export const tabsPlainDomUnderlineStoryHtml = `<---- Non-interactive plain DOM (tabs.css BEM). Not the <xpl-tabs> API; use the Web Component tab for that. Ids mirror the scoped pattern (data-tabs-instance-id + target). ---->
-<div class="xpl-tabs" data-tabs-instance-id="xpl-tg-1">
-    <xpl-select class-names="xpl-tabs__mobile-select" selected-values="tab0"></xpl-select>
-    <nav class="xpl-tabs__headings" role="tablist" aria-orientation="horizontal">
-        <div class="xpl-tabs__active-bar"></div>
-        <div class="xpl-tab xpl-tab--selected">
-            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab0" aria-controls="xpl-tg-1-panel-tab0" aria-selected="true">Tab 1</button>
-        </div>
-        <div class="xpl-tab">
-            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab1" aria-controls="xpl-tg-1-panel-tab1" aria-selected="false">Tab 2</button>
-        </div>
-    </nav>
-    <div class="xpl-tabs__panels">
-        <div class="xpl-tab-panel xpl-tab-panel--selected" role="tabpanel" id="xpl-tg-1-panel-tab0" aria-labelledby="xpl-tg-1-tab-tab0">Content for tab 1</div>
-        <div class="xpl-tab-panel" role="tabpanel" id="xpl-tg-1-panel-tab1" aria-labelledby="xpl-tg-1-tab-tab1">Content for tab 2</div>
-    </div>
-</div>`;
-export const tabsPlainDomSegmentStoryHtml = `<---- Segment (type='segment'): Stencil renders xpl-tab.xpl-tab--segment > xpl-button; xpl-tab assigns id, role, and aria-* on the inner native <button>. Plain buttons below only illustrate tablist ↔ tabpanel id wiring (not .xpl-tab__button). ---->
-<div class="xpl-tabs xpl-tabs--segment" data-tabs-instance-id="xpl-tg-2">
-    <xpl-select class-names="xpl-tabs__mobile-select" selected-values="tab0"></xpl-select>
-    <nav class="xpl-tabs__headings" role="tablist" aria-orientation="horizontal">
-        <div class="xpl-tab xpl-tab--segment xpl-tab--selected">
-            <button type="button" role="tab" id="xpl-tg-2-tab-tab0" aria-controls="xpl-tg-2-panel-tab0" aria-selected="true">Segment 1</button>
-        </div>
-        <div class="xpl-tab xpl-tab--segment">
-            <button type="button" role="tab" id="xpl-tg-2-tab-tab1" aria-controls="xpl-tg-2-panel-tab1" aria-selected="false">Segment 2</button>
-        </div>
-    </nav>
-    <div class="xpl-tabs__panels">
-        <div class="xpl-tab-panel xpl-tab-panel--selected" role="tabpanel" id="xpl-tg-2-panel-tab0" aria-labelledby="xpl-tg-2-tab-tab0">Content for segment 1</div>
-        <div class="xpl-tab-panel" role="tabpanel" id="xpl-tg-2-panel-tab1" aria-labelledby="xpl-tg-2-tab-tab1">Content for segment 2</div>
-    </div>
-</div>`;
 export const tabsStoryBaseArgTypes = {
     type: {
         options: ['tabs', 'segment'],
@@ -132,17 +102,65 @@ export const tabsStoryBaseArgTypes = {
     },
     icon: {
         control: { type: 'text' },
-        description: 'First `xpl-tab` only — icon (segment). Empty = none.',
+        description: 'First `xpl-tab` only — leading icon name. Empty = none.',
     },
     iconPosition: {
         options: ['start', 'end'],
         control: { type: 'radio' },
         description: 'First `xpl-tab` only — icon position.',
     },
+    badge: {
+        control: { type: 'text' },
+        description: 'First `xpl-tab` only — trailing number badge value. Empty = none.',
+    },
+    badgeVariant: {
+        options: ['purple', 'green', 'yellow', 'orange', 'gray', 'red', 'blue'],
+        control: { type: 'select' },
+        description: 'First `xpl-tab` only — number badge color palette.',
+    },
 };
 const SEGMENT_CATEGORY_XPL_TABS = '01 — xpl-tabs';
 const SEGMENT_CATEGORY_FIRST_TAB = '02 — xpl-tab controls (first tab only for simplicity)';
-export const segmentControlStoryArgTypes = Object.assign(Object.assign({}, tabsStoryBaseArgTypes), { type: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.type), { table: { disable: true } }), disabled: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.disabled), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), fullWidth: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.fullWidth), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), value: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.value), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), tabCount: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.tabCount), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), tabDisabled: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.tabDisabled), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }), icon: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.icon), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }), iconPosition: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.iconPosition), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }) });
+export const segmentControlStoryArgTypes = {
+    ...tabsStoryBaseArgTypes,
+    type: { ...tabsStoryBaseArgTypes.type, table: { disable: true } },
+    disabled: {
+        ...tabsStoryBaseArgTypes.disabled,
+        table: { category: SEGMENT_CATEGORY_XPL_TABS },
+    },
+    fullWidth: {
+        ...tabsStoryBaseArgTypes.fullWidth,
+        table: { category: SEGMENT_CATEGORY_XPL_TABS },
+    },
+    value: {
+        ...tabsStoryBaseArgTypes.value,
+        table: { category: SEGMENT_CATEGORY_XPL_TABS },
+    },
+    tabCount: {
+        ...tabsStoryBaseArgTypes.tabCount,
+        table: { category: SEGMENT_CATEGORY_XPL_TABS },
+    },
+    tabDisabled: {
+        ...tabsStoryBaseArgTypes.tabDisabled,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+    icon: {
+        ...tabsStoryBaseArgTypes.icon,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+    iconPosition: {
+        ...tabsStoryBaseArgTypes.iconPosition,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+    badge: {
+        ...tabsStoryBaseArgTypes.badge,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+    badgeVariant: {
+        ...tabsStoryBaseArgTypes.badgeVariant,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+};
 export const tabsUnderlineDefaultArgs = {
     type: 'tabs',
     disabled: false,
@@ -150,7 +168,14 @@ export const tabsUnderlineDefaultArgs = {
     value: 'tab0',
     tabCount: 2,
     tabDisabled: false,
-    icon: '',
+    icon: 'user',
     iconPosition: 'start',
+    badge: '4',
+    badgeVariant: 'purple',
+};
+export const segmentControlDefaultArgs = {
+    ...tabsUnderlineDefaultArgs,
+    type: 'segment',
+    icon: 'house-4',
+    badge: '',
 };
-export const segmentControlDefaultArgs = Object.assign(Object.assign({}, tabsUnderlineDefaultArgs), { type: 'segment', icon: 'house-4' });

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

@@ -1,14 +1,13 @@
 import { Host, h, } from "@stencil/core";
-const PILL_LABEL_ICON_SELECTORS = '.xpl-button__icon, xpl-icon';
+const PILL_LABEL_ICON_SELECTORS = '.xpl-button__icon, xpl-icon, xpl-badge';
 let xplTabsInstanceCounter = 0;
 function tabHeadingLabelFromElement(tab) {
-    var _a, _b;
     const pillInner = tab.querySelector('xpl-button button');
     if (pillInner) {
         const clone = pillInner.cloneNode(true);
         if (clone instanceof HTMLElement) {
             clone.querySelectorAll(PILL_LABEL_ICON_SELECTORS).forEach((node) => node.remove());
-            const text = (_a = clone.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ').trim();
+            const text = clone.textContent?.replace(/\s+/g, ' ').trim();
             if (text) {
                 return text;
             }
@@ -16,12 +15,17 @@ function tabHeadingLabelFromElement(tab) {
     }
     const underline = tab.querySelector('.xpl-tab__button');
     if (underline) {
-        return Array.from(underline.childNodes)
+        const text = Array.from(underline.childNodes)
             .filter((node) => node.nodeType === Node.TEXT_NODE)
-            .map((node) => { var _a; return ((_a = node.textContent) !== null && _a !== void 0 ? _a : '').trim(); })
-            .join(' ');
+            .map((node) => (node.textContent ?? '').trim())
+            .join(' ')
+            .replace(/\s+/g, ' ')
+            .trim();
+        if (text) {
+            return text;
+        }
     }
-    return (_b = tab.getAttribute('target')) !== null && _b !== void 0 ? _b : '';
+    return tab.getAttribute('target') ?? '';
 }
 export class Tabs {
     constructor() {
@@ -42,11 +46,10 @@ export class Tabs {
             this.applySelection(target);
         };
         this.onTablistKeydown = async (ev) => {
-            var _a, _b;
             if (this.disabled) {
                 return;
             }
-            const tabHost = (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'xpl-tab');
+            const tabHost = ev.target?.closest?.('xpl-tab');
             if (!tabHost || !this.tabHeadings.includes(tabHost)) {
                 return;
             }
@@ -98,7 +101,7 @@ export class Tabs {
                 nextIndex = enabled.length - 1;
             }
             const nextTab = enabled[nextIndex];
-            const nextValue = nextTab === null || nextTab === void 0 ? void 0 : nextTab.getAttribute('target');
+            const nextValue = nextTab?.getAttribute('target');
             if (!nextValue) {
                 return;
             }
@@ -144,8 +147,7 @@ export class Tabs {
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer?.disconnect();
         if (this.headingsContainerRef && this.tablistKeydownBound) {
             this.headingsContainerRef.removeEventListener('keydown', this.onTablistKeydown);
             this.tablistKeydownBound = false;
@@ -238,16 +240,14 @@ export class Tabs {
         });
     }
     getDefaultValue() {
-        var _a, _b;
-        return this.value || ((_b = (_a = this.tabHeadings) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getAttribute('target')) || '';
+        return this.value || this.tabHeadings?.[0]?.getAttribute('target') || '';
     }
     async syncRovingTabindex() {
         if (this.disabled) {
             return;
         }
         await Promise.all(this.tabHeadings.map(async (tabHeading) => {
-            var _a;
-            const target = (_a = tabHeading.getAttribute('target')) !== null && _a !== void 0 ? _a : '';
+            const target = tabHeading.getAttribute('target') ?? '';
             const isSelected = target === this.selectedValue;
             await tabHeading.setTabIndex(isSelected ? 0 : -1);
         }));
@@ -280,11 +280,15 @@ export class Tabs {
     }
     renderChoices() {
         return this.tabHeadings.map((tabHeading) => {
-            var _a;
-            const target = (_a = tabHeading.getAttribute('target')) !== null && _a !== void 0 ? _a : '';
+            const target = tabHeading.getAttribute('target') ?? '';
             const tabDisabled = this.disabled || tabHeading.hasAttribute('disabled');
-            const icon = this.type === 'segment' ? tabHeading.getAttribute('icon') || undefined : undefined;
-            return Object.assign({ label: tabHeadingLabelFromElement(tabHeading), value: target, isDisabled: tabDisabled }, (icon ? { icon } : {}));
+            const icon = tabHeading.getAttribute('icon') || undefined;
+            return {
+                label: tabHeadingLabelFromElement(tabHeading),
+                value: target,
+                isDisabled: tabDisabled,
+                ...(icon ? { icon } : {}),
+            };
         });
     }
     updateActiveBarPosition() {
@@ -317,11 +321,11 @@ export class Tabs {
     }
     render() {
         const isSegment = this.type === 'segment';
-        return (h(Host, { key: '712b11ca22e287b8e981c327d1793fbc627c8508', class: {
+        return (h(Host, { key: '74e82ed3665bf7d8337d16f6253c2ae79d421473', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
                 'xpl-tabs--segment': isSegment,
-            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: 'ca013d1c4848a13e3210e3e010f90969a70b609f', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: '8b706667897c20145cdd528b692affb0db7f7ebc', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -332,17 +336,17 @@ export class Tabs {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), h("nav", { key: 'bbabd600ae5e210b7a3e9cfa9c5938f12ee14e1d', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), h("nav", { key: 'd23f6edc5da0525e4c8fc10aa30af64986fdda36', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
                 this.headingsContainerRef = el;
             }, onTabChange: (event) => {
                 event.stopPropagation();
                 this.isMobileSelectChange = false;
                 this.handleTabChange(event.detail);
                 this.tabChange.emit(event.detail);
-            } }, !isSegment && (h("div", { key: 'fe8c53716bd0fe10b02a22ac3df643aa6627303d', class: "xpl-tabs__active-bar", style: {
+            } }, !isSegment && (h("div", { key: 'd2d080ffc049a408f2d93f3ce3bc694c0954ece3', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } })), h("slot", { key: '8a1232936ec72a91e4fcd57f1f35f598a337dd99', name: "heading" })), h("div", { key: '2ef4b61b894a326bc370a1c7631308b8b13261b5', class: "xpl-tabs__panels" }, h("slot", { key: '28c9ccce6482c7cbe9ee46960c65bd59aaacb4b9', name: "panel" }))));
+            } })), h("slot", { key: '8c4b1403048b0eba5125abfc22494641aaf955cf', name: "heading" })), h("div", { key: '54a04bd883f364457cdf5922cad8ac2b42eceb61', class: "xpl-tabs__panels" }, h("slot", { key: '2b51ebd00605dfbd76c6018d74f63f954016a025', name: "panel" }))));
     }
     static get is() { return "xpl-tabs"; }
     static get properties() {

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

@@ -25,7 +25,7 @@ export class Tag {
                 const offsetY = Math.max(0, event.clientY - rect.top);
                 event.dataTransfer.setDragImage(this.el, offsetX, offsetY);
             }
-            catch (_a) {
+            catch {
             }
         };
         this.handleContentKeyDown = (event) => {
@@ -62,9 +62,8 @@ export class Tag {
             });
         };
         this.handleDragEnd = (event) => {
-            var _a;
             this.isDragging = false;
-            const wasDropped = ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.dropEffect) === 'move';
+            const wasDropped = event.dataTransfer?.dropEffect === 'move';
             this.tagDragEnd.emit({
                 tagId: this.tagId,
                 dropped: wasDropped,
@@ -106,8 +105,7 @@ export class Tag {
         queueMicrotask(() => this.syncDismissAriaLabelSuffix());
     }
     getContentLabelText() {
-        var _a, _b;
-        return ((_b = (_a = this.el.querySelector('.xpl-tag__content')) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '').trim();
+        return (this.el.querySelector('.xpl-tag__content')?.textContent ?? '').trim();
     }
     syncDismissAriaLabelSuffix() {
         if (!this.el.isConnected) {
@@ -121,7 +119,7 @@ export class Tag {
     }
     render() {
         const dragEnabled = this.isDraggable && !this.disabled;
-        return (h(Host, { key: '4b8228da443d411561306e790333d676fc3907e3', class: {
+        return (h(Host, { key: '4129a867a9581efc82985d11549810860a2c6f87', class: {
                 'xpl-tag': true,
                 'xpl-tag-container': true,
                 'xpl-tag--disabled': this.disabled,
@@ -129,7 +127,7 @@ export class Tag {
                 'xpl-tag--dragging': this.isDragging,
                 'xpl-tag--draggable': dragEnabled,
                 'xpl-tag--sm': this.size === 'sm',
-            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: 'bf634c6b75d1cd2eaadff8e4459b74a097e3f221', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: 'fb37896890c9afb56c02a3ff4e62f096c416a569', icon: "xmark", size: 10 })))));
+            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: 'fb10e5fe87053ff4c00f584d887e1f5c29b2dc74', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: 'e8afb0b6fbf1a942cce78cf6a26b420445094f30', icon: "xmark", size: 10 })))));
     }
     static get is() { return "xpl-tag"; }
     static get properties() {