@xplortech/apollo-core 2.6.0 → 2.7.1

package/dist/cjs/xpl-button-row.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const ButtonRow = class {
     constructor(hostRef) {
@@ -13,7 +13,7 @@ const ButtonRow = class {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '0f5bf4d086cbafb8b03f854ea11b495ee5009cdf', class: "xpl-button-row" }, index.h("div", { key: '64ab05ca8cba9cf4c2a8feca5a6233a6a4b6a7e4', class: "xpl-button-row-inner" }, index.h("div", { key: '2e8d97b9fb7f7a31e0014b255342c0f2fb3ce7ac', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: 'd368c7228a9f12143cff4978ced0a5eac35ff8a3', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: 'a2a1860115ab9ac09d6ddd01ffd1e6e49d1ac874', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: '98f77b4745b72e8321e37d307c0a298f1e52045f', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: '7f605c1221e856825e044dc908834f52c9e0374a', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: 'f83653973db8aec83cc3ec0da3cdf25431c18304', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (index.h(index.Host, { key: '184ee5671a9d1bbb967dd8e6e4427df30d62a007', class: "xpl-button-row" }, index.h("div", { key: '44b583d0899af8b158f7093b87918f0843366e44', class: "xpl-button-row-inner" }, index.h("div", { key: '31754284b0b87a1e58ccbded4b46b453c3b717ca', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: '27a9c164af5e72a66380dfda4072cfb5d3b3a34d', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: '7ba9299532405aa9dceca481dae675a5129d2b51', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: 'bcb3524b921e6de30a1f6d870e04eeb9592762bb', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: '5e10208c958143476df430b7f9877965b7fadc08', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: 'ebb24794d37fd6dce72fa776b97ec59edeaab1dc', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
 };
 

package/dist/cjs/xpl-calendar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 var index$1 = require('./index-BvmWjxWc.js');
 var v4 = require('./v4-D4KzFnn8.js');
 
@@ -57,7 +57,7 @@ const Calendar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5a9d327e7f4d7861d337123299829b833b2cce84', class: "xpl-calendar" }, index.h("input", { key: 'f592794da7e97bca218ea47ab5d64a13182d71d0', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (index.h(index.Host, { key: '56cd65b62892b0c3e939f6cd77e9ba507baf4a68', class: "xpl-calendar" }, index.h("input", { key: '296222d3b6c0bf3e7c400d4d8c40d7d48774ea57', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 this.inputElement = el;
             } })));
     }

package/dist/cjs/xpl-dynamic-table-cell.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const DynamicTableCell = class {
     constructor(hostRef) {
@@ -23,9 +23,9 @@ const DynamicTableCell = class {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (index.h(index.Host, { key: 'd4b284973e5c1f76a9355f77749c6b6432e4f469', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (index.h(index.Host, { key: '7cfa2d58f634e41ccf1604a581fcc83a2b51676f', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, index.h("slot", { key: 'd9365d26d5b4fb9e50cd3b08514eeae3bfdd6888' })));
+            } }, index.h("slot", { key: 'c6a04082cb8aa1089d9f6cb82f3db8d7f0addf6e' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/xpl-dynamic-table-row.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const DynamicTableRow = class {
     constructor(hostRef) {
@@ -28,9 +28,9 @@ const DynamicTableRow = class {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (index.h(index.Host, { key: '7ce6f2c780af4f7bd4053970bff3e620fef4913a', role: "row", class: classList, ref: (el) => {
+        return (index.h(index.Host, { key: '0d099456d2016263a2bdcd42b46794e08adb64cf', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, index.h("slot", { key: 'b77362a23d8d69844560e7389e5cd7f6b5568d88' })));
+            } }, index.h("slot", { key: 'c923f7f8dc4bb8a4527693259d1a8b5932bb6c10' })));
     }
 };
 

package/dist/cjs/xpl-dynamic-table.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const DynamicTable = class {
     constructor(hostRef) {
@@ -56,7 +56,7 @@ const DynamicTable = class {
         this.updateColumnCount();
     }
     render() {
-        return (index.h("div", { key: 'aa9fdd991fca8dab538176a950636b52db539f7a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, index.h("slot", { key: 'd05d799f1a0d944398f1ae9992dbcbb56a52f184', name: "header" }), index.h("slot", { key: '7f212255dbf15e8358cef6097d55b973f73bd086', name: "body" })));
+        return (index.h("div", { key: '8f33da5fa8815400447b1690172bdaddd1079c1a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, index.h("slot", { key: '221aced83acf1fc4c904533eaedb1cd79914c5d3', name: "header" }), index.h("slot", { key: '6087119ce1499e94a30d09a1917d9371331f6add', name: "body" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/xpl-grid-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const GridItem = class {
     constructor(hostRef) {
@@ -16,7 +16,7 @@ const GridItem = class {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (index.h(index.Host, { key: 'd4e9ba6dc2049aa0a88d266934a9499daf66d0a9', class: className }, index.h("slot", { key: 'fef8f150e57fcc72147111fe10088d46adc324d8' })));
+        return (index.h(index.Host, { key: '43cf6dd21d3d06e2d8012b716e5db5aeee676aac', class: className }, index.h("slot", { key: 'e08e03e4152007df7158d7122f883da1050dfde7' })));
     }
 };
 

package/dist/cjs/xpl-grid.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const Grid = class {
     constructor(hostRef) {
@@ -28,7 +28,7 @@ const Grid = class {
         });
     }
     render() {
-        return index.h(index.Host, { key: '89b723cb2e01669c5edd69a3fbbbdce834f05dd3', class: "xpl-grid" });
+        return index.h(index.Host, { key: 'aeee950fb242a14f50ceda1d199cf427597b70f6', class: "xpl-grid" });
     }
     get container() { return index.getElement(this); }
 };

package/dist/cjs/xpl-large-card.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const LargeCard = class {
     constructor(hostRef) {
@@ -19,7 +19,7 @@ const LargeCard = class {
     render() {
         const contentSlot = 'graph-content';
         const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
-        return (index.h(index.Host, { key: '02b42037a8e13fb68df0f40a07804bad533f690b', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '27a8aa72e6e97d3918aa8a066c2528dab7466946', class: "xpl-large-card__header" }, index.h("header", { key: '9846eccca6988543cc671abe84f0a68e0dba06b0' }, index.h("slot", { key: '002ebff29d02550decb87f66609e941e6128c284', name: "title" }, this.name), this.link && (index.h("span", { key: 'a5c4dfe1c7149d95c5f4e6c291f61f75e49ce088', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: 'a12c2c98867a189cb6bcabfcbbc6a08f2691c763', icon: "chevron-right", size: 16 })))), this.description && (index.h("div", { key: 'd7ca785313811f6fd962804964a90a161118d936', class: "xpl-large-card__description" }, this.description))), index.h("dd", { key: 'fe57a3a97ffd2d124e74e20c88077ffb68ea938a', class: "xpl-large-card__body" }, hasContentSlot && index.h("slot", { key: '2ebfb5e288ca2426d3085c97cc3a0bec81a72c46', name: contentSlot }))));
+        return (index.h(index.Host, { key: '9b45179112de8d1ac309520425a1a5c340493487', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '4838c93a72df9ea794b3bbbd7f78f3e84a606109', class: "xpl-large-card__header" }, index.h("header", { key: 'eb4b2e8515be1e0763595e1cf646dc2b25bfb739' }, index.h("slot", { key: '62fdafe4b8ce03af5ff353c3ffa377fa547b572b', name: "title" }, this.name), this.link && (index.h("span", { key: 'ac0086a3402af5f12668a560ad418aaf40a56357', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '74eaffc571098a88d69d7248166889671ba441a2', icon: "chevron-right", size: 16 })))), this.description && (index.h("div", { key: 'd7d2499b7d8da9c09062ea5a456b588e52df2d82', class: "xpl-large-card__description" }, this.description))), index.h("dd", { key: '652e32e8b200e783f03608f97cbbcc70f59421e3', class: "xpl-large-card__body" }, hasContentSlot && index.h("slot", { key: '9d9f285d34bd8e2b6666577bd2023ae474636c4c', name: contentSlot }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/xpl-main-nav.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const MainNav = class {
     constructor(hostRef) {
@@ -18,7 +18,7 @@ const MainNav = class {
         this.navWidthHandler();
     }
     render() {
-        return (index.h(index.Host, { key: 'd8a79782b16a4e9f8ab3e6bf88c0314549aa501a', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, index.h("nav", { key: '64dcaed4426ad4f6590671425e7571df5a1cd1d9' }, index.h("header", { key: '7e97eee88a0cfff836aa40c9a2cba2a6dbfa59aa', "aria-label": "Sidebar Header" }, index.h("slot", { key: 'c281a9fbd5192cd0bda381ba52e55a9a1f6f063b', name: "logo" }), index.h("slot", { key: '988a49a475779b472cac084f20b7e73ed1528089', name: "brand-name" })), index.h("div", { key: '6fb1ff561b1136126e466ff86dfff9b124862eb2', class: "xpl-main-nav__main_section" }, index.h("slot", { key: 'bf5af4e8b47c8666f7014a8e63102601278c8038', name: "navigation" })), index.h("footer", { key: 'a836bd8d08638490d14ddd812cdc76b1dbe70392', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, index.h("slot", { key: '05143d5082b2f8d699e23611df2b584c90a423c5', name: "footer" })))));
+        return (index.h(index.Host, { key: '122bf1f28c4fb1e460185989b2d517f1ddbfb22b', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, index.h("nav", { key: '4ed8ce484b394adee98ac16056ebbabcadd31625' }, index.h("header", { key: '829b7904323aeea21922a8d4a8fa33141cfa7913', "aria-label": "Sidebar Header" }, index.h("slot", { key: '8a6ea72fa4a1b26f9825a36b4ac7e64c9dbf476c', name: "logo" }), index.h("slot", { key: 'bf049e9ee7b83af1c4ebfef21681edcb35de9364', name: "brand-name" })), index.h("div", { key: 'a0ce70ccf5e4bac6346711127fba5278963910c1', class: "xpl-main-nav__main_section" }, index.h("slot", { key: 'bce360027342a1ef3e009bad6bc28e44c64dbd04', name: "navigation" })), index.h("footer", { key: '0b5f2e6cc890e4257f5e5503302492a236950f87', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, index.h("slot", { key: '01dbe4d3834e1bc67b51108600688544e549ecde', name: "footer" })))));
     }
 };
 

package/dist/cjs/xpl-table-header-cell.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const TableHeaderCell = class {
     constructor(hostRef) {

package/dist/cjs/xpl-table-header.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const TableHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '1724195feab553e1f5f468352be234a5f867e75a', role: "row", class: "xpl-table-header" }, index.h("slot", { key: '14d458367da08aed53b57a4ccda1d26740922e05' })));
+        return (index.h(index.Host, { key: '7b36c9e640bd43ac38ea2625e7600e8699a13c5f', role: "row", class: "xpl-table-header" }, index.h("slot", { key: 'd03fe894a829477b6bf25dbd6dfa724b224b8d42' })));
     }
 };
 

package/dist/cjs/xpl-toggle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 var v4 = require('./v4-D4KzFnn8.js');
 
 const Toggle = class {
@@ -16,13 +16,13 @@ const Toggle = class {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (index.h(index.Host, { key: 'fe018e63a2c645565150c2b5494e057b24421cf3', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '461ba525112e90914f3d61b221f938ec94861b58', class: {
+        return (index.h(index.Host, { key: '0cf2e99934bbe447559fbe88cc61989bbfabbdea', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '7ab6e5535b8d88a5aabb5ced76faca68b2a8abcd', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: 'd764ac2dc9341192079f3791ce3e784c0d810c41', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: '0b8157e097f3890d6c521c399cf1f9c25514e341', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), index.h("input", { key: '9fd76e6a84d08db81941db0aaa742c4e0205bffa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && index.h("label", { key: 'fc58e8c3dba8a45a7c2aedda7daff3788f4dc0a0', htmlFor: this.id }, this.label)));
+            } }, this.description)))), index.h("input", { key: '3bcfe674974e16e50a38d17836da0aa1c49fd6dc', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && index.h("label", { key: 'cc91cdb86fb6bb4c7bfbabb6d47edf03adb53857', htmlFor: this.id }, this.label)));
     }
 };
 

package/dist/cjs/xpl-toolbar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DH6pgWru.js');
+var index = require('./index-BQ97-AWw.js');
 
 const Toolbar = class {
     constructor(hostRef) {
@@ -16,11 +16,11 @@ const Toolbar = class {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (index.h(index.Host, { key: '48056451ad54987de8d046a3892cc1011ed41bbb', class: {
+        return (index.h(index.Host, { key: '156bc52063283c17215e1d3a90c25939ae92685b', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, index.h("div", { key: '3c9680e4cf006dee69372d271a0720b6802767bc', class: "toolbar" }, index.h("p", { key: 'afcfba4a2d5c73d6bf602b94340280dcc28d6493', class: "selected-item-count" }, this.selectedItemCount, " Selected"), index.h("div", { key: 'fdadc34738fcf397a38772ab817c3a5bc1e5015f', class: "actions" }, index.h("slot", { key: 'b6571d83f8ac800143e4f9cd62559aac83c7e424', name: "actions-left" }), index.h("slot", { key: '30aa34da340647dbcb79f8862c5ca9647ebedb12', name: "actions-right" })))));
+            } }, index.h("div", { key: '184e28d57a16d8ba6e10f29a95c931a036f44515', class: "toolbar" }, index.h("p", { key: 'ff6a7137db216c71859eac4398bbaf8bc6fe18f9', class: "selected-item-count" }, this.selectedItemCount, " Selected"), index.h("div", { key: 'a610539a08383a3d1d3dad8d95a8b75f43eaf1a3', class: "actions" }, index.h("slot", { key: 'dd8ea3150b40926ab40f36d38770daaa969a6fff', name: "actions-left" }), index.h("slot", { key: 'b51f8940fb52dd6880841a917574f782e0d0c72c', name: "actions-right" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -2,9 +2,9 @@
   "entries": [
     "components/xpl-accordion/xpl-accordion.js",
     "components/xpl-application-shell/xpl-application-shell.js",
+    "components/xpl-badge/xpl-badge.js",
     "components/xpl-avatar/xpl-avatar.js",
     "components/xpl-backdrop/xpl-backdrop.js",
-    "components/xpl-badge/xpl-badge.js",
     "components/xpl-banner/xpl-banner.js",
     "components/xpl-button/xpl-button.js",
     "components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js",
@@ -33,41 +33,47 @@
     "components/xpl-input/xpl-input-date/xpl-input-date.js",
     "components/xpl-input/xpl-input-file/xpl-input-file.js",
     "components/xpl-input/xpl-input-phone/xpl-input-phone.js",
+    "components/xpl-input/xpl-input-search/xpl-input-search.js",
     "components/xpl-input/xpl-input-time/xpl-input-time.js",
     "components/xpl-large-card/xpl-large-card.js",
     "components/xpl-list/xpl-list.js",
+    "components/xpl-radio/xpl-radio.js",
+    "components/xpl-list/xpl-list-item/xpl-list-item.js",
     "components/xpl-main-nav/xpl-main-nav.js",
     "components/xpl-modal/xpl-modal.js",
     "components/xpl-nav-item/xpl-nav-item.js",
     "components/xpl-pagination/xpl-pagination.js",
     "components/xpl-panel/xpl-panel.js",
     "components/xpl-popover/xpl-popover.js",
-    "components/xpl-progress/xpl-progress.js",
     "components/xpl-progress-bar/xpl-progress-bar.js",
-    "components/xpl-radio/xpl-radio.js",
+    "components/xpl-progress-indicator/xpl-progress-indicator.js",
     "components/xpl-secondary-nav/xpl-secondary-nav.js",
     "components/xpl-select/xpl-select.js",
     "components/xpl-side-nav/xpl-side-nav.js",
     "components/xpl-side-nav/xpl-side-nav-item/xpl-side-nav-item.js",
     "components/xpl-skeleton/xpl-skeleton.js",
     "components/xpl-slideout/xpl-slideout.js",
+    "components/xpl-spotlight/xpl-spotlight.js",
     "components/xpl-tab/xpl-tab.js",
     "components/xpl-tab-panel/xpl-tab-panel.js",
+    "components/xpl-tabs/xpl-tabs.js",
     "components/xpl-table/xpl-table.js",
     "components/xpl-table-header/xpl-table-header.js",
     "components/xpl-table-header-cell/xpl-table-header-cell.js",
-    "components/xpl-tabs/xpl-tabs.js",
     "components/xpl-tag/xpl-tag.js",
     "components/xpl-toast/xpl-toast.js",
     "components/xpl-toggle/xpl-toggle.js",
     "components/xpl-toolbar/xpl-toolbar.js",
     "components/xpl-tooltip/xpl-tooltip.js",
+    "components/xpl-top-nav/xpl-top-nav.js",
+    "components/xpl-top-nav/xpl-top-nav-item/xpl-top-nav-item.js",
+    "components/xpl-top-nav/xpl-nav-header-menu/xpl-nav-header-menu.js",
     "components/xpl-utility-bar/xpl-utility-bar.js"
   ],
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.2",
+    "version": "4.43.3",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

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

@@ -50,13 +50,13 @@ export class Accordion {
             bordered: `xpl-accordion--border-bordered${this.expanded ? '--expanded' : ''}`,
             bottom: `xpl-accordion--border-bottom${this.expanded ? '--expanded' : ''}`,
         }[this.borderType];
-        return (h(Host, { key: '7befc24f997853bca9fc8c5b22b0262207de0b8b', class: `xpl-accordion ${accordionBorder}` }, h("button", { key: 'c440a2bf8612a8f50e83eb27fc5ea1779c3c2916', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, h("header", { key: '3744eb9f9ff25f1b24abeb5af519cdac58a1720d', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, h("slot", { key: '651407c5e52af7506505199e76d118873851726a', name: "heading" }, this.header), h("xpl-icon", { key: '218043e9fada73e214b719087a9b27a5761f52a3', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), h("div", { key: '744f86d743fd69fab45fd34868713ecdbc41a2a1', class: "xpl-accordion-description" }, h("slot", { key: 'bf7a050f991db70f7b73755cd97a3300a8384723', name: "description" }, this.description))), h("section", { key: 'b095ddafce8622eb0a9ac9fab100989300cf589c', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
+        return (h(Host, { key: 'bd94adc64eebb9b2b37b899700457a88fa00bdf0', class: `xpl-accordion ${accordionBorder}` }, h("button", { key: '3801db3bfa5c3a8c6ac0c21c20f60a1519ca4168', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, h("header", { key: '80cdadc37c28fea139f8ec21c770760bf3e25050', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, h("slot", { key: '28341a76482e2ddb2b8c1f277e48816a6f8d83d4', name: "heading" }, this.header), h("xpl-icon", { key: '9b0cde7d7927677dcd545783accace4a9cdcce03', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), h("div", { key: '1d2be2ffce23d2cfc017da95634d046dc66e5121', class: "xpl-accordion-description" }, h("slot", { key: 'e993274ea2f6963290a2015b3849bda8ee7f1f3d', name: "description" }, this.description))), h("section", { key: '6054b44f3b027feca7567f1bf13b06e78a78fe1a', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
                 ? {
                     none: '',
                     bordered: 'xpl-accordion-content--shown-bordered',
                     bottom: 'xpl-accordion-content--shown-border-bottom',
                 }[this.borderType]
-                : ''}` }, h("slot", { key: '377ce332550362503d3d7b4cc90ba452b44e00a1', name: "content" }))));
+                : ''}` }, h("slot", { key: '53e22f8fcd1c3ebb2354bbc3d01e30ec5cfa804c', name: "content" }))));
     }
     static get is() { return "xpl-accordion"; }
     static get properties() {

package/dist/collection/components/xpl-application-shell/xpl-application-shell.js

@@ -35,7 +35,7 @@ export class ApplicationShell {
         navClasses += this.navOpen
             ? ` xpl-application-shell__nav--${this.navWidth}--open`
             : ` xpl-application-shell__nav--${this.navWidth}`;
-        return (h(Host, { key: '7a06051142cc71f5a900e65562e464f5580f369e', class: applicationShellClasses }, h("div", { key: '00cb4f2294999e77bc88aa32917287a93989ceb3', class: navClasses }, h("slot", { key: 'de0a3f5415273c4d36390b6e345e9c046ebeda05', name: "nav" })), h("div", { key: '605faac64e0b770b2d3e52d0b6f169898de827bc', class: "xpl-application-shell__subnav" }, h("slot", { key: '040b8b6f5aa7642636b33f65f2eff6f1070b1b2f', name: "subnav" })), h("div", { key: 'ee1e3e5c51d4e048fd4fda7bf6e438d29c8c2ade', class: "xpl-application-shell__utility" }, h("slot", { key: '6118de3716d41e9f8cc03abb5efd4c2e8541adf7', name: "utility" })), h("div", { key: '3aa64a066e680e74bac8b988f579d51593bc3ace', class: "xpl-application-shell__content" }, h("slot", { key: 'aba788b0aa8f8ab92bb5c577b5951c98d21c9f36', name: "content" })), h("xpl-backdrop", { key: 'f72d69bbfe9171193293148810700e9ff00e372d', onClick: () => this.navToggleHandler(), class: {
+        return (h(Host, { key: 'f61e8399f5a5e935354c817ee0d1386afcddce28', class: applicationShellClasses }, h("div", { key: '4886a782d1511d3aac9df0a90afc38351b94d4fd', class: navClasses }, h("slot", { key: 'd80279f234d498eb51491bd1d6850d7babfd6ece', name: "nav" })), h("div", { key: 'dd26f273261026555a3f73885fd04ffdbbf871cb', class: "xpl-application-shell__subnav" }, h("slot", { key: '3b120224a8d1cb30503514befeb96e3a08fc22ba', name: "subnav" })), h("div", { key: '7ac6b8f10b2dca85e774e1117f9117952a3052cf', class: "xpl-application-shell__utility" }, h("slot", { key: 'd9d4b15e7c3e7bec0edc237df3634c8fd2648df4', name: "utility" })), h("div", { key: '00ee0b5da796ea84731e740a58b162dad8250696', class: "xpl-application-shell__content" }, h("slot", { key: 'bf997f59491a08597089a0531cfecf90c703f565', name: "content" })), h("xpl-backdrop", { key: '84264e5a5da96be74547610e5b8d45195014d34c', onClick: () => this.navToggleHandler(), class: {
                 'xpl-application-shell__backdrop--open': this.navOpen,
             }, relative: true })));
     }

package/dist/collection/components/xpl-avatar/avatar.stories.js

@@ -1,132 +1,147 @@
-import { v4 as uuid } from "uuid";
 export default {
     title: 'Components/Avatar',
 };
-const script = ({ id }) => `
-    (function() {
-        const avatar = document.getElementById("${id}");
-        avatar.addEventListener('click', e => e.preventDefault());
-    })();
-`;
-export const Avatar = ({ placeholder, name, size, color, status, link, disabled }) => {
-    const id = uuid();
-    let attrs = '';
-    if (placeholder === '')
-        attrs += ` src="https://placebear.com/128/128"`;
-    if (name !== '')
-        attrs += ` name="${name}"`;
-    if (size !== 'default')
-        attrs += ` size="${size}"`;
-    if (color !== 'secondary')
-        attrs += ` color="${color}"`;
-    if (status !== 'none')
-        attrs += ` status="${status}"`;
-    if (link)
-        attrs += ` href="#"`;
-    if (disabled)
-        attrs += ` disabled`;
-    return `<xpl-avatar id="${id}"${attrs}>${placeholder}</xpl-avatar><script>${script({
-        id,
-    })}</script>`;
+const defaultGroupData = [
+    { name: 'Alex', color: 'green' },
+    { name: 'Jordan', color: 'yellow' },
+    { name: 'Sam', color: 'pink' },
+    { src: 'https://placebear.com/128/128', name: 'D' },
+    { src: 'https://placebear.com/128/128', name: 'E' },
+];
+function statusToBadgeVariant(s) {
+    var _a;
+    const map = {
+        active: 'green',
+        inactive: 'gray',
+        warning: 'red',
+    };
+    return (_a = map[s]) !== null && _a !== void 0 ? _a : s;
+}
+function buildAttrs(args) {
+    var _a;
+    const attrs = [];
+    if (args.variant && args.variant !== 'default') {
+        attrs.push(`variant="${args.variant}"`);
+    }
+    if (args.size) {
+        attrs.push(`size="${args.size}"`);
+    }
+    if (args.color) {
+        attrs.push(`color="${args.color}"`);
+    }
+    if (args.variant === 'group') {
+        const data = JSON.stringify((_a = args.groupData) !== null && _a !== void 0 ? _a : defaultGroupData);
+        attrs.push(`group-data='${data.replace(/'/g, '&#39;')}'`);
+    }
+    else {
+        if (args.src)
+            attrs.push(`src="${args.src}"`);
+        if (args.name)
+            attrs.push(`name="${args.name}"`);
+        if (args.variant === 'with-text' && args.subText) {
+            attrs.push(`sub-text="${args.subText}"`);
+        }
+        if (args.status) {
+            attrs.push(`status="${args.status}"`);
+        }
+        if (args.href)
+            attrs.push('href="https://xplor.com/"');
+        if (args.disabled)
+            attrs.push('disabled');
+    }
+    return attrs.join(' ');
+}
+export const Avatar = (args) => {
+    const attrs = buildAttrs(args);
+    return `<xpl-avatar ${attrs}></xpl-avatar>`;
 };
 Avatar.argTypes = {
-    placeholder: {
-        type: { name: 'string', required: false },
-    },
-    name: {
-        type: { name: 'string', required: false },
+    variant: {
+        options: ['default', 'profile', 'group', 'with-text'],
+        control: { type: 'select' },
     },
     size: {
-        options: ['default', 'md', 'sm'],
-        control: {
-            type: 'select',
-        },
+        options: ['md', 'sm'],
+        control: { type: 'select' },
     },
     color: {
         options: ['green', 'yellow', 'pink', 'primary', 'secondary'],
-        control: {
-            type: 'select',
-        },
+        control: { type: 'select' },
     },
     status: {
-        options: ['none', 'active', 'warning', 'inactive'],
-        control: {
-            type: 'select',
-        },
-    },
-    link: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    disabled: {
-        control: {
-            type: 'boolean',
-        },
+        options: [
+            'purple',
+            'green',
+            'yellow',
+            'orange',
+            'gray',
+            'red',
+            'blue',
+            'active',
+            'warning',
+            'inactive',
+        ],
+        control: { type: 'select' },
+        description: 'Status dot (badge palette). Legacy: active→green, warning→red, inactive→gray (deprecated, removed next major).',
     },
+    src: { control: { type: 'text' } },
+    name: { control: { type: 'text' } },
+    subText: { control: { type: 'text' }, description: 'Secondary text (with-text variant only)' },
+    href: { control: { type: 'boolean' }, description: 'Make avatar a link' },
+    disabled: { control: { type: 'boolean' } },
+    groupData: { control: { type: 'object' }, description: 'Array of items (group variant only)' },
 };
 Avatar.args = {
-    placeholder: '',
-    name: 'Firstname Lastname',
-    size: 'default',
-    color: 'secondary',
-    status: 'none',
-    link: false,
+    variant: 'default',
+    src: 'https://placebear.com/128/128',
+    name: 'Katie Wilson',
+    subText: 'katie01@email.com',
+    size: undefined,
+    color: undefined,
+    status: undefined,
+    href: false,
     disabled: false,
+    groupData: defaultGroupData,
 };
-Avatar.parameters = {
+const commonParameters = {
     layout: 'centered',
-    'web-component': {
-        render: (({ placeholder, name, size, color, status, link, disabled }) => {
-            let attrs = '';
-            if (placeholder === '')
-                attrs += ` src="image.png"`;
-            if (name !== '')
-                attrs += ` name="${name}"`;
-            if (size !== 'default')
-                attrs += ` size="${size}"`;
-            if (color !== 'secondary')
-                attrs += ` color="${color}"`;
-            if (status !== 'none')
-                attrs += ` status="${status}"`;
-            if (link)
-                attrs += ` href="#"`;
-            if (disabled)
-                attrs += ` disabled`;
-            return `<xpl-avatar${attrs}>${placeholder}</xpl-avatar>`;
-        })(Avatar.args),
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1394',
     },
-    html: {
-        render: (({ placeholder, name, size, color, status, link, disabled }) => {
-            let className = 'xpl-avatar';
-            if (size)
-                className += ` xpl-avatar--${size}`;
-            if (color)
-                className += ` xpl-avatar--${color}`;
-            let attrs = '';
-            if (link)
-                attrs += ` href="#"`;
-            const tag = link && !disabled ? 'a' : 'div';
-            if (link && disabled) {
-                className += ' xpl-avatar--disabled';
-                attrs = '';
-            }
+};
+Avatar.parameters = Object.assign(Object.assign({}, commonParameters), { 'web-component': {
+        render: Avatar(Avatar.args),
+    }, html: {
+        render: ((args) => {
+            const hasImage = !!args.src;
+            const name = args.name || 'Profile';
+            const placeholder = !hasImage
+                ? args.name
+                    ? (() => {
+                        var _a, _b, _c;
+                        const p = args.name.trim().split(/\s+/).filter(Boolean);
+                        if (p.length === 0)
+                            return '';
+                        if (p.length === 1)
+                            return p[0].slice(0, 3).toUpperCase();
+                        return `${(_a = p[0][0]) !== null && _a !== void 0 ? _a : ''}${p.length > 2 ? ((_b = p[1][0]) !== null && _b !== void 0 ? _b : '') : ''}${(_c = p[p.length - 1][0]) !== null && _c !== void 0 ? _c : ''}`
+                            .slice(0, 3)
+                            .toUpperCase();
+                    })()
+                    : 'KW'
+                : '';
             return `
-                <${tag} class="${className}"${attrs}>
+            <div class="xpl-avatar ${args.color ? `xpl-avatar--${args.color}` : ''} ${args.size ? `xpl-avatar--${args.size}` : ''}">
                 <div>
-                ${!placeholder
-                ? `  <img alt="${name}" src="image.png" />`
-                : `  <div class="xpl-avatar__placeholder">${placeholder}</div>`}${status !== 'none'
-                ? `
-                            <div class="xpl-avatar__dot--${status}"></div>`
+                    ${hasImage
+                ? `<img alt="${name}" src="${args.src}">`
+                : `<div class="xpl-avatar__placeholder" role="img" aria-label="${name}">${placeholder}</div>`}
+                    ${args.status
+                ? `<xpl-badge dot-only bordered variant="${statusToBadgeVariant(args.status)}" aria-hidden="true"></xpl-badge>`
                 : ''}
+                </div>
             </div>
-                </${tag}>
             `;
         })(Avatar.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1394&p=f&t=aZipOZlFAFwtMW1r-11',
-    },
-};
+    } });