origam 2.14.1 → 2.16.0

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 },
@@ -239,11 +239,11 @@ const props = defineProps({
   autoplay: { type: Boolean, required: false, default: false },
   muted: { type: Boolean, required: false, default: false },
   loop: { type: Boolean, required: false, default: false },
-  controls: { type: String, required: false, default: "custom" },
+  controls: { type: null, required: false, default: "custom" },
   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,13 +298,14 @@ 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();
 const ICONS = {
   PLAY: MDI_ICONS.PLAY,
   PAUSE: MDI_ICONS.PAUSE,
@@ -533,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;
@@ -668,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;
@@ -706,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);
@@ -825,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/components/VirtualScroll/OrigamVirtualScroll.vue

@@ -104,6 +104,7 @@ const props = defineProps({
   scrollDuration: { type: Number, required: false },
   scrollEasing: { type: String, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const vm = getCurrentInstance("OrigamVirtualScroll");
 const { dimensionStyles } = useDimension(props);

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

@@ -31,6 +31,7 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
 });
 const emits = defineEmits(["update:height"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const { resizeRef, contentRect } = useResizeObserver(void 0, "border");

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

@@ -59,6 +59,7 @@ const resolvedOptions = computed(() => ({
   pointerEvents: props.pointerEvents,
   zIndex: props.zIndex
 }));
+defineSlots();
 const { patternUrl } = useWatermark(resolvedOptions);
 const rootEl = ref(null);
 const layerEl = ref(null);

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

@@ -133,6 +133,7 @@ const props = defineProps({
   activeClass: { type: String, required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const group = useGroup(props, ORIGAM_WINDOW_GROUP_KEY);

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

@@ -42,6 +42,7 @@ const props = defineProps({
   selectedClass: { type: String, required: false }
 });
 defineEmits(["group:selected"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const window = inject(ORIGAM_WINDOW_KEY);
 const groupItem = useGroupItem(props, ORIGAM_WINDOW_GROUP_KEY);

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/border.composable.cjs

@@ -53,6 +53,24 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
       } = props;
       if (!(0, _utils.isEmpty)(borderColor)) styles.push(`border-color: ${borderColor}`);
       if (!(0, _utils.isEmpty)(borderStyle)) styles.push(`border-style: ${borderStyle}`);
+      _consts.BORDER_LOGICAL_AXIS_MAP.forEach(({
+        axis,
+        widthProp
+      }) => {
+        const axisValue = props[widthProp];
+        if (typeof axisValue === "number") {
+          styles.push(`border-${axis}-width: ${(0, _utils.convertToUnit)(axisValue)}`);
+          styles.push(`border-${axis}-style: solid`);
+          styles.push(`border-${axis}-color: currentColor`);
+        } else if (axisValue === true) {
+          styles.push(`border-${axis}-width: var(--origam-border__width---thin)`);
+          styles.push(`border-${axis}-style: solid`);
+          styles.push(`border-${axis}-color: currentColor`);
+        } else if (typeof axisValue === "string" && axisValue !== "") {
+          const parsed = (0, _utils.parseBorderPositionValue)(axisValue);
+          if (parsed) styles.push(...(0, _utils.formatBorderPositionStylesVar)(axis, parsed));
+        }
+      });
       _consts.BORDER_POSITION_MAP.forEach(({
         side,
         widthProp,

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

@@ -12,16 +12,20 @@ import { TDirectionBoth } from "../../types";
  *
  *   1. global `border` shorthand (1/2/4-value, logical properties)
  *   2. global standalone `borderColor` / `borderStyle`
- *   3. per-side `borderTop` / `borderRight` / `borderBottom` / `borderLeft`
- *      (physical properties — width, and style/color when a full string
- *      like `"2px dashed red"` is given)
- *   4. per-side `borderTopColor` / `borderRightColor` /
+ *   3. logical-axis `borderBlock` / `borderInline` (width, and
+ *      style/color when a full string like `"2px dashed red"` is given)
+ *   4. per-side `borderTop` / `borderRight` / `borderBottom` / `borderLeft`
+ *      (physical properties — more specific than the axis rung above:
+ *      `borderTop` overrides whatever `borderBlock` set for the top edge)
+ *   5. per-side `borderTopColor` / `borderRightColor` /
  *      `borderBottomColor` / `borderLeftColor`
  *
- * So `borderTop` beats `border` for the top side, and `borderTopColor`
- * beats both the color embedded in `borderTop` and the global
- * `borderColor` — each rung only overrides the physical side(s) it
- * actually targets, everything else keeps cascading from the rung below.
+ * So `borderBlock` beats `border` for the top+bottom edges, `borderTop`
+ * beats both `border` and `borderBlock` for the top side specifically,
+ * and `borderTopColor` beats the color embedded in `borderTop`, the
+ * axis-level color, and the global `borderColor` — each rung only
+ * overrides the side(s)/axis it actually targets, everything else keeps
+ * cascading from the rung below.
  ********************************************************/
 export declare function useBorder(props: IBorderProps | Ref<boolean | number | string | TDirectionBoth | Array<TDirectionBoth> | null | undefined>, name?: string): {
     borderClasses: import("vue").ComputedRef<string[]>;

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

@@ -1,5 +1,5 @@
 import { computed, isRef } from "vue";
-import { BORDER_POSITION_MAP, BORDER_REGEX, DIRECTION_ARRAY } from "../../consts/index.js";
+import { BORDER_LOGICAL_AXIS_MAP, BORDER_POSITION_MAP, BORDER_REGEX, DIRECTION_ARRAY } from "../../consts/index.js";
 import {
   convertToUnit,
   formatBorderPositionStylesVar,
@@ -56,6 +56,21 @@ export function useBorder(props, name = getCurrentInstanceName()) {
       const { borderColor, borderStyle } = props;
       if (!isEmpty(borderColor)) styles.push(`border-color: ${borderColor}`);
       if (!isEmpty(borderStyle)) styles.push(`border-style: ${borderStyle}`);
+      BORDER_LOGICAL_AXIS_MAP.forEach(({ axis, widthProp }) => {
+        const axisValue = props[widthProp];
+        if (typeof axisValue === "number") {
+          styles.push(`border-${axis}-width: ${convertToUnit(axisValue)}`);
+          styles.push(`border-${axis}-style: solid`);
+          styles.push(`border-${axis}-color: currentColor`);
+        } else if (axisValue === true) {
+          styles.push(`border-${axis}-width: var(--origam-border__width---thin)`);
+          styles.push(`border-${axis}-style: solid`);
+          styles.push(`border-${axis}-color: currentColor`);
+        } else if (typeof axisValue === "string" && axisValue !== "") {
+          const parsed = parseBorderPositionValue(axisValue);
+          if (parsed) styles.push(...formatBorderPositionStylesVar(axis, parsed));
+        }
+      });
       BORDER_POSITION_MAP.forEach(({ side, widthProp, colorProp }) => {
         const sideValue = props[widthProp];
         const sideColor = props[colorProp];

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;