@brandsync/wc 0.0.12 → 1.0.0

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.js

@@ -0,0 +1,231 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single step within a `<bs-stepper>` sequence: an icon/indicator plus a name and optional
+ * description, connected to the next step by a trailing rail.
+ *
+ * `computedState` is set automatically by the parent `<bs-stepper>` based on this step's position
+ * relative to its `currentStep` (before it = "done", at it = "current", after it = "enabled") --
+ * same "container pushes state onto its slotted children" pattern `bs-tabs` uses for `selected`
+ * and `bs-breadcrumbs` uses for `size`. This step's own `error`/`disabled` props, when set directly
+ * by the consumer, override that computed value -- e.g. a step before `currentStep` would normally
+ * read as "done", but `error` on that step wins regardless.
+ *
+ * The trailing rail is owned by this component, not the container: `:host(:last-child)` hides it
+ * on whichever step is visually last, mirroring `bs-breadcrumb`'s own `:host(:first-child)` rule
+ * for its leading separator (same technique, opposite end -- see that component for why pure DOM
+ * position, not CSS `:last-of-type`, is what actually needs checking here too).
+ *
+ * ## When to use
+ * - As a child of `<bs-stepper>`, one per step in the sequence.
+ *
+ * ## When not to use
+ * - Standalone, outside a `<bs-stepper>` wrapper -- `computedState`/`direction`/`showDescription`
+ *   depend on that parent propagating them; alone, this defaults to `enabled`/`horizontal`/`true`.
+ *
+ * @slot - None: `name`/`description` fully drive the label content.
+ * @part icon - The icon/indicator wrapper.
+ * @part label - The name+description wrapper.
+ * @part name - The name text.
+ * @part description - The description text (only rendered when `showDescription` is true and
+ * `description` is set).
+ * @part connector - The trailing rail segment (not rendered on the last step).
+ */
+export class BsStepperStep {
+    /** This step's name/title. */
+    name = '';
+    /** Optional supporting text below the name. Only rendered when `showDescription` (propagated
+     * from the parent `<bs-stepper>`) is also true. */
+    description;
+    /** Shows the error treatment for this step, regardless of its `computedState`. */
+    error = false;
+    /** Shows the disabled treatment for this step, regardless of its `computedState`. Takes priority
+     * over `error` if both are somehow set. */
+    disabled = false;
+    /** Set automatically by the parent `<bs-stepper>` from this step's position relative to its
+     * `currentStep` -- see the class doc above. Can be set directly for a standalone step. */
+    computedState = 'enabled';
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    direction = 'horizontal';
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    showDescription = true;
+    get state() {
+        if (this.disabled)
+            return 'disabled';
+        if (this.error)
+            return 'error';
+        return this.computedState;
+    }
+    render() {
+        const state = this.state;
+        return (h(Host, { key: '434e05ca150a24b2c9d5e3017198b1c5938460ba', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'b9c924f3f834a6c4bb45f6f2b5a655c48f5439fb', class: "bs-stepper-step__top" }, h("span", { key: '89b61162775733afef65c862e60b66e3eb732382', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '7633c0612a65bbbc48fee9da55be642c22e8cc8f', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '608682cbba1ad1f3bff467b1139cbd76d703ac2f' }), state === 'error' && h(ExclamationIcon, { key: '51123ab8c6a73faad6905c52065af8b59325a819' })), h("span", { key: '93d157b4df08963ab5febcf0cf855575cc1ed53f', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '1af364efa632e94cf6e51a3e95f94b82dd1a51fd', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3fb8c121d7180d82000ce516955e2597a43cefff', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '07c716576b437a6e936be7746fa5db130bdf5e70', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '8240af6eca62f42101c3101e653d6e4b3c1470da', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+    }
+    static get is() { return "bs-stepper-step"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-stepper-step.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-stepper-step.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This step's name/title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional supporting text below the name. Only rendered when `showDescription` (propagated\nfrom the parent `<bs-stepper>`) is also true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the error treatment for this step, regardless of its `computedState`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the disabled treatment for this step, regardless of its `computedState`. Takes priority\nover `error` if both are somehow set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "computedState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStepperStepComputedState",
+                    "resolved": "\"current\" | \"done\" | \"enabled\"",
+                    "references": {
+                        "BsStepperStepComputedState": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx",
+                            "id": "src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx::BsStepperStepComputedState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set automatically by the parent `<bs-stepper>` from this step's position relative to its\n`currentStep` -- see the class doc above. Can be set directly for a standalone step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "computed-state",
+                "defaultValue": "'enabled'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStepperDirection",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsStepperDirection": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx",
+                            "id": "src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx::BsStepperDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set automatically by the parent `<bs-stepper>`, propagated to every slotted step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "showDescription": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set automatically by the parent `<bs-stepper>`, propagated to every slotted step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-description",
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+const CheckIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.5 9L6 12.5L14 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const ExclamationIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 3V9.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "12.5", r: "1", fill: "currentColor" })));

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

@@ -58,7 +58,7 @@ export class BsSwitch {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '4e5e5005cddacfaa695aae4023aefdae68330d8e', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '8adf2a272b1c9c757543b32f635f2129b4990cf1', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '2766916d51d0281bac341f636d99ee81f6c31564', part: "track", class: trackClasses }, h("span", { key: 'ec0f7d008cd34d575271dbdde1d34771a6095932', part: "knob", class: knobClasses })), h("span", { key: 'b28bace70e76c37163abcbc74c4fba2156f6da5d', part: "label", class: "bs-switch__label" }, h("slot", { key: '57c58faa8c6711fff5aa03eb559520ef31f531c6' }))));
+        return (h("label", { key: '166f681e2f776beda7d084c59437f1fff09a4ca8', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '15a147b4c9ce829ffd1a233331eb0dc177d95f87', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '97e17ef669469c8b0751c2c950fcf9b17a12cb77', part: "track", class: trackClasses }, h("span", { key: '218b41fc9943769b41a8959d7715740dc3a14f4e', part: "knob", class: knobClasses })), h("span", { key: 'd967c820aeb62b522726ad7aff0aeb96ff59276f', part: "label", class: "bs-switch__label" }, h("slot", { key: '507e82bc8eb6389c79cc27cd8ae98b583ec6bc1c' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

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: 'f500457efe9f3397d7137a3dc647758e59d601a1', 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: '8ebede54d5ebd8a4e67a721dfc62e9c7d022fef9', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '1e742bf36b7342966829aad269ce21754653fd1f', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'b457e2134cde29157add1d315835e081727dbf17', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '2d50e9691930fac8b0dada3614f3a19b52e6bb8d', 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: '9459bb70d5a9d6152f8339505c9b2bdeac846040', 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: '270fc529b567e7acf1cd087d11ca1486a4f57398', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '679bbd689b8381b57e44ce12ecd7a0fc13bcdb28', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '48cc55b855d58ebefcb1aeed92e8d23c5245778a', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'f35e484c8d52507b81f96cad42f169a388f15a4d', onSlotchange: this.onLabelSlotchange })), h("span", { key: '637e767ef63781c97675bd296f45778025bd23bb', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '66bd5e481528d69d5f6a15641bdd8f911ea7b2aa', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '5ecc8124efb448f67bc470bd2473e3e988619fbf', 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: '0b871aaeed20b903217a2c458df5d507f4fed4e0', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '0d8f3a81a14b1225f4c1d1ef2c241b16b39122ad' })));
     }
     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: '85557db8e543c53d4fe18cdcd1a83249bd3ecfe5', class: "bs-tooltip" }, h("span", { key: '1ff57d8ef7b6e2e9314111efd2da1457baeb3815', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '9bb7cb09a1c3631b5bff6a08c28d549a6cadb408', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '75a4b424d1e8cac1caec42ec12ff1ba4ac1f72e2' }))));
     }
     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: '42b4c661f9ac6b903f05689a8c7f896d4df5d410', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: 'fac62a9fbb25b30fd1a407d5b7298d2d444f72f1', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '9c7bb05d6dffa379d8c8ca630075e02a2247a924', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '4fd5ddb608bea958d8bea97f3ecdd61d595ba673', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: 'f8f3f79635b9b15f0a165d00ba50231e53b36102', variant: "mark", background: this.logoBackground }))), h("div", { key: '22a67b0c1ef6f7ab431d7727332ec216f2f92afc', class: "bs-navigation-drawer__title-row" }, h("span", { key: '64e3c8e3a4ac377b6b99fe5d4444d313671555bf', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'be0712ef51d7e90d82e272e069a2c2dbcf5914bd', 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: '98a33e8a3e654147ca4e412b6e5e07a19645962b' })))), h("div", { key: '945db8cdec027c252a5ea5900e70b9d937d239e4', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '4d0e1103e23fd92a63e1b5b6d9971687bd5abb70', name: "search" })), h("button", { key: '06f214ba7661974b1928c75216e7359205a1b86b', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '0f57bedd8a334059279b9416e475d25bd805aca5' })), h("div", { key: 'c7da235d6e116318707cf6f90cbad117edd9f336', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '0fee6305ae2c06d6068dcddc7c4aed369bca6aa3' }))));
     }
     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: 'f7d7b69e1823f1ff5e2b4bbf8f7a4aeb916b73ad', class: "bs-navigation-drawer-item__root" }, h("button", { key: '7d89692e783e4c8a6615b315cdf37184188359c4', 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: 'cc056e1618ec955127d8fb0f450325ea5fd7b9da', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: 'dbb065933d53aee6915d93c70f78c86ad06e9d51', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: 'b4e3af94dde1a32befe82b0b64ce527ae7d2ecbf', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '0a944daf8a50fc82546ebf9afd0c3b4ca4b39fc7' })), this.expandable && (h("span", { key: '44b2637ba4f418dc6f5d57859d3cbe8fe61ba0b2', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '40154d9ba61a237364938d976a47db6b1f96f29f' })))), this.expandable && (h("span", { key: 'a206e4304fceddb3decc6643e452ac5d58b7a917', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '4a19fbc6a63bc4bef5edf7742eed82322c87b43d', 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"; }