@reliability-design/web 1.0.2 → 1.0.6

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

@@ -0,0 +1,374 @@
+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
+   * ======================= */
+
+  @property({ type: String }) 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 {
+      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);
+  }
+
+  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) => {
+    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;
+
+    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;
+    }
+
+    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

@@ -0,0 +1,149 @@
+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 {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      position: relative;
+      outline: none;
+      background: var(--rel-colors-gray-border);
+      transition: background 0.15s ease;
+    }
+
+    :host([orientation="horizontal"]) {
+      width: var(--rel-borders-width-stroke-100);
+      min-width: var(--rel-borders-width-stroke-100);
+      cursor: col-resize;
+      padding: 0 var(--rel-spacing-space-xs);
+      margin: 0 calc(var(--rel-spacing-space-xs) * -1);
+    }
+
+    :host([orientation="vertical"]) {
+      height: var(--rel-borders-width-stroke-100);
+      min-height: var(--rel-borders-width-stroke-100);
+      cursor: row-resize;
+      padding: var(--rel-spacing-space-xs) 0;
+      margin: calc(var(--rel-spacing-space-xs) * -1) 0;
+    }
+
+    :host(:hover),
+    :host(:focus-visible) {
+      background: var(--rel-colors-blue-primary);
+    }
+
+    :host(:focus-visible) {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    .grabber {
+      background: var(--rel-colors-gray-placeholder);
+      border-radius: var(--rel-borders-radius-border-radius-500);
+      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-colors-white);
+    }
+
+    :host([data-dragging]) {
+      background: var(--rel-colors-blue-primary);
+    }
+
+    :host([data-dragging]) .grabber {
+      background: var(--rel-colors-white);
+    }
+
+    @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

@@ -0,0 +1,47 @@
+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`
+    :host {
+      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;
+  }
+}

package/dist/components/rel-segmented-button/README.md

@@ -0,0 +1,141 @@
+# rel-segmented-button
+
+## Overview
+A segmented button group for mutually exclusive selections. Displays multiple options as connected buttons with a single active selection. Supports size variants, alignment options, and individual option states (disabled).
+
+## Usage
+```html
+<!-- Basic segmented button -->
+<rel-segmented-button id="viewMode" active="grid"></rel-segmented-button>
+<script>
+  const viewMode = document.getElementById('viewMode');
+  viewMode.options = [
+    { label: 'List', value: 'list' },
+    { label: 'Grid', value: 'grid' },
+    { label: 'Table', value: 'table' }
+  ];
+</script>
+
+<!-- Small size with alignment -->
+<rel-segmented-button
+  id="textAlign"
+  size="small"
+  align="middle"
+  active="center">
+</rel-segmented-button>
+<script>
+  const textAlign = document.getElementById('textAlign');
+  textAlign.options = [
+    { label: 'Left', value: 'left' },
+    { label: 'Center', value: 'center' },
+    { label: 'Right', value: 'right' }
+  ];
+</script>
+
+<!-- With disabled option -->
+<rel-segmented-button id="planSelector"></rel-segmented-button>
+<script>
+  const planSelector = document.getElementById('planSelector');
+  planSelector.options = [
+    { label: 'Free', value: 'free' },
+    { label: 'Pro', value: 'pro' },
+    { label: 'Enterprise', value: 'enterprise', disabled: true }
+  ];
+  planSelector.active = 'free';
+</script>
+
+<!-- Listen for changes -->
+<rel-segmented-button id="sortOrder"></rel-segmented-button>
+<script>
+  const sortOrder = document.getElementById('sortOrder');
+  sortOrder.options = [
+    { label: 'Newest', value: 'newest' },
+    { label: 'Oldest', value: 'oldest' },
+    { label: 'Popular', value: 'popular' }
+  ];
+  sortOrder.addEventListener('changed', (e) => {
+    console.log('Selected:', e.detail.value);
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `SegmentOption[]` | `[]` | Array of segment options (see SegmentOption interface below) |
+| `active` | `string` | `""` | Value of the currently active segment |
+| `size` | `"small" \| "medium"` | `"medium"` | Size variant |
+| `align` | `"left" \| "middle" \| "right"` | `"left"` | Horizontal alignment of the button group |
+
+### SegmentOption Interface
+```typescript
+interface SegmentOption {
+  label: string;      // Display text for the button
+  value: string;      // Unique value identifier
+  disabled?: boolean; // Optional: disable this specific segment
+}
+```
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `changed` | `{ value: string }` | Fired when a different segment is selected |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-xs`, `--rel-fontSizes-sm` - Font sizes for small and medium variants
+- `--rel-fontWeights-medium` - Font weight for segment labels
+
+### Spacing Tokens
+- `--rel-spacing-space-3xs`, `--rel-spacing-space-2xs` - Vertical padding for sizes
+- `--rel-spacing-space-xs`, `--rel-spacing-space-sm` - Horizontal padding for sizes
+
+### Color Tokens
+- `--rel-colors-white` - Default segment background
+- `--rel-colors-gray-border` - Outer border and segment dividers
+- `--rel-text-heading` - Active segment background and default text color
+- `--rel-surface-surface` - Hover and disabled background
+- `--rel-text-disabled` - Disabled text color
+- `--rel-border-info` - Focus outline color
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-300` - Border radius for the group
+
+## Accessibility
+- Uses native `<button>` elements for proper keyboard navigation
+- Focus visible state with inner outline for keyboard users
+- Disabled segments use `pointer-events: none` and reduced opacity
+- Each segment can receive focus independently
+
+### Keyboard Interactions
+- `Tab` - Move focus between segments
+- `Space/Enter` - Activate focused segment
+- `Arrow Left/Right` - Navigate between segments (browser default)
+
+### Focus Behavior
+- Focus outline appears inside the button boundary with `-2px` offset
+- Uses info border color for high contrast
+- Active button has `z-index: 1` to ensure focus ring is visible over adjacent segments
+
+## Notes / Edge Cases
+- The component is `display: inline-block` and sizes to fit content
+- All segments are connected with shared borders (2px solid gray)
+- The last segment has no right border to avoid doubling with the outer container border
+- Active segment has inverted colors (dark background, white text)
+- Hovering a non-active, non-disabled segment shows a light gray background
+- Hovering the active segment does not change its appearance
+- Disabled segments show reduced opacity (0.5), gray background, and are non-interactive
+- The `align` property uses flexbox justify-content (left → flex-start, middle → center, right → flex-end)
+- Size variants affect both font size and padding
+- Smooth transitions (0.2s ease-in-out) apply to all visual changes
+- Clicking a disabled option will not change the `active` value or dispatch events