@brandsync/wc 1.9.0 → 1.11.0

package/dist/collection/components/bs-qr-code/bs-qr-code.stories.js

@@ -0,0 +1,99 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+// An illustrative 29x29 pattern with the three finder squares. It is NOT a scannable code -- in a
+// product, generate the real matrix with a QR library (e.g. `qrcode`, `qrcode-generator`) and pass it
+// as `matrix`, or put your own <img>/<svg>/<canvas> in the `code` slot.
+const N = 29;
+const demoMatrix = (() => {
+    const m = Array.from({ length: N }, (_, y) => Array.from({ length: N }, (_, x) => (x * 7 + y * 13 + x * y) % 5 < 2));
+    const finder = (ox, oy) => {
+        for (let y = 0; y < 7; y++) {
+            for (let x = 0; x < 7; x++) {
+                const edge = x === 0 || y === 0 || x === 6 || y === 6;
+                const core = x >= 2 && x <= 4 && y >= 2 && y <= 4;
+                m[oy + y][ox + x] = edge || core;
+            }
+        }
+    };
+    finder(0, 0);
+    finder(N - 7, 0);
+    finder(0, N - 7);
+    return m;
+})();
+const meta = {
+    title: 'Components/bs-qr-code',
+    parameters: { docs: { description: { component: componentDescription('bs-qr-code') } } },
+    render: args => html `
+    <bs-qr-code
+      type=${args.type}
+      size=${args.size}
+      state=${args.state}
+      heading=${args.heading}
+      description=${args.description}
+      url=${args.url}
+      amount=${args.amount}
+      expiry=${ifDefined(args.expiry || undefined)}
+      ?closable=${args.closable}
+      ?hide-actions=${args.hideActions}
+      .matrix=${demoMatrix}
+      @bsDownload=${() => console.log('bsDownload')}
+      @bsCopy=${(ev) => console.log('bsCopy', ev.detail)}
+      @bsRetry=${() => console.log('bsRetry')}
+      @bsRefresh=${() => console.log('bsRefresh')}
+      @bsClose=${() => console.log('bsClose')}
+    ></bs-qr-code>
+  `,
+    argTypes: {
+        type: { control: 'inline-radio', options: ['default', 'payment'], description: propDescription('bs-qr-code', 'type') },
+        size: { control: 'inline-radio', options: ['sm', 'md', 'lg'], description: propDescription('bs-qr-code', 'size') },
+        state: { control: 'select', options: ['default', 'loading', 'error', 'expired', 'scanned'], description: propDescription('bs-qr-code', 'state') },
+        heading: { control: 'text', description: propDescription('bs-qr-code', 'heading') },
+        description: { control: 'text', description: propDescription('bs-qr-code', 'description') },
+        url: { control: 'text', description: propDescription('bs-qr-code', 'url') },
+        amount: { control: 'text', description: propDescription('bs-qr-code', 'amount') },
+        expiry: { control: 'text', description: propDescription('bs-qr-code', 'expiry') },
+        closable: { control: 'boolean', description: propDescription('bs-qr-code', 'closable') },
+        hideActions: { control: 'boolean', description: propDescription('bs-qr-code', 'hideActions') },
+    },
+    args: {
+        type: 'default',
+        size: 'md',
+        state: 'default',
+        heading: 'Share the order',
+        description: 'Scan to open SO-10482 on your phone',
+        url: 'egsync.no/d/SO-10482',
+        amount: '148,00 kr',
+        expiry: '',
+        closable: false,
+        hideActions: false,
+    },
+};
+export default meta;
+export const Default = {};
+export const Payment = {
+    args: { type: 'payment' },
+};
+export const WithLogo = {
+    name: 'With logo',
+    render: args => html `
+    <bs-qr-code heading=${args.heading} description=${args.description} url=${args.url} .matrix=${demoMatrix}>
+      <div slot="logo" style="display: grid; place-items: center; width: 100%; height: 100%; border-radius: 4px; background: var(--bs-color-primary-default); color: var(--bs-text-on-action); font-weight: 600; font-size: 14px;">EG</div>
+    </bs-qr-code>
+  `,
+};
+export const Small = { args: { size: 'sm' } };
+export const Large = { args: { size: 'lg' } };
+export const Loading = { args: { state: 'loading' } };
+export const Error = { args: { state: 'error' } };
+export const Expired = { args: { state: 'expired', expiry: 'Expires in 04:59' } };
+export const Scanned = { args: { state: 'scanned' } };
+export const PaymentReceived = {
+    name: 'Payment received',
+    args: { type: 'payment', state: 'scanned' },
+};
+export const WithExpiry = {
+    name: 'With expiry',
+    args: { expiry: 'Expires in 04:59' },
+};
+export const Closable = { args: { closable: true } };

