@reliability-design/web 1.0.6 → 1.1.1

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import "./rel-drawer-footer";
 
 export type DrawerSide = "bottom" | "left" | "right" | "top";
 export type DrawerCloseReason = "backdrop" | "escape" | "drag" | "programmatic";
@@ -18,6 +19,8 @@ export class RelDrawer extends LitElement {
   @property({ type: String, attribute: "max-height" }) maxHeight = "80vh";
   @property({ type: String }) width = "420px";
   @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String }) title: string = "";
+  @property({ type: String }) description: string = "";
 
   @state() private isDragging = false;
   @state() private dragOffset = 0;
@@ -69,7 +72,7 @@ export class RelDrawer extends LitElement {
     }
 
     .drawer-container.open .overlay {
-      opacity: 1;
+      opacity: var(--rel-drawer-scrim-opacity, 1);
     }
 
     /* Panel base */
@@ -295,9 +298,10 @@ export class RelDrawer extends LitElement {
     this.lockScroll();
 
     if (this.modal) {
-      setTimeout(() => {
-        this.focusPanel();
-      }, 50);
+      this.updateComplete.then(() => {
+        const focusTarget = this.shadowRoot?.querySelector<HTMLElement>("[autofocus], .close-button, .panel");
+        focusTarget?.focus();
+      });
     }
 
     document.addEventListener("keydown", this.handleKeydown);
@@ -316,10 +320,10 @@ export class RelDrawer extends LitElement {
     document.removeEventListener("keydown", this.handleKeydown);
 
     if (this.previousFocus && this.previousFocus.focus) {
-      setTimeout(() => {
+      this.updateComplete.then(() => {
         this.previousFocus?.focus();
         this.previousFocus = null;
-      }, 50);
+      });
     }
 
     this.dispatchEvent(
@@ -439,16 +443,8 @@ export class RelDrawer extends LitElement {
     this.close("programmatic");
   }
 
-  private close(reason: DrawerCloseReason) {
+  private close(_reason: DrawerCloseReason) {
     this.open = false;
-
-    this.dispatchEvent(
-      new CustomEvent("rel-close", {
-        detail: { reason },
-        bubbles: true,
-        composed: true,
-      })
-    );
   }
 
   // Drag-to-close handlers
@@ -527,8 +523,8 @@ export class RelDrawer extends LitElement {
   }
 
   render() {
-    const hasTitle = this.hasSlotContent("title");
-    const hasDescription = this.hasSlotContent("description");
+    const hasTitle = !!this.title;
+    const hasDescription = !!this.description;
     const hasFooter = this.hasSlotContent("footer");
     const showCloseButton = this.dismissible;
     const hasHeader = hasTitle || hasDescription || showCloseButton;
@@ -548,8 +544,7 @@ export class RelDrawer extends LitElement {
           part="panel"
           class="panel ${this.isDragging ? "dragging" : ""}"
           data-side="${this.side}"
-          style="--drawer-width: ${this.width}; --drawer-max-height: ${this
-            .maxHeight}; ${this.getPanelStyle()}"
+          style="${this.width ? `--drawer-width: ${this.width};` : ''}${this.maxHeight ? `--drawer-max-height: ${this.maxHeight};` : ''}${this.getPanelStyle()}"
           role="${this.modal ? "dialog" : "region"}"
           aria-modal="${this.modal}"
           tabindex="-1">
@@ -566,14 +561,10 @@ export class RelDrawer extends LitElement {
                   <div class="header-top">
                     <div>
                       ${hasTitle
-                        ? html`<h2 class="title">
-                            <slot name="title"></slot>
-                          </h2>`
+                        ? html`<h2 class="title">${this.title}</h2>`
                         : ""}
                       ${hasDescription
-                        ? html`<p class="description">
-                            <slot name="description"></slot>
-                          </p>`
+                        ? html`<p class="description">${this.description}</p>`
                         : ""}
                     </div>
                     ${showCloseButton
@@ -605,7 +596,7 @@ export class RelDrawer extends LitElement {
 
           ${hasFooter
             ? html`<div part="footer" class="footer">
-                <slot name="footer"></slot>
+                <rel-drawer-footer><slot name="footer"></slot></rel-drawer-footer>
               </div>`
             : ""}
         </div>

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

@@ -12,6 +12,18 @@ export interface MenuItem {
   open?: boolean;
 }
 
+@customElement("rel-menu-item")
+export class RelMenuItem extends LitElement {
+  @property({ type: String }) label: string = "";
+  @property({ type: String }) value: string = "";
+  @property({ type: Boolean }) disabled: boolean = false;
+  @property({ type: String }) icon: string = "";
+
+  render() {
+    return html``;
+  }
+}
+
 @customElement("rel-menu")
 export class RelMenu extends LitElement {
   @property({ type: String }) type: MenuType = "default";
@@ -19,6 +31,7 @@ export class RelMenu extends LitElement {
   @property({ type: Array }) items: MenuItem[] = [];
 
   @state() private focusedIndex: number = 0;
+  @state() private _menuItems: RelMenuItem[] = [];
 
   static styles = css`
     :host {
@@ -28,8 +41,8 @@ export class RelMenu extends LitElement {
     .rel-menu {
       position: relative;
       display: inline-block;
-      background: var(--rel-colors-white, #fff);
-      color: var(--rel-text-primary, #333);
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
       border-radius: var(--rel-borders-radius-border-radius-300);
       box-shadow: var(--rel-shadows-shadow-300);
       min-width: 220px;
@@ -37,6 +50,7 @@ export class RelMenu extends LitElement {
       font-size: var(--rel-fontSizes-sm);
       padding: var(--rel-spacing-space-3xs) 0;
       outline: none;
+      overflow: hidden;
     }
 
     .rel-menu:focus-visible {
@@ -57,15 +71,15 @@ export class RelMenu extends LitElement {
     }
 
     .rel-menu-item:hover {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-color-bg-hover);
     }
 
     .rel-menu-item:active {
-      background: var(--rel-colors-gray-divider, #bdbdbd);
+      background: var(--rel-color-bg-hover);
     }
 
     .rel-menu-item.active {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-color-bg-hover);
       font-weight: var(--rel-fontWeights-medium);
     }
 
@@ -112,8 +126,8 @@ export class RelMenu extends LitElement {
       top: calc(-1 * var(--rel-spacing-space-3xs));
       left: calc(100% + var(--rel-spacing-space-2xs));
       min-width: 200px;
-      background: var(--rel-colors-white, #fff);
-      color: var(--rel-text-primary, #333);
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
       border-radius: var(--rel-borders-radius-border-radius-300);
       box-shadow: var(--rel-shadows-shadow-300);
       padding: var(--rel-spacing-space-3xs) 0;
@@ -130,6 +144,23 @@ export class RelMenu extends LitElement {
     }
   `;
 
+  private _onSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this._menuItems = slot
+      .assignedElements()
+      .filter((el): el is RelMenuItem => el instanceof RelMenuItem);
+  }
+
+  private get _effectiveItems(): MenuItem[] {
+    if (this._menuItems.length > 0) {
+      return this._menuItems.map((el) => ({
+        label: el.label,
+        disabled: el.disabled,
+      }));
+    }
+    return this.items;
+  }
+
   connectedCallback() {
     super.connectedCallback();
     document.addEventListener("click", this.handleDocumentClick);
@@ -144,14 +175,14 @@ export class RelMenu extends LitElement {
     const path = e.composedPath() as HTMLElement[];
     const hit = path.some((n) => n?.classList?.contains("rel-menu"));
     if (!hit) {
-      this.items.forEach((i) => (i.open = false));
+      this._effectiveItems.forEach((i) => (i.open = false));
       this.requestUpdate();
     }
   };
 
   private onItemEnter(item: MenuItem) {
     if (this.type === "arrow" && item.submenu?.length) {
-      this.items.forEach((i) => {
+      this._effectiveItems.forEach((i) => {
         if (i !== item) i.open = false;
       });
       item.open = true;
@@ -172,7 +203,7 @@ export class RelMenu extends LitElement {
     if (this.type === "checkbox") {
       item.checked = !item.checked;
       this.dispatchEvent(
-        new CustomEvent("item-checked", {
+        new CustomEvent("rel-check", {
           detail: { item, checked: item.checked },
           bubbles: true,
           composed: true,
@@ -184,17 +215,17 @@ export class RelMenu extends LitElement {
 
     if (this.type === "arrow" && item.submenu?.length) {
       const next = !item.open;
-      this.items.forEach((i) => (i.open = false));
+      this._effectiveItems.forEach((i) => (i.open = false));
       item.open = next;
       this.requestUpdate();
       return;
     }
 
     // Default: set active
-    this.items.forEach((i) => (i.active = false));
+    this._effectiveItems.forEach((i) => (i.active = false));
     item.active = true;
     this.dispatchEvent(
-      new CustomEvent("item-selected", {
+      new CustomEvent("rel-select", {
         detail: { item },
         bubbles: true,
         composed: true,
@@ -205,14 +236,14 @@ export class RelMenu extends LitElement {
 
   private onSubClick(parent: MenuItem, sub: MenuItem, ev?: Event) {
     ev?.stopPropagation();
-    this.items.forEach((i) => {
+    this._effectiveItems.forEach((i) => {
       i.active = false;
       i.submenu?.forEach((s) => (s.active = false));
     });
     sub.active = true;
     parent.open = false;
     this.dispatchEvent(
-      new CustomEvent("submenu-selected", {
+      new CustomEvent("rel-submenu-select", {
         detail: { parent, sub },
         bubbles: true,
         composed: true,
@@ -226,7 +257,7 @@ export class RelMenu extends LitElement {
     if (!item.disabled) {
       item.checked = !item.checked;
       this.dispatchEvent(
-        new CustomEvent("item-checked", {
+        new CustomEvent("rel-check", {
           detail: { item, checked: item.checked },
           bubbles: true,
           composed: true,
@@ -237,7 +268,7 @@ export class RelMenu extends LitElement {
   }
 
   private onKeydown(ev: KeyboardEvent) {
-    const last = this.items.length - 1;
+    const last = this._effectiveItems.length - 1;
 
     if (ev.key === "ArrowDown") {
       this.focusedIndex = Math.min(last, this.focusedIndex + 1);
@@ -246,16 +277,16 @@ export class RelMenu extends LitElement {
       this.focusedIndex = Math.max(0, this.focusedIndex - 1);
       ev.preventDefault();
     } else if (ev.key === "ArrowRight") {
-      const item = this.items[this.focusedIndex];
+      const item = this._effectiveItems[this.focusedIndex];
       if (this.type === "arrow" && item?.submenu?.length) {
         item.open = true;
         this.requestUpdate();
       }
     } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
-      this.items.forEach((i) => (i.open = false));
+      this._effectiveItems.forEach((i) => (i.open = false));
       this.requestUpdate();
     } else if (ev.key === "Enter" || ev.key === " ") {
-      const item = this.items[this.focusedIndex];
+      const item = this._effectiveItems[this.focusedIndex];
       this.onItemClick(item, this.focusedIndex);
       ev.preventDefault();
     }
@@ -314,13 +345,14 @@ export class RelMenu extends LitElement {
 
   render() {
     return html`
+      <slot name="items" style="display:none;" @slotchange="${this._onSlotChange}"></slot>
       <div
         class="rel-menu"
         role="menu"
         tabindex="0"
         @keydown="${this.onKeydown}"
         @click="${(e: Event) => e.stopPropagation()}">
-        ${this.items.map((item, index) => this.renderMenuItem(item, index))}
+        ${this._effectiveItems.map((item, index) => this.renderMenuItem(item, index))}
       </div>
     `;
   }

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

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from "lit";
 import { customElement, state, query } from "lit/decorators.js";
 import { RelMenubarMenu } from "./rel-menubar-menu";
+import "@reliability-design/icons/rel-icon";
+import "../rel-checkbox/rel-checkbox";
 
 interface MenuState {
   menu: RelMenubarMenu;
@@ -52,7 +54,7 @@ export class RelMenubar extends LitElement {
     }
 
     .menubar-trigger:hover {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-color-bg-hover);
     }
 
     .menubar-trigger:focus-visible {
@@ -61,13 +63,13 @@ export class RelMenubar extends LitElement {
     }
 
     .menubar-trigger.active {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-color-bg-hover);
     }
 
     .menubar-panel {
       position: fixed;
       min-width: 220px;
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
       border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
       border-radius: var(--rel-borders-radius-border-radius-200);
       box-shadow: var(--rel-shadows-shadow-300);
@@ -96,7 +98,7 @@ export class RelMenubar extends LitElement {
 
     .menu-item:hover,
     .menu-item.focused {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-color-bg-hover);
     }
 
     .menu-item[data-disabled="true"] {
@@ -127,14 +129,24 @@ export class RelMenubar extends LitElement {
     .menu-checkbox.focused,
     .menu-radio-item:hover,
     .menu-radio-item.focused {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-color-bg-hover);
     }
 
-    .menu-checkbox input[type="checkbox"],
+    .menu-checkbox rel-checkbox,
     .menu-radio-item::before {
       margin: 0;
     }
 
+    :host-context([data-theme="dark"]) rel-checkbox,
+    :host-context(.dark) rel-checkbox {
+      color: var(--rel-color-text-primary);
+    }
+
+    rel-icon {
+      display: inline-flex;
+      pointer-events: none;
+    }
+
     .menu-radio-item {
       position: relative;
       padding-left: calc(var(--rel-spacing-space-md) + var(--rel-spacing-space-md));
@@ -165,16 +177,14 @@ export class RelMenubar extends LitElement {
       position: relative;
     }
 
-    .menu-submenu-trigger::after {
-      content: "▸";
+    .menu-submenu-trigger rel-icon {
       opacity: 0.6;
-      font-size: var(--rel-fontSizes-sm);
     }
 
     .submenu-panel {
       position: fixed;
       min-width: 200px;
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
       border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
       border-radius: var(--rel-borders-radius-border-radius-200);
       box-shadow: var(--rel-shadows-shadow-300);
@@ -292,8 +302,16 @@ export class RelMenubar extends LitElement {
       ) as HTMLElement;
       if (trigger) {
         this.openMenu(this.focusedTriggerIndex, trigger);
-        // Focus first item
-        setTimeout(() => this.focusMenuItem(0), 50);
+        this.updateComplete.then(() => {
+          const focusTarget = this.shadowRoot?.querySelector<HTMLElement>(
+            "[autofocus], [role='menuitem']"
+          );
+          if (focusTarget) {
+            focusTarget.focus();
+          } else {
+            this.focusMenuItem(0);
+          }
+        });
       }
     } else if (key === "ArrowDown" && this.openMenuIndex !== -1) {
       event.preventDefault();
@@ -368,11 +386,7 @@ export class RelMenubar extends LitElement {
 
   private handleItemClick(item: HTMLElement) {
     if (item.hasAttribute("data-checkbox")) {
-      const checkbox = item.querySelector('input[type="checkbox"]') as HTMLInputElement;
-      if (checkbox) {
-        checkbox.checked = !checkbox.checked;
-        this.dispatchChangeEvent("checkbox", item.textContent?.trim() || "", checkbox.checked);
-      }
+      // Toggle is handled by rel-checkbox @rel-change; nothing to do here
     } else if (item.hasAttribute("data-radio")) {
       const radioGroup = item.closest("[data-radio-group]") as HTMLElement;
       const value = item.getAttribute("data-radio") || item.getAttribute("value") || "";
@@ -398,7 +412,7 @@ export class RelMenubar extends LitElement {
     }
   }
 
-  private openSubmenu(submenuTrigger: HTMLElement) {
+  private openSubmenu(submenuTrigger: HTMLElement, renderedTrigger?: HTMLElement) {
     this.openSubmenuElement = submenuTrigger;
     this.requestUpdate();
 
@@ -407,7 +421,10 @@ export class RelMenubar extends LitElement {
         `.submenu-panel[data-submenu-id="${submenuTrigger.getAttribute("data-submenu") || ""}"]`
       ) as HTMLElement;
       if (submenuPanel) {
-        const rect = submenuTrigger.getBoundingClientRect();
+        // Use the rendered shadow-DOM element for getBoundingClientRect() —
+        // the light-DOM submenuTrigger is in a display:none slot and returns {0,0,0,0}.
+        const positionTarget = renderedTrigger ?? submenuTrigger;
+        const rect = positionTarget.getBoundingClientRect();
         submenuPanel.style.top = `${rect.top}px`;
         submenuPanel.style.left = `${rect.right + 4}px`;
       }
@@ -420,9 +437,13 @@ export class RelMenubar extends LitElement {
   }
 
   private dispatchChangeEvent(type: "checkbox" | "radio", labelOrName: string, value: string | boolean) {
+    const detail =
+      type === "checkbox"
+        ? { type, label: labelOrName, name: "", checked: value as boolean }
+        : { type, label: "", name: labelOrName, value: value as string };
     this.dispatchEvent(
       new CustomEvent("rel-menubar-change", {
-        detail: { type, [type === "checkbox" ? "label" : "name"]: labelOrName, [type === "checkbox" ? "checked" : "value"]: value },
+        detail,
         bubbles: true,
         composed: true,
       })
@@ -465,7 +486,14 @@ export class RelMenubar extends LitElement {
             this.handleItemClick(item as HTMLElement);
           }}"
         >
-          <input type="checkbox" .checked="${checkbox?.checked || false}" @click="${(e: Event) => e.stopPropagation()}" />
+          <rel-checkbox
+            .checked="${checkbox?.checked || false}"
+            @click="${(e: Event) => e.stopPropagation()}"
+            @rel-change="${(e: CustomEvent) => {
+              if (checkbox) checkbox.checked = e.detail.checked;
+              this.dispatchChangeEvent("checkbox", label.textContent?.replace(/\s+/g, " ").trim() || "", e.detail.checked);
+            }}"
+          ></rel-checkbox>
           <span>${label.textContent?.replace(/\s+/g, " ").trim()}</span>
         </label>
       `;
@@ -478,10 +506,11 @@ export class RelMenubar extends LitElement {
       return html`
         <div
           class="menu-item menu-submenu-trigger ${isFocused ? "focused" : ""}"
-          @click="${() => this.openSubmenu(item as HTMLElement)}"
-          @mouseenter="${() => this.openSubmenu(item as HTMLElement)}"
+          @click="${(e: Event) => this.openSubmenu(item as HTMLElement, e.currentTarget as HTMLElement)}"
+          @mouseenter="${(e: Event) => this.openSubmenu(item as HTMLElement, e.currentTarget as HTMLElement)}"
         >
           <span>${label}</span>
+          <rel-icon name="chevron-right"></rel-icon>
         </div>
         ${this.renderSubmenu(item as HTMLElement, submenuId)}
       `;