@reliability-design/web 1.0.3 → 1.1.1

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

@@ -0,0 +1,330 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+
+type SideType = "top" | "right" | "bottom" | "left";
+type AlignType = "start" | "center" | "end";
+
+@customElement("rel-popover")
+export class RelPopover extends LitElement {
+  /* =======================
+   * PUBLIC API
+   * ======================= */
+
+  @property({ type: Boolean, reflect: true }) open?: boolean;
+  @property({ type: Boolean, attribute: "defaultopen" }) defaultOpen = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ type: String }) side: SideType = "bottom";
+  @property({ type: String }) align: AlignType = "center";
+  @property({ type: Number, attribute: "sideoffset" }) sideOffset = 8;
+  @property({ type: Number, attribute: "alignoffset" }) alignOffset = 0;
+
+  @property({ type: Boolean, attribute: "trapfocus" }) trapFocus = false;
+  @property({ type: Boolean, attribute: "closeonescape" }) closeOnEscape = true;
+  @property({ type: Boolean, attribute: "closeonoutsideclick" })
+  closeOnOutsideClick = true;
+
+  /* =======================
+   * INTERNAL STATE
+   * ======================= */
+
+  @state() private internalOpen = false;
+  @state() private contentStyle = "";
+
+  @query(".content-wrapper") private contentWrapper!: HTMLDivElement;
+
+  private triggerEl: HTMLElement | null = null;
+  private returnFocusEl: HTMLElement | null = null;
+  private uniqueId = `popover-${Math.random().toString(36).slice(2)}`;
+
+  /* =======================
+   * STYLES
+   * ======================= */
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+    .content-wrapper {
+      position: fixed;
+      z-index: 1001;
+      display: none;
+    }
+
+    .content-wrapper[open] {
+      display: block;
+    }
+  `;
+
+  /* =======================
+   * LIFECYCLE
+   * ======================= */
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.internalOpen = this.isControlled() ? !!this.open : this.defaultOpen;
+
+    // ONE interaction entry point — capture phase
+    this.addEventListener("pointerdown", this.onHostPointerDown, true);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("pointerdown", this.onHostPointerDown, true);
+    this.removeGlobalListeners();
+  }
+
+  firstUpdated() {
+    // triggerEl is resolved via onTriggerSlotChange; call aria in case slot
+    // content was already assigned before firstUpdated
+    this.applyTriggerAria();
+  }
+
+  updated(changed: Map<string, unknown>) {
+    if (changed.has("open") && this.isControlled()) {
+      this.internalOpen = !!this.open;
+    }
+
+    if (changed.has("internalOpen") || changed.has("open")) {
+      this.applyTriggerAria();
+      this.activeOpen ? this.onOpen() : this.onClose();
+    }
+  }
+
+  /* =======================
+   * STATE HELPERS
+   * ======================= */
+
+  private isControlled() {
+    return this.open !== undefined;
+  }
+
+  private get activeOpen() {
+    return this.isControlled() ? !!this.open : this.internalOpen;
+  }
+
+  private setOpen(next: boolean) {
+    if (!this.isControlled()) {
+      this.internalOpen = next;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent("rel-open-change", {
+        detail: { open: next },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  /* =======================
+   * POINTER HANDLING (THE FIX)
+   * ======================= */
+
+  private onHostPointerDown = (e: PointerEvent) => {
+    if (this.disabled) return;
+
+    const path = e.composedPath();
+
+    // Toggle ONLY if pointerdown originated from the trigger element
+    if (!this.triggerEl || !path.includes(this.triggerEl)) return;
+
+    // Prevent this interaction from becoming an "outside click"
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.setOpen(!this.activeOpen);
+  };
+
+  /* =======================
+   * OPEN / CLOSE
+   * ======================= */
+
+  private onOpen() {
+    this.returnFocusEl =
+      (document.activeElement as HTMLElement) ?? this.triggerEl;
+
+    this.addGlobalListeners();
+
+    requestAnimationFrame(() => {
+      this.updatePosition();
+      this.focusFirst();
+    });
+  }
+
+  private onClose() {
+    this.removeGlobalListeners();
+    this.restoreFocus();
+  }
+
+  /* =======================
+   * GLOBAL LISTENERS
+   * ======================= */
+
+  private addGlobalListeners() {
+    if (this.closeOnOutsideClick) {
+      document.addEventListener("pointerdown", this.onOutsidePointerDown);
+    }
+
+    if (this.closeOnEscape || this.trapFocus) {
+      document.addEventListener("keydown", this.onKeyDown);
+    }
+
+    window.addEventListener("resize", this.updatePosition);
+    window.addEventListener("scroll", this.updatePosition, true);
+  }
+
+  private removeGlobalListeners() {
+    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
+    document.removeEventListener("keydown", this.onKeyDown);
+    window.removeEventListener("resize", this.updatePosition);
+    window.removeEventListener("scroll", this.updatePosition, true);
+  }
+
+  private onOutsidePointerDown = (e: PointerEvent) => {
+    if (!this.activeOpen) return;
+
+    const path = e.composedPath();
+
+    if (
+      path.includes(this) ||
+      (this.triggerEl && path.includes(this.triggerEl)) ||
+      (this.contentWrapper && path.includes(this.contentWrapper))
+    ) {
+      return;
+    }
+
+    this.setOpen(false);
+  };
+
+  private onKeyDown = (e: KeyboardEvent) => {
+    if (!this.activeOpen) return;
+
+    if (e.key === "Escape" && this.closeOnEscape) {
+      e.preventDefault();
+      this.setOpen(false);
+    }
+
+    if (this.trapFocus && e.key === "Tab") {
+      this.trapFocusLoop(e);
+    }
+  };
+
+  /* =======================
+   * FOCUS
+   * ======================= */
+
+  private focusFirst() {
+    if (!this.contentWrapper) return;
+
+    const focusable = this.getFocusable(this.contentWrapper);
+    if (focusable[0]) {
+      focusable[0].focus();
+    } else {
+      this.contentWrapper.focus();
+    }
+  }
+
+  private restoreFocus() {
+    this.triggerEl?.focus();
+  }
+
+  private trapFocusLoop(e: KeyboardEvent) {
+    const focusable = this.getFocusable(this.contentWrapper);
+    if (focusable.length === 0) return;
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+
+  private getFocusable(root: HTMLElement): HTMLElement[] {
+    return Array.from(
+      root.querySelectorAll<HTMLElement>(
+        'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex="-1"])',
+      ),
+    ).filter((el) => el.offsetWidth || el.offsetHeight);
+  }
+
+  /* =======================
+   * POSITIONING
+   * ======================= */
+
+  private updatePosition = () => {
+    if (!this.triggerEl || !this.contentWrapper) return;
+
+    this.contentWrapper.setAttribute("open", "");
+
+    const t = this.triggerEl.getBoundingClientRect();
+    const c = this.contentWrapper.getBoundingClientRect();
+
+    let top = t.bottom + this.sideOffset;
+    let left = t.left + t.width / 2 - c.width / 2;
+
+    if (this.side === "top") top = t.top - c.height - this.sideOffset;
+    if (this.side === "left") left = t.left - c.width - this.sideOffset;
+    if (this.side === "right") left = t.right + this.sideOffset;
+
+    top = Math.max(8, Math.min(top, window.innerHeight - c.height - 8));
+    left = Math.max(8, Math.min(left, window.innerWidth - c.width - 8));
+
+    this.contentStyle = `top:${top}px;left:${left}px;`;
+  };
+
+  /* =======================
+   * ARIA
+   * ======================= */
+
+  private onTriggerSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    const first = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+    this.triggerEl = first ?? null;
+    this.applyTriggerAria();
+  }
+
+  private applyTriggerAria() {
+    if (!this.triggerEl) return;
+    this.triggerEl.setAttribute("aria-haspopup", "dialog");
+    this.triggerEl.setAttribute("aria-expanded", String(this.activeOpen));
+    this.triggerEl.setAttribute("aria-controls", this.uniqueId);
+  }
+
+  /* =======================
+   * RENDER
+   * ======================= */
+
+  render() {
+    return html`
+      <slot @slotchange=${this.onTriggerSlotChange}></slot>
+
+      <div
+        id="${this.uniqueId}"
+        class="content-wrapper"
+        style="${this.contentStyle}"
+        ?open="${this.activeOpen}"
+      >
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-popover": RelPopover;
+  }
+}

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

