@urbicon-ui/blocks 6.43.0 → 6.44.0

package/dist/components/Chat/CodeBlock/code-block.variants.js

@@ -1,18 +1,11 @@
 import { tv } from '../../../utils/variants.js';
 export const codeBlockVariants = tv({
     slots: {
-        // Architectural surface — an elevated card, structure radius, clipped so the
-        // scrollable body respects the rounded corners.
-        root: [
-            'relative block w-full overflow-hidden box-border',
-            'bg-surface-elevated border border-border-subtle rounded-contain'
-        ],
-        // Header only renders when there is something to show (lang / copy / actions).
-        header: [
-            'flex items-center justify-between gap-2',
-            'px-3 py-1.5 border-b border-border-subtle'
-        ],
-        langLabel: ['font-mono text-xs text-text-tertiary select-none'],
+        root: ['relative block w-full overflow-hidden box-border'],
+        // Header only renders when there is something to show (label / lang / copy /
+        // actions).
+        header: ['flex items-center justify-between gap-2'],
+        langLabel: ['text-xs text-text-tertiary select-none'],
         copyButton: [
             'inline-flex items-center gap-1.5',
             'px-2 py-1 rounded-modify',
@@ -26,12 +19,33 @@ export const codeBlockVariants = tv({
         // never the page. Focusable + role=region so keyboard users can reach the
         // scroll (a11y for scrollable content).
         pre: [
-            'm-0 px-3 py-2.5',
+            'm-0',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset'
         ],
         code: ['font-mono text-sm text-text-primary']
     },
     variants: {
+        /**
+         * `card` — the standalone block: own surface, own outline, own radius. This
+         * is the right frame when the code sits directly in a reading flow (a fenced
+         * block in streamed markdown).
+         *
+         * `plain` — the EMBEDDED block: no surface, no border, no radius, no padding
+         * of its own. A card inside a card is the single loudest source of visual
+         * noise in this family — nested outlines at the same radius, two header rows
+         * and three divider lines for one JSON payload. When the parent already
+         * frames the content (ToolCallCard), the code only needs its monospace face
+         * to read as code. The parent owns the frame; the child owns the text.
+         */
+        variant: {
+            card: {
+                root: 'bg-surface-elevated border border-border-subtle rounded-contain',
+                header: 'px-3 py-1.5 border-b border-border-subtle',
+                langLabel: 'font-mono',
+                pre: 'px-3 py-2.5'
+            },
+            plain: {}
+        },
         // false → single-line semantics, horizontal scroll inside the block.
         // true  → soft-wrap long lines, no horizontal scroll.
         wrap: {
@@ -46,6 +60,7 @@ export const codeBlockVariants = tv({
         }
     },
     defaultVariants: {
+        variant: 'card',
         wrap: false
     }
 });

package/dist/components/Chat/CodeBlock/index.d.ts

@@ -2,11 +2,14 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { CodeBlockSlots, CodeBlockVariants } from './code-block.variants.js';
 /**
- * @description Read-only code display card with a one-click copy interaction: the copy
+ * @description Read-only code display with a one-click copy interaction: the copy
  * button swaps its icon and label to a confirmation for two seconds and fires `onCopy`.
  * Renders raw text only — no built-in syntax highlighting; a consumer or the
  * StreamingMarkdown renderer can layer highlighting in via a snippet. Used by
  * StreamingMarkdown for fenced code blocks, and standalone for any code snippet.
+ * `variant="card"` (default) brings its own surface, outline and radius;
+ * `variant="plain"` drops all three for embedding inside a container that already
+ * frames the content (as ToolCallCard does), so nested outlines never stack.
  *
  * @tag ai
  * @tag display
@@ -23,6 +26,13 @@ export interface CodeBlockProps extends CodeBlockVariants, Omit<HTMLAttributes<H
     code: string;
     /** Language label shown in the header. Display-only — does not drive highlighting. */
     lang?: string;
+    /**
+     * Header caption, shown instead of `lang`. For an embedded block, what the
+     * payload *is* ("Input", "Response body") says more than the language it is
+     * serialised in — and rendering both states the same fact twice. `lang` still
+     * names the scrollable region for screen readers when both are given.
+     */
+    label?: string;
     /** Show the copy button in the header. */
     showCopy?: boolean;
     /**
@@ -30,19 +40,44 @@ export interface CodeBlockProps extends CodeBlockVariants, Omit<HTMLAttributes<H
      * block; `true` wraps with `whitespace-pre-wrap` + word breaking.
      */
     wrap?: boolean;
-    /** Accessible label / tooltip for the copy button in its idle state. */
+    /**
+     * Accessible label / tooltip for the copy button at rest. These three labels
+     * are plain English defaults rather than translations on purpose: pulling the
+     * i18n registry into this leaf costs +5 KB gz, which StreamingMarkdown and
+     * ReasoningDisclosure would inherit by embedding it. Pass your own strings to
+     * localise.
+     * @default 'Copy'
+     */
     copyLabel?: string;
-    /** Accessible label shown for two seconds after a successful copy. */
+    /**
+     * Label shown for two seconds after a successful copy.
+     * @default 'Copied'
+     */
     copiedLabel?: string;
+    /**
+     * Label shown for two seconds after a FAILED copy — e.g. a denied clipboard
+     * permission or a non-secure context.
+     * @default 'Copy failed'
+     */
+    copyFailedLabel?: string;
     /** Called with the copied code after a successful clipboard write. */
     onCopy?: (code: string) => void;
+    /**
+     * Called with the thrown reason when the clipboard write fails. Without a
+     * handler the failure is logged; either way the button reports it.
+     */
+    onCopyError?: (error: unknown) => void;
     /** Extra header actions rendered to the right, before the copy button. */
     actions?: Snippet;
     /** Extra classes merged onto the root element. */
     class?: string;
     /** Remove all default tv classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides. Slots: root | header | langLabel | copyButton | pre | code */
+    /**
+     * Per-slot class overrides. Slots: root | header | langLabel | copyButton | pre | code.
+     * Note `variant="plain"` deliberately leaves root/header/pre without surface,
+     * outline or padding — the embedding parent supplies those.
+     */
     slotClasses?: Partial<Record<CodeBlockSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ CodeBlock: {...} }}>`.

package/dist/components/Chat/PromptInput/PromptInput.svelte

@@ -2,6 +2,7 @@
   import { onDestroy, tick } from 'svelte';
   import { useBlocksI18n } from '../../..';
   import { getBlocksConfig, resolveSlotClasses } from '../../../provider';
+  import CoreIconButton from '../../../internal/core/CoreIconButton.svelte';
   import { resolveIcon } from '../../../icons';
   import SendIconDefault from '../../../icons/SendIcon.svelte';
   import SquareIconDefault from '../../../icons/SquareIcon.svelte';
@@ -350,15 +351,14 @@
           </span>
           <span class={cls('attachmentName')} title={entry.file.name}>{entry.file.name}</span>
           <span class={cls('attachmentSize')}>{formatFileSize(entry.file.size)}</span>
-          <button
-            type="button"
+          <CoreIconButton
             class={cls('attachmentRemove')}
             data-attachment-remove
             aria-label={removeAttachmentLabel(entry.file.name)}
             onclick={() => removeAttachment(entry, i)}
           >
             <CloseIcon size={14} />
-          </button>
+          </CoreIconButton>
         </li>
       {/each}
     </ul>
@@ -382,15 +382,14 @@
   <div class={cls('actions')}>
     <div class={cls('leading')}>
       {#if allowAttachments}
-        <button
-          type="button"
+        <CoreIconButton
           class={cls('attachButton')}
           aria-label={attachLabel}
           {disabled}
           onclick={openFilePicker}
         >
           <PaperclipIcon size={iconSize} />
-        </button>
+        </CoreIconButton>
       {/if}
       {@render leading?.()}
     </div>
@@ -398,24 +397,18 @@
     <div class={cls('trailing')}>
       {@render trailing?.()}
       {#if busy}
-        <button
-          type="button"
-          class={cls('stopButton')}
-          aria-label={stopLabel}
-          onclick={() => onStop?.()}
-        >
+        <CoreIconButton class={cls('stopButton')} aria-label={stopLabel} onclick={() => onStop?.()}>
           <SquareIcon size={iconSize} />
-        </button>
+        </CoreIconButton>
       {:else}
-        <button
-          type="button"
+        <CoreIconButton
           class={cls('sendButton')}
           aria-label={sendLabel}
           disabled={!canSubmit}
           onclick={submit}
         >
           <SendIcon size={iconSize} />
-        </button>
+        </CoreIconButton>
       {/if}
     </div>
   </div>

package/dist/components/Chat/PromptInput/prompt-input.variants.js

@@ -29,13 +29,19 @@ export const promptInputVariants = tv({
         ],
         attachmentName: ['truncate text-xs text-text-primary min-w-0'],
         attachmentSize: ['shrink-0 text-2xs text-text-tertiary tabular-nums'],
+        // The icon-only controls below render through CoreIconButton, so they carry
+        // only what it does NOT supply. Its plumbing is flex centring, cursor/select,
+        // `focus-visible:outline-none` and the disabled trio (opacity, cursor,
+        // pointer-events) — repeating any of those here would be resolved by
+        // stylesheet order rather than the override ladder, since the core runs no
+        // variant engine. `disabled:hover:*` is likewise unnecessary: the core's
+        // `disabled:pointer-events-none` already stops hover from firing.
         attachmentRemove: [
-            'inline-flex items-center justify-center shrink-0',
-            'size-5 rounded-modify',
-            'text-text-tertiary cursor-pointer',
+            'shrink-0 size-5 rounded-modify',
+            'text-text-tertiary',
             'transition-[color,background-color] duration-[var(--blocks-duration-fast)] ease-out',
             'hover:bg-surface-hover hover:text-text-primary',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+            'focus-visible:ring-2 focus-visible:ring-primary'
         ],
         // Chromeless auto-growing textarea — the composer surface owns the border.
         textarea: [
@@ -50,29 +56,24 @@ export const promptInputVariants = tv({
         trailing: ['flex items-center gap-1 shrink-0'],
         // Icon-only affordance buttons.
         attachButton: [
-            'inline-flex items-center justify-center shrink-0',
-            'rounded-modify text-text-secondary cursor-pointer',
+            'shrink-0 rounded-modify text-text-secondary',
             'transition-[color,background-color] duration-[var(--blocks-duration-fast)] ease-out',
             'hover:bg-surface-hover hover:text-text-primary',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-            'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent'
+            'focus-visible:ring-2 focus-visible:ring-primary'
         ],
         sendButton: [
-            'inline-flex items-center justify-center shrink-0',
-            'rounded-modify cursor-pointer',
+            'shrink-0 rounded-modify',
             'bg-primary text-text-on-primary',
             'transition-[color,background-color,opacity] duration-[var(--blocks-duration-fast)] ease-out',
             'hover:bg-primary-hover active:bg-primary-active',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
-            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-primary'
+            'focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
         ],
         stopButton: [
-            'inline-flex items-center justify-center shrink-0',
-            'rounded-modify cursor-pointer',
+            'shrink-0 rounded-modify',
             'bg-neutral text-text-on-primary',
             'transition-[color,background-color] duration-[var(--blocks-duration-fast)] ease-out',
             'hover:bg-neutral-hover active:bg-neutral-active',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
+            'focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
         ],
         // Compact inline validation line (first rejection). role=status is set in
         // the component; the empty state renders no box.

package/dist/components/Chat/ToolCallCard/ToolCallCard.svelte

@@ -153,20 +153,25 @@
   {#if children}
     {@render children(toolCall)}
   {:else}
+    <!--
+      The payloads render as `plain` CodeBlocks: this card already IS the frame,
+      so a bordered child card would stack a second outline at the same radius
+      inside the first. The section caption moved into the block's own header
+      too — "Input" above a header reading "json" was one chrome row and one
+      label too many for a single payload.
+    -->
     <div class={cls('body')}>
       {#if toolCall.errorMessage}
         <p class={cls('errorMessage')}>{toolCall.errorMessage}</p>
       {/if}
       {#if toolCall.input !== undefined}
         <div class={cls('section')}>
-          <span class={cls('sectionLabel')}>{inputLabel}</span>
-          <CodeBlock lang="json" code={stringify(toolCall.input)} />
+          <CodeBlock variant="plain" label={inputLabel} code={stringify(toolCall.input)} />
         </div>
       {/if}
       {#if toolCall.output !== undefined}
         <div class={cls('section')}>
-          <span class={cls('sectionLabel')}>{outputLabel}</span>
-          <CodeBlock lang="json" code={stringify(toolCall.output)} />
+          <CodeBlock variant="plain" label={outputLabel} code={stringify(toolCall.output)} />
         </div>
       {/if}
     </div>

package/dist/components/Chat/ToolCallCard/index.d.ts

@@ -59,9 +59,9 @@ export interface ToolCallCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     completeLabel?: string;
     /** Header badge label for the `error` state. @default 'Failed' */
     errorLabel?: string;
-    /** Heading above the input code block. @default 'Input' */
+    /** Caption in the input payload's header. @default 'Input' */
     inputLabel?: string;
-    /** Heading above the output code block. @default 'Output' */
+    /** Caption in the output payload's header. @default 'Output' */
     outputLabel?: string;
     /** Extra classes merged onto the root card element. */
     class?: string;
@@ -70,7 +70,8 @@ export interface ToolCallCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     /**
      * Per-slot class overrides. Slots: `trigger` (header button), `triggerLeft`,
      * `triggerRight`, `spinner`, `toolName`, `chevron`, `body`, `section`,
-     * `sectionLabel`, `errorMessage`.
+     * `errorMessage`. The payloads render as `variant="plain"` CodeBlocks — style
+     * those through `<BlocksProvider presets={{ CodeBlock: {...} }}>`.
      */
     slotClasses?: Partial<Record<ToolCallCardSlots, string>>;
     /**

package/dist/components/Chat/ToolCallCard/tool-call-card.variants.d.ts

@@ -24,9 +24,6 @@ export declare const toolCallCardVariants: ((props?: {} | undefined) => {
     section: (props?: ({} & {
         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;
-    sectionLabel: (props?: ({} & {
-        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;
     errorMessage: (props?: ({} & {
         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;

package/dist/components/Chat/ToolCallCard/tool-call-card.variants.js

@@ -28,10 +28,10 @@ export const toolCallCardVariants = tv({
         ],
         // Default body wrapper (input/output sections + error line).
         body: 'flex flex-col gap-3',
-        // One labelled block (heading + CodeBlock).
-        section: 'flex flex-col gap-1',
-        // Small tertiary heading above each code block.
-        sectionLabel: 'text-xs font-medium text-text-tertiary',
+        // One payload block. The caption lives in the CodeBlock's own header (it is
+        // passed as `label`), so this is a plain positioning wrapper — no heading row
+        // of its own, which is what removed a whole chrome level from the card.
+        section: 'flex flex-col',
         // Error message line shown above the sections.
         errorMessage: 'text-sm text-danger'
     }

package/dist/components/CopyButton/CopyButton.svelte

@@ -3,6 +3,7 @@
   import { resolveIcon } from '../../icons';
   import CheckIconDefault from '../../icons/CheckIcon.svelte';
   import CopyIconDefault from '../../icons/CopyIcon.svelte';
+  import { createCopyState } from '../../internal/copy-state.svelte';
   import { Button } from '../../primitives/Button';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { copyButtonVariants } from './copy-button.variants';
@@ -40,8 +41,11 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
-  let state = $state<'idle' | 'copied' | 'error'>('idle');
-  let timer: ReturnType<typeof setTimeout> | undefined;
+  // Shares the clipboard state machine with CodeBlock and ChatMessage — see
+  // internal/copy-state.svelte.ts for why the outcome is returned rather than
+  // delivered through callbacks captured at init.
+  const copyState = createCopyState({ timeout: () => timeout });
+  const state = $derived(copyState.phase);
 
   const copyText = $derived(label ?? bt('accessibility.copy'));
   const copiedText = $derived(copiedLabel ?? bt('accessibility.copied'));
@@ -91,25 +95,11 @@
   // visible text be the name (WCAG 2.5.3), keeping any consumer aria-label.
   const ariaLabel = $derived(label ? ariaLabelProp : (ariaLabelProp ?? copyText));
 
-  function scheduleReset() {
-    clearTimeout(timer);
-    if (timeout > 0) timer = setTimeout(() => (state = 'idle'), timeout);
-  }
-
   async function handleCopy() {
-    try {
-      if (!navigator.clipboard?.writeText) throw new Error('Clipboard API unavailable');
-      await navigator.clipboard.writeText(value);
-      state = 'copied';
-      onCopy?.(value);
-    } catch (error) {
-      state = 'error';
-      onError?.(error);
-    }
-    scheduleReset();
+    const result = await copyState.copy(value);
+    if (result.ok) onCopy?.(value);
+    else onError?.(result.error);
   }
-
-  $effect(() => () => clearTimeout(timer));
 </script>
 
 <span class="contents">

package/dist/components/CopyButton/copy-button.variants.d.ts

@@ -1,23 +1,23 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const copyButtonVariants: ((props?: {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-    state?: "error" | "idle" | "copied" | undefined;
+    state?: "copied" | "error" | "idle" | undefined;
 } | undefined) => {
     base: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "error" | "idle" | "copied" | undefined;
+        state?: "copied" | "error" | "idle" | 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?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "error" | "idle" | "copied" | undefined;
+        state?: "copied" | "error" | "idle" | 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;
     label: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "error" | "idle" | "copied" | undefined;
+        state?: "copied" | "error" | "idle" | 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;

package/dist/components/FileUpload/fileUpload.variants.js

@@ -120,8 +120,13 @@ export const fileUploadVariants = tv({
         },
         disabled: {
             true: {
+                // No `hover:` neutralisers here: `pointer-events-none` on the root
+                // already makes the dropzone unhoverable, so any hover class on it is
+                // unreachable. The two that used to sit here (`hover:border-border-default
+                // hover:bg-surface-base`) were dead, and `bg-surface-base` would have
+                // *lightened* a disabled dropzone resting on an elevated card.
                 root: 'opacity-50 pointer-events-none',
-                dropzone: 'cursor-not-allowed hover:border-border-default hover:bg-surface-base'
+                dropzone: 'cursor-not-allowed'
             },
             false: {}
         }

package/dist/components/PinInput/PinInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { useBlocksI18n } from '../..';
+  import CoreFieldMessage from '../../internal/core/CoreFieldMessage.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext } from '../../utils';
   import type { PinInputProps } from './index';
@@ -299,26 +300,17 @@
     {/each}
   </div>
 
-  {#if error}
-    <div
-      id={messageId}
-      role="alert"
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {error}
-    </div>
-  {:else if helper}
-    <div
-      id={messageId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {helper}
-    </div>
-  {/if}
+  <!-- Both arms share one id: `describedBy` points at `messageId` regardless of
+       which arm renders, since only one ever does. -->
+  <CoreFieldMessage
+    {error}
+    {helper}
+    errorId={messageId}
+    helperId={messageId}
+    class={unstyled
+      ? (slotClasses?.message ?? '')
+      : styles.message({ class: slotClasses?.message })}
+  />
 
   {#if name}
     <input type="hidden" {name} {value} />

package/dist/components/TimeInput/TimeInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { useBlocksI18n } from '../..';
+  import CoreFieldMessage from '../../internal/core/CoreFieldMessage.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext } from '../../utils';
   import { resolveIcon } from '../../icons';
@@ -509,26 +510,17 @@
     {/if}
   </div>
 
-  {#if error}
-    <div
-      id={messageId}
-      role="alert"
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {error}
-    </div>
-  {:else if helper}
-    <div
-      id={messageId}
-      class={unstyled
-        ? (slotClasses?.message ?? '')
-        : styles.message({ class: slotClasses?.message })}
-    >
-      {helper}
-    </div>
-  {/if}
+  <!-- Both arms share one id: `describedBy` points at `messageId` regardless of
+       which arm renders, since only one ever does. -->
+  <CoreFieldMessage
+    {error}
+    {helper}
+    errorId={messageId}
+    helperId={messageId}
+    class={unstyled
+      ? (slotClasses?.message ?? '')
+      : styles.message({ class: slotClasses?.message })}
+  />
 
   {#if name}
     <input type="hidden" {name} value={value ?? ''} />