@brandsync/wc 1.17.0 → 1.18.0

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

@@ -0,0 +1,351 @@
+import { h } from "@stencil/core";
+const SLOT_NAMES = ['breadcrumb', 'status', 'meta', 'actions', 'tabs'];
+/**
+ * The header at the top of a page's content area: breadcrumb trail, the page title (a real heading) with an
+ * optional back button, status and favourite toggle, a meta line, page-level actions on the right and an
+ * optional row of tabs. Matches the Figma "Page header" (types List page, Record, Record with tabs and Sticky
+ * compact).
+ *
+ * Built from `bs-breadcrumbs`/`bs-breadcrumb` (slotted by you), `bs-icon-button` (the built-in back and favourite
+ * buttons), `bs-chip-informative` (the status you slot), `bs-button` and `bs-icon-button` (the actions you slot),
+ * `bs-tabs`/`bs-tab` (the tab row you slot) and `bs-divider` (under the tabs). The title block, meta line and
+ * actions area are plain layout markup, because no component covers them. The back arrow and the star are
+ * inline SVG (Phosphor "arrow-left", "star" and "star-fill") until the library has an icon component.
+ *
+ * ## Compact (sticky)
+ * `compact` is the condensed state a record header takes once the page scrolls: one row (back, title, status,
+ * meta inline, actions), a level 2 shadow, no breadcrumb and no tabs, and `position: sticky`. Set it yourself
+ * from a scroll observer. Because the header covers the top of the scroll area, give the scroll container
+ * `scroll-padding-top` equal to its height (80px by default) so focused or anchored content is not hidden under it.
+ *
+ * ## Responsive
+ * The header reacts to its own width (a container query), not the viewport's. Below 640px the actions wrap
+ * below the title block, slotted buttons grow to 44px tall, the title and meta wrap, and the tab row scrolls
+ * sideways inside itself. The page never gets wider.
+ *
+ * ## When to use
+ * - The top of a list page or a single record (an invoice, a customer) inside the app shell's content area.
+ *
+ * ## When not to use
+ * - The app-wide bar with logo, search and user: use `bs-navigation-header`.
+ * - The heading of a card, dialog or panel: use that component's own `heading`.
+ *
+ * ## Accessibility notes
+ * The root is a plain `div`, not a `<header>`: a `<header>` that is not inside `<main>`/`<article>`/`<section>`
+ * is a second banner landmark. The title is a real heading (`<h1>` by default, `headingLevel` 1 to 6); the
+ * status is next to it, not inside it. If you want a landmark, wrap `bs-page-header` yourself.
+ *
+ * @slot breadcrumb - A `bs-breadcrumbs` trail, shown above the title. Not shown when `compact`.
+ * @slot status - A status chip next to the title, e.g. `<bs-chip-informative color="error" size="sm">Overdue</bs-chip-informative>`.
+ * @slot meta - The line under the title (inline after it when `compact`). Overrides the `meta` prop. Plain text.
+ * @slot actions - The page-level actions on the right, e.g. `bs-button`s and an icon-only "more" `bs-icon-button`.
+ * @slot tabs - A `bs-tabs` row under the meta line. Not shown when `compact`.
+ * @part container - The root element.
+ * @part breadcrumb - The breadcrumb area.
+ * @part row - The row holding the title block and the actions.
+ * @part main - The title block (back button, title row and meta).
+ * @part back - The back `bs-icon-button`.
+ * @part title - The row holding the heading, status and favourite button.
+ * @part heading - The heading element.
+ * @part status - The status area.
+ * @part favorite - The favourite `bs-icon-button`.
+ * @part meta - The meta line.
+ * @part actions - The actions area.
+ * @part tabs - The tab row (scrolls sideways when narrow).
+ * @part divider - The `bs-divider` under the tabs.
+ * @prop --bs-page-header-bg - Background. Aliased to `--bs-surface-base`.
+ * @prop --bs-page-header-padding-x - Left and right padding. Aliased to `--bs-spacing-200`.
+ * @prop --bs-page-header-padding-y - Top and bottom padding. Aliased to `--bs-spacing-300`.
+ * @prop --bs-page-header-gap - Gap between the breadcrumb, title block and tabs, and between the title block and the actions. Aliased to `--bs-spacing-150`.
+ * @prop --bs-page-header-title-gap - Gap between the heading, status and favourite button. Aliased to `--bs-spacing-150`.
+ * @prop --bs-page-header-actions-gap - Gap between the actions. Aliased to `--bs-spacing-100`.
+ * @prop --bs-page-header-text-color - Heading. Aliased to `--bs-text-default`.
+ * @prop --bs-page-header-meta-color - Meta line. Aliased to `--bs-text-secondary`.
+ * @prop --bs-page-header-shadow - Shadow of the compact header (elevation level 2). Aliased to the `--bs-shadow-*` position and blur tokens and `--bs-elevation-medium`.
+ * @prop --bs-page-header-sticky-offset - The `top` of the compact header. Defaults to `0px`; set it to the height of a sticky bar above (e.g. the navigation header).
+ * @prop --bs-page-header-z-index - Stacking order of the compact header. Aliased to `--bs-z-index-sticky`.
+ */
+export class BsPageHeader {
+    el;
+    /** The page title, rendered as the heading. */
+    heading;
+    /** HTML heading level for the title, 1 to 6. Use 1 unless the page already has its own `h1`. */
+    headingLevel = 1;
+    /** The line under the title, plain text, e.g. "214 invoices · 38 open". The `meta` slot overrides it. */
+    meta;
+    /** The condensed, sticky state: one row, a level 2 shadow, no breadcrumb and no tabs. Reflected. */
+    compact = false;
+    /** Shows a back button before the title. It emits `bsBack`; you navigate. */
+    back = false;
+    /** Accessible name of the back button. */
+    backLabel = 'Back';
+    /** Shows the favourite (star) toggle after the title. */
+    favoritable = false;
+    /** Whether the record is a favourite. Mutable: it follows the user's toggle unless `bsFavoriteChange` is cancelled. */
+    favorite = false;
+    /** Accessible name of the favourite toggle. It stays the same in both states; `aria-pressed` carries the state. */
+    favoriteLabel = 'Favourite';
+    /** Fires when the back button is clicked. Not cancelable: the component has no default action to cancel. */
+    bsBack;
+    /** Fires when the user toggles the favourite button, with the new value. Cancelable: `preventDefault()` keeps the old value. */
+    bsFavoriteChange;
+    slotted = { breadcrumb: false, status: false, meta: false, actions: false, tabs: false };
+    componentWillLoad() {
+        // A slot that is empty from the start never fires `slotchange`, so read the light DOM once up front.
+        this.slotted = Object.fromEntries(SLOT_NAMES.map(n => [n, !!this.el.querySelector(`:scope > [slot="${n}"]`)]));
+    }
+    onSlotChange = (name) => (ev) => {
+        const has = ev.target.assignedNodes().length > 0;
+        if (has !== this.slotted[name])
+            this.slotted = { ...this.slotted, [name]: has };
+    };
+    onFavoriteClick = () => {
+        const next = !this.favorite;
+        const e = this.bsFavoriteChange.emit({ favorite: next });
+        if (!e.defaultPrevented)
+            this.favorite = next;
+    };
+    render() {
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
+        const showMeta = !!this.meta || this.slotted.meta;
+        const hasTabs = this.slotted.tabs && !this.compact;
+        return (h("div", { key: 'c67fc2b33ae942872040751d548fb82702032f9f', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, h("div", { key: '032d58b0072e17bd8eeb60afb5a719899a56691b', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, h("slot", { key: 'baed539fafc7704bbcddf66aff9109e0d6366d67', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), h("div", { key: '7f001cac1f29a8dd805830df98b367cee74fd46f', part: "row", class: "bs-page-header__row" }, h("div", { key: 'c287bdcf1e22feb88bfbc3623cc2ff8765b798d0', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (h("bs-icon-button", { key: '98d23c039d1f864de2a3a814ffc66c69e613d88d', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, h(ArrowLeftIcon, { key: 'dd9d3aec3e3bd8e8d5423b7fbf3d899693f2a47d' }))), h("div", { key: '8b2c60f98bcf538bb6419d37180c87f921d3efc1', part: "title", class: { 'bs-page-header__title': true, 'bs-page-header__title--controls': this.back || this.favoritable } }, h(`h${level}`, { part: 'heading', class: { 'bs-page-header__heading': true } }, this.heading), h("span", { key: 'c2b98f908942e93bfd6c8711c7097b77fdf9c449', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, h("slot", { key: '7a0be9e27bd1b1b4fb5ce5122056ea1b79d85e3a', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (h("bs-icon-button", { key: 'be19b70ac6c5a0a560bf2d3402c146844b5bb81b', part: "favorite", class: "bs-page-header__favorite", variant: "subtle", size: "sm", ariaLabel: this.favoriteLabel, pressed: this.favorite, onClick: this.onFavoriteClick }, this.favorite ? h(StarFillIcon, null) : h(StarIcon, null)))), h("div", { key: '5c4c5aeb64bf508031607455f65c67a7b6fc89ce', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, h("slot", { key: '75d3cbe844e0ecee9ed9f2457591fd418405b931', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), h("div", { key: 'a8f6d7929d7c49066f987f9acc665ef42404059b', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, h("slot", { key: '84a69af01b82f153b965c981d80bda4561b9d8a7', name: "actions", onSlotchange: this.onSlotChange('actions') }))), h("div", { key: 'fdd15239c429c8800b91aac17fff8cd78bbfc589', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, h("slot", { key: '892ecc16b598a39b706e807c67fb8b4b7a6e7cad', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && h("bs-divider", { key: '7397b2cfc7faca637442ba7d0460a1ec396504a3', part: "divider", class: "bs-page-header__divider", decorative: true })));
+    }
+    static get is() { return "bs-page-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-page-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-page-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The page title, rendered as the heading."
+                },
+                "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 title, 1 to 6. Use 1 unless the page already has its own `h1`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "1"
+            },
+            "meta": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The line under the title, plain text, e.g. \"214 invoices \u00B7 38 open\". The `meta` slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "meta"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The condensed, sticky state: one row, a level 2 shadow, no breadcrumb and no tabs. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "back": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a back button before the title. It emits `bsBack`; you navigate."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "back",
+                "defaultValue": "false"
+            },
+            "backLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the back button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "back-label",
+                "defaultValue": "'Back'"
+            },
+            "favoritable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the favourite (star) toggle after the title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "favoritable",
+                "defaultValue": "false"
+            },
+            "favorite": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the record is a favourite. Mutable: it follows the user's toggle unless `bsFavoriteChange` is cancelled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "favorite",
+                "defaultValue": "false"
+            },
+            "favoriteLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the favourite toggle. It stays the same in both states; `aria-pressed` carries the state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "favorite-label",
+                "defaultValue": "'Favourite'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "slotted": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsBack",
+                "name": "bsBack",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the back button is clicked. Not cancelable: the component has no default action to cancel."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsFavoriteChange",
+                "name": "bsFavoriteChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the user toggles the favourite button, with the new value. Cancelable: `preventDefault()` keeps the old value."
+                },
+                "complexType": {
+                    "original": "{ favorite: boolean }",
+                    "resolved": "{ favorite: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+// Paths from Phosphor Icons (MIT) "arrow-left", "star" and "star-fill", regular/fill weights, 256 viewBox.
+const ArrowLeftIcon = () => (h("svg", { viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z" })));
+const StarIcon = () => (h("svg", { viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z" })));
+const StarFillIcon = () => (h("svg", { viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" })));

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

@@ -0,0 +1,177 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { componentDescription } from "../../stories-utils";
+import exportIcon from "@phosphor-icons/core/assets/regular/download-simple.svg?inline";
+import plusIcon from "@phosphor-icons/core/assets/regular/plus.svg?inline";
+import moreIcon from "@phosphor-icons/core/assets/bold/dots-three-bold.svg?inline";
+import mailIcon from "@phosphor-icons/core/assets/regular/envelope-simple.svg?inline";
+/** Phosphor (regular) icons as monochrome SVG data URIs; a real app supplies its own. */
+export const ICONS = { export: exportIcon, plus: plusIcon, more: moreIcon, mail: mailIcon };
+/** Sample data (invented for the stories and tests; not real invoices, customers or amounts). */
+export const SAMPLE = {
+    heading: 'Invoices',
+    listMeta: '214 invoices · 38 open · 5 overdue',
+    customerMeta: 'Nordlys Handel AS · 4 250,00 kr',
+};
+/** An icon painted from a monochrome SVG URL in the surrounding text colour, sized by the slot (1em). */
+const icon = (url) => {
+    const mask = `url("${url}") center / contain no-repeat`;
+    return html `<span aria-hidden="true" style=${styleMap({ display: 'block', width: '100%', height: '100%', background: 'currentColor', '-webkit-mask': mask, mask })}></span>`;
+};
+const trail = (record) => html `
+  <bs-breadcrumbs slot="breadcrumb" label="Breadcrumb">
+    <bs-breadcrumb href="#sales">Sales</bs-breadcrumb>
+    <bs-breadcrumb href="#invoices" ?current=${!record}>Invoices</bs-breadcrumb>
+    ${record ? html `<bs-breadcrumb current>INV-2041</bs-breadcrumb>` : ''}
+  </bs-breadcrumbs>
+`;
+const status = html `<bs-chip-informative slot="status" color="error" size="sm">Overdue</bs-chip-informative>`;
+const more = html `<bs-icon-button slot="actions" variant="outlined" size="sm" aria-label="More actions" style="--bs-icon-button-icon-size-sm: var(--bs-scale-250)">${icon(ICONS.more)}</bs-icon-button>`;
+const listActions = html `
+  <bs-button slot="actions" variant="outlined" size="sm"><span slot="icon" style="font-size: var(--bs-scale-250)">${icon(ICONS.export)}</span>Export</bs-button>
+  <bs-button slot="actions" variant="primary" size="sm"><span slot="icon" style="font-size: var(--bs-scale-250)">${icon(ICONS.plus)}</span>New invoice</bs-button>
+  ${more}
+`;
+const recordActions = html `
+  <bs-button slot="actions" variant="outlined" size="sm"><span slot="icon" style="font-size: var(--bs-scale-250)">${icon(ICONS.mail)}</span>Send reminder</bs-button>
+  <bs-button slot="actions" variant="primary" size="sm">Register payment</bs-button>
+  ${more}
+`;
+const tabs = html `
+  <bs-tabs slot="tabs" type="bs-tab" value="overview">
+    <bs-tab value="overview" selected>Overview</bs-tab>
+    <bs-tab value="lines">Lines</bs-tab>
+    <bs-tab value="payments">Payments</bs-tab>
+    <bs-tab value="activity">Activity</bs-tab>
+    <bs-tab value="attachments">Attachments</bs-tab>
+  </bs-tabs>
+`;
+const meta = {
+    title: 'Components/bs-page-header',
+    excludeStories: /^[A-Z0-9_]+$/,
+    parameters: { layout: 'fullscreen', docs: { description: { component: componentDescription('bs-page-header') } } },
+    argTypes: {
+        heading: { control: 'text' },
+        headingLevel: { control: { type: 'number', min: 1, max: 6 } },
+        meta: { control: 'text' },
+        compact: { control: 'boolean' },
+        back: { control: 'boolean' },
+        favoritable: { control: 'boolean' },
+        favorite: { control: 'boolean' },
+        backLabel: { control: 'text' },
+        favoriteLabel: { control: 'text' },
+    },
+    args: { heading: SAMPLE.heading, headingLevel: 1, meta: SAMPLE.listMeta, compact: false, back: false, favoritable: false, favorite: false, backLabel: 'Back', favoriteLabel: 'Favourite' },
+    render: args => html `
+    <bs-page-header
+      .heading=${args.heading}
+      .headingLevel=${args.headingLevel}
+      .meta=${args.meta}
+      .compact=${args.compact}
+      .back=${args.back}
+      .favoritable=${args.favoritable}
+      .favorite=${args.favorite}
+      .backLabel=${args.backLabel}
+      .favoriteLabel=${args.favoriteLabel}
+    >
+      ${trail(false)} ${listActions}
+    </bs-page-header>
+  `,
+};
+export default meta;
+/** Type "List page": breadcrumb, title, a meta line and the page actions on the right. */
+export const ListPage = { name: 'List page' };
+/** Type "Record": back button, status chip and favourite toggle beside the title; the meta line lines up with the title. */
+export const Record = {
+    args: { back: true, favoritable: true, meta: SAMPLE.listMeta },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .headingLevel=${args.headingLevel} .meta=${args.meta} back favoritable .favorite=${args.favorite}>
+      ${trail(true)} ${status} ${recordActions}
+    </bs-page-header>
+  `,
+};
+/** Type "Record with tabs": a `bs-tabs` row under the meta line with a full-width divider below it. */
+export const RecordWithTabs = {
+    name: 'Record with tabs',
+    args: { back: true, favoritable: true },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .headingLevel=${args.headingLevel} .meta=${args.meta} back favoritable .favorite=${args.favorite}>
+      ${trail(true)} ${status} ${recordActions} ${tabs}
+    </bs-page-header>
+  `,
+};
+/** Type "Sticky compact": one row with an inline meta and a level 2 shadow. Scroll the box: the header stays at the top. */
+export const StickyCompact = {
+    name: 'Sticky compact',
+    args: { compact: true, back: true, meta: SAMPLE.customerMeta },
+    render: args => html `
+    <div
+      role="region"
+      aria-label="Scrollable page (sample)"
+      tabindex="0"
+      style="height: 360px; overflow: auto; scroll-padding-top: 80px; background: var(--bs-surface-base);"
+    >
+      <bs-page-header compact .heading=${args.heading} .headingLevel=${args.headingLevel} .meta=${args.meta} back>
+        ${status} ${recordActions}
+      </bs-page-header>
+      <div style="padding: var(--bs-spacing-300) var(--bs-spacing-200); font-family: sans-serif; color: var(--bs-text-secondary);">
+        ${Array.from({ length: 14 }, (_, i) => html `<p>Page content (sample), paragraph ${i + 1}. The compact header stays at the top while this scrolls.</p>`)}
+      </div>
+    </div>
+  `,
+};
+/** A favourited record: the star is filled and the button reports `aria-pressed="true"`. */
+export const Favourited = {
+    args: { back: true, favoritable: true, favorite: true },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .meta=${args.meta} back favoritable .favorite=${args.favorite}>
+      ${trail(true)} ${status} ${recordActions}
+    </bs-page-header>
+  `,
+};
+/** No actions and no status: the title block and the meta line only. */
+export const NoActions = {
+    name: 'No actions',
+    render: args => html `<bs-page-header .heading=${args.heading} .meta=${args.meta}>${trail(false)}</bs-page-header>`,
+};
+/** A long title wraps inside the title block; the status, favourite toggle and actions stay in place. */
+export const LongTitle = {
+    name: 'Long title',
+    args: {
+        back: true,
+        favoritable: true,
+        heading: 'Invoice INV-2041 for Nordlys Handel AS, delivery of seasonal goods for the autumn campaign and winter stock',
+        meta: 'Issued 3 September · due 3 October · 4 250,00 kr',
+    },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .meta=${args.meta} back favoritable>${trail(true)} ${status} ${recordActions}</bs-page-header>
+  `,
+};
+const PHONE_VIEWPORT = {
+    options: { phone375: { name: 'Phone (375px)', styles: { width: '375px', height: '812px' }, type: 'mobile' } },
+};
+/** The Record with tabs at 375px: actions wrap below the title, buttons are 44px tall, the tabs scroll inside their row. */
+export const Mobile = {
+    parameters: { layout: 'fullscreen', viewport: PHONE_VIEWPORT },
+    globals: { viewport: { value: 'phone375', isRotated: false } },
+    args: { back: true, favoritable: true },
+    render: args => html `
+    <bs-page-header .heading=${args.heading} .meta=${args.meta} back favoritable>${trail(true)} ${status} ${recordActions} ${tabs}</bs-page-header>
+  `,
+};
+/** Wired up: click back or the star; the last event is printed below. `bsFavoriteChange` is cancelable. */
+export const Interactive = {
+    args: { back: true, favoritable: true },
+    render: args => {
+        const wrap = document.createElement('div');
+        const out = document.createElement('output');
+        out.style.cssText = 'display:block;padding:8px 16px;font:14px/20px monospace;color:var(--bs-text-secondary)';
+        out.textContent = 'Click the back arrow or the star.';
+        const ph = document.createElement('bs-page-header');
+        Object.assign(ph, { heading: args.heading, meta: args.meta, back: true, favoritable: true });
+        ph.addEventListener('bsBack', () => (out.textContent = 'bsBack'));
+        ph.addEventListener('bsFavoriteChange', e => (out.textContent = `bsFavoriteChange favorite=${e.detail.favorite}`));
+        wrap.append(ph, out);
+        return wrap;
+    },
+};

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

@@ -91,7 +91,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: '8f88672d0c1402df24990f7632d4f2180627a624', "aria-label": this.navLabel }, h("ul", { key: '3b1359e867cfab58a215c521f4d46df75d3b9e0a', part: "list", class: "bs-pagination__list" }, h("li", { key: '462c761e4cd0938802ef0ede5e8fdcf072bed7dc', part: "item", class: "bs-pagination__item" }, h("button", { key: '01c0f0eeee2644def4f41aaec427bc77b0a3d948', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: '6c4587384f3b0a6ff8431d6a6f637bdebf134707' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: 'cb2ac831de208292505cf53c7c4c1baedb639e1c', part: "item", class: "bs-pagination__item" }, h("button", { key: '3cf295a9a8457013da89db054e863f8bc9fcdf75', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: 'ead52f0b11ae9253828f41def167536914b3ac90' }))))));
+        return (h("nav", { key: 'ea5d0b85f962dd1e92533f6995072f048b562026', "aria-label": this.navLabel }, h("ul", { key: 'd8bd25cb99175486a7d47b10a01dec6e84d31000', part: "list", class: "bs-pagination__list" }, h("li", { key: 'cb00b60f5a1b2b3b6da3e8ca8c3842694377a60d', part: "item", class: "bs-pagination__item" }, h("button", { key: '567d93ab292428f0f84fa0e006d76214cfc39e22', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'd83a3dc7a3e913a7b302bb9e5beab31c5bc2987c' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '4904d32b1ce60efff4810a0a47453dcf6d1a515b', part: "item", class: "bs-pagination__item" }, h("button", { key: '4eb744abe27134d51fbf80bbedb3d0281afb7f71', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: 'e7b62fd1cbf5263c94fa3482ebc094b367f5e6ca' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -152,7 +152,7 @@ export class BsPopover {
         }
     };
     render() {
-        return (h("div", { key: 'da517e23c7a7028088ce255b01d7e1a2e6517804', class: "bs-popover" }, h("div", { key: '6acca226b72b7c22f77e7e507c26a56d5e5d56a3', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '877e07422f0e85bfe3b85d0029b1df425516aaf2', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: 'f9da851d41e4bdbf6bcd41dcf2e3de7a6f2c61b6', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open, ref: el => (this.popupEl = el) }, h("slot", { key: 'd3dc628e79868aab472a6cd6e074e2d7d880ffb0' }))));
+        return (h("div", { key: 'a98416df7a3b9edbbac835ea99150bd22e21d0b1', class: "bs-popover" }, h("div", { key: 'd69eb18d28a99bd22d14a40167c1a5f9d4ed09e5', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '3b6242971ba9f2bcccfdddfe15b564b3deef1eec', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: '0d815e6f7ec731e5643891784b35df2cb635a6a9', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open, ref: el => (this.popupEl = el) }, h("slot", { key: '8e455726291b8f4faaaf1f1fee190047cbd9525b' }))));
     }
     static get is() { return "bs-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: '92ba206f6dbe83e68a85561b8a10053a8bf57867', part: "container", class: "bs-progress" }, h("div", { key: '0ed35ee9e002261c4ea786794c3a725fbecfd967', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (h("div", { key: '76f9b0175af7e6300a901f8c0e26da4b9de2a192', part: "container", class: "bs-progress" }, h("div", { key: '10d34faab3d49fa21e72d0cf2bd1d1c2804ef442', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -78,7 +78,7 @@ export class BsProgress {
         h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (h("span", { key: 'c81ebae20e37059d3f0a695b085dc50249cf2c9c', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: 'bfc9b155c8b8d68255a0ad223e31bc25f79566b8', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-progress-linear/bs-progress-linear.js

@@ -51,13 +51,13 @@ export class BsProgressLinear {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (h("div", { key: 'fb99c576009fc4b829a0cda6fbe9191d052277b9', part: "container", class: "bs-progress-linear" }, h("div", { key: 'f9d4ec6e1548b87285ca3d23238fbf20d8f29213', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
+        return (h("div", { key: '8cb0ed265f5fae4146ace2ff2cb4e9876b0011c6', part: "container", class: "bs-progress-linear" }, h("div", { key: '62b448cc83f5b317b41277c414cf7712ef4ee1b5', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
         // Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
         // transparent) sliding left-to-right across the track's full width in a loop -- the
         // same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
         // but along a straight line via a linear-gradient + `transform: translateX(...)`
         // keyframe animation instead of a rotating conic-gradient.
-        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '459e2ced94dfb34c99ad390f0b95c58727fcb4d9', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'd7aff9f3079b2973665f5531a44031869366b6e3' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '26e60beb19a7f45a903667928d7256a4d24875c9', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'ca9c57dc3b3ee22eedf489ee4e6b3444f85b59df' })))));
     }
     // The default slot's assigned content lives in the host's light DOM regardless of whether a
     // <slot> is currently rendered in the shadow tree, so this can be computed directly from the

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

@@ -168,7 +168,7 @@ export class BsQrCode {
         const buttonSize = this.size === 'sm' ? 'sm' : 'md';
         // Figma shows the unavailable actions as filled-disabled (grey) rather than a faded outline,
         // which is what bs-button's disabled primary looks like.
-        return (h("bs-card", { key: '4e5a86e053974ebdd585f6a378c4b2c9dfe80b92', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'e320cf76ecac7018040488ac27dbf74eb57fe46b', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '92792abcf2ec2df4c9cd916947ffd3e9f11db2e6', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'fd6ad7be66a5c4f0eb34838fb259a4f85626205a', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: 'a466aa00a2cc54d8b24e39cf77b8a29af6a0eb10', class: "bs-qr-code__body" }, h("div", { key: '420d6f114ef12648082c5639b76e79511529ec8f', part: "head", class: "bs-qr-code__head" }, h("p", { key: '95226c84a8a6fa9e69366dcafa469a86e7e2e915', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: 'b3c8ac38d020d2ba3b33471ea75cd818671f794b', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '5cfc86b8a5070a055e14a37a2c8f0903efa928f1', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: 'ca3698846a9360e944206062a7f557a235966ffc', part: "code", class: "bs-qr-code__code" }, h("slot", { key: '77c2abe0217050d736029c899d8da67de3a9a77b', name: "code" }, this.renderMatrix()), h("div", { key: 'd9f29820aeca8366b7e2a58b66952b2cdce93aa4', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: '0cb7978ca6481ad25e3b7f597c632f6cffcc7c3a', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '4ccc499546fa09ff29b4f518069eb8220e0aec54', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '3f7a6799cd4a76fe985a2e4e6c3852c670443802', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: 'd3f49278308cd98b5c39fcee779335d0c565c424', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '55a59da6ba6c147b317d4e54fdf866887947abe4', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: 'b84c9a68ab60a4d0f0a5b844eba4b24d7ad3557a', part: "expiry", size: "md" }, h(TimerIcon, { key: 'cde3b75e0116fa9d8f7e90cc7aebe6aa799650a2', slot: "icon" }), this.expiry)), showActions && (h("div", { key: '1007f98a49a793775512c9d57ea44951a1294bf9', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '1da4900056da20ee071ef9421e2d4c003b957955', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: '8f2011be9477c936f939e7150e3332af4c827d0d', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: 'a47912896e8d99fe05847c332c164e8d63be63f6', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '7a78f3459c29d3b190dba3385adb3b1c61d7e0d5', slot: "icon" }), this.copyLabel)))))));
+        return (h("bs-card", { key: 'c69bffccb96c2c76fabc8a68caa33598d330925c', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'eddf5fd0434ef1d4a79c65cb76e643f5607c3690', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '04751b373bc8ccf24b0777646598f6b0b594dd1d', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'e40257103cb9c062af6806874a44cc4050b91a09', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '55689fd3950bf8a52fcc13e51447b329414c846d', class: "bs-qr-code__body" }, h("div", { key: '7335ae0ae9f42fe3b99b1dc8096338c1b0d12fc4', part: "head", class: "bs-qr-code__head" }, h("p", { key: '1d6288133f9619f865782d75352e02ffbd4b3cb3', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '2ac5a838cc0d524b726363a5711fcfd3558e7738', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '2412e4792a4ba605c3e8c68652600901f00fbd9c', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '480f7b27bdb7521592cf200fa2e8a36b89742d94', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'cc20adaeea528bdaddc2187fd48d8c33b6c29984', name: "code" }, this.renderMatrix()), h("div", { key: '98ad7405250536002da78c856fe34f29101d6b8b', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'fa3ad80018891516474a16cdc74f7c40b3ff7193', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '16aea140dffc0b85679923c72ff68f73496cd382', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '4b6c14f95fbc75fa750361bedb63e06f6cf8fbfa', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '23ef126293fe71e364e2fe6d8bf7e9570a0a8073', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '055769372c728d26f4a7b0ca15b4c1e9d9182f85', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '2bda390d9e14ba387015619c5d51c136f344d42c', part: "expiry", size: "md" }, h(TimerIcon, { key: 'daa9d8dd4b9dbbc3f0a01d4c203020a7a128e3e4', slot: "icon" }), this.expiry)), showActions && (h("div", { key: '42fdca6de6985912a93580b60a69b06de86ab240', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: 'da9f965b3c996842c2f7c853b12baa7cd1523d0b', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'c0ff457c873583ba21dc0ef936b5b75723170921', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: '023df4653bdbcf8440c511818a27f8363218c202', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '0abdffdb59b543625340be0af0bfabd21fa57bca', slot: "icon" }), this.copyLabel)))))));
     }
     static get is() { return "bs-qr-code"; }
     static get encapsulation() { return "shadow"; }