@brandsync/wc 1.10.0 → 1.12.0

package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.stories.js

@@ -0,0 +1,103 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const PREFERENCE_CATEGORIES = [
+    {
+        id: 'necessary',
+        label: 'Strictly necessary',
+        description: 'Needed for sign-in, security and to keep the service running. These cannot be turned off.',
+        required: true,
+        cookies: [
+            'Session cookie — keeps you signed in as you move between pages.',
+            'Security cookie — helps prevent fraud and unauthorized access.',
+            'Consent cookie — remembers your cookie consent choices.',
+        ],
+    },
+    {
+        id: 'preferences',
+        label: 'Preferences',
+        description: 'Remember your language, theme and table layouts on this device.',
+        enabled: true,
+        cookies: ['Language cookie — remembers your language.', 'Theme cookie — remembers light or dark mode.', 'Layout cookie — remembers your table columns.'],
+    },
+    {
+        id: 'analytics',
+        label: 'Analytics',
+        description: 'Help us understand which features are used so we can improve them. Data is anonymised.',
+        cookies: ['Usage cookie — counts visits to each page.', 'Feature cookie — records which features are used.', 'Performance cookie — measures how fast pages load.'],
+    },
+    {
+        id: 'marketing',
+        label: 'Marketing',
+        description: 'Show relevant EG products on other websites.',
+        cookies: ['Campaign cookie — links a visit to a campaign.', 'Audience cookie — groups visitors by interest.', 'Retargeting cookie — shows our ads elsewhere.'],
+    },
+];
+const meta = {
+    title: 'Components/bs-cookie-consent',
+    parameters: { docs: { description: { component: componentDescription('bs-cookie-consent') } } },
+    decorators: [story => html `<div style="padding: 16px; background: var(--bs-color-neutral-container);">${story()}</div>`],
+    render: args => html `
+    <bs-cookie-consent
+      type=${args.type}
+      heading=${ifDefined(args.heading || undefined)}
+      description=${ifDefined(args.description || undefined)}
+      policy-url=${ifDefined(args.policyUrl || undefined)}
+      .categories=${PREFERENCE_CATEGORIES}
+      @bsAccept=${(ev) => console.log('bsAccept', ev.detail)}
+      @bsReject=${(ev) => console.log('bsReject', ev.detail)}
+      @bsCustomise=${() => console.log('bsCustomise')}
+      @bsSave=${(ev) => console.log('bsSave', ev.detail)}
+      @bsChoice=${(ev) => console.log('bsChoice', ev.detail)}
+      @bsClose=${() => console.log('bsClose')}
+      @bsManage=${() => console.log('bsManage')}
+    ></bs-cookie-consent>
+  `,
+    argTypes: {
+        type: { control: 'inline-radio', options: ['banner', 'card', 'preferences', 'saved'], description: propDescription('bs-cookie-consent', 'type') },
+        heading: { control: 'text', description: propDescription('bs-cookie-consent', 'heading') },
+        description: { control: 'text', description: propDescription('bs-cookie-consent', 'description') },
+        policyUrl: { control: 'text', description: propDescription('bs-cookie-consent', 'policyUrl') },
+    },
+    args: { type: 'banner', heading: '', description: '', policyUrl: '#cookie-policy' },
+};
+export default meta;
+export const Banner = {};
+export const BannerNarrow = {
+    name: 'Banner (narrow container)',
+    render: args => html `
+    <div style="width: 332px;">
+      <bs-cookie-consent type="banner" policy-url=${args.policyUrl}></bs-cookie-consent>
+    </div>
+  `,
+};
+export const CompactCard = {
+    name: 'Compact card',
+    args: { type: 'card' },
+};
+export const PreferencesDialog = {
+    name: 'Preferences dialog',
+    args: { type: 'preferences' },
+};
+export const SavedConfirmation = {
+    name: 'Saved confirmation',
+    args: { type: 'saved' },
+};
+// The flow: banner -> Customise -> preferences -> Save -> saved confirmation -> Change -> preferences.
+export const Flow = {
+    render: () => html `
+    <div id="flow">
+      <bs-cookie-consent
+        type="banner"
+        policy-url="#cookie-policy"
+        .categories=${PREFERENCE_CATEGORIES}
+        @bsCustomise=${(e) => (e.currentTarget.setAttribute('type', 'preferences'))}
+        @bsAccept=${(e) => (e.currentTarget.setAttribute('type', 'saved'))}
+        @bsReject=${(e) => (e.currentTarget.setAttribute('type', 'saved'))}
+        @bsSave=${(e) => (e.currentTarget.setAttribute('type', 'saved'))}
+        @bsClose=${(e) => (e.currentTarget.setAttribute('type', 'banner'))}
+        @bsManage=${(e) => (e.currentTarget.setAttribute('type', 'preferences'))}
+      ></bs-cookie-consent>
+    </div>
+  `,
+};

