origam 2.5.0 → 2.6.1

package/dist/src/components/Calendar/OrigamCalendar.vue

@@ -1,351 +1,365 @@
 <template>
-	<div
-			class="origam-calendar"
-			:class="rootClasses"
-			:style="rootStyles"
-			role="application"
-			:aria-label="ariaLabel"
-			data-cy="origam-calendar"
-			@keydown="onKeydown"
-	>
-		<slot
-				name="header"
-				:view="resolvedView"
-				:title="headerTitle"
-				:can-prev="canPrev"
-				:can-next="canNext"
-				:set-view="onSetView"
-				:navigate="onNavigate"
-		>
-			<div
-					class="origam-calendar__toolbar"
-					role="toolbar"
-					:aria-label="ariaToolbarLabel"
-					data-cy="origam-calendar-toolbar"
-			>
-				<div class="origam-calendar__toolbar-nav">
-					<button
-							type="button"
-							class="origam-calendar__toolbar-btn"
-							:aria-label="ariaPrevLabel"
-							:disabled="!canPrev"
-							data-cy="origam-calendar-prev"
-							@click="onNavigate('prev')"
-					>
-						&lt;
-					</button>
-					<button
-							type="button"
-							class="origam-calendar__toolbar-btn"
-							:aria-label="ariaTodayLabel"
-							data-cy="origam-calendar-today"
-							@click="onNavigate('today')"
-					>
-						{{ todayLabel }}
-					</button>
-					<button
-							type="button"
-							class="origam-calendar__toolbar-btn"
-							:aria-label="ariaNextLabel"
-							:disabled="!canNext"
-							data-cy="origam-calendar-next"
-							@click="onNavigate('next')"
-					>
-						&gt;
-					</button>
-				</div>
+  <div
+    class="origam-calendar"
+    :class="rootClasses"
+    :style="rootStyles"
+    role="application"
+    :aria-label="ariaLabel"
+    data-cy="origam-calendar"
+    @keydown="onKeydown"
+  >
+    <slot
+      name="header"
+      :view="resolvedView"
+      :title="headerTitle"
+      :can-prev="canPrev"
+      :can-next="canNext"
+      :set-view="onSetView"
+      :navigate="onNavigate"
+    >
+      <div
+        class="origam-calendar__toolbar"
+        role="toolbar"
+        :aria-label="ariaToolbarLabel"
+        data-cy="origam-calendar-toolbar"
+      >
+        <origam-btn-group
+          class="origam-calendar__toolbar-nav"
+          density="compact"
+        >
+          <origam-btn
+            variant="text"
+            size="small"
+            :text="prevGlyph"
+            :aria-label="ariaPrevLabel"
+            :disabled="!canPrev"
+            data-cy="origam-calendar-prev"
+            @click="onNavigate('prev')"
+          />
+          <origam-btn
+            variant="text"
+            size="small"
+            :text="todayLabel"
+            :aria-label="ariaTodayLabel"
+            data-cy="origam-calendar-today"
+            @click="onNavigate('today')"
+          />
+          <origam-btn
+            variant="text"
+            size="small"
+            :text="nextGlyph"
+            :aria-label="ariaNextLabel"
+            :disabled="!canNext"
+            data-cy="origam-calendar-next"
+            @click="onNavigate('next')"
+          />
+        </origam-btn-group>
 
-				<div
-						class="origam-calendar__toolbar-title"
-						data-cy="origam-calendar-title"
-				>
-					{{ headerTitle }}
-				</div>
+        <div
+          class="origam-calendar__toolbar-title"
+          data-cy="origam-calendar-title"
+        >
+          {{ headerTitle }}
+        </div>
 
-				<div
-						class="origam-calendar__toolbar-views"
-						role="tablist"
-						:aria-label="ariaViewListLabel"
-				>
-					<button
-							v-for="viewOption in VIEW_OPTIONS"
-							:key="viewOption"
-							type="button"
-							class="origam-calendar__toolbar-btn origam-calendar__toolbar-btn--view"
-							:class="{ 'origam-calendar__toolbar-btn--active': resolvedView === viewOption }"
-							role="tab"
-							:aria-selected="resolvedView === viewOption"
-							:data-cy="`origam-calendar-view-${viewOption}`"
-							@click="onSetView(viewOption)"
-					>
-						{{ viewOption }}
-					</button>
-				</div>
-			</div>
-		</slot>
+        <origam-btn-group
+          class="origam-calendar__toolbar-views"
+          density="compact"
+          :aria-label="ariaViewListLabel"
+        >
+          <origam-btn
+            v-for="viewOption in VIEW_OPTIONS"
+            :key="viewOption"
+            size="small"
+            :text="viewLabel(viewOption)"
+            :variant="viewBtnVariant(viewOption)"
+            :bg-color="viewBtnBgColor(viewOption)"
+            :active="isViewActive(viewOption)"
+            class="origam-calendar__view-btn"
+            :aria-pressed="isViewActive(viewOption)"
+            :data-cy="`origam-calendar-view-${viewOption}`"
+            @click="onSetView(viewOption)"
+          />
+        </origam-btn-group>
+      </div>
+    </slot>
 
