@brandsync/wc 0.0.12 → 0.1.0

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -86,7 +86,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: 'a0a20d6cb582852ae0276ae2dd91bc5c7708cbfa', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'e2fea17db42da65d9ff8ff6d59749572a25c3eb2', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '4551fc4b092105be399277e42bf343390ae18ff8', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '99de7b930a840f482e0ad2c5e6eaf1b759c6f9ed', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'dbedcadbb5b1b51c47d0fa44b8a41f67d6ef4ef0', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '5e864cce26e8aafa1427dc6095e55e29b1a323a5', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '7c1284b951d12ce59d5619fe3d2ab9c346ceed0e', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '3be708db5d08b628046b2c60303a829430dc875d', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '9a8a11172c8c694f3eaa193bffc424e73f712970', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '089d1858503b4c834e1d3b9bd4763b57fbc2f273', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,7 +99,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: 'de1416c9ee8414405513dd4b9a828d7a3d0ae330', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'd884d90267fac3ec8fc9e9bcd8b9cefc5153b47e', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '2194a3d72bafda2d0f830e4f9f5a6a92d08c5aa3', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '181abd3f489648a7bf53a11b77bed47c56b2fd94', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '683020efc34ea270b700b5034631a549796510f1', onSlotchange: this.onLabelSlotchange })), h("span", { key: '02dfede0c88b1b2f805128ce11a5134fd4c83b6d', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'e712da5b095aa9e3c6c8b7f8fa0bee86c0ef7b20', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'a743816f44a8c0cb08dbe518ae521bf05d5c5a08', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: 'f546b2a1795c272666671e0b103382921e417763', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'e9818e0796ed9be7df02c07ae535e265f99543c5', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '550d7967e028e781509c1017e13d485bac304387', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '10939082cb36c48a98fe7783914880385d213ba8', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'a2e6cd4f0afbf3ffc3f1ca5c19746cab26d5f6fb', onSlotchange: this.onLabelSlotchange })), h("span", { key: '7a7fca9d63bb63b03b2db1b100c92c2090e45e36', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '1eb43aabca6e01d777e506fb546ad76ce9527eee', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '8e9426213e4bc2d60a01b0cdbaeb15d42c0e6269', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js

@@ -50,7 +50,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: '55006a332bf4d3b955f5c76cf2cfadf483affb4b', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '0b0d1ec94485389d4bb6b4000384e337991060bd' })));
+        return (h("div", { key: '5d107ad84063bddd35155523a9c51aa905c93d27', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '9dbd0e4d77c0735920875c141789a331c2bbe1f9' })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '64951f06f070f2d3b10796d09f2c97ef7cf098fa', class: "bs-tooltip" }, h("span", { key: 'b9ff6d99eb95aea33949f211aa80c29220a3e199', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '3b559c7952b42011f45bd59177dbdf3194b84b92', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '54b278e8ee7c98360b9aaaea300e0631d8bfb8dd' }))));
+        return (h("div", { key: '715de45f88b8228c415b70045067232a9d859f96', class: "bs-tooltip" }, h("span", { key: '1fb4350dbe0b36fe18cb34d0ed3e120ad3f863d0', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '78132e1f37d311355fdd4a7bb3a0d5f8ad2c9e97', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '31316481f106d69e1d08423eb7432e3b16ffdfaa' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -128,4 +128,16 @@ describe('bs-navigation-drawer', () => {
             logos.forEach(logo => expect(logo.background).toBe('dark'));
         });
     });
+    describe('showLogo', () => {
+        it('renders both internal bs-logo elements by default', async () => {
+            const { root } = await render(h("bs-navigation-drawer", null));
+            expect(root.shadowRoot.querySelectorAll('bs-logo')).toHaveLength(2);
+            expect(root.shadowRoot.querySelector('[part="logo"]')).not.toBeNull();
+        });
+        it('renders no bs-logo elements at all when showLogo is false', async () => {
+            const { root } = await render(h("bs-navigation-drawer", { showLogo: false }));
+            expect(root.shadowRoot.querySelectorAll('bs-logo')).toHaveLength(0);
+            expect(root.shadowRoot.querySelector('[part="logo"]')).toBeNull();
+        });
+    });
 });

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

@@ -6,7 +6,8 @@ import { h } from "@stencil/core";
  * ## When to use
  * - The primary in-app navigation, shown alongside `bs-navigation-header` (typically that
  *   header's `with-navigation-drawer` alignment, which omits its own logo since this component
- *   already renders one).
+ *   already renders one -- or the reverse pairing, this drawer's own `showLogo={false}` alongside
+ *   a header that keeps its logo instead, see that prop's own docs).
  *
  * ## When not to use
  * - The top navigation bar itself -- use `bs-navigation-header` instead.
