@brandsync/wc 1.17.0 → 1.19.0

package/dist/collection/components/bs-menu-block/bs-menu-block.cmp.test.js

@@ -0,0 +1,44 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { ICONS } from "../bs-mega-menu/bs-mega-menu.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '340px' } }, h("bs-menu-block", { name: "Quotes" })));
+    const el = r.root.querySelector('bs-menu-block');
+    Object.assign(el, { icon: ICONS.quotes, description: 'Create and send price quotes', ...props });
+    await r.waitForChanges();
+    return { ...r, el };
+};
+describe('bs-menu-block', () => {
+    it('is a button named by its title and description, with the parts and custom properties', async () => {
+        const { el } = await make();
+        const c = q(el, '[part="container"]');
+        expect(c.tagName).toBe('BUTTON');
+        expect(c.textContent).toContain('Quotes');
+        expect(c.textContent).toContain('Create and send price quotes');
+        expect(q(el, '.bs-menu-block__glyph')).not.toBeNull();
+        assertShadowParts(el.shadowRoot, ['container', 'icon', 'name', 'description']);
+        assertCssCustomProperties(el, ['--bs-menu-block-padding', '--bs-menu-block-bg-hover', '--bs-menu-block-focus-ring']);
+    });
+    it('shows the badge chip only when set, and exactly one icon', async () => {
+        const { el, waitForChanges } = await make();
+        expect(q(el, '[part="badge"]')).toBeNull();
+        el.badge = 'New';
+        await waitForChanges();
+        expect(q(el, '[part="badge"]').textContent).toBe('New');
+        await new Promise(r => setTimeout(r, 100));
+        expect(q(el, 'bs-icon-tile').shadowRoot.querySelector('svg')).toBeNull();
+    });
+    it('uses the 32px icon square', async () => {
+        const { el } = await make();
+        expect(Math.round(q(el, 'bs-icon-tile').getBoundingClientRect().width)).toBe(32);
+    });
+    it('has no axe violations', async () => {
+        for (const props of [{}, { badge: 'New' }]) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${JSON.stringify(props)} ${v.id}: ${v.help}`)).toEqual([]);
+        }
+    });
+});

package/dist/collection/components/bs-menu-block/bs-menu-block.css

@@ -0,0 +1,106 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  --bs-menu-block-padding: var(--bs-spacing-150);
+  --bs-menu-block-gap: var(--bs-spacing-150);
+  --bs-menu-block-radius: var(--bs-border-radius-100);
+  --bs-menu-block-bg: transparent;
+  --bs-menu-block-bg-hover: var(--bs-surface-hover);
+  --bs-menu-block-bg-pressed: var(--bs-surface-pressed);
+  --bs-menu-block-icon-bg: var(--bs-color-neutral-container);
+  --bs-menu-block-color: var(--bs-text-default);
+  --bs-menu-block-color-muted: var(--bs-text-secondary);
+  --bs-menu-block-focus-ring: var(--bs-border-info);
+  --bs-menu-block-white-space: nowrap;
+}
+
+.bs-menu-block {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-menu-block-gap);
+  width: 100%;
+  margin: 0;
+  padding: var(--bs-menu-block-padding);
+  border: 0;
+  border-radius: var(--bs-menu-block-radius);
+  background: var(--bs-menu-block-bg);
+  color: var(--bs-menu-block-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  text-align: left;
+  cursor: pointer;
+}
+
+.bs-menu-block:hover,
+.bs-menu-block:active {
+  --bs-menu-block-icon-bg: var(--bs-surface-base);
+}
+
+.bs-menu-block:hover,
+.bs-menu-block:focus-visible {
+  background: var(--bs-menu-block-bg-hover);
+}
+
+.bs-menu-block:active {
+  background: var(--bs-menu-block-bg-pressed);
+}
+
+/* The secondary text is too faint on the pressed background, so it takes the title colour while pressed. */
+.bs-menu-block:active .bs-menu-block__description {
+  color: var(--bs-menu-block-color);
+}
+
+.bs-menu-block:focus-visible {
+  outline: var(--bs-spacing-25) solid var(--bs-menu-block-focus-ring);
+  outline-offset: 0;
+}
+
+.bs-menu-block__icon {
+  --bs-icon-tile-bg: var(--bs-menu-block-icon-bg);
+  --bs-icon-tile-color: var(--bs-icon-default);
+}
+
+.bs-menu-block__glyph {
+  display: block;
+  width: var(--bs-icon-tile-icon-size);
+  height: var(--bs-icon-tile-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--bs-menu-block-glyph) center / contain no-repeat;
+  mask: var(--bs-menu-block-glyph) center / contain no-repeat;
+}
+
+.bs-menu-block__text {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-menu-block__title {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-menu-block__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: var(--bs-menu-block-white-space);
+  font-size: var(--bs-fontsize-body-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+.bs-menu-block__badge {
+  flex: none;
+}
+
+.bs-menu-block__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: var(--bs-menu-block-white-space);
+  color: var(--bs-menu-block-color-muted);
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}

package/dist/collection/components/bs-menu-block/bs-menu-block.js

@@ -0,0 +1,147 @@
+import { h } from "@stencil/core";
+/**
+ * A rich entry in a mega menu: an icon tile, a title with an optional "New" chip, and a one-line description.
+ * Matches the Figma "Menu block" component (Default, Hover, Pressed and Focused).
+ *
+ * The block is always a native button and only emits events; it never navigates. Hover, pressed and focus come from the
+ * native element. Its accessible name is its text: the title, the badge and the description, read once.
+ *
+ * Built from `bs-icon-tile` (the icon) and `bs-chip-informative` (the badge). The icon is either a URL of a
+ * monochrome SVG in `icon` (painted with the theme's icon colour through a CSS mask, so it follows light and
+ * dark mode), or any element in the default slot (an `<svg>` drawn with `currentColor`).
+ *
+ * ## When to use
+ * - A destination in a mega menu that needs an icon and a sentence of explanation, usually inside `bs-mega-menu`.
+ *
+ * ## When not to use
+ * - A plain text destination -- use `bs-compact-menu-block`.
+ * - A command in a dropdown list -- use `bs-menu-item`.
+ *
+ * @slot - The icon (16px, `currentColor`). Overrides the `icon` prop.
+ * @part container - The button.
+ * @part icon - The icon tile (`bs-icon-tile`).
+ * @part name - The title.
+ * @part badge - The badge chip (`bs-chip-informative`).
+ * @part description - The description.
+ * @prop --bs-menu-block-padding - Padding inside the block. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-block-gap - Gap between icon and text. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-block-radius - Corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-menu-block-bg - Resting background. `transparent`.
+ * @prop --bs-menu-block-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-menu-block-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-menu-block-icon-bg - Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered or pressed.
+ * @prop --bs-menu-block-color - Title colour. Aliased to `--bs-text-default`.
+ * @prop --bs-menu-block-color-muted - Description colour. Aliased to `--bs-text-secondary`.
+ * @prop --bs-menu-block-focus-ring - Focus ring colour. Aliased to `--bs-border-info`.
+ * @prop --bs-menu-block-white-space - `white-space` of the title and description. `nowrap` (single line, ellipsis); set `normal` to let them wrap.
+ */
+export class BsMenuBlock {
+    /** The title, and the start of the accessible name. */
+    name;
+    /** One line under the title; part of the accessible name. */
+    description;
+    /** URL of a monochrome SVG painted with the icon colour. The default slot overrides it. */
+    icon;
+    /** Short text for a chip beside the title, e.g. "New". */
+    badge;
+    render() {
+        const common = { part: 'container', class: 'bs-menu-block' };
+        const body = [
+            h("bs-icon-tile", { key: 'f16451b0269c9e2147303016a9a8eff3054804fa', part: "icon", class: "bs-menu-block__icon", size: "md" }, this.icon ? h("span", { class: "bs-menu-block__glyph", style: { '--bs-menu-block-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: 'b0ec2c28feb0db796dd9c252da01db7297680916', class: "bs-menu-block__text" }, h("span", { key: '512bfedc88a49232164be59eba523ca673876f2e', class: "bs-menu-block__title" }, h("span", { key: 'a75951dfa734644f3fbd5abd1f97e51b9a023a36', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: 'b4769585e7578532a68be1cb19bd1dc0553a7d52', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: 'bc5049f8180aff51f96bad7bfedc6e5b7704f459', part: "description", class: "bs-menu-block__description" }, this.description))),
+        ];
+        return (h("button", { key: 'f468826125b6743495c96049081f94ea7f372a0d', ...common, type: "button" }, body));
+    }
+    static get is() { return "bs-menu-block"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-menu-block.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-menu-block.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title, and the start of the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "One line under the title; part of the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of a monochrome SVG painted with the icon colour. The default slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Short text for a chip beside the title, e.g. \"New\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge"
+            }
+        };
+    }
+}

package/dist/collection/components/bs-menu-block/bs-menu-block.stories.js

@@ -0,0 +1,36 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+import { ICONS } from "../bs-mega-menu/bs-mega-menu.stories";
+const meta = {
+    title: 'Components/bs-menu-block',
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-menu-block') } } },
+    argTypes: { name: { control: 'text' }, description: { control: 'text' }, badge: { control: 'text' } },
+    args: { name: 'Quotes', description: 'Create and send price quotes', badge: '' },
+    render: args => html `
+    <div style="width: 340px">
+      <bs-menu-block .icon=${ICONS.quotes} name=${args.name} description=${args.description} badge=${args.badge}></bs-menu-block>
+    </div>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithBadge = { args: { name: 'Subscriptions', description: 'Recurring billing for services', badge: 'New' } };
+/** The four states in the design. Hover, pressed and focus come from the native element: point at a block, press it, or Tab to it. */
+export const States = {
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:8px;width:340px">
+      <bs-menu-block .icon=${ICONS.quotes} name="Quotes" description="Create and send price quotes"></bs-menu-block>
+      <bs-menu-block .icon=${ICONS.subscriptions} name="Subscriptions" description="Recurring billing for services" badge="New"></bs-menu-block>
+    </div>
+  `,
+};
+/** A slotted `<svg>` instead of the `icon` URL. */
+export const SlottedIcon = {
+    render: () => html `
+    <div style="width: 340px">
+      <bs-menu-block name="Custom" description="An icon drawn with currentColor">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8" /></svg>
+      </bs-menu-block>
+    </div>
+  `,
+};

package/dist/collection/components/bs-menu-item/bs-menu-item.css

@@ -16,6 +16,8 @@
 }
 
 .bs-menu-item {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;

package/dist/collection/components/bs-menu-item/bs-menu-item.js

@@ -28,6 +28,7 @@ import { h } from "@stencil/core";
  * @prop --bs-menu-item-color-disabled - Label text color when `disabled` is set. Aliased to `--bs-text-on-disabled`.
  * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
  * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsMenuItem {
     /** Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by
@@ -47,7 +48,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '09c4e8582ce6a31ff4aa293e20c3d7f1caa6e845', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'ecfc57bc3eab836edd5f0ef0d009da8ccbbce563', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '8eb2a0b480c7fbe7aa17ec5cd193764353a394e9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e67b7512fd58b0e0847b5d3d14658cfc1bd4a00c', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '466a45cb85e7cdadde2fb994243689873482d65c' }))));
+        return (h("button", { key: 'a6022e318de72f62cf5b4be5c924d472221b4cff', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("bs-ripple", { key: '5c330b32fb6450c9015ea5549ec522bbab0a3ac0', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '16fece8c1363813f05410e120be8bdee4281ccfa', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'e8ceb7834a709543718dd0145d753fb186a74489', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '7ddb04608737ffeb097bebcdb5c00f825e058b9f', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'd24f52e58bfb3629ba8512e17e41844ad0b3baab' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class BsMessage {
     /** Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`. */
     status = 'default';
     render() {
-        return (h("div", { key: '86285bfd68e06327c2d2afbb0f2c24974303093e', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'd82b3e6fe9d3863269600ef1a3ccc2feac0423b6', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: 'c6832f12575eaf2e16c7eb65040ea799501f97ce', name: "avatar" })), h("div", { key: '0fc91e323599e56c4f61c12cec0b7ce7bdddc00f', class: "bs-message__column" }, h("bs-card", { key: '72de58c03aff4643103f8bedf1e699c31fcabe18', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'd71851df11559320977e3597bc30d7833940194c', part: "content", class: "bs-message__content" }, h("slot", { key: '956564ce3766240c7e75c8fdf83b5471c7804965' }))), h("div", { key: '09d2d29c20ce847fa06ac91048212ed14cebcfa1', part: "footer", class: "bs-message__footer" }, h("slot", { key: 'e2a7a23597b0ac6d6c9ba7c1eb26ef865746b5f8', name: "footer" })), h("div", { key: '9ce9ef000dcc68f5c2b8e3254dbd3ad37a59e930', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: '3d906d1c18bbc6b1cffb7fba18bcc74324f6dd5d', name: "timestamp" }, this.timestamp && h("time", { key: '6f04b8166126cd7d1543c4211bace9caaac99571', dateTime: this.datetime }, this.timestamp))))));
+        return (h("div", { key: 'db1349965dab9cdb4ca7cddd47d9df6aa21227d2', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'd1bee0f3145b3bd789ffe90b2603caefba8fcf1e', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: '487a6d52013d52ac80f8906fbccf3017a1dd927d', name: "avatar" })), h("div", { key: 'c0713ad732145108ee0a40991fcc3f7955d6d263', class: "bs-message__column" }, h("bs-card", { key: 'ffa3b7c127f117c61e704e3209b031c0d1e0f385', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'f7b852caaecf770856fdb332db9e3af6540d99c2', part: "content", class: "bs-message__content" }, h("slot", { key: 'd3cacbf1031960c074b67115cdd110910eeb116b' }))), h("div", { key: '7161bd50553b2a2f4047c23501877ede4ff4facf', part: "footer", class: "bs-message__footer" }, h("slot", { key: '7109f10f94523fd2d58b6dd4de2195626b385dfb', name: "footer" })), h("div", { key: 'bf4e8e6c4817d33c69dd12362b397860d70766e9', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: '6b70a022b77a2e20d4c0c3524d2ef00b45f1b583', name: "timestamp" }, this.timestamp && h("time", { key: '4e421395a0537ce46369fe9555cf308b052d71f1', dateTime: this.datetime }, this.timestamp))))));
     }
     static get is() { return "bs-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-message-list/bs-message-list.js

@@ -75,7 +75,7 @@ export class BsMessageList {
         }
     };
     render() {
-        return (h("div", { key: '027f7d1e7a442e3c669cc5ce5a798c64f9f1239e', class: "bs-message-list" }, h("div", { key: '6b428190b1fadeacfa0e090d6d17e2455da816aa', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '947524fe3d132633bffd151bb7aecb316aadf382' })), this.showScrollButton && (h("bs-icon-button", { key: '17069d19e0e931a14dbeb71ae09bc521a697eabf', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '7ee28b01218310357a7102cd9eee7cc207101813', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '5880bf08092901ad03ee071c6ea4a4401d9517d9', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (h("div", { key: 'b10cb414ec777f2ee2b793788f1d7cd1c8be7c03', class: "bs-message-list" }, h("div", { key: 'cdc9d56810ccab43ecc5a4f2a8c2fa0d7f87a238', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '54e2d0281818c3f0a6e9b4d8d147b7769b4bfd62' })), this.showScrollButton && (h("bs-icon-button", { key: 'dbe6009a3905d63fd50e69860e1f287a625d6d25', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '000793a84e2f256bcf59cd7e000e54a6dcb0e63d', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '6d8447826dc8ae2534156820f45fe761797bf70a', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
     static get is() { return "bs-message-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,206 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const Trail = () => (h("bs-breadcrumbs", { slot: "breadcrumb", label: "Breadcrumb" }, h("bs-breadcrumb", { href: "#sales" }, "Sales"), h("bs-breadcrumb", { href: "#invoices" }, "Invoices"), h("bs-breadcrumb", { current: true }, "INV-2041")));
+const Status = () => (h("bs-chip-informative", { slot: "status", color: "error", size: "sm" }, "Overdue"));
+const Actions = () => [
+    h("bs-button", { slot: "actions", variant: "outlined", size: "sm" }, "Send reminder"),
+    h("bs-button", { slot: "actions", size: "sm" }, "Register payment"),
+    h("bs-icon-button", { slot: "actions", variant: "outlined", size: "sm", ariaLabel: "More actions" }, h("svg", { viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "2" }))),
+];
+const Tabs = () => (h("bs-tabs", { slot: "tabs", type: "bs-tab", value: "overview" }, h("bs-tab", { value: "overview", selected: true }, "Overview"), h("bs-tab", { value: "lines" }, "Lines"), h("bs-tab", { value: "payments" }, "Payments")));
+const make = async (props = {}, width = 1100, children = [Trail(), Status(), Actions(), Tabs()]) => {
+    const r = await render(h("div", { style: { width: `${width}px` } }, h("bs-page-header", { heading: "Invoices", meta: "214 invoices \u00B7 38 open \u00B7 5 overdue", ...props }, children)));
+    await new Promise(res => setTimeout(res, 80));
+    const el = r.root.querySelector('bs-page-header');
+    return { ...r, el };
+};
+describe('bs-page-header', () => {
+    it('renders the heading as an h1 by default and clamps headingLevel to 1-6', async () => {
+        const levels = [];
+        for (const level of [undefined, 2, 4, 9, 0, 'x']) {
+            const { el } = await make(level === undefined ? {} : { headingLevel: level });
+            levels.push(q(el, '[part="heading"]').tagName);
+        }
+        expect(levels).toEqual(['H1', 'H2', 'H4', 'H6', 'H1', 'H1']);
+        const { el } = await make();
+        expect(q(el, 'h1').textContent).toBe('Invoices');
+    });
+    it('is a plain div, not a landmark, and exposes the parts and custom properties', async () => {
+        const { el } = await make({ back: true, favoritable: true });
+        const root = q(el, '[part="container"]');
+        expect(root.tagName).toBe('DIV');
+        expect(root.getAttribute('role')).toBeNull();
+        assertShadowParts(el.shadowRoot, ['container', 'breadcrumb', 'row', 'main', 'back', 'title', 'heading', 'status', 'favorite', 'meta', 'actions', 'tabs', 'divider']);
+        assertCssCustomProperties(el, ['--bs-page-header-bg', '--bs-page-header-shadow', '--bs-page-header-sticky-offset', '--bs-page-header-z-index']);
+    });
+    it('renders the meta prop, and the meta slot overrides it', async () => {
+        const { el } = await make();
+        expect(q(el, '[part="meta"]').textContent).toBe('214 invoices · 38 open · 5 overdue');
+        const { el: el2 } = await make({}, 1100, [h("span", { slot: "meta" }, "Slotted meta")]);
+        expect(q(el2, 'slot[name="meta"]').assignedNodes()[0].textContent).toBe('Slotted meta');
+    });
+    it('removes empty areas from layout (no breadcrumb, actions, status or meta)', async () => {
+        const { el } = await make({ meta: undefined }, 1100, []);
+        for (const part of ['breadcrumb', 'status', 'meta', 'actions', 'tabs']) {
+            expect(getComputedStyle(q(el, `[part="${part}"]`)).display, part).toBe('none');
+        }
+    });
+    it('shows the back button only with `back`, named by backLabel, and emits bsBack', async () => {
+        const { el, waitForChanges } = await make();
+        expect(q(el, '[part="back"]')).toBeNull();
+        el.back = true;
+        el.backLabel = 'Tilbage';
+        await waitForChanges();
+        const back = q(el, '[part="back"]');
+        expect(back.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe('Tilbage');
+        let n = 0;
+        el.addEventListener('bsBack', () => n++);
+        back.shadowRoot.querySelector('button').click();
+        expect(n).toBe(1);
+    });
+    it('aligns the meta line with the title, not the back button', async () => {
+        const { el } = await make({ back: true });
+        const title = q(el, '[part="title"]').getBoundingClientRect();
+        const meta = q(el, '[part="meta"]').getBoundingClientRect();
+        expect(Math.round(meta.left)).toBe(Math.round(title.left));
+        expect(meta.top).toBeGreaterThanOrEqual(title.bottom - 1);
+    });
+    describe('favourite toggle', () => {
+        it('only exists with `favoritable`, is a pressed toggle with a constant label', async () => {
+            const { el, waitForChanges } = await make();
+            expect(q(el, '[part="favorite"]')).toBeNull();
+            el.favoritable = true;
+            await waitForChanges();
+            const fav = q(el, '[part="favorite"]');
+            expect(fav.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe('Favourite');
+            expect(fav.shadowRoot.querySelector('button').getAttribute('aria-pressed')).toBe('false');
+            el.favorite = true;
+            await waitForChanges();
+            expect(fav.shadowRoot.querySelector('button').getAttribute('aria-pressed')).toBe('true');
+            expect(fav.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe('Favourite');
+        });
+        it('toggles on click, emitting bsFavoriteChange with the new value', async () => {
+            const { el, waitForChanges } = await make({ favoritable: true });
+            const seen = [];
+            el.addEventListener('bsFavoriteChange', (e) => seen.push(e.detail.favorite));
+            const click = () => q(el, '[part="favorite"]').shadowRoot.querySelector('button').click();
+            click();
+            await waitForChanges();
+            expect(el.favorite).toBe(true);
+            expect(el.hasAttribute('favorite')).toBe(true);
+            click();
+            await waitForChanges();
+            expect(el.favorite).toBe(false);
+            expect(seen).toEqual([true, false]);
+        });
+        it('keeps the old value when bsFavoriteChange is cancelled', async () => {
+            const { el, waitForChanges } = await make({ favoritable: true });
+            el.addEventListener('bsFavoriteChange', (e) => e.preventDefault());
+            q(el, '[part="favorite"]').shadowRoot.querySelector('button').click();
+            await waitForChanges();
+            expect(el.favorite).toBe(false);
+        });
+    });
+    it('draws the divider under the tabs only when there are tabs and the header is not compact', async () => {
+        const { el, waitForChanges } = await make();
+        expect(q(el, '[part="divider"]')).not.toBeNull();
+        el.compact = true;
+        await waitForChanges();
+        expect(q(el, '[part="divider"]')).toBeNull();
+        const { el: noTabs } = await make({}, 1100, [Trail()]);
+        expect(q(noTabs, '[part="divider"]')).toBeNull();
+    });
+    describe('compact', () => {
+        it('is sticky, with the level 2 shadow, a token z-index, and no breadcrumb or tabs', async () => {
+            const { el } = await make({ compact: true, back: true });
+            expect(el.hasAttribute('compact')).toBe(true);
+            const host = getComputedStyle(el);
+            expect(host.position).toBe('sticky');
+            expect(host.top).toBe('0px');
+            expect(host.zIndex).toBe('200');
+            const box = getComputedStyle(q(el, '[part="container"]'));
+            expect(box.boxShadow).toContain('0px 2px 4px');
+            expect(getComputedStyle(q(el, '[part="breadcrumb"]')).display).toBe('none');
+            expect(getComputedStyle(q(el, '[part="tabs"]')).display).toBe('none');
+        });
+        it('is one row of 80px with the meta inline after the title', async () => {
+            const { el } = await make({ compact: true, back: true, meta: 'Nordlys Handel AS · 4 250,00 kr' });
+            expect(Math.round(q(el, '[part="container"]').getBoundingClientRect().height)).toBe(80);
+            const title = q(el, '[part="title"]').getBoundingClientRect();
+            const meta = q(el, '[part="meta"]').getBoundingClientRect();
+            expect(meta.left).toBeGreaterThanOrEqual(title.right - 1);
+            expect(Math.abs(meta.top + meta.height / 2 - (title.top + title.height / 2))).toBeLessThan(4);
+        });
+        it('honours --bs-page-header-sticky-offset', async () => {
+            const { el } = await make({ compact: true });
+            el.style.setProperty('--bs-page-header-sticky-offset', '64px');
+            expect(getComputedStyle(el).top).toBe('64px');
+        });
+        it('sticks to the top of its scroll container', async () => {
+            const r = await render(h("div", { id: "scroller", style: { height: '200px', overflow: 'auto' } }, h("bs-page-header", { compact: true, heading: "Invoices", meta: "x" }), h("div", { style: { height: '1200px' } })));
+            const scroller = r.root;
+            scroller.scrollTop = 500;
+            await new Promise(res => setTimeout(res, 50));
+            const top = r.root.querySelector('bs-page-header').getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+            expect(Math.round(top)).toBe(0);
+        });
+    });
+    describe('narrow container', () => {
+        it('wraps the actions below the title block without overflowing, at 320px', async () => {
+            const { el } = await make({ back: true, favoritable: true }, 320);
+            const main = q(el, '[part="main"]').getBoundingClientRect();
+            const actions = q(el, '[part="actions"]').getBoundingClientRect();
+            expect(actions.top).toBeGreaterThanOrEqual(main.bottom - 1);
+            const host = el.getBoundingClientRect();
+            expect(host.width).toBe(320);
+            expect(el.scrollWidth).toBeLessThanOrEqual(320);
+            for (const b of Array.from(el.querySelectorAll('[slot="actions"]'))) {
+                const r = b.getBoundingClientRect();
+                expect(r.right).toBeLessThanOrEqual(host.right + 0.5);
+                expect(r.height).toBeGreaterThanOrEqual(44);
+            }
+        });
+        it('makes the built-in back and favourite buttons 44px', async () => {
+            const { el } = await make({ back: true, favoritable: true }, 375);
+            expect(q(el, '[part="back"]').getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
+            expect(q(el, '[part="favorite"]').getBoundingClientRect().width).toBeGreaterThanOrEqual(44);
+        });
+        it('lets a long title and the meta wrap, and scrolls the tab row inside itself', async () => {
+            const long = 'Invoice INV-2041 for Nordlys Handel AS and a very long supplementary description that must wrap';
+            const { el } = await make({ heading: long, meta: long, back: true }, 320, [
+                Trail(),
+                Status(),
+                Actions(),
+                h("bs-tabs", { slot: "tabs", type: "bs-tab" }, ['Overview', 'Lines', 'Payments', 'Activity', 'Attachments', 'History'].map(t => (h("bs-tab", null, t)))),
+            ]);
+            expect(el.scrollWidth).toBeLessThanOrEqual(320);
+            expect(q(el, '[part="heading"]').getBoundingClientRect().height).toBeGreaterThan(40);
+            const tabs = q(el, '[part="tabs"]');
+            expect(getComputedStyle(tabs).overflowX).toBe('auto');
+            expect(tabs.scrollWidth).toBeGreaterThan(tabs.clientWidth);
+            expect(tabs.getBoundingClientRect().right).toBeLessThanOrEqual(320);
+        });
+        it('keeps the wide layout (actions beside the title) at 640px and wider', async () => {
+            const { el } = await make({}, 640);
+            const main = q(el, '[part="main"]').getBoundingClientRect();
+            const actions = q(el, '[part="actions"]').getBoundingClientRect();
+            expect(actions.left).toBeGreaterThanOrEqual(main.right - 1);
+            expect(actions.top).toBeLessThan(main.bottom);
+        });
+    });
+    it('has no axe violations in each configuration', async () => {
+        const configs = [
+            [{}, 1100],
+            [{ back: true, favoritable: true }, 1100],
+            [{ back: true, favoritable: true, favorite: true }, 375],
+            [{ compact: true, back: true }, 1100],
+        ];
+        for (const [props, width] of configs) {
+            const { el } = await make(props, width);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`), JSON.stringify(props)).toEqual([]);
+        }
+    });
+});