origam 2.15.0 → 2.16.0

package/dist/src/components/Timeline/OrigamTimelineItem.vue

@@ -50,6 +50,7 @@ import {
   useStyle
 } from "../../composables";
 import { TIMELINE_CONTEXT_KEY } from "../../consts";
+import { DIRECTION, TIMELINE_SIDE } from "../../enums";
 const props = defineProps({
   title: { type: String, required: false },
   subtitle: { type: String, required: false },
@@ -57,7 +58,7 @@ const props = defineProps({
   intent: { type: null, required: false },
   isLast: { type: Boolean, required: false, default: false },
   truncateLine: { type: Boolean, required: false, default: false },
-  side: { type: String, required: false, default: "start" },
+  side: { type: null, required: false, default: "start" },
   orientation: { type: null, required: false, default: "vertical" },
   index: { type: Number, required: false, default: 0 },
   id: { type: String, required: false },
@@ -79,7 +80,7 @@ const effectiveSide = computed(() => {
 });
 const effectiveOrientation = computed(() => {
   if (timelineCtx?.orientation) return timelineCtx.orientation;
-  return props.orientation ?? "vertical";
+  return props.orientation ?? DIRECTION.VERTICAL;
 });
 const effectiveTruncateLine = computed(() => {
   if (timelineCtx?.truncateLine !== void 0) return timelineCtx.truncateLine;
@@ -100,7 +101,7 @@ const dotStyles = computed(() => {
   };
 });
 const connectorStyles = computed(() => {
-  const isH = effectiveOrientation.value === "horizontal";
+  const isH = effectiveOrientation.value === DIRECTION.HORIZONTAL;
   return {
     "background-color": "var(--origam-timeline---connector-color, var(--origam-color__border---subtle))",
     [isH ? "height" : "width"]: "var(--origam-timeline---connector-thickness, var(--origam-border__width---thin, 1px))"
@@ -126,8 +127,8 @@ function intentToFgToken(intent) {
 }
 const contentSide = computed(() => {
   const side = effectiveSide.value;
-  if (side === "alternating") {
-    return props.index % 2 === 0 ? "start" : "end";
+  if (side === TIMELINE_SIDE.ALTERNATING) {
+    return props.index % 2 === 0 ? TIMELINE_SIDE.START : TIMELINE_SIDE.END;
   }
   return side;
 });
@@ -135,10 +136,10 @@ const itemClasses = computed(() => [
   "origam-timeline-item",
   `origam-timeline-item--orientation-${effectiveOrientation.value}`,
   {
-    "origam-timeline-item--side-start": effectiveSide.value === "start" || contentSide.value === "start",
-    "origam-timeline-item--side-end": effectiveSide.value === "end" || contentSide.value === "end",
-    "origam-timeline-item--alternating": effectiveSide.value === "alternating",
-    "origam-timeline-item--content-end": contentSide.value === "end",
+    "origam-timeline-item--side-start": effectiveSide.value === TIMELINE_SIDE.START || contentSide.value === TIMELINE_SIDE.START,
+    "origam-timeline-item--side-end": effectiveSide.value === TIMELINE_SIDE.END || contentSide.value === TIMELINE_SIDE.END,
+    "origam-timeline-item--alternating": effectiveSide.value === TIMELINE_SIDE.ALTERNATING,
+    "origam-timeline-item--content-end": contentSide.value === TIMELINE_SIDE.END,
     "origam-timeline-item--last": props.isLast
   },
   densityClasses.value,

package/dist/src/components/Title/OrigamTitle.vue

@@ -65,11 +65,11 @@ const _props = defineProps({
   borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, 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 { filterProps } = useProps(props);

package/dist/src/components/Toolbar/OrigamToolbar.vue

@@ -113,11 +113,11 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, 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 }
 });
 defineSlots();
 const { filterProps } = useProps(props);

package/dist/src/components/Tooltip/OrigamTooltip.vue

@@ -94,11 +94,11 @@ const props = defineProps({
   scrim: { type: [Boolean, String], required: false, default: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, 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 }
 });
 defineEmits(["update:modelValue"]);
 defineSlots();

package/dist/src/components/Treeview/OrigamTreeview.vue

@@ -5,7 +5,7 @@
 			:style="treeviewStyles"
 			role="tree"
 			:aria-label="ariaLabel || 'File tree'"
-			:aria-multiselectable="selectMode === 'multiple' || undefined"
+			:aria-multiselectable="selectMode === TREEVIEW_SELECT_MODE.MULTIPLE || undefined"
 			@keydown="handleKeydown"
 	>
 		<origam-treeview-node
@@ -22,7 +22,7 @@
 import { computed, provide, ref, watch } from "vue";
 import { OrigamTreeviewNode } from "../../components";
 import { ORIGAM_TREEVIEW_KEY } from "../../consts";
-import { DENSITY, SIZES } from "../../enums";
+import { DENSITY, SIZES, TREEVIEW_SELECT_MODE, TREEVIEW_SELECTABLE_NODES } from "../../enums";
 import {
   useDensity,
   useProps,
@@ -34,8 +34,8 @@ const props = defineProps({
   items: { type: Array, required: true },
   modelValue: { type: [Array, String], required: false },
   expandedValue: { type: Array, required: false },
-  selectMode: { type: String, required: false, default: "none" },
-  selectableNodes: { type: String, required: false, default: "leaf" },
+  selectMode: { type: null, required: false, default: "none" },
+  selectableNodes: { type: null, required: false, default: "leaf" },
   showLines: { type: Boolean, required: false, default: true },
   expandOnClick: { type: Boolean, required: false, default: false },
   id: { type: String, required: false },
@@ -84,9 +84,9 @@ const toggleExpanded = (id2) => {
 };
 const toggleSelected = (id2) => {
   const mode = props.selectMode;
-  if (mode === "none") return;
+  if (mode === TREEVIEW_SELECT_MODE.NONE) return;
   const next = new Set(selectedSet.value);
-  if (mode === "single") {
+  if (mode === TREEVIEW_SELECT_MODE.SINGLE) {
     if (next.has(id2)) {
       next.clear();
     } else {
@@ -113,8 +113,8 @@ provide(ORIGAM_TREEVIEW_KEY, {
   toggleSelected,
   isExpanded,
   isSelected,
-  selectMode: computed(() => props.selectMode ?? "none"),
-  selectableNodes: computed(() => props.selectableNodes ?? "leaf"),
+  selectMode: computed(() => props.selectMode ?? TREEVIEW_SELECT_MODE.NONE),
+  selectableNodes: computed(() => props.selectableNodes ?? TREEVIEW_SELECTABLE_NODES.LEAF),
   showLines: computed(() => props.showLines !== false),
   expandOnClick: computed(() => props.expandOnClick === true),
   color: computed(() => {

package/dist/src/components/Treeview/OrigamTreeviewNode.vue

@@ -93,6 +93,7 @@
 <script lang="ts" setup>
 import { computed, inject, useSlots } from "vue";
 import { ORIGAM_TREEVIEW_KEY } from "../../consts";
+import { TREEVIEW_SELECT_MODE, TREEVIEW_SELECTABLE_NODES } from "../../enums";
 import {
   useProps,
   useStyle
@@ -117,10 +118,10 @@ const hasChildren = computed(() => {
 const isLeaf = computed(() => !hasChildren.value);
 const isSelectable = computed(() => {
   if (props.node.disabled) return false;
-  const mode = treeview?.selectMode.value ?? "none";
-  if (mode === "none") return false;
-  const selectableNodes = treeview?.selectableNodes.value ?? "leaf";
-  if (selectableNodes === "leaf") return isLeaf.value;
+  const mode = treeview?.selectMode.value ?? TREEVIEW_SELECT_MODE.NONE;
+  if (mode === TREEVIEW_SELECT_MODE.NONE) return false;
+  const selectableNodes = treeview?.selectableNodes.value ?? TREEVIEW_SELECTABLE_NODES.LEAF;
+  if (selectableNodes === TREEVIEW_SELECTABLE_NODES.LEAF) return isLeaf.value;
   return true;
 });
 const isNodeExpanded = computed(() => treeview?.isExpanded(props.node.id) ?? false);

package/dist/src/components/Video/OrigamVideo.vue

@@ -230,7 +230,7 @@ import { OrigamIcon } from "../Icon";
 import { OrigamMediaController } from "../Media";
 import { OrigamResponsive } from "../Responsive";
 import { shouldSuppressAutoplay, useBorder, useColorEffect, useDimension, useElevation, useLocale, useMargin, usePadding, useRounded, useTypography, useVideoPlayer } from "../../composables";
-import { MDI_ICONS } from "../../enums";
+import { MDI_ICONS, VIDEO_TRACK_KIND } from "../../enums";
 const { t } = useLocale();
 const props = defineProps({
   src: { type: [String, Array], required: true },
@@ -243,7 +243,7 @@ const props = defineProps({
   playsInline: { type: Boolean, required: false, default: true },
   preload: { type: String, required: false, default: "metadata" },
   aspectRatio: { type: String, required: false, default: "16/9" },
-  crossorigin: { type: String, required: false, default: void 0 },
+  crossorigin: { type: null, required: false, default: void 0 },
   disablePictureInPicture: { type: Boolean, required: false, default: false },
   skipSeconds: { type: Number, required: false, default: 30 },
   showCenterControls: { type: Boolean, required: false, default: true },
@@ -298,11 +298,11 @@ const props = defineProps({
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, 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 emit = defineEmits(["enterfullscreen", "exitfullscreen", "enterpip", "exitpip", "skip", "quality-change", "download", "play", "pause", "ended", "timeupdate", "volumechange", "loadedmetadata", "error", "update:playbackRate"]);
 defineSlots();
@@ -534,7 +534,7 @@ async function togglePipBtn() {
 }
 const captionsEnabled = ref(false);
 const hasCaptions = computed(() => props.tracks.some((track) => {
-  return track.kind === "captions" || track.kind === "subtitles";
+  return track.kind === VIDEO_TRACK_KIND.CAPTIONS || track.kind === VIDEO_TRACK_KIND.SUBTITLES;
 }));
 function toggleCaptions() {
   const el = videoRef.value;
@@ -669,31 +669,9 @@ defineExpose({
 		overflow: hidden;
 		border-radius: var(--origam-video---border-radius, 0);
 
-		/*
-		 * Force the chrome (MediaController play / volume / cog,
-		 * native `<button>`-based MediaVolumeControl) to white by
-		 * default — the controller's own SCSS reads `color:
-		 * var(--origam-media-controller---color, inherit)` which
-		 * defaults to the `#171717` text-primary token. On the dark
-		 * video overlay that produces near-invisible icons (the
-		 * user-reported "icons all black" symptom).
-		 *
-		 * The variable is overridden to `inherit` further down when
-		 * the consumer passes `color` / `bgColor`, so `useColorEffect`
-		 * gets to drive the tint through.
-		 */
 		--origam-media-controller---color: #ffffff;
 	}
 
-	/*
-	 * Tint propagation when the consumer passes `color` or `bgColor`:
-	 * the MediaController + the white-by-default `.origam-video__btn`
-	 * icons need to inherit the host colour so the scrubber's
-	 * `currentColor` (set by `scrubberColorStyle`) AND the icons
-	 * track the user's intent. Without these overrides the
-	 * MediaController's own scoped `color: var(--origam-media-controller---color, inherit)`
-	 * pins the chrome back to the dark text-primary token.
-	 */
 	.origam-video--has-color,
 	.origam-video--has-bg-color {
 		--origam-media-controller---color: inherit;
@@ -707,30 +685,10 @@ defineExpose({
 		}
 	}
 
-	/*
-	 * Native `<button class="origam-media-volume-control__btn">` lives
-	 * inside OrigamMediaVolumeControl with its own scoped CSS that
-	 * doesn't honour `--origam-media-controller---color`. Force it
-	 * to inherit from the controller (which is now white by default)
-	 * so the volume icon matches the rest of the chrome.
-	 */
 	:deep(.origam-media-volume-control__btn) {
 		color: inherit;
 	}
 
-	/*
-	 * Scrubber track / buffer background — overrides the MediaController
-	 * defaults so the dark, semi-translucent track doesn't let the
-	 * video frame underneath bleed through with whatever hue the
-	 * picture has at the playhead position (the user-reported "pink
-	 * scrubber" symptom on a pastel-toned video frame). White-tinted
-	 * translucent backgrounds give a uniform light-grey track on
-	 * every video regardless of content.
-	 *
-	 * The :deep(.) reaches into the OrigamMediaScrubber scope to set
-	 * its internal slots; the consumer can still override per-instance
-	 * via `--origam-media-scrubber---track-background-color`.
-	 */
 	:deep(.origam-media-controller__scrubber) {
 		--origam-media-scrubber---track-background-color: rgba(255, 255, 255, 0.28);
 		--origam-media-scrubber---buffer-background-color: rgba(255, 255, 255, 0.42);
@@ -826,11 +784,6 @@ defineExpose({
 		font-size: var(--origam-video--error---icon-font-size, 32px);
 	}
 
-	/* State pulse — YouTube-style brief icon flash at the centre of
-	 * the video when play/pause toggles. PURELY cosmetic, never
-	 * absorbs clicks (pointer-events: none) so the underlying video
-	 * surface stays interactive. Fades in + scales up over ~600 ms
-	 * then disappears. */
 	.origam-video__state-pulse {
 		position: absolute;
 		top: 50%;

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

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCalendar = useCalendar;
 var _vue = require("vue");
+var _enums = require("../../enums/index.cjs");
 var _date = require("../../utils/Calendar/date.util.cjs");
 var _rrule = require("../../utils/Calendar/rrule.util.cjs");
 const NAVIGATION_STEP = {
-  month: (date, direction) => (0, _date.addMonths)(date, direction),
-  week: (date, direction) => (0, _date.addWeeks)(date, direction),
-  day: (date, direction) => (0, _date.addDays)(date, direction),
-  agenda: (date, direction) => (0, _date.addMonths)(date, direction)
+  [_enums.CALENDAR_VIEW.MONTH]: (date, direction) => (0, _date.addMonths)(date, direction),
+  [_enums.CALENDAR_VIEW.WEEK]: (date, direction) => (0, _date.addWeeks)(date, direction),
+  [_enums.CALENDAR_VIEW.DAY]: (date, direction) => (0, _date.addDays)(date, direction),
+  [_enums.CALENDAR_VIEW.AGENDA]: (date, direction) => (0, _date.addMonths)(date, direction)
 };
 function useCalendar(options, setView, setCurrentDate) {
   const visibleDateRange = (0, _vue.computed)(() => {
@@ -19,8 +20,8 @@ function useCalendar(options, setView, setCurrentDate) {
     const date = options.currentDate();
     const firstDayOfWeek = options.firstDayOfWeek();
     switch (view) {
-      case "month":
-      case "agenda":
+      case _enums.CALENDAR_VIEW.MONTH:
+      case _enums.CALENDAR_VIEW.AGENDA:
         {
           const monthStart = (0, _date.startOfMonth)(date);
           const gridStart = (0, _date.startOfWeekFixed)(monthStart, firstDayOfWeek);
@@ -30,12 +31,12 @@ function useCalendar(options, setView, setCurrentDate) {
             end: gridEnd
           };
         }
-      case "week":
+      case _enums.CALENDAR_VIEW.WEEK:
         return {
           start: (0, _date.startOfWeekFixed)(date, firstDayOfWeek),
           end: (0, _date.endOfWeekFixed)(date, firstDayOfWeek)
         };
-      case "day":
+      case _enums.CALENDAR_VIEW.DAY:
       default:
         {
           const start = (0, _date.startOfDay)(date);
@@ -69,10 +70,10 @@ function useCalendar(options, setView, setCurrentDate) {
     const view = options.view();
     const current = options.currentDate();
     let next;
-    if (direction === "today") {
+    if (direction === _enums.CALENDAR_NAVIGATE.TODAY) {
       next = /* @__PURE__ */new Date();
     } else {
-      const step = direction === "next" ? 1 : -1;
+      const step = direction === _enums.CALENDAR_NAVIGATE.NEXT ? 1 : -1;
       next = NAVIGATION_STEP[view](current, step);
     }
     const min = options.minDate?.() ?? null;

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

@@ -1,32 +1,8 @@
 import { type ComputedRef } from 'vue';
-import type { IEvent, IUseCalendarOptions } from '../../interfaces';
+import type { ICalendarAgendaEntry, ICalendarTimeSlot, IEvent, IUseCalendarOptions } from '../../interfaces';
 import type { TCalendarNavigate, TCalendarView } from '../../types';
 import { addDays, addMonths, addWeeks, diffMinutes, endOfMonth, isSameDay, isSameMonth, startOfDay, startOfMonth, toDate } from '../../utils/Calendar/date.util';
-/**
- * Time-slot descriptor returned by `buildDayGrid` / `buildWeekGrid`.
- *
- * The grid is **not** event-aware — events are positioned absolutely
- * on top of the timeline using `diffMinutes(dayStart, event.start)`.
- * Decoupling the grid from the events lets us re-use the grid output
- * for the drag-select overlay without re-computing.
- */
-export interface ICalendarTimeSlot {
-    /** Top-of-slot Date (e.g. 09:30). */
-    date: Date;
-    /** Slot duration in minutes (mirror of `options.slotDuration`). */
-    durationMin: number;
-    /** True when the slot's hour mark falls on the hour. */
-    isHourMark: boolean;
-}
-/**
- * Agenda entry — one per day that has at least one event in the
- * visible window. Agenda view skips empty days; the `#empty` slot
- * fires when *no* event is in range.
- */
-export interface ICalendarAgendaEntry {
-    date: Date;
-    events: Array<IEvent>;
-}
+export type { ICalendarAgendaEntry, ICalendarTimeSlot } from '../../interfaces';
 /**
  * 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,5 @@
 import { computed } from "vue";
+import { CALENDAR_NAVIGATE, CALENDAR_VIEW } from "../../enums/index.js";
 import {
   addDays,
   addMonths,
@@ -18,10 +19,10 @@ import {
 } from "../../utils/Calendar/date.util.js";
 import { expandRecurrence } from "../../utils/Calendar/rrule.util.js";
 const NAVIGATION_STEP = {
-  month: (date, direction) => addMonths(date, direction),
-  week: (date, direction) => addWeeks(date, direction),
-  day: (date, direction) => addDays(date, direction),
-  agenda: (date, direction) => addMonths(date, direction)
+  [CALENDAR_VIEW.MONTH]: (date, direction) => addMonths(date, direction),
+  [CALENDAR_VIEW.WEEK]: (date, direction) => addWeeks(date, direction),
+  [CALENDAR_VIEW.DAY]: (date, direction) => addDays(date, direction),
+  [CALENDAR_VIEW.AGENDA]: (date, direction) => addMonths(date, direction)
 };
 export function useCalendar(options, setView, setCurrentDate) {
   const visibleDateRange = computed(() => {
@@ -29,19 +30,19 @@ export function useCalendar(options, setView, setCurrentDate) {
     const date = options.currentDate();
     const firstDayOfWeek = options.firstDayOfWeek();
     switch (view) {
-      case "month":
-      case "agenda": {
+      case CALENDAR_VIEW.MONTH:
+      case CALENDAR_VIEW.AGENDA: {
         const monthStart = startOfMonth(date);
         const gridStart = startOfWeekFixed(monthStart, firstDayOfWeek);
         const gridEnd = addDays(gridStart, 6 * 7 - 1);
         return { start: gridStart, end: gridEnd };
       }
-      case "week":
+      case CALENDAR_VIEW.WEEK:
         return {
           start: startOfWeekFixed(date, firstDayOfWeek),
           end: endOfWeekFixed(date, firstDayOfWeek)
         };
-      case "day":
+      case CALENDAR_VIEW.DAY:
       default: {
         const start = startOfDay(date);
         const end = new Date(start);
@@ -71,10 +72,10 @@ export function useCalendar(options, setView, setCurrentDate) {
     const view = options.view();
     const current = options.currentDate();
     let next;
-    if (direction === "today") {
+    if (direction === CALENDAR_NAVIGATE.TODAY) {
       next = /* @__PURE__ */ new Date();
     } else {
-      const step = direction === "next" ? 1 : -1;
+      const step = direction === CALENDAR_NAVIGATE.NEXT ? 1 : -1;
       next = NAVIGATION_STEP[view](current, step);
     }
     const min = options.minDate?.() ?? null;

package/dist/src/composables/CommandPalette/command.composable.d.ts

@@ -1,30 +1,8 @@
-import { type ComputedRef, type Ref } from 'vue';
-import type { ICommand } from '../../interfaces';
+import type { IUseCommandReturn } from '../../interfaces';
+export type { IUseCommandReturn } from '../../interfaces';
 /*********************************************************
  * useCommand
  ********************************************************/
-export interface IUseCommandReturn {
-    /**
-     * Register a command. Returns an `unregister()` closure so callers
-     * can drop the entry imperatively. When called from inside a Vue
-     * effect scope, the entry is auto-unregistered on scope dispose
-     * (component unmount, route leave, …) via `tryOnScopeDispose`.
-     */
-    register: (cmd: ICommand) => () => void;
-    /** Drop the entry with the matching `id`. No-op if unknown. */
-    unregister: (id: string) => void;
-    /**
-     * Reactive read-only view of every registered command, deduplicated
-     * by id.
-     */
-    commands: ComputedRef<ReadonlyArray<ICommand>>;
-    /** Open the global palette singleton. */
-    open: () => void;
-    /** Close the global palette singleton. */
-    close: () => void;
-    /** Reactive open/close state of the global palette singleton. */
-    isOpen: Ref<boolean>;
-}
 export declare function useCommand(): IUseCommandReturn;
 /*********************************************************
  * Test helper

package/dist/src/composables/Commons/defaults.composable.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.camelize = camelize;
 exports.createDefaults = createDefaults;
 exports.provideDefaults = provideDefaults;
 exports.useDefaults = useDefaults;

package/dist/src/composables/Commons/defaults.composable.d.ts

@@ -1,5 +1,16 @@
 import { type Ref } from 'vue';
 import type { IDefault } from '../../interfaces';
+/**
+ * `kebab-case` → `camelCase`. Used to recognise prop names that were passed
+ * as kebab-case attributes on the parent vnode.
+ *
+ * Exported (not just used internally by `usePassedProps`/`useDefaults`) so
+ * `theme-props-resolver.composable.ts` can match `vnode.props` keys against
+ * declared prop names with the EXACT same rule — see ADR-005. Two independent
+ * implementations of this matching rule is exactly the kind of drift the
+ * "reuse before writing" policy exists to prevent.
+ */
+export declare function camelize(str: string): string;
 /**
  * Was-prop-passed factory.
  *

package/dist/src/composables/Commons/defaults.composable.js

@@ -1,7 +1,7 @@
 import { computed, inject, provide, ref } from "vue";
 import { ORIGAM_DEFAULTS_KEY } from "../../consts/index.js";
 import { getCurrentInstance, getCurrentInstanceName, mergeDeep } from "../../utils/index.js";
-function camelize(str) {
+export function camelize(str) {
   return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 }
 export function usePassedProps(_props, instanceLabel = "usePassedProps") {

package/dist/src/composables/Commons/loader.composable.cjs

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useLoader = useLoader;
 var _vue = require("vue");
+var _enums = require("../../enums/index.cjs");
 var _utils = require("../../utils/index.cjs");
-function useLoader(props, defaultKind = "circular", name = (0, _utils.getCurrentInstanceName)()) {
+function useLoader(props, defaultKind = _enums.LOADER_KIND.CIRCULAR, name = (0, _utils.getCurrentInstanceName)()) {
   const isLoading = (0, _vue.computed)(() => {
     const v = props.loading;
     if (v === false || v === void 0 || v === null) return false;

package/dist/src/composables/Commons/loader.composable.d.ts

@@ -1,28 +1,7 @@
 import { type ComputedRef } from 'vue';
-import type { ILoaderProps } from '../../interfaces';
-import type { TLoaderConfig, TLoaderKind } from '../../types';
-/**
- * Resolved loader state — what each consumer component reads to decide
- * which renderer to mount and with which props.
- *
- * @remarks
- * `overrides` is intentionally typed as `Omit<TLoaderConfig, 'type'>`. After
- * the discriminant `type` is destructured at runtime, TypeScript can no
- * longer narrow the union. Consumer components must access optional fields
- * defensively (e.g. `(overrides as { modelValue?: number }).modelValue`).
- */
-export interface IResolvedLoader {
-    /** Whether ANY loading state is active. */
-    isActive: boolean;
-    /** Which renderer to use ('line' / 'circular' / 'skeleton'). */
-    kind: TLoaderKind;
-    /** Determinate progress value (0..100) when the user passed a number; else undefined. */
-    modelValue: number | undefined;
-    /** Indeterminate when `true`, determinate when a number was passed. */
-    indeterminate: boolean;
-    /** Per-kind override props the consumer should v-bind on the renderer. */
-    overrides: Omit<TLoaderConfig, 'type'>;
-}
+import type { ILoaderProps, IResolvedLoader } from '../../interfaces';
+import type { TLoaderKind } from '../../types';
+export type { IResolvedLoader } from '../../interfaces';
 /**
  * Resolve the polymorphic `loading` prop into a normalised descriptor.
  *

package/dist/src/composables/Commons/loader.composable.js

@@ -1,6 +1,7 @@
 import { computed } from "vue";
+import { LOADER_KIND } from "../../enums/index.js";
 import { getCurrentInstanceName } from "../../utils/index.js";
-export function useLoader(props, defaultKind = "circular", name = getCurrentInstanceName()) {
+export function useLoader(props, defaultKind = LOADER_KIND.CIRCULAR, name = getCurrentInstanceName()) {
   const isLoading = computed(() => {
     const v = props.loading;
     if (v === false || v === void 0 || v === null) return false;

package/dist/src/composables/Commons/margin.composable.cjs

@@ -7,9 +7,8 @@ exports.useMargin = useMargin;
 var _vue = require("vue");
 var _consts = require("../../consts/index.cjs");
 var _utils = require("../../utils/index.cjs");
-const UTILITY_MARGIN_SCALE = /* @__PURE__ */new Set(["0", "1", "2", "3", "4", "5", "6", "8", "10", "12"]);
 function isUtilityMarginScale(value) {
-  return typeof value === "string" && UTILITY_MARGIN_SCALE.has(value);
+  return typeof value === "string" && _consts.SPACING_SCALE_STEPS.includes(value);
 }
 function useMargin(props, name = (0, _utils.getCurrentInstanceName)()) {
   const marginClasses = (0, _vue.computed)(() => {
@@ -26,18 +25,33 @@ function useMargin(props, name = (0, _utils.getCurrentInstanceName)()) {
   const marginStyles = (0, _vue.computed)(() => {
     const margin = props.margin;
     const styles = [];
-    if (isUtilityMarginScale(margin)) return styles;
-    if (typeof margin === "string" && margin !== "") {
-      const match = _consts.MARGIN_REGEX.exec(margin)?.groups;
-      if (match) {
-        Object.keys(match).forEach(key => {
-          const values = String(match[key]).split(" ");
-          styles.push(...(0, _utils.formatMarginStylesVar)(values));
-        });
+    if (!isUtilityMarginScale(margin)) {
+      if (typeof margin === "string" && margin !== "") {
+        const match = _consts.MARGIN_REGEX.exec(margin)?.groups;
+        if (match) {
+          Object.keys(match).forEach(key => {
+            const values = String(match[key]).split(" ");
+            styles.push(...(0, _utils.formatMarginStylesVar)(values));
+          });
+        }
+      } else if (typeof margin === "number") {
+        styles.push(`margin: ${(0, _utils.convertToUnit)(margin)}`);
       }
-    } else if (typeof margin === "number") {
-      styles.push(`margin: ${(0, _utils.convertToUnit)(margin)}`);
     }
+    _consts.MARGIN_LOGICAL_AXIS_MAP.forEach(({
+      axis,
+      prop
+    }) => {
+      const resolved = (0, _utils.resolveSpacingValue)(props[prop]);
+      if (resolved) styles.push(`margin-${axis}: ${resolved}`);
+    });
+    _consts.MARGIN_POSITION_MAP.forEach(({
+      side,
+      prop
+    }) => {
+      const resolved = (0, _utils.resolveSpacingValue)(props[prop]);
+      if (resolved) styles.push(`margin-${side}: ${resolved}`);
+    });
     return styles;
   });
   return {