@urbicon-ui/blocks 6.43.2 → 6.44.0

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 ?? ''} />

package/dist/internal/core/CoreFieldMessage.svelte

@@ -0,0 +1,81 @@
+<!--
+  CoreFieldMessage — the helper/error line under a form field, shared by every
+  component in the Form family WITHOUT any of them importing another public
+  component: Input, Textarea, Select, Combobox, Checkbox, Toggle, RadioGroup,
+  Slider, PinInput, TimeInput.
+
+  INTERNAL — never exported from the package barrel, no docs/MCP entry.
+
+  This is part (b) of the field-chrome de-duplication: part (a) moved the shared
+  tv() class STRINGS into `internal/field-chrome.ts` (debt-fix-wave-5), and the
+  same block of MARKUP stayed hand-copied in every `.svelte` file. The first cut
+  covered the three components the debt entry named; the block turned out to be
+  verbatim in seven more, which is where most of the copies actually were.
+
+  What it owns: the error-beats-helper precedence, `role="alert"` on the error
+  arm only, and wiring the right id onto the right arm. What it does NOT own:
+  the look. The call site resolves its own `message` slot (respecting `unstyled`
+  and `slotClasses`) and passes the finished class string, exactly as
+  CoreIconButton and CoreSpinner take theirs — a core carries behaviour, the
+  embedding component carries visual identity.
+
+  Only the error arm is a live region. The helper text is static descriptive
+  content that is already reachable through `aria-describedby`; announcing it
+  via `role="alert"` would interrupt the user for text that did not change.
+
+  Deliberately NOT extracted alongside it: the label. It looks like the same
+  kind of copy but it is not — the element is dictated by what the field is.
+  Input, Textarea and Combobox render a real `<label for={fieldId}>` because
+  each has exactly one focusable element; Select adds an `id` so its trigger
+  BUTTON can also be named by `aria-labelledby`; PinInput, TimeInput and
+  RadioGroup render a `<span id>` behind `aria-labelledby` on a `role="group"`,
+  having many focusable segments and no single field a `for` could point at;
+  Checkbox and Toggle put the text inside the wrapping `<label>` next to the
+  control, and Slider's sits in a header row beside the value read-out. Those
+  are five different a11y shapes, so unifying them would be a regression rather
+  than a de-duplication. The label stays at the call sites.
+
+  The one call site that wraps this component in markup of its own is Textarea:
+  its message shares a `justify-between` footer row with the character counter,
+  so it keeps an empty `<span>` for the no-message case to hold the counter
+  right. That spacer is layout, not scaffolding, and stays there.
+-->
+<script lang="ts">
+  let {
+    error,
+    helper,
+    errorId,
+    helperId,
+    class: className = '',
+    helperClass
+  }: {
+    /** Error text. Wins over `helper` when both are set. */
+    error?: string;
+    /** Helper text, shown only when there is no error. */
+    helper?: string;
+    /** Id for the error arm — must match what `aria-describedby` points at. */
+    errorId?: string;
+    /** Id for the helper arm — must match what `aria-describedby` points at. */
+    helperId?: string;
+    /** The resolved `message` slot class from the call site. */
+    class?: string;
+    /**
+     * Resolved class for the helper arm, when the call site styles it through a
+     * slot of its own instead of reusing `message`. Only Combobox does — it
+     * exposes `slotClasses.helper` next to `slotClasses.message`, so the two
+     * tones are slot constants there rather than one `messageType` axis.
+     * Defaults to `class`, which is what every other field passes.
+     */
+    helperClass?: string;
+  } = $props();
+</script>
+
+{#if error}
+  <div id={errorId} class={className} role="alert">
+    {error}
+  </div>
+{:else if helper}
+  <div id={helperId} class={helperClass ?? className}>
+    {helper}
+  </div>
+{/if}

package/dist/internal/core/CoreFieldMessage.svelte.d.ts

@@ -0,0 +1,23 @@
+type $$ComponentProps = {
+    /** Error text. Wins over `helper` when both are set. */
+    error?: string;
+    /** Helper text, shown only when there is no error. */
+    helper?: string;
+    /** Id for the error arm — must match what `aria-describedby` points at. */
+    errorId?: string;
+    /** Id for the helper arm — must match what `aria-describedby` points at. */
+    helperId?: string;
+    /** The resolved `message` slot class from the call site. */
+    class?: string;
+    /**
+     * Resolved class for the helper arm, when the call site styles it through a
+     * slot of its own instead of reusing `message`. Only Combobox does — it
+     * exposes `slotClasses.helper` next to `slotClasses.message`, so the two
+     * tones are slot constants there rather than one `messageType` axis.
+     * Defaults to `class`, which is what every other field passes.
+     */
+    helperClass?: string;
+};
+declare const CoreFieldMessage: import("svelte").Component<$$ComponentProps, {}, "">;
+type CoreFieldMessage = ReturnType<typeof CoreFieldMessage>;
+export default CoreFieldMessage;

package/dist/internal/field-chrome.js

@@ -58,7 +58,7 @@ export const fieldFocusRing = (f) => `${f}:border-primary ${f}:ring-2 ${f}:ring-
 export const fieldSurfaceVariants = (f) => ({
     outlined: 'border-border-subtle',
     filled: `bg-surface-interactive border-transparent hover:bg-surface-interactive-hover ${f}:bg-surface-base`,
-    ghost: `bg-transparent hover:bg-surface-subtle ${f}:bg-surface-base ${f}:border-border-subtle`
+    ghost: `bg-transparent hover:bg-surface-hover ${f}:bg-surface-base ${f}:border-border-subtle`
 });
 /**
  * The intent frame values (border + focus ring tint) for success/warning/danger,

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

@@ -146,7 +146,7 @@ export const comboboxVariants = tv({
                 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/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

@@ -160,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

@@ -81,7 +81,7 @@ export const selectVariants = tv({
                 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>

package/dist/primitives/Tab/tab.variants.js

@@ -60,7 +60,7 @@ export const tabVariants = tv({
                 trigger: [
                     'px-4 py-2 border border-b-0 -mb-px',
                     'text-text-tertiary border-transparent',
-                    'hover:text-text-primary hover:bg-surface-subtle',
+                    'hover:text-text-primary hover:bg-surface-hover',
                     'data-[state=active]:bg-surface-base data-[state=active]:text-primary',
                     'data-[state=active]:border-border-subtle data-[state=active]:border-b-surface-base'
                 ]

package/dist/primitives/Textarea/Textarea.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { mintRegistry } from '../..';
+  import CoreFieldMessage from '../../internal/core/CoreFieldMessage.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { useFormField, getTierContext } from '../../utils';
   import type { TextareaProps } from './index';
@@ -165,26 +166,20 @@
     <div
       class={unstyled ? (slotClasses?.footer ?? '') : styles.footer({ class: slotClasses?.footer })}
     >
-      {#if ff.errorId}
-        <div
-          id={ff.errorId}
-          class={unstyled
-            ? (slotClasses?.message ?? '')
-            : styles.message({ class: slotClasses?.message })}
-          role="alert"
-        >
+      {#if error || helper}
+        <CoreFieldMessage
           {error}
-        </div>
-      {:else if ff.helperId}
-        <div
-          id={ff.helperId}
+          {helper}
+          errorId={ff.errorId}
+          helperId={ff.helperId}
           class={unstyled
             ? (slotClasses?.message ?? '')
             : styles.message({ class: slotClasses?.message })}
-        >
-          {helper}
-        </div>
+        />
       {:else}
+        <!-- The footer is `justify-between`: without a first child the counter
+             would slide to the left edge. Unlike every other field, Textarea's
+             message shares a row, so the empty slot has to stay here. -->
         <span></span>
       {/if}
 

package/dist/primitives/Textarea/textarea.variants.js

@@ -33,7 +33,7 @@ export const textareaVariants = tv({
                 base: 'bg-surface-interactive border-transparent hover:bg-surface-interactive-hover focus-visible:bg-surface-base'
             },
             ghost: {
-                base: 'bg-transparent border-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle'
+                base: 'bg-transparent border-transparent hover:bg-surface-hover focus-visible:bg-surface-base focus-visible:border-border-subtle'
             },
             underline: {
                 base: 'bg-transparent border-0 border-b-2 border-border-subtle rounded-none focus-visible:ring-0'

package/dist/primitives/Toggle/Toggle.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 { getTierContext, useFormField } from '../../utils';
   import { toggleVariants, type ToggleVariants } from './toggle.variants';
@@ -152,24 +153,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/style/semantic.css

@@ -69,6 +69,16 @@
   --color-surface-active: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   --color-surface-disabled: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   --color-surface-selected: light-dark(var(--color-primary-50), var(--color-primary-900));
+  /* A RESTING tint only — never a hover step. It resolves to exactly
+     `surface-elevated`, so `hover:bg-surface-subtle` is invisible on every
+     elevated surface (Popover, Menu, Select dropdown, elevated Card). That
+     shipped across 8 components until 2026-07-26; the hover idiom moved to
+     `surface-hover`, and variants-lint now errors on any hover fill naming a
+     reading surface. Its in-page-zone role was superseded by `surface-quiet`
+     in v5 (MIGRATION-v5 "New tokens"), which is why it has no rung of its own
+     left — prefer `surface-quiet` for a tinted zone and `surface-elevated`
+     for a raised one. Kept for the resting uses that read correctly against
+     a border (readonly/disabled fields, list rows, code chips). */
   --color-surface-subtle: light-dark(var(--color-neutral-50), var(--color-neutral-800));
   --color-surface-inverted: light-dark(var(--color-neutral-900), var(--color-neutral-100));
   /* Skeleton wave-shimmer highlight (Skeleton animation="wave"). A translucent

package/package.json

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