@reliability-design/web 1.1.1 → 1.3.0

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

@@ -24,8 +24,6 @@ export class RelOtp extends LitElement {
   @property({ type: String }) size: "sm" | "md" | "lg" = "md";
 
   @state() private cells: string[] = [];
-  @state() private focusedIndex: number = -1;
-
   @query(".hidden-input") private hiddenInput?: HTMLInputElement;
 
   private isUpdatingFromValue = false;
@@ -38,30 +36,30 @@ export class RelOtp extends LitElement {
 
     :host([disabled]) {
       opacity: 0.6;
-      pointer-events: none;
+      cursor: not-allowed;
     }
 
     .otp-root {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs, 8px);
+      gap: var(--rel-spacing-space-2xs);
       position: relative;
     }
 
     .otp-group {
       display: flex;
-      gap: var(--rel-spacing-space-2xs, 8px);
+      gap: var(--rel-spacing-space-2xs);
     }
 
     .otp-separator {
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--rel-colors-gray-divider);
+      color: var(--rel-gray-divider-default);
       font-size: var(--rel-fontSizes-lg);
       font-weight: var(--rel-fontWeights-semibold);
       user-select: none;
-      padding: 0 var(--rel-spacing-space-3xs, 4px);
+      padding: 0 var(--rel-spacing-space-3xs);
     }
 
     .otp-separator.hidden {
@@ -71,17 +69,17 @@ export class RelOtp extends LitElement {
     .otp-cell {
       width: 40px;
       height: 48px;
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-border-default);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200);
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
       font-family: var(--rel-fontFamilies-primary);
       font-size: var(--rel-fontSizes-lg);
       font-weight: var(--rel-fontWeights-medium);
       text-align: center;
-      color: var(--rel-text-primary);
+      color: var(--rel-color-text-primary);
       outline: none;
       transition: border-color 0.15s ease, box-shadow 0.15s ease;
-      caret-color: var(--rel-colors-gray-primary);
+      caret-color: var(--rel-color-text-primary);
     }
 
     /* Size variants */
@@ -98,27 +96,31 @@ export class RelOtp extends LitElement {
     }
 
     .otp-cell::placeholder {
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-color-text-placeholder);
       opacity: 0.6;
     }
 
     .otp-cell:hover:not(:disabled):not(:read-only) {
-      border-color: var(--rel-colors-gray-primary);
+      border-color: var(--rel-color-text-primary);
     }
 
     .otp-cell:focus-visible {
-      border-color: var(--rel-colors-gray-heading);
-      box-shadow: 0 0 0 2px var(--rel-border-default);
+      border-color: var(--rel-color-text-heading);
+      box-shadow: 0 0 0 2px var(--rel-color-border-default);
     }
 
     .otp-cell:disabled {
-      background: var(--rel-colors-gray-light);
-      color: var(--rel-colors-gray-disabled-text);
+      background: var(--rel-color-bg-secondary);
+      color: var(--rel-color-text-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) .otp-cell {
       cursor: not-allowed;
     }
 
     .otp-cell:read-only {
-      background: var(--rel-colors-gray-surface);
+      background: var(--rel-color-bg-tertiary);
       cursor: default;
     }
 
@@ -146,6 +148,7 @@ export class RelOtp extends LitElement {
         transition: none;
       }
     }
+
   `;
 
   connectedCallback() {
@@ -382,16 +385,10 @@ export class RelOtp extends LitElement {
 
   private handleFocus(e: FocusEvent) {
     const input = e.currentTarget as HTMLInputElement;
-    const index = parseInt(input.dataset.index || "0", 10);
-
-    this.focusedIndex = index;
-
-    // Select all text on focus for easy replacement
     input.select();
   }
 
   private handleBlur() {
-    this.focusedIndex = -1;
   }
 
   private focusCell(index: number) {
@@ -458,7 +455,7 @@ export class RelOtp extends LitElement {
                     data-index="${index}"
                     type="${this.mask ? "password" : "text"}"
                     inputmode="${this.getInputMode()}"
-                    autocomplete="${index === 0 ? this.autocomplete : "off"}"
+                    autocomplete="new-password"
                     pattern="${this.pattern || ""}"
                     placeholder="${this.placeholder}"
                     maxlength="1"