@reliability-design/web 1.0.3 → 1.0.6

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

@@ -0,0 +1,120 @@
+# rel-radio
+
+## Overview
+A radio button group component that allows users to select a single option from a list. Supports individual option states (disabled, error), supporting text, and comprehensive styling with design tokens.
+
+## Usage
+```html
+<!-- Basic example -->
+<rel-radio id="colorRadio" name="color-group" selectedValue="blue"></rel-radio>
+<script>
+  const radio = document.getElementById('colorRadio');
+  radio.options = [
+    { value: 'red', label: 'Red' },
+    { value: 'blue', label: 'Blue' },
+    { value: 'green', label: 'Green' }
+  ];
+</script>
+
+<!-- Example with supporting text and states -->
+<rel-radio id="planRadio" name="plan-group"></rel-radio>
+<script>
+  const planRadio = document.getElementById('planRadio');
+  planRadio.options = [
+    { value: 'basic', label: 'Basic Plan', supportingText: '$9.99/month' },
+    { value: 'pro', label: 'Pro Plan', supportingText: '$19.99/month' },
+    { value: 'enterprise', label: 'Enterprise', supportingText: 'Contact sales', disabled: true }
+  ];
+  planRadio.selectedValue = 'basic';
+</script>
+
+<!-- Listen for changes -->
+<rel-radio id="preferenceRadio"></rel-radio>
+<script>
+  const prefRadio = document.getElementById('preferenceRadio');
+  prefRadio.options = [
+    { value: 'email', label: 'Email' },
+    { value: 'sms', label: 'SMS' }
+  ];
+  prefRadio.addEventListener('changed', (e) => {
+    console.log('Selected:', prefRadio.selectedValue);
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `RadioOption[]` | `[]` | Array of radio options (see RadioOption interface below) |
+| `name` | `string` | `"radio-group"` | Name attribute for the radio group (for form grouping) |
+| `selectedValue` | `string \| null` | `null` | Currently selected option value (reflected attribute) |
+| `disabled` | `boolean` | `false` | Disables the entire radio group |
+
+### RadioOption Interface
+```typescript
+interface RadioOption {
+  value: string;           // Unique value for this option
+  label: string;           // Display label
+  supportingText?: string; // Optional helper text below the label
+  disabled?: boolean;      // Disable individual option
+  error?: boolean;         // Show error state for individual option
+}
+```
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `changed` | None (read `selectedValue` property) | Fired when the selected option changes |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-sm`, `--rel-fontSizes-xs` - Font sizes for label and supporting text
+- `--rel-fontWeights-medium` - Font weight for labels
+
+### Spacing Tokens
+- `--rel-spacing-space-xs` - Gap between radio options
+- `--rel-spacing-space-3xs` - Gap within each option (label and supporting text)
+- `--rel-spacing-space-2xs` - Gap between radio circle and label
+
+### Color Tokens
+- `--rel-text-heading` - Radio button border and checked dot color
+- `--rel-text-primary` - Label text color
+- `--rel-text-placeholder` - Supporting text color
+- `--rel-border-info` - Focus outline color
+- `--rel-colors-red-secondary` - Error state border and dot color
+
+## Accessibility
+- Uses visually hidden native radio inputs for proper screen reader support
+- Custom visual radio circle with proper focus indicators
+- Focus visible state with outline offset for keyboard navigation
+- Label click targets the radio for larger interaction area
+- Disabled state communicated through reduced opacity and cursor change
+- Proper `name` grouping ensures only one option can be selected
+
+### Keyboard Interactions
+- `Tab` - Move focus to/from radio group
+- `Arrow Up/Down` - Navigate between radio options
+- `Space` - Select focused option
+
+### Focus Behavior
+- Focus outline appears with offset around the custom radio circle
+- Uses info border color for high contrast
+
+## Notes / Edge Cases
+- The `selectedValue` property is reflected as an attribute and can be set programmatically or via HTML
+- When `disabled` is true on the component, all options are disabled regardless of individual option settings
+- Individual options can be disabled via the `disabled` property in the `RadioOption` object
+- The `error` property on `RadioOption` changes the radio button color to red but does not prevent selection
+- Supporting text is optional and appears below the label with left margin alignment
+- Native radio inputs are visually hidden but maintain all accessibility features
+- The `name` attribute groups radios together for form submission and mutual exclusion

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

@@ -60,27 +60,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 {

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