package/dist/collection/components/bs-datepicker/bs-datepicker.cmp.test.js

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
 const days = (root) => Array.from(root.shadowRoot.querySelectorAll('[part~="day"]'));
 const day = (root, iso) => root.shadowRoot.querySelector(`[data-date="${iso}"]`);
 describe('bs-datepicker', () => {
@@ -100,6 +101,14 @@ describe('bs-datepicker', () => {
             expect(checked.length).toBe(1);
             expect(checked[0].textContent).toBe('September');
         });
+        it('opens scrolled so the current month is in view (centred)', async () => {
+            const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
+            triggers(root)[0].dispatchEvent(new CustomEvent('bsOpen', { detail: true }));
+            await waitForChanges();
+            await new Promise(r => setTimeout(r, 300));
+            const menu = sr(root).querySelector('.bs-datepicker__menu');
+            expect(menu.scrollTop).toBeGreaterThan(100);
+        });
         it('picking a month changes the displayed month and closes the list', async () => {
             const { root, waitForChanges } = await render(h("bs-datepicker", { value: "2026-09-16" }));
             triggers(root)[0].dispatchEvent(new CustomEvent('bsOpen', { detail: true }));

package/dist/collection/components/bs-datepicker/bs-datepicker.css

@@ -1,6 +1,6 @@
 /**
  * @prop --bs-datepicker-width: Width of the card. 364px, exact match to Figma.
- * @prop --bs-datepicker-bg: Card background. Aliased to --bs-surface-raised.
+ * @prop --bs-datepicker-bg: Card background. Aliased to --bs-paper-bg-raised (the `bs-card` raised surface).
  * @prop --bs-datepicker-radius: Card corner radius. Aliased to --bs-border-radius-150.
  * @prop --bs-datepicker-padding: Card padding. Aliased to --bs-spacing-200.
  * @prop --bs-datepicker-gap: Vertical gap between the header, nav and grid. Aliased to --bs-spacing-150.
@@ -35,7 +35,7 @@
   display: inline-block;
 
   --bs-datepicker-width: 364px;
-  --bs-datepicker-bg: var(--bs-surface-raised);
+  --bs-datepicker-bg: var(--bs-paper-bg-raised);
   --bs-datepicker-radius: var(--bs-border-radius-150);
   --bs-datepicker-padding: var(--bs-spacing-200);
   --bs-datepicker-gap: var(--bs-spacing-150);
@@ -72,19 +72,22 @@
 }
 
 .bs-datepicker {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--bs-datepicker-gap);
   width: var(--bs-datepicker-width);
   max-width: 100%;
-  padding: var(--bs-datepicker-padding);
-  border-radius: var(--bs-datepicker-radius);
-  background: var(--bs-datepicker-bg);
-  box-shadow: var(--bs-datepicker-shadow);
   color: var(--bs-datepicker-color);
-  font-family: inherit;
   font-size: var(--bs-datepicker-font-size);
+  /* bs-card supplies the surface. `visible` so the month/year list can hang over the edge. */
+  --bs-card-bg: var(--bs-datepicker-bg);
+  --bs-card-radius: var(--bs-datepicker-radius);
+  --bs-card-padding: var(--bs-datepicker-padding);
+  --bs-card-shadow: var(--bs-datepicker-shadow);
+  --bs-card-overflow: visible;
+}
+
+.bs-datepicker__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-datepicker-gap);
 }
 
 .bs-datepicker__header {
@@ -93,6 +96,13 @@
   gap: var(--bs-spacing-100);
 }
 
+.bs-datepicker__header--range > bs-input {
+  /* Figma: the Start/End date labels are 16px semibold (bs-input's own default is 14px medium). */
+  --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);
+}
+
 .bs-datepicker__header > bs-input {
   flex: 1 1 0;
   min-width: 0;

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

@@ -10,6 +10,8 @@ import { h } from "@stencil/core";
  * The calendar renders inline at a fixed width; to show it as a popover, put it inside a
  * `bs-menu` or your own overlay.
  *
+ * **Built from:** `bs-card` (the surface), `bs-input` (the month/year dropdown triggers and the range date fields), `bs-menu` and `bs-menu-item` (the month/year lists).
+ *
  * ## When to use
  * - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
  *   deadline, a report window).
