@xplortech/apollo-core 2.4.3 → 2.6.0

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export class XplDataCard {
+export class DataCard {
     constructor() {
         this.leadingIcon = true;
         this.tooltipTextSmallStat = '';
@@ -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: 'c9a108ce28ed8904ef2f39f8d28e3becdd3da427', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '376323f4f00a84b903b31d3b72b21d83f86cb8d7', class: headerClasses }, h("header", { key: '7385e8fac7f9eb6f8f9c9235f7de8395de376510' }, !!this.leadingIcon && this.icon && (h("span", { key: 'bd43a5ad7f0d4c3afacd83b0d77b00fbfbbc9bfe', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '914e9897881a07fd0a76eaa24f7b862e0d2237d8', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'dc317fbb7055845149737d3699d39759b42be5a4', name: "title" }, this.name)), this.link && (h("span", { key: 'ea569e40ee3e746073c1dee3e1be98af63cda682', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '4da084735e560701a8407ec044b9e6d8ea9d5a1f', icon: "chevron-right", size: 16 })))), h("dd", { key: '218fd7271e49509d9b29484ba7becb3237fae283', class: "xpl-data-card__body" }, h("div", { key: 'e8a723a5d2742c42b681cbde6ca880a9833301ba', class: "xpl-data-card__left" }, h("span", { key: '9b9cfbc7ff6d1cb81d867e044766559e07f0bee9', 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: 'f6236b30f5fababdb27dfb0767b0b9f230019e87', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '614af9eb3f33fde8d489fe547a2f0e833f6e9655', class: "xpl-data-card__right" }, h("slot", { key: 'd71b6775e27537744ca4bee20c530b5aa1e6e830', 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/divider.stories.js

@@ -29,4 +29,8 @@ Divider.parameters = {
     html: {
         render: (({ tier, text }) => `<div class="xpl-divider xpl-divider--${tier.toString()}">${text}</div>`)(Divider.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16545-7981&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
 };

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

@@ -1,9 +1,9 @@
 import { Host, h } from "@stencil/core";
-export class XplDivider {
+export class Divider {
     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: 'cdafb808588e7baf9271997503dea7b53597b15f', class: className }, h("span", { key: '119067065dc21dd71b25ba81b5d83232f4953ebc' }, h("slot", { key: '8cc9077442f20703efc50094056cb7d15782252a' }))));
     }
     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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Host, h } from "@stencil/core";
-export class XplDropdownGroup {
+export class DropdownGroup {
     render() {
         const { groupName, options } = this;
         const hasOptions = options && options.length;
@@ -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: 'fae7d1999fae7148c2d19e14676b8c7a6f9c7810', role: "group", "aria-label": groupName }, h("li", { key: '8696234c09cce33be47e6481d757c2209d1fe04e', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: 'ce4fc6f2b00f58302075e180170f52e333aab08b', label: groupName }), h("ul", { key: 'a9015c5ebaaa4ec3858769ad9aaf3f06d806bdbe', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '2f4bb9a76f1371c4dc0405b2652bc616fa4bb835', 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 {
+export class DropdownHeading {
     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: '8f7d858ca1ee011e03b069948b1c948c7693725f', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '56679ee9d35a995a72249f4494983652bacf0832' }, this.label || h("slot", { key: '3e657744c62647b42d249379927fab9ca9a258f6', 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

@@ -1,9 +1,12 @@
 import { Host, h } from "@stencil/core";
-export class XplDropdownOption {
+export class DropdownOptionCpnt {
     componentWillLoad() {
         this.dropdown = this.hostElement.closest('xpl-dropdown');
     }
     handleClick(ev) {
+        if (!this.dropdown) {
+            return;
+        }
         const { closeOnSelect, mode } = this.dropdown;
         if (ev.x && ev.y) {
             this.dropdown.handleSelect(ev, { component: this });
@@ -12,6 +15,9 @@ export class XplDropdownOption {
         }
     }
     handleKeyup(ev) {
+        if (!this.dropdown) {
+            return;
+        }
         const { dropdown } = this;
         const navigationKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Tab'];
         const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
@@ -42,12 +48,12 @@ export class XplDropdownOption {
         this.hostElement.removeEventListener('keyup', this.handleKeyup);
     }
     render() {
-        const { label, isSelected, isDisabled, value, subtitle } = this;
-        return (h(Host, { key: 'c2a8b75e28785e9adb9c7419a96da73317f9e546', class: {
+        const { label, isSelected, isDisabled, value, subtitle, icon } = this;
+        return (h(Host, { key: '207cafd793f52598fdbbe3104ff0207261e086c4', 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: '7e836b82c325050338eff79f23855f55c696f38c', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '7b59e353bf038e1db478fab923c07e60d0e1a828', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: 'aad23fec3435e7cd7e36a57d49e178177d7da7fa', name: "option" }), subtitle && h("span", { key: '96fee61dbd072dacf783e164a93fd8dd626e3e53', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {
@@ -128,6 +134,25 @@ export class XplDropdownOption {
                 "reflect": false,
                 "attribute": "subtitle"
             },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "optional icon name to display before the label (uses xpl-icon)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
             "isSelected": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -11,48 +11,69 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { h, Host, } from "@stencil/core";
-export class XplDropdown {
+import { autoUpdate, computePosition, flip, hide, offset, size } from "@floating-ui/dom";
+export class Dropdown {
     constructor() {
         this.isOpen = false;
         this.closeOnSelect = true;
         this.mode = 'single';
         this.anchorToTrigger = false;
         this.selectOnFocus = false;
-        this.requestAnimationFrameId = null;
-        this.updateDropdownPosition = () => {
+        this.cleanupAutoUpdate = null;
+        this.updateDropdownPosition = async (triggerEl) => {
             var _a;
-            if (!this.anchorToTrigger || !this.triggerId) {
+            const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
+                strategy: 'fixed',
+                placement: 'bottom-start',
+                middleware: [
+                    offset(4),
+                    flip(),
+                    size({
+                        apply: ({ availableHeight, rects }) => {
+                            const listEl = this.hostElement.querySelector('.xpl-dropdown-list');
+                            let usedBeforeList = 0;
+                            if (listEl) {
+                                const children = Array.from(this.hostElement.children);
+                                const listIndex = children.indexOf(listEl);
+                                children.slice(0, listIndex).forEach((child) => {
+                                    if (child instanceof HTMLElement) {
+                                        usedBeforeList += child.offsetHeight;
+                                    }
+                                });
+                            }
+                            const cs = getComputedStyle(this.hostElement);
+                            const hostVerticalChrome = parseFloat(cs.paddingTop) +
+                                parseFloat(cs.paddingBottom) +
+                                parseFloat(cs.borderTopWidth) +
+                                parseFloat(cs.borderBottomWidth);
+                            const cssMaxHeight = listEl
+                                ? parseFloat(getComputedStyle(listEl).getPropertyValue('--xpl-dropdown-list-max-height'))
+                                : Infinity;
+                            const listMaxHeight = Math.min(cssMaxHeight, Math.max(0, availableHeight - usedBeforeList - hostVerticalChrome));
+                            Object.assign(this.hostElement.style, {
+                                width: `${rects.reference.width}px`,
+                            });
+                            if (listEl) {
+                                listEl.style.maxHeight = `${listMaxHeight}px`;
+                            }
+                        },
+                    }),
+                    hide(),
+                ],
+            });
+            if (!this.cleanupAutoUpdate)
                 return;
-            }
-            const triggerRect = (_a = document.getElementById(this.triggerId)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (!triggerRect) {
+            if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {
+                this.isOpen = false;
                 return;
             }
-            const dropdownHeight = Math.max(this.hostElement.offsetHeight, 300);
-            const viewportHeight = window.innerHeight;
-            const spaceBelow = viewportHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
-            const shouldPositionAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
-            if (shouldPositionAbove) {
-                this.hostElement.style.cssText = `
-                left: ${triggerRect.left}px;
-                width: ${triggerRect.width}px;
-                bottom: ${viewportHeight - triggerRect.top}px;
-                top: auto;
-            `;
-                this.hostElement.classList.add('xpl-dropdown--above');
-                this.hostElement.classList.remove('xpl-dropdown--below');
-            }
-            else {
-                this.hostElement.style.cssText = `
-                left: ${triggerRect.left}px;
-                width: ${triggerRect.width}px;
-                top: ${triggerRect.bottom}px;
-                bottom: auto;
-            `;
-                this.hostElement.classList.add('xpl-dropdown--below');
-                this.hostElement.classList.remove('xpl-dropdown--above');
-            }
+            const isAbove = placement.startsWith('top');
+            Object.assign(this.hostElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            this.hostElement.classList.toggle('xpl-dropdown--above', isAbove);
+            this.hostElement.classList.toggle('xpl-dropdown--below', !isAbove);
         };
         this.handleClickOutside = ({ target }) => {
             const { triggerId } = this;
@@ -69,6 +90,16 @@ export class XplDropdown {
             }
         };
     }
+    onAnchorToTriggerChanged() {
+        if (this.isOpen) {
+            this.startPositioning();
+        }
+    }
+    onTriggerIdChanged() {
+        if (this.isOpen) {
+            this.startPositioning();
+        }
+    }
     onSelectedValuesChanged(newValues, initialRender = false) {
         if (this.options && this.options.length > 0) {
             const flatOptions = this.options.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
@@ -94,14 +125,31 @@ export class XplDropdown {
     }
     onIsOpenStateChange(newValue) {
         this.isOpenChange.emit(newValue);
+        if (newValue) {
+            this.startPositioning();
+        }
+        else {
+            this.stopPositioning();
+        }
+    }
+    connectedCallback() {
+        document.addEventListener('mousedown', this.handleClickOutside);
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.stopPositioning();
     }
-    onWindowScroll() {
-        if (this.requestAnimationFrameId) {
-            cancelAnimationFrame(this.requestAnimationFrameId);
+    componentWillLoad() {
+        this.handleSelect = this.handleSelect.bind(this);
+        if (this.selectedValues) {
+            this.onSelectedValuesChanged(this.selectedValues, true);
         }
-        this.requestAnimationFrameId = requestAnimationFrame(() => {
-            this.updateDropdownPosition();
-        });
+    }
+    componentDidLoad() {
+        if (this.isOpen)
+            this.startPositioning();
     }
     async handleSelect(e, { component }) {
         const { hostElement, mode, options, update } = this;
@@ -140,22 +188,30 @@ export class XplDropdown {
         if (update)
             update(e, { component: this });
     }
-    componentWillLoad() {
-        this.handleSelect = this.handleSelect.bind(this);
-        if (this.selectedValues) {
-            this.onSelectedValuesChanged(this.selectedValues, true);
+    startPositioning() {
+        if (!this.anchorToTrigger || !this.triggerId) {
+            return;
         }
+        const triggerEl = document.getElementById(this.triggerId);
+        if (!triggerEl)
+            return;
+        this.stopPositioning();
+        this.cleanupAutoUpdate = autoUpdate(triggerEl, this.hostElement, () => {
+            this.updateDropdownPosition(triggerEl);
+        });
     }
-    connectedCallback() {
-        document.addEventListener('mousedown', this.handleClickOutside.bind(this));
-        document.addEventListener('keydown', this.handleKeyDown);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.handleClickOutside);
-        document.removeEventListener('keydown', this.handleKeyDown);
-    }
-    componentDidLoad() {
-        this.updateDropdownPosition();
+    stopPositioning() {
+        var _a;
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = null;
+        }
+        this.hostElement.style.left = '';
+        this.hostElement.style.top = '';
+        this.hostElement.style.width = '';
+        (_a = this.hostElement
+            .querySelector('.xpl-dropdown-list')) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
+        this.hostElement.classList.remove('xpl-dropdown--above', 'xpl-dropdown--below');
     }
     render() {
         const { isOpen } = this;
@@ -166,12 +222,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: '9951124106d4123d98db2b9bdc906f51d145c5e6', "aria-expanded": isOpen ? 'true' : 'false', 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("slot", { key: '61b8daf20ef87a8ae7bad8fa494c104d58cc61f8', name: "header" }), h("ul", { key: 'ac14c8acf2927b931d4c74673af5f12f5d9514c1', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'c820c142bdb64ec4189dd5869d71d4339dc97814', name: "options" }))));
     }
     static get is() { return "xpl-dropdown"; }
     static get properties() {
@@ -342,12 +398,12 @@ export class XplDropdown {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(e, { component }: { component: XplDropdown }) => void",
-                    "resolved": "(e: any, { component }: { component: XplDropdown; }) => void",
+                    "original": "(e, { component }: { component: Dropdown }) => void",
+                    "resolved": "(e: any, { component }: { component: Dropdown; }) => void",
                     "references": {
-                        "XplDropdown": {
+                        "Dropdown": {
                             "location": "global",
-                            "id": "global::XplDropdown"
+                            "id": "global::Dropdown"
                         }
                     }
                 },
@@ -422,6 +478,12 @@ export class XplDropdown {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "anchorToTrigger",
+                "methodName": "onAnchorToTriggerChanged"
+            }, {
+                "propName": "triggerId",
+                "methodName": "onTriggerIdChanged"
+            }, {
                 "propName": "selectedValues",
                 "methodName": "onSelectedValuesChanged"
             }, {
@@ -429,25 +491,4 @@ export class XplDropdown {
                 "methodName": "onIsOpenStateChange"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "scroll",
-                "method": "onWindowScroll",
-                "target": "window",
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "scroll",
-                "method": "onWindowScroll",
-                "target": "document",
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "resize",
-                "method": "onWindowScroll",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class XplDynamicTable {
+export class DynamicTable {
     constructor() {
         this.selectedItemCount = 0;
         this.colCount = 0;
@@ -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: 'aa9fdd991fca8dab538176a950636b52db539f7a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'd05d799f1a0d944398f1ae9992dbcbb56a52f184', name: "header" }), h("slot", { key: '7f212255dbf15e8358cef6097d55b973f73bd086', 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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplDynamicTableCell {
+export class DynamicTableCell {
     constructor() {
         this.disabled = false;
     }
@@ -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: 'd4b284973e5c1f76a9355f77749c6b6432e4f469', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: '3b6b21c64807f8e7dca3b18def3bb373a3778506' })));
+            } }, h("slot", { key: 'd9365d26d5b4fb9e50cd3b08514eeae3bfdd6888' })));
     }
     static get is() { return "xpl-dynamic-table-cell"; }
     static get properties() {

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplDynamicTableRow {
+export class DynamicTableRow {
     constructor() {
         this.disabled = false;
         this.selected = false;
@@ -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: '7ce6f2c780af4f7bd4053970bff3e620fef4913a', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'acfe30cd4d852f2787ac18376b8b491731a736d4' })));
+            } }, h("slot", { key: 'b77362a23d8d69844560e7389e5cd7f6b5568d88' })));
     }
     static get is() { return "xpl-dynamic-table-row"; }
     static get properties() {

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplGrid {
+export class Grid {
     componentDidLoad() {
         const items = Array.from(this.container.querySelectorAll('.xpl-grid-item'));
         let lgCounter = 0;
@@ -22,7 +22,7 @@ export class XplGrid {
         });
     }
     render() {
-        return h(Host, { key: 'ebca0f4cd2335a920d6e070a5ea8e6ca32e06fb2', class: "xpl-grid" });
+        return h(Host, { key: '89b723cb2e01669c5edd69a3fbbbdce834f05dd3', 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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplGridItem {
+export class GridItem {
     constructor() {
         this.xs = 6;
         this.sm = 6;
@@ -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: 'd4e9ba6dc2049aa0a88d266934a9499daf66d0a9', class: className }, h("slot", { key: 'fef8f150e57fcc72147111fe10088d46adc324d8' })));
     }
     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',
+    },
 };