@@ -41,10 +42,11 @@ import { h } from "@stencil/core";
  * @slot - Default slot: the scrollable list of nav items, typically one or more
  *   `bs-navigation-drawer-item` elements.
  * @part logo - The wrapper around the BrandSync brand mark. Two of these exist in the shadow DOM
- *   at once (one wrapping a `bs-logo variant="full"`, one wrapping a `bs-logo variant="mark"`),
- *   both carrying this same part name (the same "multiple elements, one shared part name"
- *   approach `bs-attachment`'s `star` part uses) -- only one is visible at a time, toggled by
- *   plain CSS on `collapsed` (see above), so `::part(logo)` always reaches whichever is showing.
+ *   at once while `showLogo` is `true` (one wrapping a `bs-logo variant="full"`, one wrapping a
+ *   `bs-logo variant="mark"`), both carrying this same part name (the same "multiple elements, one
+ *   shared part name" approach `bs-attachment`'s `star` part uses) -- only one is visible at a
+ *   time, toggled by plain CSS on `collapsed` (see above), so `::part(logo)` always reaches
+ *   whichever is showing. Neither renders at all while `showLogo` is `false`.
  * @part title - The "Main Menu" heading text wrapper.
  * @part collapse - The collapse toggle button.
  * @part search - The wrapper around the `search` slot.
@@ -84,6 +86,12 @@ export class BsNavigationDrawer {
      * `collapsed` (see `bs-logo`'s own docs -- there's only one real designed mark asset, it's
      * background-agnostic). */
     logoBackground = 'auto';
+    /** Whether to render the BrandSync logo at all. Defaults to `true`. This drawer is normally the
+     * one that owns the logo when paired with a `bs-navigation-header` (that header's own
+     * `with-navigation-drawer` alignment omits its logo for exactly this reason) -- but the reverse
+     * pairing works too: a header that keeps its own logo (`alignment="default"`) paired with this
+     * drawer set to `showLogo={false}`, so the brand mark only ever appears once. */
+    showLogo = true;
     onCollapsedChange(collapsed) {
         this.syncItemsCollapsed(collapsed);
     }
@@ -109,7 +117,7 @@ export class BsNavigationDrawer {
         this.bsSearchClick.emit();
     };
     render() {
-        return (h("nav", { key: '643a802cfef5b124603056ca409c67e5e9fa0561', class: "bs-navigation-drawer", "aria-label": this.heading }, h("div", { key: '31384937f95737b961aa4f1cb0b535fc78c8fcfd', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '834c8a1a031072803815085036ea6b8a744012a2', variant: "full", background: this.logoBackground })), h("div", { key: '50b877188cea0fce86959517f1e14eb4f6869923', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '64b66e3e221d9641026009e0b7b0a0bbdf7b946a', variant: "mark", background: this.logoBackground })), h("div", { key: 'a7634d178a491940cb43ceca3dd93aa83539a316', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'fc018e4474f3a38f96538be9064da6b472193b3f', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '516e28aba1e037b74ac616fbc8f293c0cef9da1a', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'fba23fed9c12283360bd89dddee6248ec45c98fb' })))), h("div", { key: '29279ec0051d495810f177a194f8dc6f3c649f90', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '6eef2761d887ddc776132327c8343626071fc3b3', name: "search" })), h("button", { key: '4ee9e0ca46ca85b17394466b452cba29c0e528cc', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '844c581c6ea6c496718866150e24415f746daa36' })), h("div", { key: '3f7f3c6bb4eae12aa87c732fbc4da6d5b3a87e40', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '20833d282601ea298a39ead5b928155e2db33a97' }))));
+        return (h("nav", { key: '0b6979dbab9e8b0bfcd1a4bdceead7b87c8d2b88', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: 'f7b4b0238118d95f48a60da815738673db41da9f', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '9d40a85424f2931b251eb1e90991f3fa6b6eaccf', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '77250a1f5f66e7fcd981bfd6494ee38722a7406f', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '0365624f3796b1c44af10488e8a3cab93e296169', variant: "mark", background: this.logoBackground }))), h("div", { key: '4c5b0de2a90df7f6462fac6d6b79abb62829293e', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'f9507d3c31687abcaa99340ca4e413f8d47559bc', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'f07c9f1f04d0b3e745273d8f61b3c1af02a5bc08', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '9731cf6bd727b753c99b5969059997a6800ec3a4' })))), h("div", { key: '7b1cc15eb095988451c32e4ba429fa5f36a5bbb8', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '1cf0fa19d789ea44ef29a9a3fbc7852ea012045e', name: "search" })), h("button", { key: '9a7c7bf69a7ef92144e60641279fbaca47395d4f', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '6c55207e0b45a07c2be7aa350c07bbab4018696b' })), h("div", { key: 'e22497a133d16a622ef68ff5de4796eaa96a25fb', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '465d9447ef355558ffd0d79306abd9a9204517a1' }))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -204,6 +212,26 @@ export class BsNavigationDrawer {
                 "reflect": false,
                 "attribute": "logo-background",
                 "defaultValue": "'auto'"
+            },
+            "showLogo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to render the BrandSync logo at all. Defaults to `true`. This drawer is normally the\none that owns the logo when paired with a `bs-navigation-header` (that header's own\n`with-navigation-drawer` alignment omits its logo for exactly this reason) -- but the reverse\npairing works too: a header that keeps its own logo (`alignment=\"default\"`) paired with this\ndrawer set to `showLogo={false}`, so the brand mark only ever appears once."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-logo",
+                "defaultValue": "true"
             }
         };
     }

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

