@urbicon-ui/blocks 6.34.0 → 6.35.0

package/README.md

@@ -107,7 +107,17 @@ Re-exports `@urbicon-ui/i18n`. Components with text content (Pagination, Menu, C
 </I18nProvider>
 ```
 
-For the provider/hook API, typed keys, SSR locale resolution, and opt-in lazy loading see the [@urbicon-ui/i18n](../i18n/) package.
+**English is bundled eagerly; German is lazy.** The `de` catalog is a dynamic-import chunk, so an English-only app never bundles it. Before that chunk loads, `de` keys resolve to the English fallback (never the raw key). The provider loads `de` client-side on mount, which means a **server-rendered German app** would paint English first and flip on hydration. Fix it by registering `de` eagerly once at server start:
+
+```ts
+// src/hooks.server.ts (evaluated once at server start — SSR-safe, static data)
+import { registerBlocksLocale } from '@urbicon-ui/blocks';
+import de from '@urbicon-ui/blocks/i18n/de';
+
+registerBlocksLocale('de', de);
+```
+
+For the provider/hook API, typed keys, SSR locale resolution, and the code-splitting + eager-register details see the [@urbicon-ui/i18n](../i18n/) package.
 
 ## Development
 

package/dist/components/Calendar/CalendarHeader.svelte

@@ -3,7 +3,8 @@
   import { Tooltip } from '../../primitives/Tooltip';
   import { Popover } from '../../primitives/Popover';
   import { SegmentGroup, SegmentItem } from '../../primitives/SegmentGroup';
-  import { Button } from '../../primitives/Button';
+  // 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 ChevronLeftIcon from '../../icons/ChevronLeftIcon.svelte';
   import ChevronRightIcon from '../../icons/ChevronRightIcon.svelte';
   import ChevronDownIcon from '../../icons/ChevronDownIcon.svelte';
@@ -125,18 +126,24 @@
     {@render children()}
   </div>
 {:else}
+  <!--
+    All header buttons render on the internal CoreIconButton (was `<Button
+    unstyled mint="none">`, which emitted only the call-site classes). The
+    core's plumbing overlaps the navButton slot's old baseline (inline-flex
+    centring, focus-visible reset, disabled opacity/cursor — now supplied by
+    the core, stripped from the slot); the deliberate deltas it introduces are
+    documented on the slot in calendar.variants.ts.
+  -->
   <div class={slot('header', className)} {...restProps}>
     <div class={slot('nav')}>
-      <Button
-        unstyled
-        mint="none"
+      <CoreIconButton
         class={slot('navButton')}
         onclick={() => ctx.navigate(-1)}
         disabled={!ctx.canGoBack || ctx.disabled}
         aria-label={prevLabel}
       >
         <ChevronLeftIcon size={navIconSize} />
-      </Button>
+      </CoreIconButton>
     </div>
 
     <div class="flex items-center gap-2">
@@ -162,40 +169,43 @@
         {/snippet}
         <div class="min-w-48 p-3">
           <div class="mb-2 flex items-center justify-between">
-            <Button
-              unstyled
-              mint="none"
+            <CoreIconButton
               class={slot('navButton')}
               onclick={() => pickerYear--}
               aria-label={bt('calendar.previousYear')}
             >
               <ChevronLeftIcon size={pickerIconSize} />
-            </Button>
+            </CoreIconButton>
             <span class="text-text-primary font-semibold tabular-nums">{pickerYear}</span>
-            <Button
-              unstyled
-              mint="none"
+            <CoreIconButton
               class={slot('navButton')}
               onclick={() => pickerYear++}
               aria-label={bt('calendar.nextYear')}
             >
               <ChevronRightIcon size={pickerIconSize} />
-            </Button>
+            </CoreIconButton>
           </div>
           <div class="grid grid-cols-3 gap-1">
             {#each months as m (m.index)}
-              <Button
-                unstyled
-                mint="none"
+              <!--
+                Text-labelled month cell on the same CoreIconButton as the nav
+                buttons (removes the last CalendarHeader→Button edge). The core
+                REQUIRES aria-label, so it gets the visible label — the accessible
+                name stays the identical string. Never rendered disabled (the
+                picker closes when the calendar is disabled), so the core's
+                disabled plumbing is inert here.
+              -->
+              <CoreIconButton
                 class="text-text-primary rounded-md px-2 py-1.5 text-sm transition-colors
                   {m.isCurrent
                   ? 'bg-primary-subtle ring-primary text-primary font-semibold ring-1'
                   : 'hover:bg-surface-hover'}
-                  focus-visible:ring-primary/50 focus-visible:ring-2 focus-visible:outline-none"
+                  focus-visible:ring-primary/50 focus-visible:ring-2"
                 onclick={() => selectMonth(m.index)}
+                aria-label={m.label}
               >
                 {m.label}
-              </Button>
+              </CoreIconButton>
             {/each}
           </div>
         </div>
@@ -221,29 +231,25 @@
 
       {#if showToday}
         <Tooltip label={bt('calendar.today')}>
-          <Button
-            unstyled
-            mint="none"
+          <CoreIconButton
             class="{slot('navButton')} ml-1"
             onclick={() => ctx.goToToday()}
             disabled={!ctx.canGoToToday || ctx.disabled}
             aria-label={bt('calendar.today')}
           >
             <CalendarIcon size={navIconSize} />
-          </Button>
+          </CoreIconButton>
         </Tooltip>
       {/if}
 
-      <Button
-        unstyled
-        mint="none"
+      <CoreIconButton
         class={slot('navButton')}
         onclick={() => ctx.navigate(1)}
         disabled={!ctx.canGoForward || ctx.disabled}
         aria-label={nextLabel}
       >
         <ChevronRightIcon size={navIconSize} />
-      </Button>
+      </CoreIconButton>
     </div>
   </div>
 {/if}

package/dist/components/Calendar/CalendarMiniMonth.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { Button } from '../../primitives/Button';
+  // 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 { getCalendarContext, createSlotHelper } from './calendar.context';
   import {
     getMonthGrid,
@@ -118,27 +119,26 @@
 </script>
 
 <div class={slot('miniCalendar', className)}>
-  <!-- Mini header -->
+  <!-- Mini header. Nav buttons render on the internal CoreIconButton (was
+       `<Button unstyled mint="none">`); the plumbing/slot split is documented
+       on the miniCalendarNavButton slot in calendar.variants.ts. Never
+       disabled, so the core's disabled plumbing is inert here. -->
   <div class={slot('miniCalendarHeader')}>
-    <Button
-      unstyled
-      mint="none"
+    <CoreIconButton
       class={slot('miniCalendarNavButton')}
       onclick={() => navigateMini(-1)}
       aria-label={bt('calendar.previousMonth')}
     >
       ‹
-    </Button>
+    </CoreIconButton>
     <span class={slot('miniCalendarTitle')}>{miniTitle}</span>
-    <Button
-      unstyled
-      mint="none"
+    <CoreIconButton
       class={slot('miniCalendarNavButton')}
       onclick={() => navigateMini(1)}
       aria-label={bt('calendar.nextMonth')}
     >
       ›
-    </Button>
+    </CoreIconButton>
   </div>
 
   <!-- Weekday headers — narrow names duplicate in many locales (de-DE: M, D,

package/dist/components/Calendar/calendar.variants.js

@@ -7,12 +7,23 @@ export const calendarVariants = tv({
         header: ['flex items-center justify-between', 'border-b border-border-hairline'],
         title: 'font-semibold text-text-primary select-none',
         nav: 'flex items-center gap-1',
+        // Rendered on the internal CoreIconButton (behaviour-only base: inline-flex
+        // centring, cursor/select affordance, focus-visible reset, disabled
+        // opacity/cursor/inertness), so this slot carries only the visual identity
+        // on top — the classes the core already supplies (inline-flex items-center
+        // justify-center, focus-visible:outline-none, disabled:opacity-50,
+        // disabled:cursor-not-allowed) are not repeated here. Deliberate deltas vs.
+        // the old `<Button unstyled mint="none">` render (which had NO plumbing):
+        // `cursor-pointer` (was the UA arrow — Tailwind 4 preflight doesn't set it;
+        // now consistent with every styled Button) and `disabled:pointer-events-none`
+        // (a disabled nav button is fully inert: no more hover-bg feedback or
+        // not-allowed cursor while disabled — matching the styled Button base).
+        // Mirrors planner.variants navButton. See internal/core/.
         navButton: [
-            'inline-flex items-center justify-center rounded-md',
+            'rounded-md',
             'text-text-secondary hover:bg-surface-hover hover:text-text-primary',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2',
-            'disabled:opacity-50 disabled:cursor-not-allowed'
+            'focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2'
         ],
         // Grid
         grid: 'w-full',
@@ -131,11 +142,14 @@ export const calendarVariants = tv({
         miniCalendar: ['shrink-0 flex flex-col', 'border-r border-border-hairline'],
         miniCalendarHeader: 'flex items-center justify-between',
         miniCalendarTitle: 'font-semibold text-text-primary text-center select-none',
+        // Rendered on the internal CoreIconButton — same plumbing/slot split as
+        // `navButton` above (and the same deliberate cursor-pointer delta); these
+        // buttons are never disabled, so the disabled plumbing is inert.
         miniCalendarNavButton: [
-            'inline-flex items-center justify-center rounded-md',
+            'rounded-md',
             'text-text-secondary hover:bg-surface-hover hover:text-text-primary',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
+            'focus-visible:ring-2 focus-visible:ring-primary/50'
         ],
         miniCalendarWeekday: 'text-center text-text-tertiary select-none font-medium',
         miniCalendarDay: [

package/dist/components/FileUpload/FileUpload.svelte

@@ -17,7 +17,8 @@
   import DangerCircleIconDefault from '../../icons/DangerCircleIcon.svelte';
   import { mintRegistry } from '../../mint';
   import { Progress } from '../../primitives/Progress';
-  import { Spinner } from '../../primitives/Spinner';
+  // internal core, not the public component — keeps the public-to-public import graph clean (see internal/core/)
+  import CoreSpinner from '../../internal/core/CoreSpinner.svelte';
   import { fly } from 'svelte/transition';
   import { quintOut } from 'svelte/easing';
   import { onDestroy } from 'svelte';
@@ -520,7 +521,21 @@
             <!-- Status indicator -->
             <div class={slot('fileItemStatusIcon')}>
               {#if entry.status === 'uploading'}
-                <Spinner size="xs" visible />
+                <!--
+                  CoreSpinner instead of the public Spinner (see internal/core/).
+                  The old call was `visible` (explicitly true) with no label
+                  override, and this branch already gates rendering on the
+                  uploading status — so the core needs no {#if} of its own.
+                  Deliberate a11y delta: the old Spinner emitted role="status" +
+                  aria-live + an sr-only "Loading..." inside the file list's own
+                  aria-live="polite" region (nested live regions); the core emits
+                  no semantics — the list region owns announcements. `text-primary`
+                  pins the old default color (the public Spinner's intent default),
+                  matching the explicit text-success/text-danger on the sibling
+                  status icons; it wins the duel against the core's `text-current`
+                  by stylesheet order (theme colors sort after keyword colors).
+                -->
+                <CoreSpinner size="xs" class="text-primary" />
               {:else if entry.status === 'complete'}
                 <CheckCircleIcon size={itemIconSize} class="text-success" />
               {:else if entry.status === 'error'}

package/dist/components/Planner/PlannerHeader.svelte

@@ -6,7 +6,8 @@
 -->
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { Button } from '../../primitives/Button';
+  // 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 { Tooltip } from '../../primitives/Tooltip';
   import { resolveIcon } from '../../icons';
   import ChevronLeftIconDefault from '../../icons/ChevronLeftIcon.svelte';
@@ -37,44 +38,46 @@
   );
 </script>
 
+<!--
+  Nav buttons render on the internal CoreIconButton (was `<Button unstyled
+  mint="none">`, which emitted only the call-site classes). The core's plumbing
+  overlaps the navButton slot's old baseline (inline-flex centring, focus-visible
+  reset, disabled opacity/cursor — now supplied by the core, stripped from the
+  slot); the deliberate deltas it introduces are documented on the slot in
+  planner.variants.ts.
+-->
 <div class={ctx.slot('header')}>
   <div class={ctx.slot('nav')}>
-    <Button
-      unstyled
-      mint="none"
+    <CoreIconButton
       class={ctx.slot('navButton')}
       onclick={() => ctx.navigate(-1)}
       disabled={!ctx.canGoBack || ctx.disabled}
       aria-label={prevLabel}
     >
       <ChevronLeftIcon size={16} />
-    </Button>
+    </CoreIconButton>
   </div>
 
   <span class={ctx.slot('headerTitle')}>{ctx.title}</span>
 
   <div class={ctx.slot('nav')}>
     <Tooltip label={bt('planner.today')}>
-      <Button
-        unstyled
-        mint="none"
+      <CoreIconButton
         class={ctx.slot('navButton')}
         onclick={() => ctx.goToToday()}
         disabled={!ctx.canGoToToday || ctx.disabled}
         aria-label={bt('planner.today')}
       >
         <CalendarDaysIcon size={16} />
-      </Button>
+      </CoreIconButton>
     </Tooltip>
-    <Button
-      unstyled
-      mint="none"
+    <CoreIconButton
       class={ctx.slot('navButton')}
       onclick={() => ctx.navigate(1)}
       disabled={!ctx.canGoForward || ctx.disabled}
       aria-label={nextLabel}
     >
       <ChevronRightIcon size={16} />
-    </Button>
+    </CoreIconButton>
   </div>
 </div>

package/dist/components/Planner/planner.variants.js

@@ -14,12 +14,23 @@ export const plannerVariants = tv({
         header: ['flex items-center justify-between gap-2', 'border-b border-border-hairline'],
         headerTitle: 'font-semibold text-text-primary select-none tabular-nums',
         nav: 'flex items-center gap-1',
+        // Rendered on the internal CoreIconButton (behaviour-only base: inline-flex
+        // centring, cursor/select affordance, focus-visible reset, disabled
+        // opacity/cursor/inertness), so this slot carries only the visual identity
+        // on top — the classes the core already supplies (inline-flex items-center
+        // justify-center, focus-visible:outline-none, disabled:opacity-50,
+        // disabled:cursor-not-allowed) are not repeated here. Deliberate deltas vs.
+        // the old `<Button unstyled mint="none">` render (which had NO plumbing):
+        // `cursor-pointer` (was the UA arrow — Tailwind 4 preflight doesn't set it;
+        // now consistent with every styled Button) and `disabled:pointer-events-none`
+        // (a disabled nav button is fully inert: no more hover-bg feedback or
+        // not-allowed cursor while disabled — matching the styled Button base).
+        // Mirrors calendar.variants navButton. See internal/core/.
         navButton: [
-            'inline-flex items-center justify-center rounded-md',
+            'rounded-md',
             'text-text-secondary hover:bg-surface-hover hover:text-text-primary',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2',
-            'disabled:opacity-50 disabled:cursor-not-allowed'
+            'focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2'
         ],
         // Grid scaffolding
         grid: 'w-full',