@brandsync/wc 1.10.0 → 1.11.0

package/dist/collection/components/bs-session-timeout/bs-session-timeout.js

@@ -0,0 +1,772 @@
+import { h } from "@stencil/core";
+/**
+ * The three moments around an expiring session, as one card. Matches the Figma "Session timeout"
+ * component's three types:
+ *
+ * - `warning` -- "You'll be signed out soon": a live countdown with a draining bar, an optional
+ *   "your work is saved" note, and Sign out now / Stay signed in.
+ * - `signed-out` -- "You've been signed out": who was signed in, with Sign in again and Use a different
+ *   account.
+ * - `confirm-identity` -- "Confirm it's you": a fresh password check before a sensitive action, with
+ *   passkey / BankID alternatives and Cancel.
+ *
+ * The component never signs anyone in or out. It shows the state and emits `bsPrimary`, `bsSecondary`,
+ * `bsAlternative`, `bsCancel` and `bsExpire`; your app talks to the identity provider.
+ *
+ * **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
+ * `bs-progress-linear` (the countdown bar), `bs-avatar` (the signed-in account), `bs-input` (the
+ * password field).
+ *
+ * ## When to use
+ * - Warning someone, before it happens, that an inactivity timeout is about to end their session.
+ * - Telling someone their session ended, and letting them pick up where they left off.
+ * - Asking for a fresh credential before a sensitive action.
+ *
+ * ## When not to use
+ * - A first-time sign-in page -- this assumes there was a session.
+ * - Anything that is not about the session or the user's identity -- use `bs-dialog`.
+ *
+ * ## Accessibility
+ * The card is a labelled region. The countdown is a `timer` and is *not* announced every second; a polite
+ * live region announces the time left at 60, 30 and 10 seconds instead. Wrap the card in your own modal
+ * (`bs-dialog`) if the warning must trap focus.
+ *
+ * @slot icon - Replaces the default glyph in the icon tile. Draw it with `currentColor`.
+ * @part container - The card.
+ * @part art - The icon tile.
+ * @part heading - The heading.
+ * @part description - The paragraph under it.
+ * @part countdown - The countdown box (`warning`).
+ * @part time - The big `m:ss` time (`warning`).
+ * @part saved - The "work is saved" note (`warning`).
+ * @part account - The signed-in account summary (`signed-out`).
+ * @part password - The password field (`confirm-identity`).
+ * @part divider - The "or" divider (`confirm-identity`).
+ * @part alternatives - The alternative sign-in buttons (`confirm-identity`).
+ * @part actions - The action buttons.
+ * @part primary - The primary button.
+ * @part secondary - The secondary button.
+ * @part cancel - The Cancel button (`confirm-identity`).
+ */
+export class BsSessionTimeout {
+    el;
+    /** Which moment: `warning`, `signed-out` or `confirm-identity`. */
+    type = 'warning';
+    /** Heading. Defaults per `type`. */
+    heading;
+    /** HTML heading level, 1-6. */
+    headingLevel = 2;
+    /** Paragraph under the heading. Defaults per `type`. */
+    description;
+    /** Hides the icon tile. */
+    hideIcon = false;
+    /** Label of the primary button. Defaults per `type` ("Stay signed in", "Sign in again", "Confirm"). */
+    primaryLabel;
+    /** Label of the secondary button. Defaults per `type` ("Sign out now", "Use a different account"); none for
+     * `confirm-identity`. Set to an empty string to hide it. */
+    secondaryLabel;
+    // --- warning -------------------------------------------------------------------------------
+    /** Seconds left before the session ends (`warning`). Mutable: with `countdown` the component
+     * decrements it itself; otherwise drive it from your own timer. */
+    secondsLeft = 0;
+    /** Length of the warning window in seconds, for the bar: it shows `secondsLeft / totalSeconds`.
+     * Defaults to the `secondsLeft` it first had. */
+    totalSeconds = 0;
+    /** Count `secondsLeft` down once a second (`warning`), firing `bsExpire` at zero. */
+    countdown = false;
+    /** Text next to the time while a minute or more is left. */
+    timeLeftLabel = 'minutes left';
+    /** Text next to the time under a minute. */
+    secondsLeftLabel = 'seconds left';
+    /** Note under the countdown, e.g. "Your draft of INV-2041 is saved automatically." Hidden when empty. */
+    savedMessage;
+    // --- signed-out ----------------------------------------------------------------------------
+    /** Name of the account that was signed in (`signed-out`). */
+    accountName;
+    /** Email of the account that was signed in (`signed-out`). */
+    accountEmail;
+    /** Initials in the avatar (`signed-out`). Derived from `accountName` when not set. */
+    accountInitials;
+    // --- confirm-identity ----------------------------------------------------------------------
+    /** Label of the password field. */
+    passwordLabel = 'Password';
+    /** Error shown under the password field, e.g. after a wrong password. */
+    passwordError;
+    /** Label of the divider between the password and the alternatives. */
+    dividerLabel = 'or';
+    /** Other ways to confirm, shown as outlined buttons under the divider: `[{ id, label, icon? }]`.
+     * Defaults to a passkey and a BankID button. Must be set as a JS property, not an HTML attribute --
+     * see CONVENTIONS.md's non-string props rule. Set `[]` to hide them. */
+    alternatives = [
+        { id: 'passkey', label: 'Use passkey', icon: 'fingerprint' },
+        { id: 'bankid', label: 'Use BankID', icon: 'key' },
+    ];
+    /** Label of the Cancel button (`confirm-identity`). Set to an empty string to hide it. */
+    cancelLabel = 'Cancel';
+    /** Fires when the primary button is pressed. For `confirm-identity` the detail is
+     * `{ password }`; otherwise it is empty. */
+    bsPrimary;
+    /** Fires when the secondary button is pressed. */
+    bsSecondary;
+    /** Fires when an alternative method is pressed (`confirm-identity`): `{ id }`. */
+    bsAlternative;
+    /** Fires when Cancel is pressed (`confirm-identity`). */
+    bsCancel;
+    /** Fires once when `countdown` reaches zero. */
+    bsExpire;
+    password = '';
+    announcement = '';
+    initialTotal = 0;
+    timer;
+    componentWillLoad() {
+        this.initialTotal = this.secondsLeft;
+    }
+    componentDidLoad() {
+        this.syncTimer();
+    }
+    disconnectedCallback() {
+        this.stopTimer();
+    }
+    connectedCallback() {
+        // Re-attached to the DOM after disconnectedCallback stopped the timer.
+        if (this.timer === undefined && this.el.isConnected)
+            this.syncTimer();
+    }
+    onTimerInputsChange() {
+        this.syncTimer();
+    }
+    stopTimer() {
+        if (this.timer !== undefined)
+            clearInterval(this.timer);
+        this.timer = undefined;
+    }
+    syncTimer() {
+        this.stopTimer();
+        if (!this.countdown || this.type !== 'warning' || this.secondsLeft <= 0)
+            return;
+        this.timer = setInterval(() => this.tick(), 1000);
+    }
+    tick() {
+        if (this.secondsLeft <= 0)
+            return;
+        this.secondsLeft = this.secondsLeft - 1;
+        // Announce sparingly: every second would drown a screen reader.
+        if ([60, 30, 10].includes(this.secondsLeft)) {
+            this.announcement = `${formatTime(this.secondsLeft)} ${this.secondsLeft >= 60 ? this.timeLeftLabel : this.secondsLeftLabel}`;
+        }
+        if (this.secondsLeft <= 0) {
+            this.stopTimer();
+            this.bsExpire.emit();
+        }
+    }
+    get defaults() {
+        return DEFAULTS[this.type] ?? DEFAULTS.warning;
+    }
+    // --- rendering ---------------------------------------------------------------------------
+    renderHeading(heading, description) {
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 2));
+        return (h("div", { class: "bs-session-timeout__heading-group" }, h(`h${level}`, { part: 'heading', id: 'heading', class: { 'bs-session-timeout__heading': true } }, heading), description && (h("p", { part: "description", class: "bs-session-timeout__description" }, description))));
+    }
+    renderWarning() {
+        const total = this.totalSeconds > 0 ? this.totalSeconds : this.initialTotal || this.secondsLeft;
+        const percent = total > 0 ? Math.max(0, Math.min(100, (this.secondsLeft / total) * 100)) : 0;
+        const unit = this.secondsLeft >= 60 ? this.timeLeftLabel : this.secondsLeftLabel;
+        return (h("div", { part: "countdown", class: "bs-session-timeout__countdown" }, h("div", { class: "bs-session-timeout__time-row" }, h("span", { part: "time", class: "bs-session-timeout__time", role: "timer" }, formatTime(this.secondsLeft)), h("span", { class: "bs-session-timeout__unit" }, unit)), h("bs-progress-linear", { type: "determinate", size: "large", value: percent, showLabel: false, ariaLabel: `${formatTime(this.secondsLeft)} ${unit}` })));
+    }
+    renderAccount() {
+        const name = this.accountName ?? '';
+        const initials = this.accountInitials ?? name.split(/\s+/).filter(Boolean).slice(0, 2).map(w => w[0].toUpperCase()).join('');
+        if (!name && !this.accountEmail)
+            return null;
+        return (h("div", { part: "account", class: "bs-session-timeout__account" }, h("bs-avatar", { type: "initials", size: "lg", initials: initials, ariaLabel: name || this.accountEmail }), h("div", { class: "bs-session-timeout__account-text" }, name && h("span", { class: "bs-session-timeout__account-name" }, name), this.accountEmail && h("span", { class: "bs-session-timeout__account-email" }, this.accountEmail))));
+    }
+    renderConfirm() {
+        const alternatives = this.alternatives ?? [];
+        return [
+            h("bs-input", { part: "password", class: "bs-session-timeout__password", type: "password", label: this.passwordLabel, value: this.password, error: this.passwordError, onBsInput: (ev) => (this.password = ev.detail), onBsChange: (ev) => (this.password = ev.detail) }),
+            h("bs-button", { part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit({ password: this.password }) }, this.primaryLabel ?? this.defaults.primary),
+            alternatives.length > 0 && (h("div", { part: "divider", class: "bs-session-timeout__divider", role: "separator" }, h("span", { class: "bs-session-timeout__rule" }), h("span", { class: "bs-session-timeout__divider-label" }, this.dividerLabel), h("span", { class: "bs-session-timeout__rule" }))),
+            alternatives.length > 0 && (h("div", { part: "alternatives", class: "bs-session-timeout__alternatives" }, alternatives.map(a => (h("bs-button", { key: a.id, variant: "outlined", onClick: () => this.bsAlternative.emit({ id: a.id }) }, a.icon === 'key' ? h(KeyIcon, { slot: "icon" }) : h(FingerprintIcon, { slot: "icon" }), a.label))))),
+            this.cancelLabel && (h("bs-button", { part: "cancel", class: "bs-session-timeout__block-button bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsCancel.emit() }, this.cancelLabel)),
+        ];
+    }
+    render() {
+        const d = this.defaults;
+        const heading = this.heading ?? d.heading;
+        const description = this.description ?? d.description;
+        const primary = this.primaryLabel ?? d.primary;
+        const secondary = this.secondaryLabel ?? d.secondary;
+        return (h("bs-card", { key: '45a056eabc2f536128ee6adbc6104d76793301f4', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: '035795cb4b5b0252212270236f048e3216d5d401', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '857db99f58d07483d3c7dadd95e5951a645d0c59', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '41504daf4751677d9b1df0d211e719d8f441f5b2', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: '8ba10b3921db4b3cedbeb3d45bddfb89425bbdbb', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: '44ea938fca553c67ae23628833471ceb98e63b06' }), h("span", { key: '672ebc96828437ffbc67711082fd7018611153b7' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '94221156fe30010bd0fbe4fb0146c95feceab50f', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: '09b14d30bc185a4644902e52100f0493da6109a0', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: 'be381ed4be453efd306b28da3e1f4b7f0740c024', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: '6b3b3622809165f70d83c68db409e2373ea1008e', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: 'f03d85c00ce0c18e14e26d2b4332ddb987b93f9e', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'a9bf95d13955110f7f36561b9acc3c89a5862de5', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: '69ada1eed62f93587b2c2f45aa1d3ea933ba682f', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
+    }
+    static get is() { return "bs-session-timeout"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-session-timeout.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-session-timeout.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSessionTimeoutType",
+                    "resolved": "\"confirm-identity\" | \"signed-out\" | \"warning\"",
+                    "references": {
+                        "BsSessionTimeoutType": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-session-timeout/bs-session-timeout.tsx",
+                            "id": "src/components/bs-session-timeout/bs-session-timeout.tsx::BsSessionTimeoutType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which moment: `warning`, `signed-out` or `confirm-identity`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'warning'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading. Defaults per `type`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "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"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Paragraph under the heading. Defaults per `type`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "hideIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the icon tile."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-icon",
+                "defaultValue": "false"
+            },
+            "primaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the primary button. Defaults per `type` (\"Stay signed in\", \"Sign in again\", \"Confirm\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-label"
+            },
+            "secondaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the secondary button. Defaults per `type` (\"Sign out now\", \"Use a different account\"); none for\n`confirm-identity`. Set to an empty string to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label"
+            },
+            "secondsLeft": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Seconds left before the session ends (`warning`). Mutable: with `countdown` the component\ndecrements it itself; otherwise drive it from your own timer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "seconds-left",
+                "defaultValue": "0"
+            },
+            "totalSeconds": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Length of the warning window in seconds, for the bar: it shows `secondsLeft / totalSeconds`.\nDefaults to the `secondsLeft` it first had."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-seconds",
+                "defaultValue": "0"
+            },
+            "countdown": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Count `secondsLeft` down once a second (`warning`), firing `bsExpire` at zero."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "countdown",
+                "defaultValue": "false"
+            },
+            "timeLeftLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text next to the time while a minute or more is left."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time-left-label",
+                "defaultValue": "'minutes left'"
+            },
+            "secondsLeftLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text next to the time under a minute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "seconds-left-label",
+                "defaultValue": "'seconds left'"
+            },
+            "savedMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Note under the countdown, e.g. \"Your draft of INV-2041 is saved automatically.\" Hidden when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "saved-message"
+            },
+            "accountName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the account that was signed in (`signed-out`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "account-name"
+            },
+            "accountEmail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Email of the account that was signed in (`signed-out`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "account-email"
+            },
+            "accountInitials": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initials in the avatar (`signed-out`). Derived from `accountName` when not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "account-initials"
+            },
+            "passwordLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the password field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "password-label",
+                "defaultValue": "'Password'"
+            },
+            "passwordError": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error shown under the password field, e.g. after a wrong password."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "password-error"
+            },
+            "dividerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the divider between the password and the alternatives."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider-label",
+                "defaultValue": "'or'"
+            },
+            "alternatives": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSessionTimeoutAlternative[]",
+                    "resolved": "BsSessionTimeoutAlternative[]",
+                    "references": {
+                        "BsSessionTimeoutAlternative": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-session-timeout/bs-session-timeout.tsx",
+                            "id": "src/components/bs-session-timeout/bs-session-timeout.tsx::BsSessionTimeoutAlternative"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Other ways to confirm, shown as outlined buttons under the divider: `[{ id, label, icon? }]`.\nDefaults to a passkey and a BankID button. Must be set as a JS property, not an HTML attribute --\nsee CONVENTIONS.md's non-string props rule. Set `[]` to hide them."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n    { id: 'passkey', label: 'Use passkey', icon: 'fingerprint' },\n    { id: 'bankid', label: 'Use BankID', icon: 'key' },\n  ]"
+            },
+            "cancelLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Cancel button (`confirm-identity`). Set to an empty string to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-label",
+                "defaultValue": "'Cancel'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "password": {},
+            "announcement": {},
+            "initialTotal": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsPrimary",
+                "name": "bsPrimary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the primary button is pressed. For `confirm-identity` the detail is\n`{ password }`; otherwise it is empty."
+                },
+                "complexType": {
+                    "original": "{ password?: string } | void",
+                    "resolved": "void | { password?: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSecondary",
+                "name": "bsSecondary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the secondary button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsAlternative",
+                "name": "bsAlternative",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when an alternative method is pressed (`confirm-identity`): `{ id }`."
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsCancel",
+                "name": "bsCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Cancel is pressed (`confirm-identity`)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsExpire",
+                "name": "bsExpire",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires once when `countdown` reaches zero."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "countdown",
+                "methodName": "onTimerInputsChange"
+            }, {
+                "propName": "type",
+                "methodName": "onTimerInputsChange"
+            }];
+    }
+}
+function pad(n) {
+    return String(n).padStart(2, '0');
+}
+function formatTime(total) {
+    const s = Math.max(0, Math.trunc(Number(total)) || 0);
+    return `${Math.floor(s / 60)}:${pad(s % 60)}`;
+}
+const svg = (children) => (props) => (h("svg", { class: "bs-session-timeout__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 TimerIcon = svg(h("g", null, h("circle", { cx: "12", cy: "13.5", r: "7" }), h("path", { d: "M12 10V13.5L14 15" }), h("path", { d: "M9.5 3.5H14.5" })));
+const LockIcon = svg(h("g", null, h("rect", { x: "5", y: "10.5", width: "14", height: "9.5", rx: "1.5" }), h("path", { d: "M8.5 10.5V8A3.5 3.5 0 0 1 15.5 8V10.5" })));
+const FingerprintIcon = svg(h("g", null, h("path", { d: "M6 10A6 6 0 0 1 18 10" }), h("path", { d: "M9 20C10 18 10 16 10 13A2 2 0 0 1 14 13C14 16 13.5 18.5 12.5 20.5" }), h("path", { d: "M6 13C6 15.5 5.5 17.5 4.5 19.5" }), h("path", { d: "M18 13C18 15.5 17.5 18 16.5 20" }), h("path", { d: "M12 13C12 15 11.5 17 10.8 18.5" })));
+const KeyIcon = svg(h("g", null, h("circle", { cx: "8", cy: "15", r: "4" }), h("path", { d: "M11 12L19.5 3.5" }), h("path", { d: "M16 7L19 10" })));
+const InfoIcon = () => (h("svg", { class: "bs-session-timeout__saved-icon", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.2" }), h("path", { d: "M8 7.2V11" }), h("path", { d: "M8 5V5.1" })));
+const DEFAULTS = {
+    warning: {
+        intent: 'warning',
+        heading: 'You’ll be signed out soon',
+        description: 'For your security, we sign you out after a period without activity.',
+        primary: 'Stay signed in',
+        secondary: 'Sign out now',
+        glyph: () => h(TimerIcon, null),
+    },
+    'signed-out': {
+        intent: 'default',
+        heading: 'You’ve been signed out',
+        description: 'You were inactive for a while. Your work was saved and will be there when you sign in.',
+        primary: 'Sign in again',
+        secondary: 'Use a different account',
+        glyph: () => h(LockIcon, null),
+    },
+    'confirm-identity': {
+        intent: 'default',
+        heading: 'Confirm it’s you',
+        description: 'This action needs a fresh sign-in.',
+        primary: 'Confirm',
+        secondary: '',
+        glyph: () => h(FingerprintIcon, null),
+    },
+};