@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,54 +0,0 @@
-  import { LitElement, html, css } from "lit";
-  import { customElement, property } from "lit/decorators.js";
-
-  @customElement("rel-divider")
-  export class RelDivider extends LitElement {
-    @property({ type: String }) orientation: "horizontal" | "vertical" = "horizontal";
-
-    static styles = css`
-      :host {
-        color: var(--rel-text-default);
-        display: block;
-      }
-
-      .rel-divider {
-        position: relative;
-        display: flex;
-        background: transparent;
-        font-family: var(--rel-fonts-font-family);
-        color: var(--rel-text-default);
-      }
-
-      /* Horizontal */
-      .rel-divider.horizontal {
-        width: 100%;
-        height: var(--rel-stroke-sm);
-        background-color: var(--rel-bg-neutral-elevated-2);
-        margin: var(--rel-spacing-md) 0;
-      }
-
-      /* Vertical */
-      .rel-divider.vertical {
-        width: var(--rel-stroke-sm);
-        background-color: var(--rel-bg-neutral-elevated-2);
-        margin: 0 var(--rel-spacing-md);
-        align-self: stretch;
-        height: 100%;
-      }
-    `;
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.setAttribute("role", "separator");
-    }
-
-    updated() {
-      this.setAttribute("aria-orientation", this.orientation ?? "horizontal");
-    }
-
-    render() {
-      return html`
-        <div part="base" class="rel-divider ${this.orientation}" role="separator"></div>
-      `;
-    }
-  }

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

@@ -1 +0,0 @@
-export * from "./rel-drawer";

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

