@urbicon-ui/blocks 6.21.2 → 6.22.0

package/dist/primitives/Button/button.variants.d.ts

@@ -4,7 +4,7 @@ export declare const buttonVariants: ((props?: {
     intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
     pressed?: boolean | undefined;
     variant?: "text" | "ghost" | "filled" | "outlined" | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xs" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | "2xs" | undefined;
     loading?: boolean | undefined;
     loadingPlacement?: "start" | "end" | "overlay" | undefined;
     active?: boolean | undefined;
@@ -15,7 +15,7 @@ export declare const buttonVariants: ((props?: {
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         pressed?: boolean | undefined;
         variant?: "text" | "ghost" | "filled" | "outlined" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | "2xs" | undefined;
         loading?: boolean | undefined;
         loadingPlacement?: "start" | "end" | "overlay" | undefined;
         active?: boolean | undefined;
@@ -28,7 +28,7 @@ export declare const buttonVariants: ((props?: {
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         pressed?: boolean | undefined;
         variant?: "text" | "ghost" | "filled" | "outlined" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | "2xs" | undefined;
         loading?: boolean | undefined;
         loadingPlacement?: "start" | "end" | "overlay" | undefined;
         active?: boolean | undefined;
@@ -41,7 +41,7 @@ export declare const buttonVariants: ((props?: {
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         pressed?: boolean | undefined;
         variant?: "text" | "ghost" | "filled" | "outlined" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | "2xs" | undefined;
         loading?: boolean | undefined;
         loadingPlacement?: "start" | "end" | "overlay" | undefined;
         active?: boolean | undefined;

package/dist/primitives/ButtonGroup/index.d.ts

@@ -45,7 +45,7 @@ export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     orientation?: ButtonGroupOrientation;
     /** Visually connect buttons (overlapping borders, shared rounding). When `false`, buttons are spaced with a small gap. */
     connected?: boolean;
-    /** Size propagated to child Buttons (unless a Button sets its own). */
+    /** Size propagated to child Buttons (the group value wins over a Button's own `size`). */
     size?: ComponentSize;
     /** Semantic colour propagated to child Buttons. */
     intent?: ComponentIntent;

package/dist/primitives/Card/card.variants.d.ts

@@ -1,6 +1,6 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const cardVariants: ((props?: {
-    variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
+    variant?: "quiet" | "elevated" | "outlined" | "floating" | undefined;
     padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
     dividers?: boolean | undefined;
     interactive?: boolean | undefined;
@@ -8,7 +8,7 @@ export declare const cardVariants: ((props?: {
     disabled?: boolean | undefined;
 } | undefined) => {
     base: (props?: ({
-        variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
+        variant?: "quiet" | "elevated" | "outlined" | "floating" | undefined;
         padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
         dividers?: boolean | undefined;
         interactive?: boolean | undefined;
@@ -18,7 +18,7 @@ export declare const cardVariants: ((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;
     header: (props?: ({
-        variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
+        variant?: "quiet" | "elevated" | "outlined" | "floating" | undefined;
         padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
         dividers?: boolean | undefined;
         interactive?: boolean | undefined;
@@ -28,7 +28,7 @@ export declare const cardVariants: ((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;
     content: (props?: ({
-        variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
+        variant?: "quiet" | "elevated" | "outlined" | "floating" | undefined;
         padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
         dividers?: boolean | undefined;
         interactive?: boolean | undefined;
@@ -38,7 +38,7 @@ export declare const cardVariants: ((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;
     footer: (props?: ({
-        variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
+        variant?: "quiet" | "elevated" | "outlined" | "floating" | undefined;
         padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
         dividers?: boolean | undefined;
         interactive?: boolean | undefined;

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -139,15 +139,24 @@
       aria-hidden="true"
       data-state={dataState}
     >
-      {#if indeterminate}
-        <IndeterminateIcon
-          class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}
-        />
-      {:else if checked}
-        <CheckMarkIcon
-          class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}
-          strokeWidth={3}
-        />
+      {#if unstyled}
+        <!-- Unstyled keeps the mount-on-state contract: consumers style via
+             `data-state` on the box and rely on the icon only existing while
+             checked/indeterminate. -->
+        {#if indeterminate}
+          <IndeterminateIcon class={slotClasses?.icon ?? ''} />
+        {:else if checked}
+          <CheckMarkIcon class={slotClasses?.icon ?? ''} strokeWidth={3} />
+        {/if}
+      {:else if indeterminate}
+        <IndeterminateIcon class={styles.icon({ class: slotClasses?.icon })} strokeWidth={3} />
+      {:else}
+        <!-- Styled mode keeps the icon mounted even while unchecked (hidden by
+             `opacity-0` + full stroke-dash offset) — a conditional mount would
+             insert the element already at its resolved classes and the draw-in
+             transition could never run. strokeWidth 3 matches the check and
+             the minus so both states carry the same stroke weight. -->
+        <CheckMarkIcon class={styles.icon({ class: slotClasses?.icon })} strokeWidth={3} />
       {/if}
     </span>
 

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

@@ -7,12 +7,27 @@ export const checkboxVariants = tv({
         // the checkbox box is an input-tap surface.
         box: [
             'relative flex items-center justify-center shrink-0 border',
-            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            'transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--blocks-duration-fast)] ease-out',
+            // Press feedback on the control surface — same small-element press cue
+            // as Badge/Avatar (`scale-95`); `group-active` so pressing the label
+            // squeezes the box too. `scale` is in the transition list above, and
+            // reduced motion collapses `--blocks-duration-fast` to 1ms.
+            'group-active:scale-95',
             'peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50',
             'peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-base'
         ],
         icon: [
-            'opacity-0 scale-75 transition-[opacity,transform] duration-[var(--blocks-duration-fast)] ease-out'
+            // Check/minus draw in along their stroke: the paths hide behind a full
+            // dash offset and the checked/indeterminate variants pull it to 0.
+            // 22px covers both geometries (check ≈ 20.2, minus = 14 user units);
+            // the offset sits 1px past the dash edge so no round-cap dot can bleed
+            // at the path start. A fast opacity fade rides along so the un-draw on
+            // uncheck can't flash in the inherited text colour once the box's
+            // intent fill (and its `text-on-*`) has left. Both durations are
+            // tokens, so `prefers-reduced-motion` collapses the whole draw to 1ms.
+            'opacity-0 transition-opacity duration-[var(--blocks-duration-fast)] ease-out',
+            '[&_path]:[stroke-dasharray:22px] [&_path]:[stroke-dashoffset:23px]',
+            '[&_path]:transition-[stroke-dashoffset] [&_path]:duration-[var(--blocks-duration-normal)] [&_path]:ease-out'
         ],
         label: ['text-text-primary select-none'],
         message: ['text-xs text-text-tertiary']
@@ -63,12 +78,12 @@ export const checkboxVariants = tv({
         },
         checked: {
             true: {
-                icon: 'opacity-100 scale-100'
+                icon: 'opacity-100 [&_path]:[stroke-dashoffset:0]'
             }
         },
         indeterminate: {
             true: {
-                icon: 'opacity-100 scale-100'
+                icon: 'opacity-100 [&_path]:[stroke-dashoffset:0]'
             }
         },
         disabled: {
@@ -103,66 +118,93 @@ export const checkboxVariants = tv({
             class: { box: 'bg-transparent border-transparent group-hover:bg-surface-subtle' }
         },
         // ── Checked intent colors (identical across all variants) ──
+        // Hover/active darken through the intent interaction-layer tokens —
+        // the same `bg-<intent>-hover` / `bg-<intent>-active` ladder Button
+        // uses — via `group-*` so hovering/pressing the label counts too.
         {
             checked: true,
             intent: 'primary',
-            class: { box: 'bg-primary border-primary text-text-on-primary' }
+            class: {
+                box: 'bg-primary border-primary text-text-on-primary group-hover:bg-primary-hover group-active:bg-primary-active'
+            }
         },
         {
             checked: true,
             intent: 'secondary',
-            class: { box: 'bg-secondary border-secondary text-text-on-primary' }
+            class: {
+                box: 'bg-secondary border-secondary text-text-on-primary group-hover:bg-secondary-hover group-active:bg-secondary-active'
+            }
         },
         {
             checked: true,
             intent: 'success',
-            class: { box: 'bg-success border-success text-text-on-primary' }
+            class: {
+                box: 'bg-success border-success text-text-on-primary group-hover:bg-success-hover group-active:bg-success-active'
+            }
         },
         {
             checked: true,
             intent: 'warning',
-            class: { box: 'bg-warning border-warning text-text-on-surface' }
+            class: {
+                box: 'bg-warning border-warning text-text-on-surface group-hover:bg-warning-hover group-active:bg-warning-active'
+            }
         },
         {
             checked: true,
             intent: 'danger',
-            class: { box: 'bg-danger border-danger text-text-on-primary' }
+            class: {
+                box: 'bg-danger border-danger text-text-on-primary group-hover:bg-danger-hover group-active:bg-danger-active'
+            }
         },
         {
             checked: true,
             intent: 'neutral',
-            class: { box: 'bg-neutral border-neutral text-text-on-primary' }
+            class: {
+                box: 'bg-neutral border-neutral text-text-on-primary group-hover:bg-neutral-hover group-active:bg-neutral-active'
+            }
         },
         // ── Indeterminate mirrors checked ──
         {
             indeterminate: true,
             intent: 'primary',
-            class: { box: 'bg-primary border-primary text-text-on-primary' }
+            class: {
+                box: 'bg-primary border-primary text-text-on-primary group-hover:bg-primary-hover group-active:bg-primary-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'secondary',
-            class: { box: 'bg-secondary border-secondary text-text-on-primary' }
+            class: {
+                box: 'bg-secondary border-secondary text-text-on-primary group-hover:bg-secondary-hover group-active:bg-secondary-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'success',
-            class: { box: 'bg-success border-success text-text-on-primary' }
+            class: {
+                box: 'bg-success border-success text-text-on-primary group-hover:bg-success-hover group-active:bg-success-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'warning',
-            class: { box: 'bg-warning border-warning text-text-on-surface' }
+            class: {
+                box: 'bg-warning border-warning text-text-on-surface group-hover:bg-warning-hover group-active:bg-warning-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'danger',
-            class: { box: 'bg-danger border-danger text-text-on-primary' }
+            class: {
+                box: 'bg-danger border-danger text-text-on-primary group-hover:bg-danger-hover group-active:bg-danger-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'neutral',
-            class: { box: 'bg-neutral border-neutral text-text-on-primary' }
+            class: {
+                box: 'bg-neutral border-neutral text-text-on-primary group-hover:bg-neutral-hover group-active:bg-neutral-active'
+            }
         },
         // ── Error overrides unchecked border ──
         {

package/dist/primitives/Combobox/combobox.variants.d.ts

@@ -2,14 +2,14 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const comboboxVariants: ((props?: {
     tier?: "commit" | "modify" | undefined;
     variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     open?: boolean | undefined;
     disabled?: boolean | undefined;
 } | undefined) => {
     base: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -18,7 +18,7 @@ export declare const comboboxVariants: ((props?: {
     label: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -27,7 +27,7 @@ export declare const comboboxVariants: ((props?: {
     requiredMark: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -36,7 +36,7 @@ export declare const comboboxVariants: ((props?: {
     inputWrapper: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -45,7 +45,7 @@ export declare const comboboxVariants: ((props?: {
     input: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -54,7 +54,7 @@ export declare const comboboxVariants: ((props?: {
     message: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -63,7 +63,7 @@ export declare const comboboxVariants: ((props?: {
     helper: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -72,7 +72,7 @@ export declare const comboboxVariants: ((props?: {
     listbox: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -81,7 +81,7 @@ export declare const comboboxVariants: ((props?: {
     option: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -90,7 +90,7 @@ export declare const comboboxVariants: ((props?: {
     optionActive: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -99,7 +99,7 @@ export declare const comboboxVariants: ((props?: {
     optionSelected: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -108,7 +108,7 @@ export declare const comboboxVariants: ((props?: {
     group: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -117,7 +117,7 @@ export declare const comboboxVariants: ((props?: {
     groupLabel: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -126,7 +126,7 @@ export declare const comboboxVariants: ((props?: {
     noResults: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -135,7 +135,7 @@ export declare const comboboxVariants: ((props?: {
     loading: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -144,7 +144,7 @@ export declare const comboboxVariants: ((props?: {
     clear: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -153,7 +153,7 @@ export declare const comboboxVariants: ((props?: {
     chevronButton: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -162,7 +162,7 @@ export declare const comboboxVariants: ((props?: {
     chevron: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -171,7 +171,7 @@ export declare const comboboxVariants: ((props?: {
     control: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -180,7 +180,7 @@ export declare const comboboxVariants: ((props?: {
     search: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -189,7 +189,7 @@ export declare const comboboxVariants: ((props?: {
     tag: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -198,7 +198,7 @@ export declare const comboboxVariants: ((props?: {
     tagLabel: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
@@ -207,7 +207,7 @@ export declare const comboboxVariants: ((props?: {
     tagRemove: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {

package/dist/primitives/Dialog/dialog.variants.d.ts

@@ -1,60 +1,60 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const dialogVariants: ((props?: {
-    size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
     placement?: "top" | "center" | undefined;
     intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
 } | undefined) => {
     dialog: (props?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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;
     backdrop: (props?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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;
     panel: (props?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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;
     header: (props?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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;
     body: (props?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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;
     footer: (props?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
     } & {

package/dist/primitives/Input/Input.svelte

@@ -43,6 +43,7 @@
     persistVersion = 1,
     persistNamespace,
     onkeydown: userOnKeydown,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: InputProps = $props();
 
@@ -126,6 +127,14 @@
     disabled
   }));
 
+  // Consumer-supplied `aria-describedby` (e.g. an external hint rendered
+  // outside the component) merges with the internal error/helper chain
+  // instead of being clobbered by it — internal descriptions first, the
+  // consumer's supplemental one last.
+  const describedBy = $derived(
+    [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
+  );
+
   $effect(() => {
     if (inputRef && mint && mint !== 'none' && !disabled) {
       return mintRegistry.apply(inputRef, mint);
@@ -222,7 +231,7 @@
       {readonly}
       {required}
       aria-invalid={ff.invalid ? 'true' : undefined}
-      aria-describedby={ff.describedBy}
+      aria-describedby={describedBy}
       onkeydown={handleKeydown}
     />