@xplortech/apollo-core 2.6.0 → 2.7.0

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

@@ -59,19 +59,19 @@ 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: '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) => ({
                 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: '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) => ({
                 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: '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 })))));
     }
     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: 'a9618f21b7aba5804881ec509d47909b87ad9aa5', 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: '5b92aa4395658996de2736941d6c0d0262903013', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: '5b22eb3d1911ce2d68876c0bc0bc61f947c830f9', class: "xpl-panel__content" }, h("slot", { key: 'b2f331aa8ea4328b0e50736d97361a7bfcde60ed' }))));
     }
     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: '67ecd18580166f1582c29e33f1485bf67590b9f5' }, h("div", { key: 'bba42a3474432557bfc71705c2d5206493fed64b', 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: '7960b727b609da6b0e949e4889e217b0f3efb6c9', 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: '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: {
                 '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: '4bd22aa19dedb6fb77355caafcd009413c8ad7d9' })))));
     }
     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: '4161cfe080a629f1c69c14a0e0a553df950d57a8', 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: '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)))));
     }
     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: '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)))));
+    }
+    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: 'a96ab55137fedbfe00d68b660bd2d935208dc6c6', 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: '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: {
                 '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: 'b9fe3e13de64776a9cc1afcd8f7c10f84be8c8bb' }), this.description && (h("small", { key: '6ecd217342fbfa9bb5022bb1298683ff87af1713', 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: 'bf9cbd4351297a28d6d98d3bf1e0612fac1f5136', class: "xpl-secondary-nav" }, h("nav", { key: '764de50287c88f53f19005d50b177e85f71f7f43', "aria-label": "Secondary Nav" }, h("slot", { key: 'd7fe629382a06f62dde9f08db082854e986ba406' }))));
     }
     static get is() { return "xpl-secondary-nav"; }
 }

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

@@ -222,21 +222,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: 'c02b59988eee5073103958a24061c46aa286ea50', 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: '189c9d2e3370876b6289ee16ee1b8927e5bfc0ee', 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: 'a8df7de958be97becd2a9f6a2db761702e2066c3', class: "xpl-input-wrapper" }, h("button", { key: 'f00119d930d49b241d5160bfe7a70ee56ac598d8', 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: '141643ae007e8f5827d4aeb8fdd2a95b14b003ff', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -256,7 +256,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: '05f6ba660e21584017715d3afc14d7bd8b8d536a', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: '9a452cf4c62cca5ba4279ddd8da09c9d24797dcf', 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 +265,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 })), this.renderError()), h("input", { key: 'd9d6cbc69fc5fc688b2dda6ea1ef99435d90fc94', type: "hidden", name: this.name, value: this.value })));
     }
     static get is() { return "xpl-select"; }
     static get properties() {

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: '10318a2c26c650f5c5e2143c2fe1bde6a372f933', 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: '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' }))))));
     }
     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: 'bfa4c94a1718583020da6a8b1e9104788ce78ef1', 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: '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" }))))));
     }
     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: '86862cc926d5e915e303d274f0e837f364be6c08', class: {
+        return (h(Host, { key: '4c0962c3339b49f2f89d07e4827e826089419c70', 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: 'b2628014184ba329999545fe940adcb175b89dfd', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '3f243b5af61aee13d375874ddb6a974608405e05', onClick: this.handleClose })), h("aside", { key: '781804a784efad6f6e9d9d0ee09dd46b99800707', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '35bf26acb7f45fc60d9447093d00c263c5c6a074', class: "header" }, h("div", { key: '939262fd0caf93059c022bc827cf1ebf31cf0505', class: "title" }, h("slot", { key: 'd0434f317394c1e6aca52de73cb1645605b70a2c', name: "title" }), h("xpl-button", { key: '091d2454db101c318a6c5b42a5650d698e318a46', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '161a7bd05ce6864cd3b72a9a523c0f6e39d95cfb', icon: "x" }))), h("div", { key: '554153d17ba38df8b86534f4b59cb74c31553c0e', class: "subtitle" }, h("slot", { key: '649d87c4dea7e87c8c860d81b337c5c284d4aab1', name: "subtitle" })), h("div", { key: '2fe24ec6b15e48da8b61f0601342e52f83dd52d7', class: "search" }, h("slot", { key: '2ca9723ce317d1981485dcc923fff44c885eb814', name: "search" }))), h("xpl-divider", { key: 'c11b01177de43cafc6cf6f59c8807027dd202cfb', tier: 0, class: "divider top" }), h("article", { key: '12030211ebdfcc232e02e383d6ce9d64349882bc', class: "content", tabIndex: 0 }, h("slot", { key: 'b6af6c47722c8a1820ff94c052788b95736622b7', name: "content" })), this.showFooter && (h("footer", { key: '151c779df75a16947353701df695967686e9e07b' }, h("xpl-divider", { key: '773e0ce1051ac5a2f67864c5b4a6bd8120b3c270', tier: 0, class: "divider bottom" }), h("div", { key: 'e2ed12c38474a0102fdc24063bae95e4e36c43f7', class: "footer" }, h("slot", { key: '06f346214acfd3351adb9fca113466b1f95e5b9c', name: "tertiary" }), h("slot", { key: '1afb8a2250cd62a752a9bd60decade017a7ae58e', name: "secondary" }), h("slot", { key: '18f8b40b550b38eb44c765dd3cdbca44000032b8', name: "primary" })))))));
+        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" })))))));
     }
     static get is() { return "xpl-slideout"; }
     static get properties() {