origam 2.16.0 → 2.17.0

package/dist/src/components/VirtualScroll/OrigamVirtualScrollItem.vue

@@ -7,6 +7,7 @@
 	</template>
 	<template v-else>
 		<div
+				:id="id"
 				ref="resizeRef"
 				:class="virtualScrollItemClasses"
 				:style="virtualScrollItemStyles"
@@ -19,11 +20,9 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, useAttrs, watch } from "vue";
-import {
-  useProps,
-  useResizeObserver,
-  useStyle
-} from "../../composables";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useResizeObserver } from "../../composables/Commons/resizeObserver.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
 const props = defineProps({
   renderless: { type: Boolean, required: false },
   id: { type: String, required: false },
@@ -49,7 +48,7 @@ const virtualScrollItemClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(virtualScrollItemStyles);
+const { id, css, load, isLoaded, unload } = useStyle(virtualScrollItemStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Watermark/OrigamWatermark.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			ref="rootEl"
 			class="origam-watermark"
 			:class="rootClasses"
@@ -27,7 +28,7 @@ import {
   ref,
   watch
 } from "vue";
-import { useWatermark } from "../../composables";
+import { useWatermark } from "../../composables/Watermark/watermark.composable";
 const props = defineProps({
   text: { type: String, required: false, default: void 0 },
   image: { type: String, required: false, default: void 0 },
@@ -59,6 +60,7 @@ const resolvedOptions = computed(() => ({
   pointerEvents: props.pointerEvents,
   zIndex: props.zIndex
 }));
+defineEmits([]);
 defineSlots();
 const { patternUrl } = useWatermark(resolvedOptions);
 const rootEl = ref(null);

package/dist/src/components/Window/OrigamWindow.vue

@@ -1,11 +1,23 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			ref="rootRef"
 			v-touch="touchOptions"
 			:class="windowClasses"
 			:style="windowStyles"
+			aria-roledescription="carousel"
+			role="region"
 	>
+		<p
+				class="origam-window__live-region"
+				role="status"
+				aria-atomic="true"
+				aria-live="polite"
+		>
+			{{ slideAnnouncement }}
+		</p>
+
 		<div
 				:style="windowContainerStyles"
 				class="origam-window__container"
@@ -33,6 +45,8 @@
 								:bg-color="bgColor"
 								:hover="hover"
 								:active="active"
+								:hover-class="hoverClass"
+								:active-class="activeClass"
 						/>
 					</slot>
 
@@ -48,6 +62,8 @@
 								:bg-color="bgColor"
 								:hover="hover"
 								:active="active"
+								:hover-class="hoverClass"
+								:active-class="activeClass"
 						/>
 					</slot>
 				</slot>
@@ -63,21 +79,22 @@
 
 <script lang="ts" setup>
 import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
-import { OrigamBtn, OrigamSpacer } from "../../components";
-import {
-  useBorder,
-  useElevation,
-  useGroup,
-  useLocale,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useStyle
-} from "../../composables";
-import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts";
-import { vTouch } from "../../directives";
-import { AXIS, DIRECTION, MDI_ICONS } from "../../enums";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamSpacer from "../Grids/OrigamSpacer.vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useGroup } from "../../composables/Commons/group.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts/Window/window.const";
+import vTouch from "../../directives/Touch/touch.directive";
+import { AXIS } from "../../enums/Commons/drag.enum";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 const props = defineProps({
   continuous: { type: Boolean, required: false },
   nextIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_RIGHT },
@@ -129,6 +146,7 @@ const props = defineProps({
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
@@ -150,6 +168,11 @@ const transitionHeight = ref(void 0);
 const activeIndex = computed(() => {
   return group.items.value.findIndex((item) => group.selected.value.includes(item.id));
 });
+const slideAnnouncement = computed(() => {
+  const total = group.items.value.length;
+  if (total === 0 || activeIndex.value < 0) return "";
+  return t("origam.carousel.aria_label.delimiter", activeIndex.value + 1, total);
+});
 watch(activeIndex, (newVal, oldVal) => {
   const itemsLength = group.items.value.length;
   const lastIndex = itemsLength - 1;
@@ -172,24 +195,24 @@ provide(ORIGAM_WINDOW_KEY, {
 });
 const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0);
 const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
-const prevProps = {
+const prevProps = computed(() => ({
   icon: props.prevIcon,
-  class: `origam-window__prev`,
+  class: "origam-window__prev",
   onClick: group.prev,
   "aria-label": t("origam.carousel.prev")
-};
+}));
 const prev = () => {
   if (canMoveBack.value) {
     isReversed.value = true;
     group.prev();
   }
 };
-const nextProps = {
+const nextProps = computed(() => ({
   icon: props.nextIcon,
-  class: `origam-window__next`,
+  class: "origam-window__next",
   onClick: group.next,
   "aria-label": t("origam.carousel.next")
-};
+}));
 const next = () => {
   if (canMoveForward.value) {
     isReversed.value = false;
@@ -251,7 +274,7 @@ const windowContainerStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(windowStyles);
+const { id, css, load, isLoaded, unload } = useStyle(windowStyles, () => props.id);
 defineExpose({
   filterProps,
   group,
@@ -269,10 +292,22 @@ defineExpose({
 
 		overflow: var(--origam-window---overflow, hidden);
 
+		&__live-region {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			white-space: nowrap;
+			border: 0;
+		}
+
 		&__container {
 			display: var(--origam-window__container---display, flex);
 			flex-direction: var(--origam-window__container---flex-direction, column);
-			height: inherit;
+			height: var(--origam-window__container---height, inherit);
 			position: var(--origam-window__container---position, relative);
 			transition:
 				var(--origam-window---transition-duration, 0.3s)

package/dist/src/components/Window/OrigamWindowItem.vue

@@ -5,6 +5,8 @@
 	>
 		<div
 				v-show="isShown"
+				v-bind="$attrs"
+				:id="id"
 				v-touch
 				:class="windowItemClasses"
 				:style="windowItemStyles"
@@ -19,17 +21,16 @@
 
 <script lang="ts" setup>
 import { computed, inject, nextTick, shallowRef, StyleValue } from "vue";
-import { OrigamTransition } from "../../components";
-import {
-  useGroupItem,
-  useLazy,
-  useProps,
-  useSsrBoot,
-  useStyle
-} from "../../composables";
-import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts";
-import { vTouch } from "../../directives";
-import { convertToUnit } from "../../utils";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useGroupItem } from "../../composables/Commons/groupItem.composable";
+import { useLazy } from "../../composables/Commons/lazy.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSsrBoot } from "../../composables/Commons/ssrBoot.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts/Window/window.const";
+import vTouch from "../../directives/Touch/touch.directive";
+import { convertToUnit } from "../../utils/Commons/commons.util";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   transition: { type: [Boolean, String], required: false, default: void 0 },
   reverseTransition: { type: [Boolean, String], required: false, default: void 0 },
@@ -122,7 +123,7 @@ const windowItemClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(windowItemStyles);
+const { id, css, load, isLoaded, unload } = useStyle(windowItemStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -143,14 +144,19 @@ defineExpose({
 		&--x-transition-enter-active,
 		&--x-transition-leave-active,
 		&--x-reverse-transition-enter-active,
-		&--x-reverse-transition-leave-active,
+		&--x-reverse-transition-leave-active {
+			transition:
+				var(--origam-window-item---x-transition-duration, 0.3s)
+				var(--origam-window-item---x-transition-easing, cubic-bezier(0.25, 0.8, 0.5, 1));
+		}
+
 		&--y-transition-enter-active,
 		&--y-transition-leave-active,
 		&--y-reverse-transition-enter-active,
 		&--y-reverse-transition-leave-active {
 			transition:
-				var(--origam-window-item---x-transition-duration, 0.3s)
-				var(--origam-window-item---x-transition-easing, cubic-bezier(0.25, 0.8, 0.5, 1));
+				var(--origam-window-item---y-transition-duration, 0.3s)
+				var(--origam-window-item---y-transition-easing, cubic-bezier(0.25, 0.8, 0.5, 1));
 		}
 
 		&--x-transition-leave-from,
@@ -199,4 +205,77 @@ defineExpose({
 			transform: translateY(100%);
 		}
 	}
+
+	/*********************************************************
+	 * origam-fade-transition / origam-scale-rotate-transition
+	 *
+	 * @description
+	 * ⛔ issue #475 — `transition="origam-fade-transition"` /
+	 * `"origam-scale-rotate-transition"` were documented (story + doc) as
+	 * valid `<OrigamWindowItem>` transition names with NO backing CSS at
+	 * all — a silent hard cut, no animation, no error. These are BARE
+	 * (non-BEM) top-level selectors, not nested under `.origam-window-item`,
+	 * because a raw string passed to `transition`/`reverseTransition` is
+	 * used AS-IS as Vue's native `<Transition name="…">` — it does NOT go
+	 * through the `origam-window-item--{axis}{direction}-transition`
+	 * default the parent `<OrigamWindow>` computes (see `transition`
+	 * computed above: `name` is used verbatim when it's already a string).
+	 *
+	 * @description
+	 * Deliberately NOT reusing `<OrigamFade>`/`<OrigamScaleRotate>`'s own
+	 * `.origam-transition--fade-*` / `.origam-transition--scale-rotate-*`
+	 * classes even though those already exist and work — they don't set
+	 * `position: absolute` on the leaving item, which THIS component
+	 * needs (see the `--x-transition-leave-from/-leave-to` block above):
+	 * without it, the leaving and entering items both sit in the flex
+	 * column's normal flow and visibly stack instead of crossfading in
+	 * place. `--item-fade-transition-duration/-easing` was already a
+	 * registered, emitted token before this fix (a vestige of a feature
+	 * started and never finished) — reused here; `--item-scale-rotate-transition-…`
+	 * added as its sibling in `tokens/component/window.json`.
+	 ********************************************************/
+	.origam-fade-transition-enter-active,
+	.origam-fade-transition-leave-active {
+		transition:
+			var(--origam-window---item-fade-transition-duration, 0.2s)
+			var(--origam-window---item-fade-transition-easing, cubic-bezier(0, 0, 0.2, 1));
+	}
+
+	.origam-fade-transition-leave-from,
+	.origam-fade-transition-leave-to {
+		position: absolute !important;
+		top: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.origam-fade-transition-enter-from,
+	.origam-fade-transition-leave-to {
+		opacity: 0;
+	}
+
+	.origam-scale-rotate-transition-enter-active,
+	.origam-scale-rotate-transition-leave-active {
+		transition:
+			var(--origam-window---item-scale-rotate-transition-duration, 0.3s)
+			var(--origam-window---item-scale-rotate-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+	}
+
+	.origam-scale-rotate-transition-leave-from,
+	.origam-scale-rotate-transition-leave-to {
+		position: absolute !important;
+		top: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.origam-scale-rotate-transition-enter-from {
+		opacity: 0;
+		transform: scale(0.9) rotate(-4deg);
+	}
+
+	.origam-scale-rotate-transition-leave-to {
+		opacity: 0;
+		transform: scale(0.9) rotate(4deg);
+	}
 </style>

package/dist/src/components/index.cjs

@@ -729,17 +729,6 @@ Object.keys(_Responsive).forEach(function (key) {
     }
   });
 });
-var _Section = require("./Section/index.cjs");
-Object.keys(_Section).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Section[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Section[key];
-    }
-  });
-});
 var _Select = require("./Select/index.cjs");
 Object.keys(_Select).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/components/index.d.ts

@@ -64,7 +64,6 @@ export * from './Progress';
 export * from './Radio';
 export * from './RatingField';
 export * from './Responsive';
-export * from './Section';
 export * from './Select';
 export * from './SelectionControl';
 export * from './Sheet';

package/dist/src/components/index.js

@@ -64,7 +64,6 @@ export * from "./Progress/index.js";
 export * from "./Radio/index.js";
 export * from "./RatingField/index.js";
 export * from "./Responsive/index.js";
-export * from "./Section/index.js";
 export * from "./Select/index.js";
 export * from "./SelectionControl/index.js";
 export * from "./Sheet/index.js";

package/dist/src/composables/Audio/use-audio-player.composable.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import type { IAudioPlayerMethods, IAudioPlayerState, IUseOrigamAudioPlayerOptions } from '../../interfaces';
+import type { IAudioPlayerMethods, IAudioPlayerState, IUseOrigamAudioPlayerOptions } from '../../interfaces/Audio/audio-player.interface';
 /**
  * Headless audio player composable. Today this is a trivial wrapper
  * around `useMediaPlayer` — `HTMLAudioElement` does not expose any

package/dist/src/composables/Audio/use-waveform.composable.cjs

@@ -30,7 +30,7 @@ function useWaveform(srcRef, options = {}) {
     isComputing.value = true;
     try {
       const response = await fetch(src, {
-        credentials: options.crossOrigin === "use-credentials" ? "include" : "same-origin",
+        credentials: (0, _vue.toValue)(options.crossOrigin) === "use-credentials" ? "include" : "same-origin",
         // Hint the network stack: we want the bytes, not the
         // decoded media. The browser may still cache the
         // response in the media cache, which is fine — both

package/dist/src/composables/Audio/use-waveform.composable.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import type { IUseWaveformOptions } from '../../interfaces';
+import type { IUseWaveformOptions } from '../../interfaces/Audio/audio-player.interface';
 /**
  * Headless waveform composable. Decodes the audio referenced by
  * `srcRef`, downsamples it to `bins` peaks (default 200), and exposes

package/dist/src/composables/Audio/use-waveform.composable.js

@@ -1,5 +1,6 @@
 import {
   ref,
+  toValue,
   watch
 } from "vue";
 import { WAVEFORM_DEFAULT_BINS } from "../../consts/Audio/audio.const.js";
@@ -27,7 +28,7 @@ export function useWaveform(srcRef, options = {}) {
     isComputing.value = true;
     try {
       const response = await fetch(src, {
-        credentials: options.crossOrigin === "use-credentials" ? "include" : "same-origin",
+        credentials: toValue(options.crossOrigin) === "use-credentials" ? "include" : "same-origin",
         // Hint the network stack: we want the bytes, not the
         // decoded media. The browser may still cache the
         // response in the media cache, which is fine — both

package/dist/src/composables/Calendar/calendar.composable.cjs

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCalendar = useCalendar;
 var _vue = require("vue");
+var _calendar = require("../../consts/Calendar/calendar.const.cjs");
 var _enums = require("../../enums/index.cjs");
 var _date = require("../../utils/Calendar/date.util.cjs");
+var _date2 = require("../../utils/Commons/date.util.cjs");
 var _rrule = require("../../utils/Calendar/rrule.util.cjs");
 const NAVIGATION_STEP = {
   [_enums.CALENDAR_VIEW.MONTH]: (date, direction) => (0, _date.addMonths)(date, direction),
@@ -25,7 +27,7 @@ function useCalendar(options, setView, setCurrentDate) {
         {
           const monthStart = (0, _date.startOfMonth)(date);
           const gridStart = (0, _date.startOfWeekFixed)(monthStart, firstDayOfWeek);
-          const gridEnd = (0, _date.addDays)(gridStart, 6 * 7 - 1);
+          const gridEnd = (0, _date.addDays)(gridStart, _calendar.CALENDAR_MONTH_GRID_WEEKS * _calendar.CALENDAR_DAYS_PER_WEEK - 1);
           return {
             start: gridStart,
             end: gridEnd
@@ -38,15 +40,10 @@ function useCalendar(options, setView, setCurrentDate) {
         };
       case _enums.CALENDAR_VIEW.DAY:
       default:
-        {
-          const start = (0, _date.startOfDay)(date);
-          const end = new Date(start);
-          end.setHours(23, 59, 59, 999);
-          return {
-            start,
-            end
-          };
-        }
+        return {
+          start: (0, _date.startOfDay)(date),
+          end: (0, _date2.endOfDay)(date)
+        };
     }
   });
   const expandedEvents = (0, _vue.computed)(() => {
@@ -94,7 +91,7 @@ function useCalendar(options, setView, setCurrentDate) {
     const slotDuration = options.slotDuration();
     const slots = [];
     const base = (0, _date.startOfDay)(date);
-    const totalMinutes = (endHour - startHour) * 60;
+    const totalMinutes = (endHour - startHour) * _calendar.CALENDAR_MINUTES_PER_HOUR;
     for (let offsetMin = 0; offsetMin < totalMinutes; offsetMin += slotDuration) {
       const slotDate = new Date(base);
       slotDate.setHours(startHour, 0, 0, 0);
@@ -111,7 +108,7 @@ function useCalendar(options, setView, setCurrentDate) {
     const firstDayOfWeek = options.firstDayOfWeek();
     const start = (0, _date.startOfWeekFixed)(date, firstDayOfWeek);
     const columns = [];
-    for (let i = 0; i < 7; i++) {
+    for (let i = 0; i < _calendar.CALENDAR_DAYS_PER_WEEK; i++) {
       columns.push(buildDayGrid((0, _date.addDays)(start, i)));
     }
     return columns;
@@ -147,10 +144,10 @@ function useCalendar(options, setView, setCurrentDate) {
   function positionEvent(event, dayStart, pxPerMin) {
     const start = (0, _date.toDate)(event.start);
     if (!start) return null;
-    const end = event.end ? (0, _date.toDate)(event.end) : new Date(start.getTime() + 30 * 6e4);
+    const end = event.end ? (0, _date.toDate)(event.end) : new Date(start.getTime() + _calendar.CALENDAR_DEFAULT_EVENT_DURATION_MIN * _calendar.CALENDAR_MS_PER_MINUTE);
     if (!end) return null;
     const top = Math.max(0, (0, _date.diffMinutes)(dayStart, start) * pxPerMin);
-    const height = Math.max(pxPerMin * 15, (0, _date.diffMinutes)(start, end) * pxPerMin);
+    const height = Math.max(pxPerMin * _calendar.CALENDAR_MIN_EVENT_HEIGHT_MIN, (0, _date.diffMinutes)(start, end) * pxPerMin);
     return {
       top,
       height

package/dist/src/composables/Calendar/calendar.composable.d.ts

@@ -1,8 +1,9 @@
 import { type ComputedRef } from 'vue';
-import type { ICalendarAgendaEntry, ICalendarTimeSlot, IEvent, IUseCalendarOptions } from '../../interfaces';
-import type { TCalendarNavigate, TCalendarView } from '../../types';
+import type { ICalendarAgendaEntry, ICalendarTimeSlot, IUseCalendarOptions } from '../../interfaces/Calendar/calendar.interface';
+import type { IEvent } from '../../interfaces/Calendar/event.interface';
+import type { TCalendarNavigate, TCalendarView } from '../../types/Calendar/calendar.type';
 import { addDays, addMonths, addWeeks, diffMinutes, endOfMonth, isSameDay, isSameMonth, startOfDay, startOfMonth, toDate } from '../../utils/Calendar/date.util';
-export type { ICalendarAgendaEntry, ICalendarTimeSlot } from '../../interfaces';
+export type { ICalendarAgendaEntry, ICalendarTimeSlot } from '../../interfaces/Calendar/calendar.interface';
 /**
  * Public composable. Stateless over the inputs (every getter is a
  * `() => …` thunk), so `<OrigamCalendar>` can drive it from props or

package/dist/src/composables/Calendar/calendar.composable.js

@@ -1,4 +1,12 @@
 import { computed } from "vue";
+import {
+  CALENDAR_DAYS_PER_WEEK,
+  CALENDAR_DEFAULT_EVENT_DURATION_MIN,
+  CALENDAR_MIN_EVENT_HEIGHT_MIN,
+  CALENDAR_MINUTES_PER_HOUR,
+  CALENDAR_MONTH_GRID_WEEKS,
+  CALENDAR_MS_PER_MINUTE
+} from "../../consts/Calendar/calendar.const.js";
 import { CALENDAR_NAVIGATE, CALENDAR_VIEW } from "../../enums/index.js";
 import {
   addDays,
@@ -17,6 +25,7 @@ import {
   startOfWeekFixed,
   toDate
 } from "../../utils/Calendar/date.util.js";
+import { endOfDay } from "../../utils/Commons/date.util.js";
 import { expandRecurrence } from "../../utils/Calendar/rrule.util.js";
 const NAVIGATION_STEP = {
   [CALENDAR_VIEW.MONTH]: (date, direction) => addMonths(date, direction),
@@ -34,7 +43,7 @@ export function useCalendar(options, setView, setCurrentDate) {
       case CALENDAR_VIEW.AGENDA: {
         const monthStart = startOfMonth(date);
         const gridStart = startOfWeekFixed(monthStart, firstDayOfWeek);
-        const gridEnd = addDays(gridStart, 6 * 7 - 1);
+        const gridEnd = addDays(gridStart, CALENDAR_MONTH_GRID_WEEKS * CALENDAR_DAYS_PER_WEEK - 1);
         return { start: gridStart, end: gridEnd };
       }
       case CALENDAR_VIEW.WEEK:
@@ -43,12 +52,8 @@ export function useCalendar(options, setView, setCurrentDate) {
           end: endOfWeekFixed(date, firstDayOfWeek)
         };
       case CALENDAR_VIEW.DAY:
-      default: {
-        const start = startOfDay(date);
-        const end = new Date(start);
-        end.setHours(23, 59, 59, 999);
-        return { start, end };
-      }
+      default:
+        return { start: startOfDay(date), end: endOfDay(date) };
     }
   });
   const expandedEvents = computed(() => {
@@ -96,7 +101,7 @@ export function useCalendar(options, setView, setCurrentDate) {
     const slotDuration = options.slotDuration();
     const slots = [];
     const base = startOfDay(date);
-    const totalMinutes = (endHour - startHour) * 60;
+    const totalMinutes = (endHour - startHour) * CALENDAR_MINUTES_PER_HOUR;
     for (let offsetMin = 0; offsetMin < totalMinutes; offsetMin += slotDuration) {
       const slotDate = new Date(base);
       slotDate.setHours(startHour, 0, 0, 0);
@@ -113,7 +118,7 @@ export function useCalendar(options, setView, setCurrentDate) {
     const firstDayOfWeek = options.firstDayOfWeek();
     const start = startOfWeekFixed(date, firstDayOfWeek);
     const columns = [];
-    for (let i = 0; i < 7; i++) {
+    for (let i = 0; i < CALENDAR_DAYS_PER_WEEK; i++) {
       columns.push(buildDayGrid(addDays(start, i)));
     }
     return columns;
@@ -148,10 +153,10 @@ export function useCalendar(options, setView, setCurrentDate) {
   function positionEvent(event, dayStart, pxPerMin) {
     const start = toDate(event.start);
     if (!start) return null;
-    const end = event.end ? toDate(event.end) : new Date(start.getTime() + 30 * 6e4);
+    const end = event.end ? toDate(event.end) : new Date(start.getTime() + CALENDAR_DEFAULT_EVENT_DURATION_MIN * CALENDAR_MS_PER_MINUTE);
     if (!end) return null;
     const top = Math.max(0, diffMinutes(dayStart, start) * pxPerMin);
-    const height = Math.max(pxPerMin * 15, diffMinutes(start, end) * pxPerMin);
+    const height = Math.max(pxPerMin * CALENDAR_MIN_EVENT_HEIGHT_MIN, diffMinutes(start, end) * pxPerMin);
     return { top, height };
   }
   return {

package/dist/src/composables/Chart/chart-animation.composable.cjs

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartAnimationStyle = useChartAnimationStyle;
+var _vue = require("vue");
+var _chart = require("../../consts/Chart/chart.const.cjs");
+var _passedProps = require("../Commons/passedProps.composable.cjs");
+function useChartAnimationStyle(props) {
+  const wasPropPassed = (0, _passedProps.usePassedProps)(props, "useChartAnimationStyle");
+  return (0, _vue.computed)(() => {
+    const out = {};
+    const resolved = props.animationDuration;
+    const wasThemedOrPassed = wasPropPassed("animationDuration") || resolved !== void 0 && resolved !== _chart.CHART_ANIMATION_DURATION_DEFAULT;
+    if (wasThemedOrPassed && resolved !== void 0) {
+      out["--origam-chart---animation-duration"] = `${resolved}ms`;
+    }
+    return out;
+  });
+}