digitojs 1.2.0 → 1.2.1

package/src/adapters/svelte.ts

@@ -112,6 +112,11 @@ export type UseOTPResult = {
   setError:       (isError: boolean) => void
   /** Enable or disable the field at runtime. */
   setDisabled:    (value: boolean) => void
+  /**
+   * Toggle readOnly at runtime. When `true`, all slot mutations are blocked
+   * but focus, navigation, and copy remain fully functional.
+   */
+  setReadOnly:    (value: boolean) => void
   /** Programmatically move focus to a slot index. */
   focus:          (slotIndex: number) => void
   /**
@@ -195,12 +200,14 @@ export function useOTP(options: SvelteOTPOptions = {}): UseOTPResult {
   const store               = writable(digito.state)
   const timerStore          = writable(timerSecs)
   const isDisabledStore     = writable(initialDisabled)
+  const isReadOnlyStore     = writable(readOnlyOpt)
   const separatorAfterStore = writable(separatorAfterOpt)
   const separatorStore      = writable(separatorOpt)
   const maskedStore         = writable(maskedOpt)
   const maskCharStore       = writable(maskCharOpt)
 
-  let inputEl: HTMLInputElement | null = null
+  let inputEl:    HTMLInputElement | null = null
+  let isReadOnly: boolean                = readOnlyOpt
 
   // ── sync() ─────────────────────────────────────────────────────────────────
   function sync(suppressOnChange = false): void {
@@ -280,14 +287,14 @@ export function useOTP(options: SvelteOTPOptions = {}): UseOTPResult {
       const pos = node.selectionStart ?? 0
       if (e.key === 'Backspace') {
         e.preventDefault()
-        if (readOnlyOpt) return
+        if (isReadOnly) return
         digito.deleteChar(pos)
         sync()
         const next = digito.state.activeSlot
         requestAnimationFrame(() => node.setSelectionRange(next, next))
       } else if (e.key === 'Delete') {
         e.preventDefault()
-        if (readOnlyOpt) return
+        if (isReadOnly) return
         digito.clearSlot(pos)
         sync()
         requestAnimationFrame(() => node.setSelectionRange(pos, pos))
@@ -321,7 +328,7 @@ export function useOTP(options: SvelteOTPOptions = {}): UseOTPResult {
     }
 
     function onChange(e: Event): void {
-      if (get(isDisabledStore) || readOnlyOpt) return
+      if (get(isDisabledStore) || isReadOnly) return
       const raw = (e.target as HTMLInputElement).value
       if (!raw) {
         digito.resetState()
@@ -344,7 +351,7 @@ export function useOTP(options: SvelteOTPOptions = {}): UseOTPResult {
     }
 
     function onPaste(e: ClipboardEvent): void {
-      if (get(isDisabledStore) || readOnlyOpt) return
+      if (get(isDisabledStore) || isReadOnly) return
       e.preventDefault()
       const text = e.clipboardData?.getData('text') ?? ''
       const pos  = node.selectionStart ?? 0
@@ -423,6 +430,19 @@ export function useOTP(options: SvelteOTPOptions = {}): UseOTPResult {
     digito.setDisabled(value)
   }
 
+  function setReadOnly(value: boolean): void {
+    isReadOnly = value
+    isReadOnlyStore.set(value)
+    digito.setReadOnly(value)
+    if (inputEl) {
+      if (value) {
+        inputEl.setAttribute('aria-readonly', 'true')
+      } else {
+        inputEl.removeAttribute('aria-readonly')
+      }
+    }
+  }
+
   function focus(slotIndex: number): void {
     digito.moveFocusTo(slotIndex)
     inputEl?.focus()
@@ -442,12 +462,12 @@ export function useOTP(options: SvelteOTPOptions = {}): UseOTPResult {
 
   // Derived wrapper data attributes for CSS/Tailwind targeting
   const wrapperAttrs = derived(
-    [store, isDisabledStore],
-    ([$s, $dis]: [DigitoState, boolean]) => ({
+    [store, isDisabledStore, isReadOnlyStore],
+    ([$s, $dis, $ro]: [DigitoState, boolean, boolean]) => ({
       ...($s.isComplete ? { 'data-complete': '' } : {}),
       ...($s.hasError   ? { 'data-invalid':  '' } : {}),
       ...($dis          ? { 'data-disabled': '' } : {}),
-      ...(readOnlyOpt   ? { 'data-readonly': '' } : {}),
+      ...($ro           ? { 'data-readonly': '' } : {}),
     })
   )
 
@@ -470,6 +490,7 @@ export function useOTP(options: SvelteOTPOptions = {}): UseOTPResult {
     reset,
     setError,
     setDisabled,
+    setReadOnly,
     setValue,
     focus,
   }

package/src/adapters/vanilla.ts

@@ -63,6 +63,12 @@ export type DigitoInstance = {
    * verification to prevent the user from modifying the code mid-request.
    */
   setDisabled:  (isDisabled: boolean) => void
+  /**
+   * Toggle readOnly at runtime. When `true`, all slot mutations are blocked
+   * but focus, navigation, and copy remain fully functional.
+   * Distinct from `disabled` — no opacity/cursor change, `aria-readonly` is set.
+   */
+  setReadOnly:  (isReadOnly: boolean) => void
   /** Returns the current joined code string. */
   getCode:      () => string
   /** Programmatically move focus to a slot index (focuses the hidden input). */
@@ -238,7 +244,7 @@ function mountOnWrapper(
   const onExpire        = options.onExpire
   const pattern         = options.pattern
   let   isDisabled      = options.disabled    ?? false
-  const isReadOnly      = options.readOnly    ?? false
+  let   isReadOnly      = options.readOnly    ?? false
   const defaultValue    = options.defaultValue ?? ''
 
   // New options
@@ -717,6 +723,17 @@ function mountOnWrapper(
     })
   }
 
+  function setReadOnly(value: boolean): void {
+    isReadOnly = value
+    otpCore.setReadOnly(value)
+    if (value) {
+      hiddenInputEl.setAttribute('aria-readonly', 'true')
+    } else {
+      hiddenInputEl.removeAttribute('aria-readonly')
+    }
+    syncSlotsToDOM()
+  }
+
   function getCode(): string {
     return otpCore.getCode()
   }
@@ -743,7 +760,7 @@ function mountOnWrapper(
     wrapperEl.__digitoResendRowEl = null
   }
 
-  return { reset, resend, setError, setSuccess, setDisabled, getCode, focus, destroy }
+  return { reset, resend, setError, setSuccess, setDisabled, setReadOnly, getCode, focus, destroy }
 }
 
 

package/src/adapters/web-component.ts

@@ -867,6 +867,24 @@ class DigitoInput extends HTMLElement {
     }
   }
 
+  /**
+   * Toggle readOnly at runtime. When `true`, all slot mutations are blocked
+   * but focus, navigation, and copy remain fully functional.
+   * Distinct from `disabled` — no opacity/cursor change, `aria-readonly` is set.
+   */
+  setReadOnly(value: boolean): void {
+    this._isReadOnly = value
+    this.digito?.setReadOnly(value)
+    if (this.hiddenInput) {
+      if (value) {
+        this.hiddenInput.setAttribute('aria-readonly', 'true')
+      } else {
+        this.hiddenInput.removeAttribute('aria-readonly')
+      }
+    }
+    this.syncSlotsToDOM()
+  }
+
   /** Returns the current code as a joined string (e.g. `"123456"`). */
   getCode(): string {
     return this.digito?.getCode() ?? ''