@brandsync/wc 0.0.10 → 0.0.12

package/dist/types/components/bs-slider/bs-slider.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+type BsSliderType = 'default' | 'segmented' | 'range';
+interface BsSliderArgs {
+    type: BsSliderType;
+    showLabel: boolean;
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    valueStart: number;
+    valueEnd: number;
+    segments: number;
+    disabled: boolean;
+    ariaLabel: string;
+}
+declare const meta: Meta<BsSliderArgs>;
+export default meta;
+type Story = StoryObj<BsSliderArgs>;
+export declare const Default: Story;
+export declare const Segmented: Story;
+export declare const Range: Story;
+export declare const Disabled: Story;
+export declare const BareTrack: Story;

package/dist/types/components/bs-switch/bs-switch.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-switch/bs-switch.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsSwitchSize = 'md' | 'lg';
+/**
+ * A toggle switch for an on/off setting that takes effect immediately (no explicit form
+ * submission required).
+ *
+ * ## When to use
+ * - A binary setting that applies right away (e.g. "Enable notifications", "Dark mode").
+ *
+ * ## When not to use
+ * - A binary choice that's part of a form submitted later, or one item within a group of
+ *   independent choices -- use `bs-checkbox` instead.
+ * - A single mutually-exclusive choice from a set -- use a radio group instead.
+ *
+ * @slot - Default slot: the label text.
+ * @part track - The visual pill-shaped track.
+ * @part knob - The sliding circular knob.
+ * @part label - The label text wrapper.
+ */
+export declare class BsSwitch {
+    el: HTMLElement;
+    /** Sizing scale. Controls the track's width/height and the knob's diameter. */
+    size: BsSwitchSize;
+    /** Whether the switch is on. Mutable so clicking the label/input toggles it directly, and
+     * reflected so consumers can target `bs-switch[checked]` via CSS. */
+    checked: boolean;
+    /** Disables the switch: sets the native `disabled` attribute, suppresses hover/focus styling,
+     * and prevents toggling. */
+    disabled: boolean;
+    /**
+     * Accessible name for the switch. Required whenever the default (label) slot is empty (e.g. a
+     * bare "enabled" switch in a table row) -- without it, the internal native `<input>` has no
+     * accessible name at all. Setting `aria-label` directly on the `<bs-switch>` host does NOT
+     * work for this: that attribute stays on the light-DOM host and is never forwarded into the
+     * shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays
+     * nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and
+     * `bs-checkbox`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own
+     * internal focusable element for the same reason.
+     */
+    ariaLabel: string | null;
+    /** Emitted when the checked state changes via user interaction, with the new `checked` value. */
+    bsChange: EventEmitter<boolean>;
+    private onChange;
+    render(): any;
+}

package/dist/types/components/bs-switch/bs-switch.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+type BsSwitchSize = 'md' | 'lg';
+interface BsSwitchArgs {
+    size: BsSwitchSize;
+    checked: boolean;
+    disabled: boolean;
+    label: string;
+}
+declare const meta: Meta<BsSwitchArgs>;
+export default meta;
+type Story = StoryObj<BsSwitchArgs>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const AllCombinations: Story;

package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.d.ts

