@brandsync/wc 1.17.0 → 1.19.0

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

@@ -0,0 +1,252 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  /* The header reacts to its own width (it sits in a page's content area), not the viewport's. */
+  container-type: inline-size;
+  max-width: 100%;
+  --bs-page-header-bg: var(--bs-surface-base);
+  --bs-page-header-padding-x: var(--bs-spacing-200);
+  --bs-page-header-padding-y: var(--bs-spacing-300);
+  --bs-page-header-gap: var(--bs-spacing-150);
+  --bs-page-header-title-gap: var(--bs-spacing-150);
+  --bs-page-header-actions-gap: var(--bs-spacing-100);
+  --bs-page-header-text-color: var(--bs-text-default);
+  --bs-page-header-meta-color: var(--bs-text-secondary);
+  --bs-page-header-shadow: var(--bs-shadow-position-0) var(--bs-shadow-position-25) var(--bs-shadow-blur-50) var(--bs-elevation-medium);
+  --bs-page-header-sticky-offset: 0px;
+  --bs-page-header-z-index: var(--bs-z-index-sticky);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* The compact header is the condensed state of a record header once the page scrolls: it sticks to the top of
+   its scroll container. Its own height is 80px, so give that container scroll-padding-top of the same size. */
+:host([compact]) {
+  position: sticky;
+  top: var(--bs-page-header-sticky-offset);
+  z-index: var(--bs-page-header-z-index);
+}
+
+.bs-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-page-header-gap);
+  box-sizing: border-box;
+  padding: var(--bs-page-header-padding-y) var(--bs-page-header-padding-x);
+  background: var(--bs-page-header-bg);
+  color: var(--bs-page-header-text-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+}
+
+/* An empty slot's wrapper is removed from layout so it adds no gap. `display: none` keeps the slot assigned, so
+   slotchange still fires when content is added later. */
+.bs-page-header .bs-page-header__empty {
+  display: none;
+}
+
+.bs-page-header__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-page-header-gap);
+}
+
+/* Title block: [back] [title row] on the first row, the meta line under the title (aligned with it, not the back
+   button). */
+.bs-page-header__main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.bs-page-header__main--back {
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--bs-spacing-100);
+}
+
+.bs-page-header__back {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+}
+
+.bs-page-header__title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--bs-page-header-title-gap);
+  min-width: 0;
+  grid-row: 1;
+  grid-column: -2 / -1;
+}
+
+.bs-page-header__title--controls {
+  min-height: var(--bs-scale-500);
+}
+
+/* The built-in back and favourite icons are 20px, as in the Figma (the 40px button's default glyph is 16px). */
+.bs-page-header__back,
+.bs-page-header__favorite {
+  --bs-icon-button-icon-size-sm: var(--bs-scale-250);
+}
+
+.bs-page-header__heading {
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--bs-page-header-text-color);
+  font-family: var(--bs-typography-font-family-heading, Roboto), sans-serif;
+  font-size: var(--bs-fontsize-heading-h4);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-line-height-heading-h4) * 1px);
+}
+
+.bs-page-header__status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-page-header__meta {
+  grid-row: 2;
+  grid-column: -2 / -1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--bs-page-header-meta-color);
+  font-size: var(--bs-fontsize-body-sm);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+.bs-page-header__actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--bs-page-header-actions-gap);
+}
+
+/* The tab row. It scrolls sideways inside itself when the tabs do not fit, and never widens the page. The small
+   padding keeps the tabs' focus ring from being clipped; the divider below overlaps it so the selected tab's
+   underline sits directly on the divider. */
+.bs-page-header__tabs {
+  min-width: 0;
+  padding: var(--bs-spacing-50) var(--bs-spacing-50) var(--bs-spacing-50);
+  margin: calc(-1 * var(--bs-spacing-50)) calc(-1 * var(--bs-spacing-50)) calc(-1 * var(--bs-spacing-50));
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.bs-page-header__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+/* With tabs the header ends at the full-width divider: no bottom padding, and the divider runs edge to edge. */
+.bs-page-header--tabs {
+  padding-bottom: 0;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-page-header--tabs .bs-page-header__row {
+  margin-bottom: var(--bs-spacing-50);
+}
+
+.bs-page-header__divider {
+  margin: calc(-1 * var(--bs-spacing-50)) calc(-1 * var(--bs-page-header-padding-x)) 0;
+  width: auto;
+}
+
+/* Compact: one row of 80px (40px controls + 20px above and below), a level 2 shadow, no breadcrumb or tabs. */
+.bs-page-header--compact {
+  --bs-page-header-padding-y: var(--bs-spacing-250);
+  box-shadow: var(--bs-page-header-shadow);
+}
+
+.bs-page-header--compact .bs-page-header__breadcrumb,
+.bs-page-header--compact .bs-page-header__tabs {
+  display: none;
+}
+
+.bs-page-header--compact .bs-page-header__main {
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--bs-page-header-title-gap);
+}
+
+.bs-page-header--compact .bs-page-header__main--back {
+  grid-template-columns: auto auto minmax(0, 1fr);
+}
+
+.bs-page-header--compact .bs-page-header__back {
+  margin-inline-end: calc(-1 * var(--bs-spacing-50));
+}
+
+.bs-page-header--compact .bs-page-header__title {
+  grid-column: auto;
+}
+
+.bs-page-header--compact .bs-page-header__meta {
+  grid-row: 1;
+  grid-column: auto;
+}
+
+/* Narrow header (below 640px, where the title block and the actions stop fitting side by side; documentation
+   only -- CSS can't read a custom property in a container query): the actions wrap below the title block and
+   keep their width, the title and meta wrap, slotted buttons are at least 44px tall (--bs-scale-550), and the
+   tab row scrolls sideways inside itself. */
+@container (max-width: 639px) {
+  .bs-page-header {
+    --bs-page-header-padding-x: var(--bs-spacing-200);
+  }
+
+  .bs-page-header__row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .bs-page-header__actions {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .bs-page-header__actions ::slotted(*) {
+    flex: 0 0 auto;
+    max-width: 100%;
+  }
+
+  .bs-page-header__actions ::slotted(bs-button) {
+    --bs-button-height-sm: var(--bs-scale-550);
+  }
+
+  .bs-page-header__actions ::slotted(bs-icon-button) {
+    --bs-icon-button-size-sm: var(--bs-scale-550);
+  }
+
+  .bs-page-header__back,
+  .bs-page-header__favorite {
+    --bs-icon-button-size-sm: var(--bs-scale-550);
+  }
+
+  .bs-page-header--compact .bs-page-header__main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .bs-page-header--compact .bs-page-header__main--back {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .bs-page-header--compact .bs-page-header__back {
+    margin-inline-end: 0;
+  }
+
+  .bs-page-header--compact .bs-page-header__title {
+    grid-column: -2 / -1;
+  }
+
+  .bs-page-header--compact .bs-page-header__meta {
+    grid-row: 2;
+    grid-column: -2 / -1;
+  }
+}

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: 'bc53e187af58ecbf3d923e4a7a4c2d6753706664', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, h("div", { key: '66d18bcfa396e4b65027e204ebe78db904c353f5', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, h("slot", { key: '7160cb117c4a9734c8975ef5dfdd0562465736e7', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), h("div", { key: '16f1c1ebf185d8900a900a262fcbbdf0b5fd9670', part: "row", class: "bs-page-header__row" }, h("div", { key: '9d97f5e3235be3c947253248c0473aa390da2892', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (h("bs-icon-button", { key: 'c9a71a1eea484c739fea7aeb00b218d10db7a30b', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, h(ArrowLeftIcon, { key: '196d12852cd144fc95411d06a06f366168733d23' }))), h("div", { key: '763d905494ae6d453a259d70bd1d80baefb7e264', 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: '0e533d399af320f3a79659f46c493b4cf1bf2b50', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, h("slot", { key: '396f0352a4c9c84a362fc2266bd69ee695b0f9aa', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (h("bs-icon-button", { key: '81b8992250fac52af9e9e2ae415aa759122acd94', 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: 'b4e5e1d5cb1d680120059455d2a69152dd0bc8d3', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, h("slot", { key: '597180318543618a258ae56f8e9d26a2dc882243', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), h("div", { key: '18296c20d248dcdf531e1ff0a9b4230c459625e8', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, h("slot", { key: 'c4ea0d5ce7c80995be1335fe62f9b76629303722', name: "actions", onSlotchange: this.onSlotChange('actions') }))), h("div", { key: '2a942c6f3bef3d546942794368ee22b4f521a4a4', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, h("slot", { key: 'd870267922ea0ffe8f5fc7503e76c038a7a47406', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && h("bs-divider", { key: '988231057dd030bd096948e6cdab39288784c8c3', 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" })));