@brandsync/wc 1.9.0 → 1.11.0

package/dist/collection/components/bs-datepicker/bs-datepicker.stories.js

@@ -0,0 +1,64 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-datepicker',
+    parameters: { docs: { description: { component: componentDescription('bs-datepicker') } } },
+    render: args => html `
+    <bs-datepicker
+      ?range=${args.range}
+      value=${args.value}
+      start=${args.start}
+      end=${args.end}
+      min=${ifDefined(args.min || undefined)}
+      max=${ifDefined(args.max || undefined)}
+      locale=${args.locale}
+      first-day-of-week=${args.firstDayOfWeek}
+      @bsChange=${(ev) => console.log('bsChange', ev.detail)}
+    ></bs-datepicker>
+  `,
+    argTypes: {
+        range: { control: 'boolean', description: propDescription('bs-datepicker', 'range') },
+        value: { control: 'text', description: propDescription('bs-datepicker', 'value') },
+        start: { control: 'text', description: propDescription('bs-datepicker', 'start') },
+        end: { control: 'text', description: propDescription('bs-datepicker', 'end') },
+        min: { control: 'text', description: propDescription('bs-datepicker', 'min') },
+        max: { control: 'text', description: propDescription('bs-datepicker', 'max') },
+        locale: { control: 'text', description: propDescription('bs-datepicker', 'locale') },
+        firstDayOfWeek: { control: { type: 'number', min: 0, max: 6 }, description: propDescription('bs-datepicker', 'firstDayOfWeek') },
+    },
+    args: {
+        range: false,
+        value: '2026-09-16',
+        start: '',
+        end: '',
+        min: '',
+        max: '',
+        locale: 'en-GB',
+        firstDayOfWeek: 0,
+    },
+};
+export default meta;
+// Figma "Default" type: month/year dropdowns, 16 September 2026 selected.
+export const Default = {};
+// Figma "Range" type: start/end fields, Mon-Sat of one week selected. The Figma's own dates (11-16
+// September) don't line up with the real 2026 calendar, so this uses 14-19 September -- the same
+// Monday-to-Saturday shape, so the band sits in a single row like the design.
+export const Range = {
+    args: { range: true, value: '', start: '2026-09-14', end: '2026-09-19' },
+};
+export const RangeAcrossWeeks = {
+    name: 'Range across weeks',
+    args: { range: true, value: '', start: '2026-09-11', end: '2026-09-24' },
+};
+export const MinMax = {
+    name: 'Min and max',
+    args: { min: '2026-09-10', max: '2026-09-25' },
+};
+export const MondayFirst = {
+    name: 'Week starts on Monday',
+    args: { firstDayOfWeek: 1 },
+};
+export const Danish = {
+    args: { locale: 'da-DK', firstDayOfWeek: 1 },
+};

package/dist/collection/components/bs-error-page/bs-error-page.cmp.test.js

