@brandsync/wc 1.10.0 → 1.12.0

package/dist/cjs/bs-onboarding-checklist.cjs.entry.js

@@ -0,0 +1,161 @@
+'use strict';
+
+var index = require('./index-tFJjflK5.js');
+
+const bsOnboardingChecklistCss = () => `:host{display:block;max-width:100%;--bs-onboarding-checklist-width:420px;--bs-onboarding-checklist-radius:var(--bs-border-radius-150);--bs-onboarding-checklist-padding:var(--bs-spacing-200);--bs-onboarding-checklist-gap:var(--bs-spacing-150);--bs-onboarding-checklist-shadow:0 2px 2px var(--bs-elevation-medium);--bs-onboarding-checklist-color:var(--bs-text-default);--bs-onboarding-checklist-color-secondary:var(--bs-text-secondary);--bs-onboarding-checklist-icon-color:var(--bs-icon-action);--bs-onboarding-checklist-accent:var(--bs-color-primary-default);--bs-onboarding-checklist-bar-fill:var(--bs-surface-action);--bs-onboarding-checklist-bar-track:var(--bs-surface-container);--bs-onboarding-checklist-border:var(--bs-border-default);--bs-onboarding-checklist-card-height:146px}:host([type='dashboard']){container-type:inline-size}:host([type='panel']){width:var(--bs-onboarding-checklist-width)}:host([type='launcher']){--bs-onboarding-checklist-width:260px;width:var(--bs-onboarding-checklist-width)}:host([type='launcher'][launcher-layout='ring']){width:fit-content}:host([type='launcher'][launcher-layout='inline']){--bs-onboarding-checklist-width:300px}:host([type='completion']){--bs-onboarding-checklist-width:380px;width:var(--bs-onboarding-checklist-width)}.bs-oc--panel,.bs-oc--completion{--bs-card-radius:var(--bs-onboarding-checklist-radius);--bs-card-padding:var(--bs-onboarding-checklist-padding);--bs-card-shadow:var(--bs-onboarding-checklist-shadow)}.bs-oc--dashboard{--bs-card-radius:var(--bs-onboarding-checklist-radius);--bs-card-padding:var(--bs-onboarding-checklist-padding) var(--bs-spacing-550) var(--bs-onboarding-checklist-padding) var(--bs-onboarding-checklist-padding);--bs-card-border-width:1px;--bs-card-border-color:var(--bs-onboarding-checklist-border);--bs-card-shadow:none;position:relative}.bs-oc--launcher{--bs-card-radius:var(--bs-border-radius-100);--bs-card-padding:var(--bs-spacing-150);--bs-card-shadow:var(--bs-onboarding-checklist-shadow)}.bs-oc{color:var(--bs-onboarding-checklist-color)}.bs-oc p,.bs-oc ol{margin:0}.bs-oc__glyph{width:16px;height:16px}.bs-oc__heading{margin:0;font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:32px}.bs-oc__description{color:var(--bs-onboarding-checklist-color-secondary);font-size:var(--bs-font-size-md);line-height:24px}.bs-oc__description--center{text-align:center}.bs-oc__spacer{flex:1 1 0}.bs-oc__sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bs-oc__progress{display:flex;flex-direction:column;gap:var(--bs-spacing-75);align-self:stretch}.bs-oc__progress-labels{display:flex;align-items:center;justify-content:space-between;font-size:var(--bs-font-size-sm);line-height:20px}.bs-oc__progress-text{font-weight:var(--bs-font-weight-medium)}.bs-oc__progress-percent{color:var(--bs-onboarding-checklist-color-secondary)}.bs-oc__bar{--bs-progress-linear-fill:var(--bs-onboarding-checklist-bar-fill);--bs-progress-linear-track:var(--bs-onboarding-checklist-bar-track)}.bs-oc__bar--success{--bs-progress-linear-fill:var(--bs-color-success-default)}.bs-oc__text-button{--bs-button-subtle-color:var(--bs-text-action)}.bs-oc__block{--bs-button-width:100%;--bs-button-height-md:var(--bs-spacing-550);--bs-button-height-lg:var(--bs-spacing-550)}.bs-oc__close{flex:none}.bs-oc__close svg{width:24px;height:24px}.bs-oc__panel{display:flex;flex-direction:column;gap:var(--bs-onboarding-checklist-gap)}.bs-oc__head{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-oc__steps{display:flex;flex-direction:column;gap:var(--bs-spacing-25);padding:0;list-style:none}.bs-oc__step{display:flex;align-items:center;gap:var(--bs-spacing-150);min-height:40px;padding:0 var(--bs-spacing-100);font-size:var(--bs-font-size-sm);line-height:20px}.bs-oc__step--done{color:var(--bs-onboarding-checklist-color-secondary)}.bs-oc__status{display:inline-flex;flex:none;width:24px;height:24px;color:var(--bs-onboarding-checklist-icon-color)}.bs-oc__status svg{width:24px;height:24px}.bs-oc__current{display:block}.bs-oc__current-card{--bs-card-radius:var(--bs-border-radius-100);--bs-card-padding:var(--bs-spacing-100);--bs-card-shadow:none}.bs-oc__current-body{display:flex;flex-direction:column;gap:var(--bs-spacing-100)}.bs-oc__current-head{display:flex;align-items:center;gap:var(--bs-spacing-150)}.bs-oc__current-label{font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-semibold);line-height:20px}.bs-oc__current-text{color:var(--bs-onboarding-checklist-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-oc__current-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100)}.bs-oc__estimate{display:inline-flex;align-items:center;gap:var(--bs-spacing-50);color:var(--bs-onboarding-checklist-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px;white-space:nowrap}.bs-oc__clock{width:14px;height:14px}.bs-oc__current-actions{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-oc__current-actions bs-button{--bs-button-height-sm:var(--bs-spacing-400);--bs-button-padding-x-sm:var(--bs-spacing-150)}.bs-oc__dash{display:flex;align-items:center;gap:var(--bs-spacing-500)}.bs-oc--dashboard .bs-oc__close{position:absolute;top:-1px;inset-inline-end:-1px}.bs-oc__dash-summary{display:flex;flex-direction:column;align-items:flex-start;gap:var(--bs-onboarding-checklist-gap);flex:1 1 0;min-width:0}.bs-oc__dash-summary bs-progress-linear{align-self:stretch}.bs-oc__link{--bs-button-height-sm:var(--bs-spacing-400);--bs-button-padding-x-label-side:var(--bs-spacing-150);--bs-button-padding-x-icon-side:var(--bs-spacing-100)}.bs-oc__cards{display:flex;align-items:stretch;gap:var(--bs-spacing-100);padding:0;list-style:none}.bs-oc__card-item{display:flex}.bs-oc__step-card{--bs-card-radius:var(--bs-border-radius-100);--bs-card-padding:var(--bs-spacing-200);--bs-card-border-width:1px;--bs-card-border-color:var(--bs-onboarding-checklist-border);--bs-card-shadow:none;width:196px;height:var(--bs-onboarding-checklist-card-height)}.bs-oc__step-card--current{--bs-card-bg:var(--bs-surface-selected);--bs-card-border-color:var(--bs-border-primary)}.bs-oc__step-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--bs-spacing-100)}.bs-oc__step-card-label{font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:20px}.bs-oc__step-card-caption{color:var(--bs-onboarding-checklist-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px}@container (max-width: 899px){.bs-oc__dash{flex-direction:column;align-items:stretch;gap:var(--bs-spacing-200)}.bs-oc__cards{flex-direction:column}.bs-oc__step-card{width:100%}}.bs-oc__launcher{display:flex;align-items:center;gap:var(--bs-spacing-150);width:100%;padding:0;border:none;background:transparent;color:inherit;font-family:inherit;text-align:start;cursor:pointer}.bs-oc__launcher:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:4px;border-radius:var(--bs-border-radius-100)}.bs-oc__launcher-copy{display:flex;flex-direction:column;gap:var(--bs-spacing-100);white-space:nowrap}.bs-oc--launcher-ring .bs-oc__launcher-copy{gap:0}.bs-oc__launcher-title{font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-bold);line-height:20px}.bs-oc__launcher-text{color:var(--bs-onboarding-checklist-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px}.bs-oc__launcher-copy--inline{flex:1 1 0;flex-direction:row;align-items:baseline;gap:var(--bs-spacing-50);min-width:0;overflow:hidden}.bs-oc__launcher-title--inline{font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-semibold)}.bs-oc__ring{flex:none}.bs-oc__chevron{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;color:var(--bs-icon-default)}.bs-oc__chevron svg{width:20px;height:20px}.bs-oc__completion{display:flex;flex-direction:column;align-items:center;gap:var(--bs-spacing-100)}.bs-oc__completion .bs-oc__glyph{width:24px;height:24px}`;
+
+const BsOnboardingChecklist = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsStepAction = index.createEvent(this, "bsStepAction");
+        this.bsStepSkip = index.createEvent(this, "bsStepSkip");
+        this.bsClose = index.createEvent(this, "bsClose");
+        this.bsOpen = index.createEvent(this, "bsOpen");
+        this.bsDone = index.createEvent(this, "bsDone");
+        this.bsHide = index.createEvent(this, "bsHide");
+    }
+    /** 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 index.h(`h${level}`, { part: 'heading', id: 'heading', class: { 'bs-oc__heading': true, [cls]: !!cls } }, text);
+    }
+    renderClose() {
+        if (!this.closable)
+            return null;
+        return (index.h("bs-icon-button", { part: "close", class: "bs-oc__close", variant: "subtle", size: "md", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "aria-hidden": "true" }, index.h("path", { d: "M6 6L18 18M18 6L6 18" }))));
+    }
+    renderProgress(color = 'primary') {
+        const text = this.fill(this.progressLabel);
+        return (index.h("div", { part: "progress", class: "bs-oc__progress" }, index.h("div", { class: "bs-oc__progress-labels" }, index.h("span", { class: "bs-oc__progress-text" }, text), index.h("span", { class: "bs-oc__progress-percent" }, this.percent, " %")), index.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 (index.h("span", { class: { 'bs-oc__status': true, 'bs-oc__status--done': done, 'bs-oc__status--current': current }, "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("circle", { cx: "12", cy: "12", r: "9" }), done && index.h("path", { d: "M8 12.5L10.8 15.3L16 9.5" }))));
+    }
+    renderStepRow(s) {
+        const done = !!s.done;
+        return (index.h("li", { part: "step", class: { 'bs-oc__step': true, 'bs-oc__step--done': done } }, this.renderStatus(done, false), index.h("span", { class: "bs-oc__step-label" }, s.label), index.h("span", { class: "bs-oc__sr-only" }, done ? this.statusDoneLabel : this.statusTodoLabel)));
+    }
+    renderCurrentStep(s) {
+        return (index.h("li", { part: "step current", class: "bs-oc__current", "aria-current": "step" }, index.h("bs-card", { surface: "container", class: "bs-oc__current-card" }, index.h("div", { class: "bs-oc__current-body" }, index.h("div", { class: "bs-oc__current-head" }, this.renderStatus(false, true), index.h("span", { class: "bs-oc__current-label" }, s.label), index.h("span", { class: "bs-oc__sr-only" }, this.statusTodoLabel)), s.description && index.h("p", { class: "bs-oc__current-text" }, s.description), index.h("div", { class: "bs-oc__current-foot" }, s.estimate ? (index.h("span", { class: "bs-oc__estimate" }, index.h(ClockIcon, null), s.estimate)) : (index.h("span", null)), index.h("div", { class: "bs-oc__current-actions" }, s.skippable !== false && (index.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 && (index.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 (index.h("bs-card", { part: "container", class: "bs-oc bs-oc--panel", surface: "base", role: "region", "aria-labelledby": "heading" }, index.h("div", { class: "bs-oc__panel" }, index.h("div", { class: "bs-oc__head" }, this.renderHeading(this.heading ?? d.heading), index.h("span", { class: "bs-oc__spacer" }), this.renderClose()), (this.description ?? d.description) && index.h("p", { part: "description", class: "bs-oc__description" }, this.description ?? d.description), this.renderProgress(), index.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 (index.h("bs-card", { part: "container", class: "bs-oc bs-oc--dashboard", surface: "base", role: "region", "aria-labelledby": "heading" }, index.h("div", { class: "bs-oc__dash" }, this.renderClose(), index.h("div", { class: "bs-oc__dash-summary" }, index.h("bs-icon-tile", { part: "art", intent: "brand", size: "md" }, index.h("slot", { name: "icon" }, index.h(ChecklistIcon, null))), this.renderHeading(this.heading ?? d.heading), summary && index.h("p", { part: "description", class: "bs-oc__description" }, summary), index.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} %` }), index.h("bs-button", { part: "see-all", class: "bs-oc__text-button bs-oc__link", variant: "subtle", size: "sm", onClick: () => this.bsOpen.emit() }, this.seeAllLabel, index.h(ArrowIcon, { slot: "end-icon" }))), index.h("ol", { class: "bs-oc__cards" }, remaining.map((s, i) => {
+            const isCurrent = i === 0;
+            return (index.h("li", { part: isCurrent ? 'step current' : 'step', class: "bs-oc__card-item", "aria-current": isCurrent ? 'step' : undefined }, index.h("bs-card", { surface: "base", class: { 'bs-oc__step-card': true, 'bs-oc__step-card--current': isCurrent } }, index.h("div", { class: "bs-oc__step-card-body" }, index.h("bs-icon-tile", { part: "step-art", intent: isCurrent ? 'brand' : 'default', size: "md" }, index.h("slot", { name: `icon-${s.id}` }, index.h(ListIcon, null))), index.h("span", { class: "bs-oc__step-card-label" }, s.label), isCurrent ? (index.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, index.h(ArrowIcon, { slot: "end-icon" }))) : (index.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' ? (index.h("span", { class: "bs-oc__launcher-copy bs-oc__launcher-copy--inline" }, index.h("span", { class: "bs-oc__launcher-title bs-oc__launcher-title--inline" }, title), index.h("span", { class: "bs-oc__launcher-text" }, text))) : (index.h("span", { class: "bs-oc__launcher-copy" }, index.h("span", { class: "bs-oc__launcher-title" }, title), index.h("span", { class: "bs-oc__launcher-text" }, text)));
+        return (index.h("bs-card", { part: "container", class: `bs-oc bs-oc--launcher bs-oc--launcher-${layout}`, surface: "base" }, index.h("button", { part: "launcher", type: "button", class: "bs-oc__launcher", onClick: () => this.bsOpen.emit() }, layout === 'ring' && index.h("bs-progress", { class: "bs-oc__ring", type: "determinate", size: "small", value: this.percent, showLabel: false, ariaLabel: text }), layout === 'icon' && (index.h("bs-icon-tile", { part: "art", intent: "brand", size: "md" }, index.h("slot", { name: "icon" }, index.h(BankIcon, null)))), layout === 'inline' && (index.h("bs-icon-tile", { part: "art", intent: this.percent >= 100 ? 'success' : 'brand', size: "md" }, index.h("slot", { name: "icon" }, index.h(CheckIcon, null)))), copy, layout === 'inline' && (index.h("span", { class: "bs-oc__chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "M9 6L15 12L9 18" })))))));
+    }
+    renderCompletion(d) {
+        return (index.h("bs-card", { part: "container", class: "bs-oc bs-oc--completion", surface: "base", role: "region", "aria-labelledby": "heading" }, index.h("div", { class: "bs-oc__completion" }, index.h("bs-icon-tile", { part: "art", intent: "success", size: "lg" }, index.h("slot", { name: "icon" }, index.h(CheckIcon, null))), this.renderHeading(this.heading ?? d.heading), (this.description ?? d.description) && index.h("p", { part: "description", class: "bs-oc__description bs-oc__description--center" }, this.description ?? d.description), this.renderProgress('success'), index.h("bs-button", { part: "primary", class: "bs-oc__block", variant: "primary", onClick: () => this.bsDone.emit() }, this.doneLabel), index.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);
+        }
+    }
+};
+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) => (index.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(index.h("g", null, index.h("path", { d: "M4 7L6 9L9 5.5" }), index.h("path", { d: "M4 16L6 18L9 14.5" }), index.h("path", { d: "M12.5 7H20" }), index.h("path", { d: "M12.5 16H20" })));
+const ListIcon = icon(index.h("g", null, index.h("path", { d: "M8 6H20" }), index.h("path", { d: "M8 12H20" }), index.h("path", { d: "M8 18H20" }), index.h("path", { d: "M4 6V6.01" }), index.h("path", { d: "M4 12V12.01" }), index.h("path", { d: "M4 18V18.01" })));
+const BankIcon = icon(index.h("g", null, index.h("path", { d: "M3.5 9.5L12 4L20.5 9.5" }), index.h("path", { d: "M5 10V17" }), index.h("path", { d: "M9.5 10V17" }), index.h("path", { d: "M14.5 10V17" }), index.h("path", { d: "M19 10V17" }), index.h("path", { d: "M3.5 19.5H20.5" })));
+const CheckIcon = icon(index.h("g", null, index.h("circle", { cx: "12", cy: "12", r: "9" }), index.h("path", { d: "M8 12.5L10.8 15.3L16 9.5" })));
+const ArrowIcon = icon(index.h("g", null, index.h("path", { d: "M5 12H19" }), index.h("path", { d: "M13 6L19 12L13 18" })));
+const ClockIcon = () => (index.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" }, index.h("circle", { cx: "12", cy: "12", r: "9" }), index.h("path", { d: "M12 7V12L15 14" })));
+BsOnboardingChecklist.style = bsOnboardingChecklistCss();
+
+exports.bs_onboarding_checklist = BsOnboardingChecklist;

package/dist/cjs/bs-pagination.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
 const bsPaginationCss = () => `:host{display:inline-block;--bs-pagination-gap:var(--bs-spacing-50);--bs-pagination-size:var(--bs-spacing-550);--bs-pagination-radius:var(--bs-border-radius-100);--bs-pagination-font-size:var(--bs-font-size-md);--bs-pagination-line-height:var(--bs-line-height-body-md);--bs-pagination-color:var(--bs-text-secondary);--bs-pagination-color-disabled:var(--bs-icon-disabled);--bs-pagination-hover:var(--bs-color-neutral-container-hover);--bs-pagination-pressed:var(--bs-color-neutral-container-pressed);--bs-pagination-current-bg:var(--bs-color-primary-default);--bs-pagination-current-bg-hover:var(--bs-color-primary-hover);--bs-pagination-current-bg-pressed:var(--bs-color-primary-pressed);--bs-pagination-current-color:var(--bs-text-on-action);--bs-pagination-focus-ring-color:var(--bs-border-neutral-focus)}.bs-pagination__list{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none;gap:var(--bs-pagination-gap);font-family:inherit}.bs-pagination__item{display:flex}.bs-pagination__control{display:flex;align-items:center;justify-content:center;width:var(--bs-pagination-size);height:var(--bs-pagination-size);padding:0;border:none;border-radius:var(--bs-pagination-radius);background:transparent;color:var(--bs-pagination-color);font-family:inherit;font-size:var(--bs-pagination-font-size);line-height:calc(var(--bs-pagination-line-height) * 1px);cursor:pointer}.bs-pagination__control svg{width:24px;height:24px}.bs-pagination__control:disabled{color:var(--bs-pagination-color-disabled);cursor:not-allowed}.bs-pagination__page:not(:disabled):hover{background:var(--bs-pagination-hover)}.bs-pagination__page:not(:disabled):active{background:var(--bs-pagination-pressed)}.bs-pagination__control:focus-visible{outline:2px solid var(--bs-pagination-focus-ring-color);outline-offset:2px}.bs-pagination__page--current{background:var(--bs-pagination-current-bg);color:var(--bs-pagination-current-color)}.bs-pagination__page--current:hover{background:var(--bs-pagination-current-bg-hover)}.bs-pagination__page--current:active{background:var(--bs-pagination-current-bg-pressed)}.bs-pagination__ellipsis{display:flex;align-items:center;justify-content:center;width:var(--bs-pagination-size);height:var(--bs-pagination-size);color:var(--bs-pagination-color)}.bs-pagination__ellipsis svg{width:24px;height:24px}`;
 
@@ -70,7 +70,7 @@ const BsPagination = class {
     }
     render() {
         const pageList = this.getPageList();
-        return (index.h("nav", { key: '9c08eac677410bc05682ff8e4219b63226eb81bd', "aria-label": "Pagination" }, index.h("ul", { key: '2d62248f42a4a19470ac6a259ab759ccdfd9a245', part: "list", class: "bs-pagination__list" }, index.h("li", { key: 'db5f800712d37adb8d3d28cd24016a2e3c2cdda1', part: "item", class: "bs-pagination__item" }, index.h("button", { key: 'cdee1107fa0f38d3e92adb58d2147f97b7b0605f', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, index.h(ChevronLeftIcon, { key: 'f1293927db7446d8ceb6b8391e9a5796b0fad61c' }))), pageList.map((item, index$1) => item === 'ellipsis' ? (index.h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index$1}` }, index.h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, index.h(EllipsisIcon, null)))) : (index.h("li", { part: "item", class: "bs-pagination__item", key: item }, index.h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), index.h("li", { key: '530829cfaccd79476c8788f1079991cd7ccc3a4b', part: "item", class: "bs-pagination__item" }, index.h("button", { key: '9a38949a2dd2de77cf57e3fe7e281c1fe49fcc50', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, index.h(ChevronRightIcon, { key: '10f3d9f6a79b431ece2c1b8f12e579b210e95e2f' }))))));
+        return (index.h("nav", { key: 'd0fec9b9d17ddc5b338ed77c4e97a7006d7e665e', "aria-label": "Pagination" }, index.h("ul", { key: '82fff342952ea13a84f97e549039edd18a8b6626', part: "list", class: "bs-pagination__list" }, index.h("li", { key: '124c33b04fe0dcdef83f8ff9c4d539518c7557d7', part: "item", class: "bs-pagination__item" }, index.h("button", { key: '4d702cb7cdeb7df86c4844b313943cf8d8c607d5', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, index.h(ChevronLeftIcon, { key: '6c747a6bcdf0a9a4a2dfb8260ff85ad95eb1acdf' }))), pageList.map((item, index$1) => item === 'ellipsis' ? (index.h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index$1}` }, index.h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, index.h(EllipsisIcon, null)))) : (index.h("li", { part: "item", class: "bs-pagination__item", key: item }, index.h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), index.h("li", { key: '987698c1f798053e6f9e7ac63373c04e68868d0f', part: "item", class: "bs-pagination__item" }, index.h("button", { key: '95220bdb47507697a0742dbfad4fa0d37d7b4d55', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, index.h(ChevronRightIcon, { key: 'd6bdac44109e11fa11c2f7d32ed732c5364e6513' }))))));
     }
 };
 function range(start, end) {

package/dist/cjs/bs-product-tour.cjs.entry.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var index = require('./index-tFJjflK5.js');
+
+const bsProductTourCss = () => `:host{display:inline-block;--bs-product-tour-bg:var(--bs-paper-bg-base);--bs-product-tour-radius:var(--bs-border-radius-150);--bs-product-tour-color:var(--bs-text-default);--bs-product-tour-color-secondary:var(--bs-text-secondary);--bs-product-tour-art-size:64px;--bs-product-tour-art-icon-size:28px;--bs-product-tour-arrow-width:22px;--bs-product-tour-arrow-height:16px;--bs-product-tour-arrow-offset:36px;--bs-product-tour-width:400px;--bs-product-tour-padding:var(--bs-spacing-300);--bs-product-tour-gap:var(--bs-spacing-150);--bs-product-tour-shadow-color:var(--bs-elevation-medium)}:host([type='pointer']){--bs-product-tour-width:320px;--bs-product-tour-padding:var(--bs-spacing-200);--bs-product-tour-gap:var(--bs-spacing-100);--bs-product-tour-shadow-color:var(--bs-elevation-high)}.bs-product-tour{position:relative;width:var(--bs-product-tour-width);max-width:100%;color:var(--bs-product-tour-color);font-family:inherit}.bs-product-tour,.bs-product-tour__card{--bs-card-bg:var(--bs-product-tour-bg);--bs-card-radius:var(--bs-product-tour-radius);--bs-card-padding:var(--bs-product-tour-padding)}.bs-product-tour__body{display:flex;flex-direction:column;gap:var(--bs-product-tour-gap)}.bs-product-tour p{margin:0}.bs-product-tour--card{--bs-card-shadow:0 4px 8px var(--bs-product-tour-shadow-color)}.bs-product-tour--card .bs-product-tour__body{align-items:center;text-align:center}.bs-product-tour__art{--bs-icon-tile-size:var(--bs-product-tour-art-size);--bs-icon-tile-icon-size:var(--bs-product-tour-art-icon-size)}.bs-product-tour__glyph,::slotted([slot='icon']){width:var(--bs-product-tour-art-icon-size);height:var(--bs-product-tour-art-icon-size)}.bs-product-tour--card .bs-product-tour__heading{align-self:stretch;font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:32px}.bs-product-tour--card .bs-product-tour__description{align-self:stretch;color:var(--bs-product-tour-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-product-tour--card .bs-product-tour__actions{padding-top:var(--bs-spacing-100)}.bs-product-tour--card .bs-product-tour__actions bs-button{--bs-button-height-md:var(--bs-spacing-550);min-width:94px}.bs-product-tour--pointer{filter:drop-shadow(0 4px 4px var(--bs-product-tour-shadow-color))}.bs-product-tour__card{display:block;--bs-card-shadow:none}.bs-product-tour--pointer .bs-product-tour__body{min-height:calc(140px - var(--bs-product-tour-padding) * 2)}.bs-product-tour--pointer .bs-product-tour__text{display:flex;flex-direction:column;gap:var(--bs-spacing-25);padding-inline-end:var(--bs-spacing-500)}.bs-product-tour--pointer .bs-product-tour__heading{font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-semibold);line-height:24px}.bs-product-tour--pointer .bs-product-tour__description{color:var(--bs-product-tour-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-product-tour__close{position:absolute;top:3px;inset-inline-end:3px}.bs-product-tour__close svg{width:20px;height:20px}.bs-product-tour__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100);margin-top:auto;padding-top:4px}.bs-product-tour__progress{color:var(--bs-product-tour-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px;white-space:nowrap}.bs-product-tour--pointer .bs-product-tour__actions{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-product-tour--pointer .bs-product-tour__actions bs-button{--bs-button-height-sm:var(--bs-spacing-400)}.bs-product-tour--card .bs-product-tour__actions{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-product-tour__arrow{position:absolute;background:var(--bs-product-tour-bg);pointer-events:none}:host([direction^='top']) .bs-product-tour__arrow,:host([direction^='bottom']) .bs-product-tour__arrow{width:var(--bs-product-tour-arrow-width);height:calc(var(--bs-product-tour-arrow-height) + 1px)}:host([direction^='top']) .bs-product-tour__arrow{bottom:calc(100% - 1px);clip-path:polygon(50% 0, 100% 100%, 0 100%)}:host([direction^='bottom']) .bs-product-tour__arrow{top:calc(100% - 1px);clip-path:polygon(0 0, 100% 0, 50% 100%)}:host([direction='top']) .bs-product-tour__arrow,:host([direction='bottom']) .bs-product-tour__arrow{left:50%;transform:translateX(-50%)}:host([direction$='-left']) .bs-product-tour__arrow{left:var(--bs-product-tour-arrow-offset);transform:translateX(-50%)}:host([direction$='-right']) .bs-product-tour__arrow{right:var(--bs-product-tour-arrow-offset);transform:translateX(50%)}:host([direction^='left']) .bs-product-tour__arrow,:host([direction^='right']) .bs-product-tour__arrow{width:calc(var(--bs-product-tour-arrow-height) + 1px);height:var(--bs-product-tour-arrow-width)}:host([direction^='left']) .bs-product-tour__arrow{right:calc(100% - 1px);clip-path:polygon(0 50%, 100% 0, 100% 100%)}:host([direction^='right']) .bs-product-tour__arrow{left:calc(100% - 1px);clip-path:polygon(0 0, 100% 50%, 0 100%)}:host([direction='left']) .bs-product-tour__arrow,:host([direction='right']) .bs-product-tour__arrow{top:50%;transform:translateY(-50%)}:host([direction$='-top']) .bs-product-tour__arrow{top:var(--bs-product-tour-arrow-offset);transform:translateY(-50%)}:host([direction$='-bottom']) .bs-product-tour__arrow{bottom:var(--bs-product-tour-arrow-offset);transform:translateY(50%)}`;
+
+const BsProductTour = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsPrimary = index.createEvent(this, "bsPrimary");
+        this.bsSecondary = index.createEvent(this, "bsSecondary");
+        this.bsClose = index.createEvent(this, "bsClose");
+    }
+    /** `welcome` and `success` are centred cards with an art tile; `pointer` is the compact step
+     * with an arrow. */
+    type = 'welcome';
+    /** Where the arrow sits (`pointer` only): the side of the card it's on, and for corners/edges
+     * which end it's near, e.g. `top-left` = on the top edge, near the left corner. */
+    direction = 'top';
+    /** Heading. */
+    heading;
+    /** Paragraph under the heading. */
+    description;
+    /** Current step, 1-based (`pointer`). Used with `total` for the progress label. */
+    step = 1;
+    /** Number of steps (`pointer`). The progress label is hidden when this is 0. */
+    total = 0;
+    /** Template of the progress label; `{step}` and `{total}` are replaced. */
+    progressLabel = '{step} of {total}';
+    /** Label of the primary button. Defaults to "Start" (`welcome`), "Done" (`success`) or "Next"
+     * (`pointer`). Set it to an empty string to hide the button. */
+    primaryLabel;
+    /** Label of the secondary button. Defaults to "Later" (`welcome`) or "Back" (`pointer`); none for
+     * `success`. Set it to an empty string to hide the button. */
+    secondaryLabel;
+    /** Shows a close button in the corner (`pointer`). */
+    closable = false;
+    /** Accessible name of the close button. */
+    closeLabel = 'Close';
+    /** Fires when the primary button is pressed. */
+    bsPrimary;
+    /** Fires when the secondary button is pressed. */
+    bsSecondary;
+    /** Fires when the close button is pressed. */
+    bsClose;
+    get primary() {
+        if (this.primaryLabel !== undefined)
+            return this.primaryLabel;
+        return { welcome: 'Start', success: 'Done', pointer: 'Next' }[this.type] ?? '';
+    }
+    get secondary() {
+        if (this.secondaryLabel !== undefined)
+            return this.secondaryLabel;
+        return { welcome: 'Later', success: '', pointer: 'Back' }[this.type] ?? '';
+    }
+    renderActions(buttonSize, secondaryVariant) {
+        const { primary, secondary } = this;
+        if (!primary && !secondary)
+            return null;
+        return (index.h("div", { part: "actions", class: "bs-product-tour__actions" }, secondary && (index.h("bs-button", { part: "secondary", variant: secondaryVariant, size: buttonSize, onClick: () => this.bsSecondary.emit() }, secondary)), primary && (index.h("bs-button", { part: "primary", variant: "primary", size: buttonSize, onClick: () => this.bsPrimary.emit() }, primary))));
+    }
+    renderCard() {
+        const success = this.type === 'success';
+        return (index.h("bs-card", { part: "container", class: "bs-product-tour bs-product-tour--card", surface: "base" }, index.h("div", { class: "bs-product-tour__body" }, index.h("bs-icon-tile", { part: "art", class: "bs-product-tour__art", intent: success ? 'success' : 'brand', size: "lg" }, index.h("slot", { name: "icon" }, success ? index.h(CheckIcon, null) : index.h(SparkleIcon, null))), this.heading && (index.h("p", { part: "heading", class: "bs-product-tour__heading" }, this.heading)), this.description && (index.h("p", { part: "description", class: "bs-product-tour__description" }, this.description)), this.renderActions('md', 'outlined'))));
+    }
+    renderPointer() {
+        const progress = this.total > 0 ? this.progressLabel.replace('{step}', String(this.step)).replace('{total}', String(this.total)) : '';
+        return (index.h("div", { class: "bs-product-tour bs-product-tour--pointer" }, index.h("div", { part: "arrow", class: "bs-product-tour__arrow", "aria-hidden": "true" }), index.h("bs-card", { part: "container", class: "bs-product-tour__card", surface: "base" }, this.closable && (index.h("bs-icon-button", { part: "close", class: "bs-product-tour__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, index.h("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, index.h("path", { d: "M5 5L15 15M15 5L5 15" })))), index.h("div", { class: "bs-product-tour__body" }, index.h("div", { class: "bs-product-tour__text" }, this.heading && (index.h("p", { part: "heading", class: "bs-product-tour__heading" }, this.heading)), this.description && (index.h("p", { part: "description", class: "bs-product-tour__description" }, this.description))), index.h("div", { part: "footer", class: "bs-product-tour__footer" }, progress ? (index.h("span", { part: "progress", class: "bs-product-tour__progress" }, progress)) : (index.h("span", null)), this.renderActions('sm', 'subtle'))))));
+    }
+    render() {
+        return this.type === 'pointer' ? this.renderPointer() : this.renderCard();
+    }
+};
+const SparkleIcon = () => (index.h("svg", { class: "bs-product-tour__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { d: "M9.5 4L11.2 9.3L16.5 11L11.2 12.7L9.5 18L7.8 12.7L2.5 11L7.8 9.3L9.5 4Z" }), index.h("path", { d: "M18.5 3V7" }), index.h("path", { d: "M16.5 5H20.5" }), index.h("path", { d: "M18 16V20" }), index.h("path", { d: "M16 18H20" })));
+const CheckIcon = () => (index.h("svg", { class: "bs-product-tour__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("circle", { cx: "12", cy: "12", r: "9" }), index.h("path", { d: "M8 12.5L10.8 15.3L16 9.5" })));
+BsProductTour.style = bsProductTourCss();
+
+exports.bs_product_tour = BsProductTour;

package/dist/cjs/bs-progress-linear.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
-const bsProgressLinearCss = () => `:host{display:flex;--bs-progress-linear-gap:var(--bs-spacing-100);--bs-progress-linear-track:var(--bs-surface-container);--bs-progress-linear-fill:var(--bs-color-primary-default);--bs-progress-linear-radius:120px;--bs-progress-linear-height-sm:4px;--bs-progress-linear-height-lg:8px;--bs-progress-linear-label-color:var(--bs-text-default);--bs-progress-linear-label-font-size:var(--bs-fontsize-body-md);--bs-progress-linear-label-line-height:var(--bs-line-height-body-md);--bs-progress-linear-transition-duration:0.3s;--bs-progress-linear-slide-duration:1.6s}.bs-progress-linear{display:flex;flex-direction:column;width:100%;gap:var(--bs-progress-linear-gap);font-family:inherit}.bs-progress-linear__track{position:relative;width:100%;border-radius:var(--bs-progress-linear-radius);background:var(--bs-progress-linear-track);overflow:hidden}.bs-progress-linear__track--small{height:var(--bs-progress-linear-height-sm)}.bs-progress-linear__track--large{height:var(--bs-progress-linear-height-lg)}.bs-progress-linear__fill{height:100%;border-radius:var(--bs-progress-linear-radius);background:var(--bs-progress-linear-fill);transition:width var(--bs-progress-linear-transition-duration) ease}.bs-progress-linear__fill--indeterminate{position:absolute;top:0;left:0;width:24%;min-width:80px;background:linear-gradient(90deg, transparent 0%, var(--bs-progress-linear-fill) 50%, transparent 100%);animation:bs-progress-linear-slide var(--bs-progress-linear-slide-duration) ease-in-out infinite}@keyframes bs-progress-linear-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}@media (prefers-reduced-motion: reduce){.bs-progress-linear__fill--indeterminate{animation-duration:calc(var(--bs-progress-linear-slide-duration) * 4)}}.bs-progress-linear__label{color:var(--bs-progress-linear-label-color);font-size:var(--bs-progress-linear-label-font-size);line-height:calc(var(--bs-progress-linear-label-line-height) * 1px)}`;
+const bsProgressLinearCss = () => `:host{display:flex;--bs-progress-linear-gap:var(--bs-spacing-100);--bs-progress-linear-track:var(--bs-surface-hover);--bs-progress-linear-fill:var(--bs-color-primary-default);--bs-progress-linear-radius:120px;--bs-progress-linear-height-sm:4px;--bs-progress-linear-height-lg:8px;--bs-progress-linear-label-color:var(--bs-text-default);--bs-progress-linear-label-font-size:var(--bs-fontsize-body-md);--bs-progress-linear-label-line-height:var(--bs-line-height-body-md);--bs-progress-linear-transition-duration:0.3s;--bs-progress-linear-slide-duration:1.6s}.bs-progress-linear{display:flex;flex-direction:column;width:100%;gap:var(--bs-progress-linear-gap);font-family:inherit}.bs-progress-linear__track{position:relative;width:100%;border-radius:var(--bs-progress-linear-radius);background:var(--bs-progress-linear-track);overflow:hidden}.bs-progress-linear__track--small{height:var(--bs-progress-linear-height-sm)}.bs-progress-linear__track--large{height:var(--bs-progress-linear-height-lg)}.bs-progress-linear__fill{height:100%;border-radius:var(--bs-progress-linear-radius);background:var(--bs-progress-linear-fill);transition:width var(--bs-progress-linear-transition-duration) ease}.bs-progress-linear__fill--indeterminate{position:absolute;top:0;left:0;width:24%;min-width:80px;background:linear-gradient(90deg, transparent 0%, var(--bs-progress-linear-fill) 50%, transparent 100%);animation:bs-progress-linear-slide var(--bs-progress-linear-slide-duration) ease-in-out infinite}@keyframes bs-progress-linear-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}@media (prefers-reduced-motion: reduce){.bs-progress-linear__fill--indeterminate{animation-duration:calc(var(--bs-progress-linear-slide-duration) * 4)}}.bs-progress-linear__label{color:var(--bs-progress-linear-label-color);font-size:var(--bs-progress-linear-label-font-size);line-height:calc(var(--bs-progress-linear-label-line-height) * 1px)}`;
 
 const BsProgressLinear = class {
     constructor(hostRef) {
@@ -35,13 +35,13 @@ const BsProgressLinear = class {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (index.h("div", { key: '84a59a0536a42cbf196fe981b8574a2e530e99a0', part: "container", class: "bs-progress-linear" }, index.h("div", { key: '6ef60ecc713e514ee0d11c4f26fe12fd395c685d', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (index.h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
+        return (index.h("div", { key: '783f94f3ea320d9a8169c1d253037ae3631179e1', part: "container", class: "bs-progress-linear" }, index.h("div", { key: '9b5e0c1f0a641683bf9e763b2e3ede0b814f26cf', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (index.h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
         // Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
         // transparent) sliding left-to-right across the track's full width in a loop -- the
         // same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
         // but along a straight line via a linear-gradient + `transform: translateX(...)`
         // keyframe animation instead of a rotating conic-gradient.
-        index.h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (index.h("span", { key: 'd637632ca0bebe53088d4ee0ba984bbb2cf0b212', part: "label", class: "bs-progress-linear__label" }, index.h("slot", { key: '01830596779d6f41387cff50bbcbc9892ab71162' })))));
+        index.h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (index.h("span", { key: 'bb81cebfe79bb6e722fe0fb3cd561318a5f06ac6', part: "label", class: "bs-progress-linear__label" }, index.h("slot", { key: 'df04863716047f5b1fa4c70f20744ac25713840b' })))));
     }
     // The default slot's assigned content lives in the host's light DOM regardless of whether a
     // <slot> is currently rendered in the shadow tree, so this can be computed directly from the

package/dist/cjs/bs-progress.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
 const bsProgressCss = () => `:host{display:inline-flex;--bs-progress-gap:var(--bs-spacing-100);--bs-progress-track:var(--bs-neutral-200);--bs-progress-arc:var(--bs-color-primary-default);--bs-progress-label-color:var(--bs-color-primary-default);--bs-progress-label-font-size-sm:var(--bs-fontsize-caption-md);--bs-progress-label-line-height-sm:var(--bs-line-height-caption-md);--bs-progress-label-font-size-lg:var(--bs-fontsize-body-md);--bs-progress-label-line-height-lg:var(--bs-line-height-body-md);--bs-progress-label-font-weight:var(--bs-font-weight-medium);--bs-progress-spin-duration:1.4s}.bs-progress{display:inline-flex;flex-direction:column;align-items:center;gap:var(--bs-progress-gap);font-family:inherit}.bs-progress__box{position:relative;display:inline-flex}.bs-progress__ring{transform:rotate(-90deg);overflow:visible}.bs-progress__track{stroke:var(--bs-progress-track)}.bs-progress__arc{stroke:var(--bs-progress-arc);transition:stroke-dashoffset 0.3s ease}.bs-progress__spinner{width:100%;height:100%;border-radius:50%;background:conic-gradient(from 0deg, transparent 0deg, var(--bs-progress-arc) var(--bs-progress-spinner-sweep), transparent var(--bs-progress-spinner-sweep));-webkit-mask:radial-gradient(     farthest-side,     transparent calc(100% - var(--bs-progress-spinner-stroke-width) - 1px),     #000 calc(100% - var(--bs-progress-spinner-stroke-width))   );mask:radial-gradient(     farthest-side,     transparent calc(100% - var(--bs-progress-spinner-stroke-width) - 1px),     #000 calc(100% - var(--bs-progress-spinner-stroke-width))   );animation:bs-progress-spin var(--bs-progress-spin-duration) linear infinite}@keyframes bs-progress-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.bs-progress__spinner{animation-duration:calc(var(--bs-progress-spin-duration) * 4)}}.bs-progress__label{color:var(--bs-progress-label-color);font-weight:var(--bs-progress-label-font-weight);text-align:center}.bs-progress__label--small,.bs-progress__label--medium{font-size:var(--bs-progress-label-font-size-sm);line-height:calc(var(--bs-progress-label-line-height-sm) * 1px)}.bs-progress__label--large{font-size:var(--bs-progress-label-font-size-lg);line-height:calc(var(--bs-progress-label-line-height-lg) * 1px)}`;
 
@@ -57,7 +57,7 @@ const BsProgress = class {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (index.h("div", { key: 'b1516c02f0f6ec3865930a5ef1be7bab30c9cdfe', part: "container", class: "bs-progress" }, index.h("div", { key: '0689f281619a940d73d24bb79d25d54a0863c1af', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (index.h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, index.h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), index.h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (index.h("div", { key: '9d9c371ea92f67811e9ab927d346f2bece833cf5', part: "container", class: "bs-progress" }, index.h("div", { key: '5753f1db2b3f79a55b2ff7936cdb836f10c29bc3', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (index.h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, index.h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), index.h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -66,7 +66,7 @@ const BsProgress = class {
         index.h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (index.h("span", { key: '2482112c5f6cac5dceffe49bd878e05a526ea64e', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (index.h("span", { key: '68381d4570b3f4d29d4b671f5069c7f4c02669e7', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
 };
 BsProgress.style = bsProgressCss();

package/dist/cjs/bs-qr-code.cjs.entry.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var index = require('./index-tFJjflK5.js');
+
+const bsQrCodeCss = () => `:host{display:inline-block;max-width:100%;--bs-qr-code-bg:var(--bs-paper-bg-base);--bs-qr-code-border:var(--bs-border-default);--bs-qr-code-radius:var(--bs-border-radius-150);--bs-qr-code-quiet-zone-bg:var(--bs-text-static-white);--bs-qr-code-module-color:var(--bs-text-static-black);--bs-qr-code-qr-border:var(--bs-border-default);--bs-qr-code-qr-radius:var(--bs-border-radius-100);--bs-qr-code-color:var(--bs-text-default);--bs-qr-code-color-secondary:var(--bs-text-secondary);--bs-qr-code-url-bg:var(--bs-surface-container);--bs-qr-code-url-radius:6px;--bs-qr-code-logo-size:20%;--bs-qr-code-padding:var(--bs-spacing-300);--bs-qr-code-gap:var(--bs-spacing-200);--bs-qr-code-code-size:200px;--bs-qr-code-quiet-zone:var(--bs-spacing-150);--bs-qr-code-amount-size:var(--bs-font-size-2xl);--bs-qr-code-amount-line-height:32px;--bs-qr-code-download-min-width:168px;--bs-qr-code-copy-min-width:126px}:host([size='sm']){--bs-qr-code-padding:var(--bs-spacing-200);--bs-qr-code-gap:var(--bs-spacing-150);--bs-qr-code-code-size:128px;--bs-qr-code-quiet-zone:var(--bs-spacing-100);--bs-qr-code-amount-size:var(--bs-font-size-xl);--bs-qr-code-amount-line-height:24px;--bs-qr-code-download-min-width:139px;--bs-qr-code-copy-min-width:102px}:host([size='lg']){--bs-qr-code-padding:var(--bs-spacing-400);--bs-qr-code-gap:var(--bs-spacing-250);--bs-qr-code-code-size:288px;--bs-qr-code-amount-size:32px;--bs-qr-code-amount-line-height:40px}.bs-qr-code{position:relative;width:fit-content;max-width:100%;color:var(--bs-qr-code-color);--bs-card-bg:var(--bs-qr-code-bg);--bs-card-radius:var(--bs-qr-code-radius);--bs-card-padding:var(--bs-qr-code-padding);--bs-card-border-width:1px;--bs-card-border-color:var(--bs-qr-code-border);--bs-card-shadow:none}.bs-qr-code__body{display:flex;flex-direction:column;align-items:center;gap:var(--bs-qr-code-gap)}.bs-qr-code__close{position:absolute;top:var(--bs-spacing-100);inset-inline-end:var(--bs-spacing-100)}.bs-qr-code__close svg{width:20px;height:20px}.bs-qr-code__head{display:flex;flex-direction:column;align-items:center;gap:2px;width:272px;max-width:100%;text-align:center}.bs-qr-code__head p,.bs-qr-code__amount p,.bs-qr-code__overlay p{margin:0}.bs-qr-code__title{font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:32px}.bs-qr-code__description{color:var(--bs-qr-code-color-secondary);font-size:var(--bs-font-size-md);line-height:24px}.bs-qr-code__qr{position:relative;box-sizing:border-box;flex:none;padding:var(--bs-qr-code-quiet-zone);border:1px solid var(--bs-qr-code-qr-border);border-radius:var(--bs-qr-code-qr-radius);background:var(--bs-qr-code-quiet-zone-bg);overflow:hidden}.bs-qr-code__code{position:relative;width:var(--bs-qr-code-code-size);height:var(--bs-qr-code-code-size);background:var(--bs-qr-code-quiet-zone-bg);color:var(--bs-qr-code-module-color)}.bs-qr-code__matrix,::slotted([slot='code']){display:block;width:100%;height:100%}.bs-qr-code__logo{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bs-qr-code-logo-size);height:var(--bs-qr-code-logo-size);padding:4px;border-radius:var(--bs-border-radius-50);background:var(--bs-qr-code-quiet-zone-bg);transform:translate(-50%, -50%)}.bs-qr-code__logo{display:none}.bs-qr-code__logo--visible{display:flex}::slotted([slot='logo']){width:100%;height:100%;object-fit:contain}.bs-qr-code__overlay{position:absolute;inset:-1px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--bs-spacing-100);padding:var(--bs-spacing-150);overflow:hidden;text-align:center;white-space:nowrap}.bs-qr-code__overlay--loading{background:var(--bs-color-neutral-container)}.bs-qr-code__overlay--error{background:var(--bs-surface-container)}.bs-qr-code__overlay--expired,.bs-qr-code__overlay--scanned{background:var(--bs-surface-base)}.bs-qr-code__overlay-caption{color:var(--bs-qr-code-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px}.bs-qr-code__overlay-text{color:var(--bs-qr-code-color);font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:20px}.bs-qr-code__overlay-text--strong{font-weight:var(--bs-font-weight-semibold)}.bs-qr-code__status-icon{width:32px;height:32px;color:var(--bs-qr-code-color-secondary)}.bs-qr-code__status-icon--error{color:var(--bs-icon-error)}.bs-qr-code__status-icon--scanned{width:44px;height:44px;color:var(--bs-icon-success)}.bs-qr-code__overlay bs-button{--bs-button-height-md:var(--bs-spacing-550)}.bs-qr-code__amount{display:flex;flex-direction:column;align-items:center;white-space:nowrap}.bs-qr-code__amount-label{color:var(--bs-qr-code-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px}.bs-qr-code__amount-value{font-size:var(--bs-qr-code-amount-size);font-weight:var(--bs-font-weight-bold);line-height:var(--bs-qr-code-amount-line-height)}.bs-qr-code__url{padding:4px 10px;border-radius:var(--bs-qr-code-url-radius);background:var(--bs-qr-code-url-bg);font-size:var(--bs-font-size-xs);line-height:16px;text-align:center;white-space:nowrap}.bs-qr-code__actions{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-qr-code__actions bs-button{display:inline-flex}.bs-qr-code__actions bs-button::part(button){width:100%}.bs-qr-code__actions bs-button[part='download']{min-width:var(--bs-qr-code-download-min-width)}.bs-qr-code__actions bs-button[part='copy']{min-width:var(--bs-qr-code-copy-min-width)}:host([size='sm']) .bs-qr-code__actions bs-button{--bs-button-height-sm:var(--bs-spacing-400)}`;
+
+const BsQrCode = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsDownload = index.createEvent(this, "bsDownload");
+        this.bsCopy = index.createEvent(this, "bsCopy");
+        this.bsRetry = index.createEvent(this, "bsRetry");
+        this.bsRefresh = index.createEvent(this, "bsRefresh");
+        this.bsClose = index.createEvent(this, "bsClose");
+    }
+    /** `default` shows the URL under the code; `payment` shows the amount instead. */
+    type = 'default';
+    /** Card size: `sm`, `md` (default) or `lg`. */
+    size = 'md';
+    /** `default`, or one of the overlay states: `loading`, `error`, `expired`, `scanned`. */
+    state = 'default';
+    /** Heading text. */
+    heading = 'Share the order';
+    /** Line under the heading. */
+    description;
+    /** The link shown as text under the code (`type="default"`), and copied by Copy link. */
+    url;
+    /** The amount shown under the code (`type="payment"`), e.g. `"148,00 kr"`. */
+    amount;
+    /** Small label above the amount. */
+    amountLabel = 'Total';
+    /** Text of the expiry chip, e.g. `"Expires in 04:59"`. No chip when empty. */
+    expiry;
+    /** The code as a square matrix of modules, `true` = dark. Must be set as a JS property, not an
+     * HTML attribute -- see CONVENTIONS.md's non-string props rule. Ignored when the `code` slot is
+     * used. */
+    matrix;
+    /** Accessible name for the code image, e.g. `"QR code for order SO-10482"`. Applies to `matrix`;
+     * give a slotted `<img>` its own `alt`. */
+    codeLabel = 'QR code';
+    /** Shows a close button in the corner. */
+    closable = false;
+    /** Hides the Download and Copy link row. */
+    hideActions = false;
+    /** Hides the Download button. */
+    hideDownload = false;
+    /** Hides the Copy link button. */
+    hideCopy = false;
+    /** Label of the Download button. */
+    downloadLabel = 'Download PNG';
+    /** Label of the Copy link button. */
+    copyLabel = 'Copy link';
+    /** Label of the Retry button (`error`). */
+    retryLabel = 'Retry';
+    /** Label of the Refresh button (`expired`). */
+    refreshLabel = 'Refresh';
+    /** Text in the `loading` overlay. */
+    loadingLabel = 'Generating code';
+    /** Text in the `error` overlay. */
+    errorLabel = "Couldn't load code";
+    /** Text in the `expired` overlay. */
+    expiredLabel = 'Code expired';
+    /** Text in the `scanned` overlay. Defaults to "Payment received" for `type="payment"` and
+     * "Scanned" otherwise. */
+    scannedLabel;
+    /** Accessible name of the close button. */
+    closeLabel = 'Close';
+    /** Fires when Download is pressed. The component doesn't render a file; produce it from the code
+     * you generated. */
+    bsDownload;
+    /** Fires when Copy link is pressed, after the component tries to put `url` on the clipboard.
+     * `{ url }` is the `url` prop. */
+    bsCopy;
+    /** Fires when Retry is pressed (`error` state). Set `state` back to `loading` yourself. */
+    bsRetry;
+    /** Fires when Refresh is pressed (`expired` state). Set `state` back to `loading` yourself. */
+    bsRefresh;
+    /** Fires when the close button is pressed. */
+    bsClose;
+    /** True while something is assigned to the `logo` slot, so the white plate behind it only shows then. */
+    hasLogo = false;
+    onCopy = async () => {
+        if (this.url) {
+            try {
+                await navigator.clipboard?.writeText(this.url);
+            }
+            catch {
+                // Clipboard can be blocked (insecure context, permissions); the event still fires so the
+                // consumer can fall back.
+            }
+        }
+        this.bsCopy.emit({ url: this.url });
+    };
+    renderMatrix() {
+        const m = this.matrix;
+        if (!m || !m.length)
+            return null;
+        const n = m.length;
+        // One path, one horizontal run per row of consecutive dark modules.
+        let d = '';
+        for (let y = 0; y < n; y++) {
+            let x = 0;
+            while (x < n) {
+                if (!m[y][x]) {
+                    x++;
+                    continue;
+                }
+                const start = x;
+                while (x < n && m[y][x])
+                    x++;
+                d += `M${start} ${y}h${x - start}v1h-${x - start}z`;
+            }
+        }
+        return (index.h("svg", { class: "bs-qr-code__matrix", viewBox: `0 0 ${n} ${n}`, "shape-rendering": "crispEdges", role: "img", "aria-label": this.codeLabel }, index.h("path", { d: d, fill: "currentColor" })));
+    }
+    renderOverlay() {
+        const { state } = this;
+        if (state === 'default')
+            return null;
+        if (state === 'loading') {
+            return (index.h("div", { part: "overlay", class: "bs-qr-code__overlay bs-qr-code__overlay--loading", role: "status" }, index.h("bs-progress", { type: "indeterminate", size: "medium", ariaLabel: this.loadingLabel }), index.h("p", { class: "bs-qr-code__overlay-caption" }, this.loadingLabel)));
+        }
+        if (state === 'error') {
+            return (index.h("div", { part: "overlay", class: "bs-qr-code__overlay bs-qr-code__overlay--error", role: "alert" }, index.h("svg", { class: "bs-qr-code__status-icon bs-qr-code__status-icon--error", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, index.h("circle", { cx: "12", cy: "12", r: "9" }), index.h("path", { d: "M12 7.5V12.5" }), index.h("path", { d: "M12 16.2V16.3" })), index.h("p", { class: "bs-qr-code__overlay-text" }, this.errorLabel), index.h("bs-button", { variant: "outlined", onClick: () => this.bsRetry.emit() }, index.h(RefreshIcon, { slot: "icon" }), this.retryLabel)));
+        }
+        if (state === 'expired') {
+            return (index.h("div", { part: "overlay", class: "bs-qr-code__overlay bs-qr-code__overlay--expired", role: "status" }, index.h("svg", { class: "bs-qr-code__status-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("circle", { cx: "12", cy: "12", r: "9" }), index.h("path", { d: "M12 7V12L15 14" })), index.h("p", { class: "bs-qr-code__overlay-text" }, this.expiredLabel), index.h("bs-button", { variant: "primary", onClick: () => this.bsRefresh.emit() }, index.h(RefreshIcon, { slot: "icon" }), this.refreshLabel)));
+        }
+        return (index.h("div", { part: "overlay", class: "bs-qr-code__overlay bs-qr-code__overlay--scanned", role: "status" }, index.h("svg", { class: "bs-qr-code__status-icon bs-qr-code__status-icon--scanned", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("circle", { cx: "12", cy: "12", r: "9" }), index.h("path", { d: "M8 12.5L10.8 15.3L16 9.5" })), index.h("p", { class: "bs-qr-code__overlay-text bs-qr-code__overlay-text--strong" }, this.scannedLabel ?? (this.type === 'payment' ? 'Payment received' : 'Scanned'))));
+    }
+    render() {
+        const { state } = this;
+        const interactive = state === 'default';
+        const showActions = !this.hideActions && state !== 'scanned';
+        const buttonSize = this.size === 'sm' ? 'sm' : 'md';
+        // Figma shows the unavailable actions as filled-disabled (grey) rather than a faded outline,
+        // which is what bs-button's disabled primary looks like.
+        return (index.h("bs-card", { key: '9224eadd42ddc8b59466a301ce72bf0311e00edd', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (index.h("bs-icon-button", { key: '1fd99ef2996a876ea8fe5ae237128c8059bfccbf', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, index.h("svg", { key: 'e38bde58cd6532c3ca56b2920a42dfc157517484', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, index.h("path", { key: '6d6c93934c724a1cc0b8b66bdfd129650b1f9024', d: "M5 5L15 15M15 5L5 15" })))), index.h("div", { key: 'b8f2478eeb88a2d273f61f819679cb752e894a5a', class: "bs-qr-code__body" }, index.h("div", { key: '7e51f3bd0cde05566bb33c4fbe2478795ff3fe26', part: "head", class: "bs-qr-code__head" }, index.h("p", { key: '1d0956f6fc3e0f0658b5934a140e56ef25ae1f6b', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (index.h("p", { key: 'f43da3546accd752a856e1202baaff0043142ce4', part: "description", class: "bs-qr-code__description" }, this.description))), index.h("div", { key: '3b8dcdbb35c20e71f9c9e41ad4e2ae939e8dc0e7', part: "qr", class: "bs-qr-code__qr" }, index.h("div", { key: '3c86af5e70b746b2dc8ce9c7adf58649314a985d', part: "code", class: "bs-qr-code__code" }, index.h("slot", { key: '32d0dc8670a6045220b9546731ae5aef48d355df', name: "code" }, this.renderMatrix()), index.h("div", { key: 'ffba953b953bef8a8765955a5db4b9fba1e2cec8', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, index.h("slot", { key: 'b6e213f3a624cf8a6cf0b344c6ffc7b1f2c1be34', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (index.h("div", { key: '56155722b1cf13d21850bae43e4323ddc0ed8635', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && index.h("p", { key: 'd1f90a299ef1f8d5c896a31147612ceef4485339', class: "bs-qr-code__amount-label" }, this.amountLabel), index.h("p", { key: '40ef657d7bc01e58089bf55044fb0ef8556386ba', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (index.h("div", { key: '5d7a7d2537752948631098567c732582e9e34d92', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (index.h("bs-chip-informative", { key: 'e040513edd4c24d60e41c4e09ed0b97be11e24b3', part: "expiry", size: "md" }, index.h(TimerIcon, { key: '0c1b8052bed0bddd2e84bc3ca9929008f781213c', slot: "icon" }), this.expiry)), showActions && (index.h("div", { key: 'f30073c9b79df1aec27f361d5b94e92c8aa8f7fc', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (index.h("bs-button", { key: '12b6b333efed74dfb76360441838de2a872f3c4b', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, index.h(DownloadIcon, { key: '3c831e241288ccce97fb77a3d42c0c3de58e6734', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (index.h("bs-button", { key: '260deebae80a52c700dc2532883a706363da0caa', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, index.h(CopyIcon, { key: '8a09b1b4a06d492449f563aa73c2b2191fb29680', slot: "icon" }), this.copyLabel)))))));
+    }
+};
+const iconProps = { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true' };
+const DownloadIcon = (props) => (index.h("svg", { ...iconProps, ...props }, index.h("path", { d: "M12 4V15" }), index.h("path", { d: "M7.5 11L12 15.5L16.5 11" }), index.h("path", { d: "M4.5 19.5H19.5" })));
+const CopyIcon = (props) => (index.h("svg", { ...iconProps, ...props }, index.h("rect", { x: "8", y: "8", width: "11.5", height: "11.5", rx: "1.5" }), index.h("path", { d: "M16 8V5.5A1.5 1.5 0 0 0 14.5 4H5.5A1.5 1.5 0 0 0 4 5.5V14.5A1.5 1.5 0 0 0 5.5 16H8" })));
+const RefreshIcon = (props) => (index.h("svg", { ...iconProps, ...props }, index.h("path", { d: "M19.5 12A7.5 7.5 0 1 1 17.3 6.7" }), index.h("path", { d: "M19.5 4.5V8.5H15.5" })));
+const TimerIcon = (props) => (index.h("svg", { ...iconProps, ...props }, index.h("circle", { cx: "12", cy: "13.5", r: "7" }), index.h("path", { d: "M12 10V13.5L14 15" }), index.h("path", { d: "M9.5 3.5H14.5" })));
+BsQrCode.style = bsQrCodeCss();
+
+exports.bs_qr_code = BsQrCode;

package/dist/cjs/bs-radio.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
 const bsRadioCss = () => `:host{display:inline-block;--bs-radio-size:var(--bs-spacing-300);--bs-radio-border-width:2px;--bs-radio-state-layer-size:40px;--bs-radio-hit-area-size:48px;--bs-radio-gap:var(--bs-spacing-100)}.bs-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bs-radio-gap);font-family:inherit;cursor:pointer}.bs-radio--disabled{cursor:not-allowed}.bs-radio__input{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}.bs-radio__input:disabled{cursor:not-allowed}.bs-radio__hit-area{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-radio-hit-area-size);height:var(--bs-radio-hit-area-size)}.bs-radio__state-layer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--bs-radio-state-layer-size);height:var(--bs-radio-state-layer-size);border-radius:50%;background:var(--bs-radio-bg-default)}.bs-radio__circle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-radio-size);height:var(--bs-radio-size);border:var(--bs-radio-border-width) solid var(--bs-radio-enabled-border-default);border-radius:50%;background:transparent}.bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-default)}.bs-radio__dot{width:50%;height:50%;border-radius:50%;background:var(--bs-radio-icon-checked)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot{background:var(--bs-radio-icon-hover)}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-focus);outline:2px solid var(--bs-radio-focus-ring);outline-offset:2px}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-focus)}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-focus)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-pressed)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-pressed)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-pressed)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-disabled)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-border-disabled)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot{background:var(--bs-radio-icon-disabled)}.bs-radio__label{font-size:var(--bs-font-size-md);color:var(--bs-radio-label-default)}.bs-radio--disabled .bs-radio__label{color:var(--bs-radio-label-disabled)}@media (forced-colors: active){.bs-radio__circle{border:2px solid ButtonText;forced-color-adjust:none;background:Canvas}.bs-radio__dot{background:Highlight}}`;
 
@@ -100,7 +100,7 @@ const BsRadio = class {
         }
     };
     render() {
-        return (index.h("label", { key: 'd261741b6d1823387c7df668759910761da6afec', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, index.h("input", { key: '649a22151782938d8aff9229446060a54ce84e98', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), index.h("span", { key: '3399b1629f64b148957031eac2787dd4a673e0fe', class: "bs-radio__hit-area" }, index.h("span", { key: 'ed5e9f03d38d76b6e69e3800489ae50c48dfcd19', class: "bs-radio__state-layer" }, index.h("span", { key: 'e8384a66bf5785aef4c608dde2ff96d0208cd798', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && index.h("span", { key: 'abbe35f86db25e6c4732cf056d2f359f73938024', part: "dot", class: "bs-radio__dot" })))), index.h("span", { key: '6d29a3fd68fdaa511c66535893bedf5e49205d8c', part: "label", class: "bs-radio__label" }, index.h("slot", { key: '20d9bc9f8008cf775a520f25cef88cec5a36021a' }))));
+        return (index.h("label", { key: '62ae7bf3a50e1b0b6af17208685a5c7ffe6f5e5e', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, index.h("input", { key: '01b09c6a36c9765875d34abb96772554990ce095', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), index.h("span", { key: 'd56c108212d17d617e7abadc6189fd4b86dba233', class: "bs-radio__hit-area" }, index.h("span", { key: '63df5b0139573c1a7cbf64cf1c2e15009aeae8e2', class: "bs-radio__state-layer" }, index.h("span", { key: '43c32995245eba557d41a8c9a65ba9716d4a9766', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && index.h("span", { key: '6ef4edf491bcaeac94b639abf5ef497e98cb8119', part: "dot", class: "bs-radio__dot" })))), index.h("span", { key: '60a21c23fdca6d92cbaad1bf69bd3c3c8441d24f', part: "label", class: "bs-radio__label" }, index.h("slot", { key: 'a920122f7b88b07ef743735e50f9ad71042be308' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }