@urbicon-ui/blocks 6.33.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,