@brandsync/wc 1.18.0 → 1.20.0

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

@@ -11,6 +11,10 @@ import { h } from "@stencil/core";
  * - Navigation between app sections -- use `bs-navigation-drawer`.
  * - Multi-column, sortable or paged data -- use `bs-data-table`.
  *
+ * `variant` switches between a plain list, a bulleted list and a numbered list; `dividers` gives a divided
+ * list. The list keeps real list semantics in every variant (`role="list"` with `listitem` rows); the bullet
+ * or number is drawn by the row and hidden from assistive technology, which announces position itself.
+ *
  * Built from `bs-list-item` children (light DOM; the list never moves nodes).
  *
  * @slot - The `bs-list-item` rows.
@@ -24,6 +28,8 @@ export class BsList {
     selectable = false;
     /** `value` of the selected item (selectable mode). */
     value = null;
+    /** `plain` (default), `bulleted` (a bullet before each row) or `numbered` (1., 2., 3., ...). Ignored when `selectable`. */
+    variant = 'plain';
     /** Draws a 1px separator between rows. */
     dividers = false;
     /** Accessible name of the list. */
@@ -44,7 +50,8 @@ export class BsList {
     }
     sync() {
         const items = this.items();
-        items.forEach(i => {
+        items.forEach((i, idx) => {
+            i.marker = this.selectable || this.variant === 'plain' ? null : this.variant === 'bulleted' ? '\u2022' : `${idx + 1}.`;
             i.selectionRole = this.selectable ? 'option' : 'listitem';
             if (this.selectable)
                 i.selected = this.value != null && i.value === this.value;
@@ -97,7 +104,7 @@ export class BsList {
         enabled[next].focus();
     }
     render() {
-        return (h("div", { key: '3483a207be9fb42c6d6c4e2385b3d03e3351b05c', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'cc497c226b4fc18f04121a3aff3fe5e10891bf82', onSlotchange: () => this.sync() })));
+        return (h("div", { key: 'c90bfe88e3be35377190d55c7ed25338e1baf2c2', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '7c4ceaa24552ced7b6b09b1d1ff1e189cb144b6b', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-list"; }
     static get encapsulation() { return "shadow"; }
@@ -153,6 +160,26 @@ export class BsList {
                 "attribute": "value",
                 "defaultValue": "null"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'plain' | 'bulleted' | 'numbered'",
+                    "resolved": "\"bulleted\" | \"numbered\" | \"plain\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`plain` (default), `bulleted` (a bullet before each row) or `numbered` (1., 2., 3., ...). Ignored when `selectable`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'plain'"
+            },
             "dividers": {
                 "type": "boolean",
                 "mutable": false,
@@ -221,6 +248,9 @@ export class BsList {
             }, {
                 "propName": "selectable",
                 "methodName": "onChange"
+            }, {
+                "propName": "variant",
+                "methodName": "onChange"
             }];
     }
     static get listeners() {

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

@@ -6,11 +6,12 @@ const meta = {
     argTypes: {
         selectable: { control: 'boolean' },
         dividers: { control: 'boolean' },
+        variant: { control: 'select', options: ['plain', 'bulleted', 'numbered'] },
         value: { control: 'text' },
     },
-    args: { selectable: false, dividers: false, value: '' },
+    args: { selectable: false, dividers: false, variant: 'plain', value: '' },
     render: args => html `
-    <bs-list style="width: 360px;" aria-label="Items" ?selectable=${args.selectable} ?dividers=${args.dividers} .value=${args.value || null}>
+    <bs-list style="width: 360px;" aria-label="Items" ?selectable=${args.selectable} ?dividers=${args.dividers} variant=${args.variant} .value=${args.value || null}>
       <bs-list-item value="a" label="First" description="Paragraph" show-arrow></bs-list-item>
       <bs-list-item value="b" label="Second" description="Paragraph" support-text="Support text" show-arrow></bs-list-item>
       <bs-list-item value="c" label="Third (disabled)" description="Paragraph" disabled></bs-list-item>
@@ -41,3 +42,35 @@ export const AvatarList = {
     </bs-list>
   `,
 };
+export const Bulleted = {
+    args: { variant: 'bulleted' },
+    render: () => html `
+    <bs-list style="width: 360px;" aria-label="Requirements" variant="bulleted">
+      <bs-list-item label="A valid email address"></bs-list-item>
+      <bs-list-item label="At least 12 characters"></bs-list-item>
+      <bs-list-item label="One number or symbol"></bs-list-item>
+    </bs-list>
+  `,
+};
+export const Numbered = {
+    render: () => html `
+    <bs-list style="width: 360px;" aria-label="Steps" variant="numbered">
+      <bs-list-item label="Create an account"></bs-list-item>
+      <bs-list-item label="Verify your email"></bs-list-item>
+      <bs-list-item label="Invite your team"></bs-list-item>
+    </bs-list>
+  `,
+};
+export const DividedWithTrailingAction = {
+    name: 'Divided with trailing action',
+    render: () => html `
+    <bs-list style="width: 420px;" aria-label="Members" dividers>
+      ${['Sam Lee', 'Alex Kim'].map(n => html `<bs-list-item label=${n} description="Member">
+          <bs-avatar slot="leading" type="initials" initials=${n.split(' ').map(w => w[0]).join('')} size="lg" aria-label=${n}></bs-avatar>
+          <bs-icon-button slot="trailing" variant="subtle" aria-label=${'Remove ' + n}>
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M12.5 3.5L3.5 12.5M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /></svg>
+          </bs-icon-button>
+        </bs-list-item>`)}
+    </bs-list>
+  `,
+};

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

@@ -27,6 +27,8 @@
 }
 
 .bs-list-item {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -87,6 +89,14 @@
   opacity: 0.5;
 }
 
+.bs-list-item__marker {
+  flex-shrink: 0;
+  min-width: 1.5em;
+  color: var(--bs-text-secondary);
+  font-weight: var(--bs-font-weight-semibold);
+  text-align: end;
+}
+
 .bs-list-item__leading {
   display: none;
   flex-shrink: 0;

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

@@ -24,6 +24,7 @@ import { Host, h } from "@stencil/core";
  * @slot trailing - Replaces the default caret. Rendered when `showArrow` is set or the slot has content.
  * @slot - Rich content that replaces `label`, `description` and `supportText` entirely.
  * @part container - The row.
+ * @part marker - The bullet or number drawn by a bulleted / numbered `bs-list`.
  * @part leading - Wrapper around the leading slot.
  * @part content - The text column.
  * @part label - The label line.
@@ -50,6 +51,7 @@ import { Host, h } from "@stencil/core";
  * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
  * @prop --bs-list-item-image-width - Leading image width. 72px.
  * @prop --bs-list-item-image-height - Leading image height. 56px.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsListItem {
     el;
@@ -71,6 +73,8 @@ export class BsListItem {
     interactive = false;
     /** Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand. */
     selectionRole = null;
+    /** Set by the parent `bs-list` for `bulleted` / `numbered` variants: the visual marker. Hidden from assistive technology. Do not set by hand. */
+    marker = null;
     hasLeading = false;
     hasTrailing = false;
     hasDefault = false;
@@ -101,7 +105,7 @@ export class BsListItem {
         const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
         const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
         const showTrailing = this.showArrow || this.hasTrailing;
-        return (h(Host, { key: 'eac7aeec4fedc05af55c5ca7a78efb693199de3a', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '3ba832febb95adfc10481b0b1d70cc4448f0a9dd', part: "container", class: "bs-list-item" }, h("div", { key: 'd528d17243f6185d164c5f6964abe4b1d8143d5b', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: '60efa1761cc46a7790986689acbada2f99d94add', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '4af6ee3b0969aeecdc2ead6b63be52b90927b713', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '57481516f3d3ed73854a58fa870d40d760252b99', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: 'acb37f4ec42b1c4c49d82cd21a89353a48ff3fcc', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: 'b9e310fd74f06b1114b2ecf64b6c7de8b63a4c61', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: '7bb751ff77d29cd6f1852c90f5e71f855b222345', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '2bf6cb3dedfe1dcf868aba049f3718083ec63830', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '5cf7ede0e83b1040210346bdf7e7e6a5c7d06cfd', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'fb103f9892eebfd9a481c8d4b60e7504cb19311e', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: 'c33fa8a2aaa5a446adde56c7c8d4bfece8ef1dc9', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: 'b2cf244c2795882e80d9d0de8e450089f31096ec', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '9c803a23b4b7857e3486d73a082703ae980bcfc1', part: "container", class: "bs-list-item" }, interactive && !this.disabled && h("bs-ripple", { key: 'c7cf9815786dd62cd2b2048b1b698d76bd75c13d', part: "ripple" }), this.marker && (h("span", { key: '891fe2a184b721b68467872b18785e1af4246c99', part: "marker", class: "bs-list-item__marker", "aria-hidden": "true" }, this.marker)), h("div", { key: '0aaf314ca2fe62569e687ae960edfed7dc00f4c4', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: 'cef319ce4b0ca1b8a8b7d5b375c3507375354a95', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '441781f53d2b1e73ffd3a1eccf0769716e7da628', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '2348b17d9f0d5da77e4481b2c26b7b39ef9525ab', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: '4b8931a5c9e36ac4c3bfa4f376bbd6e23604f0f9', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '1f63bcbce2b0b30f28f9c90a50443a6d78d15242', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: 'e1d67c08ad98d76619f4ad3171689cf79ebe565d', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '5e1fbe9de74e62b54a2c67debcef1228a434a6a0', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: 'c2dbc64f61a448dc13adfe7642be0fa398453427', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: '2dce987756aed8aa5eac4949473d3a30022b3792', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: 'f79e5c78fb72b30b29248e4a47048312d3779a2f', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "bs-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -296,6 +300,26 @@ export class BsListItem {
                 "reflect": false,
                 "attribute": "selection-role",
                 "defaultValue": "null"
+            },
+            "marker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the parent `bs-list` for `bulleted` / `numbered` variants: the visual marker. Hidden from assistive technology. Do not set by hand."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "marker",
+                "defaultValue": "null"
             }
         };
     }

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

@@ -128,4 +128,77 @@ describe('bs-mega-menu', () => {
             expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
         }
     });
+    describe('open/close motion', () => {
+        const wait = (ms) => new Promise(r => setTimeout(r, ms));
+        const panel = (el) => q(el, '[part="panel"]');
+        it('stays visible with no open prop (the hidden-only contract)', async () => {
+            const { el } = await make();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            expect(panel(el).getAnimations().length).toBe(0);
+        });
+        it('is removed while open is false and shown with an enter animation of the configured duration', async () => {
+            const { el, waitForChanges } = await make();
+            el.style.setProperty('--bs-mega-menu-duration', '150ms');
+            el.open = false;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).toBe('none');
+            el.open = true;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            const anims = panel(el).getAnimations();
+            expect(anims.length).toBe(1);
+            expect(anims[0].effect.getTiming().duration).toBe(150);
+        });
+        it('plays an exit of the configured duration, is inert meanwhile, then is removed', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.style.setProperty('--bs-mega-menu-duration', '150ms');
+            el.open = false;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            expect(panel(el).inert).toBe(true);
+            const anims = panel(el).getAnimations();
+            expect(anims.length).toBe(1);
+            expect(anims[0].effect.getTiming().duration).toBe(150);
+            await wait(400);
+            await waitForChanges();
+            expect(getComputedStyle(el).display).toBe('none');
+            expect(panel(el).inert).toBe(false);
+        });
+        it('cancels the exit when it opens again', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.style.setProperty('--bs-mega-menu-duration', '300ms');
+            el.open = false;
+            await waitForChanges();
+            el.open = true;
+            await waitForChanges();
+            await wait(500);
+            await waitForChanges();
+            expect(getComputedStyle(el).display).not.toBe('none');
+            expect(panel(el).inert).toBe(false);
+        });
+        it('runs no animation and changes at once when the duration is 0ms', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.style.setProperty('--bs-mega-menu-duration', '0ms');
+            el.open = false;
+            await waitForChanges();
+            expect(panel(el).getAnimations().length).toBe(0);
+            expect(getComputedStyle(el).display).toBe('none');
+            el.open = true;
+            await waitForChanges();
+            expect(panel(el).getAnimations().length).toBe(0);
+            expect(getComputedStyle(el).display).not.toBe('none');
+        });
+        it('still hides instantly with the hidden attribute while open is true', async () => {
+            const { el, waitForChanges } = await make({ open: true });
+            el.hidden = true;
+            await waitForChanges();
+            expect(getComputedStyle(el).display).toBe('none');
+        });
+        it('has no axe violations while open', async () => {
+            const { el } = await make({ open: true });
+            await wait(300);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
+        });
+    });
 });

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

@@ -15,9 +15,13 @@
   --bs-mega-menu-heading-color: var(--bs-text-muted);
   --bs-mega-menu-text-color: var(--bs-text-default);
   --bs-mega-menu-muted-color: var(--bs-text-secondary);
+  --bs-mega-menu-duration: var(--bs-duration-default);
+  --bs-mega-menu-easing: var(--bs-easing-standard);
+  --bs-mega-menu-distance: var(--bs-spacing-100);
 }
 
-:host([hidden]) {
+:host([hidden]),
+:host([data-closed]) {
   display: none;
 }
 

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

@@ -1,4 +1,5 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
+import { cancelMotion, play, readMotion } from "../../utils/motion";
 let uid = 0;
 /**
  * The dropdown panel under a navigation header tab: columns of links grouped under headings, an optional
@@ -6,8 +7,13 @@ let uid = 0;
  * "Mega menu" (types Columns, Column with featured, Compact and Compact with featured).
  *
  * This is the panel only. Put it in `bs-navigation-header`'s `menu` slot, which anchors it under the bar at the
- * header's full width, and toggle the host's `hidden` attribute from the tab that
- * opens it; the panel does not open or close itself. Escape inside the panel fires `bsClose` so you can close it.
+ * header's full width, and show it from the tab that opens it; the panel does not open or close itself. Escape
+ * inside the panel fires `bsClose` so you can close it.
+ *
+ * There are two ways to show and hide it. Toggle the host's `hidden` attribute and it appears and disappears at once
+ * (the original contract, unchanged). Or set `open` and it fades and drops in from under the bar, then fades back out
+ * and is removed once the exit finishes. Leave `open` unset to keep using `hidden` only. `hidden` always wins: with it
+ * set the panel is not shown whatever `open` says.
  *
  * Built from `bs-card` (panel surface), `bs-menu-block` or `bs-compact-menu-block` (the links), `bs-divider` and
  * `bs-key-caps` (the shortcut). The column layout, headings, featured text and footer row are plain layout
@@ -54,12 +60,23 @@ let uid = 0;
  * @prop --bs-mega-menu-heading-color - Column headings. Aliased to `--bs-text-muted`.
  * @prop --bs-mega-menu-text-color - Featured title. Aliased to `--bs-text-default`.
  * @prop --bs-mega-menu-muted-color - Featured description and footer text. Aliased to `--bs-text-secondary`.
+ * @prop --bs-mega-menu-duration - Length of the open/close motion (`open` only). Aliased to `--bs-duration-default`.
+ * @prop --bs-mega-menu-easing - Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-mega-menu-distance - How far the panel drops while it fades. Aliased to `--bs-spacing-100`.
+ *
+ * Under `prefers-reduced-motion: reduce` (or a duration of `0ms`) setting `open` shows and hides the panel instantly.
  */
 export class BsMegaMenu {
     el;
     id = `bs-mm-${++uid}`;
     /** `columns` shows menu blocks with icon and description; `compact` plain text links. */
     type = 'columns';
+    /**
+     * Shows the panel with an enter/exit motion. Unset (the default) leaves visibility to the host's `hidden`
+     * attribute, which shows and hides instantly. `true` shows the panel; `false` fades it out and then removes it.
+     * The panel stays in the DOM and is `inert` while it fades out.
+     */
+    open;
     /** The groups of links. JS property only (an array cannot be an attribute). */
     columns = [];
     /** The featured area on the right. JS property only. The `featured` slot overrides it. */
@@ -80,6 +97,43 @@ export class BsMegaMenu {
     bsMenuSelect;
     /** Fires when Escape is pressed inside the panel, so you can close it. */
     bsClose;
+    /** True while the exit motion plays after `open` went false, so the panel stays visible for it. */
+    closing = false;
+    panelEl;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    onOpenChange(next, prev) {
+        this.motionRun++;
+        cancelMotion(this.panelEl);
+        this.closing = false;
+        if (next === true) {
+            this.enterPending = true;
+        }
+        else if (next === false && prev === true && !this.el.hidden && readMotion(this.el, 'bs-mega-menu').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
+    }
+    componentDidRender() {
+        if (this.exitPending) {
+            this.exitPending = false;
+            if (this.closing && this.open === false) {
+                const { ms, easing, distance } = readMotion(this.el, 'bs-mega-menu');
+                const run = ++this.motionRun;
+                play(this.panelEl, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: `translateY(${-distance}px)` }], ms, easing, 'forwards').then(() => {
+                    if (run === this.motionRun)
+                        this.closing = false;
+                });
+            }
+        }
+        if (this.enterPending) {
+            this.enterPending = false;
+            const { ms, easing, distance } = readMotion(this.el, 'bs-mega-menu');
+            if (ms > 0 && this.open === true)
+                play(this.panelEl, [{ opacity: 0, transform: `translateY(${-distance}px)` }, { opacity: 1, transform: 'none' }], ms, easing);
+        }
+    }
     select(item, ev) {
         const e = this.bsMenuSelect.emit(item);
         if (e.defaultPrevented)
@@ -107,7 +161,8 @@ export class BsMegaMenu {
     render() {
         const hasFeatured = !!this.featured || !!this.el.querySelector(':scope > [slot="featured"]');
         const tracks = this.columns.length + (hasFeatured ? 1 : 0);
-        return (h("bs-card", { key: '005653cc6235b7aa26268e3bf97b1a985df89843', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown }, h("div", { key: '22808dd74ea84ae0511dc92e4a3d2d3045a8157c', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), h("bs-divider", { key: '105dd2102501c21303f0cd115f2a8797a8996195', decorative: true }), h("div", { key: '0f20d9d01cb29d29735612d2708cb48af2e30bf0', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: 'e2d7e8bf77b15b735015342ef6a21b946cdcf2cb', class: "bs-mega-menu__footer-start" }, h("slot", { key: '1d34e50c301329ea2bd381a08ffab99b9bce5394', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: '773eae68920c131c8dea1182a41a78e6ceef4222', class: "bs-mega-menu__footer-end" }, h("slot", { key: '70e2b5dce40e19423b55c1df869d1326f5fdbfa4', name: "footer-end" }, h("span", { key: '10bb8e18aaa162b06209f65f7e9136ff716466f8', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: 'a9991ceab494255b81fccb97e8290432bcc0cff2', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel })))))));
+        const removed = this.open === false && !this.closing;
+        return (h(Host, { key: '4e1ca5f61433cf2bb6c19b4ba62c6b936932401e', "data-closed": removed ? '' : undefined }, h("bs-card", { key: '4858dba5bafae10221a4acbaa03b0ebe6a2bdc1a', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown, inert: this.closing, ref: el => (this.panelEl = el) }, h("div", { key: 'ccecfe4344c62e17e987a3d9d12ac3d2444bcbd6', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), h("bs-divider", { key: 'ce7d19d9bf5c5a8afaae6be8a28cc80ff91644a3', decorative: true }), h("div", { key: '1dfb2400b86b11b6fd2bdd0deb856d3610d13e13', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: 'ab18853838c0e412b3f5e6d7d146e61150355569', class: "bs-mega-menu__footer-start" }, h("slot", { key: '7edae96d3388a26b2c6d52a1a0e2719a816d1a47', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: 'f67686ddb8f5eac6c58ba7ab5d9386c38b306ae1', class: "bs-mega-menu__footer-end" }, h("slot", { key: 'd3ec0812f016f8fc1639013212e4f804d050a591', name: "footer-end" }, h("span", { key: '58235b6c41e41c541b79c55108fa7f0f24c40cdf', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: '1d2d4a53a33ac046af88b78b59bc83e7b925ad56', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel }))))))));
     }
     static get is() { return "bs-mega-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -149,6 +204,25 @@ export class BsMegaMenu {
                 "attribute": "type",
                 "defaultValue": "'columns'"
             },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the panel with an enter/exit motion. Unset (the default) leaves visibility to the host's `hidden`\nattribute, which shows and hides instantly. `true` shows the panel; `false` fades it out and then removes it.\nThe panel stays in the DOM and is `inert` while it fades out."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open"
+            },
             "columns": {
                 "type": "unknown",
                 "mutable": false,
@@ -315,6 +389,11 @@ export class BsMegaMenu {
             }
         };
     }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsMenuSelect",
@@ -355,4 +434,10 @@ export class BsMegaMenu {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
 }

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

@@ -87,7 +87,7 @@ export const Interactive = {
     },
 };
 /**
- * The consumer-owned trigger for the header's `menu` slot: the "Sales" tab toggles the panel's `hidden`,
+ * The consumer-owned trigger for the header's `menu` slot: the "Sales" tab toggles the panel's `open` (so it fades in and out),
  * keeps `aria-expanded` in step (`aria-controls`/`aria-haspopup` are left off: `bs-tab` does not forward them to
  * its inner button and axe rejects them on the host, see the mdx), closes it on `bsClose` (Escape), on an outside click and on a second
  * click, and returns focus to the tab. `bs-navigation-header` only positions the panel.
@@ -103,20 +103,20 @@ function inNavigationHeader(type, featured) {
     };
     const setOpen = (from, open, restoreFocus = false) => {
         const { tab, menu } = parts(from);
-        menu.hidden = !open;
+        menu.open = open;
         tab.setAttribute('aria-expanded', String(open));
         if (!open && restoreFocus)
             tab.shadowRoot?.querySelector('button')?.focus();
     };
     const onTabClick = (e) => {
         const { root, menu } = parts(e.currentTarget);
-        const opening = menu.hidden;
+        const opening = !menu.open;
         setOpen(root, opening);
         // Outside click closes it; attached once the panel opens, removed when it closes.
         if (opening) {
             const outside = (ev) => {
                 const path = ev.composedPath();
-                if (menu.hidden || !root.isConnected)
+                if (!menu.open || !root.isConnected)
                     return document.removeEventListener('click', outside);
                 if (!path.includes(menu) && !path.includes(e.currentTarget)) {
                     setOpen(root, false);
@@ -141,7 +141,7 @@ function inNavigationHeader(type, featured) {
         <bs-mega-menu
           slot="menu"
           id=${menuId}
-          hidden
+          .open=${false}
           @bsClose=${onClose}
           .type=${type}
           .columns=${columns}

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

@@ -44,7 +44,7 @@ export class BsMenu {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: '850122bbadc472043159746a66002281d53ddd7b', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '5a64d51431e7cad88d5a7f4d01aa004098e9b2d2' })));
+        return (h("div", { key: 'c14d9bedef9bcb0bef69c739c8f477d7390af729', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '6e26c1a053dee4b7ad91e603b82609ac1fee1abb' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,10 +47,10 @@ export class BsMenuBlock {
     render() {
         const common = { part: 'container', class: 'bs-menu-block' };
         const body = [
-            h("bs-icon-tile", { key: '6d46f853f1673374675ede6c701e3e01fa5c3a4a', 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: '8a24502be4a71f7c6a74f6600ee0f411a37f9d58', class: "bs-menu-block__text" }, h("span", { key: 'fd71ce8072d8bb8b83f5831c9d16ac190b3b2b0f', class: "bs-menu-block__title" }, h("span", { key: '99f4a8008a50274e7306a91b8d57ce8c98782f9b', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: 'd71237f056ca413aa1b9640df4507d52e94e47b2', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: '857ce6dbdc7885a9099f4e9cd94967ba187ce892', part: "description", class: "bs-menu-block__description" }, this.description))),
+            h("bs-icon-tile", { key: '8190c2b054e8cde19db39aa704315673f42902e1', 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: '1ea5bb36e09e02be9c42496fdc4e0ff5f82fb39e', class: "bs-menu-block__text" }, h("span", { key: '4b285a1380f7fd257b03a5cee0a57d7c82670622', class: "bs-menu-block__title" }, h("span", { key: '6ad1444db9ce3fba93d841f5e0a365bdf22b33f7', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: '514c1eac5779e91b1a2e6d52d24f47f329141d9b', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: 'bcb1508304f1544a8b78bee9036d6be020efd451', part: "description", class: "bs-menu-block__description" }, this.description))),
         ];
-        return (h("button", { key: '6ca8eed231c6b061aab714398975b2f9dc4eb091', ...common, type: "button" }, body));
+        return (h("button", { key: 'd87cc4926cd17e36ee6ae1295e6c38c19052f3aa', ...common, type: "button" }, body));
     }
     static get is() { return "bs-menu-block"; }
     static get encapsulation() { return "shadow"; }

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: '6b051d2fd71b1be59a253c9eb10e7a8f1242e110', 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: '245b088e3d5243d4b6ca8871b087d53174405590', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'f325951ecf61f5b2e39d54fb9dd7deda9fc313cb', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2d89029982559af29db78a0ba2fd48ccfbc1c416', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '56681e9c1241233fc36e9bcd5a19c58ef3af5b4b' }))));
+        return (h("button", { key: 'c52e126d6150c7814a0d53cc260b3c5ab8aa3c5e', 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: 'f9da7fdf2cfb591562764f67a84c4c4b511bb348', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'a91da1d5500117b6d67a5c6a7398ad8b40064385', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '3fa07f929ac18f5aab4ceb26c9712f79379c5f4a', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2e7e80d88803abc7a6cb54c1eb18df53d49f85a9', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'ad8413c282494014160497635cec1f5efaf44e12' }))));
     }
     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: 'c159d43edf61a61bb87fa72c650a8642e0ae154f', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'a503d44dd040849e1db3327f3c33981eea8fcd9d', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: 'bef63a196f9ffcaeb6b729f2c9b67722e9e5afe1', name: "avatar" })), h("div", { key: 'a27a5dd8bff4350c882eeab12f8ebcf32d629333', class: "bs-message__column" }, h("bs-card", { key: '4dd1f9da16be30b04f1c6bea178600ff11f6b654', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'c4dbf71df32e0b962e20929488952149c88f3b04', part: "content", class: "bs-message__content" }, h("slot", { key: '2b251a032180bc3e1ef4b027179ddde73a7f9dcc' }))), h("div", { key: '749ba9490b9204fe4f514bb5f15190e658309e9b', part: "footer", class: "bs-message__footer" }, h("slot", { key: '43e305fe85d7fcf81afb115d7477035108cece44', name: "footer" })), h("div", { key: '4c224882dbe5d0f01117cd276f5d3050426cd344', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: 'e9a2ccfb8628e5c3d3840fbda5b70009af6e0c6f', name: "timestamp" }, this.timestamp && h("time", { key: '9b4dc4a6e042367420c8b7355621ad42075f335e', dateTime: this.datetime }, this.timestamp))))));
+        return (h("div", { key: 'f80d1149391aef141fdcabfcc1a0c1fd0537cbf9', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'd640f5a34fc67643da3755aaed1d0cdc8a39d628', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: '961d1226493b04581259b1e445afabc82f90a7a9', name: "avatar" })), h("div", { key: '742e803b174a31f2c5db3c35315e62bc108cec02', class: "bs-message__column" }, h("bs-card", { key: '09f5449eb4d01309597301b516dc31a0fd008786', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'eda71ddcc2a3b0546919b78119bc7c70c3c3be07', part: "content", class: "bs-message__content" }, h("slot", { key: '790751ff09be551fe5b6fcbe7d1fb67522d86944' }))), h("div", { key: '30ccab14d2c8348c5ccd23298ad102ef39409847', part: "footer", class: "bs-message__footer" }, h("slot", { key: '869e264a07fdd6926e7740717bf98183f437b0ed', name: "footer" })), h("div", { key: 'c5d5da384993775c18a0edd4f2658331b12835ce', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: 'd157e9a0467ab7dc9105c348960a3b890d5055b1', name: "timestamp" }, this.timestamp && h("time", { key: '7bef51f7106b6fe82e991a46a43cf271cafef448', 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: 'e474c22e93a8559c37efa3e13670bf6f48da5140', class: "bs-message-list" }, h("div", { key: 'f29d2f07b872743353ac0595399f5d87d94b2ace', 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: '265e61fefe2219e57cb9724f68ca76752849a1f6' })), this.showScrollButton && (h("bs-icon-button", { key: '960398acea1fe8b6cdb00469ee23531b40715ac9', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '748dfcd735223d1482ebe6e0b24383c8018a976f', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'af9d03ca412502d46822588c9bcb303e44dd33c3', 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: '4a9aba669da325e805219d3f4d11dfbfdd235147', class: "bs-message-list" }, h("div", { key: '86a867dda211c2648a7e1a82f18b94a3924a774e', 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: '649dd0db989cea62876092ed384a704468392e0d' })), this.showScrollButton && (h("bs-icon-button", { key: 'e4066ec90ac6ea3000e10db1920eeaf028611548', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: 'c6f25699e0f1de5b543b6297c4158a05e3f04eb3', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '044b506ee58e69c3dec36eb107c5565899a036e5', 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.js

@@ -109,7 +109,7 @@ export class BsPageHeader {
         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 })));
+        return (h("div", { key: '38f51471c2c9c98dc0a84b82813399f12f221aa0', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, h("div", { key: '3313d74119c09977fa812a17f183da9c2981bc50', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, h("slot", { key: '8c4668a0d782fd22c73d0b85cffc49d3139c62f2', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), h("div", { key: '6cf0fb207aff871d1366e6ced2beb05a1ff86e57', part: "row", class: "bs-page-header__row" }, h("div", { key: 'e21c28244990e259d802192f414e3c7fa909ac7d', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (h("bs-icon-button", { key: '4cb2a4347504ec675d2f678c7eb478491f7f3cef', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, h(ArrowLeftIcon, { key: 'ff9323bc90d6697ea54556e7d03fc147738579ee' }))), h("div", { key: '1e9065ec14b16ec8f354ed54d3403098cb69e55c', 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: 'f332178c13713ea9ae7864344795baa390e0be56', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, h("slot", { key: '2881dfb50b69b93c24263e0d9ea5a43787be779c', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (h("bs-icon-button", { key: '341c9b1b79fb05203a0d59fa752856b2d0de96cc', 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: '2021b23ac34262168aa063079c2cdcf249297d44', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, h("slot", { key: '0937a7986fb7a8338cc228b58d45dd679942e067', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), h("div", { key: '284547154c9cfe20b1455b4dd51e9d336cc4fb91', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, h("slot", { key: 'e6a7bf0ca86f9864bebe7d87ddcefd7030c8bf32', name: "actions", onSlotchange: this.onSlotChange('actions') }))), h("div", { key: '267dd69b1732befe8c06193ff1dab20288f2053a', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, h("slot", { key: '8b778bf7c356205ac65e843112415b344f5bf332', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && h("bs-divider", { key: 'ba4351e50cbeef3088514f84a83966dabe10c4a7', part: "divider", class: "bs-page-header__divider", decorative: true })));
     }
     static get is() { return "bs-page-header"; }
     static get encapsulation() { return "shadow"; }