@xplortech/apollo-core 2.10.0 → 2.12.0

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

@@ -7,16 +7,16 @@ export class Choicelist {
             const choice = this.choices[choiceIndex];
             if (this.multi) {
                 this.selected = this.selected.map((isSelected, index) => index === choiceIndex ? !isSelected : isSelected);
-                if ((choice === null || choice === void 0 ? void 0 : choice.value) !== undefined) {
+                if (choice?.value !== undefined) {
                     const changedValues = this.choices
                         .filter((_, index) => this.selected[index])
-                        .map((c, index) => { var _a; return (_a = c.value) !== null && _a !== void 0 ? _a : this.selected[index]; });
+                        .map((c, index) => c.value ?? this.selected[index]);
                     this.choicelistValueChange.emit(changedValues);
                 }
             }
             else {
                 this.selected = this.selected.map((_, index) => index === choiceIndex);
-                if ((choice === null || choice === void 0 ? void 0 : choice.value) !== undefined) {
+                if (choice?.value !== undefined) {
                     this.choicelistValueChange.emit(choice.value);
                 }
             }
@@ -36,13 +36,13 @@ export class Choicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: 'b2a2b4630df394470daa56346215ad1193727557', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: 'd2329582e74d40946d23ae522b40130b1d780522', class: {
+        return (h(Host, { key: 'e46ee9af6a052090343eeadbcba66997b38d2edc', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '4f995575dae9b8b1a8f136b3a336fd5ccce7e3f1', class: {
                 'xpl-choicelist': true,
-                'xpl-choicelist--styled': this.styled,
+                'xpl-choicelist--styled': !!this.styled,
             } }, this.choices.map((choice, i) => {
             const inner = this.renderChoice(choice, i);
             return (h("li", { class: {
-                    selected: this.styled && this.selected[i],
+                    selected: !!this.styled && !!this.selected[i],
                 } }, inner, choice.children && (h("ul", null, choice.children.map((child, j) => {
                 const childInner = this.renderChoice(child, j);
                 return h("li", null, childInner);

package/dist/collection/components/xpl-content-area/content-area.stories.js

@@ -1,5 +1,16 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+const body = `
+    <div>
+        <p>The main content of the page renders here.</p>
+        <p>It sits on the page surface using the default text colour.</p>
+    </div>
+`;
 export default {
     title: 'Components/Content Area',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
     argTypes: {
         size: {
             options: ['wide', 'narrow', 'full'],
@@ -11,19 +22,7 @@ export default {
 };
 export const ContentArea = ({ size }) => `
         <xpl-content-area size="${size}">
-            <div>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
-                ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
-                explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
-                sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
-                quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
-                non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
-                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
-                ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
-                velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
-                pariatur?
-            </div>
+            ${body}
         </xpl-content-area>
     `;
 ContentArea.args = {
@@ -37,17 +36,7 @@ ContentArea.parameters = {
         render: (({ size }) => `
                 <main class="xpl-content-area-wrapper xpl-content-area-wrapper__${size}">
                     <div class="xpl-content-area">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
-                        ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
-                        explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
-                        sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
-                        quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
-                        non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
-                        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
-                        ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
-                        velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
-                        pariatur?
+                        ${body}
                     </div>
                 </main>
             `)(ContentArea.args),

package/dist/collection/components/xpl-content-area/xpl-content-area.js

@@ -4,7 +4,7 @@ export class ContentArea {
         this.size = 'wide';
     }
     render() {
-        return (h(Host, { key: '9ae6e297af2b7cf5b40ae9848a1479d6e87b6a3e' }, h("main", { key: '2ca4359f4090262b7186689207b4725883e5378e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '6e4e1e2947eb4e7e8d5d9201b48074cd9cb102ed', class: "xpl-content-area" }, h("slot", { key: 'bf8de84eb947b3ce40fd5df93169f382d3a896cf' })))));
+        return (h(Host, { key: '1b43a3fa4173d34533cf7015005b3e37792f0af6' }, h("main", { key: '0b0f905db96103b7a7c24cd40af26c448422ce85', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: 'b495ccc07df5e617f147057d7003805c431386d5', class: "xpl-content-area" }, h("slot", { key: '093b4b9830e0f6a8bee554bc8bac255d4944784d' })))));
     }
     static get is() { return "xpl-content-area"; }
     static get properties() {

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

@@ -1,4 +1,13 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Data Components/Dashboard',
     argTypes: {
         cardQuantity: {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Dashboard {
     render() {
-        return (h(Host, { key: 'e3736f9e707de77addac539a4e7f0950133d0e08' }, h("dl", { key: 'de1add10d2f37c0a541d2f60f7156cf920eabd69', class: "xpl-dashboard" }, h("slot", { key: 'acd2becab0a555bf2599d0b2db4ebe0c9d744744' }))));
+        return (h(Host, { key: '3f8c104ae7775cda5f23ff515d8de7013d0ca09c' }, h("dl", { key: 'f68ec082b0f3587eb9977a03289097d3e838488d', class: "xpl-dashboard" }, h("slot", { key: 'f67b34cfe1683d3ee2f70be9d3d075603e536559' }))));
     }
     static get is() { return "xpl-dashboard"; }
 }

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

@@ -1,6 +1,29 @@
+import { expect, waitFor } from "storybook/test";
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 import data from "@xplortech/apollo-icons/build/data.json";
+const waitForHydration = async ({ canvasElement }) => {
+    if (document.fonts?.ready) {
+        await document.fonts.ready;
+    }
+    await waitFor(() => {
+        const cards = canvasElement.querySelectorAll('xpl-data-card');
+        expect(cards.length).toBeGreaterThan(0);
+        const customEls = canvasElement.querySelectorAll('xpl-data-card, xpl-icon, xpl-tooltip');
+        customEls.forEach((el) => expect(el.classList.contains('hydrated')).toBe(true));
+    }, { timeout: 15000 });
+};
 export default {
     title: 'Data Components/Data Card',
+    tags: ['vrt'],
+    beforeEach() {
+        document.body.classList.remove('dark');
+        document.body.classList.add('light');
+        setAutoSnapshotOptions({
+            enable: true,
+            failureThreshold: 2,
+            failureThresholdType: 'percent',
+        });
+    },
     argTypes: {
         name: {
             type: { name: 'string', required: true },
@@ -113,3 +136,35 @@ DataCard.parameters = {
         url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=8793-114043&p=f&t=01tbTrRZyfvVafsA-11',
     },
 };
+DataCard.play = waitForHydration;
+export const IconVariants = () => `
+    <dl class="xpl-dl" style="display: flex; gap: 1rem;">
+        <xpl-data-card stat="$12,000,000.00" variant="primary" leading-icon="true" icon="graph">
+            <span slot="title">Primary icon</span>
+        </xpl-data-card>
+        <xpl-data-card stat="$12,000,000.00" variant="secondary" leading-icon="true" icon="graph">
+            <span slot="title">Secondary icon</span>
+        </xpl-data-card>
+    </dl>
+`;
+IconVariants.parameters = {
+    layout: 'centered',
+};
+IconVariants.play = waitForHydration;
+export const StatSentiments = () => `
+    <dl class="xpl-dl" style="display: flex; gap: 1rem;">
+        <xpl-data-card stat="$12,000,000.00" small-stat="12.5%" small-stat-variant="positive" detail="vs last period">
+            <span slot="title">Positive</span>
+        </xpl-data-card>
+        <xpl-data-card stat="$12,000,000.00" small-stat="8.3%" small-stat-variant="negative" detail="vs last period">
+            <span slot="title">Negative</span>
+        </xpl-data-card>
+        <xpl-data-card stat="$12,000,000.00" small-stat="0.1%" small-stat-variant="neutral" detail="vs last period">
+            <span slot="title">Neutral</span>
+        </xpl-data-card>
+    </dl>
+`;
+StatSentiments.parameters = {
+    layout: 'centered',
+};
+StatSentiments.play = waitForHydration;

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

@@ -1,6 +1,9 @@
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
+import { hostHasNamedSlot } from "../../utils/slot-presence";
+const GRAPH_CONTENT_SLOT = 'graph-content';
 export class DataCard {
     constructor() {
+        this.graphContentPresent = false;
         this.leadingIcon = true;
         this.tooltipTextSmallStat = '';
         this.tooltipTextStat = '';
@@ -11,6 +14,20 @@ export class DataCard {
     watchShortStat(newValue) {
         this.shortStat = newValue;
     }
+    connectedCallback() {
+        this.syncGraphContentSlot();
+        this.connectGraphContentSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.graphContentSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.graphContentSlotSyncTimeoutId);
+            this.graphContentSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectGraphContentSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncGraphContentSlot();
+    }
     componentDidLoad() {
         if (this.link) {
             const anchorEl = this.el.getElementsByTagName('a')[0] || this.el.getElementsByTagName('button')[0];
@@ -21,9 +38,51 @@ export class DataCard {
             anchorEl.appendChild(anchorSpan);
         }
     }
+    componentWillRender() {
+        this.disconnectGraphContentSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleGraphContentSlotSync();
+    }
+    connectGraphContentSlotObserver() {
+        this.disconnectGraphContentSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.graphContentSlotObserver = new MutationObserver(() => {
+            this.scheduleGraphContentSlotSync();
+        });
+        this.graphContentSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectGraphContentSlotObserver() {
+        this.graphContentSlotObserver?.disconnect();
+        this.graphContentSlotObserver = undefined;
+    }
+    scheduleGraphContentSlotSync() {
+        if (this.graphContentSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.graphContentSlotSyncTimeoutId);
+        }
+        this.graphContentSlotSyncTimeoutId = setTimeout(() => {
+            this.graphContentSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncGraphContentSlot();
+            this.connectGraphContentSlotObserver();
+        }, 0);
+    }
+    syncGraphContentSlot() {
+        const hasGraphContent = hostHasNamedSlot(this.el, GRAPH_CONTENT_SLOT);
+        if (hasGraphContent !== this.graphContentPresent) {
+            this.graphContentPresent = hasGraphContent;
+        }
+    }
     render() {
-        const contentSlot = 'graph-content';
-        const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
         const bgColorHue = this.variant === 'secondary' ? 'purple' : 'orange';
         const headerClasses = `xpl-data-card__header xpl-data-card__header--${this.variant === 'secondary' ? 'secondary' : 'primary'}`;
         const smallStatIcon = this.smallStatVariant === 'positive'
@@ -31,8 +90,8 @@ export class DataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: '6220a2a6ba1ac0744ba62e701c015964c05bdea9', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '44da16abf81bc72a9c777f19d7c22ab998f55e94', class: headerClasses }, h("header", { key: '4ac3524629d31f3e74a245eef3e4ed6fc3a6832a' }, !!this.leadingIcon && this.icon && (h("span", { key: '53f7476c16eee3432e43a6bdebf744caeb9f9829', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: 'af9ed04389ba00e4d0c79f978c1364a0530b1db7', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '164396b94252374a1978cadf336ca74685fe9ba4', name: "title" }, this.name)), this.link && (h("span", { key: '31ce9874f295b1fef5705a28d81365d66a67a18b', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'f5d169eeb150ed2eaa663ca1388e1075e61f6b7b', icon: "chevron-right", size: 16 })))), h("dd", { key: '59711740ae613b61ab5ae463cbfc2aaed500fdc9', class: "xpl-data-card__body" }, h("div", { key: '35571a65469ba1c413114a50233340057f5df200', class: "xpl-data-card__left" }, h("span", { key: 'b1409661fc43dea4126e423d5dc74fe4b0a5ef5f', 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: '634b386799ed06de06ca212005d20e6f79c54124', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '9e88749b9c2efd65d22ec92881eaf316103ddb97', class: "xpl-data-card__right" }, h("slot", { key: '467388943d1c8a6bbfb334e6ab763dc7e92e59c8', name: contentSlot }))))));
+        return (h(Host, { key: '7480f4a5839e985f317f697984ec3752a0e5f4fb', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: 'ee0d40e32b700fa8dcda517454f7dfe88439f705', class: headerClasses }, h("header", { key: '405d707dafdd90942bb7122904d0d8a7ef1e989a' }, !!this.leadingIcon && this.icon && (h("span", { key: 'd2f505eab301051b854355cbe8e8608153f1c509', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: 'e4c3366b8ec3e0a55b2cc47877d832c72ff018ac', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'a2d1c4b93e4860d046f6da66d5b82a19f60e7346', name: "title" }, this.name)), this.link && (h("span", { key: '8966de78de4d6fac11841afaec872a2c2f3d1db0', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '62bc6170d62a773e5e38830c53a4abb0335a9fa8', icon: "chevron-right", size: 16 })))), h("dd", { key: 'b10cbb97c475155819c8f35afa2b294153c7153a', class: "xpl-data-card__body" }, h("div", { key: '4bf749bdcea4cd4b8a53cee3476e249556357038', class: "xpl-data-card__left" }, h("span", { key: '8285b0cca2a5f8be35d9096980085d1e0ed6cebc', 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: 'fbb5c740dc2a637198aad042800efb713fff154b', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (h("div", { key: 'b8f8f8fd70e1984edad76060e8b32db62c22bf5c', class: "xpl-data-card__right" }, h("slot", { key: 'a3c1a9e98111de7a091ded98aded8e722af1f806', name: GRAPH_CONTENT_SLOT }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {
@@ -289,6 +348,11 @@ export class DataCard {
             }
         };
     }
+    static get states() {
+        return {
+            "graphContentPresent": {}
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

@@ -1,5 +1,15 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Divider',
+    component: 'xpl-divider',
     argTypes: {
         tier: {
             options: [3, 2, 1, 0],
@@ -23,6 +33,7 @@ Divider.args = {
 };
 Divider.parameters = {
     layout: 'centered',
+    htmlSnippet: { mode: 'auto' },
     'web-component': {
         render: Divider(Divider.args),
     },

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

@@ -3,7 +3,7 @@ export class Divider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: '8b6563d7c6c85814d5dc0527246c90eea82c0dbd', class: className }, h("span", { key: '2935de22e9c70183386b5f6e1e18ff6437a42a41' }, h("slot", { key: '10e4e4c5c861647302217f78af0a369ad330c410' }))));
+        return (h(Host, { key: '61b81934fc56dabb47246db40cd83b9f1dde150a', class: className }, h("span", { key: 'b81ec769098b9b39fbd4e954e4931bcd580aa7dc' }, h("slot", { key: '8410f6c17964a091e9d62ca4db9eda673ab02c46' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

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

@@ -1,5 +1,13 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+const formatAttributes = (attributes) => Object.entries(attributes)
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ');
 export default {
     title: 'Components/Dropdown',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
 };
 const simpleOptions = [
     {
@@ -45,7 +53,7 @@ export const Simple = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, optio
             <div style="position: relative; min-width: 200px; width: 100%">
                 <xpl-dropdown
                     id="xpl-dropdown-simple"
-                    ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+                    ${formatAttributes(attributes)}
                 >
                 </xpl-dropdown>
             </div>
@@ -93,7 +101,7 @@ export const SimpleWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOn
             <div style="position: relative; min-width: 200px; width: 100%">
                 <xpl-dropdown
                     id="xpl-dropdown-simple-w-children"
-                    ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+                    ${formatAttributes(attributes)}
                 >
                     <xpl-dropdown-option
                         selected
@@ -201,7 +209,7 @@ export const Groups = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) =>
         <div style="position: relative; min-width: 200px; width: 100%">
             <xpl-dropdown
                 id="xpl-dropdown-groups"
-                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+                ${formatAttributes(attributes)}
             >
             </xpl-dropdown>
         </div>
@@ -244,7 +252,7 @@ export const GroupsWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOn
         <div style="position: relative; min-width: 200px; width: 100%">
             <xpl-dropdown
                 id="xpl-dropdown-groups"
-                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+                ${formatAttributes(attributes)}
             >
                 <xpl-dropdown-group
                     label="Group Component Heading A"
@@ -310,7 +318,7 @@ export const OptionSubcomponent = ({ isDisabled: disabled, label, isSelected: se
     return `
         <xpl-dropdown-option
             label="${label}"
-            ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+            ${formatAttributes(attributes)}
         ></xpl-dropdown-option>
     `;
 };

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

@@ -1,26 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { Host, h } from "@stencil/core";
 export class DropdownGroup {
     render() {
         const { groupName, options } = this;
         const hasOptions = options && options.length;
         const mappedOptions = hasOptions &&
-            options.map((_a) => {
-                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: 'a33169d78e635bb53987322f02869ffc1f1a9908', role: "group", "aria-label": groupName }, h("li", { key: '58a1ff78bb923fec60eb51ef05a2026e03e3058b', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '6d8556e1d96cbfccd61038e5089e9669917b919e', label: groupName }), h("ul", { key: 'dd485e18b79920d9992e506fe83b36fcadb9e020', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '2eca2f6aa7c44aacdb67c3658029822b4ba1c0aa', name: "options" })))));
+            options.map(({ groupName: optsGroupName, ...properties }) => optsGroupName ? (h("xpl-dropdown-group", { label: optsGroupName, ...properties })) : (h("xpl-dropdown-option", { ...properties })));
+        return (h(Host, { key: '6834fa4acc5c15d3256a0289013deb4821d22d57', role: "group", "aria-label": groupName }, h("li", { key: 'bed8042f619a729e9eb8c4e365e1b87dd1ea93cb', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '7171c8e2dcc007ece292dde758abf27b17cf2a7c', label: groupName }), h("ul", { key: 'a1e2a330759007328ad5b9d7f0ac6f920e5f6eec', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'ea8ea2987afe4decda1e78607d843c68e9285029', 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 DropdownHeading {
     render() {
-        return (h(Host, { key: '9b05e54ae226524434ac8485c51e7fccd4e5fe9e', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: 'c5ada81fbed76834515cff75f1fd1ce87b2ccbe3' }, this.label || h("slot", { key: 'dfe135bf2499e858e75ab1e87793ae75eb0982c6', name: "heading" }))));
+        return (h(Host, { key: '71b62b60d09869f77af7a6975a54a58116c002a6', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: 'ad7614e31b405ff4a9043334716eb1ff546a5c03' }, this.label || h("slot", { key: 'b0a0d0b2a6f96d9b8b2d16ee5e289bb3592e5d42', 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,5 +1,8 @@
 import { Host, h } from "@stencil/core";
 export class DropdownOptionCpnt {
+    constructor() {
+        this.dropdown = null;
+    }
     componentWillLoad() {
         this.dropdown = this.hostElement.closest('xpl-dropdown');
     }
@@ -22,7 +25,8 @@ export class DropdownOptionCpnt {
         const navigationKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Tab'];
         const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
         if (selectOnFocus && navigationKeys.includes(ev.key)) {
-            const hostElement = document.activeElement.closest('xpl-dropdown-option');
+            const { activeElement } = document;
+            const hostElement = activeElement?.closest('xpl-dropdown-option') ?? null;
             const component = {
                 component: { hostElement },
             };
@@ -49,11 +53,11 @@ export class DropdownOptionCpnt {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (h(Host, { key: '4ff7cc350e34059ad4df757b88112756c7f5b83e', class: {
+        return (h(Host, { key: 'cfdd7c14ccd6996d9e4e540b3364201d78f68ee8', 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: 'a014d09116703f5477a48cace194ba1beef602d5', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'af16591b7f1195351facaafa67c07368ce42d072', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '72c0dbd67ab7930924cb1ef3ee9f0b4b53cf28a6', name: "option" }), subtitle && h("span", { key: '0893e031740ebdd8fc8ca7de2cb10d0b4d7c95ae', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+                '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: 'f562da32ddf9725e696659abf6f245d1e9b1f787', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '10426bcc6a8a88db580eb04b3f83ad5d9316fc73', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '5f67b98ef75350ca860e96b5dd0c5375447bf09f', name: "option" }), subtitle && h("span", { key: '6240790bbe44e43d612245bd052ed2a54fa409e1', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {