@xplortech/apollo-core 2.6.0 → 2.7.1

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: 'a4b8f4ddd9b29563f64282e5728119e1552e5358', class: `xpl-pagination xpl-pagination__${this.withPageControl ? 'with' : 'no'}-page-control` }, this.withPageControl && (h("div", { key: '00c0d20d2bc57eebd82105ebafe08a5696496b16', class: "xpl-pagination__rows-per-page" }, h("label", { key: '1b28a926bbaa4b888217941bb0bf2d897d79dfbc', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: 'f8265a8d87986cfc0afbfcd9d783d767748a8957', 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: '1444d9005878427c44a573d4f6dd1d674b677228', class: "xpl-pagination__pager" }, h("button", { key: '08b98f8c1983543dad93c53d7c71d1aa71b4a45a', 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: 'dcc26fcb7be5f525b4767d0860766f3a216a93e4', icon: "arrow-left", size: 20 })), h("xpl-select", { key: '7ba55fb451e26b31aba360876d8ee3b2bb423e19', 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: '9c8adc967a098d954477d9032f6d22a0192948e0', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '73b5bcbe7ce988c7f5f12ec4ea179bb879f39919', 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: 'fb95a3807dc37c419195b2c88c2d8dc39b183880', 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/panel.stories.js

@@ -3,12 +3,14 @@ export default {
     component: 'xpl-panel',
     argTypes: {
         accent: {
+            description: 'Top accent bar color. `none` hides the bar.',
             options: ['none', 'primary', 'secondary', 'positive', 'negative', 'highlight'],
             control: {
                 type: 'select',
             },
         },
         padding: {
+            description: 'Content padding density; responsive steps for default/tight/loose (see readme).',
             options: ['default', 'tight', 'loose'],
             control: {
                 type: 'select',
@@ -18,7 +20,7 @@ export default {
 };
 export const Panel = ({ accent, padding }) => `
     <xpl-panel accent="${accent}" padding="${padding}" style="max-width: 800px">
-        <p style="margin: 0; color: var(--xpl-text-subdued); font-weight: var(--xpl-font-weight-normal); font-size: var(--xpl-font-size-body)">Panel content goes here. Compose other Apollo components within this slot.</p>
+        <p style="margin: 0" class="xpl-text-body">Panel content goes here. Compose other Apollo components within this slot.</p>
     </xpl-panel>
 `;
 Panel.args = {
@@ -33,12 +35,12 @@ Panel.parameters = {
     html: {
         render: (({ accent, padding }) => {
             const accentClass = accent !== 'none' ? ` xpl-panel--accent-${accent}` : '';
-            const accentBar = accent !== 'none' ? '<div class="xpl-panel__accent"></div>' : '';
+            const accentBar = accent !== 'none' ? '<div aria-hidden="true" class="xpl-panel__accent"></div>' : '';
             return `
                 <div class="xpl-panel${accentClass} xpl-panel--padding-${padding}" style="max-width: 800px">
                     ${accentBar}
                     <div class="xpl-panel__content">
-                        <p style="margin: 0; color: var(--xpl-text-subdued); font-weight: var(--xpl-font-weight-normal); font-size: var(--xpl-font-size-body)">Panel content goes here. Compose other Apollo components within this slot.</p>
+                        <p class="xpl-text-body" style="margin: 0">Panel content goes here. Compose other Apollo components within this slot.</p>
                     </div>
                 </div>
             `;

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: 'a247ab70a6b062022146b88d95b382f879cb8ee7', 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: '100febab4991a83e7463198331253fe7c7425a1d', class: "xpl-panel__accent" }), h("div", { key: 'c0758ab1d25675236ab15f052f45a29432021019', class: "xpl-panel__content" }, h("slot", { key: '948ec6423935f7ae825f78a89b456f72a66819a8' }))));
+            } }, 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() {
@@ -47,7 +47,7 @@ export class XplPanel {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Padding density applied to the content area.\nResponsive: scales down at tablet and mobile breakpoints.\n\n- `default` \u2013 24 px desktop / 16 px tablet+mobile\n- `tight`   \u2013 16 px desktop / 8 px tablet+mobile\n- `loose`   \u2013 40 px desktop / 32 px tablet / 24 px mobile"
+                    "text": "Padding density applied to the content area.\n(default and tight keep desktop padding through tablet; mobile \u2264480px).\n\n- `default` \u2013 24 px desktop & tablet / 16 px mobile\n- `tight`   \u2013 16 px desktop & tablet / 8 px mobile\n- `loose`   \u2013 40 px desktop / 32 px tablet / 24 px mobile"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -206,16 +206,16 @@ export class Popover {
         });
     }
     render() {
-        return (h(Host, { key: '5ed2eca6cac15c5009d0a5440f4a1f1e4dce8260' }, h("div", { key: 'f396004504407a1215e76187be06a27e56bd4a49', 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: '23ac1ebf38617b2a9bd91a1ccfe37d212191f76c', 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: 'ee427ff33db360b11719a886ad724a2bceb64eed', name: "trigger" })), this.display === 'arrow' && (h("div", { key: '27fb57c24abdf3eecb6aae0a96f9b6256ee593a3', class: "xpl-popover__arrow" }, h("svg", { key: '3456fa0239edafe272047446d3aed0ebd4490275', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e5de57c7cbf5301548af4eb5f79d14acc459d0a8', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '784f569c0baf0f6fdfad6bda1a36e6ee43293dce', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: '6ca95b76529ddfa681d4b11a30dceaaa4a3a10c4', 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: '75c6768b7e10ac698d54bdc30d052a6c0e98bd75' })))));
+            }, 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: 'e07eee1ea1614d68190290be2ad16df663337215', 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: 'e46025a05d42e0c275444f1057c8ee9827ce4d15', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: 'afc59b2fb32d9ac60afda9a40544121da045b237', class: "xpl-progress-bar__header" }, this.label && h("div", { key: '39d7add736c856c43bdecb61d083cf537e4da454', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: '4e54b04a314136cdae066f7b48a8449b20a8daff', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: '6950cefcd5e90be2362201ae830bae73293b275a', 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: 'e56af1b27ff6201a1eaa5cca7160c963a0fca529', 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/progress-indicator.stories.js

@@ -0,0 +1,118 @@
+export default {
+    title: 'Components/Progress Indicator',
+    component: 'xpl-progress-indicator',
+    argTypes: {
+        steps: { control: { type: 'object' } },
+        currentStep: { control: { type: 'number' } },
+        layout: { control: { type: 'select' }, options: ['horizontal', 'vertical'] },
+        showNumbers: { control: { type: 'boolean' } },
+        showLabels: { control: { type: 'boolean' } },
+    },
+    tags: ['beta'],
+};
+const defaultSteps = ['Details', 'Location', 'Instructor', 'Customers'];
+export const ProgressIndicator = ({ steps = defaultSteps, currentStep = 1, layout = 'horizontal', showNumbers = true, showLabels = true, }) => {
+    const id = 'progress-indicator-stepper';
+    const stepsJson = JSON.stringify(steps);
+    let attrs = '';
+    attrs += ` current-step="${currentStep}"`;
+    if (layout !== 'horizontal')
+        attrs += ` layout="${layout}"`;
+    if (!showNumbers)
+        attrs += ` show-numbers="false"`;
+    if (!showLabels)
+        attrs += ` show-labels="false"`;
+    return `
+        <div class="h-96" style="padding: var(--xpl-space-24); width: 100%; height: 300px">
+            <xpl-progress-indicator id="${id}"${attrs}></xpl-progress-indicator>
+
+            <div style="margin-top: var(--xpl-space-32); display: flex; gap: var(--xpl-space-10);">
+                <xpl-button id="${id}-prev" variant="secondary">Previous</xpl-button>
+                <xpl-button id="${id}-next">Next</xpl-button>
+            </div>
+
+            <script>
+                (function() {
+                    const progress = document.getElementById('${id}');
+                    progress.steps = ${stepsJson};
+
+                    const prevBtn = document.getElementById('${id}-prev');
+                    const nextBtn = document.getElementById('${id}-next');
+                    const totalSteps = ${steps.length};
+
+                    let currentStep = ${currentStep};
+
+                    const updateButtons = () => {
+                        prevBtn.disabled = currentStep === 0;
+                        nextBtn.disabled = currentStep === totalSteps;
+                    };
+
+                    updateButtons();
+
+                    prevBtn.onclick = () => {
+                        if (currentStep > 0) {
+                            currentStep--;
+                            progress.currentStep = currentStep;
+                            updateButtons();
+                        }
+                    };
+
+                    nextBtn.onclick = () => {
+                        if (currentStep < totalSteps) {
+                            currentStep++;
+                            progress.currentStep = currentStep;
+                            updateButtons();
+                        }
+                    };
+                })();
+            </script>
+        </div>
+    `;
+};
+ProgressIndicator.args = {
+    steps: defaultSteps,
+    currentStep: 1,
+    layout: 'horizontal',
+    showNumbers: true,
+    showLabels: true,
+};
+ProgressIndicator.parameters = {
+    'web-component': {
+        render: ProgressIndicator(ProgressIndicator.args),
+    },
+    html: {
+        render: `
+        <div style="padding: var(--xpl-space-24);">
+            <div class="xpl-progress-indicator xpl-progress-indicator-horizontal">
+                <div class="xpl-progress-indicator-container">
+                    ${defaultSteps
+            .map((step, index) => `
+                        <div class="xpl-progress-indicator-step ${index === 1
+            ? 'xpl-progress-indicator-step-active'
+            : index < 1
+                ? 'xpl-progress-indicator-step-finished'
+                : ''}">
+                            <div class="xpl-progress-indicator-step-content">
+                                <div class="xpl-progress-indicator-step-circle">${index < 1
+            ? '<xpl-icon icon="check-2" size="20" class="xpl-progress-indicator-step-checkmark"></xpl-icon>'
+            : `<span class="xpl-progress-indicator-step-number">${index + 1}</span>`}</div>
+                                <div class="xpl-progress-indicator-step-text">${step}</div>
+                            </div>
+                        </div>
+                    `)
+            .join('')}
+                </div>
+            </div>
+
+            <div style="margin-top: var(--xpl-space-32); display: flex; gap: var(--xpl-space-10);">
+                <button class="xpl-button xpl-button--secondary">Previous</button>
+                <button class="xpl-button">Next</button>
+            </div>
+        </div>
+        `,
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12762-3404',
+    },
+};

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

@@ -0,0 +1,171 @@
+import { Host, h } from "@stencil/core";
+export class ProgressIndicator {
+    constructor() {
+        this.currentStep = 0;
+        this.layout = 'horizontal';
+        this.showLabels = true;
+        this.showNumbers = true;
+    }
+    validateCurrentStep() {
+        if (!this.steps || this.steps.length === 0)
+            return;
+        const max = this.steps.length;
+        if (this.currentStep < 0) {
+            this.currentStep = 0;
+        }
+        else if (this.currentStep > max) {
+            this.currentStep = max;
+        }
+    }
+    renderStepContent(index, isFinished) {
+        if (isFinished) {
+            return (h("xpl-icon", { icon: "check-2", size: 20, class: "xpl-progress-indicator-step-checkmark" }));
+        }
+        if (!this.showNumbers) {
+            return h("span", { class: "xpl-progress-indicator-step-dot" });
+        }
+        return h("span", { class: "xpl-progress-indicator-step-number" }, index + 1);
+    }
+    renderStep(step, index) {
+        const isFinished = this.currentStep > index;
+        const isActive = this.currentStep === index;
+        const isHorizontal = this.layout === 'horizontal';
+        const circle = (h("div", { class: "xpl-progress-indicator-step-circle" }, this.renderStepContent(index, isFinished)));
+        const label = this.showLabels && h("div", { class: "xpl-progress-indicator-step-text" }, step);
+        const content = isHorizontal ? (h("div", { class: "xpl-progress-indicator-step-content" }, circle, label)) : ([circle, label]);
+        return (h("div", { class: {
+                'xpl-progress-indicator-step': true,
+                'xpl-progress-indicator-step-active': isActive,
+                'xpl-progress-indicator-step-finished': isFinished,
+            }, role: "listitem", "aria-label": `${step}, ${isFinished ? 'completed' : isActive ? 'current' : 'upcoming'}`, "aria-current": isActive ? 'step' : undefined }, content));
+    }
+    render() {
+        const steps = this.steps || [];
+        const hostClasses = {
+            'xpl-progress-indicator': true,
+            'xpl-progress-indicator-horizontal': this.layout === 'horizontal',
+            'xpl-progress-indicator-vertical': this.layout === 'vertical',
+            'xpl-progress-indicator-no-labels': !this.showLabels,
+        };
+        const totalSteps = steps.length;
+        const allComplete = this.currentStep >= totalSteps;
+        const currentStepNumber = Math.min(this.currentStep + 1, totalSteps);
+        const ariaLabel = totalSteps > 0
+            ? allComplete
+                ? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
+                : `Progress: step ${currentStepNumber} of ${totalSteps}`
+            : 'Progress';
+        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() {
+        return {
+            "currentStep": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current step index. Steps with index < currentStep are \"finished\",\nthe step at currentStep is \"active\", and steps beyond are \"waiting\".\nSet to steps.length to mark all steps as finished.\nAutomatically clamped to [0, steps.length]."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "0"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction - 'horizontal' or 'vertical'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'horizontal'"
+            },
+            "showLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show step labels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-labels",
+                "defaultValue": "true"
+            },
+            "showNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show step numbers inside circles"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-numbers",
+                "defaultValue": "true"
+            },
+            "steps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The steps is an array of the steps name."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "steps",
+                "methodName": "validateCurrentStep"
+            }, {
+                "propName": "currentStep",
+                "methodName": "validateCurrentStep"
+            }];
+    }
+}

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

@@ -14,14 +14,14 @@ export class Radio {
         };
     }
     render() {
-        return (h(Host, { key: 'c5b11522a1b9b21adf40318ff7f74f2ff76aa3c2', class: {
+        return (h(Host, { key: '959940093b1988f6e362c17e463fe2139cd828c5', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: '950a769704369e2084834876242cb44d1609a166', 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: '09f34b6e4a60d2c63e94734599b46f2ce1fc9a90', 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: '2552eb83722cdf2e4b9d1a691fe2712d16e0fb84' }), this.description && (h("small", { key: '3bc230b6c18922aee661033b1ea5a1bc72384aac', 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: '3b015722c6fb8cf3cafb0c85054fab81a8362209', class: "xpl-secondary-nav" }, h("nav", { key: 'ffc4e57cc2ebdf792196477ff01d6b1f03da567f', "aria-label": "Secondary Nav" }, h("slot", { key: 'b15b8bcadf7faa41f155e11dcd9f2e11231efbc4' }))));
+        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: '5c6008a31abe121ac946c9c5fc23721d28df86eb', 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: 'f2de31e5b84fe2fdffa1e2b35ec611a4842a8323', 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: '8a2192b28d75c56261f7a104ad02c76d49fb8787', class: "xpl-input-wrapper" }, h("button", { key: 'bb881153cd7cdbf4e43c40a96dfba8d95ca94aa6', 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: '1518f2ef57c7eeaa0fedc1832222a0345c4c46ab', 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: 'f37a879df93e5078a4b1a4950291a3bf65d81f43', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: '920d7d4e1916613b0056e6da80e055e7cf94fba6', 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: '0137e17e78152e2ebc600156896df9a4c691f18a', 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: '10e32dc7b6e7e942ab11153a7311ee2401370a08', 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: '32d07c601edd88297854bf88749411276e8cb51b', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: 'bbaac77c9c89e7b494cf7693185f0c358f6a7136', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: '811067dca2ee2a73d896d1b45b899b9a8b27e7d6' }))))));
+            } }, 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: '4c498e4a5ab9c93d2ba984fd973af77c871cb916', class: {
+        return (h(Host, { key: 'd01e8e27671eabc92613a803818b4351334011ac', class: {
                 'xpl-side-nav': true,
-            } }, h("div", { key: 'ef7455c11a5dd27c7a8317f4b441fc3d29eea341', class: "xpl-side-nav__wrapper" }, h("nav", { key: '11752dfaacd360fd1c6e20f253967236f1032d68', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '1a94c00b7cc8297707a11aca19a816769e98dbfc', class: "xpl-side-nav__section" }, h("slot", { key: 'a3aaa6c108806c68bcb8af692ad6fd0edcae7870', name: "section" })), h("div", { key: 'b6454f9ba4f795666b33c7eea70f3514cdf168b3', class: "xpl-side-nav__footer" }, h("slot", { key: 'f00b452ff6c732d95fa58962800d2d1f606c4c17', 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() {