@reliability-design/web 1.0.3 → 1.0.6

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

@@ -0,0 +1,621 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+
+export type DrawerSide = "bottom" | "left" | "right" | "top";
+export type DrawerCloseReason = "backdrop" | "escape" | "drag" | "programmatic";
+
+@customElement("rel-drawer")
+export class RelDrawer extends LitElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: String }) side: DrawerSide = "bottom";
+  @property({ type: Boolean }) dismissible = true;
+  @property({ type: Boolean }) modal = true;
+  @property({ type: Boolean, attribute: "close-on-backdrop" }) closeOnBackdrop = true;
+  @property({ type: Boolean, attribute: "close-on-escape" }) closeOnEscape = true;
+  @property({ type: Boolean, attribute: "show-handle" }) showHandle = true;
+  @property({ type: Boolean }) draggable = true;
+  @property({ type: Number, attribute: "snap-threshold" }) snapThreshold = 0.25;
+  @property({ type: String, attribute: "max-height" }) maxHeight = "80vh";
+  @property({ type: String }) width = "420px";
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @state() private isDragging = false;
+  @state() private dragOffset = 0;
+
+  @query(".panel") private panelElement!: HTMLElement;
+  @query(".overlay") private overlayElement!: HTMLElement;
+
+  private previousFocus: HTMLElement | null = null;
+  private startY = 0;
+  private currentY = 0;
+  private originalBodyOverflow = "";
+  private originalBodyPaddingRight = "";
+
+  static styles = css`
+    :host {
+      --drawer-transition-duration: 0.3s;
+      --drawer-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+    .drawer-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1000;
+      pointer-events: none;
+    }
+
+    .drawer-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(--drawer-transition-duration) var(--drawer-transition-timing);
+    }
+
+    .drawer-container.open .overlay {
+      opacity: 1;
+    }
+
+    /* 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(--drawer-transition-duration) var(--drawer-transition-timing);
+    }
+
+    /* Bottom drawer */
+    .panel[data-side="bottom"] {
+      bottom: 0;
+      left: 0;
+      right: 0;
+      max-height: var(--drawer-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%);
+    }
+
+    .drawer-container.open .panel[data-side="bottom"] {
+      transform: translateY(0);
+    }
+
+    /* Left drawer */
+    .panel[data-side="left"] {
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: var(--drawer-width, 420px);
+      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%);
+    }
+
+    .drawer-container.open .panel[data-side="left"] {
+      transform: translateX(0);
+    }
+
+    /* Right drawer */
+    .panel[data-side="right"] {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: var(--drawer-width, 420px);
+      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%);
+    }
+
+    .drawer-container.open .panel[data-side="right"] {
+      transform: translateX(0);
+    }
+
+    /* Top drawer */
+    .panel[data-side="top"] {
+      top: 0;
+      left: 0;
+      right: 0;
+      max-height: var(--drawer-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%);
+    }
+
+    .drawer-container.open .panel[data-side="top"] {
+      transform: translateY(0);
+    }
+
+    /* Dragging state */
+    .panel.dragging {
+      transition: none;
+    }
+
+    .overlay.dragging {
+      transition: none;
+    }
+
+    /* Handle */
+    .handle {
+      width: 48px;
+      height: 4px;
+      background: var(--rel-colors-gray-divider);
+      border-radius: var(--rel-borders-radius-border-radius-500);
+      margin: var(--rel-spacing-space-sm) auto var(--rel-spacing-space-xs);
+      cursor: grab;
+      touch-action: none;
+    }
+
+    .handle:active {
+      cursor: grabbing;
+    }
+
+    .handle.hidden {
+      display: none;
+    }
+
+    /* Header */
+    .header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-2xs);
+      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-lg);
+      border-bottom: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+    }
+
+    .header.empty {
+      display: none;
+    }
+
+    .header-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .title {
+      font-size: var(--rel-fontSizes-lg);
+      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-text-heading);
+      margin: 0;
+    }
+
+    .description {
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-text-primary);
+      margin: 0;
+      opacity: 0.8;
+    }
+
+    .close-button {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: var(--rel-spacing-space-2xs);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--rel-borders-radius-border-radius-100);
+      color: var(--rel-colors-gray-primary, #333);
+      transition: background 0.15s ease;
+    }
+
+    .close-button:hover {
+      background: var(--rel-surface-secondary, #fafafa);
+    }
+
+    .close-button:active {
+      background: var(--rel-colors-gray-divider, #bdbdbd);
+    }
+
+    .close-button:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
+      outline-offset: 2px;
+    }
+
+    /* Content */
+    .content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--rel-spacing-space-lg);
+    }
+
+    /* Footer */
+    .footer {
+      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-lg);
+      border-top: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+    }
+
+    .footer.empty {
+      display: none;
+    }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .overlay,
+      .panel {
+        transition: none;
+      }
+
+      .drawer-container .panel {
+        transform: none;
+      }
+
+      .drawer-container:not(.open) .panel {
+        display: none;
+      }
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.open) {
+      this.lockScroll();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unlockScroll();
+    document.removeEventListener("keydown", this.handleKeydown);
+  }
+
+  updated(changed: Map<string, any>) {
+    if (changed.has("open")) {
+      if (this.open) {
+        this.handleOpen();
+      } else {
+        this.handleClose();
+      }
+    }
+  }
+
+  private handleOpen() {
+    this.previousFocus = document.activeElement as HTMLElement;
+    this.lockScroll();
+
+    if (this.modal) {
+      setTimeout(() => {
+        this.focusPanel();
+      }, 50);
+    }
+
+    document.addEventListener("keydown", this.handleKeydown);
+
+    this.dispatchEvent(
+      new CustomEvent("rel-open-change", {
+        detail: { open: true },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleClose() {
+    this.unlockScroll();
+    document.removeEventListener("keydown", this.handleKeydown);
+
+    if (this.previousFocus && this.previousFocus.focus) {
+      setTimeout(() => {
+        this.previousFocus?.focus();
+        this.previousFocus = null;
+      }, 50);
+    }
+
+    this.dispatchEvent(
+      new CustomEvent("rel-open-change", {
+        detail: { open: 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 focusPanel() {
+    if (!this.panelElement) return;
+
+    const focusable = this.getFocusableElements();
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    } else {
+      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;
+  }
+
+  private handleKeydown = (e: KeyboardEvent) => {
+    if (!this.open) return;
+
+    if (e.key === "Escape" && this.dismissible && this.closeOnEscape) {
+      e.preventDefault();
+      this.close("escape");
+      return;
+    }
+
+    // Focus trap
+    if (e.key === "Tab" && this.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.dismissible || !this.closeOnBackdrop) return;
+
+    if (e.target === this.overlayElement) {
+      this.close("backdrop");
+    }
+  }
+
+  private handleCloseButtonClick() {
+    this.close("programmatic");
+  }
+
+  private close(reason: DrawerCloseReason) {
+    this.open = false;
+
+    this.dispatchEvent(
+      new CustomEvent("rel-close", {
+        detail: { reason },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  // Drag-to-close handlers
+  private handlePointerDown = (e: PointerEvent) => {
+    if (!this.draggable || this.side !== "bottom") return;
+
+    this.isDragging = true;
+    this.startY = e.clientY;
+    this.currentY = e.clientY;
+    this.dragOffset = 0;
+
+    const target = e.target as HTMLElement;
+    target.setPointerCapture(e.pointerId);
+
+    document.addEventListener("pointermove", this.handlePointerMove);
+    document.addEventListener("pointerup", this.handlePointerUp);
+  };
+
+  private handlePointerMove = (e: PointerEvent) => {
+    if (!this.isDragging) return;
+
+    this.currentY = e.clientY;
+    const deltaY = this.currentY - this.startY;
+
+    // Only allow dragging down for bottom drawer
+    if (deltaY > 0) {
+      this.dragOffset = deltaY;
+      this.requestUpdate();
+    }
+  };
+
+  private handlePointerUp = (e: PointerEvent) => {
+    if (!this.isDragging) return;
+
+    this.isDragging = false;
+
+    const panelHeight = this.panelElement?.offsetHeight || 0;
+    const draggedPercent = this.dragOffset / panelHeight;
+
+    if (draggedPercent >= this.snapThreshold) {
+      this.close("drag");
+    }
+
+    this.dragOffset = 0;
+    this.requestUpdate();
+
+    document.removeEventListener("pointermove", this.handlePointerMove);
+    document.removeEventListener("pointerup", this.handlePointerUp);
+  };
+
+  private getPanelStyle() {
+    if (!this.isDragging || this.dragOffset === 0) {
+      return "";
+    }
+
+    return `transform: translateY(${this.dragOffset}px);`;
+  }
+
+  private getOverlayStyle() {
+    if (!this.isDragging || this.dragOffset === 0) {
+      return "";
+    }
+
+    const panelHeight = this.panelElement?.offsetHeight || 0;
+    const draggedPercent = Math.min(this.dragOffset / panelHeight, 1);
+    const opacity = 0.5 * (1 - draggedPercent);
+
+    return `opacity: ${opacity};`;
+  }
+
+  private hasSlotContent(slotName?: string): boolean {
+    const slot = this.shadowRoot?.querySelector(
+      slotName ? `slot[name="${slotName}"]` : "slot:not([name])"
+    ) as HTMLSlotElement;
+    return slot ? slot.assignedElements({ flatten: true }).length > 0 : false;
+  }
+
+  render() {
+    const hasTitle = this.hasSlotContent("title");
+    const hasDescription = this.hasSlotContent("description");
+    const hasFooter = this.hasSlotContent("footer");
+    const showCloseButton = this.dismissible;
+    const hasHeader = hasTitle || hasDescription || showCloseButton;
+
+    const showHandleBar =
+      this.showHandle && this.side === "bottom" && this.draggable;
+
+    return html`
+      <div class="drawer-container ${this.open ? "open" : ""}">
+        <div
+          part="overlay"
+          class="overlay ${this.isDragging ? "dragging" : ""}"
+          style="${this.getOverlayStyle()}"
+          @click="${this.handleOverlayClick}"></div>
+
+        <div
+          part="panel"
+          class="panel ${this.isDragging ? "dragging" : ""}"
+          data-side="${this.side}"
+          style="--drawer-width: ${this.width}; --drawer-max-height: ${this
+            .maxHeight}; ${this.getPanelStyle()}"
+          role="${this.modal ? "dialog" : "region"}"
+          aria-modal="${this.modal}"
+          tabindex="-1">
+          ${showHandleBar
+            ? html`<div
+                part="handle"
+                class="handle"
+                @pointerdown="${this.handlePointerDown}"></div>`
+            : ""}
+
+          <div part="header" class="header ${!hasHeader ? "empty" : ""}">
+            ${hasTitle || hasDescription || showCloseButton
+              ? html`
+                  <div class="header-top">
+                    <div>
+                      ${hasTitle
+                        ? html`<h2 class="title">
+                            <slot name="title"></slot>
+                          </h2>`
+                        : ""}
+                      ${hasDescription
+                        ? html`<p class="description">
+                            <slot name="description"></slot>
+                          </p>`
+                        : ""}
+                    </div>
+                    ${showCloseButton
+                      ? html`<button
+                          part="close-button"
+                          class="close-button"
+                          @click="${this.handleCloseButtonClick}"
+                          aria-label="Close">
+                          <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path
+                              d="M12.8 4.27L11.73 3.2L8 6.93L4.27 3.2L3.2 4.27L6.93 8L3.2 11.73L4.27 12.8L8 9.07L11.73 12.8L12.8 11.73L9.07 8L12.8 4.27Z"
+                              fill="currentColor" />
+                          </svg>
+                        </button>`
+                      : ""}
+                  </div>
+                `
+              : ""}
+          </div>
+
+          <div part="content" class="content">
+            <slot></slot>
+          </div>
+
+          ${hasFooter
+            ? html`<div part="footer" class="footer">
+                <slot name="footer"></slot>
+              </div>`
+            : ""}
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-drawer": RelDrawer;
+  }
+}