@brandsync/wc 1.18.0 → 1.20.0

package/dist/collection/components/bs-whats-new-entry/bs-whats-new-entry.js

@@ -50,7 +50,7 @@ export class BsWhatsNewEntry {
     hasImage = false;
     render() {
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 3));
-        return (h("div", { key: '54a3c2784ae0599f6ab1173672f59fc65a9e7ccc', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: 'c82e5e5d7486828d8c8d703d3ad7afda5e84beb7', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: '570273e8af631ea919b4d7f801fb882deb1648bb', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: '8e7f75b5120d29dc7b036ce0faa920f7435cfc05', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: '1bcc3e4e6d09e7d4a2225f53cad4bd143b5ed766', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: '2a5b2a37d5044ee066b6d82ae09d557136acd4db', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: 'e0ef87bc59f4ac7244ae325844b871d341f01854', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '5ede8b73d53cb3120146324567c7496d13666525', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '483ce24be414275059e23225b43d473963e9d41e', class: "bs-whats-new-entry__content" }, this.heading && h(`h${level}`, { part: 'heading', class: { 'bs-whats-new-entry__heading': true } }, this.heading), this.description && (h("p", { key: '15f00f081c7673153dd1e1504e238066a7492682', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: '5d39e42399197e3d58ce59d0eb10e7e47a55ad39', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '957deb07628192f8ccc16f931f2b4ddc4dd54ea5', slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'a4ea579ee77a8caf70c15dc3b209f7663cc77eb6', d: "M5 12H19" }), h("path", { key: '65e70780afab82c607d84ca242ba34c862809520', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '04c5d9479f1844bbf1baef6c2f4e02450098b0fa', part: "divider", class: "bs-whats-new-entry__divider" })));
+        return (h("div", { key: 'b0baa810350e1d1ba94e195e5bb71568916648c1', class: "bs-whats-new-entry" }, (this.tag || this.date || this.unread) && (h("div", { key: 'f6aceea84fa2d8093fee7bf1f12e1a33d157773a', part: "meta", class: "bs-whats-new-entry__meta" }, this.tag && (h("bs-chip-informative", { key: '5177b66addbdb1bc0a8896f14bfde2d165bdc22d', part: "tag", size: "sm", color: this.tagColor }, this.tag)), this.date && (h("span", { key: 'bd9e2492cf9b78d808676211be29283a3853a5f1', part: "date", class: "bs-whats-new-entry__date" }, this.date)), this.unread && (h("span", { key: '2a99186b9ac53f76cf8e4e148971dd96bebc3339', part: "unread", class: "bs-whats-new-entry__unread" }, h("span", { key: '777d53e3498d5b9ccc33b196ddefda132ec8966d', class: "bs-whats-new-entry__sr-only" }, this.unreadLabel))))), h("div", { key: '685ca45b3fa9677a29c6cfceb2f142bbd10aeaaa', part: "image", class: { 'bs-whats-new-entry__image': true, 'bs-whats-new-entry__image--visible': this.hasImage } }, h("slot", { key: '39cb638562151a700da6221de805d277fc38a912', name: "image", onSlotchange: (ev) => (this.hasImage = ev.target.assignedNodes().length > 0) })), h("div", { key: '6d93a6efef38d79e711772bd674812721d6c4036', class: "bs-whats-new-entry__content" }, this.heading && h(`h${level}`, { part: 'heading', class: { 'bs-whats-new-entry__heading': true } }, this.heading), this.description && (h("p", { key: '2178e908d195961d7af63f96483978a7727f2daa', part: "description", class: "bs-whats-new-entry__description" }, this.description)), this.actionLabel && (h("bs-button", { key: '1e63a9582f52578d4507b509b1cc31f85f29518f', part: "action", class: "bs-whats-new-entry__action", variant: "subtle", size: "sm", onClick: () => this.bsAction.emit() }, this.actionLabel, h("svg", { key: '5e81c66251de6ac1fadc34acfe38ba69296d1a80', slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '4909c3ab738167ff9c4b43a4f3091c5ebc9708ee', d: "M5 12H19" }), h("path", { key: 'e5316c0212c03d7fb576d99e4e823cc23b820d65', d: "M13 6L19 12L13 18" }))))), this.divider && h("div", { key: '77fa0ba2722d89185b6084c50526083e5ce0ddcb', part: "divider", class: "bs-whats-new-entry__divider" })));
     }
     static get is() { return "bs-whats-new-entry"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.js

@@ -314,4 +314,29 @@ describe('bs-navigation-drawer: small-screen overlay (<= 768px)', () => {
         await new Promise(r => setTimeout(r, 350));
         await runAxeCheck(root);
     });
+    describe('item spacing', () => {
+        const rows = (els) => els.map(e => e.getBoundingClientRect());
+        it('rendered gap between top-level and nested rows is 12px (spacing-150)', async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-drawer", { heading: "Docs" }, h("bs-navigation-drawer-item", null, "One"), h("bs-navigation-drawer-item", { expandable: true, expanded: true }, "Two", h("bs-navigation-drawer-item", { slot: "children", nested: true }, "Child A"), h("bs-navigation-drawer-item", { slot: "children", nested: true }, "Child B")), h("bs-navigation-drawer-item", null, "Three")));
+            await waitForChanges();
+            const btn = (el) => el.shadowRoot.querySelector('[part="item"]');
+            const tops = Array.from(root.querySelectorAll(':scope > bs-navigation-drawer-item'));
+            const kids = Array.from(root.querySelectorAll('bs-navigation-drawer-item[slot="children"]'));
+            const [a, b, c] = rows(tops.map(btn));
+            const [k1, k2] = rows(kids.map(btn));
+            // item "Two": its row button, then children wrapper, then next top-level row
+            expect(Math.round(b.top - a.bottom)).toBe(12);
+            expect(Math.round(k2.top - k1.bottom)).toBe(12);
+            expect(Math.round(c.top - k2.bottom)).toBe(12);
+            expect(Math.round(k1.top - b.bottom)).toBe(12);
+            // section gap (logo/title/search/list) stays 24px
+            expect(getComputedStyle(root.shadowRoot.querySelector('nav')).rowGap).toBe('24px');
+        });
+        it('collapsed rows are also 12px apart', async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-drawer", { collapsed: true }, h("bs-navigation-drawer-item", { collapsed: true }, "One"), h("bs-navigation-drawer-item", { collapsed: true }, "Two")));
+            await waitForChanges();
+            const [a, b] = rows(Array.from(root.querySelectorAll('bs-navigation-drawer-item')).map(e => e.shadowRoot.querySelector('[part="item"]')));
+            expect(Math.round(b.top - a.bottom)).toBe(12);
+        });
+    });
 });

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.css

