@reliability-design/web 1.0.3 → 1.0.6

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

@@ -0,0 +1,327 @@
+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;
+
+  /* =======================
+   * 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() {
+    // Resolve trigger once from light DOM
+    this.triggerEl = this.querySelector(
+      '[slot="trigger"]',
+    ) as HTMLElement | null;
+    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 trigger
+    const triggerNode = path.find(
+      (n) => n instanceof HTMLElement && n.getAttribute?.("slot") === "trigger",
+    ) as HTMLElement | undefined;
+
+    if (!triggerNode) return;
+
+    // Prevent this interaction from becoming an "outside click"
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.triggerEl = triggerNode;
+    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 applyTriggerAria() {
+    if (!this.triggerEl) return;
+    this.triggerEl.setAttribute("aria-haspopup", "dialog");
+    this.triggerEl.setAttribute("aria-expanded", String(this.activeOpen));
+  }
+
+  /* =======================
+   * RENDER
+   * ======================= */
+
+  render() {
+    return html`
+      <slot name="trigger"></slot>
+
+      <div
+        class="content-wrapper"
+        style="${this.contentStyle}"
+        ?open="${this.activeOpen}"
+      >
+        <slot></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-quote-page/README.md

@@ -0,0 +1,166 @@
+# rel-quote-page
+
+## Overview
+A comprehensive freight shipping quote form component with all necessary fields for LTL (Less Than Truckload) shipping quotes. Features two main sections (Shipping Details and Commodity Details) with 24+ form fields including location search, service level tabs, radio groups, dropdowns, dimension inputs, and date picker. Automatically dispatches `form-change` events for external form handling.
+
+## Usage
+```html
+<!-- Basic usage -->
+<rel-quote-page></rel-quote-page>
+
+<!-- With form change listener -->
+<rel-quote-page id="quoteForm"></rel-quote-page>
+<script>
+  const form = document.getElementById('quoteForm');
+  form.addEventListener('form-change', (e) => {
+    console.log('Form data:', e.detail);
+    // e.detail contains the complete QuoteFormData object
+  });
+</script>
+
+<!-- Programmatically access form data -->
+<rel-quote-page id="quote"></rel-quote-page>
+<script>
+  const quote = document.getElementById('quote');
+  // Access form data via the formData property
+  console.log(quote.formData.pickupLocation);
+  console.log(quote.formData.serviceLevel);
+  console.log(quote.formData.totalWeight);
+</script>
+```
+
+## API
+
+### Properties
+All form data is managed internally via a reactive `formData` state property (not directly settable). Access it via the `formData` property or the `form-change` event.
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `form-change` | `QuoteFormData` | Fired whenever any form field changes |
+
+## QuoteFormData Interface
+```typescript
+interface QuoteFormData {
+  // Shipping Details
+  pickupLocation: string;
+  dropoffLocation: string;
+  serviceLevel: "standard" | "guaranteed";
+  originType: "commercial" | "residential";
+  destinationType: "commercial" | "residential";
+  loadingRequirements: string;
+  deliveryRequirements: string;
+  loadingLimitedAccessType: string;
+  deliveryLimitedAccessType: string;
+  pickupDate: string; // Date in YYYY-MM-DD format
+  
+  // Commodity Details
+  isHazmat: boolean;
+  commodity: string;
+  commodityDescription: string;
+  handlingUnits: number;
+  handlingType: string;
+  length: number; // inches
+  width: number; // inches
+  height: number; // inches
+  totalWeight: number; // lbs
+  class: string; // freight class
+  insuredValue: number;
+  nmfcNumber: string;
+}
+```
+
+## Slots
+None. This component provides a complete, self-contained form UI.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+
+### Font Tokens
+- `--rel-fontSizes-xl` - Section titles (24px)
+- `--rel-fontSizes-lg` - Large text
+- `--rel-fontSizes-md` - Subsection titles (16px)
+- `--rel-fontSizes-sm` - Field labels, inputs (14px)
+- `--rel-fontSizes-xs` - Helper text, dimension labels (12px)
+- `--rel-fontWeights-bold` - Section titles
+- `--rel-fontWeights-semibold` - Subsection titles
+- `--rel-fontWeights-medium` - Field labels, radio labels
+
+### Color Tokens
+- `--rel-colors-white` - Component background, input backgrounds, tab background
+- `--rel-colors-black` - Section title, active tab background, radio selected, input focus border
+- `--rel-colors-green-primary` - Subsection title bullet
+- `--rel-colors-red-primary` - Required field asterisks
+- `--rel-colors-gray-heading` - Field labels, subsection titles
+- `--rel-colors-gray-primary` - Input text, radio labels
+- `--rel-colors-gray-placeholder` - Helper text
+- `--rel-colors-gray-border` - Input borders, tab borders
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-300` - Component and input border radius (16px/similar)
+
+### Spacing Tokens
+- `--rel-spacing-space-xl` - Component padding
+- `--rel-spacing-space-2xl` - Section bottom margin
+- `--rel-spacing-space-lg` - Section row gap, field bottom margin
+- `--rel-spacing-space-md` - Subsection margins, field group gap, service level tab bottom margin
+- `--rel-spacing-space-sm` - Input padding, radio group gap
+- `--rel-spacing-space-xs` - Tab padding, dimension input padding
+- `--rel-spacing-space-2xs` - Field label-input gap
+- `--rel-spacing-space-3xs` - Info icon gap, dimension label gap
+
+## Accessibility
+- All required fields are marked with a red asterisk and `required` class
+- Input fields have associated `<label>` elements
+- Radio groups use custom styled divs (not native radios) but support click interaction
+- Helper text provides additional context for complex fields
+- Info icons (`ⓘ`) use `cursor: help` to indicate additional information
+
+### Keyboard Interactions
+- Standard form navigation (Tab, Shift+Tab)
+- Native input keyboard support (text, number, date, select)
+- Service level tabs are `<button>` elements and keyboard accessible
+
+### Focus Behavior
+- Inputs show focus border via `:focus-visible` (black border)
+- Standard browser focus behavior for all form controls
+
+## Notes / Edge Cases
+- **Form sections**:
+  1. **Shipping Details**: Pickup/dropoff locations, service level, origin/destination types, loading/delivery requirements, limited access types, pickup date
+  2. **Commodity Details**: Hazmat status, commodity info, handling units/type, dimensions (L/W/H), total weight, class, insured value, NMFC number
+
+- **Service Level**: Toggle between "Standard" and "Guaranteed" using tab buttons (black background when active)
+
+- **Radio groups**: Custom styled (not native `<input type="radio">`) using divs with visual indicators
+
+- **Dimension inputs**: Grid layout with 4 columns (Length, Width, Height, Total Weight)
+  - Width and Height show "96\" max" helper text
+  - Inputs show unit labels (inches, lbs)
+
+- **Responsive design**: Two-column grid on desktop (`grid-template-columns: 1fr 1fr`), single column on mobile (≤768px)
+
+- **Location inputs**: Include search icon emoji (🔍) on the right side
+
+- **Helper text**: Loading Requirements field includes detailed explanation about inside pickup/delivery and liftgate requirements
+
+- **Info icons**: Small circular icons with `ⓘ` character, `cursor: help`
+
+- **Subsection titles**: Include a green circular bullet (`::before` pseudo-element)
+
+- **Dropdowns**: Custom styled `<select>` with SVG dropdown arrow (appearance: none)
+
+- The component has max-width of 900px and is centered with `margin: 0 auto`
+
+- Box shadow and border radius give the component a card-like appearance
+
+- All form updates trigger the `form-change` event with the complete `formData` object
+
+- Number inputs use `parseInt()` or `parseFloat()` with fallback to 0 for invalid values
+
+- Date input is native HTML5 `type="date"`