@@ -103,11 +105,15 @@ export class BsDatepicker {
         if (this.menuToScroll) {
             this.menuToScroll = false;
             // Centre the current month/year in the list. Done by hand rather than scrollIntoView, which
-            // would also scroll the page.
-            const menu = this.el.shadowRoot.querySelector('.bs-datepicker__menu');
-            const current = menu?.querySelector('[data-current]');
-            if (menu && current)
-                menu.scrollTop = current.offsetTop - menu.clientHeight / 2 + current.offsetHeight / 2;
+            // would also scroll the page, and after layout: the bs-menu-items inside the menu only have
+            // a measurable offsetTop once they've rendered, which is a frame after this hook.
+            const scroll = () => {
+                const menu = this.el.shadowRoot?.querySelector('.bs-datepicker__menu');
+                const current = menu?.querySelector('[data-current]');
+                if (menu && current)
+                    menu.scrollTop = current.offsetTop - menu.clientHeight / 2 + current.offsetHeight / 2;
+            };
+            requestAnimationFrame(() => requestAnimationFrame(scroll));
         }
         if (!this.shouldFocusDay)
             return;
@@ -334,7 +340,7 @@ export class BsDatepicker {
             : this.defaultTabbable(days);
         const isInRange = (iso) => !!selectedStart && !!previewEnd && iso > selectedStart && iso < previewEnd;
         const weekdays = this.weekdays();
-        return (h("div", { key: '49e2ce73c32ee98eb2c8276fb23b159392b9292a', part: "container", class: "bs-datepicker" }, this.renderHeader(), h("div", { key: 'da69881edff77ee3584b4565a4b39024ce2cd4f7', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: 'f96dea3cc2821bf757afcee158c092deefe45b8b', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '7be3e0ca1588852357d13ade50f594633f86a56a', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '513165ad97411656af1742376cf7d75eda544814', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: 'bc55234eb1bd053c87388e7d6ebe31049f903cea', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '2436e91d78710f7d0716553660c8e1fff2e7d2da', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '47f183221234d91d736f45207e84b14ee57b469f', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'bd4abceed66ef781fab224646d371b648d3c0d1d', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'e669ad28eb8461dcf5a24191dca379ab3cbc0111', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '440719175dd4f4a745b9de22126029633bfe91a3', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
+        return (h("bs-card", { key: 'cd66b2bc8f611383ea5df6d01e29b03a940bc06b', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '7020d13ee4ea5f05c2548966cb56c20b59eb067b', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '4ed03f1fb642d2a3a226a27e6e86001a478eab4c', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: 'e844a021afa02f834026ebb4237f5b2f5b9d1a4c', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'f68be6b62a9deb6334b63c6e7152b4968ebdbeab', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'a7ee70143ce7b839c44483c1d15daf2714306bf7', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '7eb7fd38ca59a4a6ba9692180bcd5096f54ac783', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '1e515d27746a10acfe9f04f08c4a09753cb5b98b', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: 'f5dde56a61d31b93aa9877b0fc473264d40305ba', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '765b53c7f7e8618618622a5121ecab294610bf8a', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'e56fa1a425055d77ae04039890758b823f14ee8d', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '2471a9291aa29111217aaaa1f02f2cfc8861e49e', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
             const row = days.slice(r * 7, r * 7 + 7);
             return (h("div", { class: "bs-datepicker__row", role: "row" }, row.map((d, c) => {
                 const iso = toIso(d);
@@ -365,7 +371,7 @@ export class BsDatepicker {
                             this.hoverIso = iso;
                     } }, String(d.getDate()).padStart(2, '0'))));
             })));
-        }))));
+        })))));
     }
     /** The day that should be reachable with Tab when nothing in view has been focused yet: the
      * selection if it's in the displayed month, else today if it is, else the 1st. */

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

@@ -1,4 +1,5 @@
 import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { componentDescription, propDescription } from "../../stories-utils";
 const meta = {
     title: 'Components/bs-datepicker',
@@ -9,8 +10,8 @@ const meta = {
       value=${args.value}
       start=${args.start}
       end=${args.end}
-      min=${args.min || undefined}
-      max=${args.max || undefined}
+      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)}

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;
+}