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

@@ -9,9 +9,11 @@ export type ProgressMode =
 
 @customElement("rel-progress")
 export class RelProgress extends LitElement {
-  @property({ type: String }) mode: ProgressMode = "linear-determinate";
+  @property({ type: String, reflect: true })
+  mode: ProgressMode = "linear-determinate";
 
-  @property({ type: Number }) value: number = 0;
+  @property({ type: Number })
+  value = 0;
 
   private radius = 15.9155;
   private circumference = 2 * Math.PI * this.radius;
@@ -19,17 +21,17 @@ 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"]) {
       display: inline-block;
     }
 
-    /* Linear Progress */
+    /* 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%;
@@ -58,7 +60,7 @@ export class RelProgress extends LitElement {
       }
     }
 
-    /* Circular Progress */
+    /* Circular */
     .circular {
       display: inline-block;
       width: 48px;
@@ -83,11 +85,9 @@ export class RelProgress extends LitElement {
       stroke-width: 3;
       stroke-linecap: round;
       transition: stroke-dashoffset 0.35s;
-      transform: rotate(0deg);
-      transform-origin: center;
     }
 
-    /* Circular Indeterminate Spinner */
+    /* Spinner */
     .spinner {
       animation: rotate 2s linear infinite;
     }
@@ -118,38 +118,71 @@ 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() {
+    return Math.min(100, Math.max(0, this.value));
+  }
+
   private renderLinearDeterminate() {
     return html`
-      <div class="linear-track">
-        <div class="linear-bar" style="width: ${this.value}%"></div>
+      <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>
     `;
   }
 
   private renderLinearIndeterminate() {
     return html`
-      <div class="linear-track">
+      <div class="linear-track" role="progressbar">
         <div class="linear-bar indeterminate"></div>
       </div>
     `;
   }
 
   private renderCircularDeterminate() {
-    const offset = this.circumference - (this.value / 100) * this.circumference;
+    const offset =
+      this.circumference - (this.safeValue / 100) * this.circumference;
 
     return html`
       <div class="circular">
         <svg viewBox="0 0 36 36" class="circular-svg">
-          <circle class="circular-bg" cx="18" cy="18" r="15.9155" />
+          <circle class="circular-bg" cx="18" cy="18" r="${this.radius}" />
           <circle
             class="circular-progress"
             cx="18"
             cy="18"
-            r="15.9155"
+            r="${this.radius}"
             stroke-dasharray="${this.circumference}"
-            stroke-dashoffset="${offset}" />
+            stroke-dashoffset="${offset}"
+          />
         </svg>
       </div>
     `;
@@ -159,7 +192,14 @@ export class RelProgress extends LitElement {
     return html`
       <div class="circular">
         <svg viewBox="0 0 50 50" class="spinner">
-          <circle class="spinner-path" cx="25" cy="25" r="20" fill="none" stroke-width="4" />
+          <circle
+            class="spinner-path"
+            cx="25"
+            cy="25"
+            r="20"
+            fill="none"
+            stroke-width="4"
+          />
         </svg>
       </div>
     `;
@@ -167,8 +207,6 @@ export class RelProgress extends LitElement {
 
   render() {
     switch (this.mode) {
-      case "linear-determinate":
-        return this.renderLinearDeterminate();
       case "linear-indeterminate":
         return this.renderLinearIndeterminate();
       case "circular-determinate":