origam 2.16.0 → 2.17.0

package/dist/src/components/Btn/OrigamBtn.vue

@@ -1,15 +1,16 @@
 <template>
 	<component
-			:is="link.tag"
+			:is="link.tag.value"
 			:id="id"
 			v-ripple="isRipple"
 			v-contrast
 			:data-origam-color-locked="colorLocked"
 			:class="btnClasses"
 			:disabled="isDisabled || undefined"
-			:aria-disabled="link.tag === 'a' && isDisabled ? 'true' : undefined"
-			:href="link.tag === 'a' && isDisabled ? undefined : link.href.value"
-			:type="link.tag === 'a' ? undefined : 'button'"
+			:aria-disabled="ariaDisabled"
+			:aria-busy="ariaBusy"
+			:href="hrefAttr"
+			:type="typeAttr"
 			:value="valueAttr"
 			@click="handleClick"
 			@mouseenter="handleMouseenter"
@@ -124,35 +125,40 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
-import { OrigamAvatar, OrigamIcon, OrigamLoader, OrigamProgress, OrigamSkeleton } from "../../components";
-import {
-  useActive,
-  useAdjacent,
-  useDefaults,
-  useDensity,
-  useDimension,
-  useGroupItem,
-  useHover,
-  useLink,
-  useLoader,
-  useLocation,
-  usePosition,
-  useProps,
-  useSelectLink,
-  useSize,
-  useStateEffect,
-  useStatus,
-  useStyle,
-  useTypography,
-  useVariant
-} from "../../composables";
-import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts";
-import { vContrast, vRipple } from "../../directives";
-import { DENSITY, LOADER_KIND, PROGRESS_TYPE, SIZES } from "../../enums";
+import { computed, onMounted, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamLoader from "../Loader/OrigamLoader.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useGroupItem } from "../../composables/Commons/groupItem.composable";
+import { useLink } from "../../composables/Commons/link.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useLocation } from "../../composables/Commons/location.composable";
+import { usePosition } from "../../composables/Commons/position.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSelectLink } from "../../composables/Commons/selectLink.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStatus } from "../../composables/Commons/status.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { useVariant } from "../../composables/Commons/variant.composable";
+import { warnDeprecatedEmit } from "../../utils/Commons/color.util";
+import { ADJACENT_EMIT_REPLACEMENT } from "../../consts/Btn/btn.const";
+import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts/Btn/btn-toggle.const";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import vRipple from "../../directives/Ripple/ripple.directive";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { SIZES } from "../../enums/Commons/size.enum";
 const attrs = useAttrs();
