@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,465 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-import { getDeepActiveElement, getFocusableElements, trapTabKey } from "../../utils/focus.js";
-
-export type ModalSide = "top" | "bottom" | "center";
-
-@customElement("rel-modal")
-export class RelModal extends LitElement {
-  @property({ type: Boolean, reflect: true }) open = false;
-  @property({ type: String }) side: ModalSide = "bottom";
-  @property({ type: String }) title = "";
-  @property({ type: String }) description = "";
-  @property({ type: Boolean }) dismissible = true;
-  @property({ type: Boolean }) modal = true;
-
-  /**
-   * Figma "Breakpoint" axis. responsive (default) collapses to a full-width
-   * bottom sheet below 480px; web keeps the fixed desktop panel at every size.
-   */
-  @property({ type: String, reflect: true })
-  breakpoint: "responsive" | "web" = "responsive";
-
-  @query(".overlay") private overlayElement!: HTMLElement;
-  @query(".panel") private panelElement!: HTMLElement;
-
-  private previousFocus: HTMLElement | null = null;
-  private originalBodyOverflow = "";
-  private originalBodyPaddingRight = "";
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      --modal-transition-duration: 0.3s;
-      --modal-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
-    }
-
-    .modal-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 1000;
-      pointer-events: none;
-      /* pointer-events:none only blocks the mouse — the closed modal's
-         close button and slotted content would otherwise stay in the Tab
-         order and swallow keyboard focus into invisible UI. visibility
-         also removes them from the tab order; the transition delays the
-         flip to hidden until the close animation has played. */
-      visibility: hidden;
-      transition: visibility 0s linear var(--modal-transition-duration);
-    }
-
-    .modal-container.open {
-      pointer-events: auto;
-      visibility: visible;
-      transition-delay: 0s;
-    }
-
-    .overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: var(--rel-overlay-scrim);
-      opacity: 0;
-      transition: opacity var(--modal-transition-duration) var(--modal-transition-timing);
-    }
-
-    .modal-container.open .overlay {
-      opacity: 1;
-    }
-
-    .overlay.no-modal {
-      display: none !important;
-    }
-
-    .panel {
-      position: absolute;
-      background: var(--rel-bg-surface);
-      box-shadow: var(--rel-shadows-shadow-500);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      outline: none;
-      font-family: var(--rel-fonts-font-family);
-      width: clamp(360px, 49vw, 708px);
-      left: 50%;
-      transition: transform var(--modal-transition-duration) var(--modal-transition-timing),
-        opacity var(--modal-transition-duration) var(--modal-transition-timing);
-    }
-
-    .panel[data-side="bottom"] {
-      bottom: 48px;
-      left: 50%;
-      width: clamp(360px, 49vw, 708px);
-      max-height: calc(100vh - 96px);
-      border-radius: var(--rel-border-radius-sm);
-      transform: translateX(-50%) translateY(calc(100% + 48px));
-    }
-
-    .modal-container.open .panel[data-side="bottom"] {
-      transform: translateX(-50%) translateY(0);
-    }
-
-    .panel[data-side="top"] {
-      top: 48px;
-      left: 50%;
-      width: clamp(360px, 49vw, 708px);
-      max-height: calc(100vh - 96px);
-      border-radius: var(--rel-border-radius-sm);
-      transform: translateX(-50%) translateY(calc(-100% - 48px));
-    }
-
-    .modal-container.open .panel[data-side="top"] {
-      transform: translateX(-50%) translateY(0);
-    }
-
-    .panel[data-side="center"] {
-      top: 50%;
-      left: 50%;
-      width: clamp(360px, 49vw, 708px);
-      max-height: calc(100vh - 96px);
-      border-radius: var(--rel-border-radius-sm);
-      transform: translate(-50%, -50%) scale(0.96);
-      opacity: 0;
-    }
-
-    .modal-container.open .panel[data-side="center"] {
-      transform: translate(-50%, -50%) scale(1);
-      opacity: 1;
-    }
-
-    /* Figma Breakpoint=Responsive: below 480px every side collapses to a
-       full-width bottom sheet. Breakpoint=Web keeps the desktop panel. */
-    @media (max-width: 480px) {
-      :host([breakpoint="responsive"]) .panel,
-      :host([breakpoint="responsive"]) .panel[data-side="top"],
-      :host([breakpoint="responsive"]) .panel[data-side="center"],
-      :host([breakpoint="responsive"]) .panel[data-side="bottom"] {
-        width: 100%;
-        left: 0;
-        right: 0;
-        top: auto;
-        bottom: 0;
-        max-height: 90vh;
-        border-radius: var(--rel-border-radius-md) var(--rel-border-radius-md) 0 0;
-        opacity: 1;
-        transform: translateY(100%);
-      }
-
-      :host([breakpoint="responsive"]) .modal-container.open .panel,
-      :host([breakpoint="responsive"]) .modal-container.open .panel[data-side="top"],
-      :host([breakpoint="responsive"]) .modal-container.open .panel[data-side="center"],
-      :host([breakpoint="responsive"]) .modal-container.open .panel[data-side="bottom"] {
-        transform: translateY(0);
-      }
-    }
-
-    .header {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      padding: var(--rel-spacing-md) var(--rel-spacing-lg);
-      border-bottom: var(--rel-stroke-sm) solid var(--rel-border-default);
-      flex-shrink: 0;
-    }
-
-    .header.empty {
-      display: none;
-    }
-
-    .header-text {
-      gap: var(--rel-spacing-2xs);
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-2xs);
-    }
-
-    .title {
-      color: var(--rel-text-label);
-      margin: 0;
-
-      font-family: var(--rel-headings-lg-font-family);
-
-      font-weight: var(--rel-headings-lg-font-weight);
-
-      font-size: var(--rel-headings-lg-font-size);
-
-      line-height: var(--rel-headings-lg-line-height);
-
-      letter-spacing: var(--rel-headings-lg-letter-spacing);
-
-    }
-
-    .description {
-      color: var(--rel-text-body);
-      margin: 0;
-
-      font-family: var(--rel-body-lg-regular-font-family);
-
-      font-weight: var(--rel-body-lg-regular-font-weight);
-
-      font-size: var(--rel-body-lg-regular-font-size);
-
-      line-height: var(--rel-body-lg-regular-line-height);
-
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-
-    }
-
-    /* Emphasised inline text in slotted content (Figma body-lg-medium) */
-    .content ::slotted(strong),
-    .content ::slotted(b) {
-      font-weight: var(--rel-body-lg-medium-font-weight);
-    }
-
-    .close-button {
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      padding: var(--rel-spacing-2xs);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      align-self: flex-start;
-      flex-shrink: 0;
-      border-radius: var(--rel-border-radius-xs);
-      color: var(--rel-text-default);
-      transition: background 0.15s ease;
-    }
-
-    .close-button:hover {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    .close-button:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .content {
-      flex: 1;
-      overflow-y: auto;
-      padding: var(--rel-spacing-xl);
-    }
-
-    .footer {
-      display: none;
-    }
-
-    :host([has-footer]) .footer {
-      display: flex;
-      flex-shrink: 0;
-      padding: var(--rel-spacing-md) var(--rel-spacing-lg);
-      border-top: var(--rel-stroke-sm) solid var(--rel-border-default);
-      justify-content: flex-end;
-      gap: var(--rel-spacing-xs);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .overlay,
-      .panel {
-        transition: none;
-      }
-
-      .modal-container .panel {
-        transform: none;
-      }
-
-      .modal-container:not(.open) .panel {
-        display: none;
-      }
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.open) {
-      this.lockScroll();
-    }
-    this.updateComplete.then(() => {
-      const footerSlot = this.shadowRoot?.querySelector(
-        'slot[name="footer"]'
-      ) as HTMLSlotElement | null;
-      if (footerSlot) {
-        const sync = () => {
-          const hasContent = footerSlot.assignedElements({ flatten: true }).length > 0;
-          this.toggleAttribute('has-footer', hasContent);
-        };
-        footerSlot.addEventListener('slotchange', sync);
-        sync();
-      }
-    });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unlockScroll();
-    document.removeEventListener("keydown", this.handleKeydown);
-  }
-
-  protected willUpdate() {
-    // `title` doubles as HTML's global tooltip attribute: leaving it on the
-    // host shows a native tooltip anywhere over the modal, including the
-    // full-viewport backdrop. Sync it into the property, then strip it.
-    if (this.hasAttribute("title")) {
-      const value = this.getAttribute("title") ?? "";
-      this.removeAttribute("title");
-      this.title = value;
-    }
-  }
-
-  updated(changed: Map<string, unknown>) {
-    if (changed.has("open")) {
-      if (this.open) {
-        this.handleOpen();
-      } else {
-        this.handleClose();
-      }
-    }
-  }
-
-  private handleOpen() {
-    // Deep-resolved — document.activeElement retargets to shadow hosts whose
-    // .focus() may be a no-op, silently dropping the restore.
-    this.previousFocus = getDeepActiveElement();
-    this.lockScroll();
-    document.addEventListener("keydown", this.handleKeydown);
-
-    // Move focus into the dialog — before this, a keyboard user had to Tab
-    // through the entire page behind the overlay to reach the sheet.
-    if (this.modal) {
-      this.updateComplete.then(() => {
-        const panel = this.panelElement;
-        if (!panel) return;
-        const focusTarget = getFocusableElements(panel)[0];
-        if (focusTarget) focusTarget.focus();
-        else panel.focus();
-      });
-    }
-    this.dispatchEvent(
-      new CustomEvent("rel-open-change", {
-        detail: true,
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private handleClose() {
-    this.unlockScroll();
-    document.removeEventListener("keydown", this.handleKeydown);
-    if (this.previousFocus?.focus) {
-      this.updateComplete.then(() => {
-        this.previousFocus?.focus();
-        this.previousFocus = null;
-      });
-    }
-    this.dispatchEvent(
-      new CustomEvent("rel-open-change", {
-        detail: false,
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private lockScroll() {
-    if (typeof document === "undefined") return;
-    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-    this.originalBodyOverflow = document.body.style.overflow;
-    this.originalBodyPaddingRight = document.body.style.paddingRight;
-    document.body.style.overflow = "hidden";
-    if (scrollbarWidth > 0) {
-      document.body.style.paddingRight = `${scrollbarWidth}px`;
-    }
-  }
-
-  private unlockScroll() {
-    if (typeof document === "undefined") return;
-    document.body.style.overflow = this.originalBodyOverflow;
-    document.body.style.paddingRight = this.originalBodyPaddingRight;
-  }
-
-  private handleKeydown = (e: KeyboardEvent) => {
-    if (!this.open) return;
-    if (e.key === "Escape" && this.dismissible) {
-      e.preventDefault();
-      this.open = false;
-      return;
-    }
-    // aria-modal promised containment; actually deliver it.
-    if (e.key === "Tab" && this.modal && this.panelElement) {
-      trapTabKey(e, this.panelElement);
-    }
-  };
-
-  private handleOverlayClick = (e: MouseEvent) => {
-    if (!this.dismissible) return;
-    if (e.target === this.overlayElement) {
-      this.open = false;
-    }
-  };
-
-  private handleCloseButtonClick() {
-    this.open = false;
-  }
-
-  render() {
-    const hasTitle = !!this.title;
-    const hasDescription = !!this.description;
-    const showHeader = hasTitle || hasDescription || this.dismissible;
-
-    return html`
-      <div class="modal-container ${this.open ? "open" : ""}">
-        <div
-          part="overlay"
-          class="overlay ${!this.modal ? 'no-modal' : ''}"
-          @click="${this.handleOverlayClick}"></div>
-
-        <div
-          part="panel"
-          class="panel"
-          data-side="${this.side}"
-          role="${this.modal ? "dialog" : "region"}"
-          aria-modal="${this.modal}"
-          tabindex="-1">
-
-          <div part="header" class="header ${!showHeader ? "empty" : ""}">
-            <div class="header-text">
-              ${hasTitle ? html`<h2 class="title">${this.title}</h2>` : ""}
-              ${hasDescription ? html`<p class="description">${this.description}</p>` : ""}
-            </div>
-            ${this.dismissible
-              ? html`<button
-                  part="close-button"
-                  class="close-button"
-                  @click="${this.handleCloseButtonClick}"
-                  aria-label="Close">
-                  <rel-icon name="close" size="sm"></rel-icon>
-                </button>`
-              : ""}
-          </div>
-
-          <div part="content" class="content">
-            <slot></slot>
-          </div>
-
-          <div part="footer" class="footer">
-            <slot name="footer"></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-modal": RelModal;
-  }
-}

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

@@ -1,209 +0,0 @@
-# rel-sidebar
-
-## Overview
-A sophisticated sidebar navigation system with multiple components: `rel-sidebar-provider` (state manager), `rel-sidebar` (visual container), `rel-sidebar-trigger` (toggle button), and layout helpers (`rel-sidebar-header`, `rel-sidebar-footer`, `rel-sidebar-content`, `rel-sidebar-rail`). Supports three variants (sidebar, floating, inset), two collapsible modes (offcanvas, icon), mobile detection, localStorage persistence, keyboard shortcuts, and focus trapping.
-
-## Components
-This sidebar system consists of multiple components that work together:
-- **`<rel-sidebar-provider>`**: Root wrapper that manages state
-- **`<rel-sidebar>`**: Visual sidebar container
-- **`<rel-sidebar-trigger>`**: Toggle button
-- **`<rel-sidebar-header>`**: Header layout helper
-- **`<rel-sidebar-footer>`**: Footer layout helper
-- **`<rel-sidebar-content>`**: Main content wrapper
-- **`<rel-sidebar-rail>`**: Collapsed (icon-only) state content
-
-## Usage
-```html
-<!-- Basic sidebar with provider -->
-<rel-sidebar-provider>
-  <rel-sidebar>
-    <rel-sidebar-header>
-      <h2>App Name</h2>
-      <rel-sidebar-trigger>
-        <button>☰</button>
-      </rel-sidebar-trigger>
-    </rel-sidebar-header>
-    
-    <rel-sidebar-content>
-      <nav>
-        <a href="#home">Home</a>
-        <a href="#about">About</a>
-        <a href="#contact">Contact</a>
-      </nav>
-    </rel-sidebar-content>
-    
-    <rel-sidebar-footer>
-      <p>© 2024 Company</p>
-    </rel-sidebar-footer>
-  </rel-sidebar>
-  
-  <main>
-    <h1>Main Content</h1>
-    <p>Page content goes here</p>
-  </main>
-</rel-sidebar-provider>
-
-<!-- Controlled open state -->
-<rel-sidebar-provider open="true">
-  <rel-sidebar>
-    <nav>Navigation items</nav>
-  </rel-sidebar>
-  <main>Content</main>
-</rel-sidebar-provider>
-
-<!-- Right-side floating variant -->
-<rel-sidebar-provider side="right" variant="floating" width="lg">
-  <rel-sidebar>
-    <h3>Right Sidebar</h3>
-  </rel-sidebar>
-  <main>Content</main>
-</rel-sidebar-provider>
-
-<!-- Offcanvas mode (overlay on all screen sizes) -->
-<rel-sidebar-provider collapsible="offcanvas">
-  <rel-sidebar>
-    <nav>Menu</nav>
-  </rel-sidebar>
-  <main>Content</main>
-</rel-sidebar-provider>
-
-<!-- Listen for state changes -->
-<rel-sidebar-provider id="sidebarProvider">
-  <rel-sidebar>Nav</rel-sidebar>
-  <main>Content</main>
-</rel-sidebar-provider>
-<script>
-  const provider = document.getElementById('sidebarProvider');
-  provider.addEventListener('rel-sidebar-change', (e) => {
-    console.log('Open:', e.detail.open);
-    console.log('Collapsed:', e.detail.collapsed);
-    console.log('Reason:', e.detail.reason);
-  });
-</script>
-```
-
-## API
-
-### rel-sidebar-provider Properties
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `open` (reflected) | `boolean?` | `undefined` | Controlled open state (undefined = uncontrolled) |
-| `defaultopen` | `boolean` | `true` | Default open state (uncontrolled mode) |
-| `collapsed` (reflected) | `boolean?` | `undefined` | Controlled collapsed state |
-| `defaultcollapsed` | `boolean` | `false` | Default collapsed state (uncontrolled mode) |
-| `variant` | `"sidebar" \| "floating" \| "inset"` | `"sidebar"` | Visual variant |
-| `side` | `"left" \| "right"` | `"left"` | Which side the sidebar appears on |
-| `collapsible` | `"offcanvas" \| "icon" \| "none"` | `"icon"` | Collapsible behavior mode |
-| `width` | `"sm" \| "md" \| "lg"` | `"md"` | Sidebar width (240/280/320px) |
-| `persist-key` | `string` | `"rel-sidebar"` | localStorage key for persistence |
-| `keyboard-shortcut` | `boolean` | `true` | Enable Ctrl/Cmd+B shortcut |
-| `disable-persist` | `boolean` | `false` | Disable localStorage persistence |
-| `disable-overlay-close` | `boolean` | `false` | Prevent closing on overlay click |
-
-### rel-sidebar Properties
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `inset` | `boolean` | `false` | Use inset variant styling (overrides provider variant) |
-
-## Events
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `rel-sidebar-change` | `{ open, collapsed, reason }` | Fired when sidebar state changes |
-| `rel-sidebar-state` | `{ isOpen, isCollapsed, isMobile, side, variant, collapsible, width }` | Internal state sync event |
-
-### Change Reasons
-- `"trigger"`: Toggled via trigger button
-- `"rail"`: Toggled collapsed state
-- `"overlay"`: Closed by clicking overlay
-- `"escape"`: Closed via Escape key
-- `"shortcut"`: Toggled via keyboard shortcut (Ctrl/Cmd+B)
-- `"api"`: Changed programmatically via `setOpen()` or `setCollapsed()`
-
-## Methods
-
-### Provider Methods
-```typescript
-provider.setOpen(nextOpen: boolean, reason?: string): void
-provider.setCollapsed(nextCollapsed: boolean, reason?: string): void
-```
-
-##Slots
-| Slot | Component | Description |
-|------|-----------|-------------|
-| (default) | All | Main content area |
-
-## CSS Parts
-None exposed.
-
-## Tokens / CSS Variables
-
-### Width Tokens (defined on `<rel-sidebar>`)
-- `--sidebar-width-sm`: `240px` (small width)
-- `--sidebar-width-md`: `280px` (medium width)
-- `--sidebar-width-lg`: `320px` (large width)
-- `--sidebar-width-collapsed`: `56px` (collapsed/icon-only width)
-
-### Transition Tokens
-- `--sidebar-transition-duration`: `0.2s`
-- `--sidebar-transition-timing`: `cubic-bezier(0.4, 0, 0.2, 1)`
-
-### Color Tokens
-- `--rel-bg-surface-elevated` - Sidebar background (`#fafafa`)
-- `--rel-text-default` - Text color
-- `--rel-border-default` - Border color
-- `--rel-overlay-scrim` - Overlay background (`rgba(0, 0, 0, 0.5)`)
-
-### Shadow Tokens (floating variant)
-- `--rel-shadows-shadow-400` - Floating variant shadow
-
-### Other Tokens
-- `--rel-border-radius-md` - Floating variant border radius
-- `--rel-spacing-md` - Floating variant inset, header/footer padding
-- `--rel-spacing-2xs` - Used in various layouts
-
-## Accessibility
-- Sidebar uses `role="navigation"`
-- Focus trap active in offcanvas mode
-- Escape key closes offcanvas
-- Keyboard shortcut (Ctrl/Cmd+B) for toggling
-- Restores focus to trigger when closing
-
-### Keyboard Interactions
-| Key | Action |
-|-----|--------|
-| `Ctrl/Cmd + B` | Toggle sidebar (open/collapsed depending on mode) |
-| `Escape` | Close sidebar (offcanvas mode only) |
-| `Tab` | Focus trap within sidebar when open in offcanvas mode |
-
-### Focus Behavior
-- In offcanvas mode, focus moves to first focusable element when opened
-- Focus is trapped within sidebar in offcanvas mode
-- Focus restores to trigger button when closed
-
-## Notes / Edge Cases
-- **Mobile detection**: Automatically detects `max-width: 768px` breakpoint and switches to offcanvas mode
-- **Collapsible modes**:
-  - **offcanvas**: Sidebar slides in/out with overlay (like a drawer)
-  - **icon**: Sidebar collapses to icon-only width (56px)
-  - **none**: Sidebar cannot be collapsed (always full width)
-
-- **Variants**:
-  - **sidebar**: Fixed position, full height
-  - **floating**: Inset with margins, rounded corners, shadow
-  - **inset**: Relative position, no shadow
-
-- **State persistence**: By default, sidebar state is saved to localStorage and restored on reload (disable with `disable-persist`)
-- **Controlled vs uncontrolled**: If `open` or `collapsed` props are set, the component is controlled and won't manage its own state
-- **Mobile behavior**: On mobile, sidebar starts closed and ignores persisted state
-- **Scroll locking**: In offcanvas mode, body scroll is locked when sidebar is open
-- **Transitions disabled**: When `prefers-reduced-motion: reduce`
-- The provider uses `display: contents` to avoid affecting layout
-- Sidebar is overlaid with `z-index: 1000` in offcanvas mode
-- Overlay is `z-index: 999`
-
-### Width Values
-- **sm**: 240px
-- **md**: 280px
-- **lg**: 320px
-- **collapsed**: 56px