@urbicon-ui/blocks 6.34.0 → 6.36.0

package/dist/i18n/index.js

@@ -1,13 +1,62 @@
 import { createPackageI18n } from '@urbicon-ui/i18n';
-import deTranslations from '../translations/de.js';
 import enTranslations from '../translations/en.js';
-// Create package translations for blocks
-const blocksTranslations = {
-    en: enTranslations,
-    de: deTranslations
-};
-// Create the package i18n integration (registers lazily on first useTranslate()/t()).
-export const blocksI18n = createPackageI18n('blocks', blocksTranslations);
+/**
+ * blocks package i18n.
+ *
+ * **Only the English base bundle is eager.** German (`de`) is registered as a
+ * lazy dynamic-import loader, so an English-only app never statically bundles the
+ * `de` catalog (~4 KB min) — Vite/Rollup splits it into its own chunk that loads
+ * only when the `de` locale is activated. `en` is the base/fallback locale.
+ *
+ * The eager base is `{ en }` (not `blocksTranslations`, which is retained below as
+ * an `{ en }` back-compat export). Registration is lazy on first
+ * `useBlocksI18n()`/`t()` — see `createPackageI18n`.
+ *
+ * ## Before the `de` chunk loads: resolution falls back to `en`
+ *
+ * A package-scoped lookup for a `de` key that isn't loaded yet resolves through
+ * the package fallback locale, i.e. it returns the **English** string (verified:
+ * `@urbicon-ui/i18n` `registry.translate` package path + `lazy-load.test.ts`). It
+ * never renders the raw key. The provider (`<I18nProvider>`) triggers the `de`
+ * load in a **client-only** `$effect` on mount, so a `de` app renders English on
+ * the server and the first client paint, then re-resolves to German once the
+ * chunk lands — a brief text flash and a possible hydration text mismatch.
+ * Two consequences of that window worth knowing:
+ *
+ * - The "falls back to English" guarantee assumes the provider's `fallbackLocale`
+ *   stays at its default (`en`). Pointing `fallbackLocale` at a lazy locale that
+ *   has not loaded yet leaves both lookup paths empty — such a key then renders
+ *   raw and fires `onMissingKey`. Eager-register any locale you use as fallback.
+ * - `LocaleSwitcher` disables its trigger while a locale chunk load is in flight
+ *   (`registry.isLoading`), so without the eager register a `de` app briefly
+ *   shows the switcher disabled on first mount.
+ *
+ * The SSR recipe below removes both, along with the flash itself.
+ *
+ * ## SSR recipe for German (and other non-base) apps
+ *
+ * German SvelteKit SSR apps should register the `de` bundle eagerly **once at
+ * app start** so the very first server render is already German (no flash, no
+ * hydration mismatch). The registry is module-global and holds only static,
+ * request-identical translation data, so a single startup registration is
+ * SSR-safe — it carries no per-request state:
+ *
+ * ```ts
+ * // src/hooks.server.ts (or any module evaluated once at server start)
+ * import { registerBlocksLocale } from '@urbicon-ui/blocks';
+ * import de from '@urbicon-ui/blocks/i18n/de';
+ *
+ * registerBlocksLocale('de', de);
+ * ```
+ *
+ * This keeps the `de` catalog out of English-only client bundles (the whole point
+ * of the split) while making it eagerly present wherever it is actually rendered.
+ */
+export const blocksI18n = createPackageI18n('blocks', { en: enTranslations }, {
+    loaders: {
+        de: () => import('../translations/de.js').then((m) => m.default)
+    }
+});
 /**
  * Context-scoped translation hook for the blocks package. Call during component
  * initialisation, then use the returned `t` (conventionally aliased `bt`):
@@ -18,10 +67,35 @@ export const blocksI18n = createPackageI18n('blocks', blocksTranslations);
  * ```
  *
  * Resolves against the nearest `<I18nProvider>`'s locale (or the base locale
- * when none is mounted) and re-renders reactively on locale change.
+ * when none is mounted) and re-renders reactively on locale change. For a lazy
+ * locale (`de`) that isn't loaded yet, resolution falls back to the base locale
+ * (`en`); see the module docblock and `registerBlocksLocale` for the SSR path.
  */
 export const useBlocksI18n = blocksI18n.useTranslate;
+/**
+ * Eagerly register the blocks bundle for a lazy locale (currently `de`) so it is
+ * present for SSR / the first render, instead of loading client-side on mount.
+ * Call once at app/server start, paired with the public locale subpath import:
+ *
+ * ```ts
+ * import { registerBlocksLocale } from '@urbicon-ui/blocks';
+ * import de from '@urbicon-ui/blocks/i18n/de';
+ * registerBlocksLocale('de', de);
+ * ```
+ *
+ * Additive (does not drop the eager `en` base) and strict (throws on an
+ * unsupported locale or a non-object bundle).
+ */
+export const registerBlocksLocale = (locale, bundle) => blocksI18n.registerLocale(locale, bundle);
 // Introspection helpers (locale list / key existence).
 export const { exists: hasBlocksTranslation, getLocales: getBlocksLocales } = blocksI18n;
