@reliability-design/web 1.0.2 → 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

@@ -13,9 +13,13 @@ export interface RadioOption {
 export class RelRadio extends LitElement {
   @property({ type: Array }) options: RadioOption[] = [];
 
-  @property({ type: String }) name: string = "radio-group";
+  @property({ type: String }) name = "radio-group";
 
-  @property({ type: String }) selectedValue: string | null = null;
+  @property({ type: String, reflect: true })
+  selectedValue: string | null = null;
+
+  @property({ type: Boolean })
+  disabled = false;
 
   static styles = css`
     :host {
@@ -32,10 +36,13 @@ export class RelRadio extends LitElement {
     .rel-radio-option {
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
       gap: var(--rel-spacing-space-3xs);
       cursor: pointer;
-      position: relative;
+    }
+
+    .rel-radio-option.disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
     }
 
     .radio-main {
@@ -44,7 +51,7 @@ export class RelRadio extends LitElement {
       gap: var(--rel-spacing-space-2xs);
     }
 
-    .rel-radio-option input {
+    input {
       position: absolute;
       opacity: 0;
       pointer-events: none;
@@ -53,100 +60,65 @@ 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%;
-      display: inline-block;
       position: relative;
       flex-shrink: 0;
-      transition: all 0.2s ease-in-out;
     }
 
-    .rel-radio-option input:focus + .radio-custom {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-black);
-      outline-offset: var(--rel-spacing-space-3xs);
+    input:focus-visible + .radio-custom {
+      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline-offset: 2px;
     }
 
-    .rel-radio-option input:checked + .radio-custom::after {
+    input:checked + .radio-custom::after {
       content: "";
       position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 10px;
-      height: 10px;
-      background-color: var(--rel-colors-black);
+      inset: 4px;
+      background: var(--rel-text-heading, #2b2b2b);
       border-radius: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    /* Error state */
-    .rel-radio-option.error .radio-custom {
-      border-color: var(--rel-colors-red-secondary);
-    }
-
-    .rel-radio-option.error input:checked + .radio-custom::after {
-      background-color: var(--rel-colors-red-secondary);
-    }
-
-    .rel-radio-option.error .radio-label,
-    .rel-radio-option.error .radio-supporting {
-      color: var(--rel-colors-red-secondary);
-    }
-
-    .rel-radio-option.error input:focus + .radio-custom {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-red-secondary);
     }
 
-    /* Disabled state */
-    .rel-radio-option.disabled {
-      opacity: 0.6;
-      cursor: not-allowed !important;
-    }
-
-    .rel-radio-option.disabled .radio-label,
-    .rel-radio-option.disabled .radio-supporting {
-      cursor: not-allowed !important;
-    }
-
-    /* Text styles */
     .radio-label {
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
-      line-height: var(--rel-lineHeights-sm);
+      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);
-      color: var(--rel-colors-gray-placeholder);
+      font-size: var(--rel-fontSizes-xs, 10px);
       margin-left: 28px;
-      line-height: var(--rel-lineHeights-xs);
+      color: var(--rel-text-placeholder, #a9a9a9);
     }
 
-    .radio-supporting.error-text {
-      color: var(--rel-colors-red-secondary);
+    .error .radio-custom {
+      border-color: var(--rel-colors-red-secondary);
+    }
+
+    .error input:checked + .radio-custom::after {
+      background: var(--rel-colors-red-secondary);
     }
   `;
 
   private onChange(value: string) {
+    if (this.disabled) return;
+
     this.selectedValue = value;
     this.dispatchEvent(
       new CustomEvent("changed", {
-        detail: { value },
         bubbles: true,
         composed: true,
       })
     );
   }
 
-  private isChecked(value: string): boolean {
-    return this.selectedValue === value;
-  }
-
   private renderOption(option: RadioOption) {
-    const isChecked = this.isChecked(option.value);
+    const isChecked = this.selectedValue === option.value;
+    const isDisabled = this.disabled || option.disabled;
+
     const classes = [
       "rel-radio-option",
-      option.disabled ? "disabled" : "",
+      isDisabled ? "disabled" : "",
       option.error ? "error" : "",
     ]
       .filter(Boolean)
@@ -158,20 +130,16 @@ export class RelRadio extends LitElement {
           <input
             type="radio"
             name="${this.name}"
-            .value="${option.value}"
             .checked="${isChecked}"
-            ?disabled="${option.disabled}"
-            @change="${() => !option.disabled && this.onChange(option.value)}" />
+            ?disabled="${isDisabled}"
+            @change="${() => this.onChange(option.value)}"
+          />
           <span class="radio-custom"></span>
           <span class="radio-label">${option.label}</span>
         </div>
 
         ${option.supportingText
-          ? html`
-              <div class="radio-supporting ${option.error ? "error-text" : ""}">
-                ${option.supportingText}
-              </div>
-            `
+          ? html`<div class="radio-supporting">${option.supportingText}</div>`
           : ""}
       </label>
     `;
@@ -180,7 +148,7 @@ export class RelRadio extends LitElement {
   render() {
     return html`
       <div class="rel-radio-group">
-        ${this.options.map((option) => this.renderOption(option))}
+        ${this.options.map((o) => this.renderOption(o))}
       </div>
     `;
   }

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";