@reliability-design/web 1.0.6 → 1.2.0

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

@@ -1,143 +1,240 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-@customElement("rel-nav-menu-item")
-export class RelNavMenuItem extends LitElement {
-  @property({ type: String }) label = "";
-  @property({ type: String }) href = "";
-  @property({ type: String, attribute: "item-id" }) itemId = "";
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: String }) icon = "";
-
-  @state() private hasContent = false;
-
-  static styles = css`
-    :host {
-      display: inline-block;
-    }
-
-    .trigger {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-2xs);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
-      background: transparent;
-      border: none;
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      cursor: pointer;
-      transition: all 0.15s ease;
-      text-decoration: none;
-      outline: none;
-      user-select: none;
-    }
-
-    .trigger:hover:not(:disabled) {
-      background: var(--rel-surface-secondary, #fafafa);
-    }
-
-    .trigger:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
-      outline-offset: 2px;
-    }
-
-    .trigger.active {
-      background: var(--rel-surface-secondary, #fafafa);
-    }
-
-    .trigger:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) .trigger {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .content {
-      display: none;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    // Generate item-id from label if not provided
-    if (!this.itemId && this.label) {
-      this.itemId = this.label.toLowerCase().replace(/\s+/g, "-");
-    }
-  }
-
-  firstUpdated() {
-    // Check if there's any slotted content
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (slot) {
-      const nodes = slot.assignedNodes({ flatten: true });
-      this.hasContent = nodes.some(
-        (node) => node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim()
-      );
-    }
-  }
-
-  private handleSlotChange() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (slot) {
-      const nodes = slot.assignedNodes({ flatten: true });
-      this.hasContent = nodes.some(
-        (node) => node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim()
-      );
-    }
-  }
-
-  get triggerId() {
-    return `nav-trigger-${this.itemId}`;
-  }
-
-  get panelId() {
-    return `nav-panel-${this.itemId}`;
-  }
-
-  render() {
-    const isLink = !!this.href && !this.hasContent;
-    const tagName = isLink ? "a" : "button";
-    const attrs = isLink
-      ? { href: this.href }
-      : {
-          type: "button",
-          "aria-haspopup": this.hasContent ? "menu" : undefined,
-          "aria-controls": this.hasContent ? this.panelId : undefined,
-        };
-
-    return html`
-      ${isLink
-        ? html`
-            <a
-              class="trigger"
-              href="${this.href}"
-              id="${this.triggerId}"
-              ?disabled="${this.disabled}"
-            >
-              ${this.label}
-            </a>
-          `
-        : html`
-            <button
-              class="trigger"
-              id="${this.triggerId}"
-              type="button"
-              ?disabled="${this.disabled}"
-              aria-haspopup="${this.hasContent ? "menu" : "false"}"
-              aria-controls="${this.hasContent ? this.panelId : ""}"
-            >
-              ${this.label}
-            </button>
-          `}
-      <div class="content">
-        <slot @slotchange="${this.handleSlotChange}"></slot>
-      </div>
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-nav-menu-item")
+export class RelNavMenuItem extends LitElement {
+  @property({ type: String }) label = "";
+  @property({ type: String }) href = "";
+  @property({ type: String, attribute: "item-id" }) itemId = "";
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String }) icon = "";
+
+  /** Promoted from @state so rel-nav-menu can read it as a property. */
+  @property({ type: Boolean, reflect: true }) hasContent = false;
+
+  /** Set by rel-nav-menu to open/close this item's panel. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+      background: transparent;
+      border: none;
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      text-decoration: none;
+      outline: none;
+      user-select: none;
+    }
+
+    .trigger:hover:not(:disabled) {
+      background: var(--rel-surface-secondary, #fafafa);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    /* Active state driven by :host([open]) — no external class manipulation needed */
+    :host([open]) .trigger,
+    .trigger.active {
+      background: var(--rel-surface-secondary, #fafafa);
+    }
+
+    .trigger:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) .trigger {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Panel lives inside the item's own shadow DOM */
+    .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;
+    }
+
+    .panel.open {
+      display: block;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.itemId && this.label) {
+      this.itemId = this.label.toLowerCase().replace(/\s+/g, "-");
+    }
+  }
+
+  firstUpdated() {
+    this.updateHasContent();
+  }
+
+  updated(changed: Map<string, any>) {
+    if (changed.has("open") && this.open) {
+      // Wait for paint so the panel has layout dimensions before positioning.
+      this.updateComplete.then(() => this.positionPanel());
+    }
+  }
+
+  // ── Content detection ──────────────────────────────────────────────────────
+
+  private updateHasContent() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (slot) {
+      const nodes = slot.assignedNodes({ flatten: true });
+      this.hasContent = nodes.some(
+        (node) => node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim()
+      );
+    }
+  }
+
+  private handleSlotChange() {
+    this.updateHasContent();
+  }
+
+  // ── Panel positioning (moved from rel-nav-menu) ────────────────────────────
+
+  private positionPanel() {
+    const trigger = this.shadowRoot?.querySelector(".trigger") as HTMLElement;
+    const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement;
+    if (!trigger || !panel) return;
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    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 more space
+    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`;
+  }
+
+  // ── Events dispatched upward — rel-nav-menu listens via connectedCallback ──
+
+  private handleTriggerClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("rel-nav-item-click", {
+        detail: { itemId: this.itemId, hasContent: this.hasContent },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleTriggerMouseEnter() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("rel-nav-item-hover", {
+        detail: { itemId: this.itemId },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  // ── ID helpers ─────────────────────────────────────────────────────────────
+
+  get triggerId() {
+    return `nav-trigger-${this.itemId}`;
+  }
+
+  get panelId() {
+    return `nav-panel-${this.itemId}`;
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  render() {
+    const isLink = !!this.href && !this.hasContent;
+
+    return html`
+      ${isLink
+        ? html`
+            <a
+              class="trigger"
+              href="${this.href}"
+              id="${this.triggerId}"
+              ?disabled="${this.disabled}"
+              @click="${this.handleTriggerClick}"
+              @mouseenter="${this.handleTriggerMouseEnter}"
+            >
+              ${this.label}
+            </a>
+          `
+        : html`
+            <button
+              class="trigger"
+              id="${this.triggerId}"
+              type="button"
+              ?disabled="${this.disabled}"
+              aria-haspopup="${this.hasContent ? "menu" : "false"}"
+              aria-controls="${this.hasContent ? this.panelId : ""}"
+              aria-expanded="${this.open ? "true" : "false"}"
+              @click="${this.handleTriggerClick}"
+              @mouseenter="${this.handleTriggerMouseEnter}"
+            >
+              ${this.label}
+            </button>
+          `}
+
+      <!--
+        Panel rendered inside this shadow root.
+        Slot projects the consumer's light-DOM children directly — no cloning.
+        rel-nav-menu sets item.open = true/false to show/hide.
+      -->
+      <div
+        class="panel ${this.open ? "open" : ""}"
+        id="${this.panelId}"
+        role="menu"
+        @click="${(e: Event) => e.stopPropagation()}"
+      >
+        <slot @slotchange="${this.handleSlotChange}"></slot>
+      </div>
+    `;
+  }
+}