@urbicon-ui/blocks 6.21.0 → 6.21.2

package/dist/primitives/Button/button.variants.js

@@ -81,6 +81,15 @@ export const buttonVariants = tv({
                 ]
             }
         },
+        // Declared BEFORE `variant` so the flat variants (ghost/text
+        // `shadow-none`) win the shadow bucket over the pressed depth cue —
+        // a pressed ghost button stays flat. For filled/outlined (no shadow of
+        // their own) the pressed `shadow-xs` still applies.
+        pressed: {
+            true: {
+                base: 'scale-[0.98] brightness-90 shadow-[var(--blocks-shadow-xs)]'
+            }
+        },
         variant: {
             filled: {},
             outlined: {
@@ -90,10 +99,10 @@ export const buttonVariants = tv({
                 base: ['bg-transparent border-transparent shadow-none']
             },
             text: {
-                base: [
-                    'bg-transparent border-none shadow-none px-2',
-                    'hover:bg-transparent hover:underline'
-                ]
+                // No `px-*` here: the size axis (declared later) always supplies the
+                // horizontal padding, so a variant-level `px-2` could never win —
+                // it was dead weight under the old CSS-order tie-break too.
+                base: ['bg-transparent border-none shadow-none', 'hover:bg-transparent hover:underline']
             }
         },
         size: {
@@ -129,11 +138,6 @@ export const buttonVariants = tv({
             start: {},
             end: {}
         },
-        pressed: {
-            true: {
-                base: 'scale-[0.98] brightness-90 shadow-[var(--blocks-shadow-xs)]'
-            }
-        },
         active: {
             true: {},
             false: {}

package/dist/primitives/ButtonGroup/buttongroup.variants.d.ts

@@ -1,40 +1,20 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const buttonGroupVariants: (props?: import("../../utils/variants.js").TVProps<{
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-    connected: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
-    };
-    tier: {
-        commit: {};
-        modify: {};
-    };
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-}> | undefined) => {
+export declare const buttonGroupVariants: ((props?: {
+    orientation?: "horizontal" | "vertical" | undefined;
+    connected?: boolean | undefined;
+    tier?: "commit" | "modify" | undefined;
+    disabled?: boolean | undefined;
+} | undefined) => {
     base: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         connected?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;
 /** Slot names derived from the tv() config — single source of truth for slotClasses. */

package/dist/primitives/ButtonGroup/buttongroup.variants.js

@@ -6,7 +6,9 @@ export const buttonGroupVariants = tv({
     variants: {
         orientation: {
             horizontal: { base: 'flex-row' },
-            vertical: { base: 'flex-col w-fit' }
+            // Width lives in the vertical compound below (w-full, sm:w-fit) —
+            // an axis-level w-fit could never win against it.
+            vertical: { base: 'flex-col' }
         },
         connected: {
             true: { base: '' },

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

@@ -1,77 +1,12 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const cardVariants: (props?: import("../../utils/variants.js").TVProps<{
-    variant: {
-        quiet: {
-            base: string[];
-        };
-        outlined: {
-            base: string[];
-        };
-        elevated: {
-            base: string[];
-        };
-        floating: {
-            base: string[];
-        };
-    };
-    padding: {
-        none: {
-            base: string;
-            header: string;
-            content: string;
-            footer: string;
-        };
-        sm: {
-            base: string;
-            header: string;
-            content: string;
-            footer: string;
-        };
-        md: {
-            base: string;
-            header: string;
-            content: string;
-            footer: string;
-        };
-        lg: {
-            base: string;
-            header: string;
-            content: string;
-            footer: string;
-        };
-        xl: {
-            base: string;
-            header: string;
-            content: string;
-            footer: string;
-        };
-    };
-    dividers: {
-        true: {
-            header: string;
-            footer: string;
-        };
-    };
-    interactive: {
-        true: {
-            base: string;
-        };
-    };
-    elementType: {
-        button: {
-            base: string;
-        };
-        a: {
-            base: string;
-        };
-        div: {};
-    };
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-}> | undefined) => {
+export declare const cardVariants: ((props?: {
+    variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
+    padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
+    dividers?: boolean | undefined;
+    interactive?: boolean | undefined;
+    elementType?: "button" | "div" | "a" | undefined;
+    disabled?: boolean | undefined;
+} | undefined) => {
     base: (props?: ({
         variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
         padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
@@ -80,8 +15,7 @@ export declare const cardVariants: (props?: import("../../utils/variants.js").TV
         elementType?: "button" | "div" | "a" | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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?: ({
         variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
@@ -91,8 +25,7 @@ export declare const cardVariants: (props?: import("../../utils/variants.js").TV
         elementType?: "button" | "div" | "a" | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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?: ({
         variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
@@ -102,8 +35,7 @@ export declare const cardVariants: (props?: import("../../utils/variants.js").TV
         elementType?: "button" | "div" | "a" | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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?: ({
         variant?: "elevated" | "outlined" | "quiet" | "floating" | undefined;
@@ -113,9 +45,10 @@ export declare const cardVariants: (props?: import("../../utils/variants.js").TV
         elementType?: "button" | "div" | "a" | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type CardVariants = VariantProps<typeof cardVariants>;
 /** Slot names derived from the tv() config — single source of truth for slotClasses. */

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -45,7 +45,7 @@
   const id = $derived(idProp ?? propsId);
   const ff = useFormField(() => ({
     fieldId: id,
-    hint: helper,
+    helper,
     error,
     required,
     disabled
@@ -169,9 +169,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/Checkbox/checkbox.variants.d.ts

@@ -1,69 +1,14 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const checkboxVariants: (props?: import("../../utils/variants.js").TVProps<{
-    tier: {
-        commit: {
-            box: string;
-        };
-        modify: {
-            box: string;
-        };
-    };
-    size: {
-        xs: {
-            box: string;
-            icon: string;
-            label: string;
-        };
-        sm: {
-            box: string;
-            icon: string;
-            label: string;
-        };
-        md: {
-            box: string;
-            icon: string;
-            label: string;
-        };
-        lg: {
-            box: string;
-            icon: string;
-            label: string;
-        };
-    };
-    intent: {
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-        neutral: {};
-    };
-    variant: {
-        outlined: {};
-        filled: {};
-        ghost: {};
-    };
-    checked: {
-        true: {
-            icon: string;
-        };
-    };
-    indeterminate: {
-        true: {
-            icon: string;
-        };
-    };
-    disabled: {
-        true: {
-            control: string;
-        };
-    };
-    error: {
-        true: {
-            message: string;
-        };
-    };
-}> | undefined) => {
+export declare const checkboxVariants: ((props?: {
+    tier?: "commit" | "modify" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    variant?: "ghost" | "filled" | "outlined" | undefined;
+    checked?: boolean | undefined;
+    indeterminate?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+} | undefined) => {
     wrapper: (props?: ({
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
@@ -74,8 +19,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     control: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -87,8 +31,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     box: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -100,8 +43,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     icon: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -113,8 +55,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     label: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -126,8 +67,7 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     message: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -139,9 +79,10 @@ export declare const checkboxVariants: (props?: import("../../utils/variants.js"
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type CheckboxVariants = VariantProps<typeof checkboxVariants>;
 /** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */

package/dist/primitives/Collapsible/Collapsible.svelte

@@ -16,6 +16,8 @@
     trigger,
     variant = 'default',
     size = 'md',
+    transitionDuration,
+    transitionEasing,
     name,
     children,
     class: className = '',
@@ -28,6 +30,12 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
+  // ACC-3: per-instance collapse motion. Set the shared collapse CSS variables inline only when
+  // a prop is provided, so the unset default keeps inheriting the reduced-motion-aware token.
+  const collapseDuration = $derived(
+    transitionDuration != null ? `${transitionDuration}ms` : undefined
+  );
+
   // Uncontrolled seed: capture only the initial `defaultOpen`; later changes
   // must not clobber user interaction.
   // svelte-ignore state_referenced_locally
@@ -63,6 +71,8 @@
   class={unstyled
     ? [slotClasses?.base, className].filter(Boolean).join(' ')
     : styles.base({ class: [slotClasses?.base, className] })}
+  style:--blocks-collapse-duration={collapseDuration}
+  style:--blocks-collapse-easing={transitionEasing}
   data-state={isOpen ? 'open' : 'closed'}
   {...restProps}
 >

package/dist/primitives/Collapsible/collapsible.variants.d.ts

@@ -1,69 +1,40 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const collapsibleVariants: (props?: import("../../utils/variants.js").TVProps<{
-    variant: {
-        default: {};
-        card: {
-            base: string;
-            trigger: string;
-            contentInner: string;
-        };
-        ghost: {
-            trigger: string;
-        };
-    };
-    size: {
-        sm: {
-            trigger: string;
-            contentInner: string;
-            chevron: string;
-        };
-        md: {
-            trigger: string;
-            contentInner: string;
-            chevron: string;
-        };
-        lg: {
-            trigger: string;
-            contentInner: string;
-            chevron: string;
-        };
-    };
-}> | undefined) => {
+export declare const collapsibleVariants: ((props?: {
+    variant?: "default" | "ghost" | "card" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+} | undefined) => {
     base: (props?: ({
         variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     trigger: (props?: ({
         variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     chevron: (props?: ({
         variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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?: ({
         variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     contentInner: (props?: ({
         variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type CollapsibleVariants = VariantProps<typeof collapsibleVariants>;
 /** Slot names derived from the tv() config — single source of truth for slotClasses. */

package/dist/primitives/Collapsible/collapsible.variants.js

@@ -12,11 +12,16 @@ export const collapsibleVariants = tv({
         ],
         chevron: [
             'shrink-0 text-text-tertiary',
-            'transition-transform duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
+            // Collapse tokens (ACC-3) so `transitionDuration`/`transitionEasing` can retune the spin
+            // in sync with the content. `motion-reduce` guards the inline-override path (an inline
+            // duration bypasses the token that reduced-motion collapses to 1ms).
+            'transition-transform duration-[var(--blocks-collapse-duration)] ease-[var(--blocks-collapse-easing)]',
+            'motion-reduce:duration-[1ms]'
         ],
         content: [
             'overflow-hidden',
-            'transition-[grid-template-rows] duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
+            'transition-[grid-template-rows] duration-[var(--blocks-collapse-duration)] ease-[var(--blocks-collapse-easing)]',
+            'motion-reduce:duration-[1ms]'
         ],
         contentInner: 'text-text-secondary'
     },

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

@@ -56,6 +56,22 @@ export interface CollapsibleProps extends CollapsibleVariants, Omit<HTMLAttribut
     children: Snippet;
     /** Base name for generating ARIA IDs. Defaults to auto-generated. */
     name?: string;
+    /**
+     * Override the expand/collapse animation duration in milliseconds. Defaults to the
+     * `--blocks-collapse-duration` token (the `normal` 250ms). Set globally via that CSS
+     * custom property or per-instance here. Respects `prefers-reduced-motion` (near-instant).
+     */
+    transitionDuration?: number;
+    /**
+     * Override the expand/collapse easing as a CSS `<easing-function>` — e.g. `'ease-in-out'`,
+     * `'cubic-bezier(0.4,0,0.2,1)'`, or a token such as `'var(--blocks-ease-springy)'`. Defaults
+     * to the `--blocks-collapse-easing` token.
+     *
+     * Note: unlike the overlay components (Dialog/Drawer), whose Svelte transitions take an easing
+     * **function** `(t: number) => number`, Collapsible animates via CSS — so its easing is a CSS
+     * string. Same intent, representation follows the transition mechanism.
+     */
+    transitionEasing?: string;
     /** Custom CSS class */
     class?: string;
     /** Remove default styles */