@reliability-design/web 1.3.1 → 1.4.1

package/dist/components/rel-menu/rel-menu.ts

@@ -1,8 +1,10 @@
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
+import "@reliability-design/icons/rel-icon";
+import "../rel-checkbox/rel-checkbox.js";
+import "../rel-radio/rel-radio.js";
 
-export type MenuType = "default" | "checkbox" | "arrow";
+export type MenuType = "default" | "checkbox" | "arrow" | "select-option" | "fixed" | "fit";
 
 export interface MenuItem {
   label: string;
@@ -40,27 +42,36 @@ export class RelMenu extends LitElement {
 
   public static readonly _css = `
     :host {
+      color: var(--rel-text-default);
       display: inline-block;
     }
 
     .rel-menu {
       position: relative;
       display: inline-block;
-      background: var(--rel-color-bg-primary);
-      color: var(--rel-color-text-primary);
-      border-radius: var(--rel-borders-radius-border-radius-300);
+      background: var(--rel-bg-neutral);
+      color: var(--rel-text-default);
+      border-radius: var(--rel-border-radius-md);
       box-shadow: var(--rel-shadows-shadow-300);
       min-width: 220px;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      font-size: var(--rel-fontSizes-sm);
-      padding: var(--rel-spacing-space-3xs) 0;
+      /* No vertical padding: items fill edge-to-edge so a first/last-item hover
+         reaches the menu's top/bottom. NOT overflow:hidden — that clips the
+         type=arrow flyout (position:absolute at left:100%). Instead the first
+         and last items carry the outer corner radius so hover backgrounds clip
+         to the rounded shape without any overflow. */
+      padding: 0;
       outline: none;
-      overflow: hidden;
+      overflow: visible;
+      font-family: var(--rel-body-lg-regular-font-family);
+      font-weight: var(--rel-body-lg-regular-font-weight);
+      font-size: var(--rel-body-lg-regular-font-size);
+      line-height: var(--rel-body-lg-regular-line-height);
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
     }
 
     .rel-menu:focus-visible,
     :host(:focus-visible) .rel-menu {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
@@ -68,75 +79,117 @@ export class RelMenu extends LitElement {
       position: relative;
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
-      line-height: var(--rel-lineHeights-sm);
+      gap: var(--rel-spacing-xs);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
+      line-height: var(--rel-body-sm-regular-line-height);
       cursor: pointer;
       transition: background 0.15s ease, color 0.15s ease;
       user-select: none;
     }
 
+    /* First/last items carry the menu's outer radius so their hover fill clips
+       to the rounded corners (replaces the removed overflow:hidden). */
+    .rel-menu > .rel-menu-item:first-child {
+      border-top-left-radius: var(--rel-border-radius-md);
+      border-top-right-radius: var(--rel-border-radius-md);
+    }
+
+    .rel-menu > .rel-menu-item:last-child {
+      border-bottom-left-radius: var(--rel-border-radius-md);
+      border-bottom-right-radius: var(--rel-border-radius-md);
+    }
+
     .rel-menu-item:hover {
-      background: var(--rel-color-bg-hover);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     .rel-menu-item:active {
-      background: var(--rel-color-bg-hover);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     .rel-menu-item.active {
-      background: var(--rel-color-bg-hover);
-      font-weight: var(--rel-fontWeights-medium);
+      background: var(--rel-bg-neutral-elevated-2);
+      font-weight: var(--rel-body-lg-medium-font-weight);
     }
 
     .rel-menu-item.disabled {
       background-color: transparent;
-      color: var(--rel-color-text-disabled);
+      color: var(--rel-text-disabled);
+      /* Keep the item pointer-interactive so cursor:not-allowed actually
+         renders; clicks are already neutralised by the item.disabled guard in
+         onItemClick/onItemEnter. pointer-events:none here would make the row
+         transparent to the pointer and suppress the cursor. */
       cursor: not-allowed;
     }
 
     .rel-menu-item[data-focused="true"] {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: -2px;
     }
 
-    .menu-check-row {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-2xs);
-      width: 100%;
+    /* Width modes (Figma Type=Fixed / Type=Fit) */
+    .rel-menu.fixed {
+      width: var(--rel-menu-width, 300px);
+      min-width: 0;
+      box-sizing: border-box;
     }
 
-    .menu-checkbox {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
+    .rel-menu.fit {
+      min-width: 0;
+      width: max-content;
     }
 
-    .menu-checkbox:disabled {
-      cursor: not-allowed;
+    /* Checkbox (Type=Checkbox) / radio (Type=Select Option) rows render the real
+       rel-checkbox / rel-radio. pointer-events:none keeps the whole row the click
+       target so onItemClick stays the single source of truth. */
+    .menu-control {
+      pointer-events: none;
+      width: 100%;
     }
 
     .menu-label {
       flex: 1 1 auto;
     }
 
-    .chevron {
-      font-size: var(--rel-fontSizes-lg);
-      opacity: 0.75;
-      transform: translateY(1px);
+    /* Submenu affordance — same rel-icon chevron the menubar uses. */
+    .submenu-chevron {
+      margin-left: auto;
+      display: inline-flex;
+      align-items: center;
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    /* Shortcut / hint text (Figma body-sm-regular, caption tone) */
+    .menu-shortcut,
+    ::slotted([slot="shortcut"]) {
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+      color: var(--rel-text-caption);
+      margin-left: auto;
+      padding-left: var(--rel-spacing-md);
     }
 
+    
     .rel-submenu {
+      border: 1px solid var(--rel-border-subtle);
       position: absolute;
-      top: calc(-1 * var(--rel-spacing-space-3xs));
-      left: calc(100% + var(--rel-spacing-space-2xs));
+      top: calc(-1 * var(--rel-spacing-3xs));
+      /* flush against the trigger (no gap) so moving the pointer into the flyout
+         never crosses a dead zone that would fire the trigger's mouseleave */
+      left: 100%;
       min-width: 200px;
-      background: var(--rel-color-bg-primary);
-      color: var(--rel-color-text-primary);
-      border-radius: var(--rel-borders-radius-border-radius-300);
+      background: var(--rel-bg-neutral);
+      color: var(--rel-text-default);
+      border-radius: var(--rel-border-radius-md);
       box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-space-3xs) 0;
+      /* padding:0 + overflow:hidden — safe here (a submenu has no further nested
+         flyout to clip) — so sub-item hovers fill fully and clip to the corners */
+      padding: 0;
+      overflow: hidden;
       visibility: hidden;
       pointer-events: none;
       z-index: 20;
@@ -148,7 +201,7 @@ export class RelMenu extends LitElement {
     }
 
     .rel-submenu .rel-menu-item {
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
     }
   `;
 
@@ -172,20 +225,35 @@ export class RelMenu extends LitElement {
     }
   }
 
+  /** Index of a submenu locked open by a click (survives hover-out). -1 = none. */
+  private lockedIndex = -1;
+
   private handleDocumentClick = (e: MouseEvent) => {
-    if (!this.contains(e.target as Node)) {
+    // composedPath (NOT e.target): document-level e.target is retargeted to the
+    // shadow host when this menu lives inside a shadow root, so this.contains()
+    // wrongly reads an inside-click as outside and closes an open submenu on the
+    // click that opened it. composedPath pierces shadow boundaries.
+    if (!e.composedPath().includes(this)) {
+      this.lockedIndex = -1;
       this._items = this._items.map(i => ({ ...i, open: false }));
     }
   };
 
   private onItemEnter(item: MenuItem, index: number) {
+    if (item.disabled) return;
     if (this.type === "arrow" && item.submenu?.length) {
-      this._items = this._items.map((i, idx) => ({ ...i, open: idx === index }));
+      // Hover opens this submenu; a click-locked one also stays open.
+      this._items = this._items.map((i, idx) => ({ ...i, open: idx === index || idx === this.lockedIndex }));
     }
   }
 
-  private onItemLeave(_item: MenuItem) {
-    // Keep open so user can move into submenu
+  private onItemLeave(_item: MenuItem, index: number) {
+    if (this.type !== "arrow") return;
+    // Hover-out closes the submenu UNLESS it was locked open by a click. Moving
+    // into the flyout doesn't fire this (the flyout is a DOM descendant of the
+    // item and sits flush at left:100%, so there's no dead-zone gap).
+    if (this.lockedIndex === index) return;
+    this._items = this._items.map((i, idx) => ({ ...i, open: idx === this.lockedIndex }));
   }
 
   private onItemClick(item: MenuItem, index: number, ev?: Event) {
@@ -208,11 +276,10 @@ export class RelMenu extends LitElement {
     }
 
     if (this.type === "arrow" && item.submenu?.length) {
-      const next = !item.open;
-      this._items = this._items.map((i, idx) => ({
-        ...i,
-        open: idx === index ? next : false,
-      }));
+      // Click LOCKS the submenu open (click again to unlock/close).
+      const lock = this.lockedIndex !== index;
+      this.lockedIndex = lock ? index : -1;
+      this._items = this._items.map((i, idx) => ({ ...i, open: idx === index ? lock : false }));
       return;
     }
 
@@ -230,6 +297,7 @@ export class RelMenu extends LitElement {
 
   private onSubClick(parentIndex: number, subIndex: number, ev?: Event) {
     ev?.stopPropagation();
+    this.lockedIndex = -1;
     this._items = this._items.map((i, idx) => ({
       ...i,
       active: false,
@@ -251,21 +319,6 @@ export class RelMenu extends LitElement {
     );
   }
 
-  private toggleCheckbox(item: MenuItem, ev: Event) {
-    ev.stopPropagation();
-    if (!item.disabled) {
-      item.checked = !item.checked;
-      this.dispatchEvent(
-        new CustomEvent("rel-check", {
-          detail: { item, checked: item.checked },
-          bubbles: true,
-          composed: true,
-        })
-      );
-      this.requestUpdate();
-    }
-  }
-
   private onKeydown(ev: KeyboardEvent) {
     const last = this._items.length - 1;
 
@@ -278,12 +331,15 @@ export class RelMenu extends LitElement {
     } else if (ev.key === "ArrowRight") {
       const item = this._items[this.focusedIndex];
       if (this.type === "arrow" && item?.submenu?.length) {
+        // keyboard-open locks (no hover-out to close it)
+        this.lockedIndex = this.focusedIndex;
         this._items = this._items.map((i, idx) => ({
           ...i,
           open: idx === this.focusedIndex ? true : i.open,
         }));
       }
     } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
+      this.lockedIndex = -1;
       this._items = this._items.map(i => ({ ...i, open: false }));
     } else if (ev.key === "Enter" || ev.key === " ") {
       const item = this._items[this.focusedIndex];
@@ -294,6 +350,34 @@ export class RelMenu extends LitElement {
 
   private renderMenuItem(item: MenuItem, index: number) {
     const isFocused = this.focusedIndex === index;
+    const hasSubmenu = this.type === "arrow" && !!item.submenu?.length;
+
+    // Checkbox / select-option rows delegate their control to the real
+    // rel-checkbox / rel-radio components (pointer-events:none so the whole ROW
+    // stays the click target — onItemClick is the single source of truth and
+    // the control just reflects item state).
+    const control =
+      this.type === "checkbox"
+        ? html`<rel-checkbox
+            class="menu-control"
+            label="${item.label}"
+            status="${item.checked ? "checked" : "unchecked"}"
+            state="${item.disabled ? "disabled" : "default"}"
+          ></rel-checkbox>`
+        : this.type === "select-option"
+        ? html`<rel-radio
+            class="menu-control"
+            .options="${[{ value: item.label, label: item.label, disabled: !!item.disabled }]}"
+            .selectedValue="${item.active ? item.label : null}"
+          ></rel-radio>`
+        : html`
+            <span class="menu-label">${item.label}</span>
+            ${hasSubmenu
+              ? html`<span class="submenu-chevron"
+                  ><rel-icon name="chevron-right" size="sm"></rel-icon
+                ></span>`
+              : ""}
+          `;
 
     return html`
       <div
@@ -301,32 +385,15 @@ export class RelMenu extends LitElement {
         role="menuitem"
         ?data-focused="${isFocused}"
         @mouseenter="${() => this.onItemEnter(item, index)}"
-        @mouseleave="${() => this.onItemLeave(item)}"
+        @mouseleave="${() => this.onItemLeave(item, index)}"
         @click="${(e: Event) => this.onItemClick(item, index, e)}">
-        ${this.type === "checkbox"
-          ? html`
-              <div class="menu-check-row">
-                <input
-                  class="menu-checkbox"
-                  type="checkbox"
-                  .checked="${item.checked || false}"
-                  ?disabled="${item.disabled}"
-                  @click="${(e: Event) => this.toggleCheckbox(item, e)}" />
-                <span class="menu-label">${item.label}</span>
-              </div>
-            `
-          : html`
-              <span class="menu-label">${item.label}</span>
-              ${this.type === "arrow" && item.submenu?.length
-                ? html`<span class="chevron">▸</span>`
-                : ""}
-            `}
-        ${this.type === "arrow" && item.submenu?.length
+        ${control}
+        ${hasSubmenu
           ? html`
               <div
-                class="rel-submenu ${item.open ? "visible" : ""}"
+                part="panel" class="rel-submenu ${item.open ? "visible" : ""}"
                 @click="${(e: Event) => e.stopPropagation()}">
-                ${item.submenu.map(
+                ${item.submenu!.map(
                   (sub, subIndex) => html`
                     <div
                       class="rel-menu-item ${sub.active ? "active" : ""}"
@@ -347,7 +414,7 @@ export class RelMenu extends LitElement {
     return html`
       <style>${RelMenu._css}</style>
       <div
-        class="rel-menu"
+        part="list" class="rel-menu ${this.type === "fixed" || this.type === "fit" ? this.type : ""}"
         role="menu"
         tabindex="0"
         @keydown="${this.onKeydown}"

package/dist/components/rel-menubar/README.md

@@ -224,32 +224,32 @@ The menubar provides comprehensive keyboard support:
 The component uses design tokens from the Reliability Design System:
 
 ### Colors
-- `--rel-colors-gray-light` - Menubar background
-- `--rel-colors-gray-background` - Trigger and item hover state
-- `--rel-colors-gray-border` - Borders
-- `--rel-colors-gray-divider` - Separators
-- `--rel-colors-gray-heading` - Text color
-- `--rel-colors-white` - Panel background
-- `--rel-colors-blue-primary` - Focus outline and radio selected state
+- `--rel-bg-surface-elevated` - Menubar background
+- `--rel-bg-neutral-elevated-1` - Trigger and item hover state
+- `--rel-border-default` - Borders
+- `--rel-border-default` - Separators
+- `--rel-text-label` - Text color
+- `--rel-bg-surface` - Panel background
+- `--rel-bg-info` - Focus outline and radio selected state
 
 ### Typography
-- `--rel-fontFamilies-primary` - Font family (Poppins)
-- `--rel-fontSizes-sm` - Default text size
-- `--rel-fontSizes-xs` - Shortcut text size
-- `--rel-lineHeights-sm` - Line height
+- `--rel-fonts-font-family` - Font family (Poppins)
+- `--rel-body-sm-regular-font-size` - Default text size
+- `--rel-body-xs-regular-font-size` - Shortcut text size
+- `--rel-body-sm-regular-line-height` - Line height
 
 ### Spacing
-- `--rel-spacing-space-3xs` (2px) - Menubar gap and panel padding
-- `--rel-spacing-space-2xs` (4px) - Trigger padding vertical
-- `--rel-spacing-space-xs` (8px) - Item padding vertical
-- `--rel-spacing-space-sm` (12px) - Trigger and item horizontal padding
-- `--rel-spacing-space-md` (16px) - Item padding and radio offset
+- `--rel-spacing-3xs` (2px) - Menubar gap and panel padding
+- `--rel-spacing-2xs` (4px) - Trigger padding vertical
+- `--rel-spacing-xs` (8px) - Item padding vertical
+- `--rel-spacing-sm` (12px) - Trigger and item horizontal padding
+- `--rel-spacing-md` (16px) - Item padding and radio offset
 
 ### Borders
-- `--rel-borders-width-stroke-100` (1px) - Border width
-- `--rel-borders-width-stroke-150` (1.5px) - Radio border
-- `--rel-borders-radius-border-radius-100` (2px) - Trigger border radius
-- `--rel-borders-radius-border-radius-200` (8px) - Panel border radius
+- `--rel-stroke-sm` (1px) - Border width
+- `--rel-stroke-md` (1.5px) - Radio border
+- `--rel-border-radius-xs` (2px) - Trigger border radius
+- `--rel-border-radius-sm` (8px) - Panel border radius
 
 ### Shadows
 - `--rel-shadows-shadow-300` - Panel drop shadow

package/dist/components/rel-menubar/rel-menubar.ts

@@ -4,7 +4,6 @@ import { RelMenubarMenu } from "./rel-menubar-menu";
 import "@reliability-design/icons/rel-icon";
 import "../rel-checkbox/rel-checkbox.js";
 import "../rel-radio/rel-radio.js";
-import "../../styles/vars-v2.css";
 
 interface MenuState {
   menu: RelMenubarMenu;
@@ -24,27 +23,36 @@ export class RelMenubar extends LitElement {
   private _onScroll?: () => void;
 
   public static readonly _css = `
-    :host {
+    /* This component renders into LIGHT DOM (createRenderRoot returns this), so
+       :host / <slot> don't work here — the raw <rel-menubar-menu> definitions
+       are data holders that must be hidden with a plain selector. Relying on the
+       global rel-menubar-menu.css is not enough: it can't cross a consumer's
+       shadow boundary AND it's a no-op in the tsup-built package (css:"copy"). */
+    rel-menubar {
+      color: var(--rel-text-default);
       display: block;
     }
 
-    :host > slot {
+    rel-menubar-menu {
       display: none;
     }
 
     .menubar-container {
       display: flex;
       align-items: stretch;
-      background: var(--rel-color-bg-secondary);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      background: var(--rel-bg-surface-elevated);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm);
       overflow: hidden;
       padding: 0;
-      gap: var(--rel-spacing-space-3xs);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
+      gap: var(--rel-spacing-3xs);
       height: 40px;
       width: fit-content;
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
     .menubar-trigger {
@@ -52,13 +60,13 @@ export class RelMenubar extends LitElement {
       align-items: center;
       align-self: stretch;
       height: 100%;
-      padding: 0 var(--rel-spacing-space-sm);
+      padding: 0 var(--rel-spacing-sm);
       background: transparent;
       border: none;
       cursor: pointer;
       font-family: inherit;
       font-size: inherit;
-      color: var(--rel-color-text-heading);
+      color: var(--rel-text-label);
       transition: background 0.15s ease;
       user-select: none;
       outline: none;
@@ -66,20 +74,20 @@ export class RelMenubar extends LitElement {
 
     .menubar-trigger:hover,
     .menubar-trigger.active {
-      background: var(--rel-color-bg-selected);
+      background: var(--rel-bg-neutral-elevated-2);
     }
 
     .menubar-trigger:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
     .menubar-panel {
       position: fixed;
       min-width: 220px;
-      background: var(--rel-color-bg-primary);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      background: var(--rel-bg-surface);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-300);
       padding: 0;
       overflow: hidden;
@@ -96,18 +104,18 @@ export class RelMenubar extends LitElement {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: var(--rel-spacing-space-sm);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
+      gap: var(--rel-spacing-sm);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-md);
       cursor: pointer;
       transition: background 0.15s ease;
       user-select: none;
-      color: var(--rel-color-text-heading);
-      line-height: var(--rel-lineHeights-sm);
+      color: var(--rel-text-label);
+      line-height: var(--rel-body-sm-regular-line-height);
     }
 
     .menu-item:hover,
     .menu-item.focused {
-      background: var(--rel-color-bg-selected);
+      background: var(--rel-bg-neutral-elevated-2);
     }
 
     .menu-item[data-disabled="true"] {
@@ -116,8 +124,8 @@ export class RelMenubar extends LitElement {
     }
 
     .menu-separator {
-      height: var(--rel-borders-width-stroke-100);
-      background: var(--rel-color-border-divider);
+      height: var(--rel-stroke-sm);
+      background: var(--rel-border-default);
       margin: 0;
       padding: 0;
     }
@@ -138,9 +146,9 @@ export class RelMenubar extends LitElement {
     .submenu-panel {
       position: fixed;
       min-width: 200px;
-      background: var(--rel-color-bg-primary);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      background: var(--rel-bg-surface);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-300);
       padding: 0;
       overflow: hidden;
@@ -154,17 +162,21 @@ export class RelMenubar extends LitElement {
 
     .menu-shortcut {
       opacity: 0.6;
-      font-size: var(--rel-fontSizes-xs);
       margin-left: auto;
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-3xs);
+      gap: var(--rel-spacing-3xs);
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
     }
 
     .menubar-panel rel-checkbox {
       display: block;
       width: 100%;
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-md, 16px);
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-md, 16px);
       box-sizing: border-box;
       cursor: pointer;
     }
@@ -224,7 +236,12 @@ export class RelMenubar extends LitElement {
   }
 
   private handleOutsideClick = (e: MouseEvent) => {
-    if (!this.contains(e.target as Node)) {
+    // composedPath (NOT e.target): a document-level listener sees e.target
+    // retargeted to the shadow host when the menubar lives inside a shadow root
+    // (e.g. any consumer component), so this.contains(e.target) is false for a
+    // click that is actually INSIDE the menubar — closing the menu on the very
+    // click that opened it. composedPath pierces shadow boundaries.
+    if (!e.composedPath().includes(this)) {
       this.closeAllMenus();
     }
   };
@@ -581,7 +598,6 @@ export class RelMenubar extends LitElement {
   render() {
     return html`
       <style>${RelMenubar._css}</style>
-      <slot></slot>
       <div class="menubar-container">
         ${this.menus.map(
           (menuState, index) => html`