package/dist/collection/components/bs-radio/bs-radio.js

@@ -104,7 +104,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '84bfc39d5714d15c45936c8150b9bd7473b79574', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '0a118d5e59f4d33b0411f7be0fba08a706cda298', 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 }), h("span", { key: '889dadd67126819c3d39a5823d48be58a9c71f9f', class: "bs-radio__hit-area" }, h("span", { key: '5bbed4d44bcf4d810693b5912a90855d680540d0', class: "bs-radio__state-layer" }, h("span", { key: '509389527b876127ca456900e3bb4aa21c735f72', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '9a7e335f9646eb72fb06fb0ca9436e763c3ad278', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '2017790d3d99355b4eb93e3659c809df58c61065', part: "label", class: "bs-radio__label" }, h("slot", { key: '199450bb26f7966cdd64b04c78e3015300d793c9' }))));
+        return (h("label", { key: '62ae7bf3a50e1b0b6af17208685a5c7ffe6f5e5e', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, 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 }), h("span", { key: 'd56c108212d17d617e7abadc6189fd4b86dba233', class: "bs-radio__hit-area" }, h("span", { key: '63df5b0139573c1a7cbf64cf1c2e15009aeae8e2', class: "bs-radio__state-layer" }, h("span", { key: '43c32995245eba557d41a8c9a65ba9716d4a9766', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '6ef4edf491bcaeac94b639abf5ef497e98cb8119', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '60a21c23fdca6d92cbaad1bf69bd3c3c8441d24f', part: "label", class: "bs-radio__label" }, h("slot", { key: 'a920122f7b88b07ef743735e50f9ad71042be308' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,202 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
+const part = (root, p) => sr(root).querySelector(`[part~="${p}"]`);
+const wait = (ms) => new Promise(r => setTimeout(r, ms));
+describe('bs-session-timeout', () => {
+    it('defaults to the warning type, built on bs-card, with the warning tile', async () => {
+        const { root } = await render(h("bs-session-timeout", { secondsLeft: 112 }));
+        expect(root).toEqualAttribute('type', 'warning');
+        expect(part(root, 'container').tagName).toBe('BS-CARD');
+        expect(part(root, 'art').intent).toBe('warning');
+        expect(part(root, 'heading').textContent).toBe('You’ll be signed out soon');
+    });
+    it('is 440px wide by default (Figma) and a labelled region', async () => {
+        const { root } = await render(h("bs-session-timeout", { secondsLeft: 60 }));
+        expect(root.getBoundingClientRect().width).toBe(440);
+        const card = part(root, 'container');
+        expect(card).toEqualAttribute('role', 'region');
+        expect(card).toEqualAttribute('aria-labelledby', 'heading');
+        expect(sr(root).getElementById('heading')).not.toBeNull();
+    });
+    describe('warning', () => {
+        it('shows the time as m:ss with its unit, and a bar for the time left', async () => {
+            const { root } = await render(h("bs-session-timeout", { secondsLeft: 112, totalSeconds: 300 }));
+            expect(part(root, 'time').textContent).toBe('1:52');
+            expect(part(root, 'time')).toEqualAttribute('role', 'timer');
+            expect(part(root, 'countdown').textContent).toContain('minutes left');
+            const bar = sr(root).querySelector('bs-progress-linear');
+            expect(Math.round(bar.value)).toBe(37);
+        });
+        it('switches the unit under a minute, and pads seconds', async () => {
+            const { root } = await render(h("bs-session-timeout", { secondsLeft: 9 }));
+            expect(part(root, 'time').textContent).toBe('0:09');
+            expect(part(root, 'countdown').textContent).toContain('seconds left');
+        });
+        it('uses the starting secondsLeft as the bar total when none is given', async () => {
+            const { root, waitForChanges } = await render(h("bs-session-timeout", { secondsLeft: 100 }));
+            root.secondsLeft = 25;
+            await waitForChanges();
+            expect(Math.round(sr(root).querySelector('bs-progress-linear').value)).toBe(25);
+        });
+        it('shows the saved message only when set', async () => {
+            const a = await render(h("bs-session-timeout", { secondsLeft: 60 }));
+            expect(part(a.root, 'saved')).toBeNull();
+            const b = await render(h("bs-session-timeout", { secondsLeft: 60, savedMessage: "Draft saved." }));
+            expect(part(b.root, 'saved').textContent).toContain('Draft saved.');
+        });
+        it('has Sign out now / Stay signed in, emitting bsSecondary / bsPrimary', async () => {
+            const { root, waitForChanges } = await render(h("bs-session-timeout", { secondsLeft: 60 }));
+            expect(part(root, 'secondary').textContent).toBe('Sign out now');
+            expect(part(root, 'primary').textContent).toBe('Stay signed in');
+            const events = [];
+            root.addEventListener('bsPrimary', () => events.push('primary'));
+            root.addEventListener('bsSecondary', () => events.push('secondary'));
+            part(root, 'secondary').click();
+            part(root, 'primary').click();
+            await waitForChanges();
+            expect(events).toEqual(['secondary', 'primary']);
+        });
+        it('does not tick unless countdown is set', async () => {
+            const { root } = await render(h("bs-session-timeout", { secondsLeft: 5 }));
+            await wait(1200);
+            expect(root.secondsLeft).toBe(5);
+        });
+        it('counts down once a second when countdown is set, and emits bsExpire once at zero', async () => {
+            const { root, waitForChanges } = await render(h("bs-session-timeout", { secondsLeft: 2, countdown: true }));
+            let expired = 0;
+            root.addEventListener('bsExpire', () => expired++);
+            await wait(1150);
+            await waitForChanges();
+            expect(root.secondsLeft).toBe(1);
+            expect(part(root, 'time').textContent).toBe('0:01');
+            await wait(1150);
+            await waitForChanges();
+            expect(root.secondsLeft).toBe(0);
+            expect(expired).toBe(1);
+            await wait(1200);
+            expect(expired).toBe(1);
+        });
+        it('stops counting when countdown is switched off', async () => {
+            const { root, waitForChanges } = await render(h("bs-session-timeout", { secondsLeft: 10, countdown: true }));
+            root.countdown = false;
+            await waitForChanges();
+            await wait(1200);
+            expect(root.secondsLeft).toBe(10);
+        });
+        it('announces the time left only at 60, 30 and 10 seconds', async () => {
+            const { root, waitForChanges } = await render(h("bs-session-timeout", { secondsLeft: 11, countdown: true }));
+            const live = () => sr(root).querySelector('[aria-live="polite"]').textContent;
+            expect(live()).toBe('');
+            await wait(1150);
+            await waitForChanges();
+            expect(live()).toBe('0:10 seconds left');
+        });
+        it('lets you hide the icon tile', async () => {
+            const { root } = await render(h("bs-session-timeout", { secondsLeft: 60, hideIcon: true }));
+            expect(part(root, 'art')).toBeNull();
+        });
+    });
+    describe('signed-out', () => {
+        it('shows the lock tile, the account and Sign in again / Use a different account', async () => {
+            const { root, waitForChanges } = await render(h("bs-session-timeout", { type: "signed-out", accountName: "Mette Jensen", accountEmail: "mette.jensen@nordlys.no" }));
+            expect(part(root, 'heading').textContent).toBe('You’ve been signed out');
+            expect(part(root, 'account').textContent).toContain('Mette Jensen');
+            expect(part(root, 'account').textContent).toContain('mette.jensen@nordlys.no');
+            expect(part(root, 'primary').textContent).toBe('Sign in again');
+            expect(part(root, 'secondary').textContent).toBe('Use a different account');
+            expect(part(root, 'countdown')).toBeNull();
+            const events = [];
+            root.addEventListener('bsPrimary', () => events.push('primary'));
+            root.addEventListener('bsSecondary', () => events.push('secondary'));
+            part(root, 'primary').click();
+            part(root, 'secondary').click();
+            await waitForChanges();
+            expect(events).toEqual(['primary', 'secondary']);
+        });
+        it('derives the avatar initials from the name unless given', async () => {
+            const a = await render(h("bs-session-timeout", { type: "signed-out", accountName: "Mette Jensen" }));
+            expect(sr(a.root).querySelector('bs-avatar').initials).toBe('MJ');
+            const b = await render(h("bs-session-timeout", { type: "signed-out", accountName: "Mette Jensen", accountInitials: "SL" }));
+            expect(sr(b.root).querySelector('bs-avatar').initials).toBe('SL');
+        });
+        it('omits the account box when there is no account', async () => {
+            const { root } = await render(h("bs-session-timeout", { type: "signed-out" }));
+            expect(part(root, 'account')).toBeNull();
+        });
+    });
+    describe('confirm-identity', () => {
+        it('has a password field, Confirm, the alternatives and Cancel', async () => {
+            const { root } = await render(h("bs-session-timeout", { type: "confirm-identity" }));
+            expect(part(root, 'heading').textContent).toBe('Confirm it’s you');
+            const field = part(root, 'password');
+            expect(field.type).toBe('password');
+            expect(field.label).toBe('Password');
+            expect(part(root, 'primary').textContent).toBe('Confirm');
+            expect(Array.from(part(root, 'alternatives').querySelectorAll('bs-button')).map(b => b.textContent.trim())).toEqual(['Use passkey', 'Use BankID']);
+            expect(part(root, 'divider').textContent).toContain('or');
+            expect(part(root, 'cancel').textContent).toBe('Cancel');
+        });
+        it('emits bsPrimary with the typed password', async () => {
+            const { root, waitForChanges } = await render(h("bs-session-timeout", { type: "confirm-identity" }));
+            let detail;
+            root.addEventListener('bsPrimary', (e) => (detail = e.detail));
+            part(root, 'password').dispatchEvent(new CustomEvent('bsInput', { detail: 'hunter2' }));
+            await waitForChanges();
+            part(root, 'primary').click();
+            await waitForChanges();
+            expect(detail).toEqual({ password: 'hunter2' });
+        });
+        it('shows a password error', async () => {
+            const { root } = await render(h("bs-session-timeout", { type: "confirm-identity", passwordError: "Wrong password" }));
+            expect(part(root, 'password').error).toBe('Wrong password');
+        });
+        it('emits bsAlternative with the method id, and bsCancel', async () => {
+            const { root, waitForChanges } = await render(h("bs-session-timeout", { type: "confirm-identity" }));
+            const events = [];
+            root.addEventListener('bsAlternative', (e) => events.push(e.detail));
+            root.addEventListener('bsCancel', () => events.push('cancel'));
+            part(root, 'alternatives').querySelectorAll('bs-button')[1].click();
+            part(root, 'cancel').click();
+            await waitForChanges();
+            expect(events).toEqual([{ id: 'bankid' }, 'cancel']);
+        });
+        it('takes custom alternatives, and none hides the divider too', async () => {
+            const a = await render(h("bs-session-timeout", { type: "confirm-identity", alternatives: [{ id: 'sms', label: 'Text me a code' }] }));
+            expect(Array.from(part(a.root, 'alternatives').querySelectorAll('bs-button')).map(b => b.textContent.trim())).toEqual(['Text me a code']);
+            const b = await render(h("bs-session-timeout", { type: "confirm-identity", alternatives: [] }));
+            expect(part(b.root, 'alternatives')).toBeNull();
+            expect(part(b.root, 'divider')).toBeNull();
+        });
+        it('matches the Figma details: 16px semibold label, 16px gap to Confirm, 48px text buttons', async () => {
+            const { root } = await render(h("bs-session-timeout", { type: "confirm-identity" }));
+            await wait(200);
+            const field = part(root, 'password');
+            const label = getComputedStyle(field.shadowRoot.querySelector('.bs-input__label'));
+            expect(label.fontSize).toBe('16px');
+            expect(label.fontWeight).toBe('600');
+            const gap = part(root, 'primary').getBoundingClientRect().top - field.getBoundingClientRect().bottom;
+            expect(Math.round(gap)).toBe(16);
+            expect(part(root, 'cancel').getBoundingClientRect().height).toBe(48);
+            expect(part(root, 'primary').getBoundingClientRect().width).toBe(part(root, 'container').getBoundingClientRect().width - 32);
+        });
+        it('can hide Cancel', async () => {
+            const { root } = await render(h("bs-session-timeout", { type: "confirm-identity", cancelLabel: "" }));
+            expect(part(root, 'cancel')).toBeNull();
+        });
+    });
+    it('renders the heading at the requested level, clamped to 1-6', async () => {
+        const tags = [];
+        for (const level of [1, 2, 3, 9]) {
+            const { root } = await render(h("bs-session-timeout", { secondsLeft: 60, headingLevel: level }));
+            tags.push(part(root, 'heading').tagName);
+        }
+        expect(tags).toEqual(['H1', 'H2', 'H3', 'H6']);
+    });
+    it('lets props override the copy', async () => {
+        const { root } = await render(h("bs-session-timeout", { secondsLeft: 60, heading: "Heads up", description: "Custom.", primaryLabel: "Keep going", secondaryLabel: "" }));
+        expect(part(root, 'heading').textContent).toBe('Heads up');
+        expect(part(root, 'description').textContent).toBe('Custom.');
+        expect(part(root, 'primary').textContent).toBe('Keep going');
+        expect(part(root, 'secondary')).toBeNull();
+    });
+});

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

@@ -0,0 +1,239 @@
+/**
+ * @prop --bs-session-timeout-width: Card width. 440px (Figma); never narrower than the min or wider than the max below.
+ * @prop --bs-session-timeout-min-width: Minimum card width. 380px (Figma).
+ * @prop --bs-session-timeout-max-width: Maximum card width. 560px (Figma).
+ * @prop --bs-session-timeout-bg: Card background. Aliased to --bs-paper-bg-base (the `bs-card` base surface).
+ * @prop --bs-session-timeout-radius: Card corner radius. Aliased to --bs-border-radius-150 (12px).
+ * @prop --bs-session-timeout-padding: Card padding. Aliased to --bs-spacing-200 (16px).
+ * @prop --bs-session-timeout-gap: Gap between the card's rows. Aliased to --bs-spacing-150 (12px).
+ * @prop --bs-session-timeout-shadow: Card shadow. 0 8px 8px --bs-elevation-higher (Figma).
+ * @prop --bs-session-timeout-color: Heading and value colour. Aliased to --bs-text-default.
+ * @prop --bs-session-timeout-color-secondary: Paragraph, unit and note colour. Aliased to --bs-text-secondary.
+ * @prop --bs-session-timeout-countdown-bg: Background of the countdown box. Aliased to --bs-surface-container.
+ * @prop --bs-session-timeout-countdown-fill: Colour of the draining bar. Aliased to --bs-color-warning-default.
+ * @prop --bs-session-timeout-countdown-track: Track behind the bar. Aliased to --bs-surface-hover.
+ * @prop --bs-session-timeout-rule: Colour of the divider lines and the account box border. Aliased to --bs-border-default.
+ */
+:host {
+  display: block;
+  width: var(--bs-session-timeout-width);
+  min-width: var(--bs-session-timeout-min-width);
+  max-width: var(--bs-session-timeout-max-width);
+
+  --bs-session-timeout-width: 440px;
+  --bs-session-timeout-min-width: 380px;
+  --bs-session-timeout-max-width: 560px;
+  --bs-session-timeout-bg: var(--bs-paper-bg-base);
+  --bs-session-timeout-radius: var(--bs-border-radius-150);
+  --bs-session-timeout-padding: var(--bs-spacing-200);
+  --bs-session-timeout-gap: var(--bs-spacing-150);
+  --bs-session-timeout-shadow: 0 8px 8px var(--bs-elevation-higher);
+  --bs-session-timeout-color: var(--bs-text-default);
+  --bs-session-timeout-color-secondary: var(--bs-text-secondary);
+  --bs-session-timeout-countdown-bg: var(--bs-surface-container);
+  --bs-session-timeout-countdown-fill: var(--bs-color-warning-default);
+  --bs-session-timeout-countdown-track: var(--bs-surface-hover);
+  --bs-session-timeout-rule: var(--bs-border-default);
+}
+
+/* bs-card supplies the surface; this only sets how it looks here. */
+.bs-session-timeout {
+  --bs-card-bg: var(--bs-session-timeout-bg);
+  --bs-card-radius: var(--bs-session-timeout-radius);
+  --bs-card-padding: var(--bs-session-timeout-padding);
+  --bs-card-shadow: var(--bs-session-timeout-shadow);
+  color: var(--bs-session-timeout-color);
+}
+
+.bs-session-timeout__body {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--bs-session-timeout-gap);
+}
+
+bs-icon-tile {
+  align-self: flex-start;
+}
+
+.bs-session-timeout__glyph,
+::slotted([slot='icon']) {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-session-timeout__heading-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.bs-session-timeout__heading {
+  margin: 0;
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 32px;
+}
+
+.bs-session-timeout__description {
+  margin: 0;
+  color: var(--bs-session-timeout-color-secondary);
+  font-size: var(--bs-font-size-md);
+  line-height: 24px;
+}
+
+/* --- warning -------------------------------------------------------------------------------- */
+.bs-session-timeout__countdown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-200);
+  border-radius: var(--bs-border-radius-100);
+  background: var(--bs-session-timeout-countdown-bg);
+}
+
+/* Set on the bar itself: bs-progress-linear declares its own defaults on :host, which beat anything
+   merely inherited from an ancestor. */
+.bs-session-timeout__countdown bs-progress-linear {
+  --bs-progress-linear-fill: var(--bs-session-timeout-countdown-fill);
+  --bs-progress-linear-track: var(--bs-session-timeout-countdown-track);
+}
+
+.bs-session-timeout__time-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-session-timeout__time {
+  font-size: var(--bs-font-size-3xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 40px;
+  font-variant-numeric: tabular-nums;
+}
+
+.bs-session-timeout__unit {
+  padding-bottom: 6px;
+  color: var(--bs-session-timeout-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-session-timeout__saved {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  margin: 0;
+  color: var(--bs-session-timeout-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-session-timeout__saved-icon {
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
+.bs-session-timeout__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-session-timeout__actions bs-button,
+.bs-session-timeout__alternatives bs-button,
+.bs-session-timeout__block-button {
+  --bs-button-height-md: var(--bs-spacing-550);
+}
+
+/* --- signed-out ----------------------------------------------------------------------------- */
+.bs-session-timeout__account {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-200);
+  padding: var(--bs-spacing-150) var(--bs-spacing-200);
+  border: 1px solid var(--bs-session-timeout-rule);
+  border-radius: var(--bs-border-radius-100);
+}
+
+.bs-session-timeout__account-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-25);
+  min-width: 0;
+  line-height: 24px;
+}
+
+.bs-session-timeout__account-name {
+  font-weight: var(--bs-font-weight-semibold);
+}
+
+.bs-session-timeout__account-email {
+  overflow-wrap: anywhere;
+}
+
+.bs-session-timeout__actions--stacked {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.bs-session-timeout__block-button,
+.bs-session-timeout__alternatives bs-button,
+.bs-session-timeout__actions--stacked bs-button {
+  --bs-button-width: 100%;
+}
+
+/* The Figma's "text" buttons (Use a different account, Cancel) are blue. */
+.bs-session-timeout__text-button {
+  --bs-button-subtle-color: var(--bs-text-action);
+  /* Figma: the text buttons are 48px high (bs-button's lg is 56px). */
+  --bs-button-height-lg: var(--bs-spacing-600);
+}
+
+/* --- confirm-identity ----------------------------------------------------------------------- */
+/* Figma: 16px between the password field and Confirm (the card's rows are 12px apart), and the label is
+   16px semibold with a 24px line (bs-input's own default is 14px medium). */
+.bs-session-timeout__password {
+  display: block;
+  --bs-input-label-font-size: var(--bs-font-size-md);
+  --bs-input-label-font-weight: var(--bs-font-weight-semibold);
+  --bs-input-label-line-height: calc(var(--bs-line-height-body-md) * 1px);
+  margin-bottom: calc(var(--bs-spacing-200) - var(--bs-session-timeout-gap));
+}
+
+.bs-session-timeout__divider {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  align-self: center;
+  width: 320px;
+  max-width: 100%;
+  color: var(--bs-session-timeout-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-session-timeout__rule {
+  flex: 1 1 0;
+  height: 1px;
+  background: var(--bs-session-timeout-rule);
+}
+
+.bs-session-timeout__alternatives {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: var(--bs-spacing-100);
+}
+
+.bs-session-timeout__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}