+/**
+ * The eager base bundle only (`{ en }`). `de` is lazy and no longer part of this
+ * object; import it explicitly via `@urbicon-ui/blocks/i18n/de` (e.g. for a parity
+ * test or the SSR eager-register recipe above).
+ */
+const blocksTranslations = {
+    en: enTranslations
+};
 // Re-export for external use
 export { blocksTranslations };

package/dist/internal/core/CoreIconButton.svelte

@@ -0,0 +1,66 @@
+<!--
+  CoreIconButton — behaviour-only internal core for the small icon-only controls
+  embedded inside other public components (Badge's remove ×, Dialog/Drawer close
+  ×). It renders a native `<button type="button">` with just the interaction
+  baseline (flex-centred content, pointer/select affordance, focus-visible reset,
+  disabled inertness). Visual identity — size, radius, colour, ring, shadow — comes
+  entirely from the call-site's `class` (a `*.variants.ts` slot), NOT from a variant
+  engine pass here: this core deliberately does not touch tv()/mint/tokens, which is
+  what lets a public component embed a control without importing another public
+  component (keeps the public-to-public import graph clean, see internal/core/).
+
+  The base classes are structural plumbing, deliberately NOT tw-merged against the
+  incoming `class` (no engine here): a consumer slot class targeting one of these
+  buckets (display/cursor/select/disabled-opacity) is resolved by stylesheet order,
+  not by the override ladder. That is accepted: overrides belong on the call-site's
+  variants slot (which merges correctly bucket-by-bucket); the plumbing is not an
+  override surface. Under `unstyled` the plumbing also stays — stripping
+  `disabled:pointer-events-none` & co. would break behaviour, not styling.
+
+  INTERNAL — never exported from the package barrel, no docs/MCP entry. For a full
+  themed button use the public `Button`.
+
+  restProps-first spread (COMPONENT-API-CONVENTIONS §restProps ordering): the
+  explicit attributes come AFTER `{...restProps}` so component-owned wiring wins —
+  `aria-label` is required (an icon-only button has no text accessible name) and
+  can never be clobbered, and `type="button"` stays a submit-safe default.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  let {
+    'aria-label': ariaLabel,
+    class: className = '',
+    disabled = false,
+    onclick,
+    children,
+    ...restProps
+  }: {
+    /** Required — an icon-only control has no text to name it. */
+    'aria-label': string;
+    class?: string;
+    disabled?: boolean;
+    onclick?: (event: MouseEvent) => void;
+    children: Snippet;
+  } & Omit<
+    HTMLButtonAttributes,
+    'aria-label' | 'class' | 'disabled' | 'onclick' | 'children'
+  > = $props();
+</script>
+
+<button
+  {...restProps}
+  type="button"
+  {disabled}
+  {onclick}
+  aria-label={ariaLabel}
+  class={[
+    'inline-flex items-center justify-center cursor-pointer select-none',
+    'focus-visible:outline-none',
+    'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
+    className
+  ]}
+>
+  {@render children()}
+</button>

package/dist/internal/core/CoreIconButton.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    /** Required — an icon-only control has no text to name it. */
+    'aria-label': string;
+    class?: string;
+    disabled?: boolean;
+    onclick?: (event: MouseEvent) => void;
+    children: Snippet;
+} & Omit<HTMLButtonAttributes, 'aria-label' | 'class' | 'disabled' | 'onclick' | 'children'>;
+declare const CoreIconButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CoreIconButton = ReturnType<typeof CoreIconButton>;
+export default CoreIconButton;

package/dist/internal/core/CoreSpinner.svelte

