@brandsync/wc 1.19.0 → 1.20.1

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: 'd9db10cc12e5bb94ef9d4ee56717e05dfb6c81d5', class: "bs-navigation-drawer-item__root" }, h("button", { key: 'a8e08b999c594e581cf7bc2f9dd50b63dd6fd5b7', 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: '6f57eb21aade5519a8235c9e90c32a700eaef7a4', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '26028625770be92dc2761cf596b2bc4a4d0bfb57', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '1cbdceae85fe3260092c893131ad3b326d487220', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '1ebf7621f785f2c74a35ef74c4f636d5a38825c1' })), this.expandable && (h("span", { key: 'fbbad51caf5dbe3e16e4441ccc5c491c84d96d16', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '2d70a545c6dba957f610448bec41073b686ce393' })))), this.expandable && (h("span", { key: '59d66b9003e99d048a755200ce29bbae7baa37d1', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '46409b5c795e13a3f49bd9c034c2ebc20a27ecf2', 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: 'e5a6d82f514a4a9a8b9536e20fcca17d1e452dd5', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: 'a8643e93a72106972c90dc1ae3ded93373a3a92c', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: 'ea9b690969ccbc0bbfe3a04db3757103ebdfa48e', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '0f594db771b56aa2ef6b273012f2c8adec7dd863', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: 'da581da6eb58bfce585c672afd03aeedcfc9e524', name: "left" })), h("div", { key: '2c8b09111497e393f1daad72834adf556a120030', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: '9a94ec3a103ac001fd54c4b29efdefd4d9fdf89e', name: "right" }))),
-            h("div", { key: '7038aad3e3fb78939d5560d6279015cb6b7aa744', part: "menu", class: "bs-navigation-header__menu" }, h("slot", { key: '2dcec3ff4dbae882c7e32c633ce57997a4dc326a', 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));
+}

package/dist/collection/test/helpers/contrast.js