@@ -38,7 +38,7 @@
  * @prop --bs-navigation-drawer-collapse-icon: Collapse toggle icon color. Aliased to
  *   --bs-icon-default.
  * @prop --bs-navigation-drawer-items-gap: Gap between top-level item rows in the items list.
- *   Aliased to --bs-spacing-100.
+ *   Aliased to --bs-spacing-150 (12px).
  * @prop --bs-navigation-drawer-collapsed-width: Width of the drawer when `collapsed`. 96px, per
  *   Figma node 8028:135374's own frame ("Type=Collapsed").
  * @prop --bs-navigation-drawer-search-trigger-size: Width/height of the compact search-trigger
@@ -81,7 +81,7 @@
   --bs-navigation-drawer-collapse-pressed: var(--bs-color-neutral-container-pressed);
   --bs-navigation-drawer-collapse-icon: var(--bs-icon-default);
 
-  --bs-navigation-drawer-items-gap: var(--bs-spacing-100);
+  --bs-navigation-drawer-items-gap: var(--bs-spacing-150);
 
   --bs-navigation-drawer-collapsed-width: 96px;
 

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js

@@ -234,11 +234,11 @@ export class BsNavigationDrawer {
     };
     render() {
         const classes = ['bs-navigation-drawer', this.mobile ? 'bs-navigation-drawer--overlay' : '', this.overlayOpen ? 'bs-navigation-drawer--open' : ''].filter(Boolean).join(' ');
-        return (h(Host, { key: 'b2203f52ae157b565d62e06521b70ddea7f2ae14', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: 'ef85987f69ff5795d899118c8d339d3f52a6f4af', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: '260b591e3439863671aa51b5c90ae203dda82bb5', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
+        return (h(Host, { key: 'f95176f9c590fde2d2d6a9dcade6b921510ce653', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: '2d9bdef1463962ca2e2f1f5aee7024636904c5c7', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: 'b527d2a521652628c5b4dfda7004be716dba3b2e', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
             // Stays a plain <nav> landmark in every state: ARIA does not allow role="dialog" on <nav>
             // (axe: aria-allowed-role). Modality is behavioral -- focus is held inside, the page behind is
             // scrimmed, Escape closes -- rather than announced through aria-modal.
-            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (h("div", { key: '1f947bcd8f55aae3fc83c31c4f1220934de4ca24', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: 'e77c2e6c15478d308f6c2694164262ad37672ba8', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: 'c3fa7b9cf7a54a42b1dde273127e59b3880aa5a2', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '4c35edb7b838ea0c812de2197a6d3d59316449a5', variant: "mark", background: this.logoBackground }))), h("div", { key: 'ea7e753bb4a313718f8d003d299cf2d98c4bf94e', class: "bs-navigation-drawer__title-row" }, h("span", { key: '90e3cdc335d0c2820fe9002e2fafc162576b3240', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '3b5a555dc34380c22030733ca745279e3ddca1b6', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? this.expandLabel : this.collapseLabel, "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'f5e095681e642741cbbfe97ad5ae11fe10c679d4' })))), h("div", { key: '14f9928d98e7773b43c9b6a7dcbdcbdb5302c088', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: 'ea0fe474c09c0550b2d89cfc2a7a8294c9d1cedd', name: "search" })), h("button", { key: 'e4a321e70895804445a902cdbb07f65952653bed', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '582c3bc3117c49270e5c0ba0d0f0d2e5de9c6625' })), h("div", { key: '844f4f8eb5e95921f6aa1c643bf0fc52255ab19f', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '52485aab4b1ddb41051dba85e657d18f9a8abbd8' })))));
+            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (h("div", { key: '14dcefaf6fac6349b44dfd0cfeaf0f8b28d48014', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: 'f76b740e5f9378c19f9ca933c0f7910075c473b3', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '1978885ce2cfca859118159384e093e70bc8c2d9', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '5087b539af51e373703256b9913b4a074e2917f4', variant: "mark", background: this.logoBackground }))), h("div", { key: '31b5f080ce98b4ba96aad0f9ba9df7b31ecfd5b9', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'bf2880d7b095a6ca46d38782b0f9de8aa7cedbb8', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'cf6f2d98894c664e38d97563a616912e9d6fef3e', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? this.expandLabel : this.collapseLabel, "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'c89adbac8d05ae9d3367683b960d8d35d0422e76' })))), h("div", { key: 'b018a42d16190db2bd6f95365fe36d38eb627300', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '1d217d7ad3c67d1b5e8a8655fd94bdbc77149b4f', name: "search" })), h("button", { key: '2b1bc189a5474dfc76e3d73e9c1623105002fd22', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": this.searchLabel, onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '634ab26e0bf8c38c9e4ba97305a94003112450b4' })), h("div", { key: 'df8559db4c5c25ff5d98b858759d142b1639fdc3', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'b643a037ec21cc62d3ae60491028d26cb19e099c' })))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.cmp.test.js

@@ -1,4 +1,6 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { blockLinkNavigation } from "../../../../test/helpers/block-link-navigation";
+blockLinkNavigation();
 describe('bs-navigation-drawer-item', () => {
     it('renders a real button with part="item"', async () => {
         const { root } = await render(h("bs-navigation-drawer-item", null, "Introduction"));
@@ -169,4 +171,60 @@ describe('bs-navigation-drawer-item', () => {
             expect(root.shadowRoot.querySelector('[part="item"]').hasAttribute('aria-label')).toBe(false);
         });
     });
+    describe('aria-current', () => {
+        it('marks a selected leaf item as the current page', async () => {
+            const { root } = await render(h("bs-navigation-drawer-item", { selected: true }, "Overview"));
+            expect(root.shadowRoot.querySelector('[part="item"]')).toEqualAttribute('aria-current', 'page');
+        });
+        it('does not set aria-current on an unselected or expandable item', async () => {
+            const unselected = await render(h("bs-navigation-drawer-item", null, "Overview"));
+            expect(unselected.root.shadowRoot.querySelector('[part="item"]').hasAttribute('aria-current')).toBe(false);
+            const group = await render(h("bs-navigation-drawer-item", { expandable: true, selected: true }, "Components"));
+            expect(group.root.shadowRoot.querySelector('[part="item"]').hasAttribute('aria-current')).toBe(false);
+        });
+    });
+    describe('href (link item)', () => {
+        const item = (root) => root.shadowRoot.querySelector('[part="item"]');
+        it('renders a real <a> with href/target and no button', async () => {
+            const { root } = await render(h("bs-navigation-drawer-item", { href: "/overview", target: "_blank" }, "Overview"));
+            expect(item(root).tagName).toBe('A');
+            expect(item(root)).toEqualAttribute('href', '/overview');
+            expect(item(root)).toEqualAttribute('rel', 'noopener noreferrer');
+            expect(root.shadowRoot.querySelector('button')).toBeNull();
+        });
+        it('stays a button without href, and for expandable items even with href', async () => {
+            const plain = await render(h("bs-navigation-drawer-item", null, "Overview"));
+            expect(item(plain.root).tagName).toBe('BUTTON');
+            const group = await render(h("bs-navigation-drawer-item", { expandable: true, href: "/x" }, "Group"));
+            expect(item(group.root).tagName).toBe('BUTTON');
+        });
+        it('emits a cancelable bsSelect on a plain click and lets a router prevent navigation', async () => {
+            const { root } = await render(h("bs-navigation-drawer-item", { href: "#/overview" }, "Overview"));
+            let cancelable = false;
+            root.addEventListener('bsSelect', (e) => {
+                cancelable = e.cancelable;
+                e.preventDefault();
+            });
+            const click = new MouseEvent('click', { bubbles: true, cancelable: true, composed: true, button: 0 });
+            item(root).dispatchEvent(click);
+            expect(cancelable).toBe(true);
+            expect(click.defaultPrevented).toBe(true);
+        });
+        it('leaves ctrl-clicks to the browser (no bsSelect)', async () => {
+            const { root, spyOnEvent } = await render(h("bs-navigation-drawer-item", { href: "#/overview" }, "Overview"));
+            const spy = spyOnEvent('bsSelect');
+            item(root).dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, composed: true, button: 0, ctrlKey: true }));
+            expect(spy).toHaveReceivedEventTimes(0);
+        });
+        it('marks a selected link as the current page', async () => {
+            const { root } = await render(h("bs-navigation-drawer-item", { href: "#/overview", selected: true }, "Overview"));
+            expect(item(root)).toEqualAttribute('aria-current', 'page');
+        });
+    });
+    it('wraps a long caption in the collapsed rail instead of clipping it on both sides', async () => {
+        const { root } = await render(h("bs-navigation-drawer-item", { collapsed: true }, "A very long navigation caption here"));
+        const label = root.shadowRoot.querySelector('[part="label"]');
+        expect(getComputedStyle(label).whiteSpace).toBe('normal');
+        expect(getComputedStyle(label).textOverflow).toBe('clip');
+    });
 });

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.css

@@ -44,7 +44,7 @@
  * @prop --bs-navigation-drawer-item-focus-ring-color: Focus ring color. Aliased to
  *   --bs-border-neutral-focus.
  * @prop --bs-navigation-drawer-item-children-gap: Gap between nested child rows. Aliased to
- *   --bs-spacing-100.
+ *   --bs-spacing-150 (12px).
  * @prop --bs-navigation-drawer-item-collapsed-gap: Gap between the icon and caption when
  *   `collapsed`. Aliased to --bs-spacing-100.
  * @prop --bs-navigation-drawer-item-collapsed-padding: Padding of a `collapsed` row. Aliased to
@@ -87,7 +87,7 @@
   --bs-navigation-drawer-item-bg-selected-focus: var(--bs-surface-selected-focus);
   --bs-navigation-drawer-item-focus-ring-color: var(--bs-border-neutral-focus);
 
-  --bs-navigation-drawer-item-children-gap: var(--bs-spacing-100);
+  --bs-navigation-drawer-item-children-gap: var(--bs-spacing-150);
 
   --bs-navigation-drawer-item-collapsed-gap: var(--bs-spacing-100);
   --bs-navigation-drawer-item-collapsed-padding: var(--bs-spacing-100);
@@ -117,6 +117,7 @@
   font-size: var(--bs-navigation-drawer-item-font-size);
   line-height: calc(var(--bs-navigation-drawer-item-line-height) * 1px);
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
   transition:
     color var(--bs-duration-fast) var(--bs-easing-standard),
@@ -277,6 +278,11 @@
   flex: none;
   width: 100%;
   text-align: center;
+  /* A centered caption in a nowrap + overflow:hidden box is clipped on BOTH sides when it is
+     wider than the 96px rail; wrap instead so long captions stay readable. */
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
   font-size: var(--bs-navigation-drawer-item-collapsed-font-size);
   line-height: calc(var(--bs-navigation-drawer-item-collapsed-line-height) * 1px);
 }
@@ -311,6 +317,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--bs-navigation-drawer-item-children-gap);
+  /* Same spacing between the parent row and its first child as between sibling children. */
+  margin-top: var(--bs-navigation-drawer-item-children-gap);
 }
 
 :host(:not([expanded])) .bs-navigation-drawer-item__children {

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.js

@@ -83,7 +83,17 @@ export class BsNavigationDrawerItem {
      * never shows a nested tree.
      */
     collapsed = false;
-    /** Fires on click, only when `expandable` is false. See the class doc above. */
+    /** Makes a leaf item a real link: renders an `<a part="item" href>` instead of the `<button>`, so
+     * open-in-new-tab, copy link address, middle-click and the status-bar URL work. Ignored when
+     * `expandable` (groups stay buttons). `bsSelect` still fires on a plain click and is
+     * **cancelable**: call `event.preventDefault()` to stop the navigation and route it yourself
+     * (an SPA router). Ctrl/cmd/shift/alt-clicks and middle-clicks are left to the browser and do not
+     * emit `bsSelect`. */
+    href;
+    /** `target` of the link, when `href` is set. */
+    target;
+    /** Fires on click, only when `expandable` is false. Cancelable when `href` is set (see `href`).
+     * See the class doc above. */
     bsSelect;
     /** Fires with the new `expanded` value on click, only when `expandable` is true. See the class
      * doc above. */
@@ -106,7 +116,16 @@ export class BsNavigationDrawerItem {
     onIconSlotchange = (ev) => {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
-    onClick = () => {
+    onClick = (ev) => {
+        if (this.href && !this.expandable) {
+            // Modified and non-primary clicks open in a new tab/window: leave them to the browser.
+            if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+                return;
+            const select = this.bsSelect.emit();
+            if (select.defaultPrevented)
+                ev.preventDefault();
+            return;
+        }
         if (this.expandable) {
             this.expanded = !this.expanded;
             this.bsToggle.emit(this.expanded);
@@ -131,7 +150,9 @@ export class BsNavigationDrawerItem {
         // incorrectly also toggle this parent row on every child click. Both are wrapped in a
         // `display: contents` container so render() still returns a single root node (this codebase's
         // convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
-        return (h("div", { key: '81e29ccbcc7a513d9caa85982104e4c65919ffce', class: "bs-navigation-drawer-item__root" }, h("button", { key: '68e2c8edd1280f003719751c9cf2aa561ecc9059', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: '7520bf470ed4250c8767905d5b7e05166b2d9f06', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: 'c8cffca5bb390ab60d68c6c97736053c374bb026', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '4f3b8034935678d64a29281f2cfd1ed44250eca2', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: 'e9f50c5b4dc9e96ed39d85c1daa96981deb7a810' })), this.expandable && (h("span", { key: '369853e213a7ecd0a64ec28d820d40139fb6d68e', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: 'f3d8fcd09d63be37a4b6a1e3cc10240eec5425f9' })))), this.expandable && (h("span", { key: '445291ae6a7f888ac6cb456ada3a7a17cf4638dd', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '697e924b580b1fef5f0b5871df38c0bd104982c8', name: "children" })))));
+        const isLink = !!this.href && !this.expandable;
+        const Tag = isLink ? 'a' : 'button';
+        return (h("div", { key: '6959b0e14cf788fc3ea5c25c548f1552dc846e48', class: "bs-navigation-drawer-item__root" }, h(Tag, { key: '0da9511f8e0c726e85bbd9d1742cfadb2e34c6b2', ...(isLink ? { href: this.href, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined } : { type: 'button' }), part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-current": this.selected && !this.expandable ? 'page' : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: '60bd0685577fb2bb6362917bfbdef2844fed536a', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: 'c58670508fd4ab20e5b5625baba6838e6550981d', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: 'dd2e59620cede02cd9a419a706c983fd513be47d', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: 'edd672532d815514ebd110c3a7d84c77d0ea565e' })), this.expandable && (h("span", { key: '9574bdd1a733c3c10dbd538d59b12f87aee71e9f', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: 'd29a831256777f0044f0902bceda134a4ddd0153' })))), this.expandable && (h("span", { key: '9e0bc4982629ecda8dcedec08f2af663b14042d1', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '71cb92fe0b807f0d3374fb5da4bab79cc362a24d', name: "children" })))));
     }
     static get is() { return "bs-navigation-drawer-item"; }
     static get encapsulation() { return "shadow"; }
@@ -266,6 +287,44 @@ export class BsNavigationDrawerItem {
                 "reflect": true,
                 "attribute": "collapsed",
                 "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes a leaf item a real link: renders an `<a part=\"item\" href>` instead of the `<button>`, so\nopen-in-new-tab, copy link address, middle-click and the status-bar URL work. Ignored when\n`expandable` (groups stay buttons). `bsSelect` still fires on a plain click and is\n**cancelable**: call `event.preventDefault()` to stop the navigation and route it yourself\n(an SPA router). Ctrl/cmd/shift/alt-clicks and middle-clicks are left to the browser and do not\nemit `bsSelect`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`target` of the link, when `href` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
             }
         };
     }
@@ -283,7 +342,7 @@ export class BsNavigationDrawerItem {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires on click, only when `expandable` is false. See the class doc above."
+                    "text": "Fires on click, only when `expandable` is false. Cancelable when `href` is set (see `href`).\nSee the class doc above."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.cmp.test.js

@@ -110,27 +110,23 @@ describe('bs-navigation-header: width and small screens', () => {
             expect(Math.round(bar.getBoundingClientRect().width)).toBe(1920);
         });
     });
-    // Issue: at <=768px a left slot with intrinsic width (e.g. a search field) made the right slot
-    // drop to its own row, because right was forced to flex: 1 1 100%.
-    // `default` also has the logo and two 40px gaps in the row, so only a single action icon fits
-    // beside it at 390px (more would correctly wrap -- see the next test).
+    // At a narrow header width the left slot drops to its own second row, so the right slot stays
+    // beside the logo on the first row and inside the viewport.
     for (const [alignment, icons] of [
         ['with-navigation-drawer', 3],
         ['default', 1],
     ]) {
-        it(`${alignment}: a wide left slot yields, so the right slot stays on the same row at 390px`, async () => {
+        it(`${alignment}: a wide left slot drops below, so the right slot stays on the logo row at 390px`, async () => {
             await withViewport(390, 800, async () => {
                 const { root, waitForChanges } = await render(h("bs-navigation-header", { alignment: alignment }, h("input", { slot: "left", style: { width: '380px' }, "aria-label": "Search" }), h("div", { slot: "right", style: { display: 'flex', gap: '8px' } }, Array.from({ length: icons }, (_, i) => (h("bs-icon-button", { ariaLabel: `Action ${i + 1}` }, "x"))))));
                 await waitForChanges();
                 const left = root.shadowRoot.querySelector('[part="left"]');
                 const right = root.shadowRoot.querySelector('[part="right"]');
-                // Same row = the two boxes overlap vertically (they have different heights and are
-                // center-aligned, so their tops legitimately differ).
                 const l = left.getBoundingClientRect();
                 const r = right.getBoundingClientRect();
-                expect(r.top < l.bottom && l.top < r.bottom).toBe(true);
-                // and it stays inside the viewport (no horizontal overflow from the right slot)
+                expect(l.top).toBeGreaterThanOrEqual(r.bottom - 1);
                 expect(r.right).toBeLessThanOrEqual(390);
+                expect(l.right).toBeLessThanOrEqual(390);
             });
         });
     }
@@ -222,3 +218,40 @@ describe('bs-navigation-header: mobile', () => {
         });
     });
 });
+describe('bs-navigation-header: container-width layout', () => {
+    const intersects = (a, b) => a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+    for (const width of [320, 600, 1200]) {
+        it(`${width}px container: no overlap/clipping between left items and right content, "Sign in" on one line`, async () => {
+            // Wide viewport on purpose: only the header's OWN width (container query) may drive layout.
+            await withViewport(1400, 900, async () => {
+                const { root, waitForChanges } = await render(h("div", { style: { width: `${width}px` } }, h("bs-navigation-header", null, h("div", { slot: "left", style: { display: 'contents' } }, h("bs-button", { variant: "subtle", size: "sm" }, "Products"), h("bs-button", { variant: "subtle", size: "sm" }, "Solutions"), h("bs-button", { variant: "subtle", size: "sm" }, "Pricing")), h("div", { slot: "right", style: { display: 'contents' } }, h("bs-icon-button", { ariaLabel: "Search" }, "s"), h("bs-icon-button", { ariaLabel: "Notifications" }, "n"), h("bs-button", { size: "sm" }, "Sign in")))));
+                await waitForChanges();
+                await new Promise(r => setTimeout(r, 100));
+                const header = root.querySelector('bs-navigation-header');
+                const bar = header.shadowRoot.querySelector('header');
+                const barRect = bar.getBoundingClientRect();
+                const lefts = Array.from(header.querySelectorAll('[slot="left"] > bs-button')).map(e => e.getBoundingClientRect());
+                const rights = Array.from(header.querySelectorAll('[slot="right"] > *')).map(e => e.getBoundingClientRect());
+                for (const l of lefts) {
+                    for (const r of rights)
+                        expect(intersects(l, r)).toBe(false);
+                }
+                for (const rect of [...lefts, ...rights]) {
+                    expect(rect.left).toBeGreaterThanOrEqual(barRect.left - 0.5);
+                    expect(rect.right).toBeLessThanOrEqual(barRect.right + 0.5);
+                }
+                // left items don't touch each other or the icons either (spacing from tokens)
+                for (let i = 1; i < lefts.length; i++) {
+                    if (Math.abs(lefts[i].top - lefts[i - 1].top) < 4)
+                        expect(lefts[i].left - lefts[i - 1].right).toBeGreaterThanOrEqual(4);
+                }
+                const signIn = header.querySelector('[slot="right"] > bs-button');
+                const signInRect = signIn.getBoundingClientRect();
+                // single line: the sm button is 40px tall at 1200px; a wrapped label would be taller
+                expect(Math.round(signInRect.height)).toBeLessThanOrEqual(40);
+                expect(header.getBoundingClientRect().width).toBe(width);
+                expect(header.scrollWidth).toBeLessThanOrEqual(width);
+            });
+        });
+    }
+});

package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.css

@@ -9,9 +9,8 @@
  * @prop --bs-navigation-header-padding-x: Aliased to --bs-margin-fluid.
  * @prop --bs-navigation-header-max-width: Overall max-width of the bar. Defaults to `none`, so an
  *   app-shell header spans its container (a 1920px default stopped the bar short on screens wider
- *   than that while the content below kept going). Set a length, e.g. `1920px`, to cap it. The global
- *   vendored --bs-breakpoints-max-width token is not used: it is malformed (`1920rem` instead of
- *   `1920px`).
+ *   than that while the content below kept going). Set a length, e.g. `1920px` or
+ *   `var(--bs-breakpoints-max-width)` (now `1920px`; it used to be a malformed `1920rem`), to cap it.
  * @prop --bs-navigation-header-item-gap: Gap between the logo and the `left` slot (`default`
  *   alignment), or between the `left` and `right` slots (`with-navigation-drawer` alignment, which
  *   has no logo). Not used in `center` alignment -- see the class doc in bs-navigation-header.tsx.
@@ -34,6 +33,8 @@
 :host {
   display: block;
   position: relative;
+  /* The header responds to its OWN width (see the @container rule below), not the viewport's. */
+  container-type: inline-size;
   --bs-navigation-header-menu-z-index: var(--bs-z-index-dropdown);
   --bs-navigation-header-menu-max-height: calc(100vh - 100%);
 
@@ -121,9 +122,19 @@
 
 .bs-navigation-header__left {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--bs-navigation-header-slot-gap);
+  /* Shrinkable and wrapping, so left-slot items fold onto another line instead of running under
+     the right slot. */
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.bs-navigation-header__left ::slotted(*),
+.bs-navigation-header__right ::slotted(*) {
   flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .bs-navigation-header__right {
@@ -131,56 +142,52 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--bs-navigation-header-slot-gap);
-  flex: 1 0 0;
-  min-width: 0;
+  /* Never shrinks: action buttons/labels keep their natural width and stay on one line. */
+  flex: 1 0 auto;
+  white-space: nowrap;
 }
 
-/* Below 768px (same breakpoint bs-navigation-drawer's own small-screen treatment uses, for
-   consistency -- this library has no other width-based @media precedent to follow, see that
-   component's CSS for the full reasoning), the fixed-width `bs-logo` (flex-shrink: 0 on `__logo`
-   above) and the `right` slot's action icons no longer reliably fit in one row at real
-   small-screen widths (e.g. 390px) -- the icon buttons inside `right` don't shrink, so they
-   overflowed past the logo, reading as an overlap/collision. The bar therefore wraps, but only when
-   it has to: `left` takes a zero flex-basis (`flex: 1 1 0%; min-width: 0`) so it yields all its
-   space to the logo and `right` instead of forcing `right` onto its own row whenever `left` has
-   intrinsic width (e.g. a search field), and `right` keeps its natural width (`flex: 0 0 auto`),
-   pushed to the end. When logo + `right` fit together they share one row; when they don't, `right`
-   wraps below, right-aligned. Content slotted into `left` should itself be able to shrink
-   (`width: 100%` / `min-width: 0`) -- a fixed-width element would overflow its container.
-   Only `default`/`with-navigation-drawer` need this -- `center`'s logo/right are already flex: 1
-   and absorb the narrower width themselves. */
-@media (max-width: 768px) {
-  @supports (height: 100dvh) {
-    :host {
-      --bs-navigation-header-menu-max-height: calc(100dvh - 100%);
-    }
-  }
+.bs-navigation-header--center .bs-navigation-header__right {
+  flex: 1 0 0;
+}
 
-  .bs-navigation-header--default,
-  .bs-navigation-header--with-navigation-drawer {
+/* Narrow container (<= 768px of the HEADER's own width, so it also works in a narrow sidebar or
+   embedded preview, not just on small viewports): the bar wraps. Logo and `right` share the first
+   row (`right` pushed to the end, never shrinking), and `left` drops to its own full-width second
+   row where its items wrap again if needed -- so nothing in `left` can overlap or be clipped by
+   `right`. */
+@container (max-width: 768px) {
+  .bs-navigation-header {
     flex-wrap: wrap;
     row-gap: var(--bs-navigation-header-slot-gap);
   }
 
-  .bs-navigation-header--default .bs-navigation-header__left,
-  .bs-navigation-header--with-navigation-drawer .bs-navigation-header__left {
-    flex: 1 1 0%;
-    min-width: 0;
+  .bs-navigation-header--center .bs-navigation-header__logo {
+    flex: 1 0 auto;
   }
 
-  .bs-navigation-header--default .bs-navigation-header__right,
-  .bs-navigation-header--with-navigation-drawer .bs-navigation-header__right {
+  .bs-navigation-header__right,
+  .bs-navigation-header--center .bs-navigation-header__right {
     flex: 0 0 auto;
     margin-inline-start: auto;
-    justify-content: flex-end;
   }
 
-  /* Slotted tabs/buttons are wider than the room left for `left` on a phone. The region scrolls
-     sideways inside itself instead of pushing the page wider. Desktop is untouched. */
-  .bs-navigation-header--default .bs-navigation-header__left {
+  .bs-navigation-header__left {
+    order: 3;
+    flex: 1 1 100%;
+    /* Items wrap; a single item wider than the row scrolls inside the region instead of
+       widening the page. */
     overflow-x: auto;
     scrollbar-width: none;
   }
+}
+
+@media (max-width: 768px) {
+  @supports (height: 100dvh) {
+    :host {
+      --bs-navigation-header-menu-max-height: calc(100dvh - 100%);
+    }
+  }
 
   /* A tall `menu` panel scrolls inside itself rather than running past the bottom of the screen. */
   .bs-navigation-header__menu {

package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.js

@@ -68,8 +68,8 @@ export class BsNavigationHeader {
         const showLogo = this.alignment !== 'with-navigation-drawer';
         const rootClasses = `bs-navigation-header bs-navigation-header--${this.alignment}`;
         return [
-            h("header", { key: '3c9fb71de577fc51e54ef408afcbca45e84ce079', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: '43037609edd64d0c71959032d74889dc6606b35f', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: 'cbc5b28a31a5ce411ece05ed001cf4305cad18ab', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '26d9fafe4fe95925094037f5cd4160ba32af2a12', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: '784a5580313c462c5e501954e979b01c04ba325e', name: "left" })), h("div", { key: '2269661581210bcad049f58f8e36b2d2cfd5f1a3', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: '8f388585ff868e30816e345811d620dd624c37c2', name: "right" }))),
-            h("div", { key: '65a6486ebad50bda4723aab3b9eb7a47cc0b17c8', part: "menu", class: "bs-navigation-header__menu" }, h("slot", { key: 'b46c078d0114329c5b10458944f212974c50f098', name: "menu" })),
+            h("header", { key: 'a7fcffa2ec464842b2e6aad19fa9a21e85796b7d', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: '21432a41f971e607c5df6c846d869912682a56cc', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: '6803c29fd5a3ede2f4a644da7829fee45e2b8fa2', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: 'e42b7b5efce1b19d59d230dbad95b1f271db679e', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: 'a5e06ce8b39f8b58bdda0309f6c83e6c3cdb1875', name: "left" })), h("div", { key: '77e37e7c843f836abfa17bba7d7f0faba6a8d77d', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: '093e569c6288ccf3012dfdd9c802777c1c30a9f2', name: "right" }))),
+            h("div", { key: 'a236363d6d749ef4a65b2a027146958a7d104913', part: "menu", class: "bs-navigation-header__menu" }, h("slot", { key: 'd1b13e21f13dc901b937a77792986ead352f47eb', name: "menu" })),
         ];
     }
     static get is() { return "bs-navigation-header"; }

package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.stories.js

@@ -342,6 +342,28 @@ export const HeaderBaseWithActions = {
 export const HeaderBaseWithNavigationAndActions = {
     name: 'Header Base with Navigation and Actions',
 };
+// The header reacts to its OWN width (container query), so these wrap it in a fixed-width box
+// rather than resizing the viewport.
+const inContainer = (width) => (args) => html `
+  <div style="width: ${width}; border: 1px dashed var(--bs-border-default);">
+    <bs-navigation-header alignment=${args.alignment} logo-background=${args.logoBackground}>
+      <div slot="left" style="display: contents;">${leftSlotContent(args.leftContentType)}</div>
+      <div slot="right" style="display: contents;">${RIGHT_SLOT}</div>
+    </bs-navigation-header>
+  </div>
+`;
+export const HeaderBaseNarrowContainer = {
+    name: 'Narrow container (320px)',
+    render: inContainer('320px'),
+};
+export const HeaderBaseMediumContainer = {
+    name: 'Medium container (600px)',
+    render: inContainer('600px'),
+};
+export const HeaderBaseWideContainer = {
+    name: 'Wide container (1200px)',
+    render: inContainer('1200px'),
+};
 export const HeaderBaseWithNavigationAndActionsCentered = {
     name: 'Header Base with Navigation and Actions, Centered',
     args: { alignment: 'center' },

package/dist/collection/index.js

@@ -8,3 +8,4 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export { format } from './utils/utils';
+export { registerIcons, iconNames } from './components/bs-icon/icon-registry';

package/dist/collection/test/helpers/block-link-navigation.js

@@ -0,0 +1,13 @@
+import { afterEach, beforeEach } from "vitest";
+/** Blocks native link navigation for every test in the calling file.
+ *
+ * A click that reaches an `<a href>` un-prevented really navigates (or, with ctrl/cmd/middle, opens a
+ * new tab in) the browser running the tests; the vitest browser runner does not survive that, and
+ * floods the run with "Unknown event: ready" errors that fail the whole job. The listener sits on
+ * `window` in the bubbling phase, so the component's own handlers (and anything the test listens for)
+ * still run first. Call once at the top of any test file that clicks a link. */
+export function blockLinkNavigation() {
+    const guard = (e) => e.preventDefault();
+    beforeEach(() => window.addEventListener('click', guard));
+    afterEach(() => window.removeEventListener('click', guard));
+}