@urbicon-ui/blocks 6.37.1 → 6.37.2

package/dist/components/PinInput/pin-input.variants.js

@@ -1,17 +1,23 @@
+import { FIELD_DISABLED_FRAME, FIELD_LABEL, FIELD_LABEL_DISABLED, FIELD_MESSAGE_TONES, FIELD_NATIVE_DISABLED, FIELD_NATIVE_READONLY, FIELD_REQUIRED_LABEL, FIELD_SURFACE, FIELD_TRANSITION, fieldErrorFrame, fieldFocusRing, fieldIntentFrames, fieldSurfaceVariants } from '../../internal/field-chrome.js';
 import { tv } from '../../utils/variants.js';
+// Each cell is directly focusable, so the ring lives on the cell itself.
+const focus = 'focus-visible';
+const surface = fieldSurfaceVariants(focus);
+const intents = fieldIntentFrames(focus);
 export const pinInputVariants = tv({
     slots: {
         root: ['flex flex-col gap-1.5'],
-        label: ['block font-medium text-text-secondary text-sm'],
+        label: [FIELD_LABEL],
         group: ['flex items-center'],
         cell: [
             'box-border text-center font-medium tabular-nums caret-primary',
-            'border text-text-primary bg-surface-base',
-            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
-            'focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:z-10',
+            FIELD_SURFACE,
+            FIELD_TRANSITION,
+            // `focus-visible:z-10` lifts the focused cell's ring above its neighbours.
+            `focus-visible:outline-none ${fieldFocusRing(focus)} focus-visible:z-10`,
             'hover:border-border-default',
-            'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-subtle',
-            'read-only:bg-surface-subtle read-only:cursor-default'
+            FIELD_NATIVE_DISABLED,
+            FIELD_NATIVE_READONLY
         ],
         separator: ['text-text-tertiary select-none'],
         message: ['text-xs']
@@ -24,13 +30,9 @@ export const pinInputVariants = tv({
             commit: { cell: 'rounded-commit' }
         },
         variant: {
-            outlined: { cell: 'border-border-subtle' },
-            filled: {
-                cell: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base'
-            },
-            ghost: {
-                cell: 'bg-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle'
-            }
+            outlined: { cell: surface.outlined },
+            filled: { cell: surface.filled },
+            ghost: { cell: surface.ghost }
         },
         size: {
             sm: {
@@ -53,20 +55,14 @@ export const pinInputVariants = tv({
         },
         intent: {
             default: {},
-            success: {
-                cell: 'border-success focus-visible:border-success focus-visible:ring-success/20'
-            },
-            warning: {
-                cell: 'border-warning focus-visible:border-warning focus-visible:ring-warning/20'
-            },
-            danger: {
-                cell: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20'
-            }
+            success: { cell: intents.success },
+            warning: { cell: intents.warning },
+            danger: { cell: intents.danger }
         },
         disabled: {
             true: {
-                cell: 'opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none',
-                label: 'text-text-disabled'
+                cell: FIELD_DISABLED_FRAME,
+                label: FIELD_LABEL_DISABLED
             }
         },
         readonly: {
@@ -75,17 +71,17 @@ export const pinInputVariants = tv({
         // Declared BEFORE `error` so the error tone wins the message-color bucket
         // in every call shape — `{ error: true }` alone must read red.
         messageType: {
-            error: { message: 'text-danger' },
-            helper: { message: 'text-text-tertiary' }
+            error: { message: FIELD_MESSAGE_TONES.error },
+            helper: { message: FIELD_MESSAGE_TONES.helper }
         },
         error: {
             true: {
-                cell: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
-                message: 'text-danger'
+                cell: fieldErrorFrame(focus),
+                message: FIELD_MESSAGE_TONES.error
             }
         },
         required: {
-            true: { label: "after:content-['*'] after:ml-1 after:text-danger" }
+            true: { label: FIELD_REQUIRED_LABEL }
         }
     },
     compoundVariants: [

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

@@ -1,17 +1,23 @@
+import { FIELD_DISABLED_FRAME, FIELD_LABEL, FIELD_LABEL_DISABLED, FIELD_MESSAGE_TONES, FIELD_REQUIRED_LABEL, FIELD_SURFACE, FIELD_TRANSITION, fieldErrorFrame, fieldFocusRing, fieldIntentFrames, fieldSurfaceVariants } from '../../internal/field-chrome.js';
 import { tv } from '../../utils/variants.js';
+// Borderless segments live inside a bordered container, so the ring lights the
+// whole field via focus-within rather than focus-visible on one element.
+const focus = 'focus-within';
+const surface = fieldSurfaceVariants(focus);
+const intents = fieldIntentFrames(focus);
 export const timeInputVariants = tv({
     slots: {
         wrapper: ['flex flex-col gap-1.5 w-full'],
-        label: ['block font-medium text-text-secondary text-sm'],
+        label: [FIELD_LABEL],
         // The bordered container reads as a single field; the segment inputs inside
         // are borderless. The focus ring lives here via focus-within so tabbing
         // between segments keeps the whole field lit.
         field: [
             'inline-flex items-center box-border w-fit',
-            'border text-text-primary bg-surface-base',
-            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            FIELD_SURFACE,
+            FIELD_TRANSITION,
             'hover:border-border-default',
-            'focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20'
+            fieldFocusRing(focus)
         ],
         icon: ['pointer-events-none inline-flex items-center justify-center text-text-tertiary'],
         segment: [
@@ -38,13 +44,9 @@ export const timeInputVariants = tv({
             commit: { field: 'rounded-commit' }
         },
         variant: {
-            outlined: { field: 'border-border-subtle' },
-            filled: {
-                field: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-within:bg-surface-base'
-            },
-            ghost: {
-                field: 'bg-transparent hover:bg-surface-subtle focus-within:bg-surface-base focus-within:border-border-subtle'
-            }
+            outlined: { field: surface.outlined },
+            filled: { field: surface.filled },
+            ghost: { field: surface.ghost }
         },
         size: {
             sm: {
@@ -69,31 +71,32 @@ export const timeInputVariants = tv({
         },
         intent: {
             default: {},
-            success: { field: 'border-success focus-within:border-success focus-within:ring-success/20' },
-            warning: { field: 'border-warning focus-within:border-warning focus-within:ring-warning/20' },
-            danger: { field: 'border-danger focus-within:border-danger focus-within:ring-danger/20' }
+            success: { field: intents.success },
+            warning: { field: intents.warning },
+            danger: { field: intents.danger }
         },
         disabled: {
             true: {
-                field: 'opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none',
-                label: 'text-text-disabled'
+                field: FIELD_DISABLED_FRAME,
+                label: FIELD_LABEL_DISABLED
             }
         },
         readonly: {
+            // No `cursor-default` here — the container's segments carry their own cursor.
             true: { field: 'bg-surface-subtle' }
         },
         messageType: {
-            error: { message: 'text-danger' },
-            helper: { message: 'text-text-tertiary' }
+            error: { message: FIELD_MESSAGE_TONES.error },
+            helper: { message: FIELD_MESSAGE_TONES.helper }
         },
         error: {
             true: {
-                field: 'border-danger focus-within:border-danger focus-within:ring-danger/20',
-                message: 'text-danger'
+                field: fieldErrorFrame(focus),
+                message: FIELD_MESSAGE_TONES.error
             }
         },
         required: {
-            true: { label: "after:content-['*'] after:ml-1 after:text-danger" }
+            true: { label: FIELD_REQUIRED_LABEL }
         },
         fullWidth: {
             true: { field: 'w-full justify-start' }

package/dist/internal/field-chrome.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Shared style fragments for the bordered field frame.
+ *
+ * Input, PinInput and TimeInput (and NumberInput, via its Input composition)
+ * all render the same field chrome — the neutral resting frame, the focus ring,
+ * the `outlined | filled | ghost` surfaces, the intent colours, the disabled /
+ * error states and the label / message scaffolding. Before this module each of
+ * the three `*.variants.ts` hand-copied those class strings, so a token fix had
+ * to be applied in three places and drift crept in silently.
+ *
+ * These exports are the single source for the shared tokens. They are composed
+ * back into each `tv()` config at the EXACT positions the inlined strings held,
+ * so the resolved (flattened) class output is byte-identical — proven by the
+ * render-identity matrix diff in the debt-fix-wave-5 (40 960 Input / 2 304 Pin /
+ * 4 608 TimeInput combinations, zero diff). This is a pure de-duplication, not a
+ * behaviour change.
+ *
+ * The one axis of genuine divergence is the focus mechanism: Input and PinInput
+ * put the ring on the focusable element itself (`focus-visible:`), while
+ * TimeInput hosts borderless segments inside a bordered container and lights the
+ * whole field via `focus-within:`. That is why the ring / variant / intent /
+ * error fragments are parameterised by {@link FieldFocus} rather than fixed.
+ *
+ * NOT covered here (deliberately component-local): the per-component frame
+ * prefix (Input's `w-full`, PinInput's cell content styles, TimeInput's
+ * `inline-flex` container), Input's `underline` variant and `placeholder`
+ * colour, PinInput's `focus-visible:z-10`, TimeInput's `fullWidth` and its
+ * cursor-free readonly. The shared label/message MARKUP in the `.svelte` files
+ * is a separate, larger cut (see technical-debt "Field chrome…" part b).
+ *
+ * This is not a component and imports nothing from other component dirs, so it
+ * is exempt from the cross-component import guard (imports-lint treats
+ * `internal/**` as the extraction target).
+ */
+/** The field's colour/border/shadow transition — the longest shared string. */
+export declare const FIELD_TRANSITION = "transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out";
+/** The neutral resting frame: border + primary text + base surface. Input
+ *  appends its own `placeholder:` colour after this. */
+export declare const FIELD_SURFACE = "border text-text-primary bg-surface-base";
+/** `:disabled` / `:read-only` pseudo-class fallbacks on a NATIVE field element
+ *  (Input's `base`, PinInput's `cell`). TimeInput's frame is a container whose
+ *  segments carry their own states, so it omits these. */
+export declare const FIELD_NATIVE_DISABLED = "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-subtle";
+export declare const FIELD_NATIVE_READONLY = "read-only:bg-surface-subtle read-only:cursor-default";
+/**
+ * Where the focus ring lives: `focus-visible:` on a directly-focusable field
+ * (Input, PinInput cell), `focus-within:` on a container that hosts focusable
+ * segments (TimeInput).
+ */
+export type FieldFocus = 'focus-visible' | 'focus-within';
+/** The primary focus ring (border + 2px ring at 20% alpha), for the given mode. */
+export declare const fieldFocusRing: (f: FieldFocus) => string;
+/**
+ * The `outlined | filled | ghost` surface values, parameterised by focus mode.
+ * `outlined` is a constant; consumers add their own extra variants (Input's
+ * `underline`) alongside.
+ */
+export declare const fieldSurfaceVariants: (f: FieldFocus) => {
+    outlined: string;
+    filled: string;
+    ghost: string;
+};
+/**
+ * The intent frame values (border + focus ring tint) for success/warning/danger,
+ * parameterised by focus mode. `default` carries no frame class, so callers keep
+ * their own empty `default: {}` slot entry.
+ */
+export declare const fieldIntentFrames: (f: FieldFocus) => {
+    success: string;
+    warning: string;
+    danger: string;
+};
+/** The error frame value (danger border + ring), parameterised by focus mode. */
+export declare const fieldErrorFrame: (f: FieldFocus) => string;
+/** Frame classes when the whole control is disabled (the `disabled` variant). */
+export declare const FIELD_DISABLED_FRAME = "opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none";
+/** The field label base, shared verbatim across all three fields. */
+export declare const FIELD_LABEL = "block font-medium text-text-secondary text-sm";
+/** Label colour when the control is disabled. */
+export declare const FIELD_LABEL_DISABLED = "text-text-disabled";
+/** Required-marker asterisk appended after the label. */
+export declare const FIELD_REQUIRED_LABEL = "after:content-['*'] after:ml-1 after:text-danger";
+/** The two `messageType` message tones (error wins the fold when both apply). */
+export declare const FIELD_MESSAGE_TONES: {
+    readonly error: "text-danger";
+    readonly helper: "text-text-tertiary";
+};

package/dist/internal/field-chrome.js

@@ -0,0 +1,81 @@
+/**
+ * Shared style fragments for the bordered field frame.
+ *
+ * Input, PinInput and TimeInput (and NumberInput, via its Input composition)
+ * all render the same field chrome — the neutral resting frame, the focus ring,
+ * the `outlined | filled | ghost` surfaces, the intent colours, the disabled /
+ * error states and the label / message scaffolding. Before this module each of
+ * the three `*.variants.ts` hand-copied those class strings, so a token fix had
+ * to be applied in three places and drift crept in silently.
+ *
+ * These exports are the single source for the shared tokens. They are composed
+ * back into each `tv()` config at the EXACT positions the inlined strings held,
+ * so the resolved (flattened) class output is byte-identical — proven by the
+ * render-identity matrix diff in the debt-fix-wave-5 (40 960 Input / 2 304 Pin /
+ * 4 608 TimeInput combinations, zero diff). This is a pure de-duplication, not a
+ * behaviour change.
+ *
+ * The one axis of genuine divergence is the focus mechanism: Input and PinInput
+ * put the ring on the focusable element itself (`focus-visible:`), while
+ * TimeInput hosts borderless segments inside a bordered container and lights the
+ * whole field via `focus-within:`. That is why the ring / variant / intent /
+ * error fragments are parameterised by {@link FieldFocus} rather than fixed.
+ *
+ * NOT covered here (deliberately component-local): the per-component frame
+ * prefix (Input's `w-full`, PinInput's cell content styles, TimeInput's
+ * `inline-flex` container), Input's `underline` variant and `placeholder`
+ * colour, PinInput's `focus-visible:z-10`, TimeInput's `fullWidth` and its
+ * cursor-free readonly. The shared label/message MARKUP in the `.svelte` files
+ * is a separate, larger cut (see technical-debt "Field chrome…" part b).
+ *
+ * This is not a component and imports nothing from other component dirs, so it
+ * is exempt from the cross-component import guard (imports-lint treats
+ * `internal/**` as the extraction target).
+ */
+/** The field's colour/border/shadow transition — the longest shared string. */
+export const FIELD_TRANSITION = 'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out';
+/** The neutral resting frame: border + primary text + base surface. Input
+ *  appends its own `placeholder:` colour after this. */
+export const FIELD_SURFACE = 'border text-text-primary bg-surface-base';
+/** `:disabled` / `:read-only` pseudo-class fallbacks on a NATIVE field element
+ *  (Input's `base`, PinInput's `cell`). TimeInput's frame is a container whose
+ *  segments carry their own states, so it omits these. */
+export const FIELD_NATIVE_DISABLED = 'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-subtle';
+export const FIELD_NATIVE_READONLY = 'read-only:bg-surface-subtle read-only:cursor-default';
+/** The primary focus ring (border + 2px ring at 20% alpha), for the given mode. */
+export const fieldFocusRing = (f) => `${f}:border-primary ${f}:ring-2 ${f}:ring-primary/20`;
+/**
+ * The `outlined | filled | ghost` surface values, parameterised by focus mode.
+ * `outlined` is a constant; consumers add their own extra variants (Input's
+ * `underline`) alongside.
+ */
+export const fieldSurfaceVariants = (f) => ({
+    outlined: 'border-border-subtle',
+    filled: `bg-surface-interactive border-transparent hover:bg-surface-hover ${f}:bg-surface-base`,
+    ghost: `bg-transparent hover:bg-surface-subtle ${f}:bg-surface-base ${f}:border-border-subtle`
+});
+/**
+ * The intent frame values (border + focus ring tint) for success/warning/danger,
+ * parameterised by focus mode. `default` carries no frame class, so callers keep
+ * their own empty `default: {}` slot entry.
+ */
+export const fieldIntentFrames = (f) => ({
+    success: `border-success ${f}:border-success ${f}:ring-success/20`,
+    warning: `border-warning ${f}:border-warning ${f}:ring-warning/20`,
+    danger: `border-danger ${f}:border-danger ${f}:ring-danger/20`
+});
+/** The error frame value (danger border + ring), parameterised by focus mode. */
+export const fieldErrorFrame = (f) => `border-danger ${f}:border-danger ${f}:ring-danger/20`;
+/** Frame classes when the whole control is disabled (the `disabled` variant). */
+export const FIELD_DISABLED_FRAME = 'opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none';
+/** The field label base, shared verbatim across all three fields. */
+export const FIELD_LABEL = 'block font-medium text-text-secondary text-sm';
+/** Label colour when the control is disabled. */
+export const FIELD_LABEL_DISABLED = 'text-text-disabled';
+/** Required-marker asterisk appended after the label. */
+export const FIELD_REQUIRED_LABEL = "after:content-['*'] after:ml-1 after:text-danger";
+/** The two `messageType` message tones (error wins the fold when both apply). */
+export const FIELD_MESSAGE_TONES = {
+    error: 'text-danger',
+    helper: 'text-text-tertiary'
+};

package/dist/primitives/Input/input.variants.js

@@ -1,18 +1,23 @@
+import { FIELD_DISABLED_FRAME, FIELD_LABEL, FIELD_LABEL_DISABLED, FIELD_MESSAGE_TONES, FIELD_NATIVE_DISABLED, FIELD_NATIVE_READONLY, FIELD_REQUIRED_LABEL, FIELD_SURFACE, FIELD_TRANSITION, fieldErrorFrame, fieldFocusRing, fieldIntentFrames, fieldSurfaceVariants } from '../../internal/field-chrome.js';
 import { tv } from '../../utils/variants.js';
+// Input and PinInput light the focusable element itself; TimeInput its container.
+const focus = 'focus-visible';
+const surface = fieldSurfaceVariants(focus);
+const intents = fieldIntentFrames(focus);
 export const inputVariants = tv({
     slots: {
         wrapper: ['flex flex-col w-full gap-1.5'],
         container: ['relative flex items-center'],
         base: [
-            'w-full box-border transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            `w-full box-border ${FIELD_TRANSITION}`,
             // Radius driven by `tier` axis below.
             'focus-visible:outline-none',
-            'border text-text-primary bg-surface-base placeholder:text-text-quaternary',
-            'hover:border-border-default focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20',
-            'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-subtle',
-            'read-only:bg-surface-subtle read-only:cursor-default'
+            `${FIELD_SURFACE} placeholder:text-text-quaternary`,
+            `hover:border-border-default ${fieldFocusRing(focus)}`,
+            FIELD_NATIVE_DISABLED,
+            FIELD_NATIVE_READONLY
         ],
-        label: ['block font-medium text-text-secondary text-sm'],
+        label: [FIELD_LABEL],
         message: ['text-xs mt-1.5'],
         iconContainer: [
             'absolute top-0 bottom-0 flex items-center justify-center z-10 pointer-events-none'
@@ -40,13 +45,13 @@ export const inputVariants = tv({
         },
         variant: {
             outlined: {
-                base: 'border-border-subtle'
+                base: surface.outlined
             },
             filled: {
-                base: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base'
+                base: surface.filled
             },
             ghost: {
-                base: 'bg-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle'
+                base: surface.ghost
             },
             underline: {
                 base: 'bg-transparent border-0 border-b-2 border-border-subtle rounded-none focus-visible:ring-0'
@@ -94,19 +99,19 @@ export const inputVariants = tv({
         intent: {
             default: {},
             success: {
-                base: 'border-success focus-visible:border-success focus-visible:ring-success/20'
+                base: intents.success
             },
             warning: {
-                base: 'border-warning focus-visible:border-warning focus-visible:ring-warning/20'
+                base: intents.warning
             },
             danger: {
-                base: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20'
+                base: intents.danger
             }
         },
         disabled: {
             true: {
-                base: 'opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none',
-                label: 'text-text-disabled'
+                base: FIELD_DISABLED_FRAME,
+                label: FIELD_LABEL_DISABLED
             }
         },
         readonly: {
@@ -117,18 +122,18 @@ export const inputVariants = tv({
         // Declared BEFORE `error` so the error tone wins the message-color
         // bucket in every call shape — `{ error: true }` alone must read red.
         messageType: {
-            error: { message: 'text-danger' },
-            helper: { message: 'text-text-tertiary' }
+            error: { message: FIELD_MESSAGE_TONES.error },
+            helper: { message: FIELD_MESSAGE_TONES.helper }
         },
         error: {
             true: {
-                base: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
-                message: 'text-danger'
+                base: fieldErrorFrame(focus),
+                message: FIELD_MESSAGE_TONES.error
             }
         },
         required: {
             true: {
-                label: "after:content-['*'] after:ml-1 after:text-danger"
+                label: FIELD_REQUIRED_LABEL
             }
         },
         hasLeftIcon: { true: {} },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.37.1",
+  "version": "6.37.2",
   "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.1",
-    "@urbicon-ui/shared-types": "6.37.1",
+    "@urbicon-ui/i18n": "6.37.2",
+    "@urbicon-ui/shared-types": "6.37.2",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",