@brandsync/wc 1.10.0 → 1.12.0

package/dist/collection/components/bs-onboarding-checklist/bs-onboarding-checklist.js

@@ -0,0 +1,674 @@
+import { h } from "@stencil/core";
+/**
+ * A "get set up" checklist, in four forms that matching the Figma "Onboarding checklist" component:
+ *
+ * - `panel` -- the full list: heading, progress, every step with a status icon, and the current step
+ *   expanded with its description, time estimate, Skip for now and a primary action.
+ * - `dashboard` -- a wide card for the top of a page: summary and progress on the left, the current step
+ *   and the next ones as small cards on the right, and a "See all steps" link.
+ * - `launcher` -- a small always-visible chip that reopens the checklist; three layouts (`icon`, `ring`,
+ *   `inline`).
+ * - `completion` -- the "You're all set" card once every step is done.
+ *
+ * The component shows progress and reports what the user pressed. It doesn't know what a step means,
+ * run it, or remember anything: your app owns the steps (`steps`, each with `done`), marks them done, and
+ * decides which form to show.
+ *
+ * **Built from:** `bs-card` (every surface), `bs-icon-tile` (the icons), `bs-button` (the actions),
+ * `bs-icon-button` (the close button), `bs-progress-linear` (the progress bar), `bs-progress` (the launcher
+ * ring).
+ *
+ * ## When to use
+ * - Guiding a new account or user through a short list of setup tasks they can do in any order or later.
+ *
+ * ## When not to use
+ * - A strict, linear flow where each step needs the one before -- use `bs-stepper`.
+ * - A tour of the interface itself -- use `bs-product-tour`.
+ *
+ * ## Accessibility
+ * Steps are an ordered list; the current one has `aria-current="step"`, and each step carries a visually
+ * hidden "Done" / "Not done". The progress bar is named with the progress text.
+ *
+ * @slot icon - Replaces the icon in the heading tile (`panel`, `dashboard`, `launcher`).
+ * @slot icon-<step id> - Replaces the icon of that step in the `dashboard` cards, e.g. `slot="icon-bank"`.
+ * @part container - The card (or the launcher button's card).
+ * @part art - The heading icon tile.
+ * @part heading - The heading.
+ * @part description - The paragraph under it.
+ * @part progress - The progress block (label, percentage, bar).
+ * @part steps - The list of steps (`panel`).
+ * @part step - Each step row (`panel`) or card (`dashboard`).
+ * @part current - The current step, in addition to `step`.
+ * @part action - The current step's primary button (`panel`) or Start link (`dashboard`).
+ * @part skip - The current step's Skip for now button (`panel`).
+ * @part close - The close button.
+ * @part see-all - The "See all steps" link (`dashboard`).
+ * @part launcher - The launcher button (`launcher`).
+ * @part primary - The main button (`completion`).
+ * @part secondary - The Hide checklist button (`completion`).
+ */
+export class BsOnboardingChecklist {
+    /** Which form: `panel`, `dashboard`, `launcher` or `completion`. */
+    type = 'panel';
+    /** Layout of the `launcher`: `icon` (tile, title, progress text), `ring` (circular progress, title,
+     * text) or `inline` (tile, title and text on one line, with a chevron). */
+    launcherLayout = 'icon';
+    /** The steps: `[{ id, label, description?, done?, estimate?, actionLabel?, skippable? }]`. The first step
+     * that isn't `done` is the current one. Must be set as a JS property, not an HTML attribute -- see
+     * CONVENTIONS.md's non-string props rule. */
+    steps = [];
+    /** Heading. Defaults per `type` ("Get started", "Finish setting up", "Setup", "You're all set"). */
+    heading;
+    /** Paragraph under the heading. Defaults to a summary of the progress for `dashboard`. Nothing for
+     * `launcher`. */
+    description;
+    /** HTML heading level, 1-6. */
+    headingLevel = 2;
+    /** Text under the launcher title. Defaults to "N% complete". */
+    progressText;
+    /** Shows a close button (`panel`, `dashboard`). */
+    closable = false;
+    /** Template of the progress label; `{done}` and `{total}` are replaced. */
+    progressLabel = '{done} of {total} done';
+    /** Label of "Skip for now" on the current step (`panel`). */
+    skipLabel = 'Skip for now';
+    /** Label of the Start link on the current step's card (`dashboard`). */
+    startLabel = 'Start';
+    /** Label of the link that opens the whole checklist (`dashboard`). */
+    seeAllLabel = 'See all steps';
+    /** Caption on the cards of steps that come after the current one (`dashboard`). */
+    afterLabel = 'After the step before';
+    /** Label of the main button (`completion`). */
+    doneLabel = 'Go to dashboard';
+    /** Label of the secondary button (`completion`). */
+    hideLabel = 'Hide checklist';
+    /** Accessible name of the close button. */
+    closeLabel = 'Close';
+    /** Visually hidden text on a finished step. */
+    statusDoneLabel = 'Done';
+    /** Visually hidden text on an unfinished step. */
+    statusTodoLabel = 'Not done';
+    /** Fires when a step's primary action is pressed (`panel` button, `dashboard` Start): `{ id }`. */
+    bsStepAction;
+    /** Fires when "Skip for now" is pressed on the current step (`panel`): `{ id }`. */
+    bsStepSkip;
+    /** Fires when the close button is pressed. */
+    bsClose;
+    /** Fires when the user asks to open the full checklist: "See all steps" (`dashboard`) or the launcher. */
+    bsOpen;
+    /** Fires when the main button is pressed (`completion`). */
+    bsDone;
+    /** Fires when Hide checklist is pressed (`completion`). */
+    bsHide;
+    // --- derived state -----------------------------------------------------------------------
+    get list() {
+        return this.steps ?? [];
+    }
+    get doneCount() {
+        return this.list.filter(s => s.done).length;
+    }
+    get percent() {
+        return this.list.length ? Math.round((this.doneCount / this.list.length) * 100) : 0;
+    }
+    get currentId() {
+        return this.list.find(s => !s.done)?.id;
+    }
+    fill(template) {
+        return template.replace('{done}', String(this.doneCount)).replace('{total}', String(this.list.length));
+    }
+    // --- pieces ------------------------------------------------------------------------------
+    renderHeading(text, cls = '') {
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 2));
+        return h(`h${level}`, { part: 'heading', id: 'heading', class: { 'bs-oc__heading': true, [cls]: !!cls } }, text);
+    }
+    renderClose() {
+        if (!this.closable)
+            return null;
+        return (h("bs-icon-button", { part: "close", class: "bs-oc__close", variant: "subtle", size: "md", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { d: "M6 6L18 18M18 6L6 18" }))));
+    }
+    renderProgress(color = 'primary') {
+        const text = this.fill(this.progressLabel);
+        return (h("div", { part: "progress", class: "bs-oc__progress" }, h("div", { class: "bs-oc__progress-labels" }, h("span", { class: "bs-oc__progress-text" }, text), h("span", { class: "bs-oc__progress-percent" }, this.percent, " %")), h("bs-progress-linear", { class: `bs-oc__bar bs-oc__bar--${color}`, type: "determinate", size: "large", value: this.percent, showLabel: false, ariaLabel: `${text}, ${this.percent} %` })));
+    }
+    renderStatus(done, current) {
+        return (h("span", { class: { 'bs-oc__status': true, 'bs-oc__status--done': done, 'bs-oc__status--current': current }, "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "9" }), done && h("path", { d: "M8 12.5L10.8 15.3L16 9.5" }))));
+    }
+    renderStepRow(s) {
+        const done = !!s.done;
+        return (h("li", { part: "step", class: { 'bs-oc__step': true, 'bs-oc__step--done': done } }, this.renderStatus(done, false), h("span", { class: "bs-oc__step-label" }, s.label), h("span", { class: "bs-oc__sr-only" }, done ? this.statusDoneLabel : this.statusTodoLabel)));
+    }
+    renderCurrentStep(s) {
+        return (h("li", { part: "step current", class: "bs-oc__current", "aria-current": "step" }, h("bs-card", { surface: "container", class: "bs-oc__current-card" }, h("div", { class: "bs-oc__current-body" }, h("div", { class: "bs-oc__current-head" }, this.renderStatus(false, true), h("span", { class: "bs-oc__current-label" }, s.label), h("span", { class: "bs-oc__sr-only" }, this.statusTodoLabel)), s.description && h("p", { class: "bs-oc__current-text" }, s.description), h("div", { class: "bs-oc__current-foot" }, s.estimate ? (h("span", { class: "bs-oc__estimate" }, h(ClockIcon, null), s.estimate)) : (h("span", null)), h("div", { class: "bs-oc__current-actions" }, s.skippable !== false && (h("bs-button", { part: "skip", class: "bs-oc__text-button", variant: "subtle", size: "sm", onClick: () => this.bsStepSkip.emit({ id: s.id }) }, this.skipLabel)), s.actionLabel && (h("bs-button", { part: "action", variant: "primary", size: "sm", onClick: () => this.bsStepAction.emit({ id: s.id }) }, s.actionLabel))))))));
+    }
+    renderPanel(d) {
+        const current = this.currentId;
+        return (h("bs-card", { part: "container", class: "bs-oc bs-oc--panel", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-oc__panel" }, h("div", { class: "bs-oc__head" }, this.renderHeading(this.heading ?? d.heading), h("span", { class: "bs-oc__spacer" }), this.renderClose()), (this.description ?? d.description) && h("p", { part: "description", class: "bs-oc__description" }, this.description ?? d.description), this.renderProgress(), h("ol", { part: "steps", class: "bs-oc__steps" }, this.list.map(s => (s.id === current ? this.renderCurrentStep(s) : this.renderStepRow(s)))))));
+    }
+    renderDashboard(d) {
+        const remaining = this.list.filter(s => !s.done).slice(0, 3);
+        const left = this.list.filter(s => !s.done).length;
+        const summary = this.description ?? (left > 0 ? `${this.fill(this.progressLabel)}.` : '');
+        return (h("bs-card", { part: "container", class: "bs-oc bs-oc--dashboard", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-oc__dash" }, this.renderClose(), h("div", { class: "bs-oc__dash-summary" }, h("bs-icon-tile", { part: "art", intent: "brand", size: "md" }, h("slot", { name: "icon" }, h(ChecklistIcon, null))), this.renderHeading(this.heading ?? d.heading), summary && h("p", { part: "description", class: "bs-oc__description" }, summary), h("bs-progress-linear", { class: "bs-oc__bar bs-oc__bar--primary", type: "determinate", size: "large", value: this.percent, showLabel: false, ariaLabel: `${this.fill(this.progressLabel)}, ${this.percent} %` }), h("bs-button", { part: "see-all", class: "bs-oc__text-button bs-oc__link", variant: "subtle", size: "sm", onClick: () => this.bsOpen.emit() }, this.seeAllLabel, h(ArrowIcon, { slot: "end-icon" }))), h("ol", { class: "bs-oc__cards" }, remaining.map((s, i) => {
+            const isCurrent = i === 0;
+            return (h("li", { part: isCurrent ? 'step current' : 'step', class: "bs-oc__card-item", "aria-current": isCurrent ? 'step' : undefined }, h("bs-card", { surface: "base", class: { 'bs-oc__step-card': true, 'bs-oc__step-card--current': isCurrent } }, h("div", { class: "bs-oc__step-card-body" }, h("bs-icon-tile", { part: "step-art", intent: isCurrent ? 'brand' : 'default', size: "md" }, h("slot", { name: `icon-${s.id}` }, h(ListIcon, null))), h("span", { class: "bs-oc__step-card-label" }, s.label), isCurrent ? (h("bs-button", { part: "action", class: "bs-oc__text-button bs-oc__link", variant: "subtle", size: "sm", onClick: () => this.bsStepAction.emit({ id: s.id }) }, this.startLabel, h(ArrowIcon, { slot: "end-icon" }))) : (h("span", { class: "bs-oc__step-card-caption" }, this.afterLabel))))));
+        })))));
+    }
+    renderLauncher(d) {
+        const title = this.heading ?? d.heading;
+        const text = this.progressText ?? `${this.percent}% complete`;
+        const layout = this.launcherLayout;
+        const copy = layout === 'inline' ? (h("span", { class: "bs-oc__launcher-copy bs-oc__launcher-copy--inline" }, h("span", { class: "bs-oc__launcher-title bs-oc__launcher-title--inline" }, title), h("span", { class: "bs-oc__launcher-text" }, text))) : (h("span", { class: "bs-oc__launcher-copy" }, h("span", { class: "bs-oc__launcher-title" }, title), h("span", { class: "bs-oc__launcher-text" }, text)));
+        return (h("bs-card", { part: "container", class: `bs-oc bs-oc--launcher bs-oc--launcher-${layout}`, surface: "base" }, h("button", { part: "launcher", type: "button", class: "bs-oc__launcher", onClick: () => this.bsOpen.emit() }, layout === 'ring' && h("bs-progress", { class: "bs-oc__ring", type: "determinate", size: "small", value: this.percent, showLabel: false, ariaLabel: text }), layout === 'icon' && (h("bs-icon-tile", { part: "art", intent: "brand", size: "md" }, h("slot", { name: "icon" }, h(BankIcon, null)))), layout === 'inline' && (h("bs-icon-tile", { part: "art", intent: this.percent >= 100 ? 'success' : 'brand', size: "md" }, h("slot", { name: "icon" }, h(CheckIcon, null)))), copy, layout === 'inline' && (h("span", { class: "bs-oc__chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M9 6L15 12L9 18" })))))));
+    }
+    renderCompletion(d) {
+        return (h("bs-card", { part: "container", class: "bs-oc bs-oc--completion", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-oc__completion" }, h("bs-icon-tile", { part: "art", intent: "success", size: "lg" }, h("slot", { name: "icon" }, h(CheckIcon, null))), this.renderHeading(this.heading ?? d.heading), (this.description ?? d.description) && h("p", { part: "description", class: "bs-oc__description bs-oc__description--center" }, this.description ?? d.description), this.renderProgress('success'), h("bs-button", { part: "primary", class: "bs-oc__block", variant: "primary", onClick: () => this.bsDone.emit() }, this.doneLabel), h("bs-button", { part: "secondary", class: "bs-oc__block bs-oc__text-button", variant: "subtle", size: "lg", onClick: () => this.bsHide.emit() }, this.hideLabel))));
+    }
+    render() {
+        const d = DEFAULTS[this.type] ?? DEFAULTS.panel;
+        switch (this.type) {
+            case 'dashboard':
+                return this.renderDashboard(d);
+            case 'launcher':
+                return this.renderLauncher(d);
+            case 'completion':
+                return this.renderCompletion(d);
+            default:
+                return this.renderPanel(d);
+        }
+    }
+    static get is() { return "bs-onboarding-checklist"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-onboarding-checklist.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-onboarding-checklist.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsOnboardingChecklistType",
+                    "resolved": "\"completion\" | \"dashboard\" | \"launcher\" | \"panel\"",
+                    "references": {
+                        "BsOnboardingChecklistType": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-onboarding-checklist/bs-onboarding-checklist.tsx",
+                            "id": "src/components/bs-onboarding-checklist/bs-onboarding-checklist.tsx::BsOnboardingChecklistType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which form: `panel`, `dashboard`, `launcher` or `completion`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'panel'"
+            },
+            "launcherLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsOnboardingLauncherLayout",
+                    "resolved": "\"icon\" | \"inline\" | \"ring\"",
+                    "references": {
+                        "BsOnboardingLauncherLayout": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-onboarding-checklist/bs-onboarding-checklist.tsx",
+                            "id": "src/components/bs-onboarding-checklist/bs-onboarding-checklist.tsx::BsOnboardingLauncherLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout of the `launcher`: `icon` (tile, title, progress text), `ring` (circular progress, title,\ntext) or `inline` (tile, title and text on one line, with a chevron)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "launcher-layout",
+                "defaultValue": "'icon'"
+            },
+            "steps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsOnboardingStep[]",
+                    "resolved": "BsOnboardingStep[]",
+                    "references": {
+                        "BsOnboardingStep": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-onboarding-checklist/bs-onboarding-checklist.tsx",
+                            "id": "src/components/bs-onboarding-checklist/bs-onboarding-checklist.tsx::BsOnboardingStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The steps: `[{ id, label, description?, done?, estimate?, actionLabel?, skippable? }]`. The first step\nthat isn't `done` is the current one. Must be set as a JS property, not an HTML attribute -- see\nCONVENTIONS.md's non-string props rule."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading. Defaults per `type` (\"Get started\", \"Finish setting up\", \"Setup\", \"You're all set\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Paragraph under the heading. Defaults to a summary of the progress for `dashboard`. Nothing for\n`launcher`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML heading level, 1-6."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "2"
+            },
+            "progressText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text under the launcher title. Defaults to \"N% complete\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-text"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a close button (`panel`, `dashboard`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "progressLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template of the progress label; `{done}` and `{total}` are replaced."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-label",
+                "defaultValue": "'{done} of {total} done'"
+            },
+            "skipLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of \"Skip for now\" on the current step (`panel`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skip-label",
+                "defaultValue": "'Skip for now'"
+            },
+            "startLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Start link on the current step's card (`dashboard`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-label",
+                "defaultValue": "'Start'"
+            },
+            "seeAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the link that opens the whole checklist (`dashboard`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "see-all-label",
+                "defaultValue": "'See all steps'"
+            },
+            "afterLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption on the cards of steps that come after the current one (`dashboard`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "after-label",
+                "defaultValue": "'After the step before'"
+            },
+            "doneLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the main button (`completion`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "done-label",
+                "defaultValue": "'Go to dashboard'"
+            },
+            "hideLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the secondary button (`completion`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label",
+                "defaultValue": "'Hide checklist'"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
+            "statusDoneLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hidden text on a finished step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-done-label",
+                "defaultValue": "'Done'"
+            },
+            "statusTodoLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hidden text on an unfinished step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-todo-label",
+                "defaultValue": "'Not done'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsStepAction",
+                "name": "bsStepAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a step's primary action is pressed (`panel` button, `dashboard` Start): `{ id }`."
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsStepSkip",
+                "name": "bsStepSkip",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when \"Skip for now\" is pressed on the current step (`panel`): `{ id }`."
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the close button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsOpen",
+                "name": "bsOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the user asks to open the full checklist: \"See all steps\" (`dashboard`) or the launcher."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsDone",
+                "name": "bsDone",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the main button is pressed (`completion`)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsHide",
+                "name": "bsHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Hide checklist is pressed (`completion`)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const DEFAULTS = {
+    panel: { heading: 'Get started', description: 'Set up your account in a few minutes. You can come back to this at any time.' },
+    dashboard: { heading: 'Finish setting up', description: '' },
+    launcher: { heading: 'Setup', description: '' },
+    completion: { heading: 'You’re all set', description: 'Everything is ready.' },
+};
+const icon = (children) => (props) => (h("svg", { class: "bs-oc__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", ...props }, children));
+const ChecklistIcon = icon(h("g", null, h("path", { d: "M4 7L6 9L9 5.5" }), h("path", { d: "M4 16L6 18L9 14.5" }), h("path", { d: "M12.5 7H20" }), h("path", { d: "M12.5 16H20" })));
+const ListIcon = icon(h("g", null, h("path", { d: "M8 6H20" }), h("path", { d: "M8 12H20" }), h("path", { d: "M8 18H20" }), h("path", { d: "M4 6V6.01" }), h("path", { d: "M4 12V12.01" }), h("path", { d: "M4 18V18.01" })));
+const BankIcon = icon(h("g", null, h("path", { d: "M3.5 9.5L12 4L20.5 9.5" }), h("path", { d: "M5 10V17" }), h("path", { d: "M9.5 10V17" }), h("path", { d: "M14.5 10V17" }), h("path", { d: "M19 10V17" }), h("path", { d: "M3.5 19.5H20.5" })));
+const CheckIcon = icon(h("g", null, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M8 12.5L10.8 15.3L16 9.5" })));
+const ArrowIcon = icon(h("g", null, h("path", { d: "M5 12H19" }), h("path", { d: "M13 6L19 12L13 18" })));
+const ClockIcon = () => (h("svg", { class: "bs-oc__clock", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7V12L15 14" })));