@bimetal/calendar-svelte-components 0.30.0 → 0.32.0

package/dist/components/Calendar.svelte

@@ -4,6 +4,7 @@
   import type { CalendarStore } from '@bimetal/calendar-data';
   import type { CalendarRule } from '@bimetal/calendar-rules';
   import { parseDragInfo } from '@bimetal/calendar-headless';
+  import { isEditableTarget } from '@bimetal/a11y-dom';
   import {
     setCalendarContext,
     setCalendarConfig,
@@ -11,8 +12,9 @@
   } from '../binding/index.js';
   import type {
     CalendarConfig, CalendarConfigInput, CustomViewDefinition, EventDialogMode, RenderEventFn, AnchorRect,
+    CalendarController, CalendarControllerSnapshot,
   } from '../binding/index.js';
-  import { onDestroy, untrack } from 'svelte';
+  import { onMount, onDestroy, untrack } from 'svelte';
   import CalendarHeader from './CalendarHeader.svelte';
   import EventDialog from './EventDialog.svelte';
   import UndoToast from './UndoToast.svelte';
@@ -27,29 +29,41 @@
   import TimelineView from '../views/timeline/TimelineView.svelte';
 
   let {
-    store,
+    controller = undefined,
+    store = undefined,
     rules = undefined,
     config: configInput = undefined,
     darkMode = false,
+    dir = undefined,
     showCategoryFilter = false,
     showResourceFilter = false,
     customViews = undefined,
     eventDialog = { kind: 'builtin' },
     onEventClick: consumerOnEventClick = undefined,
     onNewEventRequested: consumerOnNewEventRequested = undefined,
+    onSelectionChange = undefined,
     renderEvent = undefined,
     onError = undefined,
   }: {
-    store: CalendarStore;
+    /** BOUND (composition contract, F1): an already-owned controller (host-owned).
+     *  The component only subscribes + renders — it never creates, destroys, or
+     *  reconfigures it (the host owns lifecycle, dialog mode, and delegation). */
+    controller?: CalendarController;
+    /** STANDALONE: the component creates + owns a controller from these. */
+    store?: CalendarStore;
     rules?: CalendarRule[];
     config?: CalendarConfigInput;
     darkMode?: boolean;
+    dir?: 'ltr' | 'rtl';
     showCategoryFilter?: boolean;
     showResourceFilter?: boolean;
     customViews?: readonly CustomViewDefinition[];
     eventDialog?: EventDialogMode;
     onEventClick?: (eventId: string, anchorRect: AnchorRect, instanceDate?: number) => void;
     onNewEventRequested?: (defaultDate: CalendarDateTime, anchorRect: AnchorRect, defaultResourceId?: string) => void;
+    /** OBSERVE hook: fires when the SELECTED EVENT changes (state, including clears)
+     *  — a SEPARATE concern from the `none`-mode delegation callbacks. */
+    onSelectionChange?: (selectedEvent: { eventId: string; instanceDate?: number } | null) => void;
     renderEvent?: RenderEventFn;
     /** Controller error channel: domain rejections surface as toasts; any other
      *  error (e.g. ConcurrencyError) is passed here instead of rejecting. */
@@ -59,14 +73,19 @@
   // ── Canonical controller binding ──────────────────────────────
   // The controller owns ALL interaction state and semantics. This component is
   // a thin bridge: it subscribes to the snapshot, forwards intents, and parses
-  // DOM events into DragInfo. The controller is created ONCE (under `untrack`):
-  // `store` is immutable after mount — runes + `untrack` deliberately do NOT
-  // recreate it when the `store` prop changes; remount the component (e.g. via
-  // `{#key store}`) to switch stores. config/rules/customViews/eventDialog are
-  // captured here only as the initial value and then pushed reactively via the
-  // `$effect`s below, so the initial-value reads are deliberate.
-  const binding = untrack(() => createCalendarControllerBinding({
-    store,
+  // DOM events into DragInfo.
+  //
+  // Dual-API (composition contract, F1): a passed `controller` selects the BOUND
+  // path (binding = null → subscribe only, never create/destroy/reconfigure; the
+  // host owns lifecycle + dialog mode). Otherwise STANDALONE creates + owns one.
+  // The controller is created ONCE (under `untrack`): `store` is immutable after
+  // mount — runes + `untrack` deliberately do NOT recreate it when the `store`
+  // prop changes; remount the component (e.g. via `{#key store}`) to switch
+  // stores. config/rules/customViews/eventDialog are captured here only as the
+  // initial value and then pushed reactively via the STANDALONE `$effect`s below,
+  // so the initial-value reads are deliberate.
+  const binding = untrack(() => (controller ? null : createCalendarControllerBinding({
+    store: store!,
     config: configInput,
     rules,
     customViews,
@@ -75,28 +94,42 @@
     // never go stale even though the controller is created once.
     onEventClickExternal: (id, rect, inst) => consumerOnEventClick?.(id, rect, inst),
     onNewEventRequestedExternal: (date, rect, rid) => consumerOnNewEventRequested?.(date, rect, rid),
+    // OBSERVE: fires on selection state change (separate from `none` delegation).
+    onSelectionChange: (sel) => onSelectionChange?.(sel),
     onError: (err) => onError?.(err),
-  }));
-  const ctrl = binding.ctrl;
+  })));
+  // `bound` is a mount-time decision (like the immutable `store`): captured once.
+  const bound = untrack(() => controller !== undefined);
+  const ctrl: CalendarController = controller ?? binding!.ctrl;
 
-  // `$binding` auto-subscribes via the store contract; the snapshot is
-  // identity-stable until an intent changes something.
-  const snapshot = $derived($binding);
+  // Snapshot is a `$state` refreshed on subscribe — one path for BOUND and
+  // STANDALONE alike (both `ctrl.subscribe`/`getSnapshot` off the same contract).
+  let snapshot = $state<CalendarControllerSnapshot>(untrack(() => ctrl.getSnapshot()));
+  onMount(() => {
+    snapshot = ctrl.getSnapshot();
+    return ctrl.subscribe(() => (snapshot = ctrl.getSnapshot()));
+  });
 
-  // ── Reactive option updates (config is reactive, not mount-captured) ──
-  $effect(() => { ctrl.setConfig(configInput); });
-  $effect(() => { ctrl.setRules(rules); });
-  $effect(() => { ctrl.setCustomViews(customViews); });
-  // F8: dialog mode is a dynamic prop — keep the controller in sync after mount.
-  $effect(() => { ctrl.setEventDialogKind(eventDialog.kind); });
+  // ── Reactive option updates — STANDALONE only. The bound host owns lifecycle,
+  // config, dialog mode and delegation, so the bound path reconfigures NOTHING. ──
+  if (!bound) {
+    $effect(() => { ctrl.setConfig(configInput); });
+    $effect(() => { ctrl.setRules(rules); });
+    $effect(() => { ctrl.setCustomViews(customViews); });
+    // F8: dialog mode is a dynamic prop — keep the (owned) controller in sync.
+    $effect(() => { ctrl.setEventDialogKind(eventDialog.kind); });
 
-  onDestroy(() => binding.destroy());
+    onDestroy(() => binding!.destroy());
+  }
 
   // ── v0.29 Tastatur: root-scoped keydown → controller (Ctrl/Cmd+Z undo, Escape
-  // clears selection). Bound on the `.calendar` root below (onkeydown) — NOT a window
+  // clears selection). Bound on the `.bm-cal` root below (onkeydown) — NOT a window
   // listener (no document-level routing). Semantics live in the controller. ──
   function onKey(e: KeyboardEvent) {
-    ctrl.handleKeydown(e);
+    ctrl.handleKeydown({
+      key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey,
+      isEditable: isEditableTarget(e.target), preventDefault: () => e.preventDefault(),
+    });
   }
 
   // ── DOM-event → controller-intent bindings (the only place DOM is parsed) ──
@@ -154,8 +187,8 @@
     onDragStart: ctrl.startDrag,
     onHidePreview: () => ctrl.hidePreview(),
     onDragEnd: () => ctrl.endDrag(),
-    get selectedEventId() { return snapshot.selection?.eventId ?? null; },
-    get selectedInstanceDate() { return snapshot.selection?.instanceDate; },
+    get selectedEventId() { return snapshot.selectedEvent?.eventId ?? null; },
+    get selectedInstanceDate() { return snapshot.selectedEvent?.instanceDate; },
     onSelectEvent: (eventId: string, instanceDate?: number) => ctrl.selectEvent(eventId, instanceDate),
     onClearSelection: () => ctrl.clearSelection(),
     onUndo: (entityId: string) => ctrl.undo(entityId),
@@ -167,7 +200,7 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="calendar" class:dark={darkMode} onkeydown={onKey}>
+<div class="bm-cal" data-theme={darkMode ? 'dark' : undefined} dir={dir} onkeydown={onKey}>
   <CalendarHeader
     title={snapshot.title}
     currentView={snapshot.currentView}
@@ -228,8 +261,8 @@
       config={snapshot.config}
       onNewEvent={(d, anchorRect) => ctrl.openCreate(d, anchorRect ?? new DOMRect(0, 0, 0, 0))}
       onEventClick={(eventId, anchorRect, instanceDate) => ctrl.openEdit(eventId, anchorRect, instanceDate)}
-      selectedEventId={snapshot.selection?.eventId ?? null}
-      selectedInstanceDate={snapshot.selection?.instanceDate}
+      selectedEventId={snapshot.selectedEvent?.eventId ?? null}
+      selectedInstanceDate={snapshot.selectedEvent?.instanceDate}
       onSelectEvent={(eventId, instanceDate) => ctrl.selectEvent(eventId, instanceDate)}
       onClearSelection={() => ctrl.clearSelection()}
     />

package/dist/components/Calendar.svelte.d.ts

@@ -1,18 +1,30 @@
 import type { CalendarDateTime } from '@bimetal/core';
 import type { CalendarStore } from '@bimetal/calendar-data';
 import type { CalendarRule } from '@bimetal/calendar-rules';
-import type { CalendarConfigInput, CustomViewDefinition, EventDialogMode, RenderEventFn, AnchorRect } from '../binding/index.js';
+import type { CalendarConfigInput, CustomViewDefinition, EventDialogMode, RenderEventFn, AnchorRect, CalendarController } from '../binding/index.js';
 type $$ComponentProps = {
-    store: CalendarStore;
+    /** BOUND (composition contract, F1): an already-owned controller (host-owned).
+     *  The component only subscribes + renders — it never creates, destroys, or
+     *  reconfigures it (the host owns lifecycle, dialog mode, and delegation). */
+    controller?: CalendarController;
+    /** STANDALONE: the component creates + owns a controller from these. */
+    store?: CalendarStore;
     rules?: CalendarRule[];
     config?: CalendarConfigInput;
     darkMode?: boolean;
+    dir?: 'ltr' | 'rtl';
     showCategoryFilter?: boolean;
     showResourceFilter?: boolean;
     customViews?: readonly CustomViewDefinition[];
     eventDialog?: EventDialogMode;
     onEventClick?: (eventId: string, anchorRect: AnchorRect, instanceDate?: number) => void;
     onNewEventRequested?: (defaultDate: CalendarDateTime, anchorRect: AnchorRect, defaultResourceId?: string) => void;
+    /** OBSERVE hook: fires when the SELECTED EVENT changes (state, including clears)
+     *  — a SEPARATE concern from the `none`-mode delegation callbacks. */
+    onSelectionChange?: (selectedEvent: {
+        eventId: string;
+        instanceDate?: number;
+    } | null) => void;
     renderEvent?: RenderEventFn;
     /** Controller error channel: domain rejections surface as toasts; any other
      *  error (e.g. ConcurrencyError) is passed here instead of rejecting. */

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Calendar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAO5D,OAAO,KAAK,EACQ,mBAAmB,EAAE,oBAAoB,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EACtG,MAAM,qBAAqB,CAAC;AAe9B,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxF,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClH,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B;6EACyE;IACzE,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAC;AAkMJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Calendar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Calendar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAQ5D,OAAO,KAAK,EACQ,mBAAmB,EAAE,oBAAoB,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EACrG,kBAAkB,EACnB,MAAM,qBAAqB,CAAC;AAe9B,KAAK,gBAAgB,GAAI;IACtB;;kFAE8E;IAC9E,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxF,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClH;0EACsE;IACtE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/F,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B;6EACyE;IACzE,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAC;AAyNJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/CalendarHeader.svelte

@@ -24,24 +24,24 @@
   const config = getCalendarConfig();
 </script>
 
-<div class="calendar-header">
-  <h1 class="month-title">{title}</h1>
-  <div class="header-controls">
-    <div class="view-switcher">
+<div class="bm-cal__header">
+  <h1 class="bm-cal__month-title">{title}</h1>
+  <div class="bm-cal__header-controls">
+    <div class="bm-cal__view-switcher">
       {#each viewConfigs as vc (vc.type)}
         <button
-          class="view-btn"
-          class:view-btn--active={currentView === vc.type}
+          class="bm-cal__view-btn"
+          class:bm-cal__view-btn--active={currentView === vc.type}
           onclick={() => onViewChange(vc.type)}
         >
           {vc.label}
         </button>
       {/each}
     </div>
-    <div class="nav-controls">
-      <button class="nav-btn" aria-label={config.locale.prev} onclick={onPrev}>&lsaquo;</button>
-      <button class="today-btn" onclick={onToday}>{config.locale.today}</button>
-      <button class="nav-btn" aria-label={config.locale.next} onclick={onNext}>&rsaquo;</button>
+    <div class="bm-cal__nav-controls">
+      <button class="bm-cal__nav" aria-label={config.locale.prev} onclick={onPrev}>&lsaquo;</button>
+      <button class="bm-cal__today-btn" onclick={onToday}>{config.locale.today}</button>
+      <button class="bm-cal__nav" aria-label={config.locale.next} onclick={onNext}>&rsaquo;</button>
     </div>
   </div>
 </div>

package/dist/components/CategoryFilter.svelte

@@ -13,11 +13,11 @@
 </script>
 
 {#if categories.length > 0}
-  <div class="category-filter">
+  <div class="bm-cal-category-filter">
     {#each categories as cat (cat.name)}
       {@const isHidden = hiddenCategories.has(cat.name)}
       <button
-        class="category-filter__pill{isHidden ? ' category-filter__pill--hidden' : ''}"
+        class="bm-cal-category-filter__pill{isHidden ? ' bm-cal-category-filter__pill--hidden' : ''}"
         style:background-color={cat.color}
         onclick={() => onToggle(cat.name)}
         type="button"

package/dist/components/EventBar.svelte

@@ -88,10 +88,10 @@
   const isBar = $derived(!isCompact);
   const color = $derived(event.metadata.color ?? '#007AFF');
   const isRecurring = $derived(isExpandedRecurrenceInstance(event) || !!event.recurrence);
-  const ghostClass = $derived(ghost ? ' event-bar--ghost' : '');
+  const ghostClass = $derived(ghost ? ' bm-cal__event-bar--ghost' : '');
   const instanceDate = $derived(getRecurrenceInstanceMetadata(event)?.instanceDate);
   const isSelected = $derived(ctx.selectedEventId === event.id && ctx.selectedInstanceDate === instanceDate);
-  const selectedClass = $derived(isSelected ? ' event-bar--selected' : '');
+  const selectedClass = $derived(isSelected ? ' bm-cal__event-bar--selected' : '');
 
   const gridStyle = $derived(`grid-column: ${startCol + 1} / span ${span}; grid-row: ${lane + 1};`);
   const barStyle = $derived(
@@ -118,7 +118,7 @@
 
 {#if isCompact}
   <div
-    class="event-bar event-bar--single{ghostClass}{selectedClass}{extraClass}"
+    class="bm-cal__event-bar bm-cal__event-bar--single{ghostClass}{selectedClass}{extraClass}"
     style={fullStyle}
     draggable={!ghost}
     role="button"
@@ -134,9 +134,9 @@
     {#if slots.content}
       {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
     {:else}
-      <span class="event-dot" style:background-color={color}></span>
-      <span class="event-time">{timeStr}</span>
-      <span class="event-title event-title--dark">{isRecurring ? '↻ ' : ''}{renderedTitle}</span>
+      <span class="bm-cal__event-dot" style:background-color={color}></span>
+      <span class="bm-cal__event-time">{timeStr}</span>
+      <span class="bm-cal__event-title bm-cal__event-title--dark">{isRecurring ? '↻ ' : ''}{renderedTitle}</span>
     {/if}
     {#if slots.badges}
       {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}
@@ -144,7 +144,7 @@
   </div>
 {:else}
   <div
-    class="event-bar event-bar--multi{ghostClass}{selectedClass}{extraClass}"
+    class="bm-cal__event-bar bm-cal__event-bar--multi{ghostClass}{selectedClass}{extraClass}"
     style={fullStyle}
     draggable={!ghost}
     role="button"
@@ -160,9 +160,8 @@
     {#if isBar && isStart && !ghost}
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex a11y_no_static_element_interactions -->
       <div
-        class="resize-handle resize-handle--start"
+        class="bm-cal__resize-handle bm-cal__resize-handle--start"
         role="separator"
-        aria-label="Resize start"
         draggable={true}
         ondragstart={(e) => handleResizeDragStart(e, 'start')}
         ondragend={ctx.onDragEnd}
@@ -172,7 +171,7 @@
     {#if slots.content}
       {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
     {:else}
-      <span class="event-title{eventBarWantsDarkText(color) ? ' event-title--on-light' : ''}">{isRecurring ? '↻ ' : ''}{renderedTitle}</span>
+      <span class="bm-cal__event-title{eventBarWantsDarkText(color) ? ' bm-cal__event-title--on-light' : ''}">{isRecurring ? '↻ ' : ''}{renderedTitle}</span>
     {/if}
     {#if slots.badges}
       {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}
@@ -180,9 +179,8 @@
     {#if isBar && isEnd && !ghost}
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex a11y_no_static_element_interactions -->
       <div
-        class="resize-handle resize-handle--end"
+        class="bm-cal__resize-handle bm-cal__resize-handle--end"
         role="separator"
-        aria-label="Resize end"
         draggable={true}
         ondragstart={(e) => handleResizeDragStart(e, 'end')}
         ondragend={ctx.onDragEnd}

package/dist/components/EventDialog.svelte

@@ -88,11 +88,11 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="dialog-backdrop" onclick={onClose}></div>
+<div class="bm-cal__dialog-backdrop" onclick={onClose}></div>
 <!-- svelte-ignore a11y_interactive_supports_focus -->
 <div
   bind:this={dialogEl}
-  class="event-dialog"
+  class="bm-cal__dialog"
   role="dialog"
   aria-modal="true"
   aria-label={isNew ? config.locale.newEvent : config.locale.editEvent}
@@ -107,24 +107,24 @@
     />
   {:else}
     <!-- Header -->
-    <div class="dialog-header">
-      <span class="dialog-title">
+    <div class="bm-cal__dialog-header">
+      <span class="bm-cal__dialog-title">
         {isNew ? config.locale.newEvent : config.locale.editEvent}
       </span>
-      <button class="dialog-close" aria-label={config.locale.close} onclick={onClose}>&times;</button>
+      <button class="bm-cal__dialog-close" aria-label={config.locale.close} onclick={onClose}>&times;</button>
     </div>
 
     <!-- Body -->
-    <div class="dialog-body">
+    <div class="bm-cal__dialog-body">
       <input
-        class="dialog-input dialog-input--title"
+        class="bm-cal__dialog-input bm-cal__dialog-input--title"
         type="text"
         placeholder={config.locale.titlePlaceholder}
         value={draft.title}
         oninput={(e) => setDraft({ title: (e.target as HTMLInputElement).value })}
       />
 
-      <label class="dialog-toggle">
+      <label class="bm-cal__dialog-toggle">
         <span>{config.locale.allDay}</span>
         <input
           type="checkbox"
@@ -134,9 +134,9 @@
       </label>
 
       {#if !isInstance}
-        <div class="dialog-recurrence">
-          <label class="dialog-toggle">
-            <span>Wiederholen</span>
+        <div class="bm-cal__dialog-recurrence">
+          <label class="bm-cal__dialog-toggle">
+            <span>{config.locale.recurrence}</span>
             <input
               type="checkbox"
               checked={draft.recurring}
@@ -144,22 +144,22 @@
             />
           </label>
           {#if draft.recurring}
-            <div class="dialog-row" style="gap: 8px; align-items: center;">
-              <span style="font-size: 13px;">Alle</span>
-              <input class="dialog-input" type="number" min="1" max="99" style="width: 50px;"
+            <div class="bm-cal__dialog-row" style="gap: 8px; align-items: center;">
+              <span style="font-size: 13px;">{config.locale.recurEvery}</span>
+              <input class="bm-cal__dialog-input" type="number" min="1" max="99" style="width: 50px;"
                 value={draft.recInterval}
                 oninput={(e) => setDraft({ recInterval: parseInt((e.target as HTMLInputElement).value) })} />
-              <select class="dialog-input"
+              <select class="bm-cal__dialog-input"
                 value={draft.recFreq}
                 onchange={(e) => setDraft({ recFreq: (e.target as HTMLSelectElement).value as EventDraft['recFreq'] })}>
-                <option value="daily">Tage</option>
-                <option value="weekly">Wochen</option>
-                <option value="monthly">Monate</option>
-                <option value="yearly">Jahre</option>
+                <option value="daily">{config.locale.recurUnits.daily}</option>
+                <option value="weekly">{config.locale.recurUnits.weekly}</option>
+                <option value="monthly">{config.locale.recurUnits.monthly}</option>
+                <option value="yearly">{config.locale.recurUnits.yearly}</option>
               </select>
-              <label class="dialog-label" style="flex-direction: row; align-items: center; gap: 6px;">
-                <span style="font-size: 13px;">bis</span>
-                <input class="dialog-input" type="date"
+              <label class="bm-cal__dialog-label" style="flex-direction: row; align-items: center; gap: 6px;">
+                <span style="font-size: 13px;">{config.locale.recurUntil}</span>
+                <input class="bm-cal__dialog-input" type="date"
                   value={draft.recUntil}
                   onchange={(e) => setDraft({ recUntil: (e.target as HTMLInputElement).value })} />
               </label>
@@ -170,16 +170,16 @@
 
       {#if isInstance}
         <div style="font-size: 12px; color: var(--cal-color-text-muted); padding: 4px 0;">
-          ↻ Instanz einer wiederkehrenden Serie
+          ↻ {config.locale.recurringInstanceNote}
         </div>
       {/if}
 
       <!-- Start date row -->
-      <div class="dialog-row">
-        <label class="dialog-label">
+      <div class="bm-cal__dialog-row">
+        <label class="bm-cal__dialog-label">
           <span>{config.locale.from}</span>
           <input
-            class="dialog-input"
+            class="bm-cal__dialog-input"
             type="date"
             value={draft.startDate}
             onchange={(e) => setDraft({ startDate: (e.target as HTMLInputElement).value })}
@@ -187,7 +187,7 @@
         </label>
         {#if !draft.allDay}
           <input
-            class="dialog-input dialog-input--time"
+            class="bm-cal__dialog-input bm-cal__dialog-input--time"
             type="time"
             value={draft.startTime}
             onchange={(e) => setDraft({ startTime: (e.target as HTMLInputElement).value })}
@@ -196,11 +196,11 @@
       </div>
 
       <!-- End date row -->
-      <div class="dialog-row">
-        <label class="dialog-label">
+      <div class="bm-cal__dialog-row">
+        <label class="bm-cal__dialog-label">
           <span>{config.locale.to}</span>
           <input
-            class="dialog-input"
+            class="bm-cal__dialog-input"
             type="date"
             value={draft.endDate}
             min={draft.startDate}
@@ -209,7 +209,7 @@
         </label>
         {#if !draft.allDay}
           <input
-            class="dialog-input dialog-input--time"
+            class="bm-cal__dialog-input bm-cal__dialog-input--time"
             type="time"
             value={draft.endTime}
             onchange={(e) => setDraft({ endTime: (e.target as HTMLInputElement).value })}
@@ -218,11 +218,11 @@
       </div>
 
       <!-- Category -->
-      <label class="dialog-label">
+      <label class="bm-cal__dialog-label">
         <span>{config.locale.category}</span>
-        <div class="dialog-category-row">
+        <div class="bm-cal__dialog-category-row">
           <select
-            class="dialog-input"
+            class="bm-cal__dialog-input"
             value={draft.category}
             onchange={(e) => setDraft({ category: (e.target as HTMLSelectElement).value })}
           >
@@ -230,15 +230,15 @@
               <option value={cat.name}>{cat.name}</option>
             {/each}
           </select>
-          <span class="category-dot" style:background-color={draft.color}></span>
+          <span class="bm-cal__category-dot" style:background-color={draft.color}></span>
         </div>
       </label>
 
       {#if config.resources.length > 0}
-        <label class="dialog-label">
-          <span>{config.locale.resources ?? 'Resources'}</span>
+        <label class="bm-cal__dialog-label">
+          <span>{config.locale.resources}</span>
           <select
-            class="dialog-input"
+            class="bm-cal__dialog-input"
             value={draft.resourceId}
             onchange={(e) => setDraft({ resourceId: (e.target as HTMLSelectElement).value })}
           >
@@ -251,10 +251,10 @@
       {/if}
 
       <!-- Location -->
-      <label class="dialog-label">
+      <label class="bm-cal__dialog-label">
         <span>{config.locale.location}</span>
         <input
-          class="dialog-input"
+          class="bm-cal__dialog-input"
           type="text"
           value={draft.location}
           oninput={(e) => setDraft({ location: (e.target as HTMLInputElement).value })}
@@ -262,10 +262,10 @@
       </label>
 
       <!-- Description -->
-      <label class="dialog-label">
+      <label class="bm-cal__dialog-label">
         <span>{config.locale.description}</span>
         <textarea
-          class="dialog-input dialog-input--description"
+          class="bm-cal__dialog-input bm-cal__dialog-input--description"
           value={draft.description}
           oninput={(e) => setDraft({ description: (e.target as HTMLTextAreaElement).value })}
         ></textarea>
@@ -274,33 +274,33 @@
 
     <!-- Validation errors -->
     {#if validationErrors.length > 0}
-      <div class="dialog-errors">
+      <div class="bm-cal__dialog-errors">
         {#each validationErrors as err, i (i)}
-          <div class="dialog-error">{err}</div>
+          <div class="bm-cal__dialog-error">{err}</div>
         {/each}
       </div>
     {/if}
 
     <!-- Footer -->
-    <div class="dialog-footer">
+    <div class="bm-cal__dialog-footer">
       {#if !isNew}
         {#if config.locale.delete !== false}
-          <button class="dialog-btn dialog-btn--delete" onclick={() => onDelete(event!.id)}>
+          <button class="bm-cal__dialog-btn bm-cal__dialog-btn--delete" onclick={() => onDelete(event!.id)}>
             {config.locale.delete}
           </button>
         {/if}
         {#if history.length > 0}
-          <button class="dialog-btn dialog-btn--history" onclick={() => { showHistory = true; }}>
+          <button class="bm-cal__dialog-btn bm-cal__dialog-btn--history" onclick={() => { showHistory = true; }}>
             {config.locale.history}
           </button>
         {/if}
       {/if}
-      <div class="dialog-footer-right">
-        <button class="dialog-btn dialog-btn--cancel" onclick={onClose}>
+      <div class="bm-cal__dialog-footer-right">
+        <button class="bm-cal__dialog-btn bm-cal__dialog-btn--cancel" onclick={onClose}>
           {config.locale.cancel}
         </button>
         <button
-          class="dialog-btn dialog-btn--save"
+          class="bm-cal__dialog-btn bm-cal__dialog-btn--save"
           onclick={onSave}
           disabled={!draft.title.trim()}
         >