@bimetal/calendar-svelte-components 0.30.0 → 0.32.0

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.30.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.30.0",
-    "@bimetal/core": "^0.30.0",
-    "@bimetal/calendar-core": "^0.30.0",
-    "@bimetal/calendar-data": "^0.30.0",
-    "@bimetal/calendar-headless": "^0.30.0",
-    "@bimetal/calendar-rules": "^0.30.0",
-    "@bimetal/calendar-themes": "^0.30.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"