@@ -0,0 +1,65 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * A pill-shaped tab button -- an optional leading icon plus a text label, rendered as a real
+ * `<button>` so it participates correctly in tab order and native click/keyboard activation.
+ * Unlike `bs-tab`'s underline indicator, selection here is communicated entirely by the pill's
+ * background fill color -- there is no separate indicator element.
+ *
+ * ## When to use
+ * - As one button within a segmented-control-style tab bar, where exactly one tab is
+ *   selected/active at a time.
+ *
+ * ## When not to use
+ * - As a standalone action button -- use `bs-button` instead, `bs-inline-tab`'s visual language
+ *   (muted pill until selected/hovered) only makes sense as part of a set.
+ *
+ * `selected` is NOT self-toggling -- clicking a `bs-inline-tab` only emits `bsSelect`, it does not
+ * set its own `selected` prop, and it does not unselect any sibling tabs. Wrap your
+ * `<bs-inline-tab>` elements in `<bs-tabs type="bs-inline-tab">` -- it owns `role="tablist"` and
+ * coordinates selection (listening for `bsSelect` and setting `selected`/`false` across siblings)
+ * for you. Using `bs-inline-tab` standalone, outside a `<bs-tabs>` wrapper, still means `selected`
+ * doesn't self-toggle and `role="tablist"` isn't provided automatically -- a consumer doing that
+ * would still need to coordinate `selected` and supply `role="tablist"` manually, same as
+ * `bs-tab.mdx`/`bs-radio.mdx` document for their own components. See `bs-inline-tab.mdx`'s
+ * Accessibility section for the full requirement, including `role="tabpanel"` on the corresponding
+ * content panels.
+ *
+ * @slot - Default slot: the tab's label text. When empty (icon-only), no space is reserved for it.
+ * @slot icon - Optional leading icon (24x24). When empty (text-only), no space is reserved for it.
+ * @part tab - The button element.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ */
+export declare class BsInlineTab {
+    el: HTMLElement;
+    /** Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the
+     * "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can
+     * target `bs-inline-tab[selected]`. */
+    selected: boolean;
+    /** Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and
+     * prevents clicking from emitting `bsSelect`. */
+    disabled: boolean;
+    /** Accessible name for the tab. Required for icon-only usage (no visible label text via the
+     * default slot) so screen readers still announce what the tab does -- without it, an icon-only
+     * tab has no discernible name at all (axe-core flags this as a critical `button-name`
+     * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
+     * automatically, same as `bs-tab`'s identical prop. */
+    ariaLabel: string | null;
+    /** Tracks whether the `icon` slot has assigned content. */
+    hasIcon: boolean;
+    /** Tracks whether the default (label) slot has assigned content. */
+    hasLabel: boolean;
+    /** Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc. */
+    bsSelect: EventEmitter<void>;
+    /**
+     * Computes the initial `hasIcon`/`hasLabel` state directly from the host's light DOM children,
+     * before first render -- same reasoning as `bs-tab.componentWillLoad` (a slot with zero assigned
+     * nodes from the start never fires `slotchange`).
+     */
+    componentWillLoad(): void;
+    private hasSlottedContent;
+    private onIconSlotchange;
+    private onLabelSlotchange;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsInlineTabArgs {
+    selected: boolean;
+    disabled: boolean;
+    icon: boolean;
+    label: string;
+    ariaLabel: string;
+}
+declare const meta: Meta<BsInlineTabArgs>;
+export default meta;
+type Story = StoryObj<BsInlineTabArgs>;
+export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const IconOnly: Story;
+export declare const Selected: Story;
+export declare const SelectedWithIcon: Story;
+export declare const Disabled: Story;
+interface BsInlineTabGroupArgs {
+    selectedTab: string;
+    icon: boolean;
+}
+export declare const Group: StoryObj<BsInlineTabGroupArgs>;

package/dist/types/components/bs-tab/bs-tab/bs-tab.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-tab/bs-tab/bs-tab.d.ts

@@ -0,0 +1,74 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export type BsTabIconPosition = 'start' | 'top';
+/**
+ * A single tab button -- an optional icon plus a text label, rendered as a real `<button>` so it
+ * participates correctly in tab order and native click/keyboard activation.
+ *
+ * ## When to use
+ * - As one button within a tab bar, where exactly one tab is selected/active at a time.
+ *
+ * ## When not to use
+ * - As a standalone action button -- use `bs-button` instead, `bs-tab`'s visual language (muted
+ *   until selected/hovered, underline indicator) only makes sense as part of a set.
+ *
+ * `selected` is NOT self-toggling -- clicking a `bs-tab` only emits `bsSelect`, it does not set its
+ * own `selected` prop, and it does not unselect any sibling tabs. Wrap your `<bs-tab>` elements in
+ * `<bs-tabs type="bs-tab">` -- it owns `role="tablist"` and coordinates selection (listening for
+ * `bsSelect` and setting `selected`/`false` across siblings) for you. Using `bs-tab` standalone,
+ * outside a `<bs-tabs>` wrapper, still means `selected` doesn't self-toggle and `role="tablist"`
+ * isn't provided automatically -- a consumer doing that would still need to coordinate `selected`
+ * and supply `role="tablist"` manually, same as `bs-radio.mdx` documents for `bs-radio`'s missing
+ * `bs-radio-group`. See `bs-tab.mdx`'s Accessibility section for the full requirement, including
+ * `role="tabpanel"` on the corresponding content panels.
+ *
+ * @slot - Default slot: the tab's label text. When empty (icon-only), no space is reserved for it.
+ * @slot icon - Optional icon (24x24). When empty (text-only), no space is reserved for it.
+ * @slot badge - Optional trailing badge, rendered after the label (e.g. an unread count). Typically
+ * a `bs-badge` element -- consumer's responsibility to style/populate, this component just reserves
+ * a slot for it. Only rendered for text-only and icon+text-horizontal layouts, per the design spec
+ * (not icon-only or icon+text-vertical).
+ * @part tab - The button element.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ * @part badge - The badge wrapper.
+ * @part indicator - The selection/hover underline indicator.
+ */
+export declare class BsTab {
+    el: HTMLElement;
+    /** Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the
+     * "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can
+     * target `bs-tab[selected]`. */
+    selected: boolean;
+    /** Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and
+     * prevents clicking from emitting `bsSelect`. */
+    disabled: boolean;
+    /** Where the icon sits relative to the label, when both `icon` and the default slot are
+     * populated. Ignored for icon-only/text-only layouts. */
+    iconPosition: BsTabIconPosition;
+    /** Accessible name for the tab. Required for icon-only usage (no visible label text via the
+     * default slot) so screen readers still announce what the tab does -- without it, an icon-only
+     * tab has no discernible name at all (axe-core flags this as a critical `button-name`
+     * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
+     * automatically, same as `bs-button`'s identical prop. */
+    ariaLabel: string | null;
+    /** Tracks whether the `icon` slot has assigned content. */
+    hasIcon: boolean;
+    /** Tracks whether the default (label) slot has assigned content. */
+    hasLabel: boolean;
+    /** Tracks whether the `badge` slot has assigned content. */
+    hasBadge: boolean;
+    /** Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc. */
+    bsSelect: EventEmitter<void>;
+    /**
+     * Computes the initial `hasIcon`/`hasLabel`/`hasBadge` state directly from the host's light DOM
+     * children, before first render -- same reasoning as `bs-button.componentWillLoad` (a slot with
+     * zero assigned nodes from the start never fires `slotchange`).
+     */
+    componentWillLoad(): void;
+    private hasSlottedContent;
+    private onIconSlotchange;
+    private onLabelSlotchange;
+    private onBadgeSlotchange;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/bs-tab/bs-tab/bs-tab.stories.d.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsTabIconPosition } from './bs-tab';
+interface BsTabArgs {
+    selected: boolean;
+    disabled: boolean;
+    icon: boolean;
+    iconPosition: BsTabIconPosition;
+    badge: boolean;
+    label: string;
+    ariaLabel: string;
+}
+declare const meta: Meta<BsTabArgs>;
+export default meta;
+type Story = StoryObj<BsTabArgs>;
+export declare const Default: Story;
+export declare const IconOnly: Story;
+export declare const IconAndTextHorizontal: Story;
+export declare const IconAndTextVertical: Story;
+export declare const Selected: Story;
+export declare const Disabled: Story;
+export declare const WithBadge: Story;
+type BsTabGroupOrientation = 'horizontal' | 'vertical';
+interface BsTabGroupArgs {
+    selectedTab: string;
+    icon: boolean;
+    iconPosition: BsTabIconPosition;
+    badge: boolean;
+    groupOrientation: BsTabGroupOrientation;
+}
+export declare const Group: StoryObj<BsTabGroupArgs>;

package/dist/types/components/bs-tab/bs-tabs/bs-tabs.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-tab/bs-tabs/bs-tabs.d.ts

@@ -0,0 +1,45 @@
+export type BsTabsType = 'bs-tab' | 'bs-inline-tab';
+export type BsTabsOrientation = 'horizontal' | 'vertical';
+/**
+ * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
+ * `<bs-tab>` or `<bs-inline-tab>` children, so consumers no longer have to hand-roll this.
+ *
+ * `bs-tab.mdx`/`bs-inline-tab.mdx` previously documented this coordination -- listening for
+ * `bsSelect` and setting `selected`/`false` on siblings, plus supplying `role="tablist"` on
+ * whatever element groups the tabs -- as a "Known gap"/manual consumer responsibility. This
+ * component is that wrapper: it renders the `role="tablist"` element and listens for `bsSelect`
+ * itself. Using `<bs-tab>`/`<bs-inline-tab>` standalone, outside a `<bs-tabs>` wrapper, still means
+ * `selected` doesn't self-toggle -- a consumer doing that would still need to coordinate `selected`
+ * manually -- but that's no longer the first recommended path.
+ *
+ * ## When to use
+ * - Wrapping a set of `<bs-tab>` (underline style) or `<bs-inline-tab>` (pill style) elements that
+ *   should behave as a single-selection tab bar.
+ *
+ * ## When not to use
+ * - For a single, standalone tab button not participating in a group -- use `bs-tab`/`bs-inline-tab`
+ *   directly.
+ *
+ * @slot - Default slot: the tab elements (`<bs-tab>` or `<bs-inline-tab>`, matching `type`) that
+ * make up this group.
+ * @part tablist - The wrapping element carrying `role="tablist"`.
+ */
+export declare class BsTabs {
+    el: HTMLElement;
+    /** Which tab-button family this group wraps. Governs the wrapper's own visual treatment (gap-only
+     * for `bs-tab`, a filled pill bar for `bs-inline-tab`). Not reflected as an attribute -- nothing
+     * external needs to target it via CSS attribute selector, it only drives internal class names. */
+    type: BsTabsType;
+    /** Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and
+     * switches `flex-direction`. */
+    orientation: BsTabsOrientation;
+    /**
+     * Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
+     * `@Event()` defaults to `bubbles: true, composed: true`, and `@Listen` without a target listens
+     * on the host itself), and sets `selected` on the clicked child / `false` on its siblings.
+     * Disabled children never emit `bsSelect` in the first place (each's own `onClick` guards
+     * `if (this.disabled) return;`), so no special-casing is needed here.
+     */
+    onTabSelect(ev: CustomEvent<void>): void;
+    render(): any;
+}

package/dist/types/components/bs-tab/bs-tabs/bs-tabs.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsTabsOrientation, BsTabsType } from './bs-tabs';
+interface BsTabsArgs {
+    type: BsTabsType;
+    orientation: BsTabsOrientation;
+    selectedTab: string;
+}
+declare const meta: Meta<BsTabsArgs>;
+export default meta;
+type Story = StoryObj<BsTabsArgs>;
+export declare const Default: Story;
+export declare const InlineTabGroup: Story;
+export declare const Vertical: Story;

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.d.ts

