@spectral_labs/ui 1.3.1 → 1.4.0

package/dist/components/pin-input/__tests__/pin-input.test.svelte.js

@@ -1,4 +1,4 @@
-import { mount, unmount } from 'svelte';
+import { flushSync, mount, unmount } from 'svelte';
 import { afterEach, describe, expect, it } from 'vitest';
 import PinInput from '../pin-input.svelte';
 describe('pin-input', () => {
@@ -23,4 +23,49 @@ describe('pin-input', () => {
         setup({ length: 6 });
         expect(target.querySelectorAll('input').length).toBe(6);
     });
+    it('uses the inputmode prop on slots', () => {
+        setup({ length: 4, inputmode: 'text' });
+        const input = target.querySelector('input');
+        expect(input.getAttribute('inputmode')).toBe('text');
+    });
+    it('defaults inputmode to numeric (backward compat)', () => {
+        setup({ length: 4 });
+        const input = target.querySelector('input');
+        expect(input.getAttribute('inputmode')).toBe('numeric');
+    });
+    it('uses ariaLabelPrefix in slot aria-labels', () => {
+        setup({ length: 4, ariaLabelPrefix: 'Character' });
+        const input = target.querySelector('input');
+        expect(input.getAttribute('aria-label')).toBe('Character 1 of 4');
+    });
+    it('pasteTransformer strips separators before distributing', () => {
+        setup({ length: 6, pasteTransformer: (raw) => raw.replace(/[^0-9A-Z]/gi, '').toUpperCase() });
+        const input = target.querySelector('input');
+        const ev = new Event('paste', { bubbles: true });
+        Object.defineProperty(ev, 'clipboardData', { value: { getData: () => 'ab-cd-ef' } });
+        input.dispatchEvent(ev);
+        flushSync();
+        const joined = Array.from(target.querySelectorAll('input')).map((i) => i.value).join('');
+        expect(joined).toBe('ABCDEF');
+    });
+    it('charTransformer uppercases typed input', () => {
+        setup({ length: 4, charTransformer: (c) => c.toUpperCase() });
+        const input = target.querySelector('input');
+        input.value = 'a';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        flushSync();
+        expect(target.querySelectorAll('input')[0].value).toBe('A');
+    });
+    it('allowedPattern rejects disallowed typed characters', () => {
+        setup({ length: 4, allowedPattern: /[2-9A-HJKMNP-Z]/i });
+        const input = target.querySelector('input');
+        input.value = '0';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        flushSync();
+        expect(target.querySelectorAll('input')[0].value).toBe('');
+    });
+    it('renders group separators when groupSize is set', () => {
+        setup({ length: 8, groupSize: 4 });
+        expect(target.querySelectorAll('.sp-pin-input-separator').length).toBe(1);
+    });
 });

package/dist/components/pin-input/pin-input.svelte

@@ -12,19 +12,27 @@
     name,
     required = false,
     class: className,
+    inputmode = 'numeric',
+    ariaLabelPrefix = 'Digit',
+    pasteTransformer,
+    charTransformer,
+    allowedPattern,
   }: PinInputProps = $props()
 
   const inputs: HTMLInputElement[] = $state.raw([])
 
   function handleInput(index: number, event: Event) {
     const target = event.target as HTMLInputElement
-    const char = target.value.slice(-1)
+    let char = target.value.slice(-1)
+    if (char && allowedPattern && !allowedPattern.test(char)) {
+      target.value = value[index] ?? '' // reject: value state unchanged ⇒ Svelte won't re-render this slot
+      return
+    }
+    if (char && charTransformer) char = charTransformer(char)
     const chars = value.split('')
     chars[index] = char
     value = chars.join('').slice(0, length)
-
     if (char && index < length - 1) inputs[index + 1]?.focus()
-
     if (value.length === length) onComplete?.(value)
   }
 
