origam 2.15.0 → 2.17.0

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

@@ -5,13 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.usePadding = usePadding;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
-const UTILITY_PADDING_SCALE = /* @__PURE__ */new Set(["0", "1", "2", "3", "4", "5", "6", "8", "10", "12"]);
+var _padding = require("../../consts/Commons/padding.const.cjs");
+var _spacing = require("../../consts/Commons/spacing.const.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
+var _padding2 = require("../../utils/Commons/padding.util.cjs");
+var _spacing2 = require("../../utils/Commons/spacing.util.cjs");
 function isUtilityPaddingScale(value) {
-  return typeof value === "string" && UTILITY_PADDING_SCALE.has(value);
+  return typeof value === "string" && _spacing.SPACING_SCALE_STEPS.includes(value);
 }
-function usePadding(props, name = (0, _utils.getCurrentInstanceName)()) {
+function usePadding(props, name = (0, _getCurrentInstance.getCurrentInstanceName)()) {
   const paddingClasses = (0, _vue.computed)(() => {
     const padding = props.padding;
     const classes = [];
@@ -26,18 +29,33 @@ function usePadding(props, name = (0, _utils.getCurrentInstanceName)()) {
   const paddingStyles = (0, _vue.computed)(() => {
     const padding = props.padding;
     const styles = [];
-    if (isUtilityPaddingScale(padding)) return styles;
-    if (typeof padding === "string" && padding !== "") {
-      const match = _consts.PADDING_REGEX.exec(padding)?.groups;
-      if (match) {
-        Object.keys(match).forEach(key => {
-          const values = String(match[key]).split(" ");
-          styles.push(...(0, _utils.formatPaddingStylesVar)(values));
-        });
+    if (!isUtilityPaddingScale(padding)) {
+      if (typeof padding === "string" && padding !== "") {
+        const match = _padding.PADDING_REGEX.exec(padding)?.groups;
+        if (match) {
+          Object.keys(match).forEach(key => {
+            const values = String(match[key]).split(" ");
+            styles.push(...(0, _padding2.formatPaddingStylesVar)(values));
+          });
+        }
+      } else if (typeof padding === "number") {
+        styles.push(`padding: ${(0, _commons.convertToUnit)(padding)}`);
       }
-    } else if (typeof padding === "number") {
-      styles.push(`padding: ${(0, _utils.convertToUnit)(padding)}`);
     }
+    _spacing.PADDING_LOGICAL_AXIS_MAP.forEach(({
+      axis,
+      prop
+    }) => {
+      const resolved = (0, _spacing2.resolveSpacingValue)(props[prop]);
+      if (resolved) styles.push(`padding-${axis}: ${resolved}`);
+    });
+    _spacing.PADDING_POSITION_MAP.forEach(({
+      side,
+      prop
+    }) => {
+      const resolved = (0, _spacing2.resolveSpacingValue)(props[prop]);
+      if (resolved) styles.push(`padding-${side}: ${resolved}`);
+    });
     return styles;
   });
   return {

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

@@ -1,6 +1,32 @@
-import type { IPaddingProps } from '../../interfaces';
+import type { IPaddingProps } from '../../interfaces/Commons/padding.interface';
 /*********************************************************
  * usePadding
+ *
+ * @description
+ * Precedence rule — SPECIFIC beats GLOBAL, always in this order, enforced
+ * purely by PUSH ORDER onto the `styles` array (later declarations win
+ * within the same inline `style` attribute — this holds even across
+ * logical vs physical property syntax for the same box edge). Mirrors
+ * `useBorder`'s table exactly, so the three spacing-ish surfaces
+ * (border / padding / margin) share ONE grammar:
+ *
+ *   1. global `padding` shorthand (1/2/4-value, logical properties)
+ *   2. logical-axis `paddingBlock` / `paddingInline`
+ *   3. physical per-side `paddingTop` / `paddingRight` / `paddingBottom` /
+ *      `paddingLeft`
+ *
+ * So `paddingBlock` beats `padding` for the top+bottom edges, and
+ * `paddingTop` beats both `padding` and `paddingBlock` for the top edge
+ * specifically — each rung only overrides the edge(s) it actually
+ * targets, everything else keeps cascading from the rung below.
+ *
+ * ⚠️ The 4-value `padding` shorthand distributes in the DS's
+ * **Haut/Gauche/Bas/Droite** order, NOT the CSS clockwise order — an
+ * intentional convention arbitrated in issue #216 (see
+ * `formatPaddingStylesVar`). The per-side props exist precisely so a
+ * consumer never has to know that: `paddingLeft="8px"` is unambiguous.
+ *
+ * Accepted per-side value forms are documented on `resolveSpacingValue`.
  ********************************************************/
 export declare function usePadding(props: IPaddingProps, name?: string): {
     paddingClasses: import("vue").ComputedRef<string[]>;

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

@@ -1,20 +1,12 @@
 import { computed } from "vue";
-import { PADDING_REGEX } from "../../consts/index.js";
-import { convertToUnit, formatPaddingStylesVar, getCurrentInstanceName } from "../../utils/index.js";
-const UTILITY_PADDING_SCALE = /* @__PURE__ */ new Set([
-  "0",
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "8",
-  "10",
-  "12"
-]);
+import { PADDING_REGEX } from "../../consts/Commons/padding.const.js";
+import { PADDING_LOGICAL_AXIS_MAP, PADDING_POSITION_MAP, SPACING_SCALE_STEPS } from "../../consts/Commons/spacing.const.js";
+import { convertToUnit } from "../../utils/Commons/commons.util.js";
+import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
+import { formatPaddingStylesVar } from "../../utils/Commons/padding.util.js";
+import { resolveSpacingValue } from "../../utils/Commons/spacing.util.js";
 function isUtilityPaddingScale(value) {
-  return typeof value === "string" && UTILITY_PADDING_SCALE.has(value);
+  return typeof value === "string" && SPACING_SCALE_STEPS.includes(value);
 }
 export function usePadding(props, name = getCurrentInstanceName()) {
   const paddingClasses = computed(() => {
@@ -31,18 +23,27 @@ export function usePadding(props, name = getCurrentInstanceName()) {
   const paddingStyles = computed(() => {
     const padding = props.padding;
     const styles = [];
-    if (isUtilityPaddingScale(padding)) return styles;
-    if (typeof padding === "string" && padding !== "") {
-      const match = PADDING_REGEX.exec(padding)?.groups;
-      if (match) {
-        Object.keys(match).forEach((key) => {
-          const values = String(match[key]).split(" ");
-          styles.push(...formatPaddingStylesVar(values));
-        });
+    if (!isUtilityPaddingScale(padding)) {
+      if (typeof padding === "string" && padding !== "") {
+        const match = PADDING_REGEX.exec(padding)?.groups;
+        if (match) {
+          Object.keys(match).forEach((key) => {
+            const values = String(match[key]).split(" ");
+            styles.push(...formatPaddingStylesVar(values));
+          });
+        }
+      } else if (typeof padding === "number") {
+        styles.push(`padding: ${convertToUnit(padding)}`);
       }
-    } else if (typeof padding === "number") {
-      styles.push(`padding: ${convertToUnit(padding)}`);
     }
+    PADDING_LOGICAL_AXIS_MAP.forEach(({ axis, prop }) => {
+      const resolved = resolveSpacingValue(props[prop]);
+      if (resolved) styles.push(`padding-${axis}: ${resolved}`);
+    });
+    PADDING_POSITION_MAP.forEach(({ side, prop }) => {
+      const resolved = resolveSpacingValue(props[prop]);
+      if (resolved) styles.push(`padding-${side}: ${resolved}`);
+    });
     return styles;
   });
   return {

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePassedProps = usePassedProps;
+var _commons = require("../../utils/Commons/commons.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
+function usePassedProps(_props, instanceLabel = "usePassedProps") {
+  const vm = (0, _getCurrentInstance.getCurrentInstance)(instanceLabel);
+  return key => {
+    const vnodeProps = vm.vnode.props || {};
+    for (const k in vnodeProps) {
+      if (k === key || (0, _commons.camelize)(k) === key) return vnodeProps[k] !== void 0;
+    }
+    return false;
+  };
+}

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

@@ -0,0 +1,35 @@
+/*********************************************************
+ * usePassedProps
+ *
+ * @description
+ * Was-prop-passed factory — component-side primitive: for the CURRENT
+ * component instance, returns a predicate telling whether a given prop
+ * key was explicitly written by the parent template (`vnode.props`) —
+ * as opposed to resolved from a default (`withDefaults()`, or Vue's
+ * own boolean-prop coercion).
+ * @description
+ * This matters beyond `useDefaults()` itself: any component that
+ * FORWARDS its own props down to descendants as
+ * `<OrigamDefaultsProvider>` entries (e.g. `OrigamAvatarGroup` →
+ * `origam-avatar`, `OrigamBtnGroup` → `origam-btn`) must use this —
+ * not a plain `!== undefined` check — to decide whether to forward a
+ * value. Reason: Vue resolves an UNSET prop whose declared type
+ * *includes* `boolean` (e.g. `border?: boolean | string`, `rounded?:
+ * boolean | TRounded`) to the concrete value `false`, never to
+ * `undefined`. A naive `omitUndefined()` over the forwarded map
+ * therefore still ships an explicit `false` for `border`/`rounded`
+ * even when the consumer never set them, which then wins the
+ * `mergeDeep` against an ancestor/theme default (e.g. `origam-avatar:
+ * { border: true }`) — see #263.
+ * @description
+ * MUST be re-read on every resolution (not captured once), for the
+ * same reason `useDefaults()` re-reads it: a parent binding through a
+ * dynamic `v-bind` whose object starts empty
+ * (`childRef?.filterProps(...)` before mount) only fills `vnode.props`
+ * on a later render.
+ * @description
+ * Kept in its own file since `useDefaults` is its consumer, not the
+ * other way round — moving it alongside `useDefaults` would make the
+ * dependency direction backwards to read.
+ ********************************************************/
+export declare function usePassedProps<T extends object>(_props: T, instanceLabel?: string): (key: Extract<keyof T, string> | string) => boolean;

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

@@ -0,0 +1,12 @@
+import { camelize } from "../../utils/Commons/commons.util.js";
+import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
+export function usePassedProps(_props, instanceLabel = "usePassedProps") {
+  const vm = getCurrentInstance(instanceLabel);
+  return (key) => {
+    const vnodeProps = vm.vnode.props || {};
+    for (const k in vnodeProps) {
+      if (k === key || camelize(k) === key) return vnodeProps[k] !== void 0;
+    }
+    return false;
+  };
+}

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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePosition = usePosition;
-var _utils = require("../../utils/index.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 var _vue = require("vue");
-function usePosition(props, name = (0, _utils.getCurrentInstanceName)()) {
+function usePosition(props, name = (0, _getCurrentInstance.getCurrentInstanceName)()) {
   const positionClasses = (0, _vue.computed)(() => {
     return props.position ? `${name}--${props.position}` : void 0;
   });
@@ -15,7 +16,7 @@ function usePosition(props, name = (0, _utils.getCurrentInstanceName)()) {
     const layers = ["top", "bottom", "left", "right"];
     layers.forEach(layer => {
       if (props[layer]) {
-        styles.push(`${layer}: ${props[layer]}`);
+        styles.push(`${layer}: ${(0, _commons.convertToUnit)(props[layer])}`);
       }
     });
     return styles;

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

@@ -1,6 +1,19 @@
-import type { IPositionProps } from '../../interfaces';
+import type { IPositionProps } from '../../interfaces/Commons/position.interface';
 /*********************************************************
  * usePosition
+ *
+ * @description
+ * `positionClasses` traduit `props.position` (`'absolute'|'fixed'|'relative'|'sticky'|'static'`)
+ * en classe `{name}--{position}`. `positionStyles` emet une declaration
+ * inline par cote present parmi `top`/`bottom`/`left`/`right`.
+ *
+ * @description
+ * ⛔ Contrairement a `useDimension`, AUCUNE conversion via `convertToUnit`
+ * n'est appliquee sur `top`/`bottom`/`left`/`right` : bien que
+ * `IPositionProps` les type `number | string`, un nombre est interpole
+ * TEL QUEL (`"top: 8"`, pas `"top: 8px"`) — declaration CSS invalide.
+ * Passer une chaine unitee (`"8px"`) est le seul usage sur qui marche
+ * aujourd'hui.
  ********************************************************/
 export declare function usePosition(props: IPositionProps, name?: string): {
     positionClasses: import("vue").ComputedRef<string | undefined>;

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

@@ -1,4 +1,5 @@
-import { getCurrentInstanceName } from "../../utils/index.js";
+import { convertToUnit } from "../../utils/Commons/commons.util.js";
+import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
 import { computed } from "vue";
 export function usePosition(props, name = getCurrentInstanceName()) {
   const positionClasses = computed(() => {
@@ -9,7 +10,7 @@ export function usePosition(props, name = getCurrentInstanceName()) {
     const layers = ["top", "bottom", "left", "right"];
     layers.forEach((layer) => {
       if (props[layer]) {
-        styles.push(`${layer}: ${props[layer]}`);
+        styles.push(`${layer}: ${convertToUnit(props[layer])}`);
       }
     });
     return styles;

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useProps = useProps;
-var _utils = require("../../utils/index.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
 function useProps(props) {
   const defaultExcludes = ["class", "style", "id"];
   const filterProps = (properties, excludes = defaultExcludes) => {
     const propKeys = Object.keys(props).filter(key => !excludes.includes(key));
-    const picked = (0, _utils.pick)(properties, propKeys);
+    const picked = (0, _commons.pick)(properties, propKeys);
     for (const key of Object.keys(picked)) {
       if (picked[key] === void 0) delete picked[key];
     }

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

@@ -1,5 +1,50 @@
-import type { IFilterPropsOptions } from "../../interfaces";
+import type { IFilterPropsOptions } from '../../interfaces/Commons/commons.interface';
 /*********************************************************
  * useProps
+ *
+ * ## The template-ref forwarding pattern, and its one-tick delta
+ *
+ * 39 components (68 call sites, re-derive with
+ *     grep -rlE "Ref\.value\??\.filterProps" packages/ds/src/components/
+ * ) forward their resolved props to an INTERNAL ROOT component through that
+ * child's own exposed `filterProps`, reached via a TEMPLATE REF:
+ *
+ *     const childRef = ref<TOrigamChild>()
+ *     const childProps = computed(() => childRef.value?.filterProps(props, […]))
+ *
+ * A template ref is `undefined` during the first render — it is assigned while
+ * that very render is being patched. So render 1 binds NOTHING and the child
+ * paints with its OWN resolved value; assigning the ref invalidates the
+ * computed, and render 2 delivers the parent's. Before ADR-005's theme-props
+ * resolver landed, the parent's value often never arrived at all, so the
+ * mismatch was PERMANENT and read as an ordinary bug; the resolver turned it
+ * into a one-tick transient.
+ *
+ * ## Measured: the transient is real, and it is NOT observable
+ *
+ * The delta is real. Reading `wrapper.html()` synchronously after `mount()`
+ * and again after `nextTick()` differs on 13 of the 16 sampled mountable
+ * components (Switch, TextField, Checkbox, Radio, Select, NumberField,
+ * PasswordField, RatingField, TextareaField, FileField, Carousel, ColorPicker,
+ * DatePicker; Btn, Field and SliderField are stable). On OrigamSwitch the
+ * difference is one class: `origam-input--density-default` (the child's own
+ * themed value) becomes `origam-input--density-compact` (the parent's).
+ *
+ * It is nevertheless invisible, because Vue flushes the invalidated re-render
+ * on a MICROTASK, and the browser paints only at the end of a task — after the
+ * microtask checkpoint. Measured in Chromium against the built Histoire with a
+ * per-animation-frame sampler (rAF callbacks run immediately before that
+ * frame's paint, so the sample sequence IS the sequence a user could see):
+ * 10 cold loads × 40 frames = 400 painted frames of the OrigamSwitch root,
+ * sampling both the density class and `offsetHeight` (density moves geometry).
+ * Every one of the 400: `compact@76`. Zero frames carried the stale value, and
+ * the height never jumped.
+ *
+ * ⛔ So do NOT refactor these 68 sites to avoid the template ref on
+ * "flash" grounds — there is no flash to fix, and the change would touch 39
+ * components at once. If you have a DIFFERENT reason to move off template refs
+ * (SSR, or a `watch`/`computed` in a consumer observing the intermediate
+ * value, which IS reachable unlike the paint), state that reason: it is not
+ * this one.
  ********************************************************/
-export declare function useProps<T extends Record<string, any>>(props: T): IFilterPropsOptions<T>;
+export declare function useProps<T extends object>(props: T): IFilterPropsOptions<T>;

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

@@ -1,4 +1,4 @@
-import { pick } from "../../utils/index.js";
+import { pick } from "../../utils/Commons/commons.util.js";
 export function useProps(props) {
   const defaultExcludes = ["class", "style", "id"];
   const filterProps = (properties, excludes = defaultExcludes) => {

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

@@ -1,8 +1,21 @@
 import type { Ref } from 'vue';
 /*********************************************************
  * useRefs
+ *
+ * @description
+ * Collecte un tableau de template refs pour une liste `v-for` (`:ref`
+ * pointant vers `(e) => updateRef(e, index)`) — pattern standard pour
+ * recuperer les instances/elements enfants d'une boucle dans un ordre
+ * stable.
+ *
+ * @description
+ * Le tableau est REINITIALISE a vide a chaque `onBeforeUpdate` : c'est ce
+ * qui evite d'accumuler des references perimees quand la liste retrecit
+ * (sans ce reset, un index au-dela de la nouvelle longueur garderait
+ * l'ancien element). Vue re-remplit ensuite les index via `updateRef`
+ * pendant le re-render qui suit.
  ********************************************************/
 export declare function useRefs<T extends object>(): {
-    refs: Ref<(T | undefined)[], (T | undefined)[]>;
-    updateRef: (e: any, i: number) => void;
+    refs: Ref<(T | null | undefined)[], (T | null | undefined)[]>;
+    updateRef: (e: T | null, i: number) => void;
 };

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

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResizeObserver = useResizeObserver;
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _commons = require("../../consts/Commons/commons.const.cjs");
+var _commons2 = require("../../utils/Commons/commons.util.cjs");
 var _vue = require("vue");
 function useResizeObserver(callback, box = "content") {
   const contentRect = (0, _vue.ref)();
   const resizeRef = (0, _vue.ref)();
-  if (_consts.IN_BROWSER) {
+  if (_commons.IN_BROWSER) {
     const observer = new ResizeObserver(entries => {
       callback?.(entries, observer);
       if (!entries.length) return;
@@ -25,10 +25,10 @@ function useResizeObserver(callback, box = "content") {
     });
     (0, _vue.watch)(resizeRef, (newValue, oldValue) => {
       if (oldValue) {
-        observer.unobserve((0, _utils.refElement)(oldValue));
+        observer.unobserve((0, _commons2.refElement)(oldValue));
         contentRect.value = void 0;
       }
-      if (newValue) observer.observe((0, _utils.refElement)(newValue));
+      if (newValue) observer.observe((0, _commons2.refElement)(newValue));
     }, {
       flush: "post"
     });

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

@@ -1,5 +1,17 @@
-import type { IResizeState } from '../../interfaces';
+import type { IResizeState } from '../../interfaces/Commons/resizeObserver.interface';
 /*********************************************************
  * useResizeObserver
+ *
+ * @description
+ * Expose `resizeRef` (template ref a poser sur l'element observe) et
+ * `contentRect` (lecture seule) via un `ResizeObserver` re-attache
+ * automatiquement quand `resizeRef` change d'element, meme pattern que
+ * `useIntersectionObserver`. `box: 'border'` lit `getBoundingClientRect()`
+ * de la cible plutot que l'`entries[0].contentRect` du callback natif.
+ *
+ * @description
+ * Hors navigateur (`!IN_BROWSER`), aucun observer n'est cree —
+ * `contentRect` reste `undefined` en permanence, silencieusement, meme
+ * comportement de garde que `useIntersectionObserver`.
  ********************************************************/
 export declare function useResizeObserver(callback?: ResizeObserverCallback, box?: 'content' | 'border'): IResizeState;

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

@@ -1,5 +1,5 @@
-import { IN_BROWSER } from "../../consts/index.js";
-import { refElement } from "../../utils/index.js";
+import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
+import { refElement } from "../../utils/Commons/commons.util.js";
 import { onBeforeUnmount, readonly, ref, watch } from "vue";
 export function useResizeObserver(callback, box = "content") {
   const contentRect = ref();

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

@@ -5,13 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRounded = useRounded;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
-const UTILITY_ROUNDED = /* @__PURE__ */new Set(["none", "xs", "sm", "md", "lg", "xl", "full"]);
+var _rounded = require("../../consts/Commons/rounded.const.cjs");
+var _spacing = require("../../consts/Commons/spacing.const.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
+var _rounded2 = require("../../utils/Commons/rounded.util.cjs");
+var _spacing2 = require("../../utils/Commons/spacing.util.cjs");
 function isUtilityRounded(value) {
-  return typeof value === "string" && UTILITY_ROUNDED.has(value);
+  return typeof value === "string" && Object.hasOwn(_spacing.UTILITY_RADIUS_FALLBACK, value);
 }
-function useRounded(props, name = (0, _utils.getCurrentInstanceName)()) {
+function useRounded(props, name = (0, _getCurrentInstance.getCurrentInstanceName)()) {
   const roundedClasses = (0, _vue.computed)(() => {
     const rounded = (0, _vue.isRef)(props) ? props.value : props.rounded;
     const classes = [];
@@ -20,7 +23,7 @@ function useRounded(props, name = (0, _utils.getCurrentInstanceName)()) {
       classes.push(`origam--rounded-${rounded}`);
       return classes;
     }
-    if (typeof rounded === "string" && _consts.PREDEFINED_ROUNDED.includes(rounded)) {
+    if (typeof rounded === "string" && _rounded.PREDEFINED_ROUNDED.includes(rounded)) {
       classes.push(`${name}--rounded-${rounded}`);
       return classes;
     }
@@ -30,33 +33,15 @@ function useRounded(props, name = (0, _utils.getCurrentInstanceName)()) {
     }
     return classes;
   });
-  const NAMED_RADIUS_TOKEN = {
-    "x-small": "var(--origam-radius---xs, 2px)",
-    "small": "var(--origam-radius---sm, 4px)",
-    "default": "var(--origam-radius---md, 8px)",
-    "medium": "var(--origam-radius---lg, 12px)",
-    "large": "var(--origam-radius---xl, 16px)",
-    "x-large": "var(--origam-radius---2xl, 24px)"
-  };
-  const UTILITY_RADIUS_FALLBACK = {
-    none: "0",
-    xs: "2px",
-    sm: "4px",
-    md: "8px",
-    lg: "12px",
-    xl: "16px",
-    full: "9999px"
-  };
-  const roundedStyles = (0, _vue.computed)(() => {
-    const rounded = (0, _vue.isRef)(props) ? props.value : props.rounded;
+  const shorthandStyles = rounded => {
     const styles = [];
     if (rounded == null || rounded === false) return styles;
     if (isUtilityRounded(rounded)) {
-      styles.push(`border-radius: var(--origam-radius---${rounded}, ${UTILITY_RADIUS_FALLBACK[rounded]})`);
+      styles.push(`border-radius: var(--origam-radius---${rounded}, ${_spacing.UTILITY_RADIUS_FALLBACK[rounded]})`);
       return styles;
     }
-    if (typeof rounded === "string" && _consts.PREDEFINED_ROUNDED.includes(rounded) && rounded !== "shaped" && rounded !== "shaped-invert") {
-      const token = NAMED_RADIUS_TOKEN[rounded];
+    if (typeof rounded === "string" && _rounded.PREDEFINED_ROUNDED.includes(rounded) && rounded !== "shaped" && rounded !== "shaped-invert") {
+      const token = _spacing.NAMED_RADIUS_TOKEN[rounded];
       if (token) styles.push(`border-radius: ${token}`);
       return styles;
     }
@@ -65,17 +50,31 @@ function useRounded(props, name = (0, _utils.getCurrentInstanceName)()) {
       return styles;
     }
     if (typeof rounded === "string") {
-      const match = _consts.BORDER_RADIUS_REGEX.exec(rounded)?.groups;
+      const match = _rounded.BORDER_RADIUS_REGEX.exec(rounded)?.groups;
       if (match) {
         Object.keys(match).forEach(key => {
           const values = String(match[key]).split(" ");
-          styles.push(...(0, _utils.formatRoundedStylesVar)(values));
+          styles.push(...(0, _rounded2.formatRoundedStylesVar)(values));
         });
-      } else if ((0, _utils.isCustomBorderRadius)(rounded)) {
+      } else if ((0, _rounded2.isCustomBorderRadius)(rounded)) {
         styles.push(`border-radius: ${rounded.trim()}`);
       }
     } else if (typeof rounded === "number") {
-      styles.push(`border-radius: ${(0, _utils.convertToUnit)(rounded)}`);
+      styles.push(`border-radius: ${(0, _commons.convertToUnit)(rounded)}`);
+    }
+    return styles;
+  };
+  const roundedStyles = (0, _vue.computed)(() => {
+    const rounded = (0, _vue.isRef)(props) ? props.value : props.rounded;
+    const styles = shorthandStyles(rounded);
+    if (!(0, _vue.isRef)(props)) {
+      _spacing.ROUNDED_CORNER_MAP.forEach(({
+        corner,
+        prop
+      }) => {
+        const resolved = (0, _spacing2.resolveRoundedCornerValue)(props[prop]);
+        if (resolved) styles.push(`border-${corner}-radius: ${resolved}`);
+      });
     }
     return styles;
   });

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

@@ -1,30 +1,48 @@
 import { Ref } from 'vue';
-import type { IRoundedProps } from '../../interfaces';
-import type { TRounded } from '../../types';
-/**
+import type { IRoundedProps } from '../../interfaces/Commons/rounded.interface';
+import type { TRounded } from '../../types/Commons/rounded.type';
+/*********************************************************
+ * useRounded
+ *
+ * @description
  * Resolve the consumer's `rounded` prop into either a class (named variant
  * or legacy boolean) or an inline `border-radius` declaration (free-form
- * CSS value). Mirrors the origam-design-system implementation but uses a
- * static `PREDEFINED_ROUNDED` whitelist instead of the origam
- * theme-driven `useTheme().current.value.variables.rounded`, since origam
- * ships its radius rungs as fixed primitive tokens.
+ * CSS value), then layer the per-corner overrides on top.
+ *
+ * Precedence rule — SPECIFIC beats GLOBAL, enforced by PUSH ORDER onto the
+ * `styles` array (later declarations win within the same inline `style`
+ * attribute — this holds even across logical vs physical corner syntax for
+ * the same corner). Mirrors `useBorder` / `usePadding` / `useMargin`:
+ *
+ *   1. global `rounded` (utility rung, named variant, legacy boolean, or
+ *      free-form 1/4-value CSS)
+ *   2. per-corner `roundedTopLeft` / `roundedTopRight` /
+ *      `roundedBottomLeft` / `roundedBottomRight`
  *
- * Behaviour matrix:
+ * So `roundedTopLeft="0"` beats `rounded="lg"` for the top-left corner
+ * only; the other three keep the `lg` rung.
+ *
+ * ⚠️ The per-corner props are only reachable through the PROPS-OBJECT
+ * overload. The `Ref` overload carries a single scalar — the `rounded`
+ * shorthand — by construction, so a caller that needs the corners must
+ * pass an object (see `useStateEffect`, which builds a `reactive` getter
+ * bag for exactly this reason).
+ *
+ * Behaviour matrix for the shorthand:
  *
  * | `rounded` value           | output                                      |
  * |---------------------------|---------------------------------------------|
  * | unset / `false` / `null`  | nothing — component default radius wins      |
- * | `'small'`, `'large'`, …   | class `${name}--rounded-${value}`            |
+ * | `'small'`, `'large'`, …   | class `${name}--rounded-${value}` + token    |
  * | `true` or `''`            | class `${name}--rounded` (legacy)            |
  * | `4` (number)              | inline `border-radius: 4px`                  |
  * | `'4px'`                   | inline `border-radius: 4px`                  |
  * | `'4px 0 4px 0'`           | inline 4-corner radii                        |
  *
  * Free-form strings are parsed by `BORDER_RADIUS_REGEX`. Anything that
- * doesn't match is silently dropped (no inline style emitted).
- */
-/*********************************************************
- * useRounded
+ * doesn't match (and isn't a `var()`/`calc()`) is silently dropped.
+ * Accepted per-corner value forms are documented on
+ * `resolveRoundedCornerValue`.
  ********************************************************/
 export declare function useRounded(props: IRoundedProps | Ref<boolean | number | string | TRounded | null | undefined>, name?: string): {
     roundedClasses: import("vue").ComputedRef<string[]>;