@urbicon-ui/blocks 6.21.1 → 6.21.2

package/dist/primitives/Pagination/Pagination.svelte

@@ -34,6 +34,7 @@
     nextIcon,
     firstIcon,
     lastIcon,
+    renderItem,
     itemsPerPage = 10,
     totalItems,
     startItem,
@@ -323,19 +324,33 @@
 
       {#if showNumbers}
         {#each visiblePageNumbers as page (page)}
-          <PaginationItem
-            {size}
-            {variant}
-            {intent}
-            {tier}
-            {page}
-            active={page === currentPage}
-            disabled={disabled || loading}
-            onPageClick={goToPage(page)}
-            {mint}
-          >
-            {page}
-          </PaginationItem>
+          {#if renderItem}
+            {@render renderItem({
+              page,
+              active: page === currentPage,
+              disabled: disabled || loading,
+              size,
+              variant,
+              intent,
+              tier,
+              mint,
+              select: goToPage(page)
+            })}
+          {:else}
+            <PaginationItem
+              {size}
+              {variant}
+              {intent}
+              {tier}
+              {page}
+              active={page === currentPage}
+              disabled={disabled || loading}
+              onPageClick={goToPage(page)}
+              {mint}
+            >
+              {page}
+            </PaginationItem>
+          {/if}
         {/each}
       {/if}
 

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

@@ -10,6 +10,33 @@ export interface PaginationPageItem {
     active?: boolean;
     disabled?: boolean;
 }
+/**
+ * Context handed to the `renderItem` snippet for a single numbered page button.
+ * Bundles the page number, its active/disabled state, the style props forwarded
+ * from the Pagination (so a custom item stays visually consistent), and a
+ * `select` callback that changes the page (guarded against disabled / no-op /
+ * out-of-range internally).
+ */
+export interface PaginationItemContext {
+    /** The 1-based page number this item represents. */
+    page: number;
+    /** Whether this item is the currently active page. */
+    active: boolean;
+    /** Whether the item is inert (component `disabled` or `loading`). */
+    disabled: boolean;
+    /** Button size forwarded from the Pagination props. */
+    size: 'sm' | 'md' | 'lg';
+    /** Button variant forwarded from the Pagination props. */
+    variant: 'outlined' | 'filled' | 'ghost';
+    /** Semantic intent forwarded from the Pagination props. */
+    intent: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+    /** Semantic radius tier forwarded from the Pagination props. */
+    tier?: InteractiveTier;
+    /** Micro-interaction preset forwarded from the Pagination props. */
+    mint: MintProp;
+    /** Navigate to this page. No-op when disabled, already active, or out of range. */
+    select: () => void;
+}
 /**
  * @description Navigation control for paged data sets.
  * Supports multiple layouts, intents, button variants, and configurable ellipsis behaviour.
@@ -69,6 +96,23 @@ export interface PaginationProps extends Omit<PaginationVariants, 'disabled' | '
     firstIcon?: Snippet;
     /** Custom icon rendered inside the "Last" button. */
     lastIcon?: Snippet;
+    /**
+     * Render each numbered page button yourself. Receives a {@link PaginationItemContext}
+     * with the page number, its active/disabled state, the forwarded style props
+     * (size, variant, intent, tier, mint) and a `select` callback. Only affects the
+     * numbered page buttons in the default layout — prev/next/first/last keep their
+     * own icon snippets, and the ellipsis is unaffected.
+     *
+     * @example
+     * ```svelte
+     * <Pagination {currentPage} {totalPages} {onPageChange}>
+     *   {#snippet renderItem({ page, active, disabled, select })}
+     *     <button class:active onclick={select} {disabled}>{page}</button>
+     *   {/snippet}
+     * </Pagination>
+     * ```
+     */
+    renderItem?: Snippet<[PaginationItemContext]>;
     /** Items shown per page. Used by the table layout to compute "Showing X to Y of Z". */
     itemsPerPage?: number;
     /** Total number of items across all pages. Used by the table layout info text. */

package/dist/primitives/Popover/Popover.svelte

@@ -209,6 +209,12 @@
     // intentionally consume Escape.
     function handleEscape(e: KeyboardEvent) {
       if (e.key !== 'Escape' || e.defaultPrevented) return;
+      // Re-check `open` (like the auto-mode toggle handler does): the
+      // listener teardown is deferred to the next effect flush, so a
+      // consumer handler earlier in this same dispatch may already have
+      // closed via `bind:open` — without this guard we'd report a second,
+      // transition-less onOpenChange(false) + onEscape and steal focus.
+      if (!open) return;
       e.preventDefault();
       open = false;
       onOpenChange?.(false);
@@ -231,6 +237,10 @@
       if (!target) return;
       if (popoverElement?.contains(target)) return;
       if (effectiveTriggerElement?.contains(target)) return;
+      // Same deferred-teardown re-check as handleEscape above: a consumer
+      // capture-phase pointerdown handler may have closed via `bind:open`
+      // within this dispatch — don't report a second close.
+      if (!open) return;
       open = false;
       onOpenChange?.(false);
       onClickOutsideProp?.();

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

@@ -4,8 +4,8 @@ import type { Placement } from '../../utils/floating.js';
 import type { PopoverVariants } from './popover.variants.js';
 /**
  * @description Floating panel anchored to a trigger element. Uses the native Popover API
- * for top-layer rendering, light dismiss, and Escape handling. Floating UI provides
- * precise positioning with automatic flip, shift, and optional width syncing.
+ * for top-layer rendering, light dismiss, and Escape handling. The library's built-in
+ * positioning engine provides automatic flip, shift, and optional width syncing.
  *
  * @tag overlay
  * @related Tooltip
@@ -45,7 +45,7 @@ export interface PopoverProps extends PopoverVariants, Omit<HTMLAttributes<HTMLD
     trigger?: Snippet;
     /** External trigger element ref. Use instead of the `trigger` snippet when the trigger lives outside the Popover tree. Supports `bind:triggerElement`. */
     triggerElement?: HTMLElement;
-    /** Where the popover appears relative to the trigger. All Floating UI `Placement` values are supported. */
+    /** Where the popover appears relative to the trigger. All standard `Placement` values (side plus optional `-start`/`-end` alignment) are supported. */
     placement?: Placement;
     /** Gap in px between the trigger edge and the popover. */
     offsetDistance?: number;

package/dist/primitives/RadioGroup/RadioGroup.svelte

@@ -46,7 +46,7 @@
   // ARIA wiring is shared with every form primitive — see XC-2.
   const ff = useFormField(() => ({
     fieldId: groupId,
-    hint: helper,
+    helper,
     error,
     required,
     disabled
@@ -174,9 +174,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/Select/Select.svelte

@@ -38,6 +38,7 @@
     mint = 'none',
     onValueChange,
     open = $bindable(false),
+    onOpenChange,
     usePortal = true,
     syncWidth = true,
     customTrigger,
@@ -101,7 +102,7 @@
   const labelId = $derived(label ? `${uid}-label` : undefined);
   const ff = useFormField(() => ({
     fieldId: uid,
-    hint: helper,
+    helper,
     error,
     required,
     disabled
@@ -235,12 +236,21 @@
     syncWidth: () => syncWidth
   });
 
+  // Single mutation point for internally-driven open changes, so
+  // `onOpenChange` fires exactly once per transition (and never when the
+  // consumer writes `bind:open` directly).
+  function setOpen(next: boolean) {
+    if (open === next) return;
+    open = next;
+    onOpenChange?.(next);
+  }
+
   function toggle() {
     if (disabled) return;
     // Pointer-driven open (trigger onclick). Mark modality so the open effect
     // doesn't pre-highlight the first row for a mouse/touch user.
     if (!open) openedViaKeyboard = false;
-    open = !open;
+    setOpen(!open);
     if (!open) activeIndex = -1;
   }
 
@@ -271,7 +281,7 @@
       dispatchValueChange?.(nextValue);
     }
     if (effectiveCloseOnSelect) {
-      open = false;
+      setOpen(false);
       activeIndex = -1;
       focusTrigger();
     }
@@ -297,7 +307,7 @@
   //                  explicitly intent to focus elsewhere)
   function dismissByEscape() {
     if (!closeOnEscape) return false;
-    open = false;
+    setOpen(false);
     activeIndex = -1;
     onEscape?.();
     return true;
@@ -319,7 +329,7 @@
         event.preventDefault();
         if (!open) {
           openedViaKeyboard = true;
-          open = true;
+          setOpen(true);
         } else {
           activeIndex = activeIndex < enabledOptions.length - 1 ? activeIndex + 1 : 0;
         }
@@ -328,7 +338,7 @@
         event.preventDefault();
         if (!open) {
           openedViaKeyboard = true;
-          open = true;
+          setOpen(true);
         } else {
           activeIndex = activeIndex > 0 ? activeIndex - 1 : enabledOptions.length - 1;
         }
@@ -338,7 +348,7 @@
         event.preventDefault();
         if (!open) {
           openedViaKeyboard = true;
-          open = true;
+          setOpen(true);
         } else if (activeIndex >= 0 && activeIndex < enabledOptions.length) {
           selectOption(enabledOptions[activeIndex]);
         }
@@ -353,7 +363,7 @@
         // Tab leaves the widget — close (focus moves on via the default tab),
         // independent of closeOnEscape/closeOnClickOutside.
         if (open) {
-          open = false;
+          setOpen(false);
           activeIndex = -1;
         }
         break;
@@ -382,7 +392,7 @@
       !listboxRef.contains(target)
     ) {
       if (!closeOnClickOutside) return;
-      open = false;
+      setOpen(false);
       activeIndex = -1;
       onClickOutside?.();
     }
@@ -725,9 +735,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/Select/index.d.ts

@@ -164,6 +164,13 @@ interface SelectBaseProps<T extends SelectValue = string> extends Omit<SelectVar
      * the Select wrapper). @default false
      */
     open?: boolean;
+    /**
+     * Fires when the listbox opens or closes from user interaction (trigger
+     * click, keyboard, selection, Escape, Tab-out, outside click). Receives the
+     * new open state — use it e.g. to lazy-load options on first open. Not
+     * called when the consumer writes `bind:open` directly.
+     */
+    onOpenChange?: (open: boolean) => void;
     /**
      * When true, the listbox is rendered into the browser top layer via the native
      * `popover` API, so it cannot be clipped by `overflow: auto` ancestors. When

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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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/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/Textarea/Textarea.svelte

@@ -43,7 +43,7 @@
   const propsId = $props.id();
   const ff = useFormField(() => ({
     fieldId: `textarea-${propsId}`,
-    hint: helper,
+    helper,
     error,
     required,
     disabled
@@ -137,8 +137,7 @@
     {required}
     aria-invalid={ff.invalid ? 'true' : undefined}
     aria-describedby={ff.describedBy}
-    oninput={autoResize ? adjustHeight : undefined}
-  ></textarea>
+    oninput={autoResize ? adjustHeight : undefined}></textarea>
 
   {#if showFooter}
     <div
@@ -154,9 +153,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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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" | "xl" | "xs" | 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