@@ -1,27 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-
-@customElement("rel-drawer-footer")
-export class RelDrawerFooter extends LitElement {
-  static styles = css`
-    .drawer-footer {
-      display: flex;
-      justify-content: flex-end;
-      gap: var(--rel-spacing-xs);
-    }
-  `;
-
-  render() {
-    return html`
-      <div class="drawer-footer">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-drawer-footer": RelDrawerFooter;
-  }
-}

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

@@ -1,604 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-import "./rel-drawer-footer";
-import { getDeepActiveElement, getFocusableElements, trapTabKey } from "../../utils/focus.js";
-
-export type DrawerSide = "bottom" | "left" | "right";
-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 = "";
-  @property({ type: String }) title: string = "";
-  @property({ type: String }) description: string = "";
-
-  @state() private isDragging = false;
-  @state() private dragOffset = 0;
-  // Once a left/right drawer finishes sliding in, we drop its transform so that
-  // `position: fixed` descendants (select dropdowns, popovers, tooltips) are no
-  // longer trapped by the transformed panel's containing block.
-  @state() private settled = false;
-
-  @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 {
-      color: var(--rel-text-default);
-      --drawer-transition-duration: 0.3s;
-      --drawer-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
-    }
-
-    .drawer-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 drawer's
-         close button and slotted content would otherwise stay in the Tab
-         order and swallow keyboard focus into invisible off-screen 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(--drawer-transition-duration);
-    }
-
-    .drawer-container.open {
-      pointer-events: auto;
-      visibility: visible;
-      transition-delay: 0s;
-    }
-
-    /* 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: var(--rel-drawer-scrim-opacity, 1);
-    }
-
-    /* Panel base */
-    .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);
-      transition: transform var(--drawer-transition-duration) var(--drawer-transition-timing);
-    }
-
-    /* Bottom drawer */
-    .panel[data-side="bottom"] {
-      bottom: 0;
-      left: 50%;
-      right: auto;
-      width: var(--drawer-width, clamp(640px, 66vw, 952px));
-      height: var(--drawer-height, clamp(360px, 49vh, 600px));
-      border-radius: var(--rel-border-radius-sm)
-                     var(--rel-border-radius-sm)
-                     0
-                     0;
-      transform: translateX(-50%) translateY(100%);
-    }
-
-    .drawer-container.open .panel[data-side="bottom"] {
-      transform: translateX(-50%) translateY(0);
-    }
-
-    /* Left drawer */
-    .panel[data-side="left"] {
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: var(--drawer-width, clamp(280px, 24vw, 420px));
-      border-radius: 0;
-      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, clamp(280px, 24vw, 420px));
-      border-radius: 0;
-      transform: translateX(100%);
-    }
-
-    .drawer-container.open .panel[data-side="right"] {
-      transform: translateX(0);
-    }
-
-    /* Once settled open, drop the (now identity) transform on left/right panels
-       so their fixed-position descendants (select dropdowns, popovers, tooltips)
-       escape the transformed containing block instead of being clipped by the
-       panel. Bottom keeps its transform (used for centering). */
-    .drawer-container.open .panel[data-side="left"].settled,
-    .drawer-container.open .panel[data-side="right"].settled {
-      transform: none;
-    }
-
-    /* Dragging state */
-    .panel.dragging {
-      transition: none;
-    }
-
-    .overlay.dragging {
-      transition: none;
-    }
-
-    .overlay.no-modal {
-      display: none !important;
-    }
-
-    /* Handle */
-    .handle {
-      width: 48px;
-      height: 4px;
-      background: var(--rel-bg-neutral-elevated-2);
-      border-radius: var(--rel-border-radius-full-rounded);
-      margin: var(--rel-spacing-xs) auto var(--rel-spacing-2xs);
-      cursor: grab;
-      touch-action: none;
-    }
-
-    .handle:active {
-      cursor: grabbing;
-      background: var(--rel-border-accent);
-    }
-
-    .handle.hidden {
-      display: none;
-    }
-
-    /* Header */
-    .header {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-2xs);
-      padding: var(--rel-spacing-md) var(--rel-spacing-lg);
-      border-bottom: var(--rel-stroke-sm) solid var(--rel-border-default);
-    }
-
-    .header.empty {
-      display: none;
-    }
-
-    .header-top {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: var(--rel-spacing-sm);
-    }
-
-    .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;
-      opacity: 0.8;
-
-      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-surface-elevated);
-    }
-
-    .close-button:active {
-      background: var(--rel-border-default);
-    }
-
-    .close-button:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    /* Content */
-    .content {
-      flex: 1;
-      overflow-y: auto;
-      padding: var(--rel-spacing-xl);
-    }
-
-    /* Footer */
-    .footer {
-      flex-shrink: 0;
-      padding: var(--rel-spacing-md) var(--rel-spacing-lg);
-      border-top: var(--rel-stroke-sm) solid var(--rel-border-default);
-    }
-
-    /* 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() {
-    // Deep-resolved: document.activeElement retargets to a component's host
-    // (e.g. <rel-button>), whose .focus() is a no-op — restore would drop
-    // focus to <body>.
-    this.previousFocus = getDeepActiveElement();
-    this.lockScroll();
-
-    if (this.modal) {
-      // The panel lives in the shadow root, so plain this.querySelector never
-      // found it (focus was never moved in). The shared util walks the
-      // composed tree, seeing both shadow and slotted content.
-      this.updateComplete.then(() => {
-        const panel = this.panelElement;
-        if (!panel) return;
-        const focusTarget = getFocusableElements(panel)[0];
-        if (focusTarget) {
-          focusTarget.focus();
-        } else {
-          panel.tabIndex = -1;
-          panel.focus();
-        }
-      });
-    }
-
-    document.addEventListener("keydown", this.handleKeydown);
-
-    // After the slide-in transition completes, mark the panel settled so its
-    // transform is dropped (frees fixed-position dropdowns/popovers). A timeout
-    // backstops the case where transitionend doesn't fire.
-    this.settled = false;
-    this.updateComplete.then(() => {
-      const panel = this.panelElement;
-      if (!panel) return;
-      let done = false;
-      const settle = () => {
-        if (done) return;
-        done = true;
-        this.settled = true;
-        panel.removeEventListener("transitionend", onEnd);
-      };
-      const onEnd = (e: TransitionEvent) => {
-        if (e.propertyName === "transform") settle();
-      };
-      panel.addEventListener("transitionend", onEnd);
-      setTimeout(settle, 500);
-    });
-
-    this.dispatchEvent(
-      new CustomEvent("rel-open-change", {
-        detail: { open: true },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private handleClose() {
-    this.settled = false;
-    this.unlockScroll();
-    document.removeEventListener("keydown", this.handleKeydown);
-
-    if (this.previousFocus && this.previousFocus.focus) {
-      this.updateComplete.then(() => {
-        this.previousFocus?.focus();
-        this.previousFocus = null;
-      });
-    }
-
-    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 handleKeydown = (e: KeyboardEvent) => {
-    if (!this.open) return;
-
-    if (e.key === "Escape" && this.dismissible && this.closeOnEscape) {
-      e.preventDefault();
-      this.close("escape");
-      return;
-    }
-
-    // Focus trap — the shared helper resolves the deep active element, which
-    // the old document.activeElement comparison never could (it retargets to
-    // the <rel-drawer> host, so Tab was never wrapped).
-    if (e.key === "Tab" && this.modal && this.panelElement) {
-      trapTabKey(e, this.panelElement);
-    }
-  };
-
-  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;
-  }
-
-  // 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: translateX(-50%) 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};`;
-  }
-
-  render() {
-    const hasTitle = !!this.title;
-    const hasDescription = !!this.description;
-    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.modal ? 'no-modal' : ''} ${this.isDragging ? 'dragging' : ''}"
-          style="${this.getOverlayStyle()}"
-          @click="${this.handleOverlayClick}"></div>
-
-        <div
-          part="panel"
-          class="panel ${this.isDragging ? "dragging" : ""} ${this.settled ? "settled" : ""}"
-          data-side="${this.side}"
-          style="${this.width ? `--drawer-width: ${this.width};` : ''}${this.maxHeight ? `--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">${this.title}</h2>`
-                        : ""}
-                      ${hasDescription
-                        ? html`<p class="description">${this.description}</p>`
-                        : ""}
-                    </div>
-                    ${showCloseButton
-                      ? 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>
-
-          <div part="content" class="content">
-            <slot></slot>
-          </div>
-
-          <div part="footer" class="footer">
-            <rel-drawer-footer><slot name="footer"></slot></rel-drawer-footer>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-drawer": RelDrawer;
-  }
-}