@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,475 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-import { getDeepActiveElement, getFocusableElements } from "../../utils/focus.js";
-
-type SideType = "top" | "right" | "bottom" | "left";
-type AlignType = "start" | "center" | "end";
-
-/** Every currently-open popover on the page (module-level, shared by all
- *  instances). Used so opening one popover light-dismisses any other open
- *  popover it is not nested inside — regardless of whether it was opened by
- *  pointer, keyboard, or programmatically. */
-const openPopovers = new Set<RelPopover>();
-
-@customElement("rel-popover")
-export class RelPopover extends LitElement {
-  /* =======================
-   * PUBLIC API
-   * ======================= */
-
-  @property({ type: Boolean, reflect: true }) open?: boolean;
-  @property({ type: Boolean, attribute: "defaultopen" }) defaultOpen = false;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @property({ type: String, reflect: true }) side: SideType = "bottom";
-  @property({ type: String, reflect: true }) align: AlignType = "center";
-  @property({ type: Number, attribute: "sideoffset" }) sideOffset = 8;
-  @property({ type: Number, attribute: "alignoffset" }) alignOffset = 0;
-
-  @property({ type: Boolean, attribute: "trapfocus" }) trapFocus = false;
-  @property({ type: Boolean, attribute: "closeonescape" }) closeOnEscape = true;
-  @property({ type: Boolean, attribute: "closeonoutsideclick" })
-  closeOnOutsideClick = true;
-
-  /* =======================
-   * INTERNAL STATE
-   * ======================= */
-
-  @state() private internalOpen = false;
-  @state() private contentStyle = "";
-
-  @query(".content-wrapper") private contentWrapper!: HTMLDivElement;
-
-  private triggerEl: HTMLElement | null = null;
-  private returnFocusEl: HTMLElement | null = null;
-  private uniqueId = `popover-${Math.random().toString(36).slice(2)}`;
-
-  /* =======================
-   * STYLES
-   * ======================= */
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-block;
-      position: relative;
-    }
-
-    :host([disabled]) {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) * {
-      pointer-events: none;
-    }
-
-    .content-wrapper {
-      position: fixed;
-      z-index: 1001;
-      display: none;
-      /* Reset native [popover] UA styles (the wrapper is promoted to the
-         top layer so transformed ancestors — e.g. a centered rel-modal
-         panel — can't hijack its containing block or clip it). */
-      inset: auto;
-      margin: 0;
-      padding: 0;
-      border: none;
-      background: transparent;
-      overflow: visible;
-      color: inherit;
-    }
-
-    .content-wrapper[open] {
-      display: block;
-    }
-  `;
-
-  /* =======================
-   * LIFECYCLE
-   * ======================= */
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.internalOpen = this.isControlled() ? !!this.open : this.defaultOpen;
-
-    // ONE interaction entry point per input method — capture phase
-    this.addEventListener("pointerdown", this.onHostPointerDown, true);
-    this.addEventListener("keydown", this.onHostKeyDown, true);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("pointerdown", this.onHostPointerDown, true);
-    this.removeEventListener("keydown", this.onHostKeyDown, true);
-    this.removeGlobalListeners();
-    this.hideNativePopover();
-  }
-
-  firstUpdated() {
-    // triggerEl is resolved via onTriggerSlotChange; call aria in case slot
-    // content was already assigned before firstUpdated
-    this.applyTriggerAria();
-  }
-
-  updated(changed: Map<string, unknown>) {
-    if (changed.has("open") && this.isControlled()) {
-      this.internalOpen = !!this.open;
-    }
-
-    if (changed.has("internalOpen") || changed.has("open")) {
-      this.applyTriggerAria();
-      this.activeOpen ? this.onOpen() : this.onClose();
-    }
-  }
-
-  /* =======================
-   * STATE HELPERS
-   * ======================= */
-
-  private isControlled() {
-    return this.open !== undefined;
-  }
-
-  private get activeOpen() {
-    return this.isControlled() ? !!this.open : this.internalOpen;
-  }
-
-  private setOpen(next: boolean) {
-    if (!this.isControlled()) {
-      this.internalOpen = next;
-    }
-
-    this.dispatchEvent(
-      new CustomEvent("rel-open-change", {
-        detail: { open: next },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
-  /* =======================
-   * POINTER HANDLING (THE FIX)
-   * ======================= */
-
-  private onHostPointerDown = (e: PointerEvent) => {
-    if (this.disabled) return;
-
-    const path = e.composedPath();
-
-    // Toggle ONLY if pointerdown originated from the trigger element
-    if (!this.triggerEl || !path.includes(this.triggerEl)) return;
-
-    // Prevent this interaction from becoming an "outside click"
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.setOpen(!this.activeOpen);
-  };
-
-  private onHostKeyDown = (e: KeyboardEvent) => {
-    if (this.disabled) return;
-    if (e.key !== "Enter" && e.key !== " ") return;
-    if (!this.triggerEl || !e.composedPath().includes(this.triggerEl)) return;
-
-    // Keyboard twin of onHostPointerDown. preventDefault also suppresses the
-    // native synthetic click of a <button> trigger, which would toggle twice.
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.setOpen(!this.activeOpen);
-  };
-
-  /* =======================
-   * OPEN / CLOSE
-   * ======================= */
-
-  private onOpen() {
-    this.returnFocusEl = getDeepActiveElement() ?? this.triggerEl;
-
-    this.closeOtherPopovers();
-    openPopovers.add(this);
-
-    this.addGlobalListeners();
-    this.showNativePopover();
-
-    requestAnimationFrame(() => {
-      this.updatePosition();
-      this.focusFirst();
-    });
-  }
-
-  private onClose() {
-    openPopovers.delete(this);
-    this.removeGlobalListeners();
-    this.hideNativePopover();
-    this.restoreFocus();
-  }
-
-  /**
-   * Light-dismiss every other open popover that isn't an ancestor of this
-   * one (nested popovers keep their parent open). This is what the outside-
-   * pointerdown listener would do for a click on our trigger — except the
-   * trigger handler stops that pointerdown in the capture phase, and a
-   * keyboard (Enter/Space) or programmatic open never produces one at all.
-   * Honors each popover's own `closeOnOutsideClick` setting.
-   */
-  private closeOtherPopovers() {
-    for (const other of openPopovers) {
-      if (other === this) continue;
-      if (!other.closeOnOutsideClick) continue;
-      if (other.contains(this)) continue;
-      other.setOpen(false);
-    }
-  }
-
-  /* =======================
-   * TOP LAYER (native Popover API)
-   *
-   * A transformed ancestor (e.g. rel-modal's centered panel with
-   * translate(-50%,-50%)) becomes the containing block for position:fixed
-   * descendants, breaking viewport-based coordinates and letting the
-   * panel's overflow:hidden clip the content. Promoting the wrapper to
-   * the browser top layer sidesteps both. `manual` keeps light-dismiss
-   * and Escape handling under this component's own control.
-   * ======================= */
-
-  private showNativePopover() {
-    const w = this.contentWrapper;
-    if (!w || typeof w.showPopover !== "function") return;
-    try {
-      if (!w.matches(":popover-open")) w.showPopover();
-    } catch {
-      /* older engines / detached element — fixed-position fallback applies */
-    }
-  }
-
-  private hideNativePopover() {
-    const w = this.contentWrapper;
-    if (!w || typeof w.hidePopover !== "function") return;
-    try {
-      if (w.matches(":popover-open")) w.hidePopover();
-    } catch {
-      /* already hidden or unsupported — nothing to do */
-    }
-  }
-
-  /* =======================
-   * GLOBAL LISTENERS
-   * ======================= */
-
-  private addGlobalListeners() {
-    if (this.closeOnOutsideClick) {
-      // Capture phase: another popover's trigger handler (onHostPointerDown)
-      // calls stopPropagation() in its own capture listener, which would
-      // otherwise swallow the event before a bubble-phase document listener
-      // ever saw it — leaving this popover open alongside the new one.
-      document.addEventListener("pointerdown", this.onOutsidePointerDown, true);
-    }
-
-    if (this.closeOnEscape || this.trapFocus) {
-      document.addEventListener("keydown", this.onKeyDown);
-    }
-
-    window.addEventListener("resize", this.updatePosition);
-    window.addEventListener("scroll", this.updatePosition, true);
-  }
-
-  private removeGlobalListeners() {
-    document.removeEventListener("pointerdown", this.onOutsidePointerDown, true);
-    document.removeEventListener("keydown", this.onKeyDown);
-    window.removeEventListener("resize", this.updatePosition);
-    window.removeEventListener("scroll", this.updatePosition, true);
-  }
-
-  private onOutsidePointerDown = (e: PointerEvent) => {
-    if (!this.activeOpen) return;
-
-    const path = e.composedPath();
-
-    if (
-      path.includes(this) ||
-      (this.triggerEl && path.includes(this.triggerEl)) ||
-      (this.contentWrapper && path.includes(this.contentWrapper))
-    ) {
-      return;
-    }
-
-    this.setOpen(false);
-  };
-
-  private onKeyDown = (e: KeyboardEvent) => {
-    if (!this.activeOpen) return;
-
-    if (e.key === "Escape" && this.closeOnEscape) {
-      e.preventDefault();
-      this.setOpen(false);
-    }
-
-    if (this.trapFocus && e.key === "Tab") {
-      this.trapFocusLoop(e);
-    }
-  };
-
-  /* =======================
-   * FOCUS
-   * ======================= */
-
-  private focusFirst() {
-    if (!this.contentWrapper) return;
-
-    const focusable = this.getFocusable(this.contentWrapper);
-    if (focusable[0]) {
-      focusable[0].focus();
-    } else {
-      this.contentWrapper.focus();
-    }
-  }
-
-  private restoreFocus() {
-    (this.returnFocusEl ?? this.triggerEl)?.focus();
-    this.returnFocusEl = null;
-  }
-
-  private trapFocusLoop(e: KeyboardEvent) {
-    const focusable = this.getFocusable(this.contentWrapper);
-    if (focusable.length === 0) return;
-
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-
-    if (e.shiftKey && document.activeElement === first) {
-      e.preventDefault();
-      last.focus();
-    } else if (!e.shiftKey && document.activeElement === last) {
-      e.preventDefault();
-      first.focus();
-    }
-  }
-
-  private getFocusable(root: HTMLElement): HTMLElement[] {
-    return Array.from(
-      root.querySelectorAll<HTMLElement>(
-        'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex="-1"])',
-      ),
-    ).filter((el) => el.offsetWidth || el.offsetHeight);
-  }
-
-  /* =======================
-   * POSITIONING
-   * ======================= */
-
-  private updatePosition = () => {
-    if (!this.triggerEl || !this.contentWrapper) return;
-
-    this.contentWrapper.setAttribute("open", "");
-
-    const t = this.triggerEl.getBoundingClientRect();
-    const c = this.contentWrapper.getBoundingClientRect();
-
-    let top = 0;
-    let left = 0;
-
-    // Alignment along the cross axis. Previously every branch hardcoded the
-    // centre calculation, so `align` and `alignOffset` were dead code —
-    // "center" worked by accident and "start"/"end" did nothing.
-    const alignAxis = (start: number, size: number, contentSize: number) => {
-      switch (this.align) {
-        case "start": return start;
-        case "end": return start + size - contentSize;
-        default: return start + size / 2 - contentSize / 2; // center
-      }
-    };
-
-    if (this.side === "top") {
-      top = t.top - c.height - this.sideOffset;
-      left = alignAxis(t.left, t.width, c.width) + this.alignOffset;
-    }
-    if (this.side === "bottom") {
-      top = t.bottom + this.sideOffset;
-      left = alignAxis(t.left, t.width, c.width) + this.alignOffset;
-    }
-    if (this.side === "left") {
-      top = alignAxis(t.top, t.height, c.height) + this.alignOffset;
-      left = t.left - c.width - this.sideOffset;
-    }
-    if (this.side === "right") {
-      top = alignAxis(t.top, t.height, c.height) + this.alignOffset;
-      left = t.right + this.sideOffset;
-    }
-
-    top = Math.max(8, Math.min(top, window.innerHeight - c.height - 8));
-    left = Math.max(8, Math.min(left, window.innerWidth - c.width - 8));
-
-    // Without top-layer support a transformed ancestor may be the containing
-    // block for position:fixed, shifting the wrapper away from the viewport
-    // coordinates computed above. Apply, re-measure, and cancel the offset.
-    this.contentWrapper.style.top = `${top}px`;
-    this.contentWrapper.style.left = `${left}px`;
-    const applied = this.contentWrapper.getBoundingClientRect();
-    top -= applied.top - top;
-    left -= applied.left - left;
-    this.contentWrapper.style.top = `${top}px`;
-    this.contentWrapper.style.left = `${left}px`;
-
-    this.contentStyle = `top:${top}px;left:${left}px;`;
-  };
-
-  /* =======================
-   * ARIA
-   * ======================= */
-
-  private onTriggerSlotChange(e: Event) {
-    const slot = e.target as HTMLSlotElement;
-    const first = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
-    this.triggerEl = first ?? null;
-    this.applyTriggerAria();
-  }
-
-  private applyTriggerAria() {
-    if (!this.triggerEl) return;
-    this.triggerEl.setAttribute("aria-haspopup", "dialog");
-    this.triggerEl.setAttribute("aria-expanded", String(this.activeOpen));
-    this.triggerEl.setAttribute("aria-controls", this.uniqueId);
-
-    // A bare <div>/<span> trigger must be Tab-reachable. Skip anything that
-    // is (or contains) natively focusable so buttons don't get a second stop.
-    if (
-      this.triggerEl.tabIndex < 0 &&
-      !this.triggerEl.hasAttribute("tabindex") &&
-      getFocusableElements(this.triggerEl).length === 0
-    ) {
-      this.triggerEl.setAttribute("tabindex", "0");
-      if (!this.triggerEl.hasAttribute("role")) {
-        this.triggerEl.setAttribute("role", "button");
-      }
-    }
-  }
-
-  /* =======================
-   * RENDER
-   * ======================= */
-
-  render() {
-    return html`
-      <slot @slotchange=${this.onTriggerSlotChange}></slot>
-
-      <div
-        id="${this.uniqueId}"
-        class="content-wrapper"
-        popover="manual"
-        style="${this.contentStyle}"
-        ?open="${this.activeOpen}"
-      >
-        <slot name="content"></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-popover": RelPopover;
-  }
-}

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