@@ -0,0 +1,57 @@
+/** WCAG contrast helpers for browser component tests. Any CSS colour (rgb(), color-mix(), oklch...) is
+ * normalised to sRGB through a 1x1 canvas, so computed-style values can be passed straight in. */
+function toRgb(css) {
+    const ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    ctx.canvas.width = ctx.canvas.height = 1;
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = css;
+    ctx.fillRect(0, 0, 1, 1);
+    const d = ctx.getImageData(0, 0, 1, 1).data;
+    return [d[0], d[1], d[2], d[3] / 255];
+}
+function luminance([r, g, b]) {
+    const c = [r, g, b].map(v => {
+        const s = v / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+}
+/** Contrast ratio between a foreground and background CSS colour; a translucent bg is composited over `backdrop`, a translucent fg over the bg. */
+export function contrastRatio(fg, bg, backdrop = 'rgb(255, 255, 255)') {
+    const raw = toRgb(bg);
+    const back = toRgb(backdrop);
+    const b = [0, 1, 2].map(i => raw[i] * raw[3] + back[i] * (1 - raw[3]));
+    const f = toRgb(fg);
+    const a = f[3];
+    const fgc = [0, 1, 2].map(i => f[i] * a + b[i] * (1 - a));
+    const l1 = luminance(fgc);
+    const l2 = luminance(b);
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+/** Resolves a CSS value (e.g. `var(--bs-text-inverse)`) to a computed colour in the context of `el`. */
+export function resolveColor(el, value, prop = 'backgroundColor') {
+    const probe = document.createElement('span');
+    probe.style[prop] = value;
+    probe.style.display = 'none';
+    el.appendChild(probe);
+    const out = getComputedStyle(probe)[prop];
+    probe.remove();
+    return out;
+}
+export async function withTheme(theme, fn) {
+    const prev = document.documentElement.getAttribute('data-theme');
+    if (theme === 'dark')
+        document.documentElement.setAttribute('data-theme', 'dark');
+    else
+        document.documentElement.removeAttribute('data-theme');
+    await new Promise(r => setTimeout(r, 60));
+    try {
+        return await fn();
+    }
+    finally {
+        if (prev === null)
+            document.documentElement.removeAttribute('data-theme');
+        else
+            document.documentElement.setAttribute('data-theme', prev);
+    }
+}

package/dist/components/bs-accordion-group.js

@@ -1 +1 @@
-import{t as o,p as s,H as c,h as e}from"./p-B2gx7SZk.js";const r=s(class extends c{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow()}get el(){return this}multiple=!1;onToggle(o){const s=o.target;if(!s||"bs-accordion"!==s.tagName.toLowerCase())return;const c=o.detail;s.expanded=c,c&&!this.multiple&&Array.from(this.el.querySelectorAll("bs-accordion")).forEach((o=>{o!==s&&(o.expanded=!1)}))}render(){return e("div",{key:"f3c43bbdb41aacc19356b37b736dbbe92dbee8c9",part:"group",class:"bs-accordion-group"},e("slot",{key:"5ad2f89cd263163bd153473e0bae103655426588"}))}static get style(){return":host{display:block;--bs-accordion-group-gap:0}.bs-accordion-group{display:flex;flex-direction:column;gap:var(--bs-accordion-group-gap)}"}},[769,"bs-accordion-group",{multiple:[4]},[[0,"bsToggle","onToggle"]]]);function t(){"undefined"!=typeof customElements&&["bs-accordion-group"].forEach((s=>{"bs-accordion-group"===s&&(customElements.get(o(s))||customElements.define(o(s),r))}))}t();const n=r,a=t;export{n as BsAccordionGroup,a as defineCustomElement}
+import{t as o,p as c,H as s,h as r}from"./p-CcAX4o5o.js";const t=c(class extends s{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow()}get el(){return this}multiple=!1;onToggle(o){const c=o.target;if(!c||"bs-accordion"!==c.tagName.toLowerCase())return;const s=o.detail;c.expanded=s,s&&!this.multiple&&Array.from(this.el.querySelectorAll("bs-accordion")).forEach((o=>{o!==c&&(o.expanded=!1)}))}render(){return r("div",{key:"56384f2124a0950a70906c7cc581fe084d5ccfd5",part:"group",class:"bs-accordion-group"},r("slot",{key:"8b6cc577ccd33cb10d7b393cf2acd0b6d0cf11df"}))}static get style(){return":host{display:block;--bs-accordion-group-gap:0}.bs-accordion-group{display:flex;flex-direction:column;gap:var(--bs-accordion-group-gap)}"}},[769,"bs-accordion-group",{multiple:[4]},[[0,"bsToggle","onToggle"]]]);function e(){"undefined"!=typeof customElements&&["bs-accordion-group"].forEach((c=>{"bs-accordion-group"===c&&(customElements.get(o(c))||customElements.define(o(c),t))}))}e();const n=t,i=e;export{n as BsAccordionGroup,i as defineCustomElement}

package/dist/components/bs-accordion.js

@@ -1 +1 @@
-import{t as o,p as i,H as a,c as e,h as n}from"./p-B2gx7SZk.js";const c=i(class extends a{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.bsToggle=e(this,"bsToggle")}get el(){return this}expanded=!1;size="medium";disabled=!1;showIcon=!0;showPreview=!0;bsToggle;closing=!1;contentEl;animation;fromHeight=0;fromPadding="0px";pendingAnimation=!1;onExpandedChange(o){const i=this.contentEl;this.fromHeight=i?i.getBoundingClientRect().height:0,this.fromPadding=i?getComputedStyle(i).paddingBottom:"0px",this.animation?.cancel(),this.pendingAnimation=!0,o||this.showPreview||(this.closing=!0)}componentDidRender(){if(!this.pendingAnimation)return;this.pendingAnimation=!1;const o=this.contentEl,i=getComputedStyle(this.el),a=this.toMs(i.getPropertyValue("--bs-accordion-duration"));if(!o||0===a)return void(this.closing=!1);const e=!this.expanded&&!this.showPreview,n=e?0:o.getBoundingClientRect().height,c=e?"0px":getComputedStyle(o).paddingBottom;this.animation=o.animate([{height:this.fromHeight+"px",paddingBottom:this.fromPadding,overflow:"hidden"},{height:n+"px",paddingBottom:c,overflow:"hidden"}],{duration:a,easing:i.getPropertyValue("--bs-accordion-easing").trim()||"ease"}),this.animation.onfinish=()=>{this.closing=!1}}toMs(o){const i=o.trim();return i.endsWith("ms")?parseFloat(i):i.endsWith("s")?1e3*parseFloat(i):0}onActivate=()=>{this.disabled||this.bsToggle.emit(!this.expanded)};render(){return n("div",{key:"b7645b3be5116d906a2aa6e4e680859a9c19323f",part:"container",class:`bs-accordion bs-accordion--${this.size} ${this.disabled?"bs-accordion--disabled":""}`},n("button",{key:"a1c824c54a529b2214dbb47cb93adea5cdadee84",type:"button",part:"header",class:`bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon?"":"bs-accordion__header--no-icon"}`,disabled:this.disabled,"aria-expanded":this.expanded+"",onClick:this.onActivate},this.showIcon&&n("span",{key:"5d35f4e2c05704a6bef532919301e765f8195aa7",part:"icon",class:"bs-accordion__icon bs-accordion__icon--"+this.size,"aria-hidden":"true"},n("slot",{key:"137280692f375379ef43be918094192d6030e2ad",name:"icon"},n(d,{key:"8826de2813774382dcf21e856288ff936eb12425"}))),n("span",{key:"57f370d082a86b7488bf309a114b82077d1f6711",part:"label",class:"bs-accordion__label "+(this.showIcon?"":"bs-accordion__label--no-icon")},n("slot",{key:"5563063582ee2e1fb79d02acdc3d0feb5ac07eec",name:"label"})),n("span",{key:"8d8afd4433823aa8122b2ed167fd5ed3c32dc21a",part:"caret",class:`bs-accordion__caret bs-accordion__caret--${this.size} ${this.expanded?"bs-accordion__caret--open":""}`,"aria-hidden":"true"},n(r,{key:"51dfcbdfa5ccff5c3e6a6c2f983fc4d7fb460c18"}))),(this.expanded||this.showPreview||this.closing)&&n("div",{key:"8d62decaf3dc7a98f91eaea1723fc26a8fc520a4",ref:o=>this.contentEl=o,part:"content",class:`bs-accordion__content ${this.showIcon?"":"bs-accordion__content--no-icon"} ${this.expanded?"bs-accordion__content--expanded":"bs-accordion__content--collapsed"}`},n("slot",{key:"56493eb5b425134b38ac60f481219a823379626e"})))}static get watchers(){return{expanded:[{onExpandedChange:0}]}}static get style(){return":host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus);--bs-accordion-duration:var(--bs-duration-default);--bs-accordion-easing:var(--bs-easing-standard)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit;transition:background-color var(--bs-accordion-duration) var(--bs-accordion-easing)}.bs-accordion:has(.bs-accordion__header:hover),.bs-accordion:has(.bs-accordion__header:active){background:var(--bs-accordion-bg-hover)}.bs-accordion:has(.bs-accordion__header:focus-visible){background:var(--bs-accordion-bg-hover);outline:2px solid var(--bs-accordion-focus-ring);outline-offset:2px;border-radius:calc(var(--bs-accordion-radius) + 2px)}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0;cursor:pointer;font-family:inherit;text-align:start}.bs-accordion__header:focus-visible{outline:none}.bs-accordion__header--medium{padding-top:var(--bs-accordion-header-padding-y-medium);padding-bottom:var(--bs-accordion-header-padding-y-medium)}.bs-accordion__header--large{padding-top:var(--bs-accordion-header-padding-y-large);padding-bottom:var(--bs-accordion-header-padding-y-large)}.bs-accordion__header:disabled{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled);cursor:default}.bs-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__icon svg{width:24px;height:24px}.bs-accordion__icon--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__icon--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__label{flex:1 1 auto;min-width:0;font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px);font-weight:var(--bs-accordion-font-weight)}.bs-accordion__label--no-icon{padding-inline-start:var(--bs-accordion-header-padding-x)}.bs-accordion__caret{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__caret{transition:transform var(--bs-accordion-duration) var(--bs-accordion-easing)}.bs-accordion__caret--open{transform:rotate(180deg)}.bs-accordion__caret svg{width:24px;height:24px}.bs-accordion__caret--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__caret--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__content{box-sizing:border-box;padding-top:0;padding-bottom:var(--bs-accordion-content-padding-bottom);padding-inline-end:var(--bs-accordion-content-padding-right);padding-inline-start:var(--bs-accordion-content-padding-left);color:var(--bs-accordion-text-default);font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px)}.bs-accordion__content--no-icon{padding-inline-start:var(--bs-accordion-content-padding-left-no-icon)}.bs-accordion__content--collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bs-accordion--disabled .bs-accordion__content{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled)}"}},[769,"bs-accordion",{expanded:[516],size:[1],disabled:[4],showIcon:[4,"show-icon"],showPreview:[4,"show-preview"],closing:[32]},void 0,{expanded:[{onExpandedChange:0}]}]),d=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},n("path",{d:"M12 5V19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),n("path",{d:"M5 12H19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),r=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},n("path",{d:"M6 9.75L12 15.75L18 9.75",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));function s(){"undefined"!=typeof customElements&&["bs-accordion"].forEach((i=>{"bs-accordion"===i&&(customElements.get(o(i))||customElements.define(o(i),c))}))}s();const t=c,b=s;export{t as BsAccordion,b as defineCustomElement}
+import{t as o,p as i,H as a,c as n,h as e}from"./p-CcAX4o5o.js";const c=i(class extends a{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.bsToggle=n(this,"bsToggle")}get el(){return this}expanded=!1;size="medium";disabled=!1;showIcon=!0;showPreview=!0;bsToggle;closing=!1;contentEl;animation;fromHeight=0;fromPadding="0px";pendingAnimation=!1;onExpandedChange(o){const i=this.contentEl;this.fromHeight=i?i.getBoundingClientRect().height:0,this.fromPadding=i?getComputedStyle(i).paddingBottom:"0px",this.animation?.cancel(),this.pendingAnimation=!0,o||this.showPreview||(this.closing=!0)}componentDidRender(){if(!this.pendingAnimation)return;this.pendingAnimation=!1;const o=this.contentEl,i=getComputedStyle(this.el),a=this.toMs(i.getPropertyValue("--bs-accordion-duration"));if(!o||0===a)return void(this.closing=!1);const n=!this.expanded&&!this.showPreview,e=n?0:o.getBoundingClientRect().height,c=n?"0px":getComputedStyle(o).paddingBottom;this.animation=o.animate([{height:this.fromHeight+"px",paddingBottom:this.fromPadding,overflow:"hidden"},{height:e+"px",paddingBottom:c,overflow:"hidden"}],{duration:a,easing:i.getPropertyValue("--bs-accordion-easing").trim()||"ease"}),this.animation.onfinish=()=>{this.closing=!1}}toMs(o){const i=o.trim();return i.endsWith("ms")?parseFloat(i):i.endsWith("s")?1e3*parseFloat(i):0}onActivate=()=>{this.disabled||this.bsToggle.emit(!this.expanded)};render(){return e("div",{key:"5b7922ce5d634a43d1ca3020b02e61b2749646f1",part:"container",class:`bs-accordion bs-accordion--${this.size} ${this.disabled?"bs-accordion--disabled":""}`,"aria-disabled":this.disabled?"true":void 0},e("button",{key:"36a5a7504c9d4301db2268652037a28cee8cc395",type:"button",part:"header",class:`bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon?"":"bs-accordion__header--no-icon"}`,disabled:this.disabled,"aria-expanded":this.expanded+"",onClick:this.onActivate},this.showIcon&&e("span",{key:"2933f14e71ec7902e310761481c7408aa5afdb07",part:"icon",class:"bs-accordion__icon bs-accordion__icon--"+this.size,"aria-hidden":"true"},e("slot",{key:"d156fc7944f2177764a5622c6753c45190176549",name:"icon"},e(d,{key:"c570019c3b65661d9237c9d182ab5b0aa6fcc808"}))),e("span",{key:"dafef9038d6d29fa3193515d605244d371efc2bb",part:"label",class:"bs-accordion__label "+(this.showIcon?"":"bs-accordion__label--no-icon")},e("slot",{key:"c752f678a8032bd3cb01b1d9d43eb9d863707a67",name:"label"})),e("span",{key:"20fd3835f885ad26ebfea64c02bd16dfd0c3fea1",part:"caret",class:`bs-accordion__caret bs-accordion__caret--${this.size} ${this.expanded?"bs-accordion__caret--open":""}`,"aria-hidden":"true"},e(r,{key:"af7922ee4c4280e17dddd51f6681415c70389ef6"}))),(this.expanded||this.showPreview||this.closing)&&e("div",{key:"ac8fb07634032e1035e88c0f713841d9276df2f8",ref:o=>this.contentEl=o,part:"content",class:`bs-accordion__content ${this.showIcon?"":"bs-accordion__content--no-icon"} ${this.expanded?"bs-accordion__content--expanded":"bs-accordion__content--collapsed"}`},e("slot",{key:"6263559f2a03fd514cdc98538e1c9faee0767313"})))}static get watchers(){return{expanded:[{onExpandedChange:0}]}}static get style(){return":host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus);--bs-accordion-duration:var(--bs-duration-default);--bs-accordion-easing:var(--bs-easing-standard)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit;transition:background-color var(--bs-accordion-duration) var(--bs-accordion-easing)}.bs-accordion:has(.bs-accordion__header:hover),.bs-accordion:has(.bs-accordion__header:active){background:var(--bs-accordion-bg-hover)}.bs-accordion:has(.bs-accordion__header:focus-visible){background:var(--bs-accordion-bg-hover);outline:2px solid var(--bs-accordion-focus-ring);outline-offset:2px;border-radius:calc(var(--bs-accordion-radius) + 2px)}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0;cursor:pointer;font-family:inherit;text-align:start}.bs-accordion__header:focus-visible{outline:none}.bs-accordion__header--medium{padding-top:var(--bs-accordion-header-padding-y-medium);padding-bottom:var(--bs-accordion-header-padding-y-medium)}.bs-accordion__header--large{padding-top:var(--bs-accordion-header-padding-y-large);padding-bottom:var(--bs-accordion-header-padding-y-large)}.bs-accordion__header:disabled{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled);cursor:default}.bs-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__icon svg{width:24px;height:24px}.bs-accordion__icon--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__icon--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__label{flex:1 1 auto;min-width:0;font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px);font-weight:var(--bs-accordion-font-weight)}.bs-accordion__label--no-icon{padding-inline-start:var(--bs-accordion-header-padding-x)}.bs-accordion__caret{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__caret{transition:transform var(--bs-accordion-duration) var(--bs-accordion-easing)}.bs-accordion__caret--open{transform:rotate(180deg)}.bs-accordion__caret svg{width:24px;height:24px}.bs-accordion__caret--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__caret--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__content{box-sizing:border-box;padding-top:0;padding-bottom:var(--bs-accordion-content-padding-bottom);padding-inline-end:var(--bs-accordion-content-padding-right);padding-inline-start:var(--bs-accordion-content-padding-left);color:var(--bs-accordion-text-default);font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px)}.bs-accordion__content--no-icon{padding-inline-start:var(--bs-accordion-content-padding-left-no-icon)}.bs-accordion__content--collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bs-accordion--disabled .bs-accordion__content{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled)}"}},[769,"bs-accordion",{expanded:[516],size:[1],disabled:[4],showIcon:[4,"show-icon"],showPreview:[4,"show-preview"],closing:[32]},void 0,{expanded:[{onExpandedChange:0}]}]),d=()=>e("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},e("path",{d:"M12 5V19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),e("path",{d:"M5 12H19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),r=()=>e("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},e("path",{d:"M6 9.75L12 15.75L18 9.75",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));function s(){"undefined"!=typeof customElements&&["bs-accordion"].forEach((i=>{"bs-accordion"===i&&(customElements.get(o(i))||customElements.define(o(i),c))}))}s();const t=c,b=s;export{t as BsAccordion,b as defineCustomElement}

package/dist/components/bs-ai-disclaimer.js

@@ -1 +1 @@
-import{t as i,p as e,H as s,h as a}from"./p-B2gx7SZk.js";const t=e(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}render(){return a("div",{key:"c60fa36f1340f01982c9084dcc24d875df50d33f",class:"bs-ai-disclaimer"},a("p",{key:"19d76fe258f68e2e0e2a0f7f22a6775c7522cef0",part:"text",class:"bs-ai-disclaimer__text"},a("slot",{key:"66861e47f7da39e0b1e162d327dedf0d57fcaf2f"})))}static get style(){return":host{display:block;--bs-ai-disclaimer-padding-x:var(--bs-spacing-200);--bs-ai-disclaimer-text-color:var(--bs-text-secondary);--bs-ai-disclaimer-font-size:var(--bs-font-size-sm);--bs-ai-disclaimer-line-height:var(--bs-line-height-body-sm)}.bs-ai-disclaimer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 var(--bs-ai-disclaimer-padding-x);font-family:inherit}.bs-ai-disclaimer__text{margin:0;flex:1 0 0;min-width:0;color:var(--bs-ai-disclaimer-text-color);font-size:var(--bs-ai-disclaimer-font-size);line-height:calc(var(--bs-ai-disclaimer-line-height) * 1px);text-align:center;word-break:break-word}"}},[257,"bs-ai-disclaimer"]);function r(){"undefined"!=typeof customElements&&["bs-ai-disclaimer"].forEach((e=>{"bs-ai-disclaimer"===e&&(customElements.get(i(e))||customElements.define(i(e),t))}))}r();const c=t,d=r;export{c as BsAiDisclaimer,d as defineCustomElement}
+import{t as i,p as e,H as s,h as a}from"./p-CcAX4o5o.js";const t=e(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}render(){return a("div",{key:"42b8ec6acacf3cc88ca6ab26e6799e4cfbde3306",class:"bs-ai-disclaimer"},a("p",{key:"91208bcb6b163418762194ffea845b8f7ad603ba",part:"text",class:"bs-ai-disclaimer__text"},a("slot",{key:"b8062d0ad625601e6766729d94d0111385b29380"})))}static get style(){return":host{display:block;--bs-ai-disclaimer-padding-x:var(--bs-spacing-200);--bs-ai-disclaimer-text-color:var(--bs-text-secondary);--bs-ai-disclaimer-font-size:var(--bs-font-size-sm);--bs-ai-disclaimer-line-height:var(--bs-line-height-body-sm)}.bs-ai-disclaimer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 var(--bs-ai-disclaimer-padding-x);font-family:inherit}.bs-ai-disclaimer__text{margin:0;flex:1 0 0;min-width:0;color:var(--bs-ai-disclaimer-text-color);font-size:var(--bs-ai-disclaimer-font-size);line-height:calc(var(--bs-ai-disclaimer-line-height) * 1px);text-align:center;word-break:break-word}"}},[257,"bs-ai-disclaimer"]);function r(){"undefined"!=typeof customElements&&["bs-ai-disclaimer"].forEach((e=>{"bs-ai-disclaimer"===e&&(customElements.get(i(e))||customElements.define(i(e),t))}))}r();const c=t,d=r;export{c as BsAiDisclaimer,d as defineCustomElement}