@@ -45,38 +53,31 @@
 
   function handlePaste(event: ClipboardEvent) {
     event.preventDefault()
-    const pasted = event.clipboardData?.getData('text')?.slice(0, length) ?? ''
-    value = pasted
-    const nextIndex = Math.min(pasted.length, length - 1)
+    const raw = event.clipboardData?.getData('text') ?? ''
+    const cleaned = pasteTransformer ? pasteTransformer(raw) : raw
+    value = cleaned.slice(0, length)
+    const nextIndex = Math.min(value.length, length - 1)
     inputs[nextIndex]?.focus()
-    if (pasted.length === length) onComplete?.(pasted)
+    if (value.length === length) onComplete?.(value)
   }
 </script>
 
 <div class="sp-pin-input {className ?? ''}" role="group">
   {#each { length } as _, i (i)}
     {#if groupSize > 0 && i > 0 && i % groupSize === 0}
-      <span class="sp-pin-input-separator" aria-hidden="true">
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12" /></svg
-        >
-      </span>
+      <span class="sp-pin-input-separator" aria-hidden="true"></span>
     {/if}
     <input
       bind:this={inputs[i]}
       class="sp-pin-input-slot"
       type={mask ? 'password' : 'text'}
-      inputmode="numeric"
+      inputmode={inputmode}
       maxlength={1}
       autocomplete="off"
       {placeholder}
       {disabled}
       value={value[i] ?? ''}
-      aria-label={`Digit ${i + 1} of ${length}`}
+      aria-label={`${ariaLabelPrefix} ${i + 1} of ${length}`}
       oninput={(e) => handleInput(i, e)}
       onkeydown={(e) => handleKeydown(i, e)}
       onpaste={handlePaste}
@@ -96,14 +97,14 @@
   }
 
   .sp-pin-input-separator {
-    display: flex;
-    align-items: center;
-    color: var(--sp-sys-color-outline);
-  }
-
-  .sp-pin-input-separator svg {
-    width: 16px;
-    height: 16px;
+    /* A reliable CSS dash between groups. The previous inline <svg viewBox> rendered at 0 width
+       (no intrinsic size), so groupSize separators were invisible. */
+    flex: 0 0 auto;
+    align-self: center;
+    width: 0.75rem;
+    height: 2px;
+    border-radius: 999px;
+    background-color: var(--sp-sys-color-outline);
   }
 
   .sp-pin-input-slot {
@@ -132,6 +133,12 @@
     opacity: 0.5;
   }
 
+  /* Empty focused slot: hide the placeholder so the caret never overlaps the ○.
+     Stable class hook (.sp-pin-input-slot), no generated s-... classes. */
+  .sp-pin-input-slot:focus::placeholder {
+    color: transparent;
+  }
+
   .sp-pin-input-slot:disabled {
     opacity: 0.38;
     cursor: not-allowed;

package/dist/components/pin-input/pin-input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pin-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/pin-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AA4EhD,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"pin-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/pin-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAmFhD,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/pin-input/types.d.ts

@@ -19,5 +19,15 @@ export interface PinInputProps {
     required?: boolean;
     /** Additional CSS class. */
     class?: string;
+    /** Virtual-keyboard hint applied to every slot. Default 'numeric' (PIN). Use 'text' for alphanumeric codes. */
+    inputmode?: 'numeric' | 'text' | 'tel' | 'email' | 'url' | 'decimal' | 'search' | 'none';
+    /** Noun used in each slot's aria-label: `${ariaLabelPrefix} N of M`. Default 'Digit'. */
+    ariaLabelPrefix?: string;
+    /** Transform pasted clipboard text BEFORE distributing into slots (e.g. strip separators, uppercase). */
+    pasteTransformer?: (raw: string) => string;
+    /** Transform each typed character before storing (e.g. uppercase). Applied only to characters accepted by `allowedPattern`. */
+    charTransformer?: (char: string) => string;
+    /** When set, a typed character is accepted only if it matches this pattern (paste is filtered by pasteTransformer instead). */
+    allowedPattern?: RegExp;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/pin-input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+GAA+G;IAC/G,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;IACxF,yFAAyF;IACzF,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,+HAA+H;IAC/H,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,+HAA+H;IAC/H,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spectral_labs/ui",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"