@reliability-design/web 1.0.3 → 1.1.1

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

@@ -0,0 +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;
+    }
+
+    :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/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,104 @@
+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;
+
+  @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>
+    `;
+  }
+}