@reliability-design/web 1.0.3 → 1.1.1

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

@@ -21,6 +21,13 @@ export class RelRadio extends LitElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @property({ type: String }) value = "";
+
+  checked = false;
+
+  private _onChange: (value: string) => void = () => {};
+  private _onTouched: () => void = () => {};
+
   static styles = css`
     :host {
       display: block;
@@ -60,27 +67,35 @@ export class RelRadio extends LitElement {
     .radio-custom {
       width: 20px;
       height: 20px;
-      border: 2px solid var(--rel-colors-black);
+      border: 2px solid var(--rel-text-heading, #2b2b2b);
       border-radius: 50%;
       position: relative;
+      flex-shrink: 0;
+    }
+
+    input:focus-visible + .radio-custom {
+      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline-offset: 2px;
     }
 
     input:checked + .radio-custom::after {
       content: "";
       position: absolute;
       inset: 4px;
-      background: var(--rel-colors-black);
+      background: var(--rel-text-heading, #2b2b2b);
       border-radius: 50%;
     }
 
     .radio-label {
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
+      font-size: var(--rel-fontSizes-sm, 12px);
+      font-weight: var(--rel-fontWeights-medium, 500);
+      color: var(--rel-text-primary, #333);
     }
 
     .radio-supporting {
-      font-size: var(--rel-fontSizes-xs);
+      font-size: var(--rel-fontSizes-xs, 10px);
       margin-left: 28px;
+      color: var(--rel-text-placeholder, #a9a9a9);
     }
 
     .error .radio-custom {
@@ -97,13 +112,22 @@ export class RelRadio extends LitElement {
 
     this.selectedValue = value;
     this.dispatchEvent(
-      new CustomEvent("changed", {
+      new CustomEvent("rel-change", {
+        detail: {
+          checked: this.selectedValue === value,
+          value,
+        },
         bubbles: true,
         composed: true,
       })
     );
+    this._onChange(this.value);
   }
 
+  registerOnChange(fn: (value: string) => void): void { this._onChange = fn; }
+  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
+  writeValue(value: string): void { this.checked = value === this.value; }
+
   private renderOption(option: RadioOption) {
     const isChecked = this.selectedValue === option.value;
     const isDisabled = this.disabled || option.disabled;
@@ -125,6 +149,7 @@ export class RelRadio extends LitElement {
             .checked="${isChecked}"
             ?disabled="${isDisabled}"
             @change="${() => this.onChange(option.value)}"
+            @blur="${() => this._onTouched()}"
           />
           <span class="radio-custom"></span>
           <span class="radio-label">${option.label}</span>

package/dist/components/rel-resizable/README.md

@@ -0,0 +1,140 @@
+# Resizable Components
+
+A flexible resizable panel system built with Lit web components for the Reliability Design System.
+
+## Components
+
+### `<rel-resizable-group>`
+Container for resizable panels. Manages layout direction and coordinates resizing between panels.
+
+**Attributes:**
+- `direction` (string): Layout direction - `"horizontal"` (default) or `"vertical"`
+
+**Events:**
+- `rel-resize`: Emitted during resize with detail `{ direction, sizes: number[] }`
+- `rel-resize-end`: Emitted when resize completes with detail `{ direction, sizes: number[] }`
+
+### `<rel-resizable-panel>`
+Individual resizable panel within a group.
+
+**Attributes:**
+- `defaultsize` (number): Initial size in percentage (optional)
+- `minsize` (number): Minimum size in percentage (default: 10)
+- `maxsize` (number): Maximum size in percentage (default: 90)
+
+### `<rel-resizable-handle>`
+Draggable separator between panels.
+
+**Features:**
+- Pointer drag support (click and drag to resize)
+- Keyboard navigation:
+  - Horizontal: ArrowLeft/ArrowRight (2% step, 5% with Shift)
+  - Vertical: ArrowUp/ArrowDown (2% step, 5% with Shift)
+- Accessible with `role="separator"` and ARIA attributes
+- Visual feedback on hover/focus/drag
+
+## Usage
+
+### Basic Horizontal Layout
+```html
+<rel-resizable-group direction="horizontal">
+  <rel-resizable-panel defaultsize="50">
+    Left Panel
+  </rel-resizable-panel>
+  <rel-resizable-handle></rel-resizable-handle>
+  <rel-resizable-panel defaultsize="50">
+    Right Panel
+  </rel-resizable-panel>
+</rel-resizable-group>
+```
+
+### Vertical Layout
+```html
+<rel-resizable-group direction="vertical">
+  <rel-resizable-panel defaultsize="40">
+    Top Panel
+  </rel-resizable-panel>
+  <rel-resizable-handle></rel-resizable-handle>
+  <rel-resizable-panel defaultsize="60">
+    Bottom Panel
+  </rel-resizable-panel>
+</rel-resizable-group>
+```
+
+### Nested Layout
+```html
+<rel-resizable-group direction="horizontal">
+  <rel-resizable-panel defaultsize="33">
+    Left Sidebar
+  </rel-resizable-panel>
+  <rel-resizable-handle></rel-resizable-handle>
+  <rel-resizable-panel defaultsize="67">
+    <rel-resizable-group direction="vertical">
+      <rel-resizable-panel defaultsize="50">
+        Top Content
+      </rel-resizable-panel>
+      <rel-resizable-handle></rel-resizable-handle>
+      <rel-resizable-panel defaultsize="50">
+        Bottom Content
+      </rel-resizable-panel>
+    </rel-resizable-group>
+  </rel-resizable-panel>
+</rel-resizable-group>
+```
+
+### With Constraints
+```html
+<rel-resizable-group direction="horizontal">
+  <rel-resizable-panel defaultsize="30" minsize="20" maxsize="50">
+    Constrained Panel
+  </rel-resizable-panel>
+  <rel-resizable-handle></rel-resizable-handle>
+  <rel-resizable-panel defaultsize="70">
+    Main Panel
+  </rel-resizable-panel>
+</rel-resizable-group>
+```
+
+## How It Works
+
+### Size Calculation
+1. **Initialization**: On first render, the group reads all direct child panels and handles
+2. **Default Sizes**: If panels specify `defaultsize`, those are used; otherwise space is distributed evenly
+3. **Normalization**: All sizes are normalized to total 100% across all panels
+4. **Percentage-Based**: Sizes are always in percentages, ensuring responsive layouts
+
+### Resizing Behavior
+- **Pointer Drag**: Click and drag a handle to resize adjacent panels
+- **Keyboard**: Focus a handle and use arrow keys (direction-aware)
+- **Constraints**: Min/max sizes are enforced; total percentage is always preserved
+- **Pair Adjustment**: Only the two panels adjacent to a handle are resized
+
+### Events
+- Use `rel-resize` to track live resizing (useful for updating dependent content)
+- Use `rel-resize-end` to react after resize completes (useful for saving preferences)
+
+## Accessibility
+
+- Handles are keyboard focusable with `tabindex="0"`
+- `role="separator"` with appropriate `aria-orientation`
+- `aria-valuenow`, `aria-valuemin`, `aria-valuemax` reflect current split
+- Visual focus indicators using design tokens
+- Standard cursor changes (col-resize/row-resize)
+
+## Styling
+
+All styling uses Reliability Design System tokens:
+- Borders: `--rel-borders-width-stroke-100`
+- Colors: `--rel-colors-gray-*`, `--rel-colors-blue-primary`, `--rel-colors-white`
+- Spacing: `--rel-spacing-space-*`
+- Border radius: `--rel-borders-radius-border-radius-*`
+
+Panels have `overflow: auto` by default for scrollable content.
+
+## Limitations
+
+1. **Direct Children Only**: Panels and handles must be direct children of the group
+2. **Handle Placement**: Handles should be placed between panels in the expected order
+3. **No Collapse**: Panels cannot collapse to 0% (use min/max to control)
+4. **Single Direction**: Each group has one direction; nest groups for complex layouts
+5. **Manual Updates**: Group doesn't automatically observe DOM changes after initialization

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

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

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;
+  }
+}