@urbicon-ui/blocks 6.37.0 → 6.37.1

package/dist/components/PinInput/PinInput.svelte

@@ -84,6 +84,10 @@
     if (normalized !== (value ?? '')) {
       value = normalized;
     }
+    // Completeness must track the (possibly externally reset) value — a stale
+    // `true` after a parent-side clear would swallow the onComplete of the next
+    // single-emit fill (paste/autofill), the standard wrong-code retry flow.
+    wasComplete = normalized.length === length;
   });
 
   // Stable per-position keys — the index IS the cell identity, but a derived id

package/dist/components/QRCode/qr-code.variants.js

@@ -11,10 +11,16 @@ export const qrCodeVariants = tv({
     variants: {
         // Optional framing so the code can sit on a guaranteed-light card (the
         // scan-safe default look) without the consumer hand-building one.
+        // `scheme-light` pins `color-scheme: light` on the card, so every
+        // `light-dark()` token inside resolves to its light value even in dark
+        // mode — without it the card ground flips dark and the `currentColor`
+        // modules invert (light-on-dark QR codes fail many scanners). The explicit
+        // `text-text-primary` re-derives the module colour under that scheme
+        // (inherited `color` is computed on the dark ancestor and would leak in).
         frame: {
             none: {},
             card: {
-                root: 'bg-surface-base border border-border-subtle rounded-lg p-3 shadow-[var(--blocks-shadow-sm)]'
+                root: 'scheme-light bg-surface-base text-text-primary border border-border-subtle rounded-lg p-3 shadow-[var(--blocks-shadow-sm)]'
             }
         }
     },

package/dist/components/TimeInput/TimeInput.svelte

@@ -66,7 +66,7 @@
   let hourEl = $state<HTMLInputElement>();
   let minuteEl = $state<HTMLInputElement>();
   let secondEl = $state<HTMLInputElement>();
-  let meridiemEl = $state<HTMLButtonElement>();
+  let meridiemEl = $state<HTMLSpanElement>();
 
   function pad(n: number): string {
     return String(n).padStart(2, '0');
@@ -174,7 +174,7 @@
       minuteEl,
       withSeconds ? secondEl : undefined,
       format === '12h' ? meridiemEl : undefined
-    ].filter(Boolean) as (HTMLInputElement | HTMLButtonElement)[]
+    ].filter(Boolean) as (HTMLInputElement | HTMLSpanElement)[]
   );
 
   function advanceFrom(el: HTMLElement) {
@@ -315,6 +315,10 @@
     switch (e.key) {
       case 'ArrowUp':
       case 'ArrowDown':
+      // The segment is a spinbutton on a span (html-aria forbids the role on
+      // <button>), so Enter/Space activation is wired manually.
+      case 'Enter':
+      case ' ':
         e.preventDefault();
         toggleMeridiem();
         break;
@@ -331,7 +335,7 @@
       case 'ArrowLeft':
       case 'Backspace': {
         e.preventDefault();
-        const idx = order.indexOf(e.currentTarget as HTMLButtonElement);
+        const idx = order.indexOf(e.currentTarget as HTMLSpanElement);
         if (idx > 0) order[idx - 1].focus();
         break;
       }
@@ -478,11 +482,22 @@
       />
     {/if}
     {#if format === '12h'}
-      <button
+      <!-- A spinbutton (not a button): aria-label on a button would OVERRIDE its
+           AM/PM content, so the current state was never announced. As a
+           spinbutton the state travels via aria-valuetext — same semantics as
+           the sibling segments — and html-aria only permits the role on a
+           non-button host, hence the span with manual focus/activation. -->
+      <span
         bind:this={meridiemEl}
-        type="button"
-        {disabled}
+        role="spinbutton"
+        tabindex={disabled ? -1 : 0}
         aria-label={bt('accessibility.timeMeridiem')}
+        aria-valuemin={0}
+        aria-valuemax={1}
+        aria-valuenow={meridiem === 'AM' ? 0 : 1}
+        aria-valuetext={meridiem}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-readonly={readonly ? 'true' : undefined}
         class={unstyled
           ? (slotClasses?.meridiem ?? '')
           : styles.meridiem({ class: slotClasses?.meridiem })}
@@ -490,7 +505,7 @@
         onkeydown={handleMeridiemKeydown}
       >
         {meridiem}
-      </button>
+      </span>
     {/if}
   </div>
 

package/dist/components/TimeInput/time-input.variants.js

@@ -25,7 +25,8 @@ export const timeInputVariants = tv({
         meridiem: [
             'ml-1 font-medium text-text-secondary rounded-sm cursor-pointer select-none',
             'hover:bg-surface-hover focus-visible:outline-none focus-visible:bg-primary-subtle',
-            'disabled:cursor-not-allowed disabled:opacity-50'
+            // The segment is a span-hosted spinbutton — no native :disabled state.
+            'aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
         ],
         message: ['text-xs']
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.37.0",
+  "version": "6.37.1",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -93,8 +93,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.37.0",
-    "@urbicon-ui/shared-types": "6.37.0",
+    "@urbicon-ui/i18n": "6.37.1",
+    "@urbicon-ui/shared-types": "6.37.1",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",