@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,610 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-import "../rel-progress/rel-progress.js";
-import { getDeepActiveElement, getFocusableElements, trapTabKey } from "../../utils/focus.js";
-
-export type ModalSide = "top" | "bottom" | "center";
-export type ModalSize = "sm" | "md" | "lg" | "xl" | "fullscreen";
-
-@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 = "";
-  /** Alias for `description`; rendered only when `description` is empty. */
-  @property({ type: String }) subtitle = "";
-  @property({ type: Boolean }) dismissible = true;
-  @property({ type: Boolean }) modal = true;
-
-  /** Panel width scale. `md` matches the Figma Modal Sheet width; `fullscreen` covers the viewport. */
-  @property({ type: String, reflect: true }) size: ModalSize = "md";
-
-  /* Granular dismissal switches — each is ANDed with the legacy coarse
-     `dismissible` switch so existing `dismissible={false}` consumers keep
-     their fully-locked behavior. */
-  @property({ type: Boolean, attribute: "close-on-backdrop-click" }) closeOnBackdropClick = true;
-  @property({ type: Boolean, attribute: "close-on-escape" }) closeOnEscape = true;
-  @property({ type: Boolean, attribute: "show-close-button" }) showCloseButton = true;
-
-  /** Move focus into the panel when opened (modal mode only). */
-  @property({ type: Boolean, attribute: "auto-focus" }) autoFocus = true;
-  /** Return focus to the opener when closed. */
-  @property({ type: Boolean, attribute: "restore-focus" }) restoreFocus = true;
-
-  /** When false, the body no longer scrolls internally — tall content clips at the panel's max height. */
-  @property({ type: Boolean }) scrollable = true;
-
-  /** Shows a spinner overlay and blocks all interaction inside the panel. */
-  @property({ type: Boolean, reflect: true }) loading = false;
-  /** Blocks user-initiated closes (X / backdrop / Escape) and footer actions. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Stacking order of the whole modal (backdrop + panel). */
-  @property({ type: Number, attribute: "z-index" }) zIndex = 1000;
-
-  /**
-   * 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);
-      /* md is the Figma Modal Sheet Breakpoint=Web width (708px cap). */
-      --modal-width: clamp(360px, 49vw, 708px);
-      width: var(--modal-width);
-      left: 50%;
-      transition: transform var(--modal-transition-duration) var(--modal-transition-timing),
-        opacity var(--modal-transition-duration) var(--modal-transition-timing);
-    }
-
-    .panel[data-size="sm"] {
-      --modal-width: min(400px, calc(100vw - 32px));
-    }
-
-    .panel[data-size="lg"] {
-      --modal-width: min(900px, calc(100vw - 48px));
-    }
-
-    .panel[data-size="xl"] {
-      --modal-width: min(1140px, calc(100vw - 48px));
-    }
-
-    .panel[data-side="bottom"] {
-      bottom: 48px;
-      left: 50%;
-      width: var(--modal-width);
-      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: var(--modal-width);
-      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: var(--modal-width);
-      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);
-      }
-    }
-
-    /* size="fullscreen" — edge-to-edge at every side value; declared after the
-       side and responsive-collapse rules so it wins their specificity ties. */
-    .panel[data-size="fullscreen"],
-    .panel[data-size="fullscreen"][data-side="top"],
-    .panel[data-size="fullscreen"][data-side="center"],
-    .panel[data-size="fullscreen"][data-side="bottom"] {
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      max-height: none;
-      border-radius: 0;
-      transform: translateY(16px);
-      opacity: 0;
-    }
-
-    .modal-container.open .panel[data-size="fullscreen"],
-    .modal-container.open .panel[data-size="fullscreen"][data-side="top"],
-    .modal-container.open .panel[data-size="fullscreen"][data-side="center"],
-    .modal-container.open .panel[data-size="fullscreen"][data-side="bottom"] {
-      transform: translateY(0);
-      opacity: 1;
-    }
-
-    @media (max-width: 480px) {
-      :host([breakpoint="responsive"]) .panel[data-size="fullscreen"] {
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-        max-height: none;
-        border-radius: 0;
-        transform: translateY(16px);
-      }
-
-      :host([breakpoint="responsive"]) .modal-container.open .panel[data-size="fullscreen"] {
-        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;
-    }
-
-    .close-button:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-
-    .close-button:disabled:hover {
-      background: transparent;
-    }
-
-    .content {
-      flex: 1;
-      overflow-y: auto;
-      padding: var(--rel-spacing-xl);
-    }
-
-    .content.no-scroll {
-      overflow-y: visible;
-    }
-
-    :host([disabled]) .footer {
-      opacity: 0.5;
-    }
-
-    .loading-overlay {
-      position: absolute;
-      inset: 0;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    /* Scrim as a pseudo-element so its opacity doesn't dull the spinner. */
-    .loading-overlay::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background: var(--rel-bg-surface);
-      opacity: 0.7;
-    }
-
-    .loading-overlay rel-progress {
-      position: relative;
-    }
-
-    .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.autoFocus) {
-      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.restoreFocus && this.previousFocus?.focus) {
-      this.updateComplete.then(() => {
-        this.previousFocus?.focus();
-        this.previousFocus = null;
-      });
-    } else {
-      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 && this.closeOnEscape && !this.disabled) {
-      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 || !this.closeOnBackdropClick || this.disabled || this.loading) return;
-    if (e.target === this.overlayElement) {
-      this.open = false;
-    }
-  };
-
-  private handleCloseButtonClick() {
-    if (this.disabled || this.loading) return;
-    this.open = false;
-  }
-
-  render() {
-    const hasTitle = !!this.title;
-    const effectiveDescription = this.description || this.subtitle;
-    const hasDescription = !!effectiveDescription;
-    const showCloseX = this.dismissible && this.showCloseButton;
-    const showHeader = hasTitle || hasDescription || showCloseX;
-
-    return html`
-      <div class="modal-container ${this.open ? "open" : ""}" style="z-index: ${this.zIndex}">
-        <div
-          part="overlay"
-          class="overlay ${!this.modal ? 'no-modal' : ''}"
-          @click="${this.handleOverlayClick}"></div>
-
-        <div
-          part="panel"
-          class="panel"
-          data-side="${this.side}"
-          data-size="${this.size}"
-          role="${this.modal ? "dialog" : "region"}"
-          aria-modal="${this.modal}"
-          aria-busy="${this.loading ? "true" : nothing}"
-          aria-labelledby="${hasTitle ? "modal-title" : nothing}"
-          aria-describedby="${hasDescription ? "modal-description" : nothing}"
-          aria-label="${hasTitle ? nothing : "Dialog"}"
-          tabindex="-1">
-
-          <div part="header" class="header ${!showHeader ? "empty" : ""}" ?inert=${this.loading}>
-            <div class="header-text">
-              ${hasTitle ? html`<h2 class="title" id="modal-title">${this.title}</h2>` : ""}
-              ${hasDescription ? html`<p class="description" id="modal-description">${effectiveDescription}</p>` : ""}
-              <slot name="header"></slot>
-            </div>
-            ${showCloseX
-              ? html`<button
-                  part="close-button"
-                  class="close-button"
-                  ?disabled=${this.disabled}
-                  @click="${this.handleCloseButtonClick}"
-                  aria-label="Close">
-                  <rel-icon name="close" size="sm"></rel-icon>
-                </button>`
-              : ""}
-          </div>
-
-          <div part="content" class="content ${this.scrollable ? "" : "no-scroll"}" ?inert=${this.loading}>
-            <slot></slot>
-          </div>
-
-          <div part="footer" class="footer" ?inert=${this.loading || this.disabled}>
-            <slot name="footer"></slot>
-          </div>
-
-          ${this.loading
-            ? html`<div part="loading" class="loading-overlay">
-                <rel-progress mode="circular-indeterminate" label="Loading"></rel-progress>
-              </div>`
-            : ""}
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-modal": RelModal;
-  }
-}