@reliability-design/web 1.0.3 → 1.1.1

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

@@ -0,0 +1,684 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+
+export type SheetSide = "top" | "right" | "bottom" | "left";
+export type SheetSize = "sm" | "md" | "lg" | "xl";
+export type SheetCloseReason = "trigger" | "close" | "overlay" | "escape" | "api";
+
+// ============================================================================
+// rel-sheet (Controller/Root Component)
+// ============================================================================
+@customElement("rel-sheet")
+export class RelSheet extends LitElement {
+  @property({ type: Boolean, reflect: true }) open?: boolean;
+  @property({ type: Boolean, attribute: "defaultopen" }) defaultOpen = false;
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: Boolean }) modal = true;
+
+  @state() private internalOpen = false;
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.internalOpen = this.isControlled() ? !!this.open : this.defaultOpen;
+  }
+
+  updated(changed: Map<string, unknown>) {
+    if (changed.has("open") && this.isControlled()) {
+      this.internalOpen = !!this.open;
+    }
+  }
+
+  private isControlled() {
+    return this.open !== undefined;
+  }
+
+  get activeOpen() {
+    return this.isControlled() ? !!this.open : this.internalOpen;
+  }
+
+  setOpen(next: boolean, reason: SheetCloseReason = "api") {
+    if (!this.isControlled()) {
+      this.internalOpen = next;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent("rel-open-change", {
+        detail: { open: next, reason },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+// ============================================================================
+// rel-sheet-trigger (Opens Sheet)
+// ============================================================================
+@customElement("rel-sheet-trigger")
+export class RelSheetTrigger extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    button {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      font: inherit;
+      cursor: pointer;
+      display: contents;
+    }
+  `;
+
+  private getSheet(): RelSheet | null {
+    let parent = this.parentElement;
+    while (parent) {
+      if (parent instanceof RelSheet) {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+    return null;
+  }
+
+  private handleClick = () => {
+    const sheet = this.getSheet();
+    if (sheet && !sheet.disabled) {
+      sheet.setOpen(!sheet.activeOpen, "trigger");
+    }
+  };
+
+  render() {
+    return html`
+      <button @click="${this.handleClick}" type="button">
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+// ============================================================================
+// rel-sheet-content (Panel)
+// ============================================================================
+@customElement("rel-sheet-content")
+export class RelSheetContent extends LitElement {
+  @property({ type: String }) side: SheetSide = "right";
+  @property({ type: String }) size: SheetSize = "md";
+  @property({ type: Boolean, attribute: "hide-overlay" }) hideOverlay = false;
+  @property({ type: Boolean, attribute: "close-on-overlay" }) closeOnOverlay = true;
+  @property({ type: Boolean, attribute: "show-close" }) showClose = true;
+
+  @query(".panel") private panelElement!: HTMLElement;
+  @query(".overlay") private overlayElement!: HTMLElement;
+
+  private sheet: RelSheet | null = null;
+  private previousFocus: HTMLElement | null = null;
+  private originalBodyOverflow = "";
+  private originalBodyPaddingRight = "";
+  private isOpen = false;
+
+  static styles = css`
+    :host {
+      --sheet-transition-duration: 0.3s;
+      --sheet-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
+      --sheet-size-sm: 320px;
+      --sheet-size-md: 420px;
+      --sheet-size-lg: 540px;
+      --sheet-size-xl: 640px;
+    }
+
+    .sheet-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1000;
+      pointer-events: none;
+    }
+
+    .sheet-container.open {
+      pointer-events: auto;
+    }
+
+    /* Overlay */
+    .overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--rel-overlay-scrim);
+      opacity: 0;
+      transition: opacity var(--sheet-transition-duration) var(--sheet-transition-timing);
+    }
+
+    .sheet-container.open .overlay {
+      opacity: var(--rel-sheet-scrim-opacity, 1);
+    }
+
+    .overlay.hidden {
+      display: none;
+    }
+
+    /* Panel base */
+    .panel {
+      position: absolute;
+      background: var(--rel-colors-white);
+      box-shadow: var(--rel-shadows-shadow-500);
+      display: flex;
+      flex-direction: column;
+      outline: none;
+      font-family: var(--rel-fontFamilies-primary);
+      transition: transform var(--sheet-transition-duration) var(--sheet-transition-timing);
+      overflow: hidden;
+    }
+
+    /* Right side (default) */
+    .panel[data-side="right"] {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: var(--sheet-width);
+      max-width: 90vw;
+      border-top-left-radius: var(--rel-borders-radius-border-radius-300);
+      border-bottom-left-radius: var(--rel-borders-radius-border-radius-300);
+      transform: translateX(100%);
+    }
+
+    .sheet-container.open .panel[data-side="right"] {
+      transform: translateX(0);
+    }
+
+    /* Left side */
+    .panel[data-side="left"] {
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: var(--sheet-width);
+      max-width: 90vw;
+      border-top-right-radius: var(--rel-borders-radius-border-radius-300);
+      border-bottom-right-radius: var(--rel-borders-radius-border-radius-300);
+      transform: translateX(-100%);
+    }
+
+    .sheet-container.open .panel[data-side="left"] {
+      transform: translateX(0);
+    }
+
+    /* Top side */
+    .panel[data-side="top"] {
+      top: 0;
+      left: 0;
+      right: 0;
+      height: var(--sheet-width);
+      max-height: 80vh;
+      border-bottom-left-radius: var(--rel-borders-radius-border-radius-300);
+      border-bottom-right-radius: var(--rel-borders-radius-border-radius-300);
+      transform: translateY(-100%);
+    }
+
+    .sheet-container.open .panel[data-side="top"] {
+      transform: translateY(0);
+    }
+
+    /* Bottom side */
+    .panel[data-side="bottom"] {
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: var(--sheet-width);
+      max-height: 80vh;
+      border-top-left-radius: var(--rel-borders-radius-border-radius-300);
+      border-top-right-radius: var(--rel-borders-radius-border-radius-300);
+      transform: translateY(100%);
+    }
+
+    .sheet-container.open .panel[data-side="bottom"] {
+      transform: translateY(0);
+    }
+
+    /* Panel content wrapper */
+    .panel-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--rel-spacing-space-lg);
+    }
+
+    /* Close button */
+    .close-button {
+      position: absolute;
+      top: var(--rel-spacing-space-md);
+      right: var(--rel-spacing-space-md);
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: var(--rel-spacing-space-xs);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      color: var(--rel-colors-gray-heading);
+      font-size: 20px;
+      line-height: 1;
+      z-index: 1;
+      transition: background 0.2s;
+    }
+
+    .close-button:hover {
+      background: var(--rel-colors-gray-surface);
+    }
+
+    .close-button:focus-visible {
+      outline: 2px solid var(--rel-colors-primary-500);
+      outline-offset: 2px;
+    }
+
+    /* Left side close button positioning */
+    .panel[data-side="left"] .close-button {
+      right: auto;
+      left: var(--rel-spacing-space-md);
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      .overlay,
+      .panel {
+        transition: none;
+      }
+
+      .sheet-container .panel {
+        transform: none;
+      }
+
+      .sheet-container:not(.open) .panel {
+        display: none;
+      }
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.findSheet();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanup();
+  }
+
+  private findSheet() {
+    let parent = this.parentElement;
+    while (parent) {
+      if (parent instanceof RelSheet) {
+        this.sheet = parent;
+        break;
+      }
+      parent = parent.parentElement;
+    }
+
+    if (this.sheet) {
+      this.sheet.addEventListener("rel-open-change", this.handleSheetOpenChange);
+    }
+  }
+
+  private handleSheetOpenChange = (e: Event) => {
+    const customEvent = e as CustomEvent<{ open: boolean }>;
+    const nextOpen = customEvent.detail.open;
+
+    if (nextOpen !== this.isOpen) {
+      this.isOpen = nextOpen;
+      if (nextOpen) {
+        this.handleOpen();
+      } else {
+        this.handleClose();
+      }
+      this.requestUpdate();
+    }
+  };
+
+  private handleOpen() {
+    this.previousFocus = document.activeElement as HTMLElement;
+    this.lockScroll();
+
+    if (this.sheet?.modal) {
+      this.updateComplete.then(() => {
+        const focusTarget = this.shadowRoot?.querySelector<HTMLElement>("[autofocus], .close-button, .panel");
+        focusTarget?.focus();
+      });
+    }
+
+    document.addEventListener("keydown", this.handleKeydown);
+  }
+
+  private handleClose() {
+    this.unlockScroll();
+    document.removeEventListener("keydown", this.handleKeydown);
+
+    if (this.previousFocus && this.previousFocus.focus) {
+      this.updateComplete.then(() => {
+        this.previousFocus?.focus();
+        this.previousFocus = null;
+      });
+    }
+  }
+
+  private cleanup() {
+    this.unlockScroll();
+    document.removeEventListener("keydown", this.handleKeydown);
+    if (this.sheet) {
+      this.sheet.removeEventListener("rel-open-change", this.handleSheetOpenChange);
+    }
+  }
+
+  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 focusPanel() {
+    if (!this.panelElement) return;
+
+    const focusable = this.getFocusableElements();
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    } else {
+      this.panelElement.setAttribute("tabindex", "-1");
+      this.panelElement.focus();
+    }
+  }
+
+  private getFocusableElements(): HTMLElement[] {
+    if (!this.panelElement) return [];
+
+    const selectors = [
+      'a[href]',
+      'button:not([disabled])',
+      'textarea:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      '[tabindex]:not([tabindex="-1"])',
+    ].join(",");
+
+    const elements = Array.from(
+      this.panelElement.querySelectorAll(selectors)
+    ) as HTMLElement[];
+
+    // Also check slotted content
+    const slots = this.panelElement.querySelectorAll("slot");
+    slots.forEach((slot) => {
+      const assigned = slot.assignedElements({ flatten: true });
+      assigned.forEach((el) => {
+        const focusableInSlot = el.querySelectorAll(selectors);
+        elements.push(...(Array.from(focusableInSlot) as HTMLElement[]));
+      });
+    });
+
+    return elements.filter((el) => el.offsetWidth || el.offsetHeight);
+  }
+
+  private handleKeydown = (e: KeyboardEvent) => {
+    if (!this.isOpen) return;
+
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.sheet?.setOpen(false, "escape");
+      return;
+    }
+
+    // Focus trap
+    if (e.key === "Tab" && this.sheet?.modal) {
+      const focusable = this.getFocusableElements();
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+
+      const firstFocusable = focusable[0];
+      const lastFocusable = focusable[focusable.length - 1];
+      const activeElement = this.shadowRoot?.activeElement || document.activeElement;
+
+      if (e.shiftKey) {
+        if (activeElement === firstFocusable) {
+          e.preventDefault();
+          lastFocusable.focus();
+        }
+      } else {
+        if (activeElement === lastFocusable) {
+          e.preventDefault();
+          firstFocusable.focus();
+        }
+      }
+    }
+  };
+
+  private handleOverlayClick = (e: MouseEvent) => {
+    if (!this.closeOnOverlay) return;
+
+    if (e.target === this.overlayElement) {
+      this.sheet?.setOpen(false, "overlay");
+    }
+  };
+
+  private handleCloseClick = () => {
+    this.sheet?.setOpen(false, "close");
+  };
+
+  private getSizeValue(): string {
+    const sizeMap: Record<SheetSize, string> = {
+      sm: "var(--sheet-size-sm)",
+      md: "var(--sheet-size-md)",
+      lg: "var(--sheet-size-lg)",
+      xl: "var(--sheet-size-xl)",
+    };
+    return sizeMap[this.size] || sizeMap.md;
+  }
+
+  private getTitle(): string | null {
+    const titleEl = this.querySelector("rel-sheet-title");
+    return titleEl?.textContent?.trim() || null;
+  }
+
+  private getDescription(): string | null {
+    const descEl = this.querySelector("rel-sheet-description");
+    return descEl?.textContent?.trim() || null;
+  }
+
+  render() {
+    const title = this.getTitle();
+    const description = this.getDescription();
+    const titleId = title ? "sheet-title" : undefined;
+    const descId = description ? "sheet-description" : undefined;
+
+    return html`
+      <div class="sheet-container ${this.isOpen ? "open" : ""}">
+        <div
+          part="overlay"
+          class="overlay ${this.hideOverlay ? "hidden" : ""}"
+          @click="${this.handleOverlayClick}"></div>
+
+        <div
+          part="panel"
+          class="panel"
+          data-side="${this.side}"
+          style="--sheet-width: ${this.getSizeValue()}"
+          role="dialog"
+          aria-modal="${this.sheet?.modal ?? true}"
+          aria-labelledby="${titleId || ""}"
+          aria-describedby="${descId || ""}"
+          tabindex="-1">
+          ${this.showClose
+            ? html`
+                <button
+                  class="close-button"
+                  @click="${this.handleCloseClick}"
+                  aria-label="Close"
+                  type="button">
+                  ✕
+                </button>
+              `
+            : ""}
+
+          <div class="panel-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+// ============================================================================
+// rel-sheet-header (Layout Helper)
+// ============================================================================
+@customElement("rel-sheet-header")
+export class RelSheetHeader extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      padding-bottom: var(--rel-spacing-space-md);
+      border-bottom: 1px solid var(--rel-colors-gray-border);
+      margin-bottom: var(--rel-spacing-space-lg);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+// ============================================================================
+// rel-sheet-footer (Layout Helper)
+// ============================================================================
+@customElement("rel-sheet-footer")
+export class RelSheetFooter extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      padding-top: var(--rel-spacing-space-md);
+      border-top: 1px solid var(--rel-colors-gray-border);
+      margin-top: var(--rel-spacing-space-lg);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+// ============================================================================
+// rel-sheet-title (Layout Helper)
+// ============================================================================
+@customElement("rel-sheet-title")
+export class RelSheetTitle extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--rel-colors-gray-heading);
+      margin: 0 0 var(--rel-spacing-space-xs) 0;
+      padding-right: var(--rel-spacing-space-lg);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+// ============================================================================
+// rel-sheet-description (Layout Helper)
+// ============================================================================
+@customElement("rel-sheet-description")
+export class RelSheetDescription extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      font-size: 14px;
+      color: var(--rel-colors-gray-body);
+      margin: 0;
+      line-height: 1.5;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+// ============================================================================
+// rel-sheet-close (Close Button Wrapper)
+// ============================================================================
+@customElement("rel-sheet-close")
+export class RelSheetClose extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    button {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      font: inherit;
+      cursor: pointer;
+      display: contents;
+    }
+  `;
+
+  private getSheet(): RelSheet | null {
+    let parent = this.parentElement;
+    while (parent) {
+      if (parent instanceof RelSheet) {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+    return null;
+  }
+
+  private handleClick = () => {
+    const sheet = this.getSheet();
+    if (sheet) {
+      sheet.setOpen(false, "close");
+    }
+  };
+
+  render() {
+    return html`
+      <button @click="${this.handleClick}" type="button">
+        <slot></slot>
+      </button>
+    `;
+  }
+}