@reliability-design/web 1.1.1 → 1.3.0

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

@@ -1,684 +1,365 @@
-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>
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+import "@reliability-design/icons/rel-icon";
+
+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;
+
+  @query(".overlay") private overlayElement!: HTMLElement;
+
+  private previousFocus: HTMLElement | null = null;
+  private originalBodyOverflow = "";
+  private originalBodyPaddingRight = "";
+
+  static styles = css`
+    :host {
+      --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;
+    }
+
+    .modal-container.open {
+      pointer-events: auto;
+    }
+
+    .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-color-bg-primary);
+      box-shadow: var(--rel-shadows-shadow-500);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      outline: none;
+      font-family: var(--rel-fontFamilies-primary);
+      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-borders-radius-border-radius-200);
+      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-borders-radius-border-radius-200);
+      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-borders-radius-border-radius-200);
+      transform: translate(-50%, -50%) scale(0.96);
+      opacity: 0;
+    }
+
+    .modal-container.open .panel[data-side="center"] {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+
+    .header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-lg);
+      border-bottom: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      flex-shrink: 0;
+    }
+
+    .header.empty {
+      display: none;
+    }
+
+    .header-text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    .title {
+      font-size: var(--rel-fontSizes-lg);
+      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-color-text-heading);
+      margin: 0;
+    }
+
+    .description {
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-color-text-primary);
+      margin: 0;
+    }
+
+    .close-button {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: var(--rel-spacing-space-2xs);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      align-self: flex-start;
+      flex-shrink: 0;
+      border-radius: var(--rel-borders-radius-border-radius-100);
+      color: var(--rel-color-text-primary);
+      transition: background 0.15s ease;
+    }
+
+    .close-button:hover {
+      background: var(--rel-color-bg-tertiary);
+    }
+
+    .close-button:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus);
+      outline-offset: 2px;
+    }
+
+    .content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--rel-spacing-space-lg);
+    }
+
+    .footer {
+      display: none;
+    }
+
+    :host([has-footer]) .footer {
+      display: flex;
+      flex-shrink: 0;
+      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-lg);
+      border-top: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      justify-content: flex-end;
+      gap: var(--rel-spacing-space-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);
+  }
+
+  updated(changed: Map<string, unknown>) {
+    if (changed.has("open")) {
+      if (this.open) {
+        this.handleOpen();
+      } else {
+        this.handleClose();
+      }
+    }
+  }
+
+  private handleOpen() {
+    this.previousFocus = document.activeElement as HTMLElement;
+    this.lockScroll();
+    document.addEventListener("keydown", this.handleKeydown);
+    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;
+    }
+  };
+
+  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;
+  }
+}