@@ -0,0 +1,96 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+/**
+ * A left-side persistent navigation sidebar: the BrandSync logo, a "Main Menu" title with a
+ * collapse toggle, a reserved slot for a search field, and a scrollable list of nav items.
+ *
+ * ## 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).
+ *
+ * ## When not to use
+ * - The top navigation bar itself -- use `bs-navigation-header` instead.
+ *
+ * This component renders a real `<nav>` landmark (no explicit `role` needed -- `<nav>` already
+ * carries the implicit `navigation` role), labeled via `aria-label={heading}` so the landmark
+ * still has a name even when collapsed (see below).
+ *
+ * `collapsed` narrows the drawer to a 96px icon-only rail, per Figma node 8028:135374
+ * ("Type=Collapsed"): the title text disappears, the logo swaps from the full "EG BrandSync"
+ * wordmark (`bs-logo variant="full"`) to the real icon-only mark (`bs-logo variant="mark"` -- a
+ * second, properly-designed asset, not a CSS crop of the full one) via CSS visibility toggling on
+ * both, the same `:host([collapsed])` attribute-selector pattern already used for the
+ * `search`/`search-trigger` swap below, the `search` slot is replaced by a compact built-in
+ * search-trigger button (this component can't meaningfully shrink arbitrary slotted search-field
+ * content down to icon size itself, so it emits `bsSearchClick` instead -- e.g. to open a full
+ * search overlay), and every top-level
+ * `bs-navigation-drawer-item`'s layout switches from icon-beside-label to icon-above-caption.
+ * That last part is real prop propagation, not a CSS trick: this component keeps each direct-child
+ * item's own `collapsed` prop in sync with its own (see `syncItemsCollapsed` below), the same
+ * direct-children-prop-sync approach `bs-tabs` already uses for coordinating `selected` across its
+ * `bs-tab` children. Clicking the toggle self-toggles `collapsed` (simple local UI state, not
+ * something needing cross-component coordination -- closer to `bs-switch`'s self-toggling
+ * `checked` than `bs-tab`'s non-self-toggling `selected`) and emits `bsCollapse` with the new
+ * value. The toggle's own caret icon does NOT rotate when collapsed -- Figma's collapsed mock
+ * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
+ * that state, so this deliberately does not add the same "flip on toggle" idiom the drawer item's
+ * own disclosure chevron does (that one really is an unconfirmed addition; this one was checked).
+ *
+ * @slot search - Reserved for a search field, e.g. a `bs-input type="search"`. This component
+ *   does not build one itself. Hidden while `collapsed` (see above).
+ * @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.
+ * @part title - The "Main Menu" heading text wrapper.
+ * @part collapse - The collapse toggle button.
+ * @part search - The wrapper around the `search` slot.
+ * @part search-trigger - The compact search button shown instead of the `search` slot while `collapsed`.
+ * @part items - The wrapper around the default (items) slot.
+ */
+export declare class BsNavigationDrawer {
+    el: HTMLElement;
+    /** Heading text shown next to the collapse toggle, and used as the `<nav>` landmark's
+     * `aria-label` (so the landmark keeps a name even when `collapsed` hides the visible text). */
+    heading: string;
+    /** Whether this drawer can be collapsed at all. `false` renders no collapse toggle/chevron --
+     * a "fixed" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a
+     * rail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`. */
+    collapsible: boolean;
+    /** Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected
+     * -- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above
+     * for why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own
+     * `collapsed` prop synced to match (see `syncItemsCollapsed`). */
+    collapsed: boolean;
+    /** Fires with the new `collapsed` value when the collapse toggle button is clicked. */
+    bsCollapse: EventEmitter<boolean>;
+    /** Fires when the compact search-trigger button (shown instead of the `search` slot while
+     * `collapsed`) is clicked -- e.g. to open a full search overlay. This component has no
+     * visibility into what the `search` slot actually contains, so it can't drive a real search
+     * itself once shrunk to icon size. */
+    bsSearchClick: EventEmitter<void>;
+    /** Forwarded straight to both internal `bs-logo` elements' own `background` prop. Defaults to
+     * `"auto"`, which follows the ambient `[data-theme="dark"]` state automatically (see `bs-logo`'s
+     * own docs) -- so if this drawer ends up on a dark surface via the normal theming mechanism, the
+     * logo switches to its dedicated dark-background asset with no wiring needed. Set
+     * `"light"`/`"dark"` explicitly only if you've overridden `--bs-navigation-drawer-bg` to
+     * something dark yourself *without* setting `[data-theme="dark"]`, and need to pin the logo
+     * regardless of theme. Has no visible effect on the `variant="mark"` logo shown while
+     * `collapsed` (see `bs-logo`'s own docs -- there's only one real designed mark asset, it's
+     * background-agnostic). */
+    logoBackground: 'auto' | 'light' | 'dark';
+    onCollapsedChange(collapsed: boolean): void;
+    componentDidLoad(): void;
+    /** Keeps every direct-child `bs-navigation-drawer-item`'s `collapsed` prop in sync with this
+     * component's own -- same direct-children-prop-sync approach `bs-tabs` uses for `selected`
+     * across its `bs-tab` children. Only direct children (top-level items): Figma's collapsed rail
+     * never shows nested/expanded children in the first place (see bs-navigation-drawer-item.css's
+     * `:host([collapsed])` rule forcing those hidden), so there's nothing to sync on them. */
+    private syncItemsCollapsed;
+    private onCollapseClick;
+    private onSearchTriggerClick;
+    render(): any;
+}

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsNavigationDrawerArgs {
+    heading: string;
+    collapsible: boolean;
+    logoBackground: 'auto' | 'light' | 'dark';
+}
+declare const meta: Meta<BsNavigationDrawerArgs>;
+export default meta;
+type Story = StoryObj<BsNavigationDrawerArgs>;
+export declare const FixedSideNav: Story;
+export declare const FixedSideNavWithDivider: Story;
+export declare const FixedSideNavWithIcons: Story;
+export declare const Collapsed: Story;
+export declare const Dark: Story;
+export declare const WithoutSearch: Story;
+export declare const EmptyItems: Story;

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.d.ts

