@reliability-design/web 1.0.3 → 1.0.6

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

@@ -0,0 +1,331 @@
+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);
+      })}
+    `;
+  }
+}

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

@@ -0,0 +1,126 @@
+# rel-navbar
+
+## Overview
+A responsive navigation bar component with sticky positioning support and device-aware styling. Features three layout areas (brand, content, actions) with automatic adjustment for tablet and mobile viewports.
+
+## Usage
+```html
+<!-- Basic navbar -->
+<rel-navbar>
+  <div slot="brand">
+    <img src="logo.png" alt="Brand Logo">
+  </div>
+  
+  <nav>
+    <a href="#home">Home</a>
+    <a href="#about">About</a>
+    <a href="#contact">Contact</a>
+  </nav>
+  
+  <div slot="actions">
+    <button>Login</button>
+  </div>
+</rel-navbar>
+
+<!-- Sticky navbar -->
+<rel-navbar sticky>
+  <div slot="brand">MyApp</div>
+  <nav>
+    <a href="#features">Features</a>
+    <a href="#pricing">Pricing</a>
+  </nav>
+  <div slot="actions">
+    <button>Sign Up</button>
+  </div>
+</rel-navbar>
+
+<!-- Device-specific layout -->
+<rel-navbar device="mobile">
+  <div slot="brand">Logo</div>
+  <!-- Content slot hidden on mobile -->
+  <div slot="actions">
+    <button>☰</button>
+  </div>
+</rel-navbar>
+
+<!-- Tablet layout -->
+<rel-navbar device="tablet">
+  <div slot="brand">Brand</div>
+  <nav>
+    <a href="#link1">Link 1</a>
+    <a href="#link2">Link 2</a>
+  </nav>
+  <div slot="actions">
+    <button>Profile</button>
+  </div>
+</rel-navbar>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `sticky` (reflected) | `boolean` | `false` | If true, navbar uses `position: sticky` and stays at the top when scrolling |
+| `device` | `"desktop" \| "tablet" \| "mobile"` | `"desktop"` | Device type for responsive styling |
+
+## Events
+None.
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| `brand` | Brand/logo content on the left side |
+| (default) | Main navigation content (center area, hidden on mobile) |
+| `actions` | Action buttons/items on the right side |
+
+## CSS Parts
+| Part | Description |
+|------|-------------|
+| `container` | Main navbar container |
+| `brand` | Brand section wrapper |
+| `content` | Center content section wrapper |
+| `actions` | Actions section wrapper |
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+
+### Color Tokens
+- `--rel-colors-white` - Background color
+- `--rel-text-primary` - Text color
+- `--rel-border-default` - Bottom border color
+
+### Spacing Tokens
+- `--rel-spacing-space-lg` - Desktop horizontal padding
+- `--rel-spacing-space-md` - Tablet/mobile horizontal padding, brand-actions gap, content padding
+- `--rel-spacing-space-sm` - Action items gap, mobile padding
+
+### Custom Properties
+- `--rel-spacing-space-xl` - Content area horizontal padding
+
+## Accessibility
+- Uses `role="navigation"` on the main navbar container
+- Ensure slotted navigation links are properly structured with semantic HTML
+- Consider adding ARIA labels for brand and actions areas if content is not descriptive
+
+### Keyboard Interactions
+- Standard browser navigation (Tab to navigate through links/buttons)
+
+### Focus Behavior
+- No specific focus handling (relies on slotted content)
+
+## Notes / Edge Cases
+- **Sticky behavior**: When `sticky` is true, the navbar uses `position: sticky`, `top: 0`, and `z-index: 100`
+- **Device variants**:
+  - **desktop**: Height 64px, large padding
+  - **tablet**: Height 56px, medium padding
+  - **mobile**: Height 56px, small padding, content slot is hidden (`display: none`)
+- The component uses flexbox with `justify-content: space-between` for layout
+- The `.content` section has `flex: 1` to take available space between brand and actions
+- The brand and actions areas are `flex-shrink: 0` to prevent compression
+- The navbar has a bottom border by default
+- The `device` property must be manually set programmatically (does not auto-detect from viewport)
+- Consider hiding or collapsing the content slot on mobile and showing a menu icon in the actions slot
+- The sticky attribute is reflected in HTML when set

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

@@ -0,0 +1,91 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-navbar")
+export class RelNavbar extends LitElement {
+  @property({ type: Boolean, reflect: true })
+  sticky = false;
+
+  @property({ type: String })
+  device: "desktop" | "tablet" | "mobile" = "desktop";
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    :host([sticky]) .navbar {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .navbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: var(--rel-colors-white, #fff);
+      color: var(--rel-text-primary, #333);
+      border-bottom: 1px solid var(--rel-border-default, #ddd);
+      height: 64px;
+      padding: 0 var(--rel-spacing-space-lg);
+      box-sizing: border-box;
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-md);
+      flex-shrink: 0;
+    }
+
+    .content {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-sm);
+      flex: 1;
+      justify-content: flex-start;
+      padding: 0 var(--rel-spacing-space-xl);
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-sm);
+      flex-shrink: 0;
+    }
+
+    /* Mobile/Tablet variants */
+    :host([device="tablet"]) .navbar {
+      height: 56px;
+      padding: 0 var(--rel-spacing-space-md);
+    }
+
+    :host([device="mobile"]) .navbar {
+      height: 56px;
+      padding: 0 var(--rel-spacing-space-sm);
+    }
+
+    :host([device="mobile"]) .content {
+      display: none;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="navbar" part="container" role="navigation">
+        <div part="brand" class="brand">
+          <slot name="brand"></slot>
+        </div>
+        <div part="content" class="content">
+          <slot></slot>
+        </div>
+        <div part="actions" class="actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    `;
+  }
+}