@xplortech/apollo-core 2.4.2 → 2.5.0

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

@@ -23,9 +23,9 @@ const XplDynamicTableCell = class {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (index.h(index.Host, { key: 'c48652542dadaa98dbfe8c1ca51c5be67c279091', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (index.h(index.Host, { key: '639f0a42ea0189fb4c269de1b76c5491729f868c', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, index.h("slot", { key: '3b6b21c64807f8e7dca3b18def3bb373a3778506' })));
+            } }, index.h("slot", { key: '29864a738aa7d5e9498195ce0d22bb8d78e39989' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -28,9 +28,9 @@ const XplDynamicTableRow = class {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (index.h(index.Host, { key: '3f514b6ebd0c519329c1f88fd7a06681fd263c20', role: "row", class: classList, ref: (el) => {
+        return (index.h(index.Host, { key: '4969ae6223aa4f6604d20e657d390d8ec43eb9bd', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, index.h("slot", { key: 'acfe30cd4d852f2787ac18376b8b491731a736d4' })));
+            } }, index.h("slot", { key: '244d34612847408ddb9e0d718b1e5916b7e24b2d' })));
     }
 };
 

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

@@ -56,7 +56,7 @@ const XplDynamicTable = class {
         this.updateColumnCount();
     }
     render() {
-        return (index.h("div", { key: '56ec7b395ff5f4dc42970e042ca8771b6fc2095a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, index.h("slot", { key: '38877bbaeaa319a9c876478f09dadf06248ab8ae', name: "header" }), index.h("slot", { key: '9c241ad399ac3e4e58a913d24174fe581bfab1bc', name: "body" })));
+        return (index.h("div", { key: 'f49634b51fd6fb49bcb75cc4247f683ff99d6b99', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, index.h("slot", { key: 'e5cd66e212a41ce26dfaccae634ab7ee22ba9910', name: "header" }), index.h("slot", { key: '07e1fbec46f08e46f728340291510992d21f71a4', name: "body" })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -16,7 +16,7 @@ const XplGridItem = 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: 'e88447c2042c92809a00464c721ffccbe3f421f7', class: className }, index.h("slot", { key: 'ba97ddd92e967cc9c883bcd462a4303015015160' })));
+        return (index.h(index.Host, { key: '4a3a254b51eae0907baf74c383b0d2b60017b69b', class: className }, index.h("slot", { key: 'b23f50ff733b9f3009eda4a3569a28b0636e76f4' })));
     }
 };
 

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

@@ -28,7 +28,7 @@ const XplGrid = class {
         });
     }
     render() {
-        return index.h(index.Host, { key: 'ebca0f4cd2335a920d6e070a5ea8e6ca32e06fb2', class: "xpl-grid" });
+        return index.h(index.Host, { key: 'b7adecdd36342641869726ffa094578c1272dc1e', class: "xpl-grid" });
     }
     get container() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -14,7 +14,6 @@
     "components/xpl-choicelist/xpl-choicelist.js",
     "components/xpl-content-area/xpl-content-area.js",
     "components/xpl-dashboard/xpl-dashboard.js",
-    "components/xpl-icon/xpl-icon.js",
     "components/xpl-data-card/xpl-data-card.js",
     "components/xpl-divider/xpl-divider.js",
     "components/xpl-dropdown/xpl-dropdown.js",
@@ -27,6 +26,7 @@
     "components/xpl-grid/xpl-grid.js",
     "components/xpl-grid-item/xpl-grid-item.js",
     "components/xpl-header-accordion/xpl-header-accordion.js",
+    "components/xpl-icon/xpl-icon.js",
     "components/xpl-input/xpl-input.js",
     "components/xpl-input/xpl-input-color/xpl-input-color.js",
     "components/xpl-input/xpl-input-date/xpl-input-date.js",

package/dist/collection/components/xpl-data-card/xpl-data-card.js

@@ -31,8 +31,8 @@ export class XplDataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: '7e13a0c8bd9cfd9fcde4fddb5f657718fb03a9d4', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '57bf426d9b7e4c4e0d6e2fdea37d9dcdb654b893', class: headerClasses }, h("header", { key: '8c7135e6b2be28073b597ba6f007f341e2e1a5ad' }, !!this.leadingIcon && this.icon && (h("span", { key: '8ee90dabd30e9ce6d27f5d973d966df11d6f973c', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '2e59ef2231055ccc724ffd4a8fc7fe7bef2b07af', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '7d110d59bdd258a204dbae64ed0c9d1582c17d6c', name: "title" }, this.name)), this.link && (h("span", { key: '12b7bfda22bd7d17a4393bbd8a1cef61136a2944', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'aaaa7e0caba5bc13d5fe491e4c66d5344788ddec', icon: "chevron-right", size: 16 })))), h("dd", { key: 'cfd5cae926c7858f96a1f41a091e404b0f4ee600', class: "xpl-data-card__body" }, h("div", { key: '0e16294a3965d915e3299db6ca51d1c9d4afdc35', class: "xpl-data-card__left" }, h("span", { key: '3b55a4f2fcadd97f787309dfd009ef551376b613', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: '2e5e3f50a45719b9ceae4a762e428691373f8b5c', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: 'dbe07c3e040026f21f35ec47bd3eb912114d97b5', class: "xpl-data-card__right" }, h("slot", { key: 'aa6c8ca3de0ada039e60dcd29e89c3fcf55cc019', name: contentSlot }))))));
+        return (h(Host, { key: 'd8e5d213c87a8d5270f34d6bd60a698e04dd852f', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '3cd7a7ef77c90e6caefdfa0a7eccc132c07871a2', class: headerClasses }, h("header", { key: '7f85f31d60d7022ec75c3d3b164391e11059662b' }, !!this.leadingIcon && this.icon && (h("span", { key: '192e6c0dc871185a7f2845a14c38b1dc6ad04702', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '9d289a6db0fed0787a2c5cd5de6c57e92203a3fd', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'f1b56a29e648ba29e7f4b0c0493c8e27d410d843', name: "title" }, this.name)), this.link && (h("span", { key: '92b7cab6af5ca4f0664902ea359b3dfb7568e5b6', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '1326fdb0659191f1c2ff7fbb137eed5c4d5c4155', icon: "chevron-right", size: 16 })))), h("dd", { key: 'fce45e8e2d908a7d23e95a76cc0bc2334cd729b1', class: "xpl-data-card__body" }, h("div", { key: '1341065e9f0cbd91b82d239a87aa9818f237334b', class: "xpl-data-card__left" }, h("span", { key: '0dff4e467f439d991f3da594507e0e4310bdecee', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'cb5fd1c7897ac6bce5de93082f1ca333e826d53d', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '83f568edc52ec6a2e0a5b63544e2849dde91318e', class: "xpl-data-card__right" }, h("slot", { key: 'a27fd65217f4817051ba955890582bafb6050f97', name: contentSlot }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {
@@ -156,22 +156,15 @@ export class XplDataCard {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IconName",
-                    "resolved": "\"ai\" | \"alarm-clock\" | \"alert-circle\" | \"alert-hex\" | \"alert-triangle\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-right\" | \"award\" | \"bell\" | \"bell-slash\" | \"bookmark\" | \"bookmark-slash\" | \"briefcase\" | \"calendar\" | \"calendar-month\" | \"calendar-week\" | \"camera\" | \"cash-register\" | \"check\" | \"check-circle\" | \"check-circle-fill\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevrons-down\" | \"chevrons-left\" | \"chevrons-right\" | \"chevrons-up\" | \"circle-slash\" | \"clipboard\" | \"clock\" | \"code-square\" | \"comment\" | \"comment-alt\" | \"comment-check\" | \"comment-closed\" | \"comment-discussion\" | \"comment-minus\" | \"comment-plus\" | \"comment-x\" | \"compass\" | \"credit-card\" | \"dash\" | \"dollar-bill\" | \"dollar-sign\" | \"download\" | \"drag\" | \"dumbbells\" | \"duplicate\" | \"edit\" | \"expand\" | \"eye\" | \"eye-closed\" | \"eye-droper\" | \"file\" | \"flag\" | \"folder\" | \"gear\" | \"gift\" | \"globe\" | \"graph\" | \"graph-bar\" | \"grid\" | \"heart\" | \"home\" | \"image\" | \"info\" | \"kebab-horizontal\" | \"kebab-vertical\" | \"key\" | \"law\" | \"layers\" | \"left-align\" | \"light-bulb\" | \"line\" | \"link\" | \"link-external\" | \"list-ordered\" | \"list-unordered\" | \"loader\" | \"location\" | \"lock\" | \"mail\" | \"mail-check\" | \"mail-closed\" | \"mail-minus\" | \"mail-plus\" | \"mail-x\" | \"map\" | \"megaphone\" | \"minus-circle\" | \"moon\" | \"navigation\" | \"organization\" | \"package\" | \"paperclip\" | \"pencil\" | \"people\" | \"percent\" | \"person\" | \"person-add\" | \"person-circle\" | \"phone\" | \"phone-minus\" | \"phone-pause\" | \"phone-plus\" | \"phone-slash\" | \"phone-x\" | \"pie-chart\" | \"pin\" | \"pin-circle\" | \"pin-circle-filled\" | \"pin-filled\" | \"play\" | \"plus\" | \"plus-circle\" | \"printer\" | \"question\" | \"refresh-cw\" | \"repeat\" | \"right-align\" | \"rocket\" | \"rotate-ccw\" | \"rotate-cw\" | \"save\" | \"search\" | \"share\" | \"shopping-bag\" | \"shopping-cart\" | \"sign-in\" | \"sign-out\" | \"signature\" | \"sliders-h\" | \"sliders-v\" | \"sort\" | \"star\" | \"star-fill\" | \"star-half-fill\" | \"sun\" | \"tag\" | \"three-bars\" | \"time-reverse\" | \"tools\" | \"trashcan\" | \"triangle-down\" | \"triangle-left\" | \"triangle-right\" | \"triangle-up\" | \"trophy\" | \"unlock\" | \"upload\" | \"video-camera\" | \"x\" | \"x-circle\" | \"x-circle-fill\" | \"zoom-in\" | \"zoom-out\"",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../xpl-icon/xpl-icon",
-                            "id": "src/components/components/xpl-icon/xpl-icon.tsx::IconName",
-                            "referenceLocation": "IconName"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "An optional icon leading the header.\nUses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown."
+                    "text": "An optional icon leading the header.\nUses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
                 },
                 "getter": false,
                 "setter": false,
@@ -201,22 +194,15 @@ export class XplDataCard {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IconName",
-                    "resolved": "\"ai\" | \"alarm-clock\" | \"alert-circle\" | \"alert-hex\" | \"alert-triangle\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-right\" | \"award\" | \"bell\" | \"bell-slash\" | \"bookmark\" | \"bookmark-slash\" | \"briefcase\" | \"calendar\" | \"calendar-month\" | \"calendar-week\" | \"camera\" | \"cash-register\" | \"check\" | \"check-circle\" | \"check-circle-fill\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevrons-down\" | \"chevrons-left\" | \"chevrons-right\" | \"chevrons-up\" | \"circle-slash\" | \"clipboard\" | \"clock\" | \"code-square\" | \"comment\" | \"comment-alt\" | \"comment-check\" | \"comment-closed\" | \"comment-discussion\" | \"comment-minus\" | \"comment-plus\" | \"comment-x\" | \"compass\" | \"credit-card\" | \"dash\" | \"dollar-bill\" | \"dollar-sign\" | \"download\" | \"drag\" | \"dumbbells\" | \"duplicate\" | \"edit\" | \"expand\" | \"eye\" | \"eye-closed\" | \"eye-droper\" | \"file\" | \"flag\" | \"folder\" | \"gear\" | \"gift\" | \"globe\" | \"graph\" | \"graph-bar\" | \"grid\" | \"heart\" | \"home\" | \"image\" | \"info\" | \"kebab-horizontal\" | \"kebab-vertical\" | \"key\" | \"law\" | \"layers\" | \"left-align\" | \"light-bulb\" | \"line\" | \"link\" | \"link-external\" | \"list-ordered\" | \"list-unordered\" | \"loader\" | \"location\" | \"lock\" | \"mail\" | \"mail-check\" | \"mail-closed\" | \"mail-minus\" | \"mail-plus\" | \"mail-x\" | \"map\" | \"megaphone\" | \"minus-circle\" | \"moon\" | \"navigation\" | \"organization\" | \"package\" | \"paperclip\" | \"pencil\" | \"people\" | \"percent\" | \"person\" | \"person-add\" | \"person-circle\" | \"phone\" | \"phone-minus\" | \"phone-pause\" | \"phone-plus\" | \"phone-slash\" | \"phone-x\" | \"pie-chart\" | \"pin\" | \"pin-circle\" | \"pin-circle-filled\" | \"pin-filled\" | \"play\" | \"plus\" | \"plus-circle\" | \"printer\" | \"question\" | \"refresh-cw\" | \"repeat\" | \"right-align\" | \"rocket\" | \"rotate-ccw\" | \"rotate-cw\" | \"save\" | \"search\" | \"share\" | \"shopping-bag\" | \"shopping-cart\" | \"sign-in\" | \"sign-out\" | \"signature\" | \"sliders-h\" | \"sliders-v\" | \"sort\" | \"star\" | \"star-fill\" | \"star-half-fill\" | \"sun\" | \"tag\" | \"three-bars\" | \"time-reverse\" | \"tools\" | \"trashcan\" | \"triangle-down\" | \"triangle-left\" | \"triangle-right\" | \"triangle-up\" | \"trophy\" | \"unlock\" | \"upload\" | \"video-camera\" | \"x\" | \"x-circle\" | \"x-circle-fill\" | \"zoom-in\" | \"zoom-out\"",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../xpl-icon/xpl-icon",
-                            "id": "src/components/components/xpl-icon/xpl-icon.tsx::IconName",
-                            "referenceLocation": "IconName"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "An optional icon leading the small stat.\nUses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown."
+                    "text": "An optional icon leading the small stat.\nUses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
                 },
                 "getter": false,
                 "setter": false,
@@ -254,7 +240,7 @@ export class XplDataCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "set a variant that changes the color of the small stat based on the following rules:\n \n If trend is positive and greater than 0.5% color is green and up-right arrow is used \n\n If the trend is between -0.5% and 0.5% then its neutral the color is gray\n\n If the trend is negative less than -0.5% the color is red and down right arrow is used"
+                    "text": "set a variant that changes the color of the small stat based on the following rules:\n\n If trend is positive and greater than 0.5% color is green and up-right arrow is used\n\n If the trend is between -0.5% and 0.5% then its neutral the color is gray\n\n If the trend is negative less than -0.5% the color is red and down right arrow is used"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -3,7 +3,7 @@ export class XplDivider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: 'b4638a60d33219cb26494e124311a45226ee1fea', class: className }, h("span", { key: 'b399d389866e86f9a750cdd26a52c38cd3f9fa00' }, h("slot", { key: '5a1f60fea3cd316eb1bddd0849fbb3489bf2c8b4' }))));
+        return (h(Host, { key: '8f8b9899bfc602454687020e4547ba98e6c87cf4', class: className }, h("span", { key: 'd64ecfd54eb6ca33a05e271c52a7df5960f9c0df' }, h("slot", { key: '5e62ba9c682428dab560f67603343d9332bc02a5' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

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

@@ -76,6 +76,10 @@ Simple.parameters = {
     'web-component': {
         render: Simple(Simple.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=21057-7882&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };
 export const SimpleWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
     const attributes = {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js

@@ -20,7 +20,7 @@ export class XplDropdownGroup {
                 var { groupName: optsGroupName } = _a, properties = __rest(_a, ["groupName"]);
                 return optsGroupName ? (h("xpl-dropdown-group", Object.assign({ label: optsGroupName }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
             });
-        return (h(Host, { key: 'f30203f92fbd12a8d7722dc24d7686d8a0c14a46', role: "group", "aria-label": groupName }, h("li", { key: 'd0ea4ff252a095271a0377455f2f33ebe38ae85e', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '8ae6c88ff139d0aef14589087b6271965d671336', label: groupName }), h("ul", { key: '265c9826177e976b142acc097e35249722c753a3', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '7f437bdbef703b6aba3fbc307c8bb1b6f6122ea3', name: "options" })))));
+        return (h(Host, { key: 'e1bd6d56ea5501e48d8f7fba91af32fbc223d343', role: "group", "aria-label": groupName }, h("li", { key: '543d3350cce47b4e96f78c6a411877110a27c842', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '85b5c8675bb3b2eecdb0dc3ffbf09dc9bd824ceb', label: groupName }), h("ul", { key: '9dfcd1a43cca4fd431b052e438743d24f872f248', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'd5d7d5d03bfde4306f1a8d861f7f2308eaac2bf6', name: "options" })))));
     }
     static get is() { return "xpl-dropdown-group"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class XplDropdownHeading {
     render() {
-        return (h(Host, { key: '563a7656647f84782bdf61d19f3878407f83675a', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: 'a0b116e7b0b85966e10de0dc4a363fa7e2e3b769' }, this.label || h("slot", { key: 'c79235054e087811e80dadf35a4e490658ece3c5', name: "heading" }))));
+        return (h(Host, { key: '41de08a2e945b9d6412264a44a04dd65bc125276', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '15b526b8a4ec46059d8edd3aed61c82d6bc79d64' }, this.label || h("slot", { key: '5b8c05d504e56c2852fa8439b15012c73552c190', name: "heading" }))));
     }
     static get is() { return "xpl-dropdown-heading"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js

@@ -43,11 +43,11 @@ export class XplDropdownOption {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle } = this;
-        return (h(Host, { key: 'c2a8b75e28785e9adb9c7419a96da73317f9e546', class: {
+        return (h(Host, { key: '5065b45c91f2e8c385c70726b4624b62e609dc61', class: {
                 'xpl-dropdown-option': true,
                 'xpl-dropdown-option--disabled': isDisabled,
                 'xpl-dropdown-option--selected': isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: '1ebbfe8cb270223284ccb98980fba11ecb6f45e7', class: "xpl-dropdown-list-item" }, label || h("slot", { key: '4e26c99b1a73e2b6d64865df01410050732fa517', name: "option" }), subtitle && h("span", { key: 'b039510ca92dada66455f4ea1a379877f26ffabe', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: '3a9493d1f0e2f9eff727f001d08c65477372e58b', class: "xpl-dropdown-list-item" }, label || h("slot", { key: 'fbebc2fd7f45d9abf4a2be0b306d92b3de8cb090', name: "option" }), subtitle && h("span", { key: '987104f21b1843e7350bbd4d8607fcdb1a580131', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {

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

@@ -166,12 +166,12 @@ export class XplDropdown {
                 var { groupName, options: opts, subtitle } = _a, properties = __rest(_a, ["groupName", "options", "subtitle"]);
                 return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
             });
-        return (h(Host, { key: 'd576d4fbedb6a4a4a3da81b06ef881e1b1c6afe2', "aria-expanded": isOpen, class: {
+        return (h(Host, { key: '82f0becf57013a4f830e7c4aa56e3653b5eb43c5', "aria-expanded": isOpen, class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
-            }, role: "listbox" }, h("ul", { key: '78bc70d74413a238f0a5366fd607361e5157eafe', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '9128e7407413335b0699434e68e2aefafd222fc2', name: "options" }))));
+            }, role: "listbox" }, h("ul", { key: '59c584beb1e538c2dff25039e8513de5865a80f1', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'ff121c50de1a809031ea8be1d271b65946c2fa9a', name: "options" }))));
     }
     static get is() { return "xpl-dropdown"; }
     static get properties() {

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

@@ -158,4 +158,8 @@ DynamicTable.parameters = {
             </div>
         `,
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
+    },
 };

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

@@ -51,7 +51,7 @@ export class XplDynamicTable {
         this.updateColumnCount();
     }
     render() {
-        return (h("div", { key: '56ec7b395ff5f4dc42970e042ca8771b6fc2095a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: '38877bbaeaa319a9c876478f09dadf06248ab8ae', name: "header" }), h("slot", { key: '9c241ad399ac3e4e58a913d24174fe581bfab1bc', name: "body" })));
+        return (h("div", { key: 'f49634b51fd6fb49bcb75cc4247f683ff99d6b99', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'e5cd66e212a41ce26dfaccae634ab7ee22ba9910', name: "header" }), h("slot", { key: '07e1fbec46f08e46f728340291510992d21f71a4', name: "body" })));
     }
     static get is() { return "xpl-dynamic-table"; }
     static get states() {

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

@@ -19,9 +19,9 @@ export class XplDynamicTableCell {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (h(Host, { key: 'c48652542dadaa98dbfe8c1ca51c5be67c279091', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: '639f0a42ea0189fb4c269de1b76c5491729f868c', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: '3b6b21c64807f8e7dca3b18def3bb373a3778506' })));
+            } }, h("slot", { key: '29864a738aa7d5e9498195ce0d22bb8d78e39989' })));
     }
     static get is() { return "xpl-dynamic-table-cell"; }
     static get properties() {

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

@@ -24,9 +24,9 @@ export class XplDynamicTableRow {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (h(Host, { key: '3f514b6ebd0c519329c1f88fd7a06681fd263c20', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: '4969ae6223aa4f6604d20e657d390d8ec43eb9bd', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'acfe30cd4d852f2787ac18376b8b491731a736d4' })));
+            } }, h("slot", { key: '244d34612847408ddb9e0d718b1e5916b7e24b2d' })));
     }
     static get is() { return "xpl-dynamic-table-row"; }
     static get properties() {

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

@@ -22,7 +22,7 @@ export class XplGrid {
         });
     }
     render() {
-        return h(Host, { key: 'ebca0f4cd2335a920d6e070a5ea8e6ca32e06fb2', class: "xpl-grid" });
+        return h(Host, { key: 'b7adecdd36342641869726ffa094578c1272dc1e', class: "xpl-grid" });
     }
     static get is() { return "xpl-grid"; }
     static get elementRef() { return "container"; }

package/dist/collection/components/xpl-grid-item/xpl-grid-item.js

@@ -12,7 +12,7 @@ export class XplGridItem {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (h(Host, { key: 'e88447c2042c92809a00464c721ffccbe3f421f7', class: className }, h("slot", { key: 'ba97ddd92e967cc9c883bcd462a4303015015160' })));
+        return (h(Host, { key: '4a3a254b51eae0907baf74c383b0d2b60017b69b', class: className }, h("slot", { key: 'b23f50ff733b9f3009eda4a3569a28b0636e76f4' })));
     }
     static get is() { return "xpl-grid-item"; }
     static get properties() {

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

@@ -45,4 +45,8 @@ HeaderAccordion.parameters = {
         </div>
     `)(HeaderAccordion.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
+    },
 };

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

@@ -68,7 +68,7 @@ export class XplHeaderAccordion {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (h(Host, { key: 'ee3fd9eb9638936fad6fdf39e6206e0e2732b920', class: "xpl-header-accordion" }, h("div", { key: '94435c73c7f099bbd06ae686bdfa757d23af93e1', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '55999a12930fd86d3c7271092a245db7e6229708', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '30fd009b44784a7718f8491c29b2319d8f24d775', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '29fd48fd7e822b01c6599ca1114492731e528720', name: "title" }), h("xpl-icon", { key: 'a9d71ba4fb4701186b7e896ed0a8c6747179346b', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '7d77c1a03c80b65a92d5db3ccf1c64c66a544ee5', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '1db8deafe423aaf6ec3eb2d4e783b49d9a207712', name: "content" }))));
+        return (h(Host, { key: '36101a7c73fddd9944c96ed15dd6570b20ae031d', class: "xpl-header-accordion" }, h("div", { key: 'a58005a8bafb5d56e73c6a78dc4f88a8285ee8fa', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '6e96eb7c2670ac82a0f6b088a93fd09127338328', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '097ecde99648e1ab397a2b65becdf525e03c21c4', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '002e4645b7df25d7725e6f9860c815fe3977fa62', name: "title" }), h("xpl-icon", { key: '04492dda041fabc3deeb4031cab2d2ebeae1f766', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '310457718b09b0481040c83dc73327251be308cd', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'c13229b1538cae02a449bf00483174824de17f3a', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {

package/dist/collection/components/xpl-icon/icon-types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/xpl-icon/icons.stories.js

@@ -1,4 +1,16 @@
-import data from "@xplortech/apollo-icons/build/data.json";
+import apolloIcons from "@xplortech/apollo-icons";
+const iconNames = Object.keys(apolloIcons);
+const allTags = new Set();
+iconNames.forEach((name) => {
+    var _a;
+    const keywords = ((_a = apolloIcons[name]) === null || _a === void 0 ? void 0 : _a.keywords) || [];
+    keywords.forEach((keyword) => allTags.add(keyword));
+});
+const tagToIconsMap = {};
+allTags.forEach((tag) => {
+    const iconsWithTag = apolloIcons.getIconsByTag(tag);
+    tagToIconsMap[tag] = iconsWithTag.map((icon) => icon.symbol);
+});
 export default {
     title: 'Components/Icons',
     argTypes: {
@@ -11,30 +23,53 @@ export default {
     },
 };
 export const Icons = ({ size, color }) => `
-    <xpl-input placeholder="Search icons..." id="icon-search"></xpl-input>
+    <xpl-input placeholder="Search icons by name or tag..." id="icon-search"></xpl-input>
     <script>
         const iconSearch = document.getElementById('icon-search');
+        // Tag-to-icons mapping built using getIconsByTag from @xplortech/apollo-icons
+        const tagToIconsMap = ${JSON.stringify(tagToIconsMap)};
+
+        // Helper function to get icons matching a tag (mirrors getIconsByTag behavior)
+        function getIconsByTag(tag) {
+            const searchTag = tag.toLowerCase();
+            const matchingIcons = new Set();
+            Object.entries(tagToIconsMap).forEach(([tagKey, icons]) => {
+                if (tagKey.toLowerCase().includes(searchTag)) {
+                    icons.forEach(icon => matchingIcons.add(icon));
+                }
+            });
+            return Array.from(matchingIcons);
+        }
+
         iconSearch.addEventListener('inputEvent', (event) => {
-            const search = event.detail;
-            const filteredIcons = ${JSON.stringify(Object.keys(data))}.filter(icon => icon.includes(search));
+            const search = event.detail.toLowerCase();
             const items = document.querySelectorAll('#where-icons-go .item-container');
             const noSearchResults = document.querySelector('.no-search-results');
+            let visibleCount = 0;
+
+            // Get icons that match by tag using getIconsByTag
+            const iconsMatchingTag = getIconsByTag(search);
+
             items.forEach(item => {
-                if (item.querySelector('.icon-name').textContent.includes(search)) {
+                const iconName = item.querySelector('.icon-name').textContent;
+
+                // Match by icon name or by tag (using getIconsByTag results)
+                const matchesName = iconName.toLowerCase().includes(search);
+                const matchesTag = iconsMatchingTag.includes(iconName);
+
+                if (matchesName || matchesTag) {
                     item.style.display = 'block';
+                    visibleCount++;
                 } else {
                     item.style.display = 'none';
                 }
             });
-            if (filteredIcons.length === 0) {
-                noSearchResults.style.display = 'block';
-            } else {
-                noSearchResults.style.display = 'none';
-            }
+
+            noSearchResults.style.display = visibleCount === 0 ? 'block' : 'none';
         });
     </script>
     <div class="where-icons-go" id="where-icons-go" style="color: ${color};">
-        ${Object.keys(data)
+        ${iconNames
     .map((icon) => `<div class="item-container">
                         <xpl-tooltip text="Click to copy" >
                             <div class="item" onclick="navigator.clipboard.writeText('<xpl-icon icon=&quot;${icon}&quot;></xpl-icon>')">
@@ -69,7 +104,7 @@ Icon.argTypes = {
         type: { name: 'string', required: true },
     },
     icon: {
-        options: Object.keys(data),
+        options: iconNames,
         control: {
             type: 'select',
         },

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

@@ -1,7 +1,8 @@
 import { Host, h } from "@stencil/core";
-import octicons from "@xplortech/apollo-icons";
+import apolloIcons from "@xplortech/apollo-icons";
 export class XplIcon {
     render() {
+        var _a;
         let options = {};
         if (this.size !== undefined) {
             if (typeof this.size === 'number') {
@@ -15,10 +16,10 @@ export class XplIcon {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (h(Host, { key: '24576487ab74d82288bd43262d3021f19d12489d' }, h("figure", { key: '1b90df03ca412fd56fd868f934a24712d3a19079', class: wrapperClasses }, h("span", { key: 'e0ebd1ccfb6796190240841035a0a2db8c1bb3f1', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: '485fe60cec37994f94402756a16f068176b1cbbb' }, h("figure", { key: '9767c5743a3520c36f7733b7f1bf92847af78eb2', class: wrapperClasses }, h("span", { key: 'f11637a97e7a0d1a28572743d8facd78c0b902fc', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: octicons[this.icon].toSVG(options) }), h("figcaption", { key: 'd3976b8859355ef990e9bffa210b5c005505c308' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '5293e424f6ef17fc99e7ffad8615861b1ac0443d' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {
@@ -37,21 +38,18 @@ export class XplIcon {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IconName",
-                    "resolved": "\"ai\" | \"alarm-clock\" | \"alert-circle\" | \"alert-hex\" | \"alert-triangle\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-right\" | \"award\" | \"bell\" | \"bell-slash\" | \"bookmark\" | \"bookmark-slash\" | \"briefcase\" | \"calendar\" | \"calendar-month\" | \"calendar-week\" | \"camera\" | \"cash-register\" | \"check\" | \"check-circle\" | \"check-circle-fill\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevrons-down\" | \"chevrons-left\" | \"chevrons-right\" | \"chevrons-up\" | \"circle-slash\" | \"clipboard\" | \"clock\" | \"code-square\" | \"comment\" | \"comment-alt\" | \"comment-check\" | \"comment-closed\" | \"comment-discussion\" | \"comment-minus\" | \"comment-plus\" | \"comment-x\" | \"compass\" | \"credit-card\" | \"dash\" | \"dollar-bill\" | \"dollar-sign\" | \"download\" | \"drag\" | \"dumbbells\" | \"duplicate\" | \"edit\" | \"expand\" | \"eye\" | \"eye-closed\" | \"eye-droper\" | \"file\" | \"flag\" | \"folder\" | \"gear\" | \"gift\" | \"globe\" | \"graph\" | \"graph-bar\" | \"grid\" | \"heart\" | \"home\" | \"image\" | \"info\" | \"kebab-horizontal\" | \"kebab-vertical\" | \"key\" | \"law\" | \"layers\" | \"left-align\" | \"light-bulb\" | \"line\" | \"link\" | \"link-external\" | \"list-ordered\" | \"list-unordered\" | \"loader\" | \"location\" | \"lock\" | \"mail\" | \"mail-check\" | \"mail-closed\" | \"mail-minus\" | \"mail-plus\" | \"mail-x\" | \"map\" | \"megaphone\" | \"minus-circle\" | \"moon\" | \"navigation\" | \"organization\" | \"package\" | \"paperclip\" | \"pencil\" | \"people\" | \"percent\" | \"person\" | \"person-add\" | \"person-circle\" | \"phone\" | \"phone-minus\" | \"phone-pause\" | \"phone-plus\" | \"phone-slash\" | \"phone-x\" | \"pie-chart\" | \"pin\" | \"pin-circle\" | \"pin-circle-filled\" | \"pin-filled\" | \"play\" | \"plus\" | \"plus-circle\" | \"printer\" | \"question\" | \"refresh-cw\" | \"repeat\" | \"right-align\" | \"rocket\" | \"rotate-ccw\" | \"rotate-cw\" | \"save\" | \"search\" | \"share\" | \"shopping-bag\" | \"shopping-cart\" | \"sign-in\" | \"sign-out\" | \"signature\" | \"sliders-h\" | \"sliders-v\" | \"sort\" | \"star\" | \"star-fill\" | \"star-half-fill\" | \"sun\" | \"tag\" | \"three-bars\" | \"time-reverse\" | \"tools\" | \"trashcan\" | \"triangle-down\" | \"triangle-left\" | \"triangle-right\" | \"triangle-up\" | \"trophy\" | \"unlock\" | \"upload\" | \"video-camera\" | \"x\" | \"x-circle\" | \"x-circle-fill\" | \"zoom-in\" | \"zoom-out\"",
-                    "references": {
-                        "IconName": {
-                            "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-icon/xpl-icon.tsx",
-                            "id": "src/components/components/xpl-icon/xpl-icon.tsx::IconName"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Name of icon"
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string}\n\nSee [available icons](./ICONS.md) for the complete list,\nor view the [Storybook icon gallery](?path=/story/components-icons--icons)."
+                        }],
+                    "text": "Name of icon."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -109,6 +109,10 @@ Input.parameters = {
             return output;
         })(Input.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16215-5412&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };
 export const Multiline = ({ label, description, disabled, error, errorMessage, maxCharacterCount, }) => {
     let attrs = ' multiline';

package/dist/collection/components/xpl-input/xpl-input-color/xpl-input-color.js

@@ -193,13 +193,13 @@ export class XplInputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: '639f311d46bbb46e327ae6b05fe24b47795adbf3', class: "xpl-input-color" }, h("xpl-popover", { key: 'ad9d6145e4e5ac581c6d22f726050767ff82d861', disabled: this.disabled, display: "menu" }, h("div", { key: '219e1754388cfc2ecff25b42b67322e780a1e7d6', slot: "trigger" }, h("div", { key: '7beafe5304521d496bf7d7f8f82de01c9b7de00d', class: {
+        return (h(Host, { key: '89789ef1ae21c4c555f67fd1a09159765eb1ef9e', class: "xpl-input-color" }, h("xpl-popover", { key: '2eececd5d3592e0111bc507892eb7f7cd8bad8e6', disabled: this.disabled, display: "menu" }, h("div", { key: '56d4a7bb25c3cdeb09d38d2fa986fe7595c453c0', slot: "trigger" }, h("div", { key: 'e49c0143d634a99cc547ead6af263716a28dd9ff', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: '2caae6b87902c50eb754e93ce939797d619da723', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: 'e65efc371fab736e640f375446c22340f801b8a2', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '8cd0f1e94bf2eaf31ad82a4c8d307badef8046fc', size: 20, icon: "eye-droper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: 'b71aa6dd82c16ac328da186920e04b2992341317', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
             } })))), h("div", { key: '8e6add90e733d299cea94559dcbc29dd4e64d9cd', class: "xpl-input-color__menu" }, h("div", { key: 'a488c9b7ef3ff0cabbbb4bf5a631f209034a2539', class: "xpl-input-color__sl-grid", ref: (el) => {

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

@@ -66,9 +66,10 @@ export class XplInput {
     render() {
         var _a;
         let hasError = false;
-        if (this.error !== undefined)
+        if (this.error) {
             hasError = true;
-        if (this.multiline &&
+        }
+        else if (this.multiline &&
             this.maxCharacterCount !== undefined &&
             this.characterCount > this.maxCharacterCount) {
             hasError = true;
@@ -77,13 +78,13 @@ export class XplInput {
         if (type === 'password' && this.passwordVisible) {
             type = 'text';
         }
-        return (h(Host, { key: '4dca16ca0939ae6365edc9201e00ec6cf76aadfc', class: {
+        return (h(Host, { key: 'c682985a3d592f9f9902a16013a5d00f40ce5e44', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': hasError,
                 'xpl-input--readonly': this.readonly,
                 [`xpl-input--${this.type}`]: true,
-            } }, this.label && (h("label", { key: '2abed2c330a6cb7fbad8274299a7012b09c22b03', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '4f310894b28354d9540aa73b4e87872632eb9c83' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: 'ed5cd40feaa1d9d76d6b569c9b9c51da178d162d', class: "xpl-input-error", htmlFor: this._id }, h("xpl-icon", { key: '2e5374ee3a0c5b18d3891a647b52853b0daa7b9c', icon: "alert-circle", size: 16 }), h("span", { key: '1a9aa0733831e709aa5923c9486049697e7ab20b' }, this.error)))));
+            } }, this.label && (h("label", { key: '21d863221e85a255f3dc5e662139b7abc0e72907', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '25d078a667c8b9cbf4d1b5d1f412c3d0e736013a' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '7e13c1fc18496bdf50cdb2a239c113c182b83f18', class: "xpl-input-error", htmlFor: this._id }, h("xpl-icon", { key: '900d641cfcd94d9f6cc85ba34e1e211448c203df', icon: "alert-circle", size: 16 }), h("span", { key: '74f7868861f5c262038bee3de2faeecc46b2454d' }, this.error)))));
     }
     static get is() { return "xpl-input"; }
     static get properties() {

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

@@ -145,4 +145,8 @@ document.getElementById("list-id").items = [
         render: ((_) => {
         })(List.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16296-10660&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };

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

@@ -99,4 +99,8 @@ Progress.parameters = {
         </div>
         `,
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12705-29149&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };

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

@@ -88,4 +88,8 @@ Radio.parameters = {
 </div>`;
         })(Radio.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=3915-91032&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };