@xplortech/apollo-core 2.7.0 → 2.7.1

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

@@ -368,12 +368,12 @@ export class List {
         var _a, _b, _c;
         const ariaLabelledBy = ((_a = this.labelledBy) === null || _a === void 0 ? void 0 : _a.trim()) ? this.labelledBy.trim() : undefined;
         const ariaLabel = !ariaLabelledBy && ((_b = this.label) === null || _b === void 0 ? void 0 : _b.trim()) ? this.label.trim() : undefined;
-        return (h(Host, { key: '4290084c30b164abb653943a81783c35531d6316', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, (_c = this.items) === null || _c === void 0 ? void 0 :
+        return (h(Host, { key: 'aaa6e1cfa2d87e61b239d9aa59c9e4647f05aade', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, (_c = this.items) === null || _c === void 0 ? void 0 :
             _c.map((item, index) => {
                 var _a;
                 const legacyRowId = (_a = item.id) !== null && _a !== void 0 ? _a : `item-${index}`;
                 return (h("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
-            }), h("slot", { key: '55ce7202269eab851c0d753fd87ef2d5bf9f59a8' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
+            }), h("slot", { key: '89eb57b654baf9efbfd021e8c8db1fe074daa6d1' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
     }
     static get is() { return "xpl-list"; }
     static get properties() {

package/dist/collection/components/xpl-main-nav/xpl-main-nav.js

@@ -13,7 +13,7 @@ export class MainNav {
         this.navWidthHandler();
     }
     render() {
-        return (h(Host, { key: '12ad41e2631d3cbab84b0bf536ffaf4fc31e7f8b', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '54c0fcc49ddda8846279b8efc4afe0244e054211' }, h("header", { key: 'a1803d0c15541eb7d8b84d17d6e8c5613472dd7e', "aria-label": "Sidebar Header" }, h("slot", { key: 'cee7321f97dc59f7d7e844ecd8fab6ba656b92e9', name: "logo" }), h("slot", { key: 'f33cd91b4ad2e7dad79f89401477c7c2cc7636aa', name: "brand-name" })), h("div", { key: 'd7951aa7282d7be3107b15196679f2e55c76d847', class: "xpl-main-nav__main_section" }, h("slot", { key: '716d5be941f65ce57c2a9f12e4eeaedef83c0dd0', name: "navigation" })), h("footer", { key: '880b9fb98c5d0d2b4133cacb73a7c339590bf8bb', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: '005c2efc4a3490e50a2b692d0e9dc7e2ce76d938', name: "footer" })))));
+        return (h(Host, { key: '122bf1f28c4fb1e460185989b2d517f1ddbfb22b', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '4ed8ce484b394adee98ac16056ebbabcadd31625' }, h("header", { key: '829b7904323aeea21922a8d4a8fa33141cfa7913', "aria-label": "Sidebar Header" }, h("slot", { key: '8a6ea72fa4a1b26f9825a36b4ac7e64c9dbf476c', name: "logo" }), h("slot", { key: 'bf049e9ee7b83af1c4ebfef21681edcb35de9364', name: "brand-name" })), h("div", { key: 'a0ce70ccf5e4bac6346711127fba5278963910c1', class: "xpl-main-nav__main_section" }, h("slot", { key: 'bce360027342a1ef3e009bad6bc28e44c64dbd04', name: "navigation" })), h("footer", { key: '0b5f2e6cc890e4257f5e5503302492a236950f87', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: '01dbe4d3834e1bc67b51108600688544e549ecde', name: "footer" })))));
     }
     static get is() { return "xpl-main-nav"; }
     static get properties() {

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

@@ -44,7 +44,7 @@ export class Modal {
         }
     }
     render() {
-        return (h(Host, { key: '1014ca8cb29f3cfeb7f2cf580127b8fe61e7bcbd', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: '0085b008fb42a998c2b27690102b8ae7f0e49c67' }), h("dialog", { key: '9e2d23304e10872ed3dc9a7520537e36bf8b8f5b', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: 'f55a9d85fc271183e0a6b7e60fb4ad5ed623b010', class: "xpl-modal__header" }, h("div", { key: 'ac105d7ee88148e4b10b26522f93fea70b8d6c06', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: '89ff5fda063dc98628c409ee51c124f17f9e7553', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '03e05d28ca6449859ac58f0b0efaf3d8e24c1d62', name: "title" }), h("xpl-button", { key: 'ff132fcbaf91ab6922b12f667255594673e21bd5', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: '6d712ffc1de66d43591ccf71b08ed5e823fc4c8f', icon: "x" }))), h("div", { key: 'ff5f20b209f6d704d0d20561818ca3ea5b353fce', class: "xpl-modal__subtitle" }, h("slot", { key: 'de25d1ab35729ad5ee0e279311285eab20fb7669', name: "subtitle" }))), h("div", { key: '286f34b54309527c836cb7cc06018ffc577c500f', class: "xpl-modal__body" }, h("slot", { key: '960036c7d3da774ad0f59ccf2c859d7ba3ec3a98', name: "body" })), h("div", { key: '24f7db0e4153d9f4105d787abdc1fe491ba6633c', class: "xpl-modal__footer" }, h("slot", { key: '4f096e57455b20caec555a008a14d411f40b53d7', name: "tertiary" }), h("slot", { key: '1fee8182d892c3460fe30c20456e1b9139bafaec', name: "secondary" }), h("slot", { key: 'e2b91a7af9f34c297d6c311823c91f9a0ab4059c', name: "primary" })))));
+        return (h(Host, { key: '310913d620acf72531ecb06aa6cd2180bb58d13b', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: 'd95693fd09c2f0a8024f3cb69a021f0bd79f7916' }), h("dialog", { key: '5cffd3cfdcc6033baa1d9e3e5fdf56b8411a8975', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '2d0be8e91065d464797d85cd1b98272292eacb09', class: "xpl-modal__header" }, h("div", { key: 'cb7d8594ed217599bcf0e2efa88d72afe0fff758', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: 'fb7dd69369accc0c98ef8762ca457b6368ca0036', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '36a6d3d38d35064f81740504090fbbcdf2125097', name: "title" }), h("xpl-button", { key: 'db84ecf685afec8d0d783b433f8aa030acc436bb', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: 'bf241c6636ace6e182bf259bd24754646dc7f151', icon: "x" }))), h("div", { key: '105fa1a5b9d927bda5ca5521bbb8211cb07ab8e8', class: "xpl-modal__subtitle" }, h("slot", { key: 'd25d6d8bb95cd51f075dd7f9b5e1e199dac3efb0', name: "subtitle" }))), h("div", { key: '3b194a36ad0f4446149027544c16a25ba27f2cec', class: "xpl-modal__body" }, h("slot", { key: '077e5b70115e3e906cd9ea7181c51615799c77e8', name: "body" })), h("div", { key: '687bd9ca45af20945ab5461ceb68ec099a30c50b', class: "xpl-modal__footer" }, h("slot", { key: '73d5884708efd296a701c37e02663668fcfd37d8', name: "tertiary" }), h("slot", { key: 'bad90d2355b8c015e19b1e450b5a2ce96e5ad55d', name: "secondary" }), h("slot", { key: 'c601b66edc9fb2c082ccc713d6df95f15bd604ef', name: "primary" })))));
     }
     static get is() { return "xpl-modal"; }
     static get properties() {

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

@@ -9,11 +9,11 @@ export class NavItem {
         }
     }
     render() {
-        return (h(Host, { key: '5e0a171c719802e96d48f7d635c189563387fade', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (h(Host, { key: 'b3a214a57ad57e9db1bbfd6a1809999ce0575a82', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, h("slot", { key: 'aff0155598a1b64d50168552ff251b824d00a86f', name: "link" }, h("slot", { key: '28da4593d2302b2867b0792562dc5b7b3ddd6983', name: "icon" }), h("slot", { key: '93e12751d2320608ee7a10d73eef67a1c1bb5443' }))));
+            } }, h("slot", { key: '0f2a74dc4fd6f419a01106d872a5f6b5066a21a8', name: "link" }, h("slot", { key: '234b41ca18d65ec3423ff580d983d24b483641cf', name: "icon" }), h("slot", { key: 'cdb0ac59997cd1c557b05c6c8d8f60ae78d28a4d' }))));
     }
     static get is() { return "xpl-nav-item"; }
     static get properties() {

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

@@ -37,3 +37,21 @@ Pagination.parameters = {
         url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=9-1407&p=f&t=01tbTrRZyfvVafsA-11',
     },
 };
+export const PaginationWithPageControl = (args) => {
+    const { totalPages, withPageControl } = args;
+    return `
+        <div style="min-height: 120vh; display: flex; align-items: flex-end; padding: 24px;">
+            <xpl-pagination total-pages="${totalPages}" with-page-control="${withPageControl}"></xpl-pagination>
+        </div>
+    `;
+};
+PaginationWithPageControl.args = {
+    totalPages: 5,
+    withPageControl: true,
+};
+PaginationWithPageControl.parameters = {
+    layout: 'fullscreen',
+    'web-component': {
+        render: PaginationWithPageControl(PaginationWithPageControl.args),
+    },
+};

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

@@ -59,19 +59,23 @@ export class Pagination {
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (h(Host, { key: 'cb9e0db1008dfadcfb48ae308d8e595dc751a6ee', class: `xpl-pagination xpl-pagination__${this.withPageControl ? 'with' : 'no'}-page-control` }, this.withPageControl && (h("div", { key: '30d272307c28e0b50d78b036ec63f4d2a120aaa0', class: "xpl-pagination__rows-per-page" }, h("label", { key: 'cc5969dbc2685aff198f03ef593dd714570225dd', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '447ee86d134c70f51c4a756c499bb6766d10ed7f', class: "xpl-pagination__rows-per-page-select", choices: this.rowsPerPageOptionsArray.map((option) => ({
+        return (h(Host, { key: 'fad9cdff4010b4b5ac842633bf7daf09b4dbd5d4', class: {
+                'xpl-pagination': true,
+                'xpl-pagination__with-page-control': this.withPageControl,
+                'xpl-pagination__no-page-control': !this.withPageControl,
+            } }, this.withPageControl && (h("div", { key: 'eb125851b89aa1422ec3e5d5e336fcbecd07489e', class: "xpl-pagination__rows-per-page" }, h("label", { key: '5f2aa4c45d183827317a74cf4700981b6b0e7f2b', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '7ba2987a24b3228d9b59320f29b22b5819f85546', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
                 label: option.toString(),
                 value: option.toString(),
                 isSelected: option === this.selectedRowsPerPage,
             })), ref: (el) => {
                 this.rowsPerPageSelectRef = el;
-            } }))), h("div", { key: 'ac10b2efa235b3a065c7089bfb8674d6e015ee0c', class: "xpl-pagination__pager" }, h("button", { key: '83e9cc02336b94fe3cc8b16ba52d01ab70c50eb1', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: '12a92187d96ad9c2973fd73c2b61c1c04cce589b', icon: "arrow-left", size: 20 })), h("xpl-select", { key: '79324205919048c207044ca7916a276675463d25', class: "xpl-pagination__page-select", choices: Array.from({ length: this.totalPages }, (_, index) => ({
+            } }))), h("div", { key: '8bab9db1cecfdaeeb760b0e4e1afb393ff3a3fe7', class: "xpl-pagination__pager" }, h("button", { key: '19efd8a9aee2b05f875d2db34c7cdd174c845f60', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: 'a77a15c649a6f2c86b100d1687b4a099acc18602', icon: "arrow-left", size: 20 })), h("xpl-select", { key: '5778cad67d3a4b930b1f89b0e49c30e941e23259', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: Array.from({ length: this.totalPages }, (_, index) => ({
                 label: `Page ${index + 1}`,
                 value: (index + 1).toString(),
                 isSelected: index + 1 === this.currentPage,
             })), "custom-display-value": true, ref: (el) => {
                 this.pageSelectRef = el;
-            } }, h("div", { key: '73674015b0e1f8c9175c2af2a409cf1beb57fb9d', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '6cecec44e8dfe62b9c6c94b33bad64473e0660a7', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: '9d21370837ee23434c94d790c7e300358d352e93', icon: "arrow-right", size: 20 })))));
+            } }, h("div", { key: 'd0ae655a0100c2e81c8f7bdc2c8d3072f00cc7c9', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: 'ca6c7eb4fd277344f340b83673f1e43cb0c9fe99', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: 'd18efdcb7e67ab908fbf79fc475993cf656b150c', icon: "arrow-right", size: 20 })))));
     }
     static get is() { return "xpl-pagination"; }
     static get properties() {

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

@@ -6,11 +6,11 @@ export class XplPanel {
     }
     render() {
         const hasAccent = this.accent !== 'none';
-        return (h(Host, { key: 'a9618f21b7aba5804881ec509d47909b87ad9aa5', class: {
+        return (h(Host, { key: 'e9a747ba679f6f9f907d13217f329947bff93e31', class: {
                 'xpl-panel': true,
                 [`xpl-panel--accent-${this.accent}`]: hasAccent,
                 [`xpl-panel--padding-${this.padding}`]: true,
-            } }, hasAccent && h("div", { key: '5b92aa4395658996de2736941d6c0d0262903013', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: '5b22eb3d1911ce2d68876c0bc0bc61f947c830f9', class: "xpl-panel__content" }, h("slot", { key: 'b2f331aa8ea4328b0e50736d97361a7bfcde60ed' }))));
+            } }, hasAccent && h("div", { key: 'b777fd4a81574ff9276582b256b673cccfc63a34', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: '5fa5ba4c2bfa13d7dcaee603e96ec9b77d103b13', class: "xpl-panel__content" }, h("slot", { key: 'c99b797e076c2641ae205181479dabb38f9ea009' }))));
     }
     static get is() { return "xpl-panel"; }
     static get properties() {

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

@@ -206,16 +206,16 @@ export class Popover {
         });
     }
     render() {
-        return (h(Host, { key: '67ecd18580166f1582c29e33f1485bf67590b9f5' }, h("div", { key: 'bba42a3474432557bfc71705c2d5206493fed64b', class: {
+        return (h(Host, { key: '6fe479a39ee565772785c7b540c4e0915c5403e4' }, h("div", { key: '350452ca097bab13e7f06b3d1aa5e2774d80104b', class: {
                 'xpl-popover': true,
                 [`xpl-popover--${this.actualPosition}`]: true,
                 'xpl-popover--is-open': this.isOpenState,
-            } }, h("span", { key: '7960b727b609da6b0e949e4889e217b0f3efb6c9', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+            } }, h("span", { key: '0a9365be21ef70855bd7d304a77fc80d19ba16d3', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
                 this.triggerRef = el;
-            } }, h("slot", { key: '08d2034f7559ce12f948252cf62bded94ab7666a', name: "trigger" })), this.display === 'arrow' && (h("div", { key: '1c51e2f96884da9828cf5d94fc1639a63580a0c7', class: "xpl-popover__arrow" }, h("svg", { key: 'bbf85fdaa6385724f8ce55001a5d9d2e2471dfc5', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4ba2c4805e65b776af7bd313f575866f134fb778', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '21fab6334d8106940a3e5c49acc70b80a7d61326', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: 'fb0eeedab71c9d10fcab8f9277af919efd94f202', class: {
+            } }, h("slot", { key: 'df227b5bb7683599b4f82ef2a8c9d840b4920a61', name: "trigger" })), this.display === 'arrow' && (h("div", { key: 'dbf0b6998b3aa6ae40089e13bef86878037bbe24', class: "xpl-popover__arrow" }, h("svg", { key: '2bf57b69abc556ba9a86b59f6347a2c8d81a67c3', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '36fef83ea3e2d3d4b388f5bdfe74d0bdc034be9d', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '1187a6ec22457ab6086753cf199398705541b1b4', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: '7c6f063094de1462629a0db380597374c4231855', class: {
                 'xpl-popover__content': true,
                 [`xpl-popover__content--display-${this.display}`]: true,
-            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '4bd22aa19dedb6fb77355caafcd009413c8ad7d9' })))));
+            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '41062b776eed58b98452bb5a8d3b7099ac1138d2' })))));
     }
     static get is() { return "xpl-popover"; }
     static get properties() {

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

@@ -25,12 +25,12 @@ export class ProgressBar {
         return this.variant === 'indeterminate';
     }
     render() {
-        return (h(Host, { key: '4161cfe080a629f1c69c14a0e0a553df950d57a8', class: {
+        return (h(Host, { key: 'e5cc7a2231ed74242241723c9f0a57444a8000bb', class: {
                 'xpl-progress-bar': true,
                 [`xpl-progress-bar--${this.size}`]: true,
                 [`xpl-progress-bar--${this.variant}`]: true,
                 'xpl-progress-bar--complete': this.isComplete,
-            } }, h("div", { key: 'c3ec83eb50771a91c543da1c9ec204e03b402c98', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: '9bb66a54388c8d24d9c737d8736536fc47285bc9', class: "xpl-progress-bar__header" }, this.label && h("div", { key: 'fb8160645a4c2ad56a276d5b85c5384d85b75b7e', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: 'fb3cf9019e4ad18b0016219d44f3aa916ee5b4b2', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: 'cef864deff983bae01b9871ec17d6f6edccc327d', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: '9f7a52c0527b0fccc2189f0485596fa2cf80d417', class: "xpl-progress-bar__helper" }, this.helperText)))));
+            } }, h("div", { key: '3212fdea66e2cd3edffc36f99c9edc197f15bcee', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: '004c0b9203df13c6818fdbb8c928a47d86e7388e', class: "xpl-progress-bar__header" }, this.label && h("div", { key: 'ce735edff19cc004f979a582618c968260cd23c3', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: '3a9f143b79152aa3208593c9249a62d819c2967a', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: '517787d0ff39c082a3d4763b78b16a9ce9235b4b', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: '488c5092b96a1e9a5a08f9b090f94fe66f6f1490', class: "xpl-progress-bar__helper" }, this.helperText)))));
     }
     static get is() { return "xpl-progress-bar"; }
     static get properties() {

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

@@ -55,7 +55,7 @@ export class ProgressIndicator {
                 ? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
                 : `Progress: step ${currentStepNumber} of ${totalSteps}`
             : 'Progress';
-        return (h(Host, { key: '44ac526c3954f688007573bf53c771b30518b9c7', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: '1ab86e3777ded2737ed5dd3c5ec759211a1087a7', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
+        return (h(Host, { key: '3a6f253693fd47f982541099a1729ca36d0ce64a', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: 'c25b47994c43135ed3147ca579bdc3d8124d7c8a', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
     }
     static get is() { return "xpl-progress-indicator"; }
     static get properties() {

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

@@ -14,14 +14,14 @@ export class Radio {
         };
     }
     render() {
-        return (h(Host, { key: 'a96ab55137fedbfe00d68b660bd2d935208dc6c6', class: {
+        return (h(Host, { key: '959940093b1988f6e362c17e463fe2139cd828c5', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'ee385d0976d065fee4f72f75faea0ddbe33c0e81', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '04e74e08a20b229f2d45b8fce80fa65ab3bf0954', class: {
+            } }, h("input", { key: 'cccccd581ee84a2c5c39a625565877cc080e9702', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '3dd39b409818d7f2921c6dc7dc2c3d790a088833', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: 'b9fe3e13de64776a9cc1afcd8f7c10f84be8c8bb' }), this.description && (h("small", { key: '6ecd217342fbfa9bb5022bb1298683ff87af1713', class: {
+            }, htmlFor: this.id }, h("slot", { key: '0e0af25e2b1679bef0aa053d20df8f0ec7390d18' }), this.description && (h("small", { key: 'dcc8791c823ec66dcdb806ae4aeaf7daf6c72298', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));

package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SecondaryNav {
     render() {
-        return (h(Host, { key: 'bf9cbd4351297a28d6d98d3bf1e0612fac1f5136', class: "xpl-secondary-nav" }, h("nav", { key: '764de50287c88f53f19005d50b177e85f71f7f43', "aria-label": "Secondary Nav" }, h("slot", { key: 'd7fe629382a06f62dde9f08db082854e986ba406' }))));
+        return (h(Host, { key: 'f4fdd93b13c1dc779c84e8b00b12caeff58df960', class: "xpl-secondary-nav" }, h("nav", { key: '4092d23357761026ad5fddfbc32a221d957cce1e', "aria-label": "Secondary Nav" }, h("slot", { key: 'c3ae9f1821a6d22babece27971cc1faf15037cdb' }))));
     }
     static get is() { return "xpl-secondary-nav"; }
 }

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

@@ -16,6 +16,7 @@ export class Select {
     constructor() {
         this.choices = [];
         this.selectIcon = 'chevron-down';
+        this.dropdownPlacement = 'bottom-start';
         this.mode = 'single';
         this.truncate = true;
         this.active = false;
@@ -222,21 +223,21 @@ export class Select {
             this.truncate &&
             !this.customDisplayValue;
         const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
-        return (h(Host, { key: 'c02b59988eee5073103958a24061c46aa286ea50', class: {
+        return (h(Host, { key: '09d3587fa268cb0621ea293d246e23cde93d75df', class: {
                 'xpl-select': true,
                 'xpl-select--disabled': this.disabled,
                 'xpl-select--no-truncate': !this.truncate,
                 [(_c = this.classNames) !== null && _c !== void 0 ? _c : '']: !!this.classNames,
             }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
                 this.container = el;
-            } }, this.renderLabel(), h("div", { key: '189c9d2e3370876b6289ee16ee1b8927e5bfc0ee', class: {
+            } }, this.renderLabel(), h("div", { key: '007a61cc60c948d0691d6983cb197652084e417d', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': ((_d = this.error) === null || _d === void 0 ? void 0 : _d.length) >= 0,
-            } }, h("div", { key: 'a8df7de958be97becd2a9f6a2db761702e2066c3', class: "xpl-input-wrapper" }, h("button", { key: 'f00119d930d49b241d5160bfe7a70ee56ac598d8', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+            } }, h("div", { key: 'e1edfe6e4b205bd6332f07031ee51ef7f9f6ac91', class: "xpl-input-wrapper" }, h("button", { key: '53d079f28b8a1bcdd5498287dfd88bb7a3ba7b50', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
                 e.preventDefault();
                 this.handleDropdownTrigger();
-            }, type: "button" }, h("div", { key: '141643ae007e8f5827d4aeb8fdd2a95b14b003ff', class: {
+            }, type: "button" }, h("div", { key: '5cfec98b2e829ea48e96b373e09e740d5bf02ef6', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -256,7 +257,7 @@ export class Select {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: '05f6ba660e21584017715d3afc14d7bd8b8d536a', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: '9a452cf4c62cca5ba4279ddd8da09c9d24797dcf', ref: (el) => {
+        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: '8bb01d1e8b206fb3c1963cdebcd293eeb2277e05', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: 'f5e770c4b26449f3025d172d768d6df69bd0ae03', ref: (el) => {
                 this.dropdown = el;
             }, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
                 const { options } = component;
@@ -265,7 +266,7 @@ export class Select {
                 }
             }, onIsOpenChange: (e) => {
                 this.dropdownOpenState = e.detail;
-            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true })), this.renderError()), h("input", { key: 'd9d6cbc69fc5fc688b2dda6ea1ef99435d90fc94', type: "hidden", name: this.name, value: this.value })));
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), h("input", { key: 'fe84c16780622e730100a58a948fc4fe27f6ddb5', type: "hidden", name: this.name, value: this.value })));
     }
     static get is() { return "xpl-select"; }
     static get properties() {
@@ -353,6 +354,57 @@ export class Select {
                 "reflect": false,
                 "attribute": "disabled"
             },
+            "dropdownFlipFallbackPlacements": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement[]",
+                    "resolved": "Placement[]",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional placements to try for the options panel when the default\n`dropdownPlacement` does not fit. Passed to `xpl-dropdown` / Floating UI `flip`."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dropdownPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial Floating UI placement for the options panel (e.g. `top-start`, `bottom-start`).\nForwarded to the inner `xpl-dropdown` when the menu is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-placement",
+                "defaultValue": "'bottom-start'"
+            },
             "error": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/xpl-side-nav/xpl-side-nav-item/xpl-side-nav-item.js

@@ -45,10 +45,10 @@ export class SideNavItem {
             expanded: this.expanded,
             selected: this.selected,
         };
-        return (h(Host, { key: '10318a2c26c650f5c5e2143c2fe1bde6a372f933', class: {
+        return (h(Host, { key: 'a621f4f9c04d79de708a34a4f4eab06e523a299a', class: {
                 'xpl-side-nav-item': true,
                 'xpl-side-nav-item--link-disabled': this.link && this.disabled,
-            } }, this.link ? (h("slot", null)) : (h("button", { type: "button", class: linkClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, this.hasChildren && (h("span", { class: `xpl-side-nav-item__arrow ${this.expanded ? 'expanded' : ''}` }, h("xpl-icon", { icon: "chevron-down", size: 16 }))), !this.hasChildren && (h("span", { class: "xpl-side-nav-item__icon" }, h("slot", { name: "icon" }, this.icon ? (h("xpl-icon", { icon: this.icon, size: 16 })) : null))), h("span", { class: "xpl-side-nav-item__label" }, (_a = this.label) !== null && _a !== void 0 ? _a : ''))), this.hasChildren && !this.link && (h("div", { key: 'ea6e431300ffe641e970c8cc49e7935858986685', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '378a00e24a61911ce69ef6a50e69d47b496b5557', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: 'b3ece8c8ddbf58693a370824c40fe3811828889a' }))))));
+            } }, this.link ? (h("slot", null)) : (h("button", { type: "button", class: linkClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, this.hasChildren && (h("span", { class: `xpl-side-nav-item__arrow ${this.expanded ? 'expanded' : ''}` }, h("xpl-icon", { icon: "chevron-down", size: 16 }))), !this.hasChildren && (h("span", { class: "xpl-side-nav-item__icon" }, h("slot", { name: "icon" }, this.icon ? (h("xpl-icon", { icon: this.icon, size: 16 })) : null))), h("span", { class: "xpl-side-nav-item__label" }, (_a = this.label) !== null && _a !== void 0 ? _a : ''))), this.hasChildren && !this.link && (h("div", { key: '3e22894c0bd9427f568b86bba00cdab822921997', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '41486a4241e4402232531d140e972b39d863ffd9', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: 'd334c6ecac7dd1dd12602a461db444cd1ccefc86' }))))));
     }
     static get is() { return "xpl-side-nav-item"; }
     static get properties() {

package/dist/collection/components/xpl-side-nav/xpl-side-nav.js

@@ -1,9 +1,9 @@
 import { Host, h } from "@stencil/core";
 export class SideNav {
     render() {
-        return (h(Host, { key: 'bfa4c94a1718583020da6a8b1e9104788ce78ef1', class: {
+        return (h(Host, { key: 'd01e8e27671eabc92613a803818b4351334011ac', class: {
                 'xpl-side-nav': true,
-            } }, h("div", { key: '1788f206ed3bea01be9cfa74fbc54a54e664945c', class: "xpl-side-nav__wrapper" }, h("nav", { key: 'ccbcbc45566a77a9134279b486148f3444bdb0ea', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '6aef4d3f8e0c037aeedfc45d8471978c635b3293', class: "xpl-side-nav__section" }, h("slot", { key: 'e4384164f138cae0135472428079b62924afbcdf', name: "section" })), h("div", { key: '9794ea9a4b566713d0adb0787ae2ab1ae171fa6e', class: "xpl-side-nav__footer" }, h("slot", { key: 'e20ff6d3795784ea11470b7287550c29c0984a65', name: "nav-footer" }))))));
+            } }, h("div", { key: '92c9f31fa0d9d564164cde99d17e30562c30abb7', class: "xpl-side-nav__wrapper" }, h("nav", { key: '5ddd8b18d4f74bb752b747ec4e1c48780a0738de', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '8b830945bf6ec1da8ab2e2c955c10a1077652590', class: "xpl-side-nav__section" }, h("slot", { key: '66e5cd33c23bdc8963d661e0741d34f80a0640fb', name: "section" })), h("div", { key: 'f0da4e3c25822453efcbfb3c6f8ea7ec328e717d', class: "xpl-side-nav__footer" }, h("slot", { key: '76b829e978361be9fd62bd412489ea4559852c3f', name: "nav-footer" }))))));
     }
     static get is() { return "xpl-side-nav"; }
     static get properties() {

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

@@ -5,7 +5,7 @@ export class Skeleton {
         this.size = 'custom';
     }
     render() {
-        return (h(Host, { key: '4c0962c3339b49f2f89d07e4827e826089419c70', class: {
+        return (h(Host, { key: '0ac86ae7bf109ea51bca36ac502d506ac7d0b66e', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,

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

@@ -26,7 +26,7 @@ export class Slideout {
         this.handleScroll();
     }
     render() {
-        return (h(Host, { key: '01e702ef959cc596ae8fb140275d733c93c3b399', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '4e82ee44b68eae102a4c4ef65e797ce23659d330', onClick: this.handleClose })), h("aside", { key: '1c718a30611bb6699f231a9e736c0521c248d65a', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: 'c53419926fbe8ccc6616af39d021248b46f138a3', class: "header" }, h("div", { key: '36e02fe5b7ff8d6920759ab793ead2be0f0811ac', class: "title" }, h("slot", { key: '7932fd5e77edb89570ebd3fedc0346929582ec7b', name: "title" }), h("xpl-button", { key: '9772e880c9b132ba84ccf45c4793e0af70548866', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '91922e8aa02c30aa73ae1ea3d2b47daffd954616', icon: "x" }))), h("div", { key: '2f7065ba1da7f0ad805e16b69f4a316d5a1f9285', class: "subtitle" }, h("slot", { key: '8edb8bdbdecd01abd2b7899d5c9897c91e625326', name: "subtitle" })), h("div", { key: '5945128002bb2103daac40d1f7457ebb97521002', class: "search" }, h("slot", { key: 'c4df975581beb16547a439a86f2a532c10fa4fa7', name: "search" }))), h("xpl-divider", { key: '3be4c74de14ca2380179798fe4ec0c9a758739af', tier: 0, class: "divider top" }), h("article", { key: '2012ae1197acc41f530af8920b19752a248e2b40', class: "content", tabIndex: 0 }, h("slot", { key: 'e8a1cedda6cd48bb62dc42f00c9bdc8510d4f603', name: "content" })), this.showFooter && (h("footer", { key: 'cfa5a41846485b879126a90f3a7346d6eb680776' }, h("xpl-divider", { key: 'bf05c9d85471b55dee25da790afb3cb642f1a86b', tier: 0, class: "divider bottom" }), h("div", { key: 'd109314ca745947f3337b06df73183ff277c89bb', class: "footer" }, h("slot", { key: 'cad183e788d3555a5366b19b4e01c3c90f7d9ae0', name: "tertiary" }), h("slot", { key: 'c12294440fe8544e51197dfddbc01aaea506575a', name: "secondary" }), h("slot", { key: '7accdf8dc3cc9b6a416cf784ec081d70c1d0f1e9', name: "primary" })))))));
+        return (h(Host, { key: '8a3f7af854b35469bf4a383cc4cb1fcfcaa15748', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '7033d78efa9ac2642a99d2b2dca278a3e9a44368', onClick: this.handleClose })), h("aside", { key: '2999e4119a0dbaac5125c7a1ef5f03761f445a0e', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '5e6bcf1284c2b2a4fbc05dd8e5100a33fa7597b4', class: "header" }, h("div", { key: '88172efe113b56a533761b975605a44ef52c5174', class: "title" }, h("slot", { key: 'c8f13168f62f96374250b11814ace756fa680503', name: "title" }), h("xpl-button", { key: '8e0e29a8ad2a5f45b250f9d563886fe7ad2a7cb8', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '110cbd50e31b51319745d6fed61188c1c885b8b3', icon: "x" }))), h("div", { key: '96e6cddf4b078736201116f220f27ddf34b90b44', class: "subtitle" }, h("slot", { key: 'eb02b4fce6ff5e658ec51c83819a5257f452d3a1', name: "subtitle" })), h("div", { key: 'ac8dfe1f99428cdf728027aa5a04d58d497f34f0', class: "search" }, h("slot", { key: '28deb70ef99f4880fba55beb2d2b4b1d3136a240', name: "search" }))), h("xpl-divider", { key: '928d20ef8e74eed4e06351c5dab0c0af9934d2b8', tier: 0, class: "divider top" }), h("article", { key: 'd6460cb29abb33f6676d2e4f517c1f2befa57148', class: "content", tabIndex: 0 }, h("slot", { key: 'b415af9cadedc61407623773fd6b2b1130caf5df', name: "content" })), this.showFooter && (h("footer", { key: 'db6a58277112f134dc150266446cc67c79bc6bc5' }, h("xpl-divider", { key: '129a61ba1a8a588e94d710b7e7fb1059c4b7f5e6', tier: 0, class: "divider bottom" }), h("div", { key: '6c81348acf8ee2bb4c12c2f3207daae564e78aa2', class: "footer" }, h("slot", { key: '8c9a6d4c215154bb2e66d62aa462b3b085ef0f5b', name: "tertiary" }), h("slot", { key: 'e66e45e2d090f45305f818c6496541b737c96aeb', name: "secondary" }), h("slot", { key: '8892bdf075a38237a5c858bfd951e1203fc3c892', name: "primary" })))))));
     }
     static get is() { return "xpl-slideout"; }
     static get properties() {

package/dist/collection/components/xpl-tab-panel/xpl-tab-panel.js

@@ -10,10 +10,10 @@ export class TabPanel {
         const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
         const panelId = tabPanelDomId(groupId, t);
         const labelledBy = tabTriggerId(groupId, t);
-        return (h(Host, { key: '4491f3466d26e462432843c382b0d0b5ab64e68b', "aria-labelledby": labelledBy, class: {
+        return (h(Host, { key: '4c4a86dda347872ea6b1c4569f8424bd6cac7bd9', "aria-labelledby": labelledBy, class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, id: panelId, role: "tabpanel" }, h("slot", { key: '75b3da77cddb6e0a83b7cf41aa5e0aa30259b728' })));
+            }, id: panelId, role: "tabpanel" }, h("slot", { key: '30c9ae6f3748dc02a73da7535443266b1043d61b' })));
     }
     static get is() { return "xpl-tab-panel"; }
     static get properties() {