@xplortech/apollo-core 2.11.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: 'a5ced1a4f1e3e5323dbc247c66ddf5ad489edc5f', 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: '70f4738e8f5d1e1a72858d139eb4a3b531973449', 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: '926cdfb1b6e52baabfb46bac6d837c5f1ba45183' }, h("main", { key: '71dacea3a70c90ae0471a1ec3c39add237faa119', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '5e53fe46cf9dc459d4a9d1f0540464b8bd695d8a', class: "xpl-content-area" }, h("slot", { key: '2f74936219cf75dccd583ee01a173807f0f80079' })))));
+        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: '1eb93f83a05cfe198aed91b0d8771bdbe6e7aaee' }, h("dl", { key: 'bdb8f39b30d318ae25a203ac75966f12a9299b35', class: "xpl-dashboard" }, h("slot", { key: 'caf043e38777ac0a397782957f0936bb34436f63' }))));
+        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: 'cbf0c9eb79fbd3e66c683e821e9b992d46d5ec1a', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '92bc8a02b1acfa3c080a2a975d43118be54f10d5', class: headerClasses }, h("header", { key: 'f6a0baa73ab0e9d3a6eb9252acba54677a1083dc' }, !!this.leadingIcon && this.icon && (h("span", { key: 'dad99548c0ded82140b345e9887747c31ee9f6c7', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: 'd591758d2ce1647ea67f03a27e4ae2efd29e4652', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '07760d38b11971d96d7841c9897aa13481ea234c', name: "title" }, this.name)), this.link && (h("span", { key: '6ac3587f2ab1375cee605b22fe515e2c9a489e72', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '160ebeeedc59a31e0ea3480dd393ec4623afb831', icon: "chevron-right", size: 16 })))), h("dd", { key: 'dcf0703823e9f58f71a112a83de3d65cd43e1ae1', class: "xpl-data-card__body" }, h("div", { key: 'd7551579d17cfebed3dac59d32b56eb166afb530', class: "xpl-data-card__left" }, h("span", { key: 'c5c412c76f9785de5ff8686db3dcb71540b79b1f', 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: 'b33a9a133cf0a18deaccf6e3772ab1a797f9fa1f', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: 'e9dc031341b49ebf121cbe8cc081df6978aa13ad', class: "xpl-data-card__right" }, h("slot", { key: '37c8414e9dc60052f1d5a69d86ece17b7cdbc1da', 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: '1926b1e92a89dc5039042d29491f246cf3900efa', class: className }, h("span", { key: '492651208216149bfd4d2ed7cc8610b2bc8b05ea' }, h("slot", { key: '1e8b9e121ab1cb946b7a13d2bacbeea9a490a289' }))));
+        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: 'e6326e88bf725b9f3f9c2701dbb6e62a185ad2e7', role: "group", "aria-label": groupName }, h("li", { key: '92b0a065e228bf368fc8a6214d7d3d86c986f4dd', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '60cda98e80262dfd23b5fe0b18370d8b6245d39a', label: groupName }), h("ul", { key: '7a7c186e05a04286650d7292e156deb41638f703', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'da798e46d297ec28a0880cf04e4f0e20220ab28a', 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: 'e4444b617fe160dbf259f4ecc2aafd6166859dce', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '1e1e37499c0add5b53fcd0a836f97fa5b9e1a9bd' }, this.label || h("slot", { key: 'c310120a37646452e989db2ead01d77a89b96f0d', 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: '66ffacb152e80f270877a189488048ef6b36b7af', 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: '274fa639d506ef3feb5bafc3f0b21ed8bf80e95a', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'e7f63ede84adca57d99baa06dc1555d3afacd02c', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: 'cc0874abba079616e8516d366981a38ddef550b1', name: "option" }), subtitle && h("span", { key: '37cd186edb0de3f4c33b9faa2dfa983424a011bd', 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() {