@@ -0,0 +1,110 @@
+# rel-progress
+
+## Overview
+A progress indicator component supporting four modes: linear-determinate, linear-indeterminate, circular-determinate, and circular-indeterminate. Features smooth animations, proper ARIA attributes, and respects user motion preferences by disabling animations when requested.
+
+## Usage
+```html
+<!-- Linear progress (determinate) -->
+<rel-progress mode="linear-determinate" value="45"></rel-progress>
+<rel-progress mode="linear-determinate" value="100"></rel-progress>
+
+<!-- Linear progress (indeterminate/loading) -->
+<rel-progress mode="linear-indeterminate"></rel-progress>
+
+<!-- Circular progress (determinate) -->
+<rel-progress mode="circular-determinate" value="75"></rel-progress>
+
+<!-- Circular progress (indeterminate/spinner) -->
+<rel-progress mode="circular-indeterminate"></rel-progress>
+
+<!-- Dynamic progress update -->
+<rel-progress id="uploadProgress" mode="linear-determinate" value="0"></rel-progress>
+<script>
+  const progress = document.getElementById('uploadProgress');
+  let value = 0;
+  const interval = setInterval(() => {
+    value += 10;
+    progress.value = value;
+    if (value >= 100) clearInterval(interval);
+  }, 500);
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` (reflected) | `"linear-determinate" \| "linear-indeterminate" \| "circular-determinate" \| "circular-indeterminate"` | `"linear-determinate"` | Progress indicator type |
+| `value` | `number` | `0` | Progress value (0-100) for determinate modes (ignored in indeterminate modes) |
+
+## Events
+None.
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+
+### Color Tokens
+- `--rel-colors-gray-border` - Track/background color
+- `--rel-colors-black` - Active progress bar color
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-200` - Linear track border radius
+
+## Accessibility
+- Determinate modes use `role="progressbar"` with `aria-valuenow`, `aria-valuemin="0"`, `aria-valuemax="100"`
+- Indeterminate modes use `role="progressbar"` without value attributes
+- Respects `prefers-reduced-motion: reduce` by disabling animations
+
+### Keyboard Interactions
+- None (not focusable)
+
+### Focus Behavior
+- Not focusable
+
+## Notes / Edge Cases
+- **Linear modes**:
+  - Height: `6px`
+  - Track uses gray border color
+  - Bar uses black color
+  - Border radius: `--rel-borders-radius-border-radius-200`
+  - **Determinate**: bar width transitions smoothly (0.3s ease)
+  - **Indeterminate**: 30% width bar slides left-to-right (1.5s infinite loop)
+
+- **Circular modes**:
+  - Size: `48px × 48px` (viewBox varies by mode)
+  - Stroke width: `3px` (determinate) or `4px` (indeterminate)
+  - Stroke linecap: `round`
+  - **Determinate**: 
+    - Uses `stroke-dasharray` and `stroke-dashoffset` to animate progress
+    - Circle radius: `15.9155`, circumference: `~100`
+    - Rotated -90° to start at top
+    - Progress transition: `0.35s`
+  - **Indeterminate (spinner)**: 
+    - Rotates continuously (2s linear infinite)
+    - Stroke dash animates (1.5s ease-in-out infinite)
+
+- **Value clamping**: Values are automatically clamped to 0-100 range via `safeValue` getter
+
+- **Motion preferences**:
+  - When `prefers-reduced-motion: reduce`:
+    - Linear determinate: no transition
+    - Linear indeterminate: no animation, shows full-width bar at 50% opacity
+    - Circular determinate: no transition
+    - Circular indeterminate: no rotation/dash animation, shows static partial arc
+
+- **Display modes**:
+  - Linear modes: `display: block` (full width)
+  - Circular modes: `display: inline-block` (sized to content)
+
+- The component automatically switches render methods based on `mode` property
+- Indeterminate modes ignore the `value` property

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

@@ -21,7 +21,7 @@ export class RelProgress extends LitElement {
   static styles = css`
     :host {
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
     }
 
     :host([mode*="circular"]) {
@@ -30,8 +30,8 @@ export class RelProgress extends LitElement {
 
     /* Linear */
     .linear-track {
-      background: var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      background: var(--rel-colors-gray-border, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
       height: 6px;
       overflow: hidden;
       width: 100%;
@@ -118,6 +118,32 @@ export class RelProgress extends LitElement {
         stroke-dashoffset: -124;
       }
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      .linear-bar {
+        transition: none;
+      }
+
+      .linear-bar.indeterminate {
+        animation: none;
+        width: 100%;
+        opacity: 0.5;
+      }
+
+      .spinner {
+        animation: none;
+      }
+
+      .spinner-path {
+        animation: none;
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+      }
+
+      .circular-progress {
+        transition: none;
+      }
+    }
   `;
 
   private get safeValue() {
@@ -126,7 +152,8 @@ export class RelProgress extends LitElement {
 
   private renderLinearDeterminate() {
     return html`
-      <div class="linear-track">
+      <div class="linear-track" role="progressbar"
+        aria-valuenow="${this.safeValue}" aria-valuemin="0" aria-valuemax="100">
         <div class="linear-bar" style="width: ${this.safeValue}%"></div>
       </div>
     `;
@@ -134,7 +161,7 @@ export class RelProgress extends LitElement {
 
   private renderLinearIndeterminate() {
     return html`
-      <div class="linear-track">
+      <div class="linear-track" role="progressbar">
         <div class="linear-bar indeterminate"></div>
       </div>
     `;

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