-		<div
-				v-if="resolvedView === VIEW.MONTH"
-				class="origam-calendar__body origam-calendar__body--month"
-				data-cy="origam-calendar-body-month"
-		>
-			<div
-					class="origam-calendar__weekdays"
-					role="row"
-			>
-				<div
-						v-if="showWeekNumbers"
-						class="origam-calendar__weekday origam-calendar__week-number-head"
-						aria-hidden="true"
-				/>
-				<div
-						v-for="weekdayName in weekdayNames"
-						:key="weekdayName"
-						class="origam-calendar__weekday"
-						role="columnheader"
-				>
-					{{ weekdayName }}
-				</div>
-			</div>
-			<div
-					class="origam-calendar__month-grid"
-					role="grid"
-					:aria-label="ariaMonthLabel"
-			>
-				<div
-						v-for="(weekRow, rowIndex) in monthGrid"
-						:key="rowIndex"
-						class="origam-calendar__month-row"
-						role="row"
-				>
-					<div
-							v-if="showWeekNumbers"
-							class="origam-calendar__week-number"
-							role="rowheader"
-							:aria-label="ariaWeekNumberLabel(weekRow[0])"
-					>
-						{{ weekNumberOf(weekRow[0]) }}
-					</div>
-					<div
-							v-for="dayCell in weekRow"
-							:key="dayCell.toISOString()"
-							class="origam-calendar__day-cell"
-							:class="dayCellClasses(dayCell)"
-							role="gridcell"
-							tabindex="0"
-							:aria-label="ariaDayLabel(dayCell)"
-							:aria-selected="isInDragSelection(dayCell)"
-							:aria-disabled="isDayDisabled(dayCell)"
-							:data-cy="`origam-calendar-day-${dayCellKey(dayCell)}`"
-							@click="onDayClick(dayCell, $event)"
-							@mousedown="onCellMouseDown(dayCell, $event)"
-							@mouseenter="onCellMouseEnter(dayCell)"
-					>
-						<slot
-								name="day"
-								:date="dayCell"
-								:events="eventsOnDay(dayCell)"
-								:is-today="isCellToday(dayCell)"
-								:is-past="isCellPast(dayCell)"
-								:is-outside="isOutsideMonth(dayCell)"
-								:is-weekend="isCellWeekend(dayCell)"
-								:is-disabled="isDayDisabled(dayCell)"
-						>
-							<div class="origam-calendar__day-number">{{ dayCell.getDate() }}</div>
-							<div class="origam-calendar__day-events">
-								<button
-										v-for="event in dayEventsCapped(dayCell)"
-										:key="`${event.id}-${dayCellKey(dayCell)}`"
-										type="button"
-										class="origam-calendar__event"
-										:style="eventStyle(event)"
-										role="button"
-										:aria-label="ariaEventLabel(event)"
-										:data-cy="`origam-calendar-event-${event.id}`"
-										@click.stop="onEventClick(event, $event)"
-								>
-									<slot
-											name="event"
-											:event="event"
-											:view="resolvedView"
-											:is-past="isEventPast(event)"
-											:is-today="isEventToday(event)"
-									>
-										<span class="origam-calendar__event-title">{{ event.title }}</span>
-									</slot>
-								</button>
-								<div
-										v-if="eventsOnDay(dayCell).length > MONTH_EVENT_LIMIT"
-										class="origam-calendar__day-more"
-										:data-cy="`origam-calendar-more-${dayCellKey(dayCell)}`"
-								>
-									+{{ eventsOnDay(dayCell).length - MONTH_EVENT_LIMIT }}
-								</div>
-							</div>
-						</slot>
-					</div>
-				</div>
-			</div>
-		</div>
+    <div
+      v-if="resolvedView === VIEW.MONTH"
+      class="origam-calendar__body origam-calendar__body--month"
+      data-cy="origam-calendar-body-month"
+    >
+      <div
+        class="origam-calendar__weekdays"
+        role="row"
+      >
+        <div
+          v-if="showWeekNumbers"
+          class="origam-calendar__weekday origam-calendar__week-number-head"
+          aria-hidden="true"
+        />
+        <div
+          v-for="weekdayName in weekdayNames"
+          :key="weekdayName"
+          class="origam-calendar__weekday"
+          role="columnheader"
+        >
+          {{ weekdayName }}
+        </div>
+      </div>
+      <div
+        class="origam-calendar__month-grid"
+        role="grid"
+        :aria-label="ariaMonthLabel"
+      >
+        <div
+          v-for="(weekRow, rowIndex) in monthGrid"
+          :key="rowIndex"
+          class="origam-calendar__month-row"
+          role="row"
+        >
+          <div
+            v-if="showWeekNumbers"
+            class="origam-calendar__week-number"
+            role="rowheader"
+            :aria-label="ariaWeekNumberLabel(weekRow[0])"
+          >
+            {{ weekNumberOf(weekRow[0]) }}
+          </div>
+          <div
+            v-for="dayCell in weekRow"
+            :key="dayCell.toISOString()"
+            class="origam-calendar__day-cell"
+            :class="dayCellClasses(dayCell)"
+            role="gridcell"
+            tabindex="0"
+            :aria-label="ariaDayLabel(dayCell)"
+            :aria-selected="isInDragSelection(dayCell)"
+            :aria-disabled="isDayDisabled(dayCell)"
+            :data-cy="`origam-calendar-day-${dayCellKey(dayCell)}`"
+            @click="onDayClick(dayCell, $event)"
+            @mousedown="onCellMouseDown(dayCell, $event)"
+            @mouseenter="onCellMouseEnter(dayCell)"
+          >
+            <slot
+              name="day"
+              :date="dayCell"
+              :events="eventsOnDay(dayCell)"
+              :is-today="isCellToday(dayCell)"
+              :is-past="isCellPast(dayCell)"
+              :is-outside="isOutsideMonth(dayCell)"
+              :is-weekend="isCellWeekend(dayCell)"
+              :is-disabled="isDayDisabled(dayCell)"
+            >
+              <div class="origam-calendar__day-number">{{ dayCell.getDate() }}</div>
+              <div class="origam-calendar__day-events">
+                <button
+                  v-for="event in dayEventsCapped(dayCell)"
+                  :key="`${event.id}-${dayCellKey(dayCell)}`"
+                  type="button"
+                  class="origam-calendar__event"
+                  :style="eventStyle(event)"
+                  :aria-label="ariaEventLabel(event)"
+                  :data-cy="`origam-calendar-event-${event.id}`"
+                  @click.stop="onEventClick(event, $event)"
+                >
+                  <slot
+                    name="event"
+                    :event="event"
+                    :view="resolvedView"
+                    :is-past="isEventPast(event)"
+                    :is-today="isEventToday(event)"
+                  >
+                    <span class="origam-calendar__event-title">{{ event.title }}</span>
+                  </slot>
+                </button>
+                <div
+                  v-if="eventsOnDay(dayCell).length > MONTH_EVENT_LIMIT"
+                  class="origam-calendar__day-more"
+                  :data-cy="`origam-calendar-more-${dayCellKey(dayCell)}`"
+                >
+                  +{{ eventsOnDay(dayCell).length - MONTH_EVENT_LIMIT }}
+                </div>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
 