@@ -87,6 +87,40 @@ const ITEMS_WITH_DIVIDER = html `
     <bs-navigation-drawer-item slot="children" nested>Switch</bs-navigation-drawer-item>
   </bs-navigation-drawer-item>
 `;
+// A longer, deeper item list than the other demo lists above -- more top-level groups, more
+// nested children per group, and every group expanded at once -- for demonstrating this
+// component's own scroll behavior (a fixed-height drawer with a naturally-taller-than-viewport
+// item list) rather than a distinct "large" item size/prop, which bs-navigation-drawer-item
+// doesn't have.
+const LARGE_ITEMS = html `
+  <bs-navigation-drawer-item selected ariaLabel="Introduction">${accessibilityIcon} Introduction</bs-navigation-drawer-item>
+  <bs-navigation-drawer-item ariaLabel="Accessibility">${bookIcon} Accessibility</bs-navigation-drawer-item>
+  <bs-navigation-drawer-item expandable expanded ariaLabel="Foundation">
+    ${gridIcon} Foundation
+    <bs-navigation-drawer-item slot="children" nested>Colors</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Typography</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Spacing</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Elevation</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Iconography</bs-navigation-drawer-item>
+  </bs-navigation-drawer-item>
+  <bs-navigation-drawer-item expandable expanded ariaLabel="Components">
+    ${gridIcon} Components
+    <bs-navigation-drawer-item slot="children" nested>Button</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Checkbox</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Switch</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Radio</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Slider</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Modal</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Tooltip</bs-navigation-drawer-item>
+  </bs-navigation-drawer-item>
+  <bs-navigation-drawer-item expandable expanded ariaLabel="Patterns">
+    ${gridIcon} Patterns
+    <bs-navigation-drawer-item slot="children" nested>Dashboard</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Filter Table</bs-navigation-drawer-item>
+    <bs-navigation-drawer-item slot="children" nested>Empty State</bs-navigation-drawer-item>
+  </bs-navigation-drawer-item>
+  <bs-navigation-drawer-item ariaLabel="Settings">${bookIcon} Settings</bs-navigation-drawer-item>
+`;
 const meta = {
     title: 'UI Shell/bs-navigation-drawer/bs-navigation-drawer',
     parameters: { docs: { description: { component: componentDescription('bs-navigation-drawer') } }, layout: 'fullscreen' },
@@ -101,7 +135,12 @@ const meta = {
     // bug found and fixed in bs-slider's showLabel earlier this session.
     render: args => html `
     <div style="height: 100vh; display: flex;">
-      <bs-navigation-drawer heading=${args.heading} collapsible=${args.collapsible} logo-background=${args.logoBackground}>
+      <bs-navigation-drawer
+        heading=${args.heading}
+        collapsible=${args.collapsible}
+        logo-background=${args.logoBackground}
+        show-logo=${args.showLogo}
+      >
         <bs-input slot="search" type="search" placeholder="Search"></bs-input>
         ${ITEMS_NO_ICONS}
       </bs-navigation-drawer>
@@ -111,11 +150,13 @@ const meta = {
         heading: { control: 'text', description: propDescription('bs-navigation-drawer', 'heading') },
         collapsible: { control: 'boolean', description: propDescription('bs-navigation-drawer', 'collapsible') },
         logoBackground: { control: 'select', options: ['auto', 'light', 'dark'], description: propDescription('bs-navigation-drawer', 'logoBackground') },
+        showLogo: { control: 'boolean', description: propDescription('bs-navigation-drawer', 'showLogo') },
     },
     args: {
         heading: 'Main Menu',
         collapsible: false,
         logoBackground: 'auto',
+        showLogo: true,
     },
 };
 export default meta;
@@ -148,7 +189,7 @@ export const FixedSideNavWithIcons = {
   `,
 };
 export const Collapsed = {
-    name: 'Collapsed',
+    name: 'Side Nav Rail',
     // Click the collapse toggle (the caret button next to the heading) to see it expand back --
     // `collapsed` is mutable/self-toggling, so this works with no extra story wiring.
     render: args => html `
@@ -160,6 +201,26 @@ export const Collapsed = {
     </div>
   `,
 };
+export const CollapsedWithHeader = {
+    name: 'Side Nav Rail with Header',
+    // The rail (collapsed) drawer composed alongside bs-navigation-header, forming the same
+    // app-shell layout as bs-navigation-header's own "with Side Nav" stories, but with the drawer
+    // starting in its collapsed/icon-only rail state instead of fully expanded.
+    render: args => html `
+    <div style="height: 100vh; display: flex; flex-direction: column;">
+      <bs-navigation-header alignment="with-navigation-drawer"></bs-navigation-header>
+      <div style="flex: 1; min-height: 0; display: flex;">
+        <bs-navigation-drawer heading=${args.heading} collapsed>
+          <bs-input slot="search" type="search" placeholder="Search"></bs-input>
+          ${ITEMS}
+        </bs-navigation-drawer>
+        <main style="flex: 1; min-width: 0; overflow: auto; padding: var(--bs-spacing-400); font-family: sans-serif; color: var(--bs-text-muted);">
+          Page content
+        </main>
+      </div>
+    </div>
+  `,
+};
 export const Dark = {
     name: 'Fixed Side Nav (Dark)',
     // `data-theme="dark"` is set on a wrapper scoped to just this story, NOT via a globals override
@@ -200,3 +261,14 @@ export const EmptyItems = {
     </div>
   `,
 };
+export const LargeItemList = {
+    name: 'Side Nav with Large Side Nav Items',
+    render: args => html `
+    <div style="height: 100vh; display: flex;">
+      <bs-navigation-drawer heading=${args.heading} collapsible=${args.collapsible}>
+        <bs-input slot="search" type="search" placeholder="Search"></bs-input>
+        ${LARGE_ITEMS}
+      </bs-navigation-drawer>
+    </div>
+  `,
+};

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

@@ -51,7 +51,10 @@
  *   --bs-spacing-100 (8px, all sides -- Figma node 8028:135374's "Container").
  * @prop --bs-navigation-drawer-item-collapsed-icon-padding-x: Left/right padding of the small
  *   rounded chip behind a `collapsed` row's icon (the `selected` tint applies to just this chip,
- *   not the full column). Aliased to --bs-spacing-100.
+ *   not the full column). Aliased to --bs-spacing-300 -- widened from the original
+ *   Figma-node-8028:135374 value (--bs-spacing-100) at the user's request after seeing the chip
+ *   rendered too narrow relative to the rail's own width. Not a Figma re-measurement -- a
+ *   deliberate deviation, same as bs-logo's icon-to-wordmark gap earlier this session.
  * @prop --bs-navigation-drawer-item-collapsed-icon-padding-y: Top/bottom padding of that chip.
  *   Aliased to --bs-spacing-50.
  * @prop --bs-navigation-drawer-item-collapsed-font-size: Caption font size when `collapsed`.
@@ -88,15 +91,12 @@
 
   --bs-navigation-drawer-item-collapsed-gap: var(--bs-spacing-100);
   --bs-navigation-drawer-item-collapsed-padding: var(--bs-spacing-100);
-  --bs-navigation-drawer-item-collapsed-icon-padding-x: var(--bs-spacing-100);
+  --bs-navigation-drawer-item-collapsed-icon-padding-x: var(--bs-spacing-300);
   --bs-navigation-drawer-item-collapsed-icon-padding-y: var(--bs-spacing-50);
   --bs-navigation-drawer-item-collapsed-font-size: var(--bs-fontsize-caption-sm);
   --bs-navigation-drawer-item-collapsed-line-height: var(--bs-line-height-caption-sm);
 }
 
-/* Purely a JSX-single-root-node wrapper (see bs-navigation-drawer-item.tsx's render() comment) --
-   display: contents removes it from layout/box generation entirely, so it doesn't affect the
-   button/children-wrapper stacking at all. */
 .bs-navigation-drawer-item__root {
   display: contents;
 }

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

@@ -131,7 +131,7 @@ 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: '56087157f61114bbc3eda6ea4ed9c953c6776e7a', class: "bs-navigation-drawer-item__root" }, h("button", { key: '9d7bc98cdcccb4724a7d388209e98c66140d509d', 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: 'b071e6437b1394002e3494e533e199399b077d09', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: 'bacc7cf8105454457bd90ca563fd93ab202477af', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '373e0875b1a68f5c02fe0473a1ff9a322d2dd9eb', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '0ba908c6abe37b35a72bd4e99491e828a7b27661' })), this.expandable && (h("span", { key: '025af7ea24428581f3a7e89642d09638ebeb1734', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '270f60521effe7a06d4720caa6392a6a76cf5d94' })))), this.expandable && (h("span", { key: '4108f797246cc31029c9a7379d6da6a70ec0dba8', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: 'b09f6e81f28fff754f46d2e750fa791e63f8cfe3', name: "children" })))));
+        return (h("div", { key: '6fd089698cd27459fc10a2806fba5a792dbfec2b', class: "bs-navigation-drawer-item__root" }, h("button", { key: '5c4448c9f16dfe9356ce069a5f069db9ed084f3b', 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: 'bcfd23ef22e33ed6dcb3ec70b8263a4dccb14914', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '170f97cc6ca93bf5e9e336b7c39c3d3bb02adca8', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: 'abbc25976aa21e94e503497430d2be0895fd8987', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '0b9e12703c42e326634bb5adb49f1994b9c19754' })), this.expandable && (h("span", { key: '25e2a8517451cced2993390cd194420d57ee5489', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '7b15770e5a071f8f49b06d811dbe1925ff9b5054' })))), this.expandable && (h("span", { key: '861ac7d088e527486c43f80a933e796c05980bc0', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: 'fc673a4f19b0aee8c4c3d9d718cb239746e04221', name: "children" })))));
     }
     static get is() { return "bs-navigation-drawer-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,7 +61,7 @@ export class BsNavigationHeader {
     render() {
         const showLogo = this.alignment !== 'with-navigation-drawer';
         const rootClasses = `bs-navigation-header bs-navigation-header--${this.alignment}`;
-        return (h("header", { key: 'e106c295d18a32638e8b2e8179264da30c6343fd', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: '9b0aa4f626e2ac17fd02ff35f63861be5cca0a4c', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: '079ebb7b6077307cb84dacf5504eeca259c265df', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '79fb735078a3d2b200811c4c055b881fb17feb54', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: '8c72405a0adeb158bd6427e9c6afb77950cb1de2', name: "left" })), h("div", { key: '81941860e7e9b2780cc02b3ca9a13c0f0cde00bd', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: 'ceb361449083be06404b862e22d461daa56cd8ca', name: "right" }))));
+        return (h("header", { key: '7edb19100328942a082a3f35b0b6202effacd9df', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: 'db181c2823ae10bad5769c4578f8d560769330b8', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: '618b592c7d37bfb9f1882e98153277bc833d15ea', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '2f2d14ec0b410d6ad6ef9cbcf6aebe1336d25f89', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: 'cad41138dd5411480eaccebef01f5d8ddc20ef6c', name: "left" })), h("div", { key: '59d65743ae936910e889d9d74b25896d5e4b61dd', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: '21b7aeff58441efdd504b0bbabc3fa96e99906e5', name: "right" }))));
     }
     static get is() { return "bs-navigation-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,6 +20,43 @@ const bellIcon = html `
     <path d="M6.5 13.5C6.5 14.3284 7.17157 15 8 15C8.82843 15 9.5 14.3284 9.5 13.5" stroke="currentColor" stroke-width="1.5" />
   </svg>
 `;
+const switcherIcon = html `
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <rect x="2" y="2" width="4.5" height="4.5" rx="1" stroke="currentColor" stroke-width="1.5" />
+    <rect x="9.5" y="2" width="4.5" height="4.5" rx="1" stroke="currentColor" stroke-width="1.5" />
+    <rect x="2" y="9.5" width="4.5" height="4.5" rx="1" stroke="currentColor" stroke-width="1.5" />
+    <rect x="9.5" y="9.5" width="4.5" height="4.5" rx="1" stroke="currentColor" stroke-width="1.5" />
+  </svg>
+`;
+// appShell()'s own item icons -- same slot="icon"/viewBox="0 0 24 24"/stroke-width="1.5" convention
+// as bs-navigation-drawer.stories.ts's own bookIcon/gridIcon/accessibilityIcon (not reused directly
+// -- that's a different file/module, and these are semantically matched to "Dashboard"/"Reports"/
+// "Settings" specifically rather than the Foundation/Components docs-nav labels those were drawn
+// for).
+const dashboardIcon = html `
+  <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <rect x="3.5" y="3.5" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.5" />
+    <rect x="13.5" y="3.5" width="7" height="4" rx="1" stroke="currentColor" stroke-width="1.5" />
+    <rect x="13.5" y="9.5" width="7" height="8.5" rx="1" stroke="currentColor" stroke-width="1.5" />
+    <rect x="3.5" y="13.5" width="8" height="4.5" rx="1" stroke="currentColor" stroke-width="1.5" />
+  </svg>
+`;
+const reportsIcon = html `
+  <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path d="M4 20V10M4 20H20M10 20V6M16 20V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+`;
+const settingsIcon = html `
+  <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
+    <path
+      d="M12 2.5V5M12 19V21.5M4.22 4.22L5.94 5.94M18.06 18.06L19.78 19.78M2.5 12H5M19 12H21.5M4.22 19.78L5.94 18.06M18.06 5.94L19.78 4.22"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+  </svg>
+`;
 const LEFT_SLOT_BUTTONS = html `
   <bs-button variant="subtle" size="sm">Products</bs-button>
   <bs-button variant="subtle" size="sm">Solutions</bs-button>
@@ -66,17 +103,188 @@ const RIGHT_SLOT = html `
       visibility: visible;
       transition-delay: var(--bs-duration-slow);
     }
+    /* bs-badge's default shape is a pill sized for label text (32px tall, 16px side padding) --
+       too large for a compact unread-count overlay. Restyled via its own ::part(container) (the
+       sanctioned external-customization surface for shadow-DOM parts, per CONVENTIONS.md), not a
+       new component or a fork of bs-badge -- same component, same "error" color variant, just a
+       tighter shape for this corner-badge placement, matching the "Numeric" badge shape shown in
+       the Brandsync design system's own Badge spec.
+       Absolutely positioned relative to the shared tooltip wrapper above so it doesn't shift icon
+       layout. bs-icon-button size="sm" is a 40px hit area around a 16px icon glyph (12px of
+       padding on each side), so top/right are offset from the WRAPPER's own corner, not the
+       button's -- centering the badge on the visible bell glyph's corner (12px inset, minus half
+       the badge's own 16px) instead of the button's much larger outer edge, which left it looking
+       like a disconnected, oversized blob floating in the button's padding. */
+    .story-nav-header-badge {
+      /* bs-badge's "error" variant reads --bs-badge-bg-error-container/--bs-badge-text-error --
+         the subtle/light error style. A notification count needs the solid, high-contrast look
+         instead, and the vendored tokens already define exactly that pairing
+         (--bs-badge-bg-error, --text-inverse) -- this just points the two custom properties
+         bs-badge.css actually reads at those solid values instead, for this one instance. */
+      --bs-badge-bg-error-container: var(--bs-badge-bg-error);
+      --bs-badge-text-error: var(--bs-text-inverse);
+    }
+    .story-nav-header-badge::part(container) {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      height: var(--bs-font-size-md);
+      min-width: var(--bs-font-size-md);
+      padding: 0 3px;
+      font-size: var(--bs-font-size-2xs);
+      line-height: var(--bs-font-size-md);
+      border: 2px solid var(--bs-surface-base);
+      box-sizing: border-box;
+    }
   </style>
   <span class="story-nav-header-tooltip-wrapper">
     <bs-icon-button size="sm" variant="subtle" aria-label="Search">${searchIcon}</bs-icon-button>
     <bs-tooltip class="story-nav-header-tooltip" placement="top" aria-hidden="true">Search</bs-tooltip>
   </span>
   <span class="story-nav-header-tooltip-wrapper">
-    <bs-icon-button size="sm" variant="subtle" aria-label="Notifications">${bellIcon}</bs-icon-button>
+    <bs-icon-button size="sm" variant="subtle" aria-label="Notifications, 4 unread">${bellIcon}</bs-icon-button>
+    <bs-badge class="story-nav-header-badge" variant="error" aria-hidden="true">4</bs-badge>
     <bs-tooltip class="story-nav-header-tooltip" placement="top" aria-hidden="true">Notifications</bs-tooltip>
   </span>
   <bs-button variant="primary" size="sm">Sign in</bs-button>
 `;
+// "Switcher" here means a workspace/account switcher panel that slides in from the right edge of
+// the viewport when its trigger icon is clicked -- not a real bs-* component (no generic
+// slide-in-from-right panel exists in this library yet; bs-dialog is a centered dialog, not this),
+// so this is plain story-only markup: a fixed-position aside toggled via a direct classList
+// change on click, not lit's own reactive re-render (a Storybook `render` function re-runs on
+// args changes, not on arbitrary DOM events, so state that needs to survive a click has to live in
+// the DOM itself here, the same way the tooltip hover states above are pure CSS rather than JS
+// state).
+const SWITCHER_PANEL = html `
+  <style>
+    .story-switcher-backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgb(0 0 0 / 32%);
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity var(--bs-duration-default) var(--bs-easing-standard),
+        visibility var(--bs-duration-default) var(--bs-easing-standard);
+      z-index: 10;
+    }
+    .story-switcher-panel {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 320px;
+      max-width: 100%;
+      background: var(--bs-surface-base);
+      box-shadow: var(--bs-shadow-lg, 0 8px 24px rgb(0 0 0 / 20%));
+      transform: translateX(100%);
+      transition: transform var(--bs-duration-default) var(--bs-easing-standard);
+      z-index: 11;
+      display: flex;
+      flex-direction: column;
+      padding: var(--bs-spacing-300);
+      gap: var(--bs-spacing-200);
+      box-sizing: border-box;
+    }
+    .story-switcher-backdrop.story-switcher--open {
+      opacity: 1;
+      visibility: visible;
+    }
+    .story-switcher-panel.story-switcher--open {
+      transform: translateX(0);
+    }
+    .story-switcher-heading {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-family: var(--bs-typography-font-family-heading);
+      font-weight: var(--bs-font-weight-bold);
+      font-size: var(--bs-font-size-md);
+      color: var(--bs-text-default);
+    }
+    .story-switcher-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bs-spacing-100);
+    }
+  </style>
+  <div class="story-switcher-backdrop" @click=${(e) => toggleSwitcher(e, false)}></div>
+  <aside class="story-switcher-panel" aria-label="Switch workspace">
+    <div class="story-switcher-heading">
+      Switch workspace
+      <bs-icon-button size="sm" variant="subtle" aria-label="Close" @click=${(e) => toggleSwitcher(e, false)}>
+        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path d="M3 3L13 13M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </bs-icon-button>
+    </div>
+    <div class="story-switcher-list">
+      <bs-button variant="subtle">Acme Corp</bs-button>
+      <bs-button variant="subtle">Acme Corp -- Staging</bs-button>
+      <bs-button variant="subtle">Personal Workspace</bs-button>
+    </div>
+  </aside>
+`;
+// Shared by both the backdrop and every open/close trigger -- walks up to the common app-shell
+// wrapper so this works regardless of which story renders it in, then toggles both halves in
+// lockstep (only the panel needs the open class for its slide-in transform, but the backdrop
+// needs its own visibility toggle too since a transparent-but-still-fixed backdrop would
+// otherwise keep eating clicks).
+function toggleSwitcher(e, open) {
+    const root = e.currentTarget.closest('.story-nav-header-shell, body') ?? document.body;
+    root.querySelector('.story-switcher-backdrop')?.classList.toggle('story-switcher--open', open);
+    root.querySelector('.story-switcher-panel')?.classList.toggle('story-switcher--open', open);
+}
+const RIGHT_SLOT_WITH_SWITCHER = html `
+  ${RIGHT_SLOT}
+  <span class="story-nav-header-tooltip-wrapper">
+    <bs-icon-button size="sm" variant="subtle" aria-label="Switch workspace" @click=${(e) => toggleSwitcher(e, true)}>
+      ${switcherIcon}
+    </bs-icon-button>
+    <bs-tooltip class="story-nav-header-tooltip" placement="top" aria-hidden="true">Switch workspace</bs-tooltip>
+  </span>
+  ${SWITCHER_PANEL}
+`;
+// Shared by the "with Side Nav" stories below -- a real app-shell layout, not just the header in
+// isolation: this header spans the FULL viewport width across the top (a plain flex column), with
+// a row below it holding the full-height bs-navigation-drawer on the left and the content area
+// filling the rest. The drawer is left at its default `collapsible=true` here (no attribute set at
+// all) so its own collapse toggle renders and actually works in these demos, same as any other
+// real page using both components together.
+//
+// `?collapsed=` -- lit's boolean directive, NOT plain `collapsed=` interpolation. This ONLY sets
+// the drawer's *initial* collapsed state; once mounted, the drawer's own mutable `collapsed` prop
+// takes over (clicking its toggle flips it directly, per that component's own docs), independent
+// of this story's args. bs-navigation-drawer.css's collapsed styling is a plain CSS
+// attribute-presence selector (`:host([collapsed])`), which matches on the attribute merely
+// EXISTING, regardless of its value -- plain interpolation stringifies `false` to the literal
+// attribute `collapsed="false"`, which is still *present*, so the drawer rendered as its 96px
+// collapsed rail even when passed `false` (no visible title/search/items), until this was caught.
+// The boolean directive is the only one of the two forms that actually omits the attribute for a
+// falsy value.
+//
+// `drawerShowLogo` defaults `true` and maps to `show-logo`, which -- unlike `collapsed` above -- is
+// a plain JS conditional in bs-navigation-drawer.tsx's render(), not a CSS presence selector, so
+// plain interpolation (not the `?attr=` boolean directive) is the correct form here instead.
+function appShell(headerContent, drawerCollapsed = false, drawerShowLogo = true) {
+    return html `
+    <div class="story-nav-header-shell" style="height: 100vh; display: flex; flex-direction: column;">
+      ${headerContent}
+      <div style="flex: 1; min-height: 0; display: flex;">
+        <bs-navigation-drawer heading="Main Menu" ?collapsed=${drawerCollapsed} show-logo=${drawerShowLogo}>
+          <bs-input slot="search" type="search" placeholder="Search"></bs-input>
+          <bs-navigation-drawer-item selected>${dashboardIcon} Dashboard</bs-navigation-drawer-item>
+          <bs-navigation-drawer-item>${reportsIcon} Reports</bs-navigation-drawer-item>
+          <bs-navigation-drawer-item>${settingsIcon} Settings</bs-navigation-drawer-item>
+        </bs-navigation-drawer>
+        <main style="flex: 1; min-width: 0; overflow: auto; padding: var(--bs-spacing-400); font-family: sans-serif; color: var(--bs-text-muted);">
+          Page content
+        </main>
+      </div>
+    </div>
+  `;
+}
 const meta = {
     title: 'UI Shell/bs-navigation-header',
     parameters: { docs: { description: { component: componentDescription('bs-navigation-header') } }, layout: 'fullscreen' },
@@ -187,3 +395,52 @@ export const HeaderBaseWithSkipLink = {
     </div>
   `,
 };
