@reliability-design/web 1.4.6 → 1.4.8

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

@@ -1,527 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-import { announce } from "../../utils/announce";
-
-export type OtpType = "numeric" | "alphanumeric";
-
-@customElement("rel-otp")
-export class RelOtp extends LitElement {
-  @property({ type: String, reflect: true }) value = "";
-  @property({ type: Number }) length = 6;
-  @property({ type: Number, attribute: "group-size" }) groupSize = 3;
-  @property({ type: String }) placeholder = "";
-  @property({ type: String }) type: OtpType = "numeric";
-  @property({ type: Boolean }) mask = false;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: Boolean, reflect: true }) readonly = false;
-  @property({ type: Boolean }) required = false;
-  @property({ type: String }) name: string | null = null;
-  @property({ type: String }) autocomplete = "one-time-code";
-  @property({ type: String }) inputmode: "numeric" | "text" | null = null;
-  @property({ type: String }) pattern: string | null = null;
-  @property({ type: String, attribute: "aria-label" }) ariaLabel: string | null = null;
-  @property({ type: Boolean, reflect: true }) invalid = false;
-  @property({ type: Boolean, attribute: "show-separator" }) showSeparator = true;
-  // reflect: CSS targets :host([size="sm"|"lg"]) — without reflection,
-  // setting `el.size = "lg"` as a property silently applies no styles.
-  @property({ type: String, reflect: true }) size: "sm" | "md" | "lg" = "md";
-
-  @state() private cells: string[] = [];
-  @query(".hidden-input") private hiddenInput?: HTMLInputElement;
-
-  private isUpdatingFromValue = false;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    :host([disabled]) {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    .otp-root {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      position: relative;
-    }
-
-    .otp-group {
-      display: flex;
-      gap: var(--rel-spacing-2xs);
-    }
-
-    .otp-separator {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--rel-border-default);
-      user-select: none;
-      padding: 0 var(--rel-spacing-3xs);
-      font-family: var(--rel-action-xl-font-family);
-      font-weight: var(--rel-action-xl-font-weight);
-      font-size: var(--rel-action-xl-font-size);
-      line-height: var(--rel-action-xl-line-height);
-      letter-spacing: var(--rel-action-xl-letter-spacing);
-    }
-
-    .otp-separator.hidden {
-      display: none;
-    }
-
-    .otp-cell {
-      width: 40px;
-      height: 48px;
-      border: var(--rel-stroke-sm) solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm);
-      background: var(--rel-bg-neutral);
-      text-align: center;
-      color: var(--rel-text-default);
-      outline: none;
-      transition: border-color 0.15s ease, box-shadow 0.15s ease;
-      caret-color: var(--rel-text-default);
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-regular-font-weight);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    /* Size variants */
-    :host([size="sm"]) .otp-cell {
-      width: 36px;
-      height: 40px;
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    :host([size="lg"]) .otp-cell {
-      width: 48px;
-      height: 56px;
-      font-family: var(--rel-body-xl-regular-font-family);
-      font-weight: var(--rel-body-xl-regular-font-weight);
-      font-size: var(--rel-body-xl-regular-font-size);
-      line-height: var(--rel-body-xl-regular-line-height);
-      letter-spacing: var(--rel-body-xl-regular-letter-spacing);
-    }
-
-    .otp-cell::placeholder {
-      color: var(--rel-text-body);
-      opacity: 0.6;
-    }
-
-    .otp-cell:hover:not(:disabled):not(:read-only) {
-      border-color: var(--rel-border-strong);
-    }
-
-    .otp-cell:focus-visible {
-      border-color: var(--rel-border-accent);
-      box-shadow: 0 0 0 2px var(--rel-border-default);
-    }
-
-    .otp-cell:disabled {
-      background: var(--rel-bg-surface-elevated);
-      color: var(--rel-text-disabled);
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) .otp-cell {
-      cursor: not-allowed;
-    }
-
-    .otp-cell:read-only {
-      background: var(--rel-bg-neutral-elevated-1);
-      cursor: default;
-    }
-
-    /* Invalid state */
-    :host([invalid]) .otp-cell {
-      border-color: var(--rel-border-danger);
-    }
-
-    :host([invalid]) .otp-cell:focus {
-      border-color: var(--rel-border-danger);
-      box-shadow: 0 0 0 2px var(--rel-bg-danger-light);
-    }
-
-    .hidden-input {
-      position: absolute;
-      opacity: 0;
-      pointer-events: none;
-      width: 1px;
-      height: 1px;
-    }
-
-    /* Reduce motion */
-    @media (prefers-reduced-motion: reduce) {
-      .otp-cell {
-        transition: none;
-      }
-    }
-
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.initializeCells();
-  }
-
-  updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
-
-    // Only sync from external value changes, not internal updates
-    if (changedProperties.has("value") && !this.isUpdatingFromValue) {
-      this.syncCellsFromValue();
-    }
-
-    if (changedProperties.has("length")) {
-      this.initializeCells();
-    }
-  }
-
-  private initializeCells() {
-    this.cells = new Array(this.length).fill("");
-    this.syncCellsFromValue();
-  }
-
-  private syncCellsFromValue() {
-    const chars = this.value.split("").slice(0, this.length);
-    this.cells = new Array(this.length).fill("").map((_, i) => chars[i] || "");
-  }
-
-  private updateValue() {
-    this.isUpdatingFromValue = true;
-    const newValue = this.cells.join("");
-    this.value = newValue;
-
-    // Update hidden input for forms
-    if (this.hiddenInput) {
-      this.hiddenInput.value = newValue;
-    }
-
-    this.requestUpdate();
-
-    // Use setTimeout to ensure isUpdatingFromValue is reset after update cycle
-    setTimeout(() => {
-      this.isUpdatingFromValue = false;
-    }, 0);
-
-    const complete = newValue.length === this.length && this.isValidValue(newValue);
-
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { value: newValue, complete },
-        bubbles: true,
-        composed: true,
-      })
-    );
-
-    if (complete) {
-      this.dispatchEvent(
-        new CustomEvent("rel-complete", {
-          detail: { value: newValue },
-          bubbles: true,
-          composed: true,
-        })
-      );
-      announce("Code complete");
-    }
-  }
-
-  private isValidChar(char: string): boolean {
-    if (this.type === "numeric") {
-      return /^\d$/.test(char);
-    } else {
-      return /^[0-9a-zA-Z]$/.test(char);
-    }
-  }
-
-  private isValidValue(value: string): boolean {
-    if (this.type === "numeric") {
-      return /^\d+$/.test(value);
-    } else {
-      return /^[0-9a-zA-Z]+$/.test(value);
-    }
-  }
-
-  private getNextEditableIndex(): number {
-    // Find first empty cell, or return last index if all filled
-    const emptyIndex = this.cells.findIndex((c) => !c);
-    return emptyIndex >= 0 ? emptyIndex : this.length - 1;
-  }
-
-  private handlePointerDown(e: PointerEvent) {
-    if (this.disabled || this.readonly) return;
-
-    const input = e.currentTarget as HTMLInputElement;
-    const targetIndex = parseInt(input.dataset.index || "0", 10);
-    const nextEditableIndex = this.getNextEditableIndex();
-
-    // Prevent jumping ahead to empty cells
-    if (targetIndex > nextEditableIndex) {
-      e.preventDefault();
-      this.focusCell(nextEditableIndex);
-    }
-  }
-
-  private handleInput(e: Event) {
-    if (this.disabled || this.readonly) return;
-
-    const input = e.currentTarget as HTMLInputElement;
-    const index = parseInt(input.dataset.index || "0", 10);
-    let inputValue = input.value;
-
-    // Handle autofill/paste on any cell (mobile OTP can inject full code)
-    if (inputValue.length > 1) {
-      this.handlePasteValue(inputValue, index);
-      return;
-    }
-
-    // Get only the last character typed (handles replace-on-type)
-    const char = inputValue.slice(-1);
-
-    if (char && !this.isValidChar(char)) {
-      // Invalid character, revert
-      input.value = this.cells[index] || "";
-      return;
-    }
-
-    // Update cell (replace existing value)
-    this.cells[index] = char;
-    input.value = char;
-
-    this.updateValue();
-
-    // Auto-advance to next cell
-    if (char && index < this.length - 1) {
-      this.focusCell(index + 1);
-    }
-  }
-
-  private handleKeyDown(e: KeyboardEvent) {
-    if (this.disabled || this.readonly) return;
-
-    const input = e.currentTarget as HTMLInputElement;
-    const index = parseInt(input.dataset.index || "0", 10);
-
-    switch (e.key) {
-      case "Backspace":
-        e.preventDefault();
-        if (this.cells[index]) {
-          // Clear current cell, keep focus
-          this.cells[index] = "";
-          input.value = "";
-          this.updateValue();
-        } else if (index > 0) {
-          // Move to previous cell and clear it
-          this.cells[index - 1] = "";
-          this.updateValue();
-          this.focusCell(index - 1);
-        }
-        break;
-
-      case "Delete":
-        e.preventDefault();
-        this.cells[index] = "";
-        input.value = "";
-        this.updateValue();
-        break;
-
-      case "ArrowLeft":
-        e.preventDefault();
-        if (index > 0) {
-          this.focusCell(index - 1);
-        }
-        break;
-
-      case "ArrowRight":
-        e.preventDefault();
-        if (index < this.length - 1) {
-          this.focusCell(index + 1);
-        }
-        break;
-
-      case "Home":
-        e.preventDefault();
-        this.focusCell(0);
-        break;
-
-      case "End":
-        e.preventDefault();
-        this.focusCell(this.length - 1);
-        break;
-
-      case "ArrowUp":
-      case "ArrowDown":
-        e.preventDefault();
-        break;
-    }
-  }
-
-  private handlePaste(e: ClipboardEvent) {
-    if (this.disabled || this.readonly) return;
-
-    e.preventDefault();
-
-    const input = e.currentTarget as HTMLInputElement;
-    const index = parseInt(input.dataset.index || "0", 10);
-    const pastedText = e.clipboardData?.getData("text") || "";
-
-    this.handlePasteValue(pastedText, index);
-  }
-
-  private handlePasteValue(text: string, startIndex: number) {
-    // Filter valid characters
-    const validChars = text.split("").filter((char) => this.isValidChar(char));
-
-    // Distribute characters starting from startIndex
-    let updateIndex = startIndex;
-    validChars.forEach((char) => {
-      if (updateIndex < this.length) {
-        this.cells[updateIndex] = char;
-        updateIndex++;
-      }
-    });
-
-    this.updateValue();
-
-    const filled = this.cells.filter((c) => c).length;
-    if (filled < this.length) {
-      announce(
-        `${filled} ${this.type === "alphanumeric" ? "characters" : "digits"} entered`
-      );
-    }
-
-    // Focus next empty cell or last cell
-    const nextEmptyIndex = this.cells.findIndex((c, i) => i >= startIndex && !c);
-    if (nextEmptyIndex >= 0) {
-      this.focusCell(nextEmptyIndex);
-    } else {
-      this.focusCell(Math.min(updateIndex, this.length - 1));
-    }
-  }
-
-  private handleFocus(e: FocusEvent) {
-    const input = e.currentTarget as HTMLInputElement;
-    input.select();
-  }
-
-  private handleBlur() {
-  }
-
-  private focusCell(index: number) {
-    if (index < 0 || index >= this.length) return;
-
-    const input = this.renderRoot.querySelector(
-      `input[data-index="${index}"]`
-    ) as HTMLInputElement | null;
-
-    if (input) {
-      input.focus();
-      input.select();
-    }
-  }
-
-  private getInputMode(): string {
-    if (this.inputmode) return this.inputmode;
-    return this.type === "numeric" ? "numeric" : "text";
-  }
-
-  private getAriaLabel(index: number): string {
-    const total = this.length;
-    const position = index + 1;
-    const label = this.type === "numeric" ? "Digit" : "Character";
-    return `${label} ${position} of ${total}`;
-  }
-
-  private getGroups(): number[][] {
-    const groups: number[][] = [];
-    if (this.groupSize <= 0 || !this.showSeparator) {
-      // Single group with all cells
-      groups.push(Array.from({ length: this.length }, (_, i) => i));
-    } else {
-      // Multiple groups
-      for (let i = 0; i < this.length; i += this.groupSize) {
-        groups.push(
-          Array.from(
-            { length: Math.min(this.groupSize, this.length - i) },
-            (_, j) => i + j
-          )
-        );
-      }
-    }
-    return groups;
-  }
-
-  render() {
-    const groups = this.getGroups();
-
-    return html`
-      <div
-        part="base root"
-        class="otp-root"
-        role="group"
-        aria-label="${this.ariaLabel || "One-time password input"}">
-        ${groups.map(
-          (group, groupIndex) => html`
-            <div class="otp-group">
-              ${group.map(
-                (index) => html`
-                  <input
-                    part="input cell"
-                    class="otp-cell"
-                    data-index="${index}"
-                    type="${this.mask ? "password" : "text"}"
-                    inputmode="${this.getInputMode()}"
-                    autocomplete="one-time-code"
-                    pattern="${this.pattern || ""}"
-                    placeholder="${this.placeholder}"
-                    maxlength="1"
-                    .value="${this.cells[index] || ""}"
-                    ?disabled="${this.disabled}"
-                    ?readonly="${this.readonly}"
-                    ?required="${this.required && index === 0}"
-                    aria-label="${this.getAriaLabel(index)}"
-                    aria-invalid="${this.invalid ? "true" : nothing}"
-                    @pointerdown="${this.handlePointerDown}"
-                    @input="${this.handleInput}"
-                    @keydown="${this.handleKeyDown}"
-                    @paste="${this.handlePaste}"
-                    @focus="${this.handleFocus}"
-                    @blur="${this.handleBlur}"
-                  />
-                `
-              )}
-            </div>
-            ${groupIndex < groups.length - 1
-              ? html`<div part="separator" class="otp-separator">-</div>`
-              : ""}
-          `
-        )}
-
-        ${this.name
-          ? html`<input
-              part="hidden-input"
-              class="hidden-input"
-              type="hidden"
-              name="${this.name}"
-              .value="${this.value}"
-            />`
-          : ""}
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-otp": RelOtp;
-  }
-}

package/dist/components/rel-pagination/index.ts

@@ -1 +0,0 @@
-export * from "./rel-pagination";