@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -131,4 +131,8 @@ choicelist markup and interactivity.`);
             return output;
         })(Choicelist.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15501-10918&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
 };

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplChoicelist {
+export class Choicelist {
     constructor() {
         this.name = uuid();
         this.onChoiceChange = (value, choiceIndex) => {
@@ -35,7 +35,7 @@ export class XplChoicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: '385f51ecb532a4f496e6ab8a74ec8731bdcc321f', 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: '1c3d9eff6699a56b0cc955a5f2e9905480d8363b', class: {
+        return (h(Host, { key: '3e1881fd40ea2aecefbb24951920b92ac08ef029', 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: '052b5c72e4bc37b84939b639e070b8e692064ffe', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {

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

@@ -1,10 +1,10 @@
 import { Host, h } from "@stencil/core";
-export class XplContentArea {
+export class ContentArea {
     constructor() {
         this.size = 'wide';
     }
     render() {
-        return (h(Host, { key: '20346d8b9d44a2cc90e2bade2beedc3786276c12' }, h("main", { key: '9af1a83077ac5ae29038d998feaceb450be3f744', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '776a4b59943b1bbbcb81b9d35cee43618e81f338', class: "xpl-content-area" }, h("slot", { key: 'a4a023c5ca16110c9f9ccf1f10386e28a8b4c81e' })))));
+        return (h(Host, { key: 'cef99f9f6ab92587151d12cf86b67fedba498b66' }, h("main", { key: '17b27ecd7223283294ea7536a7cfe9c6580c4ec4', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '566d17a37f8389b10d95d2db96c4df1e3e0a01ec', class: "xpl-content-area" }, h("slot", { key: 'f084437566dc11ac51cd57e514ebb3bade2826e6' })))));
     }
     static get is() { return "xpl-content-area"; }
     static get properties() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-export class XplDashboard {
+export class Dashboard {
     render() {
-        return (h(Host, { key: 'f072c5fdcc919dc5796dc23cdca36e9431a17814' }, h("dl", { key: '899d09bec63eef669028c3e4d7193f2ab690f781', class: "xpl-dashboard" }, h("slot", { key: 'a36c42cb173e82d17c5d4b567a5a182152204813' }))));
+        return (h(Host, { key: '7894283eaf23b979cd2f30bdd3dafee98d2a82e0' }, h("dl", { key: '0e67c4909212d1ce954d2eef615443179925c1bf', class: "xpl-dashboard" }, h("slot", { key: '420cf5e409a1699e3b92b4deb38d49fca67caa50' }))));
     }
     static get is() { return "xpl-dashboard"; }
 }

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

@@ -108,4 +108,8 @@ DataCard.parameters = {
     'web-component': {
         render: DataCard(DataCard.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=8793-114043&p=f&t=01tbTrRZyfvVafsA-11',
+    },
 };

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: 'd8e5d213c87a8d5270f34d6bd60a698e04dd852f', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '3cd7a7ef77c90e6caefdfa0a7eccc132c07871a2', class: headerClasses }, h("header", { key: '7f85f31d60d7022ec75c3d3b164391e11059662b' }, !!this.leadingIcon && this.icon && (h("span", { key: '192e6c0dc871185a7f2845a14c38b1dc6ad04702', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '9d289a6db0fed0787a2c5cd5de6c57e92203a3fd', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'f1b56a29e648ba29e7f4b0c0493c8e27d410d843', name: "title" }, this.name)), this.link && (h("span", { key: '92b7cab6af5ca4f0664902ea359b3dfb7568e5b6', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '1326fdb0659191f1c2ff7fbb137eed5c4d5c4155', icon: "chevron-right", size: 16 })))), h("dd", { key: 'fce45e8e2d908a7d23e95a76cc0bc2334cd729b1', class: "xpl-data-card__body" }, h("div", { key: '1341065e9f0cbd91b82d239a87aa9818f237334b', class: "xpl-data-card__left" }, h("span", { key: '0dff4e467f439d991f3da594507e0e4310bdecee', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'cb5fd1c7897ac6bce5de93082f1ca333e826d53d', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '83f568edc52ec6a2e0a5b63544e2849dde91318e', class: "xpl-data-card__right" }, h("slot", { key: 'a27fd65217f4817051ba955890582bafb6050f97', name: contentSlot }))))));
+        return (h(Host, { key: '15499953647bf4b8c38c98b2beafbc30adececd3', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '6b4ac5e8e9fdffa254618b70f8ca4abb5c244361', class: headerClasses }, h("header", { key: '398ae3fcc452fe3281b006497cd5bca10d5405f3' }, !!this.leadingIcon && this.icon && (h("span", { key: '872e3b75a6cb7f3b6ae28f16da84b7264aeeb1e7', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '23452cb159ee169040132182e0c7701d6f537c61', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '492cec94080ea654732e8a14214d78bcf844abf6', name: "title" }, this.name)), this.link && (h("span", { key: '2c31f2d7e9c96b81465a855e156504ce825c9f97', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '1b5f695dc1062c8934569924334aafeb0c4f50d5', icon: "chevron-right", size: 16 })))), h("dd", { key: '6b45e5c1e3bb58fb2a690a633ad601694917b2fb', class: "xpl-data-card__body" }, h("div", { key: 'a6d27211c38c758f7cfb59d5597ac4f0c991bd31', class: "xpl-data-card__left" }, h("span", { key: '92f23b34ba9d72e934c6db3d120ab6e8d3ccfe97', 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: 'c776c1bb00bca03edbe6e5ed60f712b830ba40e5', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '5d0acee9071c6356830c6f55dd5066ac68bbc356', class: "xpl-data-card__right" }, h("slot", { key: 'c513a4cd650d309fdc06045e02315fdab9256eae', name: contentSlot }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {

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: '8f8b9899bfc602454687020e4547ba98e6c87cf4', class: className }, h("span", { key: 'd64ecfd54eb6ca33a05e271c52a7df5960f9c0df' }, h("slot", { key: '5e62ba9c682428dab560f67603343d9332bc02a5' }))));
+        return (h(Host, { key: 'a0b934233c1afba99b2d3691a6ea14d3335e4119', class: className }, h("span", { key: '8d701723f174d846e717cd030c4faf72ae938da8' }, h("slot", { key: '5017353de8a9917358c9ba4194fe5a575720f8f5' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

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: 'e1bd6d56ea5501e48d8f7fba91af32fbc223d343', role: "group", "aria-label": groupName }, h("li", { key: '543d3350cce47b4e96f78c6a411877110a27c842', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '85b5c8675bb3b2eecdb0dc3ffbf09dc9bd824ceb', label: groupName }), h("ul", { key: '9dfcd1a43cca4fd431b052e438743d24f872f248', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'd5d7d5d03bfde4306f1a8d861f7f2308eaac2bf6', name: "options" })))));
+        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" })))));
     }
     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: '41de08a2e945b9d6412264a44a04dd65bc125276', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '15b526b8a4ec46059d8edd3aed61c82d6bc79d64' }, this.label || h("slot", { key: '5b8c05d504e56c2852fa8439b15012c73552c190', name: "heading" }))));
+        return (h(Host, { key: '9b05e54ae226524434ac8485c51e7fccd4e5fe9e', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: 'c5ada81fbed76834515cff75f1fd1ce87b2ccbe3' }, this.label || h("slot", { key: 'dfe135bf2499e858e75ab1e87793ae75eb0982c6', 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: '5065b45c91f2e8c385c70726b4624b62e609dc61', class: {
+        const { label, isSelected, isDisabled, value, subtitle, icon } = this;
+        return (h(Host, { key: '4ff7cc350e34059ad4df757b88112756c7f5b83e', 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: '3a9493d1f0e2f9eff727f001d08c65477372e58b', class: "xpl-dropdown-list-item" }, label || h("slot", { key: 'fbebc2fd7f45d9abf4a2be0b306d92b3de8cb090', name: "option" }), subtitle && h("span", { key: '987104f21b1843e7350bbd4d8607fcdb1a580131', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, 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))));
     }
     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: '82f0becf57013a4f830e7c4aa56e3653b5eb43c5', "aria-expanded": isOpen, class: {
+        return (h(Host, { key: 'ef1637b50d96200219f93a992cecd838bdc37ae7', "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: '59c584beb1e538c2dff25039e8513de5865a80f1', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'ff121c50de1a809031ea8be1d271b65946c2fa9a', name: "options" }))));
+            }, role: "listbox" }, h("slot", { key: '69889998dda0b69e3e582b089baf295c8cfca39d', name: "header" }), h("ul", { key: 'dcb7e840e724ebae950f8c85fca142bcf767cc5d', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'b33fd8bb6a1871db5e04173f0ad55a6485ee474a', 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/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: 'f49634b51fd6fb49bcb75cc4247f683ff99d6b99', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'e5cd66e212a41ce26dfaccae634ab7ee22ba9910', name: "header" }), h("slot", { key: '07e1fbec46f08e46f728340291510992d21f71a4', name: "body" })));
+        return (h("div", { key: '9ae7568410463f24a85e39da8b14dc70e99730c3', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'c84c62c9eb47d1bf02c6e7d8a8c3d59542ef5f7b', name: "header" }), h("slot", { key: '26012976f5d8474f4a648816e9dc92355611177a', 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: '639f0a42ea0189fb4c269de1b76c5491729f868c', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: '924f54186ae2eb07bb4fab65eed7815f60be3a95', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: '29864a738aa7d5e9498195ce0d22bb8d78e39989' })));
+            } }, h("slot", { key: 'a18ef630d9f7f4c8b4079f2d83afe6b28700fb90' })));
     }
     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: '4969ae6223aa4f6604d20e657d390d8ec43eb9bd', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: 'b1a117c4961d5a2f618510159b292184c2c1aed3', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: '244d34612847408ddb9e0d718b1e5916b7e24b2d' })));
+            } }, h("slot", { key: 'be0ef005b0ed337272e92d29dda61dcbe966c4ed' })));
     }
     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: 'b7adecdd36342641869726ffa094578c1272dc1e', class: "xpl-grid" });
+        return h(Host, { key: '0036b594c89e75a9b302e7a7d9c99d4703a8b729', 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: '4a3a254b51eae0907baf74c383b0d2b60017b69b', class: className }, h("slot", { key: 'b23f50ff733b9f3009eda4a3569a28b0636e76f4' })));
+        return (h(Host, { key: 'bb28d83b6fd6ee92390ffcb5a505f5084f5624b9', class: className }, h("slot", { key: 'db3cf487db67044879425c830a14a44e06d19414' })));
     }
     static get is() { return "xpl-grid-item"; }
     static get properties() {