-		<div
-				v-else-if="resolvedView === VIEW.WEEK || resolvedView === VIEW.DAY"
-				class="origam-calendar__body"
-				:class="{
+    <div
+      v-else-if="resolvedView === VIEW.WEEK || resolvedView === VIEW.DAY"
+      class="origam-calendar__body"
+      :class="{
 					'origam-calendar__body--week': resolvedView === VIEW.WEEK,
 					'origam-calendar__body--day': resolvedView === VIEW.DAY
 				}"
-				:data-cy="`origam-calendar-body-${resolvedView}`"
-		>
-			<div class="origam-calendar__timeline">
-				<div class="origam-calendar__timeline-hours">
-					<div
-							v-for="(hourLabel, hourIndex) in hourLabels"
-							:key="hourIndex"
-							class="origam-calendar__hour-label"
-							:style="{ height: `${slotPx * 60 / slotDuration}px` }"
-					>
-						{{ hourLabel }}
-					</div>
-				</div>
-				<div class="origam-calendar__timeline-grid">
-					<div
-							v-for="day in timelineDays"
-							:key="day.toISOString()"
-							class="origam-calendar__timeline-day"
-							:class="{
+      :data-cy="`origam-calendar-body-${resolvedView}`"
+    >
+      <div class="origam-calendar__timeline">
+        <div class="origam-calendar__timeline-hours">
+          <div
+            v-for="(hourLabel, hourIndex) in hourLabels"
+            :key="hourIndex"
+            class="origam-calendar__hour-label"
+            :style="{ height: `${slotPx * 60 / slotDuration}px` }"
+          >
+            {{ hourLabel }}
+          </div>
+        </div>
+        <div class="origam-calendar__timeline-grid">
+          <div
+            v-for="day in timelineDays"
+            :key="day.toISOString()"
+            class="origam-calendar__timeline-day"
+            :class="{
 								'origam-calendar__timeline-day--today': isCellToday(day),
 								'origam-calendar__timeline-day--weekend': isCellWeekend(day) && weekendHighlight
 							}"
-							role="gridcell"
-							:aria-label="ariaDayLabel(day)"
-							:data-cy="`origam-calendar-timeline-day-${dayCellKey(day)}`"
-					>
-						<div
-								v-if="resolvedView === VIEW.WEEK"
-								class="origam-calendar__day-header"
-						>
-							<slot
-									name="dayHeader"
-									:date="day"
-							>
+            role="gridcell"
+            :aria-label="ariaDayLabel(day)"
+            :data-cy="`origam-calendar-timeline-day-${dayCellKey(day)}`"
+          >
+            <div
+              v-if="resolvedView === VIEW.WEEK"
+              class="origam-calendar__day-header"
+            >
+              <slot
+                name="dayHeader"
+                :date="day"
+              >
 								<span class="origam-calendar__day-header-weekday">
 									{{ weekdayShort(day) }}
 								</span>
-								<span class="origam-calendar__day-header-number">
+                <span class="origam-calendar__day-header-number">
 									{{ day.getDate() }}
 								</span>
-							</slot>
-						</div>
-						<div
-								class="origam-calendar__timeline-slots"
-								:style="{ height: `${(dayEndHour - dayStartHour) * 60 / slotDuration * slotPx}px` }"
-								@mousedown="onSlotMouseDown(day, $event)"
-								@mousemove="onSlotMouseMove(day, $event)"
-								@mouseup="onSlotMouseUp(day, $event)"
-								@click="onSlotClick(day, $event)"
-						>
-							<div
-									v-for="(slot, slotIndex) in dayGridFor(day)"
-									:key="slotIndex"
-									class="origam-calendar__timeline-slot"
-									:class="{ 'origam-calendar__timeline-slot--hour': slot.isHourMark }"
-									:style="{ height: `${slotPx}px` }"
-									:data-slot-index="slotIndex"
-							/>
-							<div
-									v-for="event in eventsOnTimeline(day)"
-									:key="`${event.id}-${day.toISOString()}`"
-									class="origam-calendar__event origam-calendar__event--timeline"
-									:style="timelineEventStyle(event, day)"
-									role="button"
-									tabindex="0"
-									:aria-label="ariaEventLabel(event)"
-									:data-cy="`origam-calendar-event-${event.id}`"
-									@click="onEventClick(event, $event)"
-									@mousedown.stop
-							>
-								<slot
-										name="event"
-										:event="event"
-										:view="resolvedView"
-										:is-past="isEventPast(event)"
-										:is-today="isEventToday(event)"
-								>
-									<span class="origam-calendar__event-title">{{ event.title }}</span>
-									<span class="origam-calendar__event-time">{{ eventTimeLabel(event) }}</span>
-								</slot>
-							</div>
-							<div
-									v-if="dragSelection && isSameDayLocal(dragSelection.day, day)"
-									class="origam-calendar__range-overlay"
-									:style="dragOverlayStyle"
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+              </slot>
+            </div>
+            <div
+              class="origam-calendar__timeline-slots"
+              :style="{ height: `${(dayEndHour - dayStartHour) * 60 / slotDuration * slotPx}px` }"
+              @mousedown="onSlotMouseDown(day, $event)"
+              @mousemove="onSlotMouseMove(day, $event)"
+              @mouseup="onSlotMouseUp(day, $event)"
+              @click="onSlotClick(day, $event)"
+            >
+              <div
+                v-for="(slot, slotIndex) in dayGridFor(day)"
+                :key="slotIndex"
+                class="origam-calendar__timeline-slot"
+                :class="{ 'origam-calendar__timeline-slot--hour': slot.isHourMark }"
+                :style="{ height: `${slotPx}px` }"
+                :data-slot-index="slotIndex"
+              />
+              <button
+                v-for="event in eventsOnTimeline(day)"
+                :key="`${event.id}-${day.toISOString()}`"
+                type="button"
+                class="origam-calendar__event origam-calendar__event--timeline"
+                :style="timelineEventStyle(event, day)"
+                :aria-label="ariaEventLabel(event)"
+                :data-cy="`origam-calendar-event-${event.id}`"
+                @click="onEventClick(event, $event)"
+                @mousedown.stop
+              >
+                <slot
+                  name="event"
+                  :event="event"
+                  :view="resolvedView"
+                  :is-past="isEventPast(event)"
+                  :is-today="isEventToday(event)"
+                >
+                  <span class="origam-calendar__event-title">{{ event.title }}</span>
+                  <span class="origam-calendar__event-time">{{ eventTimeLabel(event) }}</span>
+                </slot>
+              </button>
+              <div
+                v-if="dragSelection && isSameDayLocal(dragSelection.day, day)"
+                class="origam-calendar__range-overlay"
+                :style="dragOverlayStyle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-		<div
-				v-else
-				class="origam-calendar__body origam-calendar__body--agenda"
-				data-cy="origam-calendar-body-agenda"
-		>
-			<template v-if="agendaEntries.length > 0">
-				<div
-						v-for="entry in agendaEntries"
-						:key="entry.date.toISOString()"
-						class="origam-calendar__agenda-day"
-				>
-					<div class="origam-calendar__agenda-day-header">
-						{{ agendaDayHeader(entry.date) }}
-					</div>
-					<button
-							v-for="event in entry.events"
-							:key="event.id"
-							type="button"
-							class="origam-calendar__agenda-event"
-							:style="eventStyle(event)"
-							:aria-label="ariaEventLabel(event)"
-							:data-cy="`origam-calendar-event-${event.id}`"
-							@click="onEventClick(event, $event)"
-					>
-						<slot
-								name="event"
-								:event="event"
-								:view="resolvedView"
-								:is-past="isEventPast(event)"
-								:is-today="isEventToday(event)"
-						>
-							<span class="origam-calendar__event-time">{{ eventTimeLabel(event) }}</span>
-							<span class="origam-calendar__event-title">{{ event.title }}</span>
-						</slot>
-					</button>
-				</div>
-			</template>
-			<div
-					v-else
-					class="origam-calendar__agenda-empty"
-					data-cy="origam-calendar-agenda-empty"
-			>
-				<slot
-						name="empty"
-						:view="resolvedView"
-				>
-					{{ emptyLabel }}
-				</slot>
-			</div>
-		</div>
-	</div>
+    <div
+      v-else
+      class="origam-calendar__body origam-calendar__body--agenda"
+      data-cy="origam-calendar-body-agenda"
+    >
+      <template v-if="agendaEntries.length > 0">
+        <div
+          v-for="entry in agendaEntries"
+          :key="entry.date.toISOString()"
+          class="origam-calendar__agenda-day"
+        >
+          <div class="origam-calendar__agenda-day-header">
+            {{ agendaDayHeader(entry.date) }}
+          </div>
+          <button
+            v-for="event in entry.events"
+            :key="event.id"
+            type="button"
+            class="origam-calendar__agenda-event"
+            :style="eventStyle(event)"
+            :aria-label="ariaEventLabel(event)"
+            :data-cy="`origam-calendar-event-${event.id}`"
+            @click="onEventClick(event, $event)"
+          >
+            <slot
+              name="event"
+              :event="event"
+              :view="resolvedView"
+              :is-past="isEventPast(event)"
+              :is-today="isEventToday(event)"
+            >
+              <span class="origam-calendar__event-time">{{ eventTimeLabel(event) }}</span>
+              <span class="origam-calendar__event-title">{{ event.title }}</span>
+            </slot>
+          </button>
+        </div>
+      </template>
+      <div
+        v-else
+        class="origam-calendar__agenda-empty"
+        data-cy="origam-calendar-agenda-empty"
+      >
+        <slot
+          name="empty"
+          :view="resolvedView"
+        >
+          {{ emptyLabel }}
+        </slot>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
-  ref
+  ref,
+  watch
 } from "vue";
