@urbicon-ui/blocks 6.21.1 → 6.21.3

package/dist/primitives/Select/select.variants.d.ts

@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const selectVariants: ((props?: {
     tier?: "commit" | "modify" | undefined;
     variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     open?: boolean | undefined;
     disabled?: boolean | undefined;
     messageType?: "error" | "helper" | undefined;
@@ -13,7 +13,7 @@ export declare const selectVariants: ((props?: {
     wrapper: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -26,7 +26,7 @@ export declare const selectVariants: ((props?: {
     base: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -39,7 +39,7 @@ export declare const selectVariants: ((props?: {
     trigger: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -52,7 +52,7 @@ export declare const selectVariants: ((props?: {
     triggerText: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -65,7 +65,7 @@ export declare const selectVariants: ((props?: {
     placeholder: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -78,7 +78,7 @@ export declare const selectVariants: ((props?: {
     chevron: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -91,7 +91,7 @@ export declare const selectVariants: ((props?: {
     clear: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -104,7 +104,7 @@ export declare const selectVariants: ((props?: {
     listbox: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -117,7 +117,7 @@ export declare const selectVariants: ((props?: {
     option: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -130,7 +130,7 @@ export declare const selectVariants: ((props?: {
     optionLabel: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -143,7 +143,7 @@ export declare const selectVariants: ((props?: {
     optionCheck: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -156,7 +156,7 @@ export declare const selectVariants: ((props?: {
     optionCheckbox: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -169,7 +169,7 @@ export declare const selectVariants: ((props?: {
     group: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -182,7 +182,7 @@ export declare const selectVariants: ((props?: {
     groupLabel: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -195,7 +195,7 @@ export declare const selectVariants: ((props?: {
     label: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -208,7 +208,7 @@ export declare const selectVariants: ((props?: {
     message: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         open?: boolean | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;

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

@@ -82,6 +82,16 @@ export const selectVariants = tv({
             }
         },
         size: {
+            // Full xs–xl scale, mirroring Input's h-7…h-14 ladder (form-family
+            // symmetry: a dense form should not pair an xs Input with an sm Select).
+            xs: {
+                trigger: 'h-7 pl-2 pr-7 text-xs gap-1.5',
+                chevron: 'w-3 h-3',
+                clear: 'right-1.5 p-0.5 [&_svg]:w-3 [&_svg]:h-3',
+                option: 'py-1 text-xs min-h-[1.75rem]',
+                optionCheck: 'w-3 h-3',
+                optionCheckbox: 'w-3 h-3 [&_svg]:w-2 [&_svg]:h-2'
+            },
             sm: {
                 trigger: 'h-8 pl-3 pr-8 text-sm gap-2',
                 chevron: 'w-3.5 h-3.5',
@@ -105,6 +115,14 @@ export const selectVariants = tv({
                 option: 'py-2.5 text-base min-h-[3rem]',
                 optionCheck: 'w-5 h-5',
                 optionCheckbox: 'w-[18px] h-[18px] [&_svg]:w-3.5 [&_svg]:h-3.5'
+            },
+            xl: {
+                trigger: 'h-14 pl-6 pr-14 text-xl gap-3',
+                chevron: 'w-6 h-6',
+                clear: 'right-5 p-1 [&_svg]:w-6 [&_svg]:h-6',
+                option: 'py-3 text-lg min-h-[3.5rem]',
+                optionCheck: 'w-6 h-6',
+                optionCheckbox: 'w-5 h-5 [&_svg]:w-4 [&_svg]:h-4'
             }
         },
         open: {

package/dist/primitives/Skeleton/skeleton.variants.d.ts

@@ -1,19 +1,19 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const skeletonVariants: ((props?: {
     variant?: "rounded" | "text" | "circular" | "rectangular" | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     animation?: "none" | "pulse" | "wave" | undefined;
 } | undefined) => {
     base: (props?: ({
         variant?: "rounded" | "text" | "circular" | "rectangular" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         animation?: "none" | "pulse" | "wave" | 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;
     wrapper: (props?: ({
         variant?: "rounded" | "text" | "circular" | "rectangular" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         animation?: "none" | "pulse" | "wave" | 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;

package/dist/primitives/Slider/Slider.svelte

@@ -47,7 +47,7 @@
   const uid = `slider-${propsId}`;
   const ff = useFormField(() => ({
     fieldId: uid,
-    hint: helper,
+    helper,
     error,
     disabled
   }));
@@ -86,11 +86,7 @@
 
   // ─── Range-Constraints ──────────────────────────────────────────────────
   type ZoneStatus =
-    | 'none'
-    | 'insideRecommended'
-    | 'insideValidOnly'
-    | 'outsideValidDanger'
-    | 'outsideValidWarning';
+    'none' | 'insideRecommended' | 'insideValidOnly' | 'outsideValidDanger' | 'outsideValidWarning';
 
   const hasRangeConstraints = $derived(!!validRange || !!recommendedRange);
 
@@ -537,9 +533,9 @@
     >
       {error}
     </div>
-  {:else if ff.hintId}
+  {:else if ff.helperId}
     <div
-      id={ff.hintId}
+      id={ff.helperId}
       class={unstyled
         ? (slotClasses?.message ?? '')
         : styles.message({ class: slotClasses?.message })}

package/dist/primitives/Spinner/spinner.variants.d.ts

@@ -1,13 +1,13 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const spinnerVariants: ((props?: {
     variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
     speed?: "fast" | "slow" | "normal" | undefined;
 } | undefined) => {
     base: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -15,7 +15,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     svg: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -23,7 +23,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     svgCircle: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -31,7 +31,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     svgPath: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -39,7 +39,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     dots: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -47,7 +47,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     dot: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -55,7 +55,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     pulse: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -63,7 +63,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     pulseCenter: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -71,7 +71,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     pulseRing: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -79,7 +79,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     ring: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -87,7 +87,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     ringElement: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -95,7 +95,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     bars: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -103,7 +103,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     bar: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -111,7 +111,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     content: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
@@ -119,7 +119,7 @@ export declare const spinnerVariants: ((props?: {
     }) | undefined) => string;
     srOnly: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {

package/dist/primitives/Textarea/Textarea.svelte

@@ -28,6 +28,7 @@
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
     preset,
+    oninput: userOnInput,
     ...restProps
   }: TextareaProps = $props();
 
@@ -43,7 +44,7 @@
   const propsId = $props.id();
   const ff = useFormField(() => ({
     fieldId: `textarea-${propsId}`,
-    hint: helper,
+    helper,
     error,
     required,
     disabled
@@ -103,6 +104,14 @@
     }
   });
 
+  function handleInput(event: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) {
+    if (autoResize) adjustHeight();
+    // Forward the consumer's oninput — Textarea's own handler sits after
+    // `{...restProps}` on the element, so without this it would swallow it
+    // (same class as Input's onkeydown forward).
+    userOnInput?.(event);
+  }
+
   $effect(() => {
     if (textareaRef && mint && mint !== 'none' && !disabled) {
       return mintRegistry.apply(textareaRef, mint);
@@ -137,8 +146,7 @@
     {required}
     aria-invalid={ff.invalid ? 'true' : undefined}
     aria-describedby={ff.describedBy}
-    oninput={autoResize ? adjustHeight : undefined}
-  ></textarea>
+    oninput={handleInput}></textarea>
 
   {#if showFooter}
     <div
@@ -154,9 +162,9 @@
         >
           {error}
         </div>
-      {:else if ff.hintId}
+      {:else if ff.helperId}
         <div
-          id={ff.hintId}
+          id={ff.helperId}
           class={unstyled
             ? (slotClasses?.message ?? '')
             : styles.message({ class: slotClasses?.message })}

package/dist/primitives/Textarea/textarea.variants.d.ts

@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const textareaVariants: ((props?: {
     tier?: "commit" | "modify" | undefined;
     variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     intent?: "default" | "success" | "warning" | "danger" | undefined;
     autoResize?: boolean | undefined;
     disabled?: boolean | undefined;
@@ -15,7 +15,7 @@ export declare const textareaVariants: ((props?: {
     wrapper: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -30,7 +30,7 @@ export declare const textareaVariants: ((props?: {
     base: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -45,7 +45,7 @@ export declare const textareaVariants: ((props?: {
     label: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -60,7 +60,7 @@ export declare const textareaVariants: ((props?: {
     footer: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -75,7 +75,7 @@ export declare const textareaVariants: ((props?: {
     message: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -90,7 +90,7 @@ export declare const textareaVariants: ((props?: {
     counter: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;

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

@@ -39,11 +39,14 @@ export const textareaVariants = tv({
             }
         },
         size: {
+            // Full xs–xl scale (form-family symmetry with Input's ladder).
             // `pointer-coarse:text-base` floors the font to 16px on touch so iOS
-            // Safari doesn't auto-zoom the field on focus. Desktop keeps 14px.
+            // Safari doesn't auto-zoom the field on focus. Desktop keeps 12/14px.
+            xs: { base: 'px-2 py-1.5 text-xs pointer-coarse:text-base min-h-[4rem]' },
             sm: { base: 'px-3 py-2 text-sm pointer-coarse:text-base min-h-[5rem]' },
             md: { base: 'px-4 py-3 text-base min-h-[7rem]' },
-            lg: { base: 'px-6 py-4 text-lg min-h-[9rem]' }
+            lg: { base: 'px-6 py-4 text-lg min-h-[9rem]' },
+            xl: { base: 'px-8 py-5 text-xl min-h-[11rem]' }
         },
         // Message colour is owned by messageType/error (declared below) — an
         // intent-level message tone could never win the fold and shipped

package/dist/primitives/Toast/Toaster.svelte

@@ -11,7 +11,8 @@
   import WarningTriangleIconDefault from '../../icons/WarningTriangleIcon.svelte';
   import DangerCircleIconDefault from '../../icons/DangerCircleIcon.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
-  import type { ToastProps } from './index';
+  import Spinner from '../Spinner/Spinner.svelte';
+  import type { ToastData, ToastProps } from './index';
 
   const bt = useBlocksI18n();
 
@@ -66,12 +67,25 @@
           content: () => '',
           title: () => '',
           description: () => '',
+          actions: () => '',
+          actionButton: () => '',
+          cancelButton: () => '',
           dismissButton: () => '',
           progress: () => ''
         }
       : toastVariants({ placement })
   );
 
+  // Run a toast action/cancel button: fire its handler, then dismiss unless the
+  // action opted out (`dismissOnClick: false`, e.g. a "Retry" that re-issues the
+  // async work and updates the same toast).
+  function runAction(toast: ToastData, which: 'action' | 'cancel') {
+    const action = toast[which];
+    if (!action) return;
+    action.onClick?.(toast.id);
+    if (action.dismissOnClick !== false) toaster.dismiss(toast.id);
+  }
+
   function slot(key: keyof typeof styles, intent?: string) {
     const overrides = slotClasses?.[key];
     if (unstyled) return overrides ?? '';
@@ -115,7 +129,11 @@
   {#each visibleToasts as toast (toast.id)}
     {@const IntentIcon = INTENT_ICON_MAP[toast.intent] ?? INTENT_ICON_MAP.neutral}
     <div class={slot('toast', toast.intent)} role="alert" transition:fly={flyParams()}>
-      <IntentIcon class={slot('icon', toast.intent)} />
+      {#if toast.loading}
+        <span class={slot('icon', toast.intent)}><Spinner size="sm" /></span>
+      {:else}
+        <IntentIcon class={slot('icon', toast.intent)} />
+      {/if}
 
       <div class={slot('content')}>
         {#if toast.title}
@@ -124,6 +142,28 @@
         {#if toast.description}
           <div class={slot('description')}>{toast.description}</div>
         {/if}
+        {#if toast.action || toast.cancel}
+          <div class={slot('actions')}>
+            {#if toast.action}
+              <button
+                type="button"
+                class={slot('actionButton')}
+                onclick={() => runAction(toast, 'action')}
+              >
+                {toast.action.label}
+              </button>
+            {/if}
+            {#if toast.cancel}
+              <button
+                type="button"
+                class={slot('cancelButton')}
+                onclick={() => runAction(toast, 'cancel')}
+              >
+                {toast.cancel.label}
+              </button>
+            {/if}
+          </div>
+        {/if}
       </div>
 
       {#if toast.dismissible}

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

@@ -11,6 +11,17 @@ export declare const TOAST_INTENTS: readonly ["primary", "info", "success", "war
  * standard intent palette.
  */
 export type ToastIntent = (typeof TOAST_INTENTS)[number];
+/**
+ * An action or cancel button rendered inside a toast (Sonner-style).
+ */
+export interface ToastAction {
+    /** Button label. */
+    label: string;
+    /** Click handler. Receives the toast id so the handler can dismiss/update it. */
+    onClick?: (id: string) => void;
+    /** Dismiss the toast after the click. @default true */
+    dismissOnClick?: boolean;
+}
 /**
  * Internal data shape for a rendered toast. Created by `toaster.add()`.
  */
@@ -29,6 +40,25 @@ export interface ToastData {
     dismissible: boolean;
     /** Show an animated progress bar that counts down the remaining `duration`. @default true */
     showProgress: boolean;
+    /** Primary action button (prominent). */
+    action?: ToastAction;
+    /** Secondary/cancel button (quiet). */
+    cancel?: ToastAction;
+    /** Render a spinner instead of the intent icon (used by `toaster.promise` while pending). @default false */
+    loading?: boolean;
+}
+/**
+ * Per-state config for `toaster.promise`. Each state is either a plain title
+ * string or a full {@link ToastInput}; `success`/`error` may also be a function
+ * of the resolved value / rejection reason.
+ */
+export interface ToastPromiseOptions<T> {
+    /** Shown while the promise is pending (spinner, persistent, not dismissible). */
+    loading: string | ToastInput;
+    /** Shown when the promise resolves. */
+    success: string | ToastInput | ((value: T) => string | ToastInput);
+    /** Shown when the promise rejects. */
+    error: string | ToastInput | ((reason: unknown) => string | ToastInput);
 }
 /**
  * Options accepted by `toaster.add()` and the shorthand methods (`info`, `success`, `warning`, `danger`).