@@ -0,0 +1,103 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+/**
+ * A single row within a `bs-navigation-drawer`'s item list -- either a plain leaf nav item, or an
+ * `expandable` group header that discloses nested `bs-navigation-drawer-item` children.
+ *
+ * ## When to use
+ * - Every row inside a `bs-navigation-drawer`'s default slot.
+ *
+ * ## When not to use
+ * - A standalone action outside a navigation drawer -- use `bs-button`/`bs-menu-item` instead.
+ *
+ * Click behavior is mutually exclusive, based on `expandable`:
+ * - `expandable = false` (a plain leaf item): clicking only emits `bsSelect`. `selected` is NOT
+ *   self-toggling -- same non-self-toggling precedent as `bs-tab`'s `selected` (see `bs-tab.tsx`'s
+ *   class doc): coordinating which sibling row is selected needs cross-item state a
+ *   consumer/wrapper owns, not something this component can reason about on its own.
+ * - `expandable = true` (a group header, never shown with a `selected` tint): clicking toggles
+ *   `this.expanded` directly and emits `bsToggle` with the new value, and does NOT emit
+ *   `bsSelect`. This IS self-toggling, unlike `selected` above -- it's simple local disclosure
+ *   state with no cross-item coordination needed, closer to `bs-switch`'s self-toggling `checked`
+ *   than `bs-tab`'s non-self-toggling `selected`.
+ *
+ * Nesting: put child `<bs-navigation-drawer-item nested>` elements inside a parent
+ * `<bs-navigation-drawer-item expandable>` with `slot="children"`. The parent shows/hides that
+ * slot's content based on its own `expanded` prop, via a pure-CSS attribute selector (no JS
+ * visibility toggling needed, since `expanded` is reflected).
+ *
+ * `collapsed` switches this row from its normal icon-beside-label row layout to a compact
+ * icon-above-caption column (per Figma node 8028:135374, the drawer's "Type=Collapsed" state) --
+ * you don't need to set this yourself on every item: a parent `bs-navigation-drawer` keeps its own
+ * top-level items' `collapsed` prop in sync with its own `collapsed` state automatically (see
+ * `bs-navigation-drawer.tsx`'s `syncItemsCollapsed`, the same direct-children-prop-sync approach
+ * `bs-tabs` uses for coordinating `selected` across its own `bs-tab` children). It's still a public
+ * prop so a standalone item (or this component's own stories) can be demoed without the parent.
+ *
+ * @slot - Default slot: the row's label text.
+ * @slot icon - Optional leading icon (24x24). Only rendered (and only reserves layout space) when
+ *   populated -- same "only take up space if slotted" pattern as `bs-tab`'s `icon` slot. Not
+ *   rendered at all for `nested` rows (Figma's nested rows never have icons).
+ * @slot children - `expandable` only: nested `bs-navigation-drawer-item` rows, shown/hidden based
+ *   on `expanded`.
+ * @part item - The row's root `<button>` element.
+ * @part icon - The icon wrapper (top-level, non-`nested` rows only).
+ * @part label - The label text wrapper.
+ * @part chevron - The trailing expand/collapse chevron wrapper (`expandable` only).
+ * @part children - The wrapper around the `children` slot.
+ */
+export declare class BsNavigationDrawerItem {
+    el: HTMLElement;
+    /** Tints the row's background/text to indicate it's the current destination. NOT
+     * self-toggling -- see the class doc above for why. Ignored (never applied) when `expandable`
+     * is true. Reflected so consumers/CSS can target `bs-navigation-drawer-item[selected]`. */
+    selected: boolean;
+    /** Renders this row as a disclosure/group header (trailing chevron, self-toggling `expanded`,
+     * `bsToggle` instead of `bsSelect` on click) instead of a plain navigable leaf item. See the
+     * class doc above for the full click-behavior split. */
+    expandable: boolean;
+    /** Whether an `expandable` row's `children` slot is shown. Mutable and reflected -- clicking an
+     * `expandable` row toggles this directly (self-toggling, unlike `selected` above), and CSS
+     * shows/hides the `children` slot wrapper based on the reflected attribute. Ignored when
+     * `expandable` is false. */
+    expanded: boolean;
+    /** Marks this as a child row nested under an `expandable` parent (via `slot="children"`) --
+     * deepens the left indent and stops reserving `icon` slot space entirely (Figma's nested rows
+     * never have icons). */
+    nested: boolean;
+    /**
+     * Optional accessible name override. Not required for `collapsed` rows -- unlike an
+     * icon-only button, the label caption stays visible (just restyled smaller, under the icon) in
+     * that mode per Figma, so the button's default accessible-name computation (its own text
+     * content) already works. Set this if you want a fuller/different name than the visible caption
+     * (e.g. truncated captions, or matching `bs-switch`/`bs-slider`'s `ariaLabel` convention for
+     * consistency).
+     */
+    ariaLabel: string | null;
+    /**
+     * Switches this row to the compact icon-above-caption column layout used when its parent
+     * `bs-navigation-drawer` is `collapsed` (see the class doc above). Reflected so
+     * `bs-navigation-drawer-item[collapsed]` is CSS-targetable. Also forces `expandable` rows'
+     * chevron and `children` slot to stay hidden regardless of `expanded` -- Figma's collapsed rail
+     * never shows a nested tree.
+     */
+    collapsed: boolean;
+    /** Fires on click, only when `expandable` is false. See the class doc above. */
+    bsSelect: EventEmitter<void>;
+    /** Fires with the new `expanded` value on click, only when `expandable` is true. See the class
+     * doc above. */
+    bsToggle: EventEmitter<boolean>;
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper only reserves
+     * layout space when there's actually an icon -- same pattern as `bs-tab`'s `hasIcon`. Not used
+     * at all for `nested` rows, which never render an icon wrapper in the first place. */
+    hasIcon: boolean;
+    /**
+     * Computes the initial `hasIcon` state directly from the host's light DOM children, before
+     * first render -- same reasoning as `bs-tab.componentWillLoad`'s identical comment (a slot with
+     * zero assigned nodes from the start never fires `slotchange`).
+     */
+    componentWillLoad(): void;
+    private hasSlottedContent;
+    private onIconSlotchange;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsNavigationDrawerItemArgs {
+    label: string;
+    selected: boolean;
+    expandable: boolean;
+    expanded: boolean;
+    nested: boolean;
+    icon: boolean;
+    collapsed: boolean;
+}
+declare const meta: Meta<BsNavigationDrawerItemArgs>;
+export default meta;
+type Story = StoryObj<BsNavigationDrawerItemArgs>;
+export declare const Default: Story;
+export declare const Selected: Story;
+export declare const Expandable: Story;
+export declare const ExpandableWithChildren: Story;
+export declare const Nested: Story;
+export declare const IconOnlyLabelSpace: Story;
+export declare const Collapsed: Story;

package/dist/types/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};