@@ -0,0 +1,99 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
+const part = (root, p) => sr(root).querySelector(`[part~="${p}"]`);
+const TYPES = [
+    ['not-found', '404', 'Page not found', 'Go to Overview', 'Search'],
+    ['server-error', '500', 'Something went wrong on our side', 'Try again', 'Contact support'],
+    ['no-access', '403', 'You don’t have access', 'Request access', 'Go back'],
+    ['maintenance', 'Maintenance', 'We’re upgrading the system', 'View system status', undefined],
+    ['offline', 'Offline', 'No internet connection', 'Try again', undefined],
+];
+describe('bs-error-page', () => {
+    it('defaults to the not-found page', async () => {
+        const { root } = await render(h("bs-error-page", null));
+        expect(root).toEqualAttribute('type', 'not-found');
+        expect(part(root, 'heading').textContent).toBe('Page not found');
+    });
+    it.each(TYPES)('%s shows its code, heading and buttons (Figma)', async (type, code, heading, primary, secondary) => {
+        const { root } = await render(h("bs-error-page", { type: type }));
+        expect(part(root, 'code').textContent).toBe(code);
+        expect(part(root, 'heading').textContent).toBe(heading);
+        expect(part(root, 'primary').textContent).toBe(primary);
+        if (secondary)
+            expect(part(root, 'secondary').textContent).toBe(secondary);
+        else
+            expect(part(root, 'secondary')).toBeNull();
+        expect(part(root, 'description').textContent.length).toBeGreaterThan(0);
+    });
+    it('tints the icon tile per type: info, error, neutral, warning, warning', async () => {
+        const intents = [];
+        for (const [type] of TYPES) {
+            const { root } = await render(h("bs-error-page", { type: type }));
+            intents.push(part(root, 'art').intent);
+        }
+        expect(intents).toEqual(['default', 'error', 'default', 'warning', 'warning']);
+    });
+    it('uses the info container tint for not-found (Figma) rather than the tile default', async () => {
+        const { root } = await render(h("bs-error-page", { type: "not-found" }));
+        const tile = part(root, 'art');
+        const bg = getComputedStyle(tile.shadowRoot.querySelector('[part="container"]')).backgroundColor;
+        const other = await render(h("bs-error-page", { type: "no-access" }));
+        const otherBg = getComputedStyle(part(other.root, 'art').shadowRoot.querySelector('[part="container"]')).backgroundColor;
+        expect(bg).not.toBe(otherBg);
+    });
+    it('draws a different default glyph per type', async () => {
+        const glyphs = new Set();
+        for (const [type] of TYPES) {
+            const { root } = await render(h("bs-error-page", { type: type }));
+            glyphs.add(sr(root).querySelector('svg.bs-error-page__glyph').innerHTML);
+        }
+        expect(glyphs.size).toBe(5);
+    });
+    it('lets props override the copy, and an empty string hides a piece', async () => {
+        const { root } = await render(h("bs-error-page", { type: "server-error", code: "", heading: "Oops", description: "Custom.", primaryLabel: "Reload", secondaryLabel: "", reference: "Error ID: 1" }));
+        expect(part(root, 'code')).toBeNull();
+        expect(part(root, 'heading').textContent).toBe('Oops');
+        expect(part(root, 'description').textContent).toBe('Custom.');
+        expect(part(root, 'primary').textContent).toBe('Reload');
+        expect(part(root, 'secondary')).toBeNull();
+        expect(part(root, 'reference').textContent).toBe('Error ID: 1');
+    });
+    it('hides the whole button row when both labels are empty', async () => {
+        const { root } = await render(h("bs-error-page", { primaryLabel: "", secondaryLabel: "" }));
+        expect(part(root, 'actions')).toBeNull();
+    });
+    it('emits bsPrimary and bsSecondary', async () => {
+        const { root, waitForChanges } = await render(h("bs-error-page", null));
+        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('renders the heading at the requested level, clamped to 1-6', async () => {
+        const levels = [];
+        for (const lvl of [1, 2, 4, 9, 0]) {
+            const { root } = await render(h("bs-error-page", { headingLevel: lvl }));
+            levels.push(part(root, 'heading').tagName);
+        }
+        expect(levels).toEqual(['H1', 'H2', 'H4', 'H6', 'H1']);
+    });
+    it('replaces the glyph through the icon slot', async () => {
+        const { root } = await render(h("bs-error-page", null, h("svg", { slot: "icon", id: "mine", viewBox: "0 0 24 24" }, h("path", { d: "M0 0" }))));
+        const slot = sr(root).querySelector('slot[name="icon"]');
+        expect(slot.assignedElements().map(e => e.id)).toEqual(['mine']);
+    });
+    it('is at least 440px tall (Figma) and fills its width', async () => {
+        const { root } = await render(h("div", { style: { width: '640px' } }, h("bs-error-page", null)));
+        const page = root.querySelector('bs-error-page');
+        const box = page.getBoundingClientRect();
+        expect(box.height).toBeGreaterThanOrEqual(440);
+        expect(box.width).toBe(640);
+    });
+    it('is built on bs-card', async () => {
+        const { root } = await render(h("bs-error-page", null));
+        expect(part(root, 'container').tagName).toBe('BS-CARD');
+    });
+});

package/dist/collection/components/bs-error-page/bs-error-page.css

@@ -0,0 +1,105 @@
+/**
+ * @prop --bs-error-page-bg: Background. Aliased to --bs-paper-bg-base (the `bs-card` base surface).
+ * @prop --bs-error-page-radius: Corner radius. Aliased to --bs-border-radius-100.
+ * @prop --bs-error-page-padding: Padding around the content. Aliased to --bs-spacing-400 (32px, Figma).
+ * @prop --bs-error-page-min-height: Minimum height of the block; the content is centred in it. 440px (Figma).
+ * @prop --bs-error-page-gap: Gap between the rows. 12px (Figma).
+ * @prop --bs-error-page-description-width: Max width of the paragraph. 420px (Figma).
+ * @prop --bs-error-page-color: Heading colour. Aliased to --bs-text-default.
+ * @prop --bs-error-page-color-secondary: Code label and paragraph colour. Aliased to --bs-text-secondary.
+ * @prop --bs-error-page-color-muted: Reference line colour. Aliased to --bs-text-muted.
+ * @prop --bs-error-page-info-bg: Icon tile background for `not-found`. Aliased to --bs-color-info-container (Figma uses this step; `bs-icon-tile`'s own information tint is one step lighter).
+ */
+:host {
+  display: block;
+
+  --bs-error-page-bg: var(--bs-paper-bg-base);
+  --bs-error-page-radius: var(--bs-border-radius-100);
+  --bs-error-page-padding: var(--bs-spacing-400);
+  --bs-error-page-min-height: 440px;
+  --bs-error-page-gap: var(--bs-spacing-150);
+  --bs-error-page-description-width: 420px;
+  --bs-error-page-color: var(--bs-text-default);
+  --bs-error-page-color-secondary: var(--bs-text-secondary);
+  --bs-error-page-color-muted: var(--bs-text-muted);
+  --bs-error-page-info-bg: var(--bs-color-info-container);
+}
+
+/* bs-card supplies the surface; this only sets how it looks here. */
+.bs-error-page {
+  --bs-card-bg: var(--bs-error-page-bg);
+  --bs-card-radius: var(--bs-error-page-radius);
+  --bs-card-padding: var(--bs-error-page-padding);
+  --bs-card-shadow: none;
+  color: var(--bs-error-page-color);
+}
+
+.bs-error-page__body {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-error-page-gap);
+  min-height: calc(var(--bs-error-page-min-height) - var(--bs-error-page-padding) * 2);
+  text-align: center;
+}
+
+.bs-error-page__art-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+}
+
+.bs-error-page__art--info {
+  --bs-icon-tile-bg: var(--bs-error-page-info-bg);
+}
+
+.bs-error-page__glyph,
+::slotted([slot='icon']) {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-error-page__code {
+  color: var(--bs-error-page-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: 20px;
+}
+
+.bs-error-page__heading {
+  margin: 0;
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 32px;
+}
+
+.bs-error-page__description {
+  max-width: var(--bs-error-page-description-width);
+  margin: 0;
+  color: var(--bs-error-page-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-error-page__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-spacing-100);
+  padding-top: var(--bs-spacing-100);
+}
+
+.bs-error-page__actions bs-button {
+  --bs-button-height-md: var(--bs-spacing-550);
+}
+
+.bs-error-page__reference {
+  margin: 0;
+  color: var(--bs-error-page-color-muted);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}

package/dist/collection/components/bs-error-page/bs-error-page.js

@@ -0,0 +1,328 @@
+import { h } from "@stencil/core";
+/**
+ * A full-block page for when the user can't get to what they asked for: page not found (404), a server
+ * error (500), no access (403), planned maintenance, or no internet connection. Matches the Figma
+ * "Error page" component's five states.
+ *
+ * Each `type` brings its own icon, tint, code label ("404", "Maintenance", ...), heading, paragraph and
+ * buttons, all overridable by props. The component doesn't navigate or retry anything: it emits
+ * `bsPrimary` / `bsSecondary` and your app decides what "Go to Overview" or "Try again" does.
+ *
+ * **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions).
+ *
+ * ## When to use
+ * - Replacing the content of a page or panel that can't be shown, with a clear way forward.
+ *
+ * ## When not to use
+ * - A problem with one field or one action -- use inline validation or a `bs-snackbar`.
+ * - A blocking question the user must answer -- use `bs-dialog`.
+ *
+ * @slot icon - Replaces the default glyph in the icon tile. Draw it with `currentColor`.
+ * @part container - The card.
+ * @part art - The icon tile.
+ * @part code - The label under the icon ("404", "Maintenance", ...).
+ * @part heading - The heading.
+ * @part description - The paragraph.
+ * @part actions - The button row.
+ * @part primary - The primary button.
+ * @part secondary - The secondary button.
+ * @part reference - The small reference line (an error id and time).
+ */
+export class BsErrorPage {
+    /** Which error: `not-found` (404), `server-error` (500), `no-access` (403), `maintenance` or
+     * `offline`. */
+    type = 'not-found';
+    /** The small label under the icon, e.g. "404". Defaults per `type` ("404", "500", "403",
+     * "Maintenance", "Offline"). Set it to an empty string to hide it. */
+    code;
+    /** Heading. Defaults per `type`. */
+    heading;
+    /** HTML heading level for the heading, 1-6. Use 1 when this replaces the whole page; lower when it
+     * sits inside a section that already has a heading above it. */
+    headingLevel = 1;
+    /** Paragraph under the heading. Defaults per `type`. */
+    description;
+    /** Label of the primary button. Defaults per `type`. Set it to an empty string to hide it. */
+    primaryLabel;
+    /** Label of the secondary button. Defaults per `type` (only `not-found`, `server-error` and
+     * `no-access` have one). Set it to an empty string to hide it. */
+    secondaryLabel;
+    /** A small reference line under the buttons, e.g. `"Error ID: 7f3c-21a9 · 30.09.2026 10:42"`, for
+     * support to look up. Nothing is shown when empty. */
+    reference;
+    /** Fires when the primary button is pressed. */
+    bsPrimary;
+    /** Fires when the secondary button is pressed. */
+    bsSecondary;
+    get defaults() {
+        return TYPES[this.type] ?? TYPES['not-found'];
+    }
+    render() {
+        const d = this.defaults;
+        const code = this.code ?? d.code;
+        const heading = this.heading ?? d.heading;
+        const description = this.description ?? d.description;
+        const primary = this.primaryLabel ?? d.primary;
+        const secondary = this.secondaryLabel ?? d.secondary;
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
+        return (h("bs-card", { key: '27e16dc9013ea60751032fcccd626fb44aa7f708', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: 'bbca94e98665e09c5cd86626bf136f7b1393cbeb', class: "bs-error-page__body" }, h("div", { key: 'f358107685a4bfa06f1428bdd203d06b767fa83b', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '096621ed3f0fa1545ae4e9a55cf316ff8f4349cb', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: '675e23b9001cb6570d95092f429666bee38368d1', name: "icon" }, d.glyph())), code && (h("span", { key: 'f82874da8c28f2f3e7adc17f4532a4b99082fc81', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'ee4a20fa4862df6533eb6de359dbf3f55c613f26', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'b921d9f129128a92ce3af409a8cd723ee49b7e02', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: '0e8e62423a122ce6bcb41ad93138cb5d2573d5d1', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '07d4527e4fd8813d4a6c1d5316b34c2678bbae8d', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: '590120eeb06e91ab3617d3f1630a361c207afe42', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+    }
+    static get is() { return "bs-error-page"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-error-page.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-error-page.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsErrorPageType",
+                    "resolved": "\"maintenance\" | \"no-access\" | \"not-found\" | \"offline\" | \"server-error\"",
+                    "references": {
+                        "BsErrorPageType": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-error-page/bs-error-page.tsx",
+                            "id": "src/components/bs-error-page/bs-error-page.tsx::BsErrorPageType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which error: `not-found` (404), `server-error` (500), `no-access` (403), `maintenance` or\n`offline`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'not-found'"
+            },
+            "code": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The small label under the icon, e.g. \"404\". Defaults per `type` (\"404\", \"500\", \"403\",\n\"Maintenance\", \"Offline\"). Set it to an empty string to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "code"
+            },
+            "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 for the heading, 1-6. Use 1 when this replaces the whole page; lower when it\nsits inside a section that already has a heading above it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "1"
+            },
+            "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"
+            },
+            "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`. Set it to an empty string to hide it."
+                },
+                "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` (only `not-found`, `server-error` and\n`no-access` have one). Set it to an empty string to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label"
+            },
+            "reference": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A small reference line under the buttons, e.g. `\"Error ID: 7f3c-21a9 \u00B7 30.09.2026 10:42\"`, for\nsupport to look up. Nothing is shown when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsPrimary",
+                "name": "bsPrimary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the primary button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "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": {}
+                }
+            }];
+    }
+}
+const icon = (children) => () => (h("svg", { class: "bs-error-page__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, children));
+const TYPES = {
+    'not-found': {
+        intent: 'default',
+        info: true,
+        code: '404',
+        heading: 'Page not found',
+        description: 'The link may be old, or the page has moved.',
+        primary: 'Go to Overview',
+        secondary: 'Search',
+        glyph: icon(h("g", null, h("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), h("path", { d: "M15.5 15.5L20.5 20.5" }))),
+    },
+    'server-error': {
+        intent: 'error',
+        code: '500',
+        heading: 'Something went wrong on our side',
+        description: 'We’re working on it. Try again in a moment.',
+        primary: 'Try again',
+        secondary: 'Contact support',
+        glyph: icon(h("g", null, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7.5V12.5" }), h("path", { d: "M12 16.2V16.3" }))),
+    },
+    'no-access': {
+        intent: 'default',
+        code: '403',
+        heading: 'You don’t have access',
+        description: 'Contact your administrator for the access.',
+        primary: 'Request access',
+        secondary: 'Go back',
+        glyph: icon(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" }))),
+    },
+    maintenance: {
+        intent: 'warning',
+        code: 'Maintenance',
+        heading: 'We’re upgrading the system',
+        description: 'We’ll be back shortly. Your data is safe.',
+        primary: 'View system status',
+        secondary: '',
+        glyph: icon(h("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" })),
+    },
+    offline: {
+        intent: 'warning',
+        code: 'Offline',
+        heading: 'No internet connection',
+        description: 'Changes are saved locally and will be updated when you’re back online.',
+        primary: 'Try again',
+        secondary: '',
+        glyph: icon(h("g", null, h("path", { d: "M4 4L20 20" }), h("path", { d: "M2.5 9.5A14 14 0 0 1 8 6.7" }), h("path", { d: "M21.5 9.5A14 14 0 0 0 14 6.2" }), h("path", { d: "M5.5 13A9.5 9.5 0 0 1 9.5 10.6" }), h("path", { d: "M18.5 13A9.5 9.5 0 0 0 16 11.3" }), h("path", { d: "M9 16.5A4.5 4.5 0 0 1 12 15.3" }), h("path", { d: "M12 19.2V19.3" }))),
+    },
+};

package/dist/collection/components/bs-error-page/bs-error-page.stories.js

@@ -0,0 +1,57 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-error-page',
+    parameters: { docs: { description: { component: componentDescription('bs-error-page') } } },
+    render: args => html `
+    <bs-error-page
+      type=${args.type}
+      code=${ifDefined(args.code || undefined)}
+      heading=${ifDefined(args.heading || undefined)}
+      description=${ifDefined(args.description || undefined)}
+      primary-label=${ifDefined(args.primaryLabel || undefined)}
+      secondary-label=${ifDefined(args.secondaryLabel || undefined)}
+      reference=${ifDefined(args.reference || undefined)}
+      heading-level=${args.headingLevel}
+      @bsPrimary=${() => console.log('bsPrimary')}
+      @bsSecondary=${() => console.log('bsSecondary')}
+    ></bs-error-page>
+  `,
+    argTypes: {
+        type: { control: 'select', options: ['not-found', 'server-error', 'no-access', 'maintenance', 'offline'], description: propDescription('bs-error-page', 'type') },
+        code: { control: 'text', description: propDescription('bs-error-page', 'code') },
+        heading: { control: 'text', description: propDescription('bs-error-page', 'heading') },
+        description: { control: 'text', description: propDescription('bs-error-page', 'description') },
+        primaryLabel: { control: 'text', description: propDescription('bs-error-page', 'primaryLabel') },
+        secondaryLabel: { control: 'text', description: propDescription('bs-error-page', 'secondaryLabel') },
+        reference: { control: 'text', description: propDescription('bs-error-page', 'reference') },
+        headingLevel: { control: { type: 'number', min: 1, max: 6 }, description: propDescription('bs-error-page', 'headingLevel') },
+    },
+    args: { type: 'not-found', code: '', heading: '', description: '', primaryLabel: '', secondaryLabel: '', reference: '', headingLevel: 1 },
+};
+export default meta;
+export const NotFound = { name: 'Not found (404)' };
+export const ServerError = {
+    name: 'Server error (500)',
+    args: { type: 'server-error', reference: 'Error ID: 7f3c-21a9 · 30.09.2026 10:42' },
+};
+export const NoAccess = { name: 'No access (403)', args: { type: 'no-access' } };
+export const Maintenance = {
+    args: { type: 'maintenance', description: 'Back up at about 06:00. Your data is safe.' },
+};
+export const Offline = { args: { type: 'offline' } };
+export const CustomCopy = {
+    name: 'Custom copy',
+    args: { type: 'not-found', heading: 'This order doesn’t exist', description: 'Check the order number, or search for it.', primaryLabel: 'All orders', secondaryLabel: 'Search orders' },
+};
+export const CustomIcon = {
+    name: 'Custom icon',
+    render: () => html `
+    <bs-error-page type="offline" heading="You're offline" description="We'll sync when you reconnect." primary-label="Retry now">
+      <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 3V13M8 9L12 13L16 9M5 19H19" />
+      </svg>
+    </bs-error-page>
+  `,
+};