@bimetal/calendar-svelte-components 0.30.0 → 0.34.0

package/dist/components/EventHistory.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { DomainEvent } from '@bimetal/calendar-data';
+  import { formatHistoryTimestamp } from '@bimetal/calendar-core';
   import { getCalendarConfig } from '../binding/index.js';
 
   const eventTypeColors: Record<string, string> = {
@@ -22,12 +23,7 @@
   const config = getCalendarConfig();
   const eventTypeLabels = config.locale.historyEventTypes;
 
-  function formatTime(timestamp: number): string {
-    return new Date(timestamp).toLocaleString(config.locale.code, {
-      day: '2-digit', month: '2-digit', year: 'numeric',
-      hour: '2-digit', minute: '2-digit',
-    });
-  }
+  const formatTime = (timestamp: number): string => formatHistoryTimestamp(timestamp, config.locale.code, config.core.timezone);
 
   function getSummary(event: DomainEvent): string {
     const payload = event.payload as Record<string, unknown>;
@@ -47,40 +43,40 @@
   }
 </script>
 
-<div class="event-history">
-  <div class="event-history__header">
-    <button class="event-history__back" onclick={onBack}>&larr;</button>
-    <span class="event-history__title">{config.locale.historyTitle}</span>
+<div class="bm-cal-event-history">
+  <div class="bm-cal-event-history__header">
+    <button class="bm-cal-event-history__back" onclick={onBack}>&larr;</button>
+    <span class="bm-cal-event-history__title">{config.locale.historyTitle}</span>
   </div>
 
   {#if history.length === 0}
-    <div class="event-history__loading">{config.locale.historyLoading}</div>
+    <div class="bm-cal-event-history__loading">{config.locale.historyLoading}</div>
   {/if}
 
-  <div class="event-history__timeline">
+  <div class="bm-cal-event-history__timeline">
     {#each history as entry, idx (entry.envelope.id ?? idx)}
-      <div class="event-history__entry">
-        <div class="event-history__dot-col">
+      <div class="bm-cal-event-history__entry">
+        <div class="bm-cal-event-history__dot-col">
           <div
-            class="event-history__dot"
+            class="bm-cal-event-history__dot"
             style:background-color={eventTypeColors[entry.type] ?? '#8E8E93'}
           ></div>
           {#if idx < history.length - 1}
-            <div class="event-history__line"></div>
+            <div class="bm-cal-event-history__line"></div>
           {/if}
         </div>
-        <div class="event-history__content">
-          <div class="event-history__entry-header">
+        <div class="bm-cal-event-history__content">
+          <div class="bm-cal-event-history__entry-header">
             <span
-              class="event-history__badge"
+              class="bm-cal-event-history__badge"
               style:background-color={eventTypeColors[entry.type] ?? '#8E8E93'}
             >
               {eventTypeLabels[entry.type] ?? entry.type}
             </span>
-            <span class="event-history__time">{formatTime(entry.envelope.timestamp)}</span>
+            <span class="bm-cal-event-history__time">{formatTime(entry.envelope.timestamp)}</span>
           </div>
           {#if getSummary(entry)}
-            <div class="event-history__summary">{getSummary(entry)}</div>
+            <div class="bm-cal-event-history__summary">{getSummary(entry)}</div>
           {/if}
         </div>
       </div>

package/dist/components/EventHistory.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventHistory.svelte.d.ts","sourceRoot":"","sources":["../../src/components/EventHistory.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGzD,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAmFJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"EventHistory.svelte.d.ts","sourceRoot":"","sources":["../../src/components/EventHistory.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIzD,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AA+EJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ResourceFilter.svelte

@@ -13,11 +13,11 @@
 </script>
 
 {#if resources.length > 0}
-  <div class="resource-filter">
+  <div class="bm-cal-resource-filter">
     {#each resources as r (r.id)}
       <button
         type="button"
-        class="resource-filter__pill{hiddenResources.has(r.id) ? ' resource-filter__pill--hidden' : ''}"
+        class="bm-cal-resource-filter__pill{hiddenResources.has(r.id) ? ' bm-cal-resource-filter__pill--hidden' : ''}"
         style:border-left-color={r.color ?? 'transparent'}
         onclick={() => onToggle(r.id)}
       >

package/dist/components/UndoToast.svelte

@@ -37,11 +37,11 @@
 </script>
 
 {#if ctx.lastAction}
-  <div class="undo-toast" role="status">
-    <span class="undo-toast__text">{ctx.lastAction.description}</span>
-    <button class="undo-toast__btn" onclick={handleUndo}>
-      {config.locale.undo ?? 'Undo'}
+  <div class="bm-cal__toast" role="status">
+    <span class="bm-cal__toast-text">{ctx.lastAction.description}</span>
+    <button class="bm-cal__toast-btn" onclick={handleUndo}>
+      {config.locale.undo}
     </button>
-    <button class="undo-toast__dismiss" onclick={() => ctx.dismissUndo()}>&times;</button>
+    <button class="bm-cal__toast-dismiss" onclick={() => ctx.dismissUndo()}>&times;</button>
   </div>
 {/if}

package/dist/views/agenda/AgendaEvent.svelte

@@ -32,7 +32,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-  class="agenda-view__row agenda-view__event{isSelected ? ' agenda-view__event--selected' : ''}{extraClass}"
+  class="bm-cal-agenda__row bm-cal-agenda__event{isSelected ? ' bm-cal-agenda__event--selected' : ''}{extraClass}"
   style={slotStyleStr}
   role="button"
   tabindex="0"
@@ -43,12 +43,12 @@
   {#if slots.content}
     {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
   {:else}
-    <div class="agenda-view__event-color" style:background-color={event.metadata.color ?? '#007AFF'}></div>
-    <div class="agenda-view__event-content">
-      <div class="agenda-view__event-title">{renderedTitle}</div>
-      <div class="agenda-view__event-time">{timeLabel}</div>
+    <div class="bm-cal-agenda__event-color" style:background-color={event.metadata.color ?? '#007AFF'}></div>
+    <div class="bm-cal-agenda__event-content">
+      <div class="bm-cal-agenda__event-title">{renderedTitle}</div>
+      <div class="bm-cal-agenda__event-time">{timeLabel}</div>
     </div>
-    <div class="agenda-view__event-calendar">{category}</div>
+    <div class="bm-cal-agenda__event-calendar">{category}</div>
   {/if}
   {#if slots.badges}
     {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}

package/dist/views/agenda/AgendaView.svelte

@@ -61,20 +61,20 @@
   }
 </script>
 
-<div class="agenda-view" bind:this={scrollEl}>
+<div class="bm-cal-agenda" bind:this={scrollEl}>
   {#if agenda.empty}
-    <div class="agenda-view__empty">{config.locale.noEvents}</div>
+    <div class="bm-cal-agenda__empty">{config.locale.noEvents}</div>
   {:else}
     {#if agenda.offsetTop > 0}
-      <div class="agenda-view__spacer" style:height={`${agenda.offsetTop}px`} aria-hidden="true"></div>
+      <div class="bm-cal-agenda__spacer" style:height={`${agenda.offsetTop}px`} aria-hidden="true"></div>
     {/if}
     {#each agenda.rows as row (row.key)}
       {#if row.kind === 'header'}
-        <div class="agenda-view__row agenda-view__row--header{row.isToday ? ' agenda-view__row--today' : ''}">
-          <span class="agenda-view__date-number">{row.dayOfMonth}</span>
-          <div class="agenda-view__date-text">
-            <span class="agenda-view__date-weekday">{row.weekday}</span>
-            <span class="agenda-view__date-full">{row.dateFull}</span>
+        <div class="bm-cal-agenda__row bm-cal-agenda__row--header{row.isToday ? ' bm-cal-agenda__row--today' : ''}">
+          <span class="bm-cal-agenda__date-number">{row.dayOfMonth}</span>
+          <div class="bm-cal-agenda__date-text">
+            <span class="bm-cal-agenda__date-weekday">{row.weekday}</span>
+            <span class="bm-cal-agenda__date-full">{row.dateFull}</span>
           </div>
         </div>
       {:else}
@@ -91,7 +91,7 @@
       {/if}
     {/each}
     {#if agenda.offsetBottom > 0}
-      <div class="agenda-view__spacer" style:height={`${agenda.offsetBottom}px`} aria-hidden="true"></div>
+      <div class="bm-cal-agenda__spacer" style:height={`${agenda.offsetBottom}px`} aria-hidden="true"></div>
     {/if}
   {/if}
 </div>

package/dist/views/day/AllDayEvent.svelte

@@ -29,7 +29,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-  class="day-view__allday-event{isSelected ? ' day-view__allday-event--selected' : ''}{extraClass}"
+  class="bm-cal-day__allday-event{isSelected ? ' bm-cal-day__allday-event--selected' : ''}{extraClass}"
   style={fullStyle}
   role="button"
   tabindex="0"

package/dist/views/day/DayView.svelte

@@ -118,14 +118,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;
     const time = getTimeFromMouseY(e.clientY);
     // Tag + gesnapte Zeit über den geteilten Parser (kein split, wie WeekView).
     const clickedDt = parseDateTimeStr(toDateStr(currentDate), time, currentDate.timezone);
@@ -156,20 +156,20 @@
   }
 </script>
 
-<div class="day-view">
+<div class="bm-cal-day">
   <!-- Header -->
-  <div class="day-view__header">
-    <span class="day-view__day-name">{dayName}</span>
-    <span class="day-view__day-number{isToday ? ' day-view__day-number--today' : ''}">
+  <div class="bm-cal-day__header">
+    <span class="bm-cal-day__day-name">{dayName}</span>
+    <span class="bm-cal-day__day-number{isToday ? ' bm-cal-day__day-number--today' : ''}">
       {getDayOfMonth(currentDate)}
     </span>
   </div>
 
   <!-- All-day events -->
   {#if allDayEvents.length > 0}
-    <div class="day-view__allday">
-      <div class="day-view__allday-label">{config.locale.allDayLabel}</div>
-      <div class="day-view__allday-list">
+    <div class="bm-cal-day__allday">
+      <div class="bm-cal-day__allday-label">{config.locale.allDayLabel}</div>
+      <div class="bm-cal-day__allday-list">
         {#each allDayEvents as ev (ev.id)}
           <AllDayEvent
             {ev}
@@ -186,7 +186,7 @@
   <!-- Time grid -->
   <div
     bind:this={timeGridEl}
-    class="day-view__time-grid"
+    class="bm-cal-day__time-grid"
     role="grid"
     tabindex="0"
     ondragover={handleGridDragOver}
@@ -199,7 +199,7 @@
   >
     <div
       bind:this={gridInnerEl}
-      class="day-view__time-grid-inner"
+      class="bm-cal-day__time-grid-inner"
       style="height: {24 * DEFAULT_HOUR_HEIGHT}px;"
     >
       <!-- Hour rows -->
@@ -207,10 +207,10 @@
         {@const wh = config.core.workingHours}
         {@const isOff = wh ? (hr < wh.start || hr >= wh.end) : false}
         <div
-          class="day-view__hour-row{isOff ? ' hour-slot--off' : ''}"
+          class="bm-cal-day__hour-row{isOff ? ' bm-cal__hour-slot--off' : ''}"
           style="top: {hr * DEFAULT_HOUR_HEIGHT}px; height: {DEFAULT_HOUR_HEIGHT}px;"
         >
-          <div class="day-view__hour-label">
+          <div class="bm-cal-day__hour-label">
             {hr > 0 ? `${String(hr).padStart(2, '0')}:00` : ''}
           </div>
         </div>
@@ -218,7 +218,7 @@
 
       <!-- Day column -->
       <div
-        class="day-view__day-col"
+        class="bm-cal-day__day-col"
         style="left: {DEFAULT_TIME_LABEL_WIDTH_DAY}px; width: calc(100% - {DEFAULT_TIME_LABEL_WIDTH_DAY}px);"
       ></div>
 
@@ -243,8 +243,8 @@
 
       <!-- Now line -->
       {#if isToday}
-        <div class="day-view__now-line" style="top: {nowHours * DEFAULT_HOUR_HEIGHT}px;">
-          <div class="day-view__now-dot"></div>
+        <div class="bm-cal-day__now-line" style="top: {nowHours * DEFAULT_HOUR_HEIGHT}px;">
+          <div class="bm-cal-day__now-dot"></div>
         </div>
       {/if}
     </div>

package/dist/views/month/MonthView.svelte

@@ -44,11 +44,11 @@
   });
 </script>
 
-<div class="month-grid">
-  <div class="day-headers">
-    <div class="header-spacer"></div>
+<div class="bm-cal__month-grid">
+  <div class="bm-cal__day-headers">
+    <div class="bm-cal__header-spacer"></div>
     {#each config.locale.dayNamesShort as name (name)}
-      <div class="day-header">{name}</div>
+      <div class="bm-cal__day-header">{name}</div>
     {/each}
   </div>
 

package/dist/views/month/TimedEntry.svelte

@@ -33,7 +33,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-  class="timed-entry{isSelected ? ' timed-entry--selected' : ''}{extraClass}"
+  class="bm-cal-timed-entry{isSelected ? ' bm-cal-timed-entry--selected' : ''}{extraClass}"
   style={slotStyleStr}
   role="button"
   tabindex="0"
@@ -45,11 +45,11 @@
   {#if slots.content}
     {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
   {:else}
-    <span class="timed-entry__dot" style:background-color={ev.metadata.color ?? '#007AFF'}></span>
-    <span class="timed-entry__time">
+    <span class="bm-cal-timed-entry__dot" style:background-color={ev.metadata.color ?? '#007AFF'}></span>
+    <span class="bm-cal-timed-entry__time">
       {toTimeStr(ev.timeRange.start)}
     </span>
-    <span class="timed-entry__title">{renderedTitle}</span>
+    <span class="bm-cal-timed-entry__title">{renderedTitle}</span>
   {/if}
   {#if slots.badges}
     {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}

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

@@ -148,7 +148,7 @@
 </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"
@@ -168,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}
@@ -181,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}
@@ -193,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}