-import { useCalendar } from "../../composables";
+import { OrigamBtn, OrigamBtnGroup } from "../../components";
+import {
+  useCalendar,
+  useDensity,
+  useDimension,
+  useLocale,
+  useStateEffect
+} from "../../composables";
+import {
+  getForeground,
+  isCssColor,
+  isIntent,
+  parseColor,
+  tokenForegroundForIntent,
+  tokenStylesForIntent
+} from "../../utils/Commons/color.util";
 import {
   buildDisabledPredicate,
   formatDate,
@@ -381,7 +395,45 @@ const props = defineProps({
   disabledDates: { type: [Array, Function], required: false, default: void 0 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  density: { type: null, required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false }
 });
 const emit = defineEmits(["update:view", "update:currentDate", "event-click", "date-click", "range-select", "create-event-request", "view-change", "navigate"]);
 const VIEW = {
@@ -393,26 +445,42 @@ const VIEW = {
 const VIEW_OPTIONS = [VIEW.MONTH, VIEW.WEEK, VIEW.DAY, VIEW.AGENDA];
 const MONTH_EVENT_LIMIT = 3;
 const DEFAULT_SLOT_HEIGHT_PX = 32;
-const ariaLabel = computed(() => "Calendar");
-const ariaToolbarLabel = computed(() => "Calendar toolbar");
-const ariaPrevLabel = computed(() => "Previous");
-const ariaNextLabel = computed(() => "Next");
-const ariaTodayLabel = computed(() => "Today");
-const ariaViewListLabel = computed(() => "View");
-const ariaMonthLabel = computed(() => "Month grid");
-const todayLabel = computed(() => "Today");
-const emptyLabel = computed(() => "No events to display");
+const { t } = useLocale();
+const VIEW_LABEL_FALLBACK = {
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  agenda: "Agenda"
+};
+function viewLabel(view) {
+  return t(`origam.calendar.view.${view}`, VIEW_LABEL_FALLBACK[view]);
+}
+const ariaLabel = computed(() => t("origam.calendar.ariaLabel", "Calendar"));
+const ariaToolbarLabel = computed(() => t("origam.calendar.toolbar", "Calendar toolbar"));
+const ariaPrevLabel = computed(() => t("origam.calendar.previous", "Previous"));
+const ariaNextLabel = computed(() => t("origam.calendar.next", "Next"));
+const ariaTodayLabel = computed(() => t("origam.calendar.today", "Today"));
+const ariaViewListLabel = computed(() => t("origam.calendar.viewSwitcher", "View"));
+const ariaMonthLabel = computed(() => t("origam.calendar.monthGrid", "Month grid"));
+const todayLabel = computed(() => t("origam.calendar.today", "Today"));
+const emptyLabel = computed(() => t("origam.calendar.empty", "No events to display"));
 const slotPx = DEFAULT_SLOT_HEIGHT_PX;
 const slotDuration = computed(() => props.slotDuration);
 const dayStartHour = computed(() => props.dayStartHour);
 const dayEndHour = computed(() => props.dayEndHour);
 const showWeekNumbers = computed(() => props.showWeekNumbers);
 const weekendHighlight = computed(() => props.weekendHighlight);
-const resolvedView = computed(() => props.view ?? "month");
-const resolvedDate = computed(() => {
-  const d = toDate(props.currentDate);
-  return d ?? /* @__PURE__ */ new Date();
+const internalView = ref(props.view ?? "month");
+const internalDate = ref(toDate(props.currentDate) ?? /* @__PURE__ */ new Date());
+watch(() => props.view, (next) => {
+  if (next != null) internalView.value = next;
+});
+watch(() => props.currentDate, (next) => {
+  const parsed = toDate(next);
+  if (parsed) internalDate.value = parsed;
 });
+const resolvedView = computed(() => internalView.value);
+const resolvedDate = computed(() => internalDate.value);
 const resolvedLocale = computed(() => {
   if (props.locale) return props.locale;
   if (typeof document !== "undefined" && document.documentElement.lang) {
@@ -439,10 +507,12 @@ const calendar = useCalendar(
     locale: () => resolvedLocale.value
   },
   (next) => {
+    internalView.value = next;
     emit("update:view", next);
     emit("view-change", next);
   },
   (next) => {
+    internalDate.value = next;
     emit("update:currentDate", next);
   }
 );
@@ -453,6 +523,24 @@ function onNavigate(direction) {
   calendar.navigate(direction);
   emit("navigate", direction);
 }
+const prevGlyph = "\u2039";
+const nextGlyph = "\u203A";
+function isViewActive(view) {
+  return resolvedView.value === view;
+}
+function viewBtnVariant(view) {
+  return isViewActive(view) ? "flat" : "text";
+}
+const toolbarIntent = computed(() => {
+  const bg = props.bgColor;
+  if (bg && isIntent(bg)) return bg;
+  const fg = props.color;
+  if (fg && isIntent(fg)) return fg;
+  return "primary";
+});
+function viewBtnBgColor(view) {
+  return isViewActive(view) ? toolbarIntent.value : void 0;
+}
 const headerTitle = computed(() => {
   const date = resolvedDate.value;
   const locale = resolvedLocale.value;
@@ -790,17 +878,85 @@ function onKeydown(event) {
   }
   if (next) {
     event.preventDefault();
+    internalDate.value = next;
     emit("update:currentDate", next);
   }
 }
+const {
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  elevationStyles,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props);
+const { dimensionStyles } = useDimension(props);
+const { densityClasses } = useDensity(props, "origam-calendar");
+const borderColorStyle = computed(() => {
+  const value = props.borderColor;
+  return value && isIntent(value) ? [`border-color: ${tokenForegroundForIntent(value)}`] : [];
+});
+const surfaceVars = computed(() => {
+  const vars = {};
+  const bg = props.bgColor;
+  const fg = props.color;
+  const bgIntent = Boolean(bg) && isIntent(bg);
+  const bgCss = Boolean(bg) && typeof bg === "string" && isCssColor(bg);
+  const fgIntent = Boolean(fg) && isIntent(fg);
+  const fgCss = Boolean(fg) && typeof fg === "string" && isCssColor(fg);
+  if (bgIntent) {
+    vars["--origam-calendar__toolbar---background-color"] = tokenStylesForIntent(bg, "default")["background-color"];
+  } else if (bgCss) {
+    vars["--origam-calendar__toolbar---background-color"] = bg;
+  }
+  let headerFg;
+  if (bgIntent) {
+    headerFg = tokenStylesForIntent(bg, "default").color;
+  } else if (bgCss) {
+    headerFg = getForeground(parseColor(bg));
+  } else if (fgIntent) {
+    headerFg = tokenForegroundForIntent(fg);
+  } else if (fgCss) {
+    headerFg = fg;
+  }
+  if (headerFg) vars["--origam-calendar__toolbar---color"] = headerFg;
+  let bodyFg;
+  if (fgIntent) bodyFg = tokenForegroundForIntent(fg);
+  else if (fgCss) bodyFg = fg;
+  if (bodyFg) {
+    vars["--origam-calendar__day-cell---color"] = bodyFg;
+    vars["--origam-calendar__weekday---color"] = bodyFg;
+  }
+  return vars;
+});
 const rootClasses = computed(() => [
   `origam-calendar--${resolvedView.value}`,
   {
     "origam-calendar--week-numbers": showWeekNumbers.value
   },
+  borderClasses.value,
+  roundedClasses.value,
+  elevationClasses.value,
+  paddingClasses.value,
+  marginClasses.value,
+  densityClasses.value,
   props.class
 ]);
-const rootStyles = computed(() => [props.style]);
+const rootStyles = computed(() => [
+  surfaceVars.value,
+  borderStyles.value,
+  borderColorStyle.value,
+  roundedStyles.value,
+  elevationStyles.value,
+  paddingStyles.value,
+  marginStyles.value,
+  dimensionStyles.value,
+  props.style
+]);
 defineExpose({
   visibleDateRange: calendar.visibleDateRange,
   expandedEvents: calendar.expandedEvents,
@@ -810,366 +966,337 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-	.origam-calendar {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		background-color: var(--origam-calendar---background-color, #ffffff);
-		color: var(--origam-calendar---color, inherit);
-		border: var(--origam-calendar---border-width, 1px) solid var(--origam-calendar---border-color, #e5e7eb);
-		border-radius: var(--origam-calendar---border-radius, 8px);
-		overflow: hidden;
-	}
-
-	.origam-calendar__toolbar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--origam-calendar__toolbar---gap, 8px);
-		padding: var(--origam-calendar__toolbar---padding, 12px);
-		background-color: var(--origam-calendar__toolbar---background-color, transparent);
-		border-bottom: 1px solid var(--origam-calendar__toolbar---border-color, #e5e7eb);
-	}
-
-	.origam-calendar__toolbar-nav,
-	.origam-calendar__toolbar-views {
-		display: inline-flex;
-		gap: 4px;
-	}
-
-	.origam-calendar__toolbar-title {
-		flex: 1 1 auto;
-		text-align: center;
-		color: var(--origam-calendar__toolbar---title-color, inherit);
-		font-size: var(--origam-calendar__toolbar---title-font-size, 1rem);
-		font-weight: var(--origam-calendar__toolbar---title-font-weight, 600);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.origam-calendar__toolbar-btn {
-		all: unset;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 32px;
-		min-height: 32px;
-		padding: 0 8px;
-		text-transform: capitalize;
-		border-radius: 4px;
-		cursor: pointer;
-		font: inherit;
-		color: inherit;
-		transition: background-color 120ms ease, color 120ms ease;
-	}
+  .origam-calendar {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: var(--origam-calendar---background-color, #ffffff);
+    color: var(--origam-calendar---color, inherit);
+    border: var(--origam-calendar---border-width, 1px) solid var(--origam-calendar---border-color, #e5e7eb);
+    border-radius: var(--origam-calendar---border-radius, 8px);
+    overflow: hidden;
+  }
 
-	.origam-calendar__toolbar-btn:hover:not(:disabled),
-	.origam-calendar__toolbar-btn:focus-visible {
-		background-color: var(--origam-calendar__day-cell---bg-color-hover, rgba(0, 0, 0, 0.06));
-	}
+  .origam-calendar--density-compact {
+    --origam-calendar__toolbar---padding: 8px;
+    --origam-calendar__day-cell---height: 72px;
+    --origam-calendar__day-cell---padding: 4px;
+  }
 
-	.origam-calendar__toolbar-btn:disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
+  .origam-calendar--density-comfortable {
+    --origam-calendar__toolbar---padding: 16px;
+    --origam-calendar__day-cell---height: 120px;
+    --origam-calendar__day-cell---padding: 10px;
+  }
 
-	/*
-	 * Active toolbar button (selected view: Month / Week / Day / Agenda).
-	 * Previously fell back to `currentColor` for bg + `#ffffff` for fg —
-	 * when the calendar lived on a light surface with white-ish
-	 * `currentColor` (e.g. tinted via a wrapper, or the unset token
-	 * resolved to a near-white value), the active btn rendered as
-	 * white-on-white and the user lost the selected view indicator.
-	 *
-	 * Use the DS primary intent pair (`action.primary.bg` + matching
-	 * `.fg`) so the selected view is unambiguously highlighted on any
-	 * surface, light or dark, with WCAG-validated contrast.
-	 */
-	.origam-calendar__toolbar-btn--active {
-		background-color: var(--origam-calendar__toolbar-btn--active---background-color, var(--origam-color__action--primary---bg));
-		color: var(--origam-calendar__toolbar-btn--active---color, var(--origam-color__action--primary---fg));
-	}
+  .origam-calendar__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--origam-calendar__toolbar---gap, 8px);
+    padding: var(--origam-calendar__toolbar---padding, 12px);
+    color: var(--origam-calendar__toolbar---color, inherit);
+    background-color: var(--origam-calendar__toolbar---background-color, transparent);
+    border-bottom: 1px solid var(--origam-calendar__toolbar---border-color, #e5e7eb);
+    --origam-btn---color: var(--origam-calendar__toolbar---color, inherit);
+    --origam-color__overlay---scrim: currentColor;
+    --origam-btn---overlay-opacity-hover: 0.16;
+  }
 
-	.origam-calendar__toolbar-btn--active:hover:not(:disabled),
-	.origam-calendar__toolbar-btn--active:focus-visible {
-		background-color: var(--origam-calendar__toolbar-btn--active---background-color-hover, color-mix(in srgb, var(--origam-color__action--primary---bg) 88%, black));
-	}
+  .origam-calendar__toolbar-title {
+    flex: 0 1 auto;
+    min-width: 0;
+    text-align: center;
+    color: var(--origam-calendar__toolbar---title-color, inherit);
+    font-size: var(--origam-calendar__toolbar---title-font-size, 1rem);
+    font-weight: var(--origam-calendar__toolbar---title-font-weight, 600);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-	.origam-calendar__body {
-		flex: 1 1 auto;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-	}
+  .origam-calendar__body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
 
-	.origam-calendar__weekdays {
-		display: grid;
-		grid-template-columns: var(--origam-calendar__week-number---grid-template-columns, repeat(7, minmax(0, 1fr)));
-	}
+  .origam-calendar__weekdays {
+    display: grid;
+    grid-template-columns: var(--origam-calendar__week-number---grid-template-columns, repeat(7, minmax(0, 1fr)));
+  }
 
-	.origam-calendar--week-numbers .origam-calendar__weekdays,
-	.origam-calendar--week-numbers .origam-calendar__month-row {
-		grid-template-columns: var(--origam-calendar__week-number---width, 32px) repeat(7, minmax(0, 1fr));
-	}
+  .origam-calendar--week-numbers .origam-calendar__weekdays,
+  .origam-calendar--week-numbers .origam-calendar__month-row {
+    grid-template-columns: var(--origam-calendar__week-number---width, 32px) repeat(7, minmax(0, 1fr));
+  }
 
-	.origam-calendar__weekday {
-		padding: 8px;
-		text-align: center;
-		font-size: 0.75rem;
-		text-transform: uppercase;
-		color: var(--origam-calendar__day-cell---color-muted, #6b7280);
-	}
+  .origam-calendar__weekday {
+    padding: 8px;
+    text-align: center;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: var(--origam-calendar__weekday---color, var(--origam-calendar__day-cell---color-muted, #6b7280));
+  }
 
-	.origam-calendar__week-number {
-		padding: 8px 4px;
-		font-size: var(--origam-calendar__week-number---font-size, 0.75rem);
-		color: var(--origam-calendar__week-number---color, #6b7280);
-		text-align: center;
-		align-self: center;
-	}
+  .origam-calendar__week-number {
+    padding: 8px 4px;
+    font-size: var(--origam-calendar__week-number---font-size, 0.75rem);
+    color: var(--origam-calendar__week-number---color, #6b7280);
+    text-align: center;
+    align-self: center;
+  }
 
-	.origam-calendar__week-number-head {
-		min-width: var(--origam-calendar__week-number---width, 32px);
-	}
+  .origam-calendar__week-number-head {
+    min-width: var(--origam-calendar__week-number---width, 32px);
+  }
 
-	.origam-calendar__month-grid {
-		display: flex;
-		flex-direction: column;
-		flex: 1 1 auto;
-	}
+  .origam-calendar__month-grid {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+  }
 
-	.origam-calendar__month-row {
-		display: grid;
-		grid-template-columns: repeat(7, minmax(0, 1fr));
-		flex: 1 1 auto;
-	}
+  .origam-calendar__month-row {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    flex: 1 1 auto;
+  }
 
-	.origam-calendar__day-cell {
-		min-height: var(--origam-calendar__day-cell---height, 96px);
-		padding: var(--origam-calendar__day-cell---padding, 6px);
-		border-top: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
-		border-left: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
-		background-color: var(--origam-calendar---background-color, #ffffff);
-		color: var(--origam-calendar__day-cell---color, inherit);
-		cursor: pointer;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		user-select: none;
-	}
+  .origam-calendar__day-cell {
+    min-height: var(--origam-calendar__day-cell---height, 96px);
+    padding: var(--origam-calendar__day-cell---padding, 6px);
+    border-top: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+    border-left: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+    background-color: var(--origam-calendar---background-color, #ffffff);
+    color: var(--origam-calendar__day-cell---color, inherit);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    user-select: none;
+  }
 
-	.origam-calendar__day-cell:focus-visible {
-		outline: 2px solid var(--origam-calendar__range-select---border-color, currentColor);
-		outline-offset: -2px;
-	}
+  .origam-calendar__day-cell:focus-visible {
+    outline: 2px solid var(--origam-calendar__range-select---border-color, currentColor);
+    outline-offset: -2px;
+  }
 
-	.origam-calendar__day-cell--today {
-		background-color: var(--origam-calendar__day-cell---bg-color-today, rgba(59, 130, 246, 0.08));
-	}
+  .origam-calendar__day-cell--today {
+    background-image: linear-gradient(
+        0deg,
+        var(--origam-calendar__day-cell---bg-color-today, rgba(59, 130, 246, 0.08)),
+        var(--origam-calendar__day-cell---bg-color-today, rgba(59, 130, 246, 0.08))
+    );
+  }
 
-	.origam-calendar__day-cell--outside {
-		background-color: var(--origam-calendar__day-cell---bg-color-outside, #f9fafb);
-		color: var(--origam-calendar__day-cell---color-muted, #9ca3af);
-	}
+  .origam-calendar__day-cell--outside {
+    background-color: var(--origam-calendar__day-cell---bg-color-outside, #f9fafb);
+    color: var(--origam-calendar__day-cell---color-muted, #9ca3af);
+  }
 
-	.origam-calendar__day-cell--weekend {
-		background-color: var(--origam-calendar__day-cell---bg-color-weekend, #f9fafb);
-	}
+  .origam-calendar__day-cell--weekend {
+    background-color: var(--origam-calendar__day-cell---bg-color-weekend, #f9fafb);
+  }
 
-	.origam-calendar__day-cell--disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-		color: var(--origam-calendar__day-cell---color-disabled, #d1d5db);
-	}
+  .origam-calendar__day-cell--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    color: var(--origam-calendar__day-cell---color-disabled, #d1d5db);
+  }
 
-	.origam-calendar__day-cell--selected {
-		background-color: var(--origam-calendar__range-select---bg-color, rgba(59, 130, 246, 0.12));
-	}
+  .origam-calendar__day-cell--selected {
+    background-image: linear-gradient(
+        0deg,
+        var(--origam-calendar__range-select---bg-color, rgba(59, 130, 246, 0.12)),
+        var(--origam-calendar__range-select---bg-color, rgba(59, 130, 246, 0.12))
+    );
+  }
 
-	.origam-calendar__day-number {
-		font-size: 0.875rem;
-		font-weight: 500;
-	}
+  .origam-calendar__day-number {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
 
-	.origam-calendar__day-events {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
+  .origam-calendar__day-events {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
 
-	.origam-calendar__event {
-		all: unset;
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: var(--origam-calendar__event---padding, 2px 4px);
-		font-size: var(--origam-calendar__event---font-size, 0.75rem);
-		border-radius: var(--origam-calendar__event---border-radius, 4px);
-		background-color: var(--origam-calendar__event---bg-color-default, #3b82f6);
-		color: var(--origam-calendar__event---color-default, #ffffff);
-		cursor: pointer;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
+  .origam-calendar__event {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: var(--origam-calendar__event---padding, 2px 4px);
+    font-size: var(--origam-calendar__event---font-size, 0.75rem);
+    border-radius: var(--origam-calendar__event---border-radius, 4px);
+    background-color: var(--origam-calendar__event---bg-color-default, #3b82f6);
+    color: var(--origam-calendar__event---color-default, #ffffff);
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-	.origam-calendar__event-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1 1 auto;
-	}
+  .origam-calendar__event-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1 1 auto;
+  }
 
-	.origam-calendar__event-time {
-		opacity: 0.85;
-		font-size: 0.6875rem;
-	}
+  .origam-calendar__event-time {
+    opacity: 0.85;
+    font-size: 0.6875rem;
+  }
 
-	.origam-calendar__day-more {
-		font-size: 0.6875rem;
-		color: var(--origam-calendar__day-cell---color-muted, #6b7280);
-		padding-left: 4px;
-	}
+  .origam-calendar__day-more {
+    font-size: 0.6875rem;
+    color: var(--origam-calendar__day-cell---color-muted, #6b7280);
+    padding-left: 4px;
+  }
 
-	.origam-calendar__timeline {
-		display: flex;
-		flex: 1 1 auto;
-		min-height: 0;
-		overflow: auto;
-	}
+  .origam-calendar__timeline {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
 
-	.origam-calendar__timeline-hours {
-		display: flex;
-		flex-direction: column;
-		width: var(--origam-calendar__timeline__hour-label---width, 56px);
-		padding-top: 32px;
-		border-right: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
-	}
+  .origam-calendar__timeline-hours {
+    display: flex;
+    flex-direction: column;
+    width: var(--origam-calendar__timeline__hour-label---width, 56px);
+    padding-top: 32px;
+    border-right: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+  }
 
-	.origam-calendar__hour-label {
-		font-size: var(--origam-calendar__timeline__hour-label---font-size, 0.6875rem);
-		color: var(--origam-calendar__timeline__hour-label---color, #6b7280);
-		text-align: right;
-		padding-right: 6px;
-		display: flex;
-		align-items: flex-start;
-		justify-content: flex-end;
-	}
+  .origam-calendar__hour-label {
+    font-size: var(--origam-calendar__timeline__hour-label---font-size, 0.6875rem);
+    color: var(--origam-calendar__timeline__hour-label---color, #6b7280);
+    text-align: right;
+    padding-right: 6px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
 
-	.origam-calendar__timeline-grid {
-		display: flex;
-		flex: 1 1 auto;
-	}
+  .origam-calendar__timeline-grid {
+    display: flex;
+    flex: 1 1 auto;
+  }
 
-	.origam-calendar__timeline-day {
-		flex: 1 1 0;
-		min-width: 0;
-		border-left: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
-		display: flex;
-		flex-direction: column;
-	}
+  .origam-calendar__timeline-day {
+    flex: 1 1 0;
+    min-width: 0;
+    border-left: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+    display: flex;
+    flex-direction: column;
+  }
 
-	.origam-calendar__timeline-day--today {
-		background-color: var(--origam-calendar__day-cell---bg-color-today, rgba(59, 130, 246, 0.04));
-	}
+  .origam-calendar__timeline-day--today {
+    background-color: var(--origam-calendar__day-cell---bg-color-today, rgba(59, 130, 246, 0.04));
+  }
 
-	.origam-calendar__timeline-day--weekend {
-		background-color: var(--origam-calendar__day-cell---bg-color-weekend, rgba(0, 0, 0, 0.02));
-	}
+  .origam-calendar__timeline-day--weekend {
+    background-color: var(--origam-calendar__day-cell---bg-color-weekend, rgba(0, 0, 0, 0.02));
+  }
 
-	.origam-calendar__day-header {
-		padding: 8px;
-		text-align: center;
-		border-bottom: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
+  .origam-calendar__day-header {
+    padding: 8px;
+    text-align: center;
+    border-bottom: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
 
-	.origam-calendar__day-header-weekday {
-		font-size: 0.75rem;
-		color: var(--origam-calendar__day-cell---color-muted, #6b7280);
-		text-transform: uppercase;
-	}
+  .origam-calendar__day-header-weekday {
+    font-size: 0.75rem;
+    color: var(--origam-calendar__day-cell---color-muted, #6b7280);
+    text-transform: uppercase;
+  }
 
-	.origam-calendar__day-header-number {
-		font-size: 1.25rem;
-		font-weight: 600;
-	}
+  .origam-calendar__day-header-number {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
 
-	.origam-calendar__timeline-slots {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-	}
+  .origam-calendar__timeline-slots {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
 
-	.origam-calendar__timeline-slot {
-		border-top: 1px solid var(--origam-calendar__timeline---grid-line-color, #f3f4f6);
-		pointer-events: auto;
-	}
+  .origam-calendar__timeline-slot {
+    border-top: 1px solid var(--origam-calendar__timeline---grid-line-color, #f3f4f6);
+    pointer-events: auto;
+  }
 
-	.origam-calendar__timeline-slot--hour {
-		border-top-color: var(--origam-calendar__day-cell---border-color, #e5e7eb);
-	}
+  .origam-calendar__timeline-slot--hour {
+    border-top-color: var(--origam-calendar__day-cell---border-color, #e5e7eb);
+  }
 
-	.origam-calendar__event--timeline {
-		position: absolute;
-		left: 4px;
-		right: 4px;
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		justify-content: flex-start;
-		padding: 4px 6px;
-		font-size: 0.75rem;
-		line-height: 1.2;
-	}
+  .origam-calendar__event--timeline {
+    position: absolute;
+    left: 4px;
+    right: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 4px 6px;
+    font-size: 0.75rem;
+    line-height: 1.2;
+  }
 
-	.origam-calendar__range-overlay {
-		position: absolute;
-		left: 4px;
-		right: 4px;
-		background-color: var(--origam-calendar__range-select---bg-color, rgba(59, 130, 246, 0.18));
-		border: 1px dashed var(--origam-calendar__range-select---border-color, rgba(59, 130, 246, 0.6));
-		pointer-events: none;
-		border-radius: 4px;
-	}
+  .origam-calendar__range-overlay {
+    position: absolute;
+    left: 4px;
+    right: 4px;
+    background-color: var(--origam-calendar__range-select---bg-color, rgba(59, 130, 246, 0.18));
+    border: 1px dashed var(--origam-calendar__range-select---border-color, rgba(59, 130, 246, 0.6));
+    pointer-events: none;
+    border-radius: 4px;
+  }
 
-	.origam-calendar__body--agenda {
-		padding: var(--origam-calendar__agenda---padding, 12px);
-		display: flex;
-		flex-direction: column;
-		gap: var(--origam-calendar__agenda---row-gap, 12px);
-	}
+  .origam-calendar__body--agenda {
+    padding: var(--origam-calendar__agenda---padding, 12px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--origam-calendar__agenda---row-gap, 12px);
+  }
 
-	.origam-calendar__agenda-day {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
+  .origam-calendar__agenda-day {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
 
-	.origam-calendar__agenda-day-header {
-		font-size: 0.875rem;
-		color: var(--origam-calendar__agenda---day-color, inherit);
-		font-weight: var(--origam-calendar__agenda---day-font-weight, 600);
-	}
+  .origam-calendar__agenda-day-header {
+    font-size: 0.875rem;
+    color: var(--origam-calendar__agenda---day-color, inherit);
+    font-weight: var(--origam-calendar__agenda---day-font-weight, 600);
+  }
 
-	.origam-calendar__agenda-event {
-		all: unset;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 8px 12px;
-		border-radius: 6px;
-		cursor: pointer;
-		background-color: var(--origam-calendar__event---bg-color-default, #3b82f6);
-		color: var(--origam-calendar__event---color-default, #ffffff);
-		font-size: 0.875rem;
-	}
+  .origam-calendar__agenda-event {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    background-color: var(--origam-calendar__event---bg-color-default, #3b82f6);
+    color: var(--origam-calendar__event---color-default, #ffffff);
+    font-size: 0.875rem;
+  }
 
-	.origam-calendar__agenda-empty {
-		padding: 32px;
-		text-align: center;
-		color: var(--origam-calendar__day-cell---color-muted, #6b7280);
-	}
+  .origam-calendar__agenda-empty {
+    padding: 32px;
+    text-align: center;
+    color: var(--origam-calendar__day-cell---color-muted, #6b7280);
+  }
 </style>