@urbicon-ui/blocks 6.33.0 → 6.35.0

package/dist/mint/micro-interactions.js

@@ -1,111 +1,42 @@
+import { createMicroInteraction, prefersReducedMotion, scaleMint } from './engine.js';
 /**
- * Check if user prefers reduced motion
+ * Built-in micro-interaction registrations.
+ *
+ * The generic engine (`createMicroInteraction`) and the statically-shipped
+ * default (`scaleMint`) live in `./engine.ts` — this module must contain ONLY
+ * registration code, because it is reachable exclusively through the
+ * demand-loaded `./presets.ts` chunk. Anything defined here would otherwise
+ * be dragged back into every component's initial bundle once a statically
+ * imported module shared it (Rollup assigns a shared module's whole
+ * used-export-set to the chunk that statically owns it).
  */
-function prefersReducedMotion() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-/**
- * Generic micro-interaction factory
- */
-export function createMicroInteraction(className, defaultConfig = {}) {
-    return {
-        init(el, config = {}) {
-            // Merge default config with provided config
-            const finalConfig = { ...defaultConfig, ...config };
-            // Skip if disabled or prefers reduced motion
-            if (finalConfig.disabled || prefersReducedMotion())
-                return;
-            const trigger = finalConfig.trigger || 'hover';
-            const duration = finalConfig.duration || 200;
-            const delay = finalConfig.delay || 0;
-            // Determine event based on trigger
-            const eventMap = {
-                hover: 'mouseenter',
-                click: 'click',
-                focus: 'focus',
-                load: 'load'
-            };
-            const event = eventMap[trigger] || 'mouseenter';
-            const handler = () => {
-                // Skip if this specific animation is already running
-                const animatingAttr = `data-animating-${className}`;
-                if (el.getAttribute(animatingAttr) === 'true')
-                    return;
-                // Apply delay if specified
-                const applyAnimation = () => {
-                    el.setAttribute(animatingAttr, 'true');
-                    // Add dynamic styles if intensity is specified
-                    if (finalConfig.intensity && className.includes('scale')) {
-                        el.style.setProperty('--scale-intensity', finalConfig.intensity.toString());
-                    }
-                    el.classList.add(className);
-                    const cleanup = () => {
-                        el.classList.remove(className);
-                        el.removeAttribute(animatingAttr);
-                        el.style.removeProperty('--scale-intensity');
-                        el.removeEventListener('animationend', cleanup);
-                        el.removeEventListener('transitionend', cleanup);
-                    };
-                    el.addEventListener('animationend', cleanup, { once: true });
-                    el.addEventListener('transitionend', cleanup, { once: true });
-                    // Fallback timeout
-                    setTimeout(cleanup, duration + 50);
-                };
-                if (delay > 0) {
-                    setTimeout(applyAnimation, delay);
-                }
-                else {
-                    applyAnimation();
-                }
-            };
-            // Special handling for load trigger
-            if (trigger === 'load') {
-                // Execute immediately if element is already loaded
-                requestAnimationFrame(() => handler());
-            }
-            else {
-                el.addEventListener(event, handler, { passive: true });
-            }
-            // Store cleanup function
-            this.destroy = () => {
-                if (event !== 'load') {
-                    el.removeEventListener(event, handler);
-                }
-            };
-        }
-    };
-}
 /**
  * Register all default micro-interaction mints.
  * Called by registerDefaultMints() - not at module level.
  */
 export function registerMicroInteractions(registry) {
-    registry.register('scale', (config) => createMicroInteraction('blocks-mint-scale', {
-        trigger: 'hover',
-        duration: 200,
-        ...config
-    }));
-    registry.register('translate', (config) => createMicroInteraction('blocks-mint-translate', {
+    registry.registerBuiltin('scale', scaleMint);
+    registry.registerBuiltin('translate', (config) => createMicroInteraction('blocks-mint-translate', {
         trigger: 'hover',
         duration: 200,
         ...config
     }));
-    registry.register('rotate', (config) => createMicroInteraction('blocks-mint-rotate', {
+    registry.registerBuiltin('rotate', (config) => createMicroInteraction('blocks-mint-rotate', {
         trigger: 'hover',
         duration: 200,
         ...config
     }));
-    registry.register('glow', (config) => createMicroInteraction('blocks-mint-glow', {
+    registry.registerBuiltin('glow', (config) => createMicroInteraction('blocks-mint-glow', {
         trigger: 'hover',
         duration: 300,
         ...config
     }));
-    registry.register('bounce', (config) => createMicroInteraction('blocks-mint-bounce', {
+    registry.registerBuiltin('bounce', (config) => createMicroInteraction('blocks-mint-bounce', {
         trigger: 'click',
         duration: 600,
         ...config
     }));
-    registry.register('pulse', (config) => ({
+    registry.registerBuiltin('pulse', (config) => ({
         init(el, inputConfig = {}) {
             const finalConfig = { trigger: 'hover', ...config, ...inputConfig };
             if (finalConfig.disabled || prefersReducedMotion())
@@ -143,12 +74,12 @@ export function registerMicroInteractions(registry) {
             }
         }
     }));
-    registry.register('shake', (config) => createMicroInteraction('blocks-mint-shake', {
+    registry.registerBuiltin('shake', (config) => createMicroInteraction('blocks-mint-shake', {
         trigger: 'click',
         duration: 500,
         ...config
     }));
-    registry.register('wiggle', (config) => createMicroInteraction('blocks-mint-wiggle', {
+    registry.registerBuiltin('wiggle', (config) => createMicroInteraction('blocks-mint-wiggle', {
         trigger: 'hover',
         duration: 500,
         ...config

package/dist/mint/presets.d.ts

@@ -1,6 +1,11 @@
 /**
  * Register all default mints (scale, translate, rotate, glow, bounce, pulse, shake, ripple, composite).
  * Safe to call multiple times – subsequent calls are no-ops.
+ *
+ * All registrations go through `registerBuiltin` (register-if-absent), so a
+ * consumer `register()` override for a built-in name ALWAYS survives — no
+ * matter whether the override ran before this call or while the demand-load
+ * that triggers it was still in flight.
  */
 export declare function registerDefaultMints(): void;
 /**
@@ -12,7 +17,8 @@ export declare function registerDefaultMints(): void;
  */
 export declare function registerPlayfulMints(): void;
 /**
- * Register business mints bundle
+ * Register business mints bundle.
+ * Registered via `registerBuiltin`: a consumer override for these names wins.
  */
 export declare function registerBusinessMints(): void;
 export declare const mintPresets: {

package/dist/mint/presets.js

@@ -6,6 +6,11 @@ let defaultMintsRegistered = false;
 /**
  * Register all default mints (scale, translate, rotate, glow, bounce, pulse, shake, ripple, composite).
  * Safe to call multiple times – subsequent calls are no-ops.
+ *
+ * All registrations go through `registerBuiltin` (register-if-absent), so a
+ * consumer `register()` override for a built-in name ALWAYS survives — no
+ * matter whether the override ran before this call or while the demand-load
+ * that triggers it was still in flight.
  */
 export function registerDefaultMints() {
     if (defaultMintsRegistered)
@@ -26,16 +31,17 @@ export function registerPlayfulMints() {
     // Reserved for future playful-only mints.
 }
 /**
- * Register business mints bundle
+ * Register business mints bundle.
+ * Registered via `registerBuiltin`: a consumer override for these names wins.
  */
 export function registerBusinessMints() {
     // Subtle mints for professional UIs
-    mintRegistry.register('fade', () => ({
+    mintRegistry.registerBuiltin('fade', () => ({
         init(el) {
             el.classList.add('blocks-mint-fade');
         }
     }));
-    mintRegistry.register('slide', () => ({
+    mintRegistry.registerBuiltin('slide', () => ({
         init(el) {
             el.classList.add('blocks-mint-slide');
         }

package/dist/mint/registry.d.ts

@@ -1,22 +1,79 @@
 import type { MintConfig, MintFactory, MintProp } from './types.js';
+/**
+ * Statically-imported fallback factories, keyed by mint name.
+ *
+ * Components pass their *default* mint's factory here — Button imports
+ * `scaleMint` directly and calls `mintRegistry.apply(el, mint, { scale:
+ * scaleMint })` — so the default effect ships tree-shaken with the component
+ * instead of dragging the whole built-in set (micro-interactions, the ripple
+ * engine, compose, presets — ~3.9 KB min) into every consumer bundle. Same
+ * precedence as `resolveIcon(name, fallback)`: a registry entry (consumer
+ * override / loaded built-in) wins, the direct import is only the fallback.
+ * See docs/ICON-DESIGN.md → "Icon resolution & tree-shaking".
+ */
+export type MintFallbacks = Readonly<Partial<Record<string, MintFactory>>>;
+/**
+ * @internal Shared with ./compose.ts so composite string members resolve
+ * through the same demand-load; not part of the public API.
+ */
+export declare function loadBuiltinMints(): Promise<void>;
 declare class MintRegistry {
     private mints;
     private instances;
     /** Register a mint globally */
     register<TConfig extends MintConfig = MintConfig>(name: string, factory: MintFactory<TConfig>): void;
+    /**
+     * Register a built-in mint — only if the name is still free. Used by the
+     * built-in set (`registerDefaultMints()` and the opt-in bundles) so the
+     * demand-load NEVER clobbers a consumer override: a `register()` entry
+     * survives regardless of whether it ran before or during the load. A later
+     * explicit `register()` call still overrides as before.
+     */
+    registerBuiltin<TConfig extends MintConfig = MintConfig>(name: string, factory: MintFactory<TConfig>): void;
     /** Get a mint factory by name */
     get(name: string): MintFactory | undefined;
     /** Check if a mint is registered */
     has(name: string): boolean;
-    /** Apply mints to an element using polymorphic input */
-    apply(el: HTMLElement, mint: MintProp): () => void;
+    /**
+     * Apply mints to an element using polymorphic input.
+     *
+     * Resolution order per name: registry entry (consumer `register()` override
+     * or an already-loaded built-in) → `fallbacks` (statically imported by the
+     * caller) → lazy-loaded built-in set. Names that resolve synchronously are
+     * applied synchronously; unresolved names wait for the built-ins chunk
+     * (one-time microtask + fetch). Events firing inside that fetch window are
+     * NOT replayed — on a slow network, a click landing before a demand-loaded
+     * click-triggered mint (ripple, shake) finished loading is lost for that
+     * effect. Acceptable for decorative effects (documented contract, see
+     * mint/README.md); consumers who need first-interaction guarantees register
+     * the effect statically up front (`registerDefaultMints()`).
+     *
+     * One apply() per element: a second apply() on the same element replaces
+     * the instances map the first one registered, and the first cleanup then
+     * deletes it — `update()` for the second application would go dead. Every
+     * in-repo caller pairs exactly one apply() per element with its `$effect`
+     * teardown, which upholds this.
+     */
+    apply(el: HTMLElement, mint: MintProp, fallbacks?: MintFallbacks): () => void;
     /** Normalize polymorphic mint prop to consistent format */
     private normalizeMintProp;
-    /** Update mint config for an element */
+    /**
+     * Update mint config for an element.
+     *
+     * No-op for a name still inside the demand-load fetch window (it is not in
+     * the element's instances map yet) — same decorative-effect contract as the
+     * lost-first-interaction case documented on `apply()`.
+     */
     update(el: HTMLElement, name: string, config: MintConfig): void;
     /** List all registered mint names */
     list(): string[];
-    /** Clear all mints */
+    /**
+     * Clear all mints. Test-only escape hatch: this does NOT reset the
+     * demand-load latch (`builtinsLoading` here, `defaultMintsRegistered` in
+     * ./presets.ts), so built-ins stay gone until a module reload — tests use
+     * `vi.resetModules()` for a fresh registry. Pre-existing behaviour from the
+     * eager-registration era, kept as-is.
+     */
     clear(): void;
 }
 export declare const mintRegistry: MintRegistry;

package/dist/mint/registry.js

@@ -1,4 +1,24 @@
-import { registerDefaultMints } from './presets.js';
+// Lazily loads + registers the built-in mints (scale, glow, ripple, …) the
+// first time a name resolves neither from the registry nor from the caller's
+// fallbacks. The dynamic import() keeps the built-in set out of the static
+// module graph of every mint-consuming component — an app that only ever uses
+// component defaults never loads it at all; an app that passes a dynamic mint
+// name (mint="ripple", presets, composite) fetches it once on first use.
+//
+// The registry ↔ presets import is cyclic but inert: presets dereferences the
+// registry binding only at call time, and this side is a dynamic import, so
+// module initialisation completes cleanly regardless of load order.
+let builtinsLoading;
+/**
+ * @internal Shared with ./compose.ts so composite string members resolve
+ * through the same demand-load; not part of the public API.
+ */
+export function loadBuiltinMints() {
+    builtinsLoading ??= import('./presets.js').then((presets) => {
+        presets.registerDefaultMints();
+    });
+    return builtinsLoading;
+}
 class MintRegistry {
     mints = new Map();
     instances = new WeakMap();
@@ -6,6 +26,18 @@ class MintRegistry {
     register(name, factory) {
         this.mints.set(name, factory);
     }
+    /**
+     * Register a built-in mint — only if the name is still free. Used by the
+     * built-in set (`registerDefaultMints()` and the opt-in bundles) so the
+     * demand-load NEVER clobbers a consumer override: a `register()` entry
+     * survives regardless of whether it ran before or during the load. A later
+     * explicit `register()` call still overrides as before.
+     */
+    registerBuiltin(name, factory) {
+        if (!this.mints.has(name)) {
+            this.mints.set(name, factory);
+        }
+    }
     /** Get a mint factory by name */
     get(name) {
         return this.mints.get(name);
@@ -14,43 +46,70 @@ class MintRegistry {
     has(name) {
         return this.mints.has(name);
     }
-    /** Apply mints to an element using polymorphic input */
-    apply(el, mint) {
-        // Ensure the built-in mints (scale, glow, ripple, …) are registered before
-        // the first application. Components declare mint defaults — Button defaults
-        // to 'scale' — so a consumer that never called registerDefaultMints() would
-        // otherwise hit "Unknown mint: scale" on every button (and get no hover
-        // animation). registerDefaultMints() short-circuits on a module-level flag,
-        // so the recurring cost is a single boolean check.
-        //
-        // The registry ↔ presets import is cyclic but inert: both sides dereference
-        // the cyclic binding only at call time, never at module top level, so module
-        // initialisation completes cleanly regardless of load order.
-        registerDefaultMints();
+    /**
+     * Apply mints to an element using polymorphic input.
+     *
+     * Resolution order per name: registry entry (consumer `register()` override
+     * or an already-loaded built-in) → `fallbacks` (statically imported by the
+     * caller) → lazy-loaded built-in set. Names that resolve synchronously are
+     * applied synchronously; unresolved names wait for the built-ins chunk
+     * (one-time microtask + fetch). Events firing inside that fetch window are
+     * NOT replayed — on a slow network, a click landing before a demand-loaded
+     * click-triggered mint (ripple, shake) finished loading is lost for that
+     * effect. Acceptable for decorative effects (documented contract, see
+     * mint/README.md); consumers who need first-interaction guarantees register
+     * the effect statically up front (`registerDefaultMints()`).
+     *
+     * One apply() per element: a second apply() on the same element replaces
+     * the instances map the first one registered, and the first cleanup then
+     * deletes it — `update()` for the second application would go dead. Every
+     * in-repo caller pairs exactly one apply() per element with its `$effect`
+     * teardown, which upholds this.
+     */
+    apply(el, mint, fallbacks) {
         const mintDefinitions = this.normalizeMintProp(mint);
         const elementMints = new Map();
         const cleanupFunctions = [];
-        mintDefinitions.forEach((mintDef) => {
-            const name = typeof mintDef === 'string' ? mintDef : mintDef.name;
-            const config = typeof mintDef === 'object' ? mintDef.config : undefined;
-            const factory = this.get(name);
-            if (!factory) {
-                console.warn(`[MintRegistry] Unknown mint: ${name}`);
-                return;
-            }
+        let disposed = false;
+        const applyOne = (name, config, factory) => {
             const mintInstance = factory(config);
             mintInstance.init(el, config);
             elementMints.set(name, mintInstance);
-            // Create cleanup function
-            const cleanup = () => {
+            cleanupFunctions.push(() => {
                 mintInstance.destroy?.(el);
                 elementMints.delete(name);
-            };
-            cleanupFunctions.push(cleanup);
+            });
+        };
+        const unresolved = [];
+        mintDefinitions.forEach((mintDef) => {
+            const name = typeof mintDef === 'string' ? mintDef : mintDef.name;
+            const config = typeof mintDef === 'object' ? mintDef.config : undefined;
+            const factory = this.get(name) ?? fallbacks?.[name];
+            if (factory) {
+                applyOne(name, config, factory);
+            }
+            else {
+                unresolved.push({ name, config });
+            }
         });
+        if (unresolved.length > 0) {
+            void loadBuiltinMints().then(() => {
+                if (disposed)
+                    return;
+                unresolved.forEach(({ name, config }) => {
+                    const factory = this.get(name) ?? fallbacks?.[name];
+                    if (!factory) {
+                        console.warn(`[MintRegistry] Unknown mint: ${name}`);
+                        return;
+                    }
+                    applyOne(name, config, factory);
+                });
+            });
+        }
         this.instances.set(el, elementMints);
         // Return combined cleanup function
         return () => {
+            disposed = true;
             cleanupFunctions.forEach((fn) => {
                 fn();
             });
@@ -70,7 +129,13 @@ class MintRegistry {
         }
         return [];
     }
-    /** Update mint config for an element */
+    /**
+     * Update mint config for an element.
+     *
+     * No-op for a name still inside the demand-load fetch window (it is not in
+     * the element's instances map yet) — same decorative-effect contract as the
+     * lost-first-interaction case documented on `apply()`.
+     */
     update(el, name, config) {
         const elementMints = this.instances.get(el);
         const mint = elementMints?.get(name);
@@ -82,7 +147,13 @@ class MintRegistry {
     list() {
         return Array.from(this.mints.keys());
     }
-    /** Clear all mints */
+    /**
+     * Clear all mints. Test-only escape hatch: this does NOT reset the
+     * demand-load latch (`builtinsLoading` here, `defaultMintsRegistered` in
+     * ./presets.ts), so built-ins stay gone until a module reload — tests use
+     * `vi.resetModules()` for a fresh registry. Pre-existing behaviour from the
+     * eager-registration era, kept as-is.
+     */
     clear() {
         this.mints.clear();
     }

package/dist/mint/ripple.js

@@ -68,5 +68,5 @@ export function createRippleMint(defaultConfig = {}) {
  * Called by registerDefaultMints() - not at module level.
  */
 export function registerRipple(registry) {
-    registry.register('ripple', createRippleMint);
+    registry.registerBuiltin('ripple', createRippleMint);
 }

package/dist/primitives/Alert/alert.variants.d.ts

@@ -1,53 +1,53 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const alertVariants: ((props?: {
-    intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+    intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
     variant?: "inline" | "filled" | "soft" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
 } | undefined) => {
     base: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     title: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     description: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     actions: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | 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;
     dismissButton: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         variant?: "inline" | "filled" | "soft" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {

package/dist/primitives/Badge/Badge.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { Button, mintRegistry } from '../..';
+  import { mintRegistry } from '../..';
+  // internal core, not the public component — keeps the public-to-public import graph clean (see internal/core/)
+  import CoreIconButton from '../../internal/core/CoreIconButton.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
@@ -152,9 +154,7 @@
   {/if}
 
   {#if isRemovable}
-    <Button
-      variant="ghost"
-      size="xs"
+    <CoreIconButton
       {disabled}
       class={unstyled
         ? (slotClasses?.removeButton ?? '')
@@ -167,7 +167,7 @@
           ? (slotClasses?.removeIcon ?? '')
           : styles.removeIcon({ class: slotClasses?.removeIcon })}
       />
-    </Button>
+    </CoreIconButton>
   {/if}
 </span>
 

package/dist/primitives/Badge/badge.variants.js

@@ -23,9 +23,25 @@ export const badgeVariants = tv({
         // arbitrary property inherits `base`'s per-size gap. (Codeberg #21)
         content: ['flex items-center [gap:inherit]'],
         // tier: modify — small remove-control on a commit-tier badge.
+        //
+        // Rendered on the internal CoreIconButton (behaviour-only base: inline-flex
+        // centring, cursor/select, focus-visible reset, disabled inertness), so this
+        // slot carries the FULL visual identity. The class set below is the exact
+        // fold of the `<Button variant="ghost" size="xs">` (intent neutral, tier
+        // commit) this control used to be — the ghost/xs Button base plus the
+        // remove-control overrides — MINUS the classes CoreIconButton already
+        // supplies. Effective render is byte-identical to the pre-extraction Badge,
+        // so the removable VR baseline stays green (see internal/core/).
         removeButton: [
+            // ghost/xs neutral Button base (the part CoreIconButton does not supply)
+            'relative font-medium text-center whitespace-nowrap border overflow-hidden',
+            'duration-[var(--blocks-duration-fast)] ease-out',
+            'bg-transparent border-transparent shadow-none',
+            'hover:shadow-[var(--blocks-shadow-md)] active:scale-[0.98] active:shadow-[var(--blocks-shadow-sm)]',
+            'h-6 px-2 text-xs gap-1 focus-visible:ring-offset-2',
+            // remove-control overrides (won the fold over the ghost base)
             'ml-1 shrink-0 rounded-modify transition-colors text-current',
-            'hover:bg-neutral-950/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current'
+            'hover:bg-neutral-950/10 focus-visible:ring-1 focus-visible:ring-current'
         ],
         removeIcon: ['w-3 h-3']
     },

package/dist/primitives/Button/Button.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  import { mintRegistry, Spinner } from '../..';
+  import { mintRegistry } from '../..';
+  // internal core, not the public component — keeps the public-to-public import graph clean (see internal/core/)
+  import CoreSpinner from '../../internal/core/CoreSpinner.svelte';
+  // Direct import (not the barrel): the resolveIcon tree-shaking pattern.
+  // Button's mint default is 'scale', so the scale factory ships statically
+  // as the apply() fallback; every other mint name stays demand-loaded.
+  import { scaleMint } from '../../mint/engine';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getButtonGroupContext } from '../ButtonGroup/buttonGroup.context';
   import { buttonVariants, type ButtonVariants } from '..';
@@ -80,7 +86,7 @@
       !effectiveDisabled &&
       !loading
     ) {
-      return mintRegistry.apply(buttonElement, effectiveMint);
+      return mintRegistry.apply(buttonElement, effectiveMint, { scale: scaleMint });
     }
   });
 
@@ -150,7 +156,7 @@
       : styles.spinner({ class: slotClasses?.spinner })}
     aria-hidden="true"
   >
-    <Spinner size={spinnerSizeMap[effectiveSize]} intent="current" visible={true} />
+    <CoreSpinner size={spinnerSizeMap[effectiveSize]} />
   </span>
 
   <span