@@ -0,0 +1,49 @@
+<!--
+  CoreSpinner — the bare rotating-arc SVG shared by embedding contexts (loading
+  Button, and any internal surface that needs an inline busy indicator) WITHOUT
+  pulling in the public Spinner.
+
+  INTERNAL — never exported from the package barrel, no docs/MCP entry. For a
+  configurable spinner (variants, speed, intent palette, sr-only label, unstyled
+  / slotClasses) use the public `Spinner`; this core is deliberately fixed to the
+  default variant at 1s.
+
+  No `role` / `aria-*` / sr-only label here on purpose: the embedding context
+  owns the semantics. Button wraps this in an `aria-hidden` span and announces
+  loading via its own `aria-busy`; a `role="status"` here would nest a live
+  region inside contexts that already declare one (e.g. Toast). The geometry is
+  imported from `spinner-geometry.ts` so it can never drift from the public
+  Spinner.
+-->
+<script lang="ts">
+  import { SPINNER_ARC_PATH } from './spinner-geometry';
+
+  let {
+    size = 'md',
+    class: className = ''
+  }: {
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Extra classes on the wrapper span (the call site supplies visual identity). */
+    class?: string;
+  } = $props();
+
+  // Matches the public Spinner's per-size box (spinner.variants → base sizes).
+  const sizeClass = {
+    xs: 'w-4 h-4',
+    sm: 'w-5 h-5',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8'
+  };
+</script>
+
+<span class={['inline-flex items-center justify-center text-current', sizeClass[size], className]}>
+  <svg
+    class="w-full h-full animate-spin [animation-duration:1s] motion-reduce:animate-none"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25" />
+    <path class="fill-current" d={SPINNER_ARC_PATH} />
+  </svg>
+</span>

package/dist/internal/core/CoreSpinner.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Extra classes on the wrapper span (the call site supplies visual identity). */
+    class?: string;
+};
+declare const CoreSpinner: import("svelte").Component<$$ComponentProps, {}, "">;
+type CoreSpinner = ReturnType<typeof CoreSpinner>;
+export default CoreSpinner;

package/dist/internal/core/spinner-geometry.d.ts

@@ -0,0 +1,6 @@
+/**
+ * single source of the spinner geometry — imported by CoreSpinner and the
+ * public Spinner. The `d` attribute of the rotating arc `<path>` in the
+ * default (spinner) variant. Kept in one place so the two SVGs never drift.
+ */
+export declare const SPINNER_ARC_PATH = "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z";

package/dist/internal/core/spinner-geometry.js

@@ -0,0 +1,6 @@
+/**
+ * single source of the spinner geometry — imported by CoreSpinner and the
+ * public Spinner. The `d` attribute of the rotating arc `<path>` in the
+ * default (spinner) variant. Kept in one place so the two SVGs never drift.
+ */
+export const SPINNER_ARC_PATH = 'M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z';

package/dist/mint/registry.d.ts

@@ -47,15 +47,33 @@ declare class MintRegistry {
      * 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

@@ -59,6 +59,12 @@ class MintRegistry {
      * 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);
@@ -123,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);
@@ -135,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/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,7 @@
 <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.
@@ -154,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

package/dist/primitives/Collapsible/Collapsible.svelte

@@ -109,10 +109,15 @@
     </button>
   {/if}
 
