@brandsync/wc 0.0.10 → 0.0.12

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

@@ -0,0 +1,325 @@
+/**
+ * @prop --bs-navigation-drawer-item-gap: Gap between the icon, label, and chevron within the row.
+ *   Aliased to --bs-spacing-100.
+ * @prop --bs-navigation-drawer-item-radius: Corner radius of the row. Aliased to
+ *   --bs-border-radius-100.
+ * @prop --bs-navigation-drawer-item-padding-y: Top/bottom padding of the row. Aliased to
+ *   --bs-spacing-150.
+ * @prop --bs-navigation-drawer-item-padding-x: Left/right padding of a top-level (non-`nested`)
+ *   row. Aliased to --bs-spacing-100 -- note this is the HORIZONTAL padding while
+ *   --bs-navigation-drawer-item-padding-y (above) is VERTICAL, the reverse of this value's own
+ *   relative size (12px vertical / 8px horizontal), per the Figma spec.
+ * @prop --bs-navigation-drawer-item-padding-left-nested: Left padding of a `nested` row. Aliased
+ *   to --bs-spacing-600 (48px) -- deep indent under an expanded parent, replacing
+ *   --bs-navigation-drawer-item-padding-x on the left side only (right padding stays the same).
+ * @prop --bs-navigation-drawer-item-font-weight: Label font weight. Aliased to
+ *   --bs-font-weight-medium.
+ * @prop --bs-navigation-drawer-item-font-size: Label font size. Aliased to --bs-font-size-md.
+ * @prop --bs-navigation-drawer-item-line-height: Label line height. Aliased to
+ *   --bs-line-height-body-md.
+ * @prop --bs-navigation-drawer-item-color: Resting (unselected) text/icon color. Aliased to
+ *   --bs-text-muted.
+ * @prop --bs-navigation-drawer-item-color-selected: `selected` text/icon color. Aliased to
+ *   --bs-text-default.
+ * @prop --bs-navigation-drawer-item-bg-selected: `selected` row background, resting. Aliased to
+ *   --bs-surface-selected.
+ * @prop --bs-navigation-drawer-item-bg-hover: Unselected row background on hover. Aliased to
+ *   --bs-surface-hover, per Figma node 13472:7172 (the full Enabled/Hovered/Focused/Pressed/
+ *   Disabled state matrix for this component).
+ * @prop --bs-navigation-drawer-item-bg-pressed: Unselected row background while pressed
+ *   (`:active`). Aliased to --bs-surface-pressed, per the same Figma node.
+ * @prop --bs-navigation-drawer-item-bg-focus: Unselected row background while focused
+ *   (`:focus-visible`) -- shown together with, not instead of, the focus ring below. Aliased to
+ *   --bs-surface-focus, per the same Figma node (identical value to --bs-surface-hover there).
+ * @prop --bs-navigation-drawer-item-bg-selected-hover: `selected` row background on hover.
+ *   Aliased to --bs-surface-selected-hover, per the same Figma node.
+ * @prop --bs-navigation-drawer-item-bg-selected-pressed: `selected` row background while pressed.
+ *   Aliased to --bs-surface-selected-pressed, per the same Figma node.
+ * @prop --bs-navigation-drawer-item-bg-selected-focus: `selected` row background while focused.
+ *   Aliased to --bs-surface-selected-focus, per the same Figma node.
+ * @prop --bs-navigation-drawer-item-color-hover: Unselected row text/icon color on hover, focus,
+ *   or pressed (all three share this color in Figma, distinct from the muted resting color).
+ *   Aliased to --bs-text-secondary. `selected` rows keep --bs-navigation-drawer-item-color-selected
+ *   across all of these states instead -- Figma never changes a selected row's text color.
+ * @prop --bs-navigation-drawer-item-focus-ring-color: Focus ring color. Aliased to
+ *   --bs-border-neutral-focus.
+ * @prop --bs-navigation-drawer-item-children-gap: Gap between nested child rows. Aliased to
+ *   --bs-spacing-100.
+ * @prop --bs-navigation-drawer-item-collapsed-gap: Gap between the icon and caption when
+ *   `collapsed`. Aliased to --bs-spacing-100.
+ * @prop --bs-navigation-drawer-item-collapsed-padding: Padding of a `collapsed` row. Aliased to
+ *   --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.
+ * @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`.
+ *   Aliased to --bs-fontsize-caption-sm (12px).
+ * @prop --bs-navigation-drawer-item-collapsed-line-height: Caption line height when `collapsed`.
+ *   Aliased to --bs-line-height-caption-sm.
+ */
+:host {
+  display: block;
+
+  --bs-navigation-drawer-item-gap: var(--bs-spacing-100);
+  --bs-navigation-drawer-item-radius: var(--bs-border-radius-100);
+  --bs-navigation-drawer-item-padding-y: var(--bs-spacing-150);
+  --bs-navigation-drawer-item-padding-x: var(--bs-spacing-100);
+  --bs-navigation-drawer-item-padding-left-nested: var(--bs-spacing-600);
+
+  --bs-navigation-drawer-item-font-weight: var(--bs-font-weight-medium);
+  --bs-navigation-drawer-item-font-size: var(--bs-font-size-md);
+  --bs-navigation-drawer-item-line-height: var(--bs-line-height-body-md);
+
+  --bs-navigation-drawer-item-color: var(--bs-text-muted);
+  --bs-navigation-drawer-item-color-selected: var(--bs-text-default);
+  --bs-navigation-drawer-item-color-hover: var(--bs-text-secondary);
+  --bs-navigation-drawer-item-bg-selected: var(--bs-surface-selected);
+  --bs-navigation-drawer-item-bg-hover: var(--bs-surface-hover);
+  --bs-navigation-drawer-item-bg-pressed: var(--bs-surface-pressed);
+  --bs-navigation-drawer-item-bg-focus: var(--bs-surface-focus);
+  --bs-navigation-drawer-item-bg-selected-hover: var(--bs-surface-selected-hover);
+  --bs-navigation-drawer-item-bg-selected-pressed: var(--bs-surface-selected-pressed);
+  --bs-navigation-drawer-item-bg-selected-focus: var(--bs-surface-selected-focus);
+  --bs-navigation-drawer-item-focus-ring-color: var(--bs-border-neutral-focus);
+
+  --bs-navigation-drawer-item-children-gap: var(--bs-spacing-100);
+
+  --bs-navigation-drawer-item-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-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;
+}
+
+.bs-navigation-drawer-item {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-navigation-drawer-item-gap);
+  border: none;
+  border-radius: var(--bs-navigation-drawer-item-radius);
+  padding: var(--bs-navigation-drawer-item-padding-y) var(--bs-navigation-drawer-item-padding-x);
+  background: transparent;
+  color: var(--bs-navigation-drawer-item-color);
+  font-family: inherit;
+  font-weight: var(--bs-navigation-drawer-item-font-weight);
+  font-size: var(--bs-navigation-drawer-item-font-size);
+  line-height: calc(var(--bs-navigation-drawer-item-line-height) * 1px);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    color var(--bs-duration-fast) var(--bs-easing-standard),
+    background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+/* Interaction states (hover/focus/pressed), expanded (non-collapsed) rows -- per Figma node
+   13472:7172's full Enabled/Hovered/Focused/Pressed/Disabled matrix. Each pair below is scoped to
+   :host(:not([collapsed])) explicitly (collapsed rows get their own icon-chip-only versions
+   further down) and to :not(.bs-navigation-drawer-item--selected) for the unselected variant --
+   without that guard, :hover/:focus-visible/:active (each a pseudo-class, so same specificity
+   contribution as a class) would win over the plain .bs-navigation-drawer-item--selected class
+   rule below and incorrectly replace the selected tint. Unselected rows also darken their text
+   color on all three of these states (Figma: --bs-text-secondary, distinct from the muted resting
+   color) -- selected rows never change text color across any state, only their background shade. */
+:host(:not([collapsed])) .bs-navigation-drawer-item:hover:not(.bs-navigation-drawer-item--selected) {
+  background: var(--bs-navigation-drawer-item-bg-hover);
+  color: var(--bs-navigation-drawer-item-color-hover);
+}
+
+:host(:not([collapsed])) .bs-navigation-drawer-item:active:not(.bs-navigation-drawer-item--selected) {
+  background: var(--bs-navigation-drawer-item-bg-pressed);
+  color: var(--bs-navigation-drawer-item-color-hover);
+}
+
+:host(:not([collapsed])) .bs-navigation-drawer-item:focus-visible:not(.bs-navigation-drawer-item--selected) {
+  background: var(--bs-navigation-drawer-item-bg-focus);
+  color: var(--bs-navigation-drawer-item-color-hover);
+}
+
+:host(:not([collapsed])) .bs-navigation-drawer-item--selected:hover {
+  background: var(--bs-navigation-drawer-item-bg-selected-hover);
+}
+
+:host(:not([collapsed])) .bs-navigation-drawer-item--selected:active {
+  background: var(--bs-navigation-drawer-item-bg-selected-pressed);
+}
+
+:host(:not([collapsed])) .bs-navigation-drawer-item--selected:focus-visible {
+  background: var(--bs-navigation-drawer-item-bg-selected-focus);
+}
+
+.bs-navigation-drawer-item:focus-visible {
+  outline: 2px solid var(--bs-navigation-drawer-item-focus-ring-color);
+  outline-offset: -2px;
+}
+
+/* nested: same vertical padding, deeper left indent, right padding unchanged -- and no icon slot
+   at all (see the render()'s `!this.nested` guard), so there's no icon gap to worry about here. */
+.bs-navigation-drawer-item--nested {
+  padding-left: var(--bs-navigation-drawer-item-padding-left-nested);
+}
+
+.bs-navigation-drawer-item--selected {
+  background: var(--bs-navigation-drawer-item-bg-selected);
+  color: var(--bs-navigation-drawer-item-color-selected);
+}
+
+.bs-navigation-drawer-item--selected .bs-navigation-drawer-item__icon--has-content {
+  color: var(--bs-navigation-drawer-item-color-selected);
+}
+
+/* collapsed: icon-above-caption column instead of icon-beside-label row, per Figma node
+   8028:135374 ("Type=Collapsed"). `selected`'s background moves from the whole row onto just the
+   icon chip below (see .bs-navigation-drawer-item__icon's :host([collapsed]) rule) -- matching
+   the design file, where the tint never spans the caption underneath it. */
+:host([collapsed]) .bs-navigation-drawer-item {
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--bs-navigation-drawer-item-collapsed-gap);
+  padding: var(--bs-navigation-drawer-item-collapsed-padding);
+  background: transparent;
+}
+
+.bs-navigation-drawer-item__icon {
+  display: none;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.bs-navigation-drawer-item__icon--has-content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bs-navigation-drawer-item__icon ::slotted(svg) {
+  width: 24px;
+  height: 24px;
+}
+
+/* collapsed: the icon sits in its own small rounded chip (Figma's "State layer") so a `selected`
+   tint applies to just this chip, not the whole column -- see the plain (non-collapsed)
+   .bs-navigation-drawer-item--selected rule above for the row-wide version instead. */
+:host([collapsed]) .bs-navigation-drawer-item__icon--has-content {
+  padding: var(--bs-navigation-drawer-item-collapsed-icon-padding-y) var(--bs-navigation-drawer-item-collapsed-icon-padding-x);
+  border-radius: var(--bs-navigation-drawer-item-radius);
+}
+
+:host([collapsed][selected]) .bs-navigation-drawer-item__icon--has-content {
+  background: var(--bs-navigation-drawer-item-bg-selected);
+}
+
+/* collapsed: hover/pressed/focus tint just the icon chip too, same reasoning as `selected` above
+   -- and the same :not([selected]) guard, so interacting with a selected collapsed row swaps
+   between the *-selected-* backgrounds below instead of these plain ones. */
+:host([collapsed]:not([selected])) .bs-navigation-drawer-item:hover .bs-navigation-drawer-item__icon--has-content {
+  background: var(--bs-navigation-drawer-item-bg-hover);
+}
+
+:host([collapsed]:not([selected])) .bs-navigation-drawer-item:active .bs-navigation-drawer-item__icon--has-content {
+  background: var(--bs-navigation-drawer-item-bg-pressed);
+}
+
+:host([collapsed]:not([selected])) .bs-navigation-drawer-item:focus-visible .bs-navigation-drawer-item__icon--has-content {
+  background: var(--bs-navigation-drawer-item-bg-focus);
+}
+
+:host([collapsed][selected]) .bs-navigation-drawer-item:hover .bs-navigation-drawer-item__icon--has-content {
+  background: var(--bs-navigation-drawer-item-bg-selected-hover);
+}
+
+:host([collapsed][selected]) .bs-navigation-drawer-item:active .bs-navigation-drawer-item__icon--has-content {
+  background: var(--bs-navigation-drawer-item-bg-selected-pressed);
+}
+
+:host([collapsed][selected]) .bs-navigation-drawer-item:focus-visible .bs-navigation-drawer-item__icon--has-content {
+  background: var(--bs-navigation-drawer-item-bg-selected-focus);
+}
+
+/* collapsed unselected caption + icon: same secondary-color darkening on hover/pressed/focus as
+   the expanded label (both __label and __icon--has-content need this set explicitly here, since
+   neither the row's own `color` nor a `color: inherit` chain changes for collapsed rows the way it
+   does for expanded ones -- expanded rows change `color` directly on the row itself instead).
+   Selected captions/icons stay --bs-navigation-drawer-item-color-selected always, matching Figma. */
+:host([collapsed]:not([selected])) .bs-navigation-drawer-item:hover .bs-navigation-drawer-item__label,
+:host([collapsed]:not([selected])) .bs-navigation-drawer-item:active .bs-navigation-drawer-item__label,
+:host([collapsed]:not([selected])) .bs-navigation-drawer-item:focus-visible .bs-navigation-drawer-item__label,
+:host([collapsed]:not([selected])) .bs-navigation-drawer-item:hover .bs-navigation-drawer-item__icon--has-content,
+:host([collapsed]:not([selected])) .bs-navigation-drawer-item:active .bs-navigation-drawer-item__icon--has-content,
+:host([collapsed]:not([selected])) .bs-navigation-drawer-item:focus-visible .bs-navigation-drawer-item__icon--has-content {
+  color: var(--bs-navigation-drawer-item-color-hover);
+}
+
+.bs-navigation-drawer-item__label {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* collapsed: small centered caption below the icon instead of the flex-1 label beside it. */
+:host([collapsed]) .bs-navigation-drawer-item__label {
+  flex: none;
+  width: 100%;
+  text-align: center;
+  font-size: var(--bs-navigation-drawer-item-collapsed-font-size);
+  line-height: calc(var(--bs-navigation-drawer-item-collapsed-line-height) * 1px);
+}
+
+.bs-navigation-drawer-item__chevron {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: inherit;
+  transition: transform var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-navigation-drawer-item__chevron svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Rotating on `expanded` is a conventional accordion idiom this component adds on its own --
+   Figma's static mock reuses the identical chevron asset for both states without visually
+   rotating it, so this isn't pixel-confirmed against the design file, just a reasonable default. */
+.bs-navigation-drawer-item__chevron--expanded {
+  transform: rotate(180deg);
+}
+
+/* The `children` slot wrapper is a sibling of the row button (see the render() comment in
+   bs-navigation-drawer-item.tsx for why), shown/hidden purely via the `expanded` attribute
+   (reflected) -- no JS visibility toggling needed. */
+.bs-navigation-drawer-item__children {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-navigation-drawer-item-children-gap);
+}
+
+:host(:not([expanded])) .bs-navigation-drawer-item__children {
+  display: none;
+}
+
+/* collapsed rows never show a chevron or nested children, regardless of `expanded` -- Figma's
+   collapsed rail (node 8028:135374) has no disclosure affordance at all. */
+:host([collapsed]) .bs-navigation-drawer-item__chevron,
+:host([collapsed]) .bs-navigation-drawer-item__children {
+  display: none;
+}

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

@@ -0,0 +1,314 @@
+import { h } from "@stencil/core";
+/**
+ * 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.
+ */
+// Note: this component's CSS Custom Properties are documented via @prop comments in
+// bs-navigation-drawer-item.css, not here -- see bs-navigation-header.css's identical note.
+export class BsNavigationDrawerItem {
+    el;
+    /** 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 = false;
+    /** 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 = false;
+    /** 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 = false;
+    /** 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 = false;
+    /**
+     * 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 = 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 = false;
+    /** Fires on click, only when `expandable` is false. See the class doc above. */
+    bsSelect;
+    /** Fires with the new `expanded` value on click, only when `expandable` is true. See the class
+     * doc above. */
+    bsToggle;
+    /** 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 = false;
+    /**
+     * 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() {
+        this.hasIcon = this.hasSlottedContent('icon');
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.expandable) {
+            this.expanded = !this.expanded;
+            this.bsToggle.emit(this.expanded);
+        }
+        else {
+            this.bsSelect.emit();
+        }
+    };
+    render() {
+        const rowClasses = [
+            'bs-navigation-drawer-item',
+            this.selected && !this.expandable ? 'bs-navigation-drawer-item--selected' : '',
+            this.nested ? 'bs-navigation-drawer-item--nested' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        // The `children` slot wrapper is deliberately a SIBLING of the <button>, not nested inside
+        // it -- a nested child row's own shadow DOM renders its own real <button>, and putting that
+        // inside this row's <button> would produce invalid nested interactive controls (button inside
+        // button). Nested buttons also break click handling in practice: a click on the child bubbles
+        // through this outer <button> too (it's a real ancestor in the flattened tree), which would
+        // 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" })))));
+    }
+    static get is() { return "bs-navigation-drawer-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-navigation-drawer-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-navigation-drawer-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tints the row's background/text to indicate it's the current destination. NOT\nself-toggling -- see the class doc above for why. Ignored (never applied) when `expandable`\nis true. Reflected so consumers/CSS can target `bs-navigation-drawer-item[selected]`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders this row as a disclosure/group header (trailing chevron, self-toggling `expanded`,\n`bsToggle` instead of `bsSelect` on click) instead of a plain navigable leaf item. See the\nclass doc above for the full click-behavior split."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expandable",
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether an `expandable` row's `children` slot is shown. Mutable and reflected -- clicking an\n`expandable` row toggles this directly (self-toggling, unlike `selected` above), and CSS\nshows/hides the `children` slot wrapper based on the reflected attribute. Ignored when\n`expandable` is false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "nested": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks this as a child row nested under an `expandable` parent (via `slot=\"children\"`) --\ndeepens the left indent and stops reserving `icon` slot space entirely (Figma's nested rows\nnever have icons)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "nested",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional accessible name override. Not required for `collapsed` rows -- unlike an\nicon-only button, the label caption stays visible (just restyled smaller, under the icon) in\nthat mode per Figma, so the button's default accessible-name computation (its own text\ncontent) already works. Set this if you want a fuller/different name than the visible caption\n(e.g. truncated captions, or matching `bs-switch`/`bs-slider`'s `ariaLabel` convention for\nconsistency)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Switches this row to the compact icon-above-caption column layout used when its parent\n`bs-navigation-drawer` is `collapsed` (see the class doc above). Reflected so\n`bs-navigation-drawer-item[collapsed]` is CSS-targetable. Also forces `expandable` rows'\nchevron and `children` slot to stay hidden regardless of `expanded` -- Figma's collapsed rail\nnever shows a nested tree."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsSelect",
+                "name": "bsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on click, only when `expandable` is false. See the class doc above."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsToggle",
+                "name": "bsToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the new `expanded` value on click, only when `expandable` is true. See the class\ndoc above."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+// 16x16 native viewBox (not a 24x24 icon scaled down) -- authored directly at display size, per
+// the class doc's note on this being the author's choice between the two options offered.
+const ChevronDownIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));