@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,3 +0,0 @@
-export * from "./rel-resizable-group";
-export * from "./rel-resizable-panel";
-export * from "./rel-resizable-handle";

package/dist/components/rel-resizable/rel-resizable-group.ts

@@ -1,405 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import type { RelResizablePanel } from "./rel-resizable-panel";
-import type { RelResizableHandle } from "./rel-resizable-handle";
-
-@customElement("rel-resizable-group")
-export class RelResizableGroup extends LitElement {
-  /* =======================
-   * PUBLIC API
-   * ======================= */
-
-  // reflect: CSS targets :host([direction="…"]) for flex-direction — without
-  // reflection, setting the property in JS leaves the layout unchanged.
-  @property({ type: String, reflect: true }) direction: "horizontal" | "vertical" = "horizontal";
-
-  /* =======================
-   * INTERNAL STATE
-   * ======================= */
-
-  private panels: RelResizablePanel[] = [];
-  private handles: RelResizableHandle[] = [];
-  private isDragging = false;
-  private activeHandleIndex = -1;
-  private startPointerPos = 0;
-  private startSizes: number[] = [];
-
-  /* =======================
-   * STYLES
-   * ======================= */
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: flex;
-      width: 100%;
-      height: 100%;
-      position: relative;
-      box-sizing: border-box;
-    }
-
-    :host([direction="horizontal"]) {
-      flex-direction: row;
-    }
-
-    :host([direction="vertical"]) {
-      flex-direction: column;
-    }
-
-    ::slotted(rel-resizable-panel) {
-      flex-shrink: 0;
-    }
-  `;
-
-  /* =======================
-   * LIFECYCLE
-   * ======================= */
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("pointerdown", this.onPointerDown);
-    this.addEventListener("keydown", this.onKeyDown);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("pointerdown", this.onPointerDown);
-    this.removeEventListener("keydown", this.onKeyDown);
-    this.removeGlobalListeners();
-  }
-
-  firstUpdated() {
-    this.initializeLayout();
-  }
-
-  /* =======================
-   * INITIALIZATION
-   * ======================= */
-
-  private initializeLayout() {
-    // Query light DOM for panels and handles
-    this.panels = Array.from(
-      this.querySelectorAll(":scope > rel-resizable-panel")
-    ) as RelResizablePanel[];
-    this.handles = Array.from(
-      this.querySelectorAll(":scope > rel-resizable-handle")
-    ) as RelResizableHandle[];
-
-    // Set handle indices and orientations
-    this.handles.forEach((handle, idx) => {
-      handle.handleIndex = idx;
-      handle.orientation = this.direction;
-    });
-
-    // Calculate initial sizes
-    const sizes = this.calculateInitialSizes();
-    this.applySizes(sizes);
-
-    // Initialize each handle's aria-valuenow — before this, AT had no value
-    // to announce until the first drag/keypress.
-    this.handles.forEach((handle, idx) => {
-      const left = sizes[idx];
-      const right = sizes[idx + 1];
-      if (left !== undefined && right !== undefined && left + right > 0) {
-        handle.updateAriaValue((left / (left + right)) * 100);
-      }
-    });
-  }
-
-  private calculateInitialSizes(): number[] {
-    const sizes: number[] = [];
-    let specifiedTotal = 0;
-    let unspecifiedCount = 0;
-
-    // First pass: collect specified sizes
-    this.panels.forEach((panel) => {
-      if (panel.defaultSize !== undefined) {
-        sizes.push(panel.defaultSize);
-        specifiedTotal += panel.defaultSize;
-      } else {
-        sizes.push(0);
-        unspecifiedCount++;
-      }
-    });
-
-    // Second pass: distribute remaining space to unspecified panels
-    if (unspecifiedCount > 0) {
-      const remaining = Math.max(0, 100 - specifiedTotal);
-      const perPanel = remaining / unspecifiedCount;
-      sizes.forEach((size, idx) => {
-        if (size === 0) {
-          sizes[idx] = perPanel;
-        }
-      });
-    }
-
-    // Normalize to 100%
-    const total = sizes.reduce((sum, s) => sum + s, 0);
-    if (total > 0) {
-      return sizes.map((s) => (s / total) * 100);
-    }
-
-    // Fallback: equal distribution
-    return this.panels.map(() => 100 / this.panels.length);
-  }
-
-  /* =======================
-   * POINTER HANDLING
-   * ======================= */
-
-  private onPointerDown = (e: PointerEvent) => {
-    // Find the handle anywhere in the composed path — a pointerdown on the
-    // visible `.grabber` (which lives inside the handle's shadow DOM) makes
-    // composedPath()[0] a <div>, not the handle, so indexing [0] would abort
-    // the drag whenever the user grabs the obvious target.
-    const handle = e
-      .composedPath()
-      .find(
-        (el): el is RelResizableHandle =>
-          el instanceof HTMLElement && el.tagName === "REL-RESIZABLE-HANDLE"
-      );
-    if (!handle) return;
-
-    const handleIndex = this.handles.indexOf(handle);
-    if (handleIndex === -1) return;
-
-    e.preventDefault();
-    this.startDrag(handleIndex, e);
-  };
-
-  private startDrag(handleIndex: number, e: PointerEvent) {
-    this.isDragging = true;
-    this.activeHandleIndex = handleIndex;
-    this.startPointerPos = this.direction === "horizontal" ? e.clientX : e.clientY;
-    this.startSizes = this.panels.map((p) => p.currentSize);
-
-    const handle = this.handles[handleIndex];
-    handle.setAttribute("data-dragging", "");
-
-    this.addGlobalListeners();
-
-    // Capture pointer
-    (e.target as HTMLElement).setPointerCapture(e.pointerId);
-  }
-
-  private onPointerMove = (e: PointerEvent) => {
-    if (!this.isDragging || this.activeHandleIndex === -1) return;
-
-    e.preventDefault();
-
-    const currentPos = this.direction === "horizontal" ? e.clientX : e.clientY;
-    const delta = currentPos - this.startPointerPos;
-
-    this.applyDragResize(delta);
-  };
-
-  private onPointerUp = (e: PointerEvent) => {
-    if (!this.isDragging) return;
-
-    e.preventDefault();
-
-    const handle = this.handles[this.activeHandleIndex];
-    if (handle) {
-      handle.removeAttribute("data-dragging");
-    }
-
-    this.isDragging = false;
-    this.activeHandleIndex = -1;
-
-    this.removeGlobalListeners();
-
-    // Dispatch resize-end event
-    this.dispatchResizeEvent("rel-resize-end");
-  };
-
-  private applyDragResize(deltaPixels: number) {
-    const rect = this.getBoundingClientRect();
-    const totalSize = this.direction === "horizontal" ? rect.width : rect.height;
-    const deltaPercent = (deltaPixels / totalSize) * 100;
-
-    const leftIdx = this.activeHandleIndex;
-    const rightIdx = this.activeHandleIndex + 1;
-
-    if (leftIdx < 0 || rightIdx >= this.panels.length) return;
-
-    const leftPanel = this.panels[leftIdx];
-    const rightPanel = this.panels[rightIdx];
-
-    let newLeftSize = this.startSizes[leftIdx] + deltaPercent;
-    let newRightSize = this.startSizes[rightIdx] - deltaPercent;
-
-    // Clamp to min/max
-    newLeftSize = Math.max(leftPanel.minSize, Math.min(leftPanel.maxSize, newLeftSize));
-    newRightSize = Math.max(rightPanel.minSize, Math.min(rightPanel.maxSize, newRightSize));
-
-    // Ensure total is preserved
-    const pairTotal = this.startSizes[leftIdx] + this.startSizes[rightIdx];
-    const adjustedTotal = newLeftSize + newRightSize;
-    if (adjustedTotal !== pairTotal) {
-      const ratio = pairTotal / adjustedTotal;
-      newLeftSize *= ratio;
-      newRightSize *= ratio;
-    }
-
-    // Update sizes
-    const newSizes = [...this.startSizes];
-    newSizes[leftIdx] = newLeftSize;
-    newSizes[rightIdx] = newRightSize;
-
-    this.applySizes(newSizes);
-
-    // Update handle aria value
-    const handle = this.handles[this.activeHandleIndex];
-    if (handle) {
-      const splitPercent = (newLeftSize / pairTotal) * 100;
-      handle.updateAriaValue(splitPercent);
-    }
-
-    // Dispatch resize event
-    this.dispatchResizeEvent("rel-resize");
-  }
-
-  /* =======================
-   * KEYBOARD HANDLING
-   * ======================= */
-
-  private onKeyDown = (e: KeyboardEvent) => {
-    const target = e.composedPath()[0] as HTMLElement;
-    if (target.tagName !== "REL-RESIZABLE-HANDLE") return;
-
-    const handle = target as RelResizableHandle;
-    const handleIndex = this.handles.indexOf(handle);
-    if (handleIndex === -1) return;
-
-    const isHorizontal = this.direction === "horizontal";
-    const step = e.shiftKey ? 5 : 2;
-    let applied = false;
-
-    if (isHorizontal && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-      e.preventDefault();
-      const delta = e.key === "ArrowLeft" ? -step : step;
-      this.applyKeyboardResize(handleIndex, delta);
-      applied = true;
-    } else if (!isHorizontal && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-      e.preventDefault();
-      const delta = e.key === "ArrowUp" ? -step : step;
-      this.applyKeyboardResize(handleIndex, delta);
-      applied = true;
-    } else if (e.key === "Home" || e.key === "End") {
-      // APG window-splitter: Home collapses the leading panel to its min,
-      // End grows it to its max (both still clamped by the neighbor).
-      const leftPanel = this.panels[handleIndex];
-      if (leftPanel && handleIndex + 1 < this.panels.length) {
-        e.preventDefault();
-        const target = e.key === "Home" ? leftPanel.minSize : leftPanel.maxSize;
-        this.applyKeyboardResize(handleIndex, target - leftPanel.currentSize);
-        applied = true;
-      }
-    }
-
-    if (applied) {
-      this.dispatchResizeEvent("rel-resize-end");
-    }
-  };
-
-  private applyKeyboardResize(handleIndex: number, deltaPercent: number) {
-    const leftIdx = handleIndex;
-    const rightIdx = handleIndex + 1;
-
-    if (leftIdx < 0 || rightIdx >= this.panels.length) return;
-
-    const leftPanel = this.panels[leftIdx];
-    const rightPanel = this.panels[rightIdx];
-    const currentSizes = this.panels.map((p) => p.currentSize);
-
-    let newLeftSize = currentSizes[leftIdx] + deltaPercent;
-    let newRightSize = currentSizes[rightIdx] - deltaPercent;
-
-    // Clamp to min/max
-    newLeftSize = Math.max(leftPanel.minSize, Math.min(leftPanel.maxSize, newLeftSize));
-    newRightSize = Math.max(rightPanel.minSize, Math.min(rightPanel.maxSize, newRightSize));
-
-    // Ensure total is preserved
-    const pairTotal = currentSizes[leftIdx] + currentSizes[rightIdx];
-    const adjustedTotal = newLeftSize + newRightSize;
-    if (adjustedTotal !== pairTotal) {
-      const ratio = pairTotal / adjustedTotal;
-      newLeftSize *= ratio;
-      newRightSize *= ratio;
-    }
-
-    // Update sizes
-    const newSizes = [...currentSizes];
-    newSizes[leftIdx] = newLeftSize;
-    newSizes[rightIdx] = newRightSize;
-
-    this.applySizes(newSizes);
-
-    // Update handle aria value
-    const handle = this.handles[handleIndex];
-    if (handle) {
-      const splitPercent = (newLeftSize / pairTotal) * 100;
-      handle.updateAriaValue(splitPercent);
-    }
-  }
-
-  /* =======================
-   * SIZE APPLICATION
-   * ======================= */
-
-  private applySizes(sizes: number[]) {
-    this.panels.forEach((panel, idx) => {
-      const size = sizes[idx] || 0;
-      panel.currentSize = size;
-      panel.style.flexBasis = `${size}%`;
-      panel.style.flexGrow = "0";
-      panel.style.flexShrink = "0";
-    });
-  }
-
-  /* =======================
-   * EVENTS
-   * ======================= */
-
-  private dispatchResizeEvent(eventName: string) {
-    const sizes = this.panels.map((p) => p.currentSize);
-    this.dispatchEvent(
-      new CustomEvent(eventName, {
-        detail: {
-          direction: this.direction,
-          sizes,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  /* =======================
-   * GLOBAL LISTENERS
-   * ======================= */
-
-  private addGlobalListeners() {
-    document.addEventListener("pointermove", this.onPointerMove);
-    document.addEventListener("pointerup", this.onPointerUp);
-  }
-
-  private removeGlobalListeners() {
-    document.removeEventListener("pointermove", this.onPointerMove);
-    document.removeEventListener("pointerup", this.onPointerUp);
-  }
-
-  /* =======================
-   * RENDER
-   * ======================= */
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-resizable-group": RelResizableGroup;
-  }
-}

package/dist/components/rel-resizable/rel-resizable-handle.ts

@@ -1,150 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-resizable-handle")
-export class RelResizableHandle extends LitElement {
-  /* =======================
-   * PUBLIC API
-   * ======================= */
-
-  @property({ type: String, reflect: true }) orientation: "horizontal" | "vertical" = "horizontal";
-
-  /* =======================
-   * INTERNAL STATE
-   * ======================= */
-
-  /** Index of this handle in the parent group */
-  public handleIndex = -1;
-  
-  /** Current split value (0-100) for aria-valuenow */
-  public splitValue = 50;
-
-  /* =======================
-   * STYLES
-   * ======================= */
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      position: relative;
-      outline: none;
-      background: var(--rel-border-default);
-      transition: background 0.15s ease;
-    }
-
-    :host([orientation="horizontal"]) {
-      width: 8px;
-      min-width: 8px;
-      cursor: col-resize;
-    }
-
-    :host([orientation="vertical"]) {
-      height: 8px;
-      min-height: 8px;
-      cursor: row-resize;
-    }
-
-    :host(:hover),
-    :host(:focus-visible) {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    :host([dragging]) {
-      background: var(--rel-bg-neutral-elevated-3);
-    }
-
-    :host(:focus-visible) {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .grabber {
-      background: var(--rel-text-body);
-      border-radius: var(--rel-border-radius-full-rounded);
-      transition: background 0.15s ease;
-    }
-
-    :host([orientation="horizontal"]) .grabber {
-      width: 4px;
-      height: 24px;
-    }
-
-    :host([orientation="vertical"]) .grabber {
-      width: 24px;
-      height: 4px;
-    }
-
-    :host(:hover) .grabber,
-    :host(:focus-visible) .grabber {
-      background: var(--rel-bg-surface);
-    }
-
-    :host([data-dragging]) {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    :host([data-dragging]) .grabber {
-      background: var(--rel-text-default);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      :host {
-        transition: none;
-      }
-
-      .grabber {
-        transition: none;
-      }
-    }
-  `;
-
-  /* =======================
-   * LIFECYCLE
-   * ======================= */
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("tabindex", "0");
-    this.setAttribute("role", "separator");
-    this.updateAriaOrientation();
-  }
-
-  updated(changed: Map<string, unknown>) {
-    if (changed.has("orientation")) {
-      this.updateAriaOrientation();
-    }
-  }
-
-  /* =======================
-   * ARIA
-   * ======================= */
-
-  private updateAriaOrientation() {
-    this.setAttribute("aria-orientation", this.orientation);
-  }
-
-  public updateAriaValue(value: number) {
-    this.splitValue = value;
-    this.setAttribute("aria-valuenow", String(Math.round(value)));
-    this.setAttribute("aria-valuemin", "0");
-    this.setAttribute("aria-valuemax", "100");
-  }
-
-  /* =======================
-   * RENDER
-   * ======================= */
-
-  render() {
-    return html`<div class="grabber"></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-resizable-handle": RelResizableHandle;
-  }
-}

package/dist/components/rel-resizable/rel-resizable-panel.ts

@@ -1,58 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-resizable-panel")
-export class RelResizablePanel extends LitElement {
-  /* =======================
-   * PUBLIC API
-   * ======================= */
-
-  @property({ type: Number, attribute: "defaultsize" }) defaultSize?: number;
-  @property({ type: Number, attribute: "minsize" }) minSize = 10;
-  @property({ type: Number, attribute: "maxsize" }) maxSize = 90;
-
-  /* =======================
-   * INTERNAL STATE
-   * ======================= */
-
-  /** Current computed size in percentage */
-  public currentSize = 0;
-
-  /* =======================
-   * STYLES
-   * ======================= */
-
-  static styles = css`
-    /* Default typography for slotted panel headings (Figma headings-md) */
-    ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4) {
-      font-family: var(--rel-headings-md-font-family);
-      font-weight: var(--rel-headings-md-font-weight);
-      font-size: var(--rel-headings-md-font-size);
-      line-height: var(--rel-headings-md-line-height);
-      letter-spacing: var(--rel-headings-md-letter-spacing);
-    }
-
-    :host {
-      padding: var(--rel-spacing-md);
-      color: var(--rel-text-default);
-      display: flex;
-      flex-direction: column;
-      overflow: auto;
-      box-sizing: border-box;
-    }
-  `;
-
-  /* =======================
-   * RENDER
-   * ======================= */
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-resizable-panel": RelResizablePanel;
-  }
-}