+  <!-- `inert` while collapsed (Popover's pattern): the clipped children stay
+       mounted for the grid-rows animation, so without it a keyboard user tabs
+       into invisible controls (e.g. a CodeBlock copy button inside a collapsed
+       ToolCallCard — WCAG 2.4.3/2.4.7) and the subtree stays in the a11y tree. -->
   <div
     id={contentId}
     role="region"
     aria-labelledby={triggerId}
+    inert={!isOpen}
     class={unstyled
       ? (slotClasses?.content ?? '')
       : styles.content({ class: slotClasses?.content })}

package/dist/primitives/Dialog/Dialog.svelte

@@ -8,7 +8,8 @@
   import { trapFocus, showDialogModal, closeDialogModal } from '../../utils/overlay';
   import { composeHandlers } from '../../utils/compose-handlers';
   import { overlayStack, getOverlayMotion } from '../../utils';
-  import Button from '../Button/Button.svelte';
+  // 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 type { DialogProps } from './index';
   import { dialogVariants, type DialogVariants } from './dialog.variants';
 
@@ -316,14 +317,15 @@
               {title}
             </h2>
             {#if !hideCloseButton}
-              <Button
-                variant="ghost"
-                size="sm"
+              <CoreIconButton
+                class={unstyled
+                  ? (slotClasses?.closeButton ?? '')
+                  : styles.closeButton({ class: slotClasses?.closeButton })}
                 onclick={requestClose}
                 aria-label={bt('accessibility.closeDialog')}
               >
                 <CloseIcon class="h-4 w-4" />
-              </Button>
+              </CoreIconButton>
             {/if}
           </header>
 

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

@@ -46,6 +46,13 @@ export declare const dialogVariants: ((props?: {
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+    closeButton: (props?: ({
+        size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
+        placement?: "top" | "center" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
     body: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "fullscreen" | "full" | undefined;
         placement?: "top" | "center" | undefined;

package/dist/primitives/Dialog/dialog.variants.js

@@ -26,6 +26,23 @@ export const dialogVariants = tv({
             'border-b border-border-hairline flex-shrink-0'
         ],
         title: ['text-base font-semibold text-text-primary truncate'],
+        // Icon-only header close control (× dismiss). 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 of the `<Button variant="ghost" size="sm">` (intent
+        // neutral, tier commit) it used to be — the exact ghost/sm neutral Button
+        // fold MINUS the classes CoreIconButton already supplies. Effective render is
+        // byte-identical to the pre-extraction close button (no VR baseline gates
+        // overlays; reproduced deterministically from buttonVariants). See
+        // internal/core/.
+        closeButton: [
+            'relative font-medium text-center whitespace-nowrap border overflow-hidden',
+            'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--blocks-duration-fast)] ease-out',
+            'rounded-commit bg-transparent border-transparent shadow-none',
+            'hover:shadow-[var(--blocks-shadow-md)] active:scale-[0.98] active:shadow-[var(--blocks-shadow-sm)]',
+            'h-8 px-3 text-sm gap-1.5 text-neutral-emphasis hover:bg-neutral-subtle',
+            'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-neutral/50'
+        ],
         body: [
             'px-5 py-4 flex-1 overflow-y-auto overscroll-contain',
             'text-sm leading-relaxed text-text-secondary'

package/dist/primitives/Drawer/Drawer.svelte

@@ -8,7 +8,8 @@
   import { trapFocus, showDialogModal, closeDialogModal } from '../../utils/overlay';
   import { composeHandlers } from '../../utils/compose-handlers';
   import { overlayStack, getOverlayMotion } from '../../utils';
-  import Button from '../Button/Button.svelte';
+  // 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 type { DrawerProps } from './index';
   import { drawerVariants, type DrawerVariants } from './drawer.variants';
 
@@ -252,14 +253,15 @@
               <span></span>
             {/if}
             {#if !hideCloseButton}
-              <Button
-                variant="ghost"
-                size="sm"
+              <CoreIconButton
+                class={unstyled
+                  ? (slotClasses?.closeButton ?? '')
+                  : styles.closeButton({ class: slotClasses?.closeButton })}
                 onclick={requestClose}
                 aria-label={bt('accessibility.closeDrawer')}
               >
                 <CloseIcon class="h-4 w-4" />
-              </Button>
+              </CoreIconButton>
             {/if}
           </header>
         {/if}

package/dist/primitives/Drawer/drawer.variants.d.ts

@@ -45,6 +45,14 @@ export declare const drawerVariants: ((props?: {
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+    closeButton: (props?: ({
+        placement?: "top" | "right" | "bottom" | "left" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "full" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        accentEdge?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
     body: (props?: ({
         placement?: "top" | "right" | "bottom" | "left" | undefined;
         size?: "sm" | "md" | "lg" | "xl" | "full" | undefined;

package/dist/primitives/Drawer/drawer.variants.js

@@ -18,6 +18,23 @@ export const drawerVariants = tv({
             'border-b border-border-hairline flex-shrink-0'
         ],
         title: ['text-base font-semibold text-text-primary truncate'],
+        // Icon-only header close control (× dismiss). 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 of the `<Button variant="ghost" size="sm">` (intent
+        // neutral, tier commit) it used to be — the exact ghost/sm neutral Button
+        // fold MINUS the classes CoreIconButton already supplies. Effective render is
+        // byte-identical to the pre-extraction close button (no VR baseline gates
+        // overlays; reproduced deterministically from buttonVariants). Mirrors Dialog.
+        // See internal/core/.
+        closeButton: [
+            'relative font-medium text-center whitespace-nowrap border overflow-hidden',
+            'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--blocks-duration-fast)] ease-out',
+            'rounded-commit bg-transparent border-transparent shadow-none',
+            'hover:shadow-[var(--blocks-shadow-md)] active:scale-[0.98] active:shadow-[var(--blocks-shadow-sm)]',
+            'h-8 px-3 text-sm gap-1.5 text-neutral-emphasis hover:bg-neutral-subtle',
+            'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-neutral/50'
+        ],
         body: [
             'px-5 py-4 flex-1 overflow-y-auto overscroll-contain',
             'text-sm leading-relaxed text-text-secondary'

package/dist/primitives/Spinner/Spinner.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  // internal core, not the public component — keeps the public-to-public import graph clean (see internal/core/)
+  import { SPINNER_ARC_PATH } from '../../internal/core/spinner-geometry';
   import { spinnerVariants, type SpinnerVariants } from './spinner.variants';
   import type { SpinnerProps } from './index';
 
@@ -126,7 +128,7 @@
           class={unstyled
             ? (slotClasses?.svgPath ?? '')
             : styles.svgPath({ class: slotClasses?.svgPath })}
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          d={SPINNER_ARC_PATH}
         />
       </svg>
     {/if}