+export const HeaderBaseWithActionsAndSwitcher = {
+    name: 'Header Base with Actions and Switcher',
+    // Click the grid icon (the rightmost action, next to Notifications) to open the "switcher"
+    // panel -- a workspace/account switcher that slides in from the right edge of the viewport. See
+    // RIGHT_SLOT_WITH_SWITCHER's own comment for why this is plain story markup rather than a new
+    // library component.
+    render: args => html `
+    <bs-navigation-header alignment=${args.alignment}>
+      <div slot="left" style="display: contents;">${leftSlotContent(args.leftContentType)}</div>
+      <div slot="right" style="display: contents;">${RIGHT_SLOT_WITH_SWITCHER}</div>
+    </bs-navigation-header>
+  `,
+};
+export const HeaderBaseWithSideNav = {
+    name: 'Header Base with Side Nav',
+    // The real app-shell composition: this header (alignment="with-navigation-drawer", so it
+    // doesn't render its own logo -- the drawer's logo already covers that) alongside a full,
+    // expanded bs-navigation-drawer. Bare header otherwise (no left/right slot content) to isolate
+    // just the layout; see "Header Base with Navigation, Actions and Side Nav" below for the fully
+    // populated version.
+    args: { alignment: 'with-navigation-drawer' },
+    render: args => appShell(html `<bs-navigation-header alignment=${args.alignment}></bs-navigation-header>`),
+};
+export const HeaderBaseWithNavigationActionsAndSideNav = {
+    name: 'Header Base with Navigation, Actions and Side Nav',
+    // Same app-shell composition as "Header Base with Side Nav", but with the header's own
+    // left/right slots populated too -- the fully-assembled real-world shape of this layout.
+    args: { alignment: 'with-navigation-drawer' },
+    render: args => appShell(html `
+      <bs-navigation-header alignment=${args.alignment}>
+        <div slot="left" style="display: contents;">${leftSlotContent(args.leftContentType)}</div>
+        <div slot="right" style="display: contents;">${RIGHT_SLOT}</div>
+      </bs-navigation-header>
+    `),
+};
+export const HeaderBaseWithSideNavHeaderLogo = {
+    name: 'Header Base with Side Nav (Header Owns Logo)',
+    // The inverse pairing from the two stories above: this header keeps its OWN logo
+    // (alignment="default", not "with-navigation-drawer") and the drawer's is turned off instead
+    // (bs-navigation-drawer's showLogo={false}) -- so the brand mark still only ever appears once,
+    // just on the other side of the pairing. Useful when the header, not the drawer, is the piece
+    // that should carry brand identity in a given app's shell.
+    args: { alignment: 'default' },
+    render: args => appShell(html `
+        <bs-navigation-header alignment=${args.alignment}>
+          <div slot="right" style="display: contents;">${RIGHT_SLOT}</div>
+        </bs-navigation-header>
+      `, false, false),
+};