@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,270 +0,0 @@
-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";
-
-/**
- * @deprecated rel-nav-menu has no Figma design in RelDS 2.0 and is excluded
- * from the parity contract. Use rel-menu (with the select-option/fixed/fit
- * types) or the Navbar recipe instead. It remains exported for
- * compatibility but will be removed in a future major version.
- */
-@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 {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    .nav-container {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-3xs);
-      padding: var(--rel-spacing-2xs);
-      background: var(--rel-bg-surface-elevated);
-      border-radius: var(--rel-border-radius-sm);
-      border: var(--rel-stroke-sm) solid var(--rel-border-default);
-    }
-
-    .nav-container.compact {
-      padding: var(--rel-spacing-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);
-    const path = event.composedPath();
-    const currentItem = focusableItems.find((item) => path.includes(item));
-    const inPanel = path.some(
-      (el) => el instanceof HTMLElement && el.classList.contains("panel")
-    );
-
-    // Sync the index to where focus ACTUALLY is — Tab moves focus without
-    // going through the arrow handlers, so focusedIndex went stale and
-    // Enter/arrows acted on the wrong item.
-    if (currentItem && !inPanel) {
-      this.focusedIndex = focusableItems.indexOf(currentItem);
-    }
-
-    // Keys originating from inside an open panel: let its links/buttons
-    // behave natively; only Escape is ours (close + refocus the trigger).
-    if (inPanel) {
-      if (key === "Escape" && this.open) {
-        event.preventDefault();
-        const openItemId = this.open;
-        this.closePanel();
-        const openItem = this.items.find((i) => i.itemId === openItemId);
-        const trigger = openItem?.shadowRoot?.querySelector(".trigger") as HTMLElement;
-        trigger?.focus();
-      }
-      return;
-    }
-
-    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 === "Home") {
-      event.preventDefault();
-      this.focusedIndex = 0;
-      this.focusItem(this.focusedIndex);
-    } else if (key === "End") {
-      event.preventDefault();
-      this.focusedIndex = focusableItems.length - 1;
-      this.focusItem(this.focusedIndex);
-    } else if (key === "Enter" || key === " ") {
-      const item = currentItem ?? focusableItems[this.focusedIndex];
-      if (item && item.hasContent) {
-        // Only intercept panel triggers — plain link items keep their
-        // native Enter activation (preventDefault used to suppress it).
-        event.preventDefault();
-        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

@@ -1,126 +0,0 @@
-# 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-fonts-font-family` - Font family
-
-### Color Tokens
-- `--rel-bg-surface` - Background color
-- `--rel-text-default` - Text color
-- `--rel-border-default` - Bottom border color
-
-### Spacing Tokens
-- `--rel-spacing-lg` - Desktop horizontal padding
-- `--rel-spacing-md` - Tablet/mobile horizontal padding, brand-actions gap, content padding
-- `--rel-spacing-sm` - Action items gap, mobile padding
-
-### Custom Properties
-- `--rel-spacing-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

@@ -1,105 +0,0 @@
-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 {
-      color: var(--rel-text-default);
-      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-bg-surface);
-      color: var(--rel-text-default);
-      border-bottom: 1px solid var(--rel-border-default);
-      height: 64px;
-      padding: 0 var(--rel-spacing-lg);
-      box-sizing: border-box;
-      font-family: var(--rel-fonts-font-family, sans-serif);
-    }
-
-    .brand {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-md);
-      flex-shrink: 0;
-    }
-
-    .content {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-sm);
-      flex: 1;
-      justify-content: flex-start;
-      padding: 0 var(--rel-spacing-xl);
-    }
-
-    .actions {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-sm);
-      flex-shrink: 0;
-    }
-
-    /* Mobile/Tablet variants */
-    :host([device="tablet"]) .navbar {
-      height: 56px;
-      padding: 0 var(--rel-spacing-md);
-    }
-
-    :host([device="mobile"]) .navbar {
-      height: 56px;
-      padding: 0 var(--rel-spacing-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>
-    `;
-  }
-}

package/dist/components/rel-otp/index.ts

@@ -1 +0,0 @@
-export * from "./rel-otp";