-const _props = defineProps({
-  active: { type: [Boolean, Object], required: false, default: void 0 },
+const props = defineProps({
   flat: { type: Boolean, required: false },
   icon: { type: [Boolean, String, Array], required: false, skipCheck: true },
   block: { type: Boolean, required: false },
@@ -229,14 +235,15 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
+  active: { type: [Boolean, Object], required: false, default: void 0 },
+  activeClass: { type: String, required: false },
   variant: { type: null, required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
   letterSpacing: { type: null, required: false }
 });
-const props = useDefaults(_props);
 const colorLocked = computed(() => props.color ? "true" : void 0);
 defineEmits(["click:append", "click:prepend", "group:selected"]);
 defineSlots();
@@ -246,8 +253,8 @@ const group = useGroupItem(props, ORIGAM_BTN_TOGGLE_KEY, false);
 const link = useLink(props, attrs);
 const slots = useSlots();
 useSelectLink(link, group?.select);
-const { isHover, hoverState, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave } = useHover(props);
-const { isActive: active, activeState } = useActive(props);
+const { isOn: isHover, config: hoverState, set: handleMouseenter, unset: handleMouseleave } = useStateFlag(props, { state: "hover" });
+const { isOn: active, config: activeState } = useStateFlag(props, { state: "active" });
 const isActive = computed(() => {
   const a = props.active;
   const forcedActive = a === true || !!a && typeof a === "object" && a.enabled === true;
@@ -263,6 +270,10 @@ const isActive = computed(() => {
   return active.value;
 });
 const isDisabled = computed(() => group?.disabled.value || props.disabled);
+const isAnchor = computed(() => link.tag.value === "a");
+const ariaDisabled = computed(() => isAnchor.value && isDisabled.value ? "true" : void 0);
+const hrefAttr = computed(() => isAnchor.value && isDisabled.value ? void 0 : link.href.value);
+const typeAttr = computed(() => isAnchor.value ? void 0 : "button");
 const valueAttr = computed(() => {
   if (props.value === void 0 || typeof props.value === "symbol") return void 0;
   return Object(props.value) === props.value ? JSON.stringify(props.value, null, 0) : props.value;
@@ -300,9 +311,15 @@ const { variantClasses } = useVariant(props);
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
+  isPrependClickable,
+  isAppendClickable,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);
+onMounted(() => {
+  if (isPrependClickable.value) warnDeprecatedEmit("OrigamBtn", "click:prepend", ADJACENT_EMIT_REPLACEMENT);
+  if (isAppendClickable.value) warnDeprecatedEmit("OrigamBtn", "click:append", ADJACENT_EMIT_REPLACEMENT);
+});
 const handleClick = (e) => {
   if (isDisabled.value || link.isLink.value && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || attrs.target === "_blank")) return;
   link.navigate?.(e);
@@ -320,6 +337,7 @@ const isSkeletonLoading = computed(() => {
 const isOverlayLoading = computed(() => {
   return loaderConfig.value.isActive && (loaderConfig.value.kind === "line" || loaderConfig.value.kind === "circular");
 });
+const ariaBusy = computed(() => loaderConfig.value.isActive ? "true" : void 0);
 const progressProps = computed(() => {
   const cfg = loaderConfig.value;
   return Object.assign(
@@ -384,6 +402,19 @@ const btnClasses = computed(() => {
     roundedClasses.value,
     sizeClasses.value,
     statusClasses.value,
+    /*********************************************************
+     * activeClass
+     *
+     * @description
+     * Mirrors the main `origam-btn--active` class above: gated on
+     * the SAME `isActive` (forced / group-selection / link-active
+     * aware), not on useStateFlag's own narrower `isOn` — a plain
+     * `activeClasses.value` from useStateFlag would miss the
+     * group/link-driven cases entirely (it only reflects the raw
+     * `props.active` v-model, never `group.isSelected` /
+     * `link.isActive`).
+     ********************************************************/
+    isActive.value && props.activeClass,
     props.class
   ];
 });
@@ -436,9 +467,32 @@ defineExpose({
 		user-select: none;
 		opacity: var(--origam-btn---opacity, 1);
 
-		border-width: var(--origam-btn-group---border-width);
-		border-style: var(--origam-btn-group---border-style);
-		border-color: var(--origam-btn-group---border-color);
+		// #391 — the base rule used to read `--origam-btn-group---border-*`
+		// EXCLUSIVELY, but `&--border` (below) only ever wrote
+		// `--origam-btn---border-width` — two different custom properties,
+		// so the `border` prop painted nothing. A naive
+		// `var(--origam-btn-group---border-width, var(--origam-btn---border-width))`
+		// fallback does NOT fix this: the group token is registered
+		// GLOBALLY at `:root`/`[data-theme]` (`tokens/component/btn-group.json`
+		// → `light.css`/`dark.css`), always defined (`0` at rest), so the
+		// `var()` fallback never falls through to the btn's own value —
+		// measured, see the #391/#530 root-vs-token audit
+		// (`docs/mesures/`): on every conflict of this shape checked in a
+		// real browser, the globally-registered token wins, never the
+		// component-local declaration. So the STANDALONE default below
+		// reads the BTN's OWN var directly (no group fallback) — this is
+		// what actually makes `&--border`'s write visible.
+		//
+		// Width is split per physical side so the `border="top|right|
+		// bottom|left"` sub-values (useBorder's `${name}--border-{side}`
+		// classes below) can zero the other three sides — mirrors
+		// OrigamCard's identical `border-{side}-width` pattern.
+		border-color: var(--origam-btn---border-color, currentColor);
+		border-style: var(--origam-btn---border-style, solid);
+		border-top-width: var(--origam-btn---border-top-width, var(--origam-btn---border-width, 0));
+		border-right-width: var(--origam-btn---border-right-width, var(--origam-btn---border-width, 0));
+		border-bottom-width: var(--origam-btn---border-bottom-width, var(--origam-btn---border-width, 0));
+		border-left-width: var(--origam-btn---border-left-width, var(--origam-btn---border-width, 0));
 		border-radius: var(
 			--origam-btn---border-radius,
 			var(--origam-btn-group---border-radius, 4px)
@@ -469,10 +523,10 @@ defineExpose({
 		}
 
 		&--size-x-small {
-			--origam-btn---height: 20px;
+			--origam-btn---height: var(--origam-btn---height-xs, 20px);
 			--origam-btn---font-size: 0.625rem;
 			--origam-btn---min-width: 36px;
-			padding: 0 calc(8px + var(--origam-btn---density-padding-x, 0px));
+			padding: 0 calc(var(--origam-btn---padding-xs, 8px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 16px;
@@ -480,10 +534,10 @@ defineExpose({
 		}
 
 		&--size-small {
-			--origam-btn---height: 28px;
+			--origam-btn---height: var(--origam-btn---height-sm, 28px);
 			--origam-btn---font-size: 0.75rem;
 			--origam-btn---min-width: 50px;
-			padding: 0 calc(12px + var(--origam-btn---density-padding-x, 0px));
+			padding: 0 calc(var(--origam-btn---padding-sm, 12px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 20px;
@@ -491,10 +545,10 @@ defineExpose({
 		}
 
 		&--size-default {
-			--origam-btn---height: 36px;
+			--origam-btn---height: var(--origam-btn---height-md, 36px);
 			--origam-btn---font-size: 0.875rem;
 			--origam-btn---min-width: 64px;
-			padding: 0 calc(16px + var(--origam-btn---density-padding-x, 0px));
+			padding: 0 calc(var(--origam-btn---padding-md, 16px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 24px;
@@ -502,10 +556,10 @@ defineExpose({
 		}
 
 		&--size-large {
-			--origam-btn---height: 44px;
+			--origam-btn---height: var(--origam-btn---height-lg, 44px);
 			--origam-btn---font-size: 1rem;
 			--origam-btn---min-width: 78px;
-			padding: 0 calc(20px + var(--origam-btn---density-padding-x, 0px));
+			padding: 0 calc(var(--origam-btn---padding-lg, 20px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 28px;
@@ -513,10 +567,10 @@ defineExpose({
 		}
 
 		&--size-x-large {
-			--origam-btn---height: 52px;
+			--origam-btn---height: var(--origam-btn---height-xl, 52px);
 			--origam-btn---font-size: 1.125rem;
 			--origam-btn---min-width: 92px;
-			padding: 0 calc(24px + var(--origam-btn---density-padding-x, 0px));
+			padding: 0 calc(var(--origam-btn---padding-xl, 24px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
 				--origam-btn---font-size: 32px;
@@ -539,9 +593,76 @@ defineExpose({
 		}
 
 		&--border {
-			--origam-btn---border-width: thin;
+			--origam-btn---border-width: var(--origam-border__width---thin);
+		}
+
+		// #391 — sub-defaults for `border="top|right|bottom|left"`
+		// (useBorder's `${name}--border-{side}` classes). No SCSS rule
+		// existed for these at all — the class was emitted but never
+		// consumed. Mirrors OrigamCard's identical `&--border-{side}`
+		// pattern one-for-one (thin on the target side, zero on the
+		// other three, so a direction genuinely isolates one edge
+		// instead of leaving the others at whatever `border-width`
+		// last resolved to).
+		&--border-top {
+			--origam-btn---border-top-width: var(--origam-border__width---thin);
+			--origam-btn---border-right-width: 0;
+			--origam-btn---border-bottom-width: 0;
+			--origam-btn---border-left-width: 0;
+		}
+
+		&--border-right {
+			--origam-btn---border-top-width: 0;
+			--origam-btn---border-right-width: var(--origam-border__width---thin);
+			--origam-btn---border-bottom-width: 0;
+			--origam-btn---border-left-width: 0;
 		}
 
+		&--border-bottom {
+			--origam-btn---border-top-width: 0;
+			--origam-btn---border-right-width: 0;
+			--origam-btn---border-bottom-width: var(--origam-border__width---thin);
+			--origam-btn---border-left-width: 0;
+		}
+
+		&--border-left {
+			--origam-btn---border-top-width: 0;
+			--origam-btn---border-right-width: 0;
+			--origam-btn---border-bottom-width: 0;
+			--origam-btn---border-left-width: var(--origam-border__width---thin);
+		}
+
+		// #391 — there is DELIBERATELY no `.origam-btn-group &` border rule
+		// here, and it must not be reintroduced without reading this first.
+		//
+		// A group-aware rule was written and removed. It could not work,
+		// for two independent reasons:
+		//
+		// 1. `OrigamBtnGroup.vue` already paints the group's border and
+		//    zeroes its children with `border-width: 0 !important` — so a
+		//    non-important rule here loses, always. That override is
+		//    intentional and documented there ("reads as ONE button with
+		//    internal separators").
+		// 2. Its body would have been
+		//    `var(--origam-btn-group---border-width, var(--origam-btn---border-width))`,
+		//    which is the very dead-fallback this ticket exists to fix.
+		//    `--origam-btn-group---border-width` is declared GLOBALLY on
+		//    `:root` / `[data-theme]` (`assets/css/tokens/light.css`), so it
+		//    is inherited by every element and ALWAYS defined — at `0`. The
+		//    second branch is unreachable. Such a rule would therefore not
+		//    be merely inert: the day someone relaxes the `!important` above
+		//    as a cleanup, it would silently force the border back to `0`
+		//    and reopen this exact bug somewhere new.
+		//
+		// The base rule above reads the BUTTON's own variables and nothing
+		// else. That is what makes `&--border` visible, and it is enough.
+		// Should group-over-button precedence ever be genuinely wanted, the
+		// lever is `@property { inherits: false }` on the group variable —
+		// which restores the difference between "no ancestor set this" and
+		// "an ancestor set it to 0" — plus removing the `!important`. That
+		// changes the rendering of every button group and needs its own
+		// decision.
+
 		&--absolute {
 			--origam-btn---position: absolute;
 		}

package/dist/src/components/Btn/OrigamBtnGroup.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="props.tag"
+			:is="tag"
 			:id="id"
 			role="group"
 			:class="btnGroupClasses"
@@ -26,21 +26,19 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtn, OrigamDefaultsProvider } from "../../components";
-import {
-  useDefaults,
-  useDensity,
-  usePassedProps,
-  useProps,
-  useSize,
-  useStateEffect,
-  useStyle,
-  useVariant
-} from "../../composables";
-import { DENSITY } from "../../enums";
-import { omitUndefined } from "../../utils";
+import OrigamBtn from "./OrigamBtn.vue";
+import OrigamDefaultsProvider from "../DefaultsProvider/OrigamDefaultsProvider.vue";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVariant } from "../../composables/Commons/variant.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { omitUndefined } from "../../utils/Commons/commons.util";
 import { computed, StyleValue, useSlots } from "vue";
-const _props = defineProps({
+const props = defineProps({
   divided: { type: Boolean, required: false },
   items: { type: Array, required: false, default: () => [] },
   tag: { type: String, required: false, default: "div" },
@@ -84,13 +82,14 @@ const _props = defineProps({
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
   size: { type: null, required: false }
 });
-const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
@@ -117,7 +116,9 @@ const slotDefaults = computed(() => ({
     // override to each child OrigamBtn — only when the consumer
     // actually set it.
     hover: wasPropPassed("hover") ? props.hover : void 0,
-    active: wasPropPassed("active") ? props.active : void 0
+    active: wasPropPassed("active") ? props.active : void 0,
+    hoverClass: wasPropPassed("hoverClass") ? props.hoverClass : void 0,
+    activeClass: wasPropPassed("activeClass") ? props.activeClass : void 0
   })
 }));
 const items = computed(() => props.items ?? []);
@@ -169,7 +170,7 @@ const btnGroupClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(btnGroupStyles);
+const { id, css, load, isLoaded, unload } = useStyle(btnGroupStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Btn/OrigamBtnToggle.vue

@@ -1,5 +1,6 @@
 <template>
 	<origam-btn-group
+			:id="id"
 			ref="origamBtnGroupRef"
 			:class="btnToggleClasses"
 			:styles="btnToggleStyles"
@@ -28,17 +29,14 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtnGroup } from "../../components";
-import {
-  useDefaults,
-  useGroup,
-  useProps,
-  useStyle
-} from "../../composables";
-import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts";
-import { DENSITY } from "../../enums";
+import OrigamBtnGroup from "./OrigamBtnGroup.vue";
+import { useGroup } from "../../composables/Commons/group.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts/Btn/btn-toggle.const";
+import { DENSITY } from "../../enums/Commons/density.enum";
 import { computed, ref, StyleValue, useSlots } from "vue";
-const _props = defineProps({
+const props = defineProps({
   divided: { type: Boolean, required: false },
   items: { type: Array, required: false, default: () => [] },
   tag: { type: String, required: false, default: "div" },
@@ -82,6 +80,7 @@ const _props = defineProps({
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -93,7 +92,6 @@ const _props = defineProps({
   max: { type: Number, required: false },
   selectedClass: { type: String, required: false }
 });
-const props = useDefaults(_props);
 defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
@@ -114,7 +112,7 @@ const btnToggleClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(btnToggleStyles);
+const { id, css, load, isLoaded, unload } = useStyle(btnToggleStyles, () => props.id);
 defineExpose({
   next,
   prev,

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    :id="id"
     class="origam-calendar"
     :class="rootClasses"
     :style="rootStyles"
@@ -129,10 +130,11 @@
           <div
             v-for="dayCell in weekRow"
             :key="dayCell.toISOString()"
+            :ref="(el) => setDayCellRef(dayCell, el)"
             class="origam-calendar__day-cell"
             :class="dayCellClasses(dayCell)"
             role="gridcell"
-            tabindex="0"
+            :tabindex="isRovingTabStop(dayCell) ? 0 : -1"
             :aria-label="ariaDayLabel(dayCell)"
             :aria-selected="isInDragSelection(dayCell)"
             :aria-disabled="isDayDisabled(dayCell)"
@@ -341,18 +343,22 @@
 <script lang="ts" setup>
 import {
   computed,
+  nextTick,
   ref,
   watch
 } from "vue";
-import { OrigamBtn, OrigamBtnGroup } from "../../components";
-import { CALENDAR_NAVIGATE, CALENDAR_VIEW, INTENT, VARIANT } from "../../enums";
-import {
-  useCalendar,
-  useDensity,
-  useDimension,
-  useLocale,
-  useStateEffect
-} from "../../composables";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamBtnGroup from "../Btn/OrigamBtnGroup.vue";
+import { CALENDAR_NAVIGATE, CALENDAR_VIEW } from "../../enums/Calendar/calendar.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { INTENT } from "../../enums/Commons/intent.enum";
+import { VARIANT } from "../../enums/Commons/variant.enum";
+import { UNSEEDED } from "../../consts/Commons/vmodel.const";
+import { useCalendar } from "../../composables/Calendar/calendar.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
 import {
   getForeground,
   isCssColor,
@@ -455,23 +461,23 @@ const VIEW_LABEL_FALLBACK = {
 function viewLabel(view) {
   return t(`origam.calendar.view.${view}`, VIEW_LABEL_FALLBACK[view]);
 }
-const ariaLabel = computed(() => t("origam.calendar.aria_label", "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.view_switcher", "View"));
-const ariaMonthLabel = computed(() => t("origam.calendar.month_grid", "Month grid"));
-const todayLabel = computed(() => t("origam.calendar.today", "Today"));
-const emptyLabel = computed(() => t("origam.calendar.empty", "No events to display"));
+const ariaLabel = computed(() => t("origam.calendar.aria_label"));
+const ariaToolbarLabel = computed(() => t("origam.calendar.toolbar"));
+const ariaPrevLabel = computed(() => t("origam.calendar.previous"));
+const ariaNextLabel = computed(() => t("origam.calendar.next"));
+const ariaTodayLabel = computed(() => t("origam.calendar.today"));
+const ariaViewListLabel = computed(() => t("origam.calendar.view_switcher"));
+const ariaMonthLabel = computed(() => t("origam.calendar.month_grid"));
+const todayLabel = computed(() => t("origam.calendar.today"));
+const emptyLabel = computed(() => t("origam.calendar.empty"));
 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 internalView = ref(props.view ?? CALENDAR_VIEW.MONTH);
-const internalDate = ref(toDate(props.currentDate) ?? /* @__PURE__ */ new Date());
+const internalView = ref(UNSEEDED);
+const internalDate = ref(UNSEEDED);
 watch(() => props.view, (next) => {
   if (next != null) internalView.value = next;
 });
@@ -479,8 +485,8 @@ watch(() => props.currentDate, (next) => {
   const parsed = toDate(next);
   if (parsed) internalDate.value = parsed;
 });
-const resolvedView = computed(() => internalView.value);
-const resolvedDate = computed(() => internalDate.value);
+const resolvedView = computed(() => internalView.value !== UNSEEDED ? internalView.value : props.view ?? CALENDAR_VIEW.MONTH);
+const resolvedDate = computed(() => internalDate.value !== UNSEEDED ? internalDate.value : toDate(props.currentDate) ?? /* @__PURE__ */ new Date());
 const resolvedLocale = computed(() => {
   if (props.locale) return props.locale;
   if (typeof document !== "undefined" && document.documentElement.lang) {
@@ -577,6 +583,18 @@ const weekdayNames = computed(() => getWeekdayNames(resolvedLocale.value, props.
 function dayCellKey(date) {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 }
+const dayCellRefs = /* @__PURE__ */ new Map();
+function setDayCellRef(date, el) {
+  const key = dayCellKey(date);
+  if (el instanceof HTMLElement) dayCellRefs.set(key, el);
+  else dayCellRefs.delete(key);
+}
+function isRovingTabStop(date) {
+  return isSameDay(date, resolvedDate.value);
+}
+function focusDayCell(date) {
+  dayCellRefs.get(dayCellKey(date))?.focus();
+}
 function isCellToday(date) {
   return isToday(date);
 }
@@ -845,6 +863,12 @@ function onEventClick(event, originalEvent) {
 function onKeydown(event) {
   const target = event.target;
   if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA")) return;
+  if (event.key === KEYBOARD_VALUES.ENTER || event.key === KEYBOARD_VALUES.EMPTY) {
+    if (target?.getAttribute("role") !== "gridcell") return;
+    event.preventDefault();
+    onDayClick(resolvedDate.value, event);
+    return;
+  }
   let next = null;
   const current = resolvedDate.value;
   switch (event.key) {
@@ -871,6 +895,8 @@ function onKeydown(event) {
     event.preventDefault();
     internalDate.value = next;
     emit("update:currentDate", next);
+    const focusTarget = next;
+    void nextTick(() => focusDayCell(focusTarget));
   }
 }
 const {
@@ -960,7 +986,9 @@ defineExpose({
   .origam-calendar {
     display: flex;
     flex-direction: column;
+    gap: var(--origam-calendar---gap, 0);
     width: 100%;
+    padding: var(--origam-calendar---padding, 0);
     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);
@@ -1069,6 +1097,10 @@ defineExpose({
     user-select: none;
   }
 
+  .origam-calendar__day-cell:hover:not(.origam-calendar__day-cell--disabled) {
+    background-color: var(--origam-calendar__day-cell---bg-color-hover, var(--origam-color__surface---overlay, #f3f4f6));
+  }
+
   .origam-calendar__day-cell:focus-visible {
     outline: 2px solid var(--origam-calendar__range-select---border-color, currentColor);
     outline-offset: -2px;
@@ -1222,6 +1254,7 @@ defineExpose({
   }
 
   .origam-calendar__timeline-slot {
+    height: var(--origam-calendar__timeline---slot-height, 32px);
     border-top: 1px solid var(--origam-calendar__timeline---grid-line-color, #f3f4f6);
     pointer-events: auto;
   }