@bimetal/calendar-svelte-components 0.29.0 → 0.32.0

package/dist/views/month/WeekRow.svelte

@@ -120,7 +120,7 @@
 
 <div
   bind:this={rowEl}
-  class="week-row"
+  class="bm-cal__week-row"
   style="--lane-count: {lanes};"
   role="row"
   tabindex="-1"
@@ -128,7 +128,7 @@
   ondragleave={handleDragLeave}
   ondrop={handleDrop}
 >
-  <div class="week-number">{weekNumber}</div>
+  <div class="bm-cal__week-number">{weekNumber}</div>
 
   {#each weekDates as date, colIdx (colIdx)}
     {@const isToday = isSameDay(date, today)}
@@ -144,8 +144,8 @@
     {@const overflow = timedEvents.length - maxVisible}
 
     <div
-      class="day-cell"
-      class:outside-month={!inMonth}
+      class="bm-cal__day"
+      class:bm-cal__day--outside={!inMonth}
       style="grid-column: {colIdx + 2}; grid-row: 1 / -1; --lane-count: {cellLanes};"
       role="gridcell"
       tabindex="0"
@@ -154,14 +154,14 @@
       onclick={(e) => handleDayCellClick(e, date)}
       ondblclick={(e) => handleDayCellDoubleClick(e, date)}
     >
-      <div class="day-number-container">
-        <span class="day-number" class:today={isToday}>
+      <div class="bm-cal__day-number-container">
+        <span class="bm-cal__day-number" class:bm-cal__today={isToday}>
           {formatDayLabel(date, config.locale.code)}
         </span>
       </div>
 
       {#if timedEvents.length > 0}
-        <div class="day-cell__timed">
+        <div class="bm-cal__day-timed">
           {#each showEvents as ev (ev.id)}
             <TimedEntry
               {ev}
@@ -173,7 +173,7 @@
           {/each}
           {#if !isExpanded && hasOverflow}
             <div
-              class="timed-overflow"
+              class="bm-cal__timed-overflow"
               role="button"
               tabindex="0"
               onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') ctx.onExpandMonthCell(dayMs); }}
@@ -186,12 +186,12 @@
 
         {#if isExpanded && hasOverflow}
           <div
-            class="day-cell__expand-overlay"
+            class="bm-cal__day-expand-overlay"
             role="tooltip"
             onmouseleave={() => ctx.onCollapseMonthCell()}
           >
-            <div class="day-number-container">
-              <span class="day-number" class:today={isToday}>{dayNum}</span>
+            <div class="bm-cal__day-number-container">
+              <span class="bm-cal__day-number" class:bm-cal__today={isToday}>{dayNum}</span>
             </div>
             {#each timedEvents as ev (ev.id)}
               <TimedEntry
@@ -209,8 +209,8 @@
   {/each}
 
   <!-- Events overlay -->
-  <div class="events-overlay">
-    <div class="events-grid">
+  <div class="bm-cal__events-overlay">
+    <div class="bm-cal__events-grid">
       {#each items as layoutItem, idx (`${layoutItem.segment.event.id}-${idx}`)}
         {@const isDragged = ctx.previewEvent?.id === layoutItem.segment.event.id}
         <EventBar

package/dist/views/resource/ResourceView.svelte

@@ -120,7 +120,7 @@
 
   function handleColumnClick(e: MouseEvent) {
     if (!click.accept(config.clickThresholdMs)) return;
-    if ((e.target as HTMLElement).closest('.time-event')) return;
+    if ((e.target as HTMLElement).closest('.bm-cal-time-event')) return;
     // Single click deselects; create-dialog moves to dblclick.
     if (ctx.selectedEventId !== null) ctx.onClearSelection();
   }
@@ -128,7 +128,7 @@
   function handleColumnDoubleClick(e: MouseEvent, resourceId: string) {
     if (!click.accept(config.clickThresholdMs)) return;
     if (!gridInnerEl) return;
-    if ((e.target as HTMLElement).closest('.time-event')) return;
+    if ((e.target as HTMLElement).closest('.bm-cal-time-event')) return;
     const time = getTimeFromMouseY(e.clientY, gridInnerEl);
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
     onResourceCellClick(currentDate, time, resourceId, rect);
@@ -136,28 +136,28 @@
 </script>
 
 {#if visibleResources.length === 0}
-  <div class="resource-view resource-view--empty">{config.locale.unassigned ?? 'No resource selected'}</div>
+  <div class="bm-cal-resource bm-cal-resource--empty">{config.locale.unassigned}</div>
 {:else}
-  <div class="resource-view">
-    <div class="resource-view__header">
-      <div class="resource-view__day-name">{dayName}</div>
-      <div class="resource-view__resources">
-        <div class="resource-view__time-spacer" style:width={`${DEFAULT_TIME_LABEL_WIDTH_DAY}px`}></div>
+  <div class="bm-cal-resource">
+    <div class="bm-cal-resource__header">
+      <div class="bm-cal-resource__day-name">{dayName}</div>
+      <div class="bm-cal-resource__resources">
+        <div class="bm-cal-resource__time-spacer" style:width={`${DEFAULT_TIME_LABEL_WIDTH_DAY}px`}></div>
         {#each visibleResources as r (r.id)}
-          <div class="resource-view__resource-header" style="flex: 1 1 0; min-width: 0;">
+          <div class="bm-cal-resource__resource-header" style="flex: 1 1 0; min-width: 0;">
             {#if r.color}
-              <span class="resource-view__resource-dot" style:background-color={r.color}></span>
+              <span class="bm-cal-resource__resource-dot" style:background-color={r.color}></span>
             {/if}
-            <span class="resource-view__resource-name">{r.name}</span>
+            <span class="bm-cal-resource__resource-name">{r.name}</span>
           </div>
         {/each}
       </div>
     </div>
 
-    <div class="resource-view__time-grid" bind:this={timeGridEl}>
+    <div class="bm-cal-resource__time-grid" bind:this={timeGridEl}>
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
-        class="resource-view__time-grid-inner"
+        class="bm-cal-resource__time-grid-inner"
         bind:this={gridInnerEl}
         style:height={`${24 * DEFAULT_HOUR_HEIGHT}px`}
         ondragover={handleGridDragOver}
@@ -168,11 +168,11 @@
           {@const wh = config.core.workingHours}
           {@const isOff = wh ? (hr < wh.start || hr >= wh.end) : false}
           <div
-            class="resource-view__hour-row{isOff ? ' hour-slot--off' : ''}"
+            class="bm-cal-resource__hour-row{isOff ? ' bm-cal__hour-slot--off' : ''}"
             style:top={`${hr * DEFAULT_HOUR_HEIGHT}px`}
             style:height={`${DEFAULT_HOUR_HEIGHT}px`}
           >
-            <div class="resource-view__hour-label">
+            <div class="bm-cal-resource__hour-label">
               {hr > 0 ? `${String(hr).padStart(2, '0')}:00` : ''}
             </div>
           </div>
@@ -181,7 +181,7 @@
         {#each visibleResources as r, idx (`col-${r.id}`)}
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <div
-            class="resource-view__resource-col"
+            class="bm-cal-resource__resource-col"
             role="gridcell"
             tabindex="-1"
             style:left={`calc(${DEFAULT_TIME_LABEL_WIDTH_DAY}px + ${idx} * ${colWidth})`}
@@ -214,11 +214,11 @@
 
         {#if isToday}
           <div
-            class="resource-view__now-line"
+            class="bm-cal-resource__now-line"
             style:top={`${nowHours * DEFAULT_HOUR_HEIGHT}px`}
             style:left={`${DEFAULT_TIME_LABEL_WIDTH_DAY}px`}
           >
-            <div class="resource-view__now-dot"></div>
+            <div class="bm-cal-resource__now-dot"></div>
           </div>
         {/if}
       </div>

package/dist/views/timeline/TimelineView.svelte

@@ -113,35 +113,35 @@
 </script>
 
 {#if visibleResources.length === 0}
-  <div class="timeline-view timeline-view--empty">
-    {config.locale.unassigned ?? 'No resource selected'}
+  <div class="bm-cal-timeline bm-cal-timeline--empty">
+    {config.locale.unassigned}
   </div>
 {:else}
-  <div class="timeline-view">
-    <div class="timeline-view__header" style:grid-template-columns={colTemplate}>
-      <div class="timeline-view__corner"></div>
+  <div class="bm-cal-timeline">
+    <div class="bm-cal-timeline__header" style:grid-template-columns={colTemplate}>
+      <div class="bm-cal-timeline__corner"></div>
       {#each dates as d (d.epochMs)}
         {@const isToday = isSameDay(d, today)}
-        <div class="timeline-view__date-header{isToday ? ' timeline-view__date-header--today' : ''}">
+        <div class="bm-cal-timeline__date-header{isToday ? ' bm-cal-timeline__date-header--today' : ''}">
           {dateFmt.format(new Date(d.epochMs))}
         </div>
       {/each}
     </div>
 
-    <div class="timeline-view__body">
+    <div class="bm-cal-timeline__body">
       {#each visibleResources as r (r.id)}
         {@const items = lanesByResource.get(r.id) ?? []}
         {@const lanes = Math.max(1, maxLanes(items))}
-        <div class="timeline-view__lane">
-          <div class="timeline-view__resource-label" style:width={`${DEFAULT_RESOURCE_LABEL_WIDTH}px`}>
+        <div class="bm-cal-timeline__lane">
+          <div class="bm-cal-timeline__resource-label" style:width={`${DEFAULT_RESOURCE_LABEL_WIDTH}px`}>
             {#if r.color}
-              <span class="timeline-view__resource-dot" style:background-color={r.color}></span>
+              <span class="bm-cal-timeline__resource-dot" style:background-color={r.color}></span>
             {/if}
-            <span class="timeline-view__resource-name">{r.name}</span>
+            <span class="bm-cal-timeline__resource-name">{r.name}</span>
           </div>
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <div
-            class="timeline-view__lane-content"
+            class="bm-cal-timeline__lane-content"
             style:display="grid"
             style:grid-template-columns={`repeat(${days}, 1fr)`}
             style:grid-auto-rows="32px"
@@ -154,7 +154,7 @@
               {@const isToday = isSameDay(d, today)}
               <button
                 type="button"
-                class="timeline-view__cell{isToday ? ' timeline-view__cell--today' : ''}"
+                class="bm-cal-timeline__cell{isToday ? ' bm-cal-timeline__cell--today' : ''}"
                 style:grid-column={i + 1}
                 style:grid-row="1 / -1"
                 aria-label="{r.name}, {dateFmt.format(new Date(d.epochMs))}"

package/dist/views/week/AllDayRow.svelte

@@ -53,14 +53,14 @@
 {#if items.length > 0}
   <div
     bind:this={rowEl}
-    class="week-view__allday"
+    class="bm-cal-week__allday"
     role="application"
     ondragover={handleDragOver}
     ondrop={handleDrop}
     ondragleave={handleDragLeave}
   >
-    <div class="week-view__allday-label">{config.locale.allDayLabel}</div>
-    <div class="week-view__allday-grid" style="--lane-count: {lanes};">
+    <div class="bm-cal-week__allday-label">{config.locale.allDayLabel}</div>
+    <div class="bm-cal-week__allday-grid" style="--lane-count: {lanes};">
       {#each items as layoutItem, idx (`${layoutItem.segment.event.id}-${idx}`)}
         {@const isDragged = ctx.previewEvent?.id === layoutItem.segment.event.id}
         <EventBar

package/dist/views/week/TimeEvent.svelte

@@ -4,6 +4,7 @@
   import { getCalendarContext, getCalendarConfig, toTimeStr, buildDragInfo, getEventSlots } from '../../binding/index.js';
   import type { DragInfo } from '../../binding/index.js';
   import { createClickIntent, writeCalendarDragData, installTransparentDragImage } from '@bimetal/calendar-headless';
+  import { probeRender } from '@bimetal/svelte';
 
   /**
    * Layout-Position eines Termins (Pilot-Direktive 2026-06-21). Zwei
@@ -132,10 +133,22 @@
     ? Object.entries(slots.style).map(([k, v]) => `${k.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${v}`).join('; ')
     : '');
   const style = $derived(slotStyleStr ? `${baseStyle} ${slotStyleStr}` : baseStyle);
+
+  // The week timed-layout rebuilds its `item`/`event` wrappers every snapshot, so the raw `event`
+  // prop ref churns even for unchanged events. Route the id through an equality-gated `$derived` so
+  // the probe below tracks the STABLE id string, not the churning prop ref (the DOM-driving
+  // deriveds `style`/`renderedTitle`/… already gate the same churn to their stable values).
+  const eventId = $derived(event.id);
+
+  // v0.30 Slice 3 perf probe: re-runs (post-DOM) ONLY when this event's DOM-driving deriveds
+  // change. `style` folds in all `layout` geometry (top/height/left/width fractions), and
+  // `isSelected` is equality-gated — so a selection or geometry change elsewhere does NOT
+  // re-run unchanged events, proving fine-grained reactivity even with the context selection read.
+  $effect(() => { void style; void isSelected; void renderedTitle; void timeLabel; void duration; probeRender(eventId); });
 </script>
 
 <div
-  class="time-event{ghost ? ' time-event--ghost' : ''}{isSelected ? ' time-event--selected' : ''}{extraClass}"
+  class="bm-cal-time-event{ghost ? ' bm-cal-time-event--ghost' : ''}{isSelected ? ' bm-cal-time-event--selected' : ''}{extraClass}"
   {style}
   draggable={!ghost}
   role="button"
@@ -155,9 +168,8 @@
   {#if isFirstDay && !ghost}
     <!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex a11y_no_static_element_interactions -->
     <div
-      class="time-event__resize time-event__resize--top"
+      class="bm-cal-time-event__resize bm-cal-time-event__resize--top"
       role="separator"
-      aria-label="Resize start"
       draggable={true}
       ondragstart={(e) => handleResizeDragStart(e, 'start')}
       ondragend={ctx.onDragEnd}
@@ -168,9 +180,9 @@
   {#if slots.content}
     {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
   {:else}
-    <div class="time-event__title">{renderedTitle}</div>
+    <div class="bm-cal-time-event__title">{renderedTitle}</div>
     {#if duration >= 0.75 && timeLabel}
-      <div class="time-event__time">{timeLabel}</div>
+      <div class="bm-cal-time-event__time">{timeLabel}</div>
     {/if}
   {/if}
   {#if slots.badges}
@@ -180,9 +192,8 @@
   {#if isLastDay && !ghost}
     <!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex a11y_no_static_element_interactions -->
     <div
-      class="time-event__resize time-event__resize--bottom"
+      class="bm-cal-time-event__resize bm-cal-time-event__resize--bottom"
       role="separator"
-      aria-label="Resize end"
       draggable={true}
       ondragstart={(e) => handleResizeDragStart(e, 'end')}
       ondragend={ctx.onDragEnd}

package/dist/views/week/TimeEvent.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeEvent.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/week/TimeEvent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO5E;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AACF,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAgJJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TimeEvent.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/week/TimeEvent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAQ5E;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AACF,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA6JJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/views/week/WeekView.svelte

@@ -120,14 +120,14 @@
 
   function handleGridClick(e: MouseEvent) {
     if (!click.accept(config.clickThresholdMs)) return;
-    if ((e.target as HTMLElement).closest('.time-event')) return;
+    if ((e.target as HTMLElement).closest('.bm-cal-time-event')) return;
     // Single click on empty grid deselects; create-dialog moves to dblclick.
     if (ctx.selectedEventId !== null) ctx.onClearSelection();
   }
 
   function handleGridDoubleClick(e: MouseEvent) {
     if (!click.accept(config.clickThresholdMs)) return;
-    if ((e.target as HTMLElement).closest('.time-event')) return;
+    if ((e.target as HTMLElement).closest('.bm-cal-time-event')) return;
     if (!gridInnerEl) return;
     const gridRect = gridInnerEl.getBoundingClientRect();
     const hit = timeGridHit({ x: e.clientX, y: e.clientY }, gridRect, { labelWidth: DEFAULT_TIME_LABEL_WIDTH_WEEK, hourHeight: DEFAULT_HOUR_HEIGHT, snapMinutes: timeSnapMinutes });
@@ -139,15 +139,15 @@
   }
 </script>
 
-<div class="week-view">
+<div class="bm-cal-week">
   <!-- Header -->
-  <div class="week-view__header">
-    <div class="week-view__corner">{config.locale.calendarWeek} {weekNumber}</div>
+  <div class="bm-cal-week__header">
+    <div class="bm-cal-week__corner">{config.locale.calendarWeek} {weekNumber}</div>
     {#each weekDates as date, i (i)}
       {@const isToday = isSameDay(date, currentNow)}
-      <div class="week-view__day-header{isToday ? ' week-view__day-header--today' : ''}">
-        <span class="week-view__day-name">{config.locale.dayNamesShort[i]}</span>
-        <span class="week-view__day-number{isToday ? ' week-view__day-number--today' : ''}">
+      <div class="bm-cal-week__day-header{isToday ? ' bm-cal-week__day-header--today' : ''}">
+        <span class="bm-cal-week__day-name">{config.locale.dayNamesShort[i]}</span>
+        <span class="bm-cal-week__day-number{isToday ? ' bm-cal-week__day-number--today' : ''}">
           {getDayOfMonth(date)}
         </span>
       </div>
@@ -160,7 +160,7 @@
   <!-- Time grid -->
   <div
     bind:this={timeGridEl}
-    class="week-view__time-grid"
+    class="bm-cal-week__time-grid"
     role="grid"
     tabindex="0"
     ondragover={handleGridDragOver}
@@ -173,7 +173,7 @@
   >
     <div
       bind:this={gridInnerEl}
-      class="week-view__time-grid-inner"
+      class="bm-cal-week__time-grid-inner"
       style="height: {24 * DEFAULT_HOUR_HEIGHT}px;"
     >
       <!-- Hour rows -->
@@ -181,10 +181,10 @@
         {@const wh = config.core.workingHours}
         {@const isOff = wh ? (hr < wh.start || hr >= wh.end) : false}
         <div
-          class="week-view__hour-row{isOff ? ' hour-slot--off' : ''}"
+          class="bm-cal-week__hour-row{isOff ? ' bm-cal__hour-slot--off' : ''}"
           style="top: {hr * DEFAULT_HOUR_HEIGHT}px; height: {DEFAULT_HOUR_HEIGHT}px;"
         >
-          <div class="week-view__hour-label">
+          <div class="bm-cal-week__hour-label">
             {hr > 0 ? `${String(hr).padStart(2, '0')}:00` : ''}
           </div>
         </div>
@@ -193,7 +193,7 @@
       <!-- Day columns -->
       {#each weekDates as _, col (col)}
         <div
-          class="week-view__day-col"
+          class="bm-cal-week__day-col"
           style="left: calc({DEFAULT_TIME_LABEL_WIDTH_WEEK}px + {col} * (100% - {DEFAULT_TIME_LABEL_WIDTH_WEEK}px) / 7); width: calc((100% - {DEFAULT_TIME_LABEL_WIDTH_WEEK}px) / 7);"
         ></div>
       {/each}
@@ -221,10 +221,10 @@
       <!-- Now line -->
       {#if nowCol >= 0}
         <div
-          class="week-view__now-line"
+          class="bm-cal-week__now-line"
           style="top: {nowHours * DEFAULT_HOUR_HEIGHT}px; left: calc({DEFAULT_TIME_LABEL_WIDTH_WEEK}px + {nowCol} * (100% - {DEFAULT_TIME_LABEL_WIDTH_WEEK}px) / 7); width: calc((100% - {DEFAULT_TIME_LABEL_WIDTH_WEEK}px) / 7);"
         >
-          <div class="week-view__now-dot"></div>
+          <div class="bm-cal-week__now-dot"></div>
         </div>
       {/if}
     </div>

package/dist/views/year/YearView.svelte

@@ -51,22 +51,22 @@
   }
 </script>
 
-<div class="year-grid">
+<div class="bm-cal-year">
   {#each months as { month, label, weeks } (month)}
-    <div class="year-month">
+    <div class="bm-cal-year-month">
       {#if onMonthClick}
-        <button type="button" class="year-month__header" onclick={() => onMonthClick?.(year, month)}>
+        <button type="button" class="bm-cal-year-month__header" onclick={() => onMonthClick?.(year, month)}>
           {label}
         </button>
       {:else}
-        <div class="year-month__header">{label}</div>
+        <div class="bm-cal-year-month__header">{label}</div>
       {/if}
-      <div class="year-month__day-headers">
+      <div class="bm-cal-year-month__day-headers">
         {#each config.locale.dayNamesShort as n (n)}
-          <div class="year-month__day-header">{n[0]}</div>
+          <div class="bm-cal-year-month__day-header">{n[0]}</div>
         {/each}
       </div>
-      <div class="year-month__days">
+      <div class="bm-cal-year-month__days">
         {#each weeks as week, wIdx (wIdx)}
           {#each week as date (date.epochMs)}
             {@const inMonth = getMonth(date) === month}
@@ -75,14 +75,14 @@
             <button
               type="button"
               class={
-                'year-month__day'
-                + (inMonth ? '' : ' year-month__day--outside')
-                + (isToday ? ' year-month__day--today' : '')
-                + (hasEvents ? ' year-month__day--has-events' : '')
+                'bm-cal-year-month__day'
+                + (inMonth ? '' : ' bm-cal-year-month__day--outside')
+                + (isToday ? ' bm-cal-year-month__day--today' : '')
+                + (hasEvents ? ' bm-cal-year-month__day--has-events' : '')
               }
               onclick={(e) => dayClick(e, date)}
             >
-              <span class="year-month__day-num">{getDayOfMonth(date)}</span>
+              <span class="bm-cal-year-month__day-num">{getDayOfMonth(date)}</span>
             </button>
           {/each}
         {/each}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimetal/calendar-svelte-components",
-  "version": "0.29.0",
+  "version": "0.32.0",
   "description": "Default Svelte 5 calendar UI components",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -27,13 +27,14 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@bimetal/svelte": "^0.29.0",
-    "@bimetal/core": "^0.29.0",
-    "@bimetal/calendar-core": "^0.29.0",
-    "@bimetal/calendar-data": "^0.29.0",
-    "@bimetal/calendar-headless": "^0.29.0",
-    "@bimetal/calendar-rules": "^0.29.0",
-    "@bimetal/calendar-themes": "^0.29.0"
+    "@bimetal/svelte": "^0.32.0",
+    "@bimetal/core": "^0.32.0",
+    "@bimetal/calendar-core": "^0.32.0",
+    "@bimetal/calendar-data": "^0.32.0",
+    "@bimetal/calendar-headless": "^0.32.0",
+    "@bimetal/a11y-dom": "^0.32.0",
+    "@bimetal/calendar-rules": "^0.32.0",
+    "@bimetal/calendar-themes": "^0.32.0"
   },
   "peerDependencies": {
     "svelte": "^5.46.4"