@reliability-design/web 1.0.6 → 1.2.0

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

@@ -1,331 +1,227 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-import { RelNavMenuItem } from "./rel-nav-menu-item";
-
-type DensityType = "comfortable" | "compact";
-
-@customElement("rel-nav-menu")
-export class RelNavMenu extends LitElement {
-  @property({ type: String, reflect: true }) open = "";
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: String }) density: DensityType = "comfortable";
-
-  @state() private items: RelNavMenuItem[] = [];
-  @state() private focusedIndex = 0;
-  @state() private hoverSwitchEnabled = false;
-
-  @query(".nav-container") private container!: HTMLElement;
-
-  static styles = css`
-    :host {
-      display: block;
-      font-family: var(--rel-fontFamilies-primary);
-    }
-
-    .nav-container {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-3xs);
-      padding: var(--rel-spacing-space-2xs);
-      background: var(--rel-colors-gray-light);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
-    }
-
-    .nav-container.compact {
-      padding: var(--rel-spacing-space-3xs);
-      gap: 0;
-    }
-
-    .dropdown-panel {
-      position: fixed;
-      min-width: 320px;
-      max-width: 600px;
-      background: var(--rel-colors-white);
-      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);
-      padding: var(--rel-spacing-space-xs);
-      z-index: 1000;
-      display: none;
-    }
-
-    .dropdown-panel.open {
-      display: block;
-    }
-
-    :host([disabled]) .nav-container {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.discoverItems();
-    document.addEventListener("click", this.handleOutsideClick);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this.handleOutsideClick);
-  }
-
-  private discoverItems() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (slot) {
-      const nodes = slot.assignedElements() as RelNavMenuItem[];
-      this.items = nodes.filter((el) => el.tagName === "REL-NAV-MENU-ITEM");
-    }
-  }
-
-  private handleSlotChange() {
-    this.discoverItems();
-  }
-
-  private handleOutsideClick = (e: MouseEvent) => {
-    const path = e.composedPath() as HTMLElement[];
-    const isInside = path.some(
-      (el) =>
-        el === this ||
-        el.classList?.contains("dropdown-panel") ||
-        el.tagName === "REL-NAV-MENU-ITEM"
-    );
-    if (!isInside && this.open) {
-      this.closePanel();
-    }
-  };
-
-  private openPanel(itemId: string) {
-    if (this.disabled) return;
-
-    const wasOpen = this.open === itemId;
-    this.open = wasOpen ? "" : itemId;
-
-    if (!wasOpen) {
-      this.hoverSwitchEnabled = true;
-    }
-
-    this.dispatchEvent(
-      new CustomEvent("rel-nav-open-change", {
-        detail: { openId: this.open },
-        bubbles: true,
-        composed: true,
-      })
-    );
-
-    if (this.open) {
-      this.updateComplete.then(() => this.positionPanel(itemId));
-    }
-  }
-
-  private closePanel() {
-    if (this.open) {
-      this.open = "";
-      this.hoverSwitchEnabled = false;
-      this.dispatchEvent(
-        new CustomEvent("rel-nav-open-change", {
-          detail: { openId: "" },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    }
-  }
-
-  private positionPanel(itemId: string) {
-    const item = this.items.find((i) => i.itemId === itemId);
-    if (!item) return;
-
-    const trigger = item.shadowRoot?.querySelector(".trigger") as HTMLElement;
-    const panel = this.shadowRoot?.querySelector(
-      `.dropdown-panel[data-item-id="${itemId}"]`
-    ) as HTMLElement;
-
-    if (!trigger || !panel) return;
-
-    const triggerRect = trigger.getBoundingClientRect();
-    const panelRect = panel.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    // Default: position below trigger, start-aligned
-    let top = triggerRect.bottom + 8;
-    let left = triggerRect.left;
-
-    // Handle right overflow
-    if (left + panelRect.width > viewportWidth) {
-      left = viewportWidth - panelRect.width - 16;
-    }
-
-    // Handle left overflow
-    if (left < 0) {
-      left = 16;
-    }
-
-    // Handle bottom overflow (flip above if needed)
-    if (top + panelRect.height > viewportHeight) {
-      const spaceAbove = triggerRect.top;
-      const spaceBelow = viewportHeight - triggerRect.bottom;
-
-      if (spaceAbove > spaceBelow && spaceAbove > panelRect.height) {
-        top = triggerRect.top - panelRect.height - 8;
-      }
-    }
-
-    panel.style.top = `${top}px`;
-    panel.style.left = `${left}px`;
-  }
-
-  private handleItemClick(item: RelNavMenuItem, event: Event) {
-    if (this.disabled || item.disabled) return;
-
-    // If item has href and no content, let default behavior happen
-    if (item.href && !this.hasItemContent(item)) {
-      return;
-    }
-
-    event.preventDefault();
-
-    // If item has content, toggle panel
-    if (this.hasItemContent(item)) {
-      this.openPanel(item.itemId);
-    }
-  }
-
-  private handleItemMouseEnter(item: RelNavMenuItem) {
-    if (this.disabled || item.disabled) return;
-
-    // Hover switching: if a panel is open, hovering another trigger switches to it
-    if (this.open && this.hoverSwitchEnabled && this.hasItemContent(item)) {
-      this.openPanel(item.itemId);
-    }
-  }
-
-  private handleKeyDown(event: KeyboardEvent) {
-    if (this.disabled) return;
-
-    const { key } = event;
-    const focusableItems = this.items.filter((item) => !item.disabled);
-
-    if (key === "ArrowRight") {
-      event.preventDefault();
-      this.focusedIndex = Math.min(focusableItems.length - 1, this.focusedIndex + 1);
-      this.focusItem(this.focusedIndex);
-    } else if (key === "ArrowLeft") {
-      event.preventDefault();
-      this.focusedIndex = Math.max(0, this.focusedIndex - 1);
-      this.focusItem(this.focusedIndex);
-    } else if (key === "Enter" || key === " ") {
-      event.preventDefault();
-      const item = focusableItems[this.focusedIndex];
-      if (item && this.hasItemContent(item)) {
-        this.openPanel(item.itemId);
-      }
-    } else if (key === "Escape") {
-      event.preventDefault();
-      if (this.open) {
-        this.closePanel();
-        const openItem = this.items.find((i) => i.itemId === this.open);
-        if (openItem) {
-          const trigger = openItem.shadowRoot?.querySelector(".trigger") as HTMLElement;
-          trigger?.focus();
-        }
-      }
-    } else if (key === "ArrowDown" && this.open) {
-      event.preventDefault();
-      // Move focus into the panel
-      const panel = this.shadowRoot?.querySelector(
-        `.dropdown-panel[data-item-id="${this.open}"]`
-      ) as HTMLElement;
-      if (panel) {
-        const firstFocusable = panel.querySelector("a, button") as HTMLElement;
-        firstFocusable?.focus();
-      }
-    }
-  }
-
-  private focusItem(index: number) {
-    const focusableItems = this.items.filter((item) => !item.disabled);
-    const item = focusableItems[index];
-    if (item) {
-      const trigger = item.shadowRoot?.querySelector(".trigger") as HTMLElement;
-      trigger?.focus();
-    }
-  }
-
-  private hasItemContent(item: RelNavMenuItem): boolean {
-    const slot = item.shadowRoot?.querySelector("slot");
-    if (!slot) return false;
-    const nodes = slot.assignedNodes({ flatten: true });
-    return nodes.some(
-      (node) => node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim()
-    );
-  }
-
-  private renderDropdownPanel(item: RelNavMenuItem) {
-    if (!this.hasItemContent(item)) return null;
-
-    const isOpen = this.open === item.itemId;
-
-    return html`
-      <div
-        class="dropdown-panel ${isOpen ? "open" : ""}"
-        data-item-id="${item.itemId}"
-        id="${item.panelId}"
-        role="menu"
-        @click="${(e: Event) => e.stopPropagation()}"
-      >
-        ${this.getItemContent(item)}
-      </div>
-    `;
-  }
-
-  private getItemContent(item: RelNavMenuItem) {
-    const slot = item.shadowRoot?.querySelector("slot");
-    if (!slot) return null;
-
-    const nodes = slot.assignedNodes({ flatten: true });
-    const elements = nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE) as Element[];
-
-    // Clone and return the content
-    return elements.map((el) => {
-      const clone = el.cloneNode(true);
-      return clone;
-    });
-  }
-
-  render() {
-    return html`
-      <nav
-        class="nav-container ${this.density === "compact" ? "compact" : ""}"
-        role="navigation"
-        @keydown="${this.handleKeyDown}"
-      >
-        <slot @slotchange="${this.handleSlotChange}"></slot>
-      </nav>
-
-      ${this.items.map((item) => {
-        // Set up click and hover handlers by attaching to the trigger
-        this.updateComplete.then(() => {
-          const trigger = item.shadowRoot?.querySelector(".trigger") as HTMLElement;
-          if (trigger) {
-            // Remove old listeners if any
-            trigger.onclick = (e) => this.handleItemClick(item, e);
-            trigger.onmouseenter = () => this.handleItemMouseEnter(item);
-
-            // Update active state
-            trigger.classList.toggle("active", this.open === item.itemId);
-
-            // Update ARIA attributes
-            if (this.hasItemContent(item)) {
-              trigger.setAttribute("aria-expanded", this.open === item.itemId ? "true" : "false");
-            }
-          }
-        });
-
-        return this.renderDropdownPanel(item);
-      })}
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { RelNavMenuItem } from "./rel-nav-menu-item";
+
+type DensityType = "comfortable" | "compact";
+
+@customElement("rel-nav-menu")
+export class RelNavMenu extends LitElement {
+  @property({ type: String, reflect: true }) open = "";
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String }) density: DensityType = "comfortable";
+
+  @state() private items: RelNavMenuItem[] = [];
+  @state() private focusedIndex = 0;
+  @state() private hoverSwitchEnabled = false;
+
+  @query(".nav-container") private container!: HTMLElement;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .nav-container {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-3xs);
+      padding: var(--rel-spacing-space-2xs);
+      background: var(--rel-colors-gray-light);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+    }
+
+    .nav-container.compact {
+      padding: var(--rel-spacing-space-3xs);
+      gap: 0;
+    }
+
+    :host([disabled]) .nav-container {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  `;
+
+  // ── Lifecycle ──────────────────────────────────────────────────────────────
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.discoverItems();
+    document.addEventListener("click", this.handleOutsideClick);
+    // Delegate item interactions via composed events — no shadow DOM mutation.
+    this.addEventListener("rel-nav-item-click", this.handleNavItemClick as EventListener);
+    this.addEventListener("rel-nav-item-hover", this.handleNavItemHover as EventListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleOutsideClick);
+    this.removeEventListener("rel-nav-item-click", this.handleNavItemClick as EventListener);
+    this.removeEventListener("rel-nav-item-hover", this.handleNavItemHover as EventListener);
+  }
+
+  // ── Item discovery ─────────────────────────────────────────────────────────
+
+  private discoverItems() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (slot) {
+      const nodes = slot.assignedElements() as RelNavMenuItem[];
+      this.items = nodes.filter((el) => el.tagName === "REL-NAV-MENU-ITEM");
+    }
+  }
+
+  private handleSlotChange() {
+    this.discoverItems();
+  }
+
+  // ── Outside-click dismissal ────────────────────────────────────────────────
+
+  private handleOutsideClick = (e: MouseEvent) => {
+    const path = e.composedPath() as HTMLElement[];
+    const isInside = path.some(
+      (el) => el === this || el.tagName === "REL-NAV-MENU-ITEM"
+    );
+    if (!isInside && this.open) {
+      this.closePanel();
+    }
+  };
+
+  // ── Delegated item event handlers ──────────────────────────────────────────
+
+  private handleNavItemClick = (e: Event) => {
+    const { itemId, hasContent } = (e as CustomEvent).detail;
+    const item = this.items.find((i) => i.itemId === itemId);
+    if (!item || this.disabled || item.disabled) return;
+    // Plain link with no panel content — let the browser navigate.
+    if (item.href && !hasContent) return;
+    e.preventDefault();
+    if (hasContent) this.openPanel(itemId);
+  };
+
+  private handleNavItemHover = (e: Event) => {
+    const { itemId } = (e as CustomEvent).detail;
+    const item = this.items.find((i) => i.itemId === itemId);
+    if (!item || this.disabled || item.disabled) return;
+    if (this.open && this.hoverSwitchEnabled && item.hasContent) {
+      this.openPanel(itemId);
+    }
+  };
+
+  // ── Panel open/close ───────────────────────────────────────────────────────
+
+  private openPanel(itemId: string) {
+    if (this.disabled) return;
+
+    // Close the currently open item before switching.
+    if (this.open && this.open !== itemId) {
+      const prev = this.items.find((i) => i.itemId === this.open);
+      if (prev) prev.open = false;
+    }
+
+    const wasOpen = this.open === itemId;
+    this.open = wasOpen ? "" : itemId;
+
+    const item = this.items.find((i) => i.itemId === itemId);
+    if (item) item.open = !wasOpen;
+
+    if (!wasOpen) {
+      this.hoverSwitchEnabled = true;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent("rel-nav-open-change", {
+        detail: { openId: this.open },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private closePanel() {
+    if (this.open) {
+      const openItem = this.items.find((i) => i.itemId === this.open);
+      if (openItem) openItem.open = false;
+      this.open = "";
+      this.hoverSwitchEnabled = false;
+      this.dispatchEvent(
+        new CustomEvent("rel-nav-open-change", {
+          detail: { openId: "" },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  // ── Keyboard navigation ────────────────────────────────────────────────────
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (this.disabled) return;
+
+    const { key } = event;
+    const focusableItems = this.items.filter((item) => !item.disabled);
+
+    if (key === "ArrowRight") {
+      event.preventDefault();
+      this.focusedIndex = Math.min(focusableItems.length - 1, this.focusedIndex + 1);
+      this.focusItem(this.focusedIndex);
+    } else if (key === "ArrowLeft") {
+      event.preventDefault();
+      this.focusedIndex = Math.max(0, this.focusedIndex - 1);
+      this.focusItem(this.focusedIndex);
+    } else if (key === "Enter" || key === " ") {
+      event.preventDefault();
+      const item = focusableItems[this.focusedIndex];
+      if (item && item.hasContent) {
+        this.openPanel(item.itemId);
+      }
+    } else if (key === "Escape") {
+      event.preventDefault();
+      if (this.open) {
+        // Capture before closePanel() clears this.open.
+        const openItemId = this.open;
+        this.closePanel();
+        const openItem = this.items.find((i) => i.itemId === openItemId);
+        if (openItem) {
+          const trigger = openItem.shadowRoot?.querySelector(".trigger") as HTMLElement;
+          trigger?.focus();
+        }
+      }
+    } else if (key === "ArrowDown" && this.open) {
+      event.preventDefault();
+      // Move focus into the open panel (now inside the item's shadow root).
+      const openItem = this.items.find((i) => i.itemId === this.open);
+      if (openItem) {
+        const panel = openItem.shadowRoot?.querySelector(".panel") as HTMLElement;
+        if (panel) {
+          const firstFocusable = panel.querySelector("a, button") as HTMLElement;
+          firstFocusable?.focus();
+        }
+      }
+    }
+  }
+
+  private focusItem(index: number) {
+    const focusableItems = this.items.filter((item) => !item.disabled);
+    const item = focusableItems[index];
+    if (item) {
+      const trigger = item.shadowRoot?.querySelector(".trigger") as HTMLElement;
+      trigger?.focus();
+    }
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  render() {
+    return html`
+      <nav
+        class="nav-container ${this.density === "compact" ? "compact" : ""}"
+        role="navigation"
+        @keydown="${this.handleKeyDown}"
+      >
+        <slot @slotchange="${this.handleSlotChange}"></slot>
+      </nav>
+    `;
+  }
+}

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

@@ -1,8 +1,21 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
+/**
+ * @deprecated rel-navbar is deprecated and will be removed in a future release.
+ * Use rel-topbar and its sub-components instead:
+ * rel-topbar, rel-topbar-brand, rel-topbar-actions, rel-topbar-utilities,
+ * rel-topbar-item, rel-topbar-dropdown, rel-topbar-dropdown-item
+ */
 @customElement("rel-navbar")
 export class RelNavbar extends LitElement {
+  constructor() {
+    super();
+    console.warn(
+      "[rel-navbar] rel-navbar is deprecated. Use rel-topbar instead."
+    );
+  }
+
   @property({ type: Boolean, reflect: true })
   sticky = false;