@urbicon-ui/blocks 6.43.0 → 6.44.0

package/dist/primitives/Alert/alert.variants.d.ts

@@ -1,53 +1,53 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const alertVariants: ((props?: {
-    intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+    intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
     variant?: "inline" | "filled" | "soft" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
 } | undefined) => {
     base: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     icon: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     content: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     title: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     description: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     actions: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     dismissButton: (props?: ({
-        intent?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { mintRegistry } from '../..';
+  import CoreFieldMessage from '../../internal/core/CoreFieldMessage.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext, useFormField } from '../../utils';
   import { checkboxVariants, type CheckboxVariants } from '..';
@@ -186,24 +187,13 @@
     {/if}
   </label>
 
-  {#if ff.errorId}
-    <div
-      id={ff.errorId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-      role="alert"
-    >
-      {error}
-    </div>
-  {:else if ff.helperId}
-    <div
-      id={ff.helperId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {helper}
-    </div>
-  {/if}
+  <CoreFieldMessage
+    {error}
+    {helper}
+    errorId={ff.errorId}
+    helperId={ff.helperId}
+    class={unstyled
+      ? (slotClasses?.message ?? '')
+      : styles.message({ class: slotClasses?.message })}
+  />
 </div>

package/dist/primitives/Checkbox/checkbox.variants.js

@@ -115,7 +115,7 @@ export const checkboxVariants = tv({
             checked: false,
             indeterminate: false,
             variant: 'ghost',
-            class: { box: 'bg-transparent border-transparent group-hover:bg-surface-subtle' }
+            class: { box: 'bg-transparent border-transparent group-hover:bg-surface-hover' }
         },
         // ── Checked intent colors (identical across all variants) ──
         // Hover/active darken through the intent interaction-layer tokens —

package/dist/primitives/Combobox/Combobox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T extends string | number | boolean = string">
   import { useBlocksI18n, mintRegistry } from '../..';
+  import CoreFieldMessage from '../../internal/core/CoreFieldMessage.svelte';
   import { tick } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { comboboxVariants, type ComboboxVariants } from './combobox.variants';
@@ -841,24 +842,21 @@
     </div>
   </div>
 
-  {#if ff.errorId}
-    <div
-      id={ff.errorId}
-      role="alert"
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {error}
-    </div>
-  {:else if ff.helperId}
-    <div
-      id={ff.helperId}
-      class={unstyled ? (slotClasses?.helper ?? '') : styles.helper({ class: slotClasses?.helper })}
-    >
-      {helper}
-    </div>
-  {/if}
+  <!-- Combobox is the one field whose helper has a slot of its own: the two
+       tones are slot constants here, not a `messageType` axis, so the helper
+       arm keeps reading quiet while the field is invalid. -->
+  <CoreFieldMessage
+    {error}
+    {helper}
+    errorId={ff.errorId}
+    helperId={ff.helperId}
+    class={unstyled
+      ? (slotClasses?.message ?? '')
+      : styles.message({ class: slotClasses?.message })}
+    helperClass={unstyled
+      ? (slotClasses?.helper ?? '')
+      : styles.helper({ class: slotClasses?.helper })}
+  />
 </div>
 
 <!--

package/dist/primitives/Combobox/combobox.variants.js

@@ -12,7 +12,13 @@ export const comboboxVariants = tv({
             // `variant` axis (default `outlined` keeps the historical look).
             'w-full border bg-surface-base text-text-primary placeholder:text-text-tertiary',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary',
+            // `/20` matches `fieldFocusRing` in internal/field-chrome.ts, which Input,
+            // Textarea, Select, PinInput and TimeInput all use. At `/50` this field was
+            // the odd one out in both directions: a stronger valid ring than every
+            // sibling, and — once it gained the shared error frame (ring-danger/20) —
+            // an invalid state weaker than its own valid one. The icon-button slots
+            // below keep `/50`: they are small targets, not field frames.
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary',
             'disabled:opacity-50 disabled:cursor-not-allowed'
         ],
         // Message tone follows the ROLE of the text, not the field state: the
@@ -92,7 +98,8 @@ export const comboboxVariants = tv({
         control: [
             'flex w-full flex-wrap items-center border bg-surface-base cursor-text',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/50 focus-within:border-primary'
+            // `/20` — same reason as the `input` slot above.
+            'focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary'
         ],
         // Borderless search input inside `control`; the frame owns the border/ring.
         search: [
@@ -135,11 +142,11 @@ export const comboboxVariants = tv({
                 control: 'border-border-subtle hover:border-border-default'
             },
             filled: {
-                input: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base',
-                control: 'bg-surface-interactive border-transparent focus-within:bg-surface-base'
+                input: 'bg-surface-interactive border-transparent hover:bg-surface-interactive-hover focus-visible:bg-surface-base',
+                control: 'bg-surface-interactive border-transparent hover:bg-surface-interactive-hover focus-within:bg-surface-base'
             },
             ghost: {
-                input: 'bg-transparent border-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle',
+                input: 'bg-transparent border-transparent hover:bg-surface-hover focus-visible:bg-surface-base focus-visible:border-border-subtle',
                 control: 'bg-transparent border-transparent focus-within:bg-surface-base focus-within:border-border-subtle'
             },
             underline: {

package/dist/primitives/Input/Input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { useBlocksI18n, mintRegistry, createPersistentState } from '../..';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import CoreFieldMessage from '../../internal/core/CoreFieldMessage.svelte';
   import { useFormField, getTierContext } from '../../utils';
   import type { InputProps } from '.';
   import { inputVariants, type InputVariants } from './input.variants';
@@ -289,26 +290,15 @@
     {/if}
   </div>
 
-  {#if ff.errorId}
-    <div
-      id={ff.errorId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-      role="alert"
-    >
-      {error}
-    </div>
-  {:else if ff.helperId}
-    <div
-      id={ff.helperId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {helper}
-    </div>
-  {/if}
+  <CoreFieldMessage
+    {error}
+    {helper}
+    errorId={ff.errorId}
+    helperId={ff.helperId}
+    class={unstyled
+      ? (slotClasses?.message ?? '')
+      : styles.message({ class: slotClasses?.message })}
+  />
 
   {#if children}
     <div class="mt-1.5">

package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts

@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const journeyTimelineVariants: ((props?: {
     orientation?: "horizontal" | "vertical" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+    status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
     focused?: boolean | undefined;
     interactive?: boolean | undefined;
     travelled?: boolean | undefined;
@@ -13,7 +13,7 @@ export declare const journeyTimelineVariants: ((props?: {
     base: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -26,7 +26,7 @@ export declare const journeyTimelineVariants: ((props?: {
     rail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -39,7 +39,7 @@ export declare const journeyTimelineVariants: ((props?: {
     node: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -52,7 +52,7 @@ export declare const journeyTimelineVariants: ((props?: {
     metaColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -65,7 +65,7 @@ export declare const journeyTimelineVariants: ((props?: {
     meta: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -78,7 +78,7 @@ export declare const journeyTimelineVariants: ((props?: {
     markerColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -91,7 +91,7 @@ export declare const journeyTimelineVariants: ((props?: {
     marker: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -104,7 +104,7 @@ export declare const journeyTimelineVariants: ((props?: {
     connector: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -117,7 +117,7 @@ export declare const journeyTimelineVariants: ((props?: {
     content: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -130,7 +130,7 @@ export declare const journeyTimelineVariants: ((props?: {
     card: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -143,7 +143,7 @@ export declare const journeyTimelineVariants: ((props?: {
     header: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -156,7 +156,7 @@ export declare const journeyTimelineVariants: ((props?: {
     trigger: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -169,7 +169,7 @@ export declare const journeyTimelineVariants: ((props?: {
     trailing: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -182,7 +182,7 @@ export declare const journeyTimelineVariants: ((props?: {
     labelGroup: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -195,7 +195,7 @@ export declare const journeyTimelineVariants: ((props?: {
     title: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -208,7 +208,7 @@ export declare const journeyTimelineVariants: ((props?: {
     subtitle: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -221,7 +221,7 @@ export declare const journeyTimelineVariants: ((props?: {
     segment: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -234,7 +234,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -247,7 +247,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detailInner: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -260,7 +260,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detailContent: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -273,7 +273,7 @@ export declare const journeyTimelineVariants: ((props?: {
     panel: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "blocked" | "attention" | "active" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;

package/dist/primitives/RadioGroup/RadioGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import CoreFieldMessage from '../../internal/core/CoreFieldMessage.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext, useFormField } from '../../utils';
   import type { RadioGroupProps } from './index';
@@ -177,24 +178,13 @@
     {@render children()}
   </div>
 
-  {#if ff.errorId}
-    <div
-      id={ff.errorId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-      role="alert"
-    >
-      {error}
-    </div>
-  {:else if ff.helperId}
-    <div
-      id={ff.helperId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {helper}
-    </div>
-  {/if}
+  <CoreFieldMessage
+    {error}
+    {helper}
+    errorId={ff.errorId}
+    helperId={ff.helperId}
+    class={unstyled
+      ? (slotClasses?.message ?? '')
+      : styles.message({ class: slotClasses?.message })}
+  />
 </div>

package/dist/primitives/RadioGroup/radioGroup.variants.js

@@ -85,7 +85,12 @@ export const radioItemVariants = tv({
                 indicator: 'w-3.5 h-3.5 mt-px',
                 dot: 'w-1.5 h-1.5',
                 label: 'text-xs',
-                description: 'text-3xs'
+                // `description` carries full sentences, so it stops at the body-copy
+                // floor (`text-xs`) instead of continuing the ladder down to `text-3xs`
+                // (10px) — 2xs/3xs are for marks, hints and dense grids, never for prose
+                // (see the tokens page). At this size the label/description hierarchy is
+                // carried by colour (text-primary vs text-tertiary) rather than size.
+                description: 'text-xs'
             },
             sm: {
                 item: 'gap-2',
@@ -155,7 +160,7 @@ export const radioItemVariants = tv({
         {
             checked: false,
             variant: 'ghost',
-            class: { indicator: 'bg-transparent border-transparent group-hover:bg-surface-subtle' }
+            class: { indicator: 'bg-transparent border-transparent group-hover:bg-surface-hover' }
         },
         // Checked intent colors
         // Hover/active darken through the intent interaction-layer tokens — the

package/dist/primitives/Select/Select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T extends string | number | boolean = string">
   import { useBlocksI18n, mintRegistry } from '../..';
+  import CoreFieldMessage from '../../internal/core/CoreFieldMessage.svelte';
   import { useFormField, getTierContext, useFloatingPanel, floatingPanelHidden } from '../../utils';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
@@ -759,24 +760,13 @@
     {/if}
   {/if}
 
-  {#if ff.errorId}
-    <div
-      id={ff.errorId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-      role="alert"
-    >
-      {error}
-    </div>
-  {:else if ff.helperId}
-    <div
-      id={ff.helperId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {helper}
-    </div>
-  {/if}
+  <CoreFieldMessage
+    {error}
+    {helper}
+    errorId={ff.errorId}
+    helperId={ff.helperId}
+    class={unstyled
+      ? (slotClasses?.message ?? '')
+      : styles.message({ class: slotClasses?.message })}
+  />
 </div>

package/dist/primitives/Select/select.variants.js

@@ -78,10 +78,10 @@ export const selectVariants = tv({
         variant: {
             outlined: { trigger: 'border-border-subtle' },
             filled: {
-                trigger: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base'
+                trigger: 'bg-surface-interactive border-transparent hover:bg-surface-interactive-hover focus-visible:bg-surface-base'
             },
             ghost: {
-                trigger: 'bg-transparent border-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle'
+                trigger: 'bg-transparent border-transparent hover:bg-surface-hover focus-visible:bg-surface-base focus-visible:border-border-subtle'
             },
             underline: {
                 trigger: 'bg-transparent border-0 border-b-2 border-border-subtle rounded-none focus-visible:ring-0'

package/dist/primitives/Slider/Slider.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { useBlocksI18n, mintRegistry } from '../..';
+  import CoreFieldMessage from '../../internal/core/CoreFieldMessage.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { useFormField } from '../../utils';
   import type { SliderProps } from './index';
@@ -558,24 +559,13 @@
     </div>
   {/if}
 
-  {#if ff.errorId}
-    <div
-      id={ff.errorId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-      role="alert"
-    >
-      {error}
-    </div>
-  {:else if ff.helperId}
-    <div
-      id={ff.helperId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {helper}
-    </div>
-  {/if}
+  <CoreFieldMessage
+    {error}
+    {helper}
+    errorId={ff.errorId}
+    helperId={ff.helperId}
+    class={unstyled
+      ? (slotClasses?.message ?? '')
+      : styles.message({ class: slotClasses?.message })}
+  />
 </div>