@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplNavItem {
+export class NavItem {
     constructor() {
         this.navControl = false;
     }
@@ -9,11 +9,11 @@ export class XplNavItem {
         }
     }
     render() {
-        return (h(Host, { key: '8a047443ba48a7812f3804e5639cdd8408f9a647', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (h(Host, { key: '5e0a171c719802e96d48f7d635c189563387fade', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, h("slot", { key: '41012bd7a72ed7929deddb136ac5f2c6b30a4c1f', name: "link" }, h("slot", { key: 'ce1bb0b1957b5e614fa1ec65cc8973d42bd1dc32', name: "icon" }), h("slot", { key: 'd50d2dd931be394e039f1e07651e05e41231627e' }))));
+            } }, h("slot", { key: 'aff0155598a1b64d50168552ff251b824d00a86f', name: "link" }, h("slot", { key: '28da4593d2302b2867b0792562dc5b7b3ddd6983', name: "icon" }), h("slot", { key: '93e12751d2320608ee7a10d73eef67a1c1bb5443' }))));
     }
     static get is() { return "xpl-nav-item"; }
     static get properties() {

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

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

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export class XplPagination {
+export class Pagination {
     constructor() {
         this.totalPages = 1;
         this.withPageControl = false;
@@ -59,19 +59,19 @@ export class XplPagination {
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (h(Host, { key: '15d277d40eff79d5fb48867b89370759eb9ca8c7', class: `xpl-pagination xpl-pagination__${this.withPageControl ? 'with' : 'no'}-page-control` }, this.withPageControl && (h("div", { key: '482bbca4e67c513f715573343f4f2d0f0a7281ee', class: "xpl-pagination__rows-per-page" }, h("label", { key: '5a6b3a0f06e6b37b3e6f17021417bac5ce866a69', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '295db6e36fcf861ffd4f25550322552c6641084c', 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: '87c7b3e4bf11be1668512f325139899496f2dd7a', class: "xpl-pagination__pager" }, h("button", { key: 'c020001ed61d227b9febd71bb9e411b3eeead985', 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: '3484457471eb692e3dc140b47f6d8bfd72899fe3', icon: "arrow-left", size: 20 })), h("xpl-select", { key: 'f0897900308b3015db171f6b60382dd537f9dd71', 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: '4c2184875c70ceac615c6efd05ef32f65d777152', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '91c856b44bf3b752280b36f69a53d4c2ed97da19', 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: '538a33cbddd6d4e26b782e0a3178018b61f0dec4', 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

@@ -0,0 +1,53 @@
+export default {
+    title: 'Components/Panel',
+    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',
+            },
+        },
+    },
+};
+export const Panel = ({ accent, padding }) => `
+    <xpl-panel accent="${accent}" padding="${padding}" style="max-width: 800px">
+        <p style="margin: 0" class="xpl-text-body">Panel content goes here. Compose other Apollo components within this slot.</p>
+    </xpl-panel>
+`;
+Panel.args = {
+    accent: 'none',
+    padding: 'default',
+};
+Panel.parameters = {
+    layout: 'padded',
+    'web-component': {
+        render: Panel(Panel.args),
+    },
+    html: {
+        render: (({ accent, padding }) => {
+            const accentClass = accent !== 'none' ? ` xpl-panel--accent-${accent}` : '';
+            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 class="xpl-text-body" style="margin: 0">Panel content goes here. Compose other Apollo components within this slot.</p>
+                    </div>
+                </div>
+            `;
+        })(Panel.args),
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1546-136120&p=f&t=SMeY3LnfDOiNmx1p-11',
+    },
+};

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

@@ -0,0 +1,60 @@
+import { Host, h } from "@stencil/core";
+export class XplPanel {
+    constructor() {
+        this.accent = 'none';
+        this.padding = 'default';
+    }
+    render() {
+        const hasAccent = this.accent !== 'none';
+        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: '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() {
+        return {
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'primary' | 'secondary' | 'positive' | 'negative' | 'highlight'",
+                    "resolved": "\"highlight\" | \"negative\" | \"none\" | \"positive\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color accent bar displayed at the top of the panel.\n\n- `none` \u2013 no accent (default)\n- `primary` \u2013 brand primary color\n- `secondary` \u2013 brand secondary color\n- `positive` \u2013 positive / success color\n- `negative` \u2013 negative / error color\n- `highlight` \u2013 highlight / warning color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accent",
+                "defaultValue": "'none'"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'tight' | 'loose'",
+                    "resolved": "\"default\" | \"loose\" | \"tight\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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

@@ -160,5 +160,9 @@ export const LargerContent = ({ isOpen = true, position }) => {
                 </div>
                 `)(comp.args),
         },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15240-61430&p=f&t=01tbTrRZyfvVafsA-11',
+        },
     };
 });

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

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import throttle from "lodash.throttle";
-export class XplPopover {
+export class Popover {
     constructor() {
         this.isOpen = false;
         this.disabled = false;
@@ -206,16 +206,16 @@ export class XplPopover {
         });
     }
     render() {
-        return (h(Host, { key: 'cf6c4f6b028bfdb9d08f6c8ad2b433c38c1a6f9f' }, h("div", { key: '778f9a2f3a5626b19f5446c56d89f9bb6b31ca36', 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: '762401eb1e8d30644dfb55e10f4f5f56abff648f', 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: 'c29166383d024f24d6883ff0d4ea85380f849712', name: "trigger" })), this.display === 'arrow' && (h("div", { key: 'ef7eb85bc764ab403fc4b069a50606da16e3fcdc', class: "xpl-popover__arrow" }, h("svg", { key: '32bc234f1dbc9b07b3b3e2b69e5be222bab02a26', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd34ec2d2b3e67459981f29ce21810f1fb6b7ba45', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: 'f251a3f748c9d4eb5d84d6416dd0121b3365000b', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: '02632fb4c284db5eabce50f4c27079ba37e10204', 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: '770df2750d5d4875d38eb52bb26788095ce7292d' })))));
+            }, 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/progress-bar.stories.js

@@ -0,0 +1,96 @@
+export default {
+    title: 'Components/Progress Bar',
+    argTypes: {
+        label: {
+            type: { name: 'string', required: false },
+            description: 'The label text displayed above the progress bar',
+        },
+        helperText: {
+            type: { name: 'string', required: false },
+            description: 'The helper text displayed below the progress bar (recommended for error state)',
+        },
+        max: {
+            control: { type: 'number' },
+            description: 'The maximum value of the progress (mirrors native <progress> max attribute)',
+        },
+        value: {
+            control: { type: 'range', min: 0, max: 100, step: 1 },
+            description: 'The current value of the progress (mirrors native <progress> value attribute). Not used for indeterminate variant.',
+        },
+        size: {
+            options: ['sm', 'lg'],
+            control: { type: 'select' },
+            description: 'The size of the progress bar height: sm = 4px, lg = 6px',
+        },
+        variant: {
+            options: ['default', 'success', 'error', 'indeterminate'],
+            control: { type: 'select' },
+            description: 'The visual variant of the progress bar',
+        },
+    },
+};
+export const ProgressBar = (args) => {
+    let attrs = '';
+    if (args.label)
+        attrs += ` label="${args.label}"`;
+    if (args.helperText)
+        attrs += ` helper-text="${args.helperText}"`;
+    if (args.max !== 100)
+        attrs += ` max="${args.max}"`;
+    if (args.value !== undefined && args.variant !== 'indeterminate')
+        attrs += ` value="${args.value}"`;
+    if (args.size !== 'lg')
+        attrs += ` size="${args.size}"`;
+    if (args.variant !== 'default')
+        attrs += ` variant="${args.variant}"`;
+    return `
+        <div style="display: flex; flex-direction: column; gap: var(--xpl-space-48); width: 50vw;">
+            <xpl-progress-bar${attrs}></xpl-progress-bar>
+        </div>
+    `;
+};
+ProgressBar.args = {
+    label: 'Uploading file...',
+    helperText: '2.4 MB of 5 MB',
+    max: 100,
+    value: 45,
+    size: 'lg',
+    variant: 'default',
+};
+ProgressBar.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: ProgressBar(ProgressBar.args),
+    },
+    html: {
+        render: (({ label, helperText, max, value, size, variant }) => {
+            const labelHtml = label
+                ? `<div class="xpl-progress-bar__header"><div class="xpl-progress-bar__label">${label}</div></div>`
+                : '';
+            const helperHtml = helperText
+                ? `<div class="xpl-progress-bar__helper">${helperText}</div>`
+                : '';
+            const maxValue = max !== null && max !== void 0 ? max : 100;
+            const currentValue = variant !== 'indeterminate' && value !== undefined ? value : maxValue;
+            const className = `xpl-progress-bar xpl-progress-bar--${size} xpl-progress-bar--${variant}`;
+            const progressHtml = variant === 'indeterminate'
+                ? `<div class="xpl-progress-bar__track xpl-progress-bar__track--indeterminate" role="progressbar" aria-label="${label || 'Progress'}"><div class="xpl-progress-bar__indeterminate"></div></div>`
+                : `<progress class="xpl-progress-bar__progress" value="${currentValue}" max="${maxValue}" aria-label="${label || 'Progress'}"></progress>`;
+            return `
+                <div class="${className}">
+                    <div class="xpl-progress-bar__wrapper">
+                        ${labelHtml}
+                        <div class="xpl-progress-bar__row">
+                            ${progressHtml}
+                        </div>
+                        ${helperHtml}
+                    </div>
+                </div>
+            `;
+        })(ProgressBar.args),
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12841-9237',
+    },
+};

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

@@ -0,0 +1,158 @@
+import { Host, h } from "@stencil/core";
+export class ProgressBar {
+    constructor() {
+        this.max = 100;
+        this.size = 'lg';
+        this.value = 0;
+        this.variant = 'default';
+    }
+    get clampedValue() {
+        return Math.max(0, Math.min(this.max, this.value));
+    }
+    get isComplete() {
+        return this.value >= this.max && this.variant === 'default';
+    }
+    get isError() {
+        return this.variant === 'error';
+    }
+    get isSuccess() {
+        return this.variant === 'success' || this.isComplete;
+    }
+    get showStatusIcon() {
+        return this.isSuccess || this.isError;
+    }
+    get isIndeterminate() {
+        return this.variant === 'indeterminate';
+    }
+    render() {
+        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: '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() {
+        return {
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper text displayed below the progress bar (recommended for error state)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text displayed above the progress bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum value of the progress (mirrors native <progress> max attribute)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'lg'",
+                    "resolved": "\"lg\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the progress bar height: sm = 4px, lg = 6px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value of the progress (mirrors native <progress> value attribute)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'success' | 'error' | 'indeterminate'",
+                    "resolved": "\"default\" | \"error\" | \"indeterminate\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual variant of the progress bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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',
+    },
+};