@@ -1,234 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export type ProgressMode =
-  | "linear-determinate"
-  | "linear-indeterminate"
-  | "circular-determinate"
-  | "circular-indeterminate";
-
-@customElement("rel-progress")
-export class RelProgress extends LitElement {
-  @property({ type: String, reflect: true })
-  mode: ProgressMode = "linear-determinate";
-
-  @property({ type: Number })
-  value = 0;
-
-  @property({ type: String })
-  label = "";
-
-  private radius = 15.9155;
-  private circumference = 2 * Math.PI * this.radius;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    :host([mode*="circular"]) {
-      display: inline-block;
-    }
-
-    /* Linear */
-    .linear-track {
-      background: var(--rel-bg-neutral-elevated-2);
-      border-radius: var(--rel-border-radius-square);
-      height: 6px;
-      overflow: hidden;
-      width: 100%;
-    }
-
-    .linear-bar {
-      background: var(--rel-bg-neutral-inverse-1);
-      height: 100%;
-    }
-
-    /* Width animates only when value-driven (Figma Type=Determinate) */
-    .linear-bar.determinate {
-      transition: width 0.3s ease;
-    }
-
-    .linear-bar.indeterminate {
-      width: 30%;
-      animation: linear-indeterminate 1.5s infinite;
-    }
-
-    @keyframes linear-indeterminate {
-      0% {
-        margin-left: -30%;
-      }
-      50% {
-        margin-left: 50%;
-      }
-      100% {
-        margin-left: 100%;
-      }
-    }
-
-    /* Circular */
-    .circular {
-      display: inline-block;
-      width: 48px;
-      height: 48px;
-    }
-
-    .circular-svg {
-      transform: rotate(-90deg);
-      width: 100%;
-      height: 100%;
-    }
-
-    .circular-bg {
-      fill: none;
-      stroke: var(--rel-border-default);
-      stroke-width: 3;
-    }
-
-    .circular-progress {
-      fill: none;
-      stroke: var(--rel-text-default);
-      stroke-width: 3;
-      stroke-linecap: butt;
-      transition: stroke-dashoffset 0.35s;
-    }
-
-    /* Spinner */
-    .spinner {
-      animation: rotate 2s linear infinite;
-    }
-
-    .spinner-path {
-      stroke: var(--rel-text-default);
-      stroke-linecap: butt;
-      animation: dash 1.5s ease-in-out infinite;
-    }
-
-    @keyframes rotate {
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    @keyframes dash {
-      0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-      }
-      50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-      }
-      100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .linear-bar {
-        transition: none;
-      }
-
-      .linear-bar.indeterminate {
-        animation: none;
-        width: 100%;
-        opacity: 0.5;
-      }
-
-      .spinner {
-        animation: none;
-      }
-
-      .spinner-path {
-        animation: none;
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-      }
-
-      .circular-progress {
-        transition: none;
-      }
-    }
-  `;
-
-  private get safeValue() {
-    return Math.min(100, Math.max(0, this.value));
-  }
-
-  private get accessibleName() {
-    if (this.label) return this.label;
-    return this.mode.endsWith("indeterminate") ? "Loading" : "Progress";
-  }
-
-  private renderLinearDeterminate() {
-    return html`
-      <div part="track" class="linear-track" role="progressbar" aria-label="${this.accessibleName}"
-        aria-valuenow="${this.safeValue}" aria-valuemin="0" aria-valuemax="100">
-        <div part="indicator" class="linear-bar determinate" style="width: ${this.safeValue}%"></div>
-      </div>
-    `;
-  }
-
-  private renderLinearIndeterminate() {
-    return html`
-      <div part="track" class="linear-track" role="progressbar" aria-label="${this.accessibleName}">
-        <div part="indicator" class="linear-bar indeterminate"></div>
-      </div>
-    `;
-  }
-
-  private renderCircularDeterminate() {
-    const offset =
-      this.circumference - (this.safeValue / 100) * this.circumference;
-
-    return html`
-      <div class="circular" role="progressbar" aria-label="${this.accessibleName}"
-        aria-valuenow="${this.safeValue}" aria-valuemin="0" aria-valuemax="100">
-        <svg viewBox="0 0 36 36" class="circular-svg">
-          <circle class="circular-bg" cx="18" cy="18" r="${this.radius}" />
-          <circle
-            class="circular-progress"
-            cx="18"
-            cy="18"
-            r="${this.radius}"
-            stroke-dasharray="${this.circumference}"
-            stroke-dashoffset="${offset}"
-          />
-        </svg>
-      </div>
-    `;
-  }
-
-  private renderCircularIndeterminate() {
-    return html`
-      <div class="circular" role="progressbar" aria-label="${this.accessibleName}">
-        <svg viewBox="0 0 50 50" class="spinner">
-          <circle
-            class="spinner-path"
-            cx="25"
-            cy="25"
-            r="20"
-            fill="none"
-            stroke-width="4"
-          />
-        </svg>
-      </div>
-    `;
-  }
-
-  render() {
-    switch (this.mode) {
-      case "linear-indeterminate":
-        return this.renderLinearIndeterminate();
-      case "circular-determinate":
-        return this.renderCircularDeterminate();
-      case "circular-indeterminate":
-        return this.renderCircularIndeterminate();
-      default:
-        return this.renderLinearDeterminate();
-    }
-  }
-}