origam 2.14.1 → 2.16.0

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 {

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

@@ -1,6 +1,43 @@
 import type { IMarginProps } from '../../interfaces';
 /*********************************************************
  * useMargin
+ *
+ * @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` / `usePadding` exactly:
+ *
+ *   1. global `margin` shorthand (1/2/4-value, logical properties)
+ *   2. logical-axis `marginBlock` / `marginInline`
+ *   3. physical per-side `marginTop` / `marginRight` / `marginBottom` /
+ *      `marginLeft`
+ *
+ * So `marginBlock` beats `margin` for the top+bottom edges, and
+ * `marginTop` beats both `margin` and `marginBlock` for the top edge
+ * specifically.
+ *
+ * ⚠️ The 4-value `margin` shorthand distributes in the DS's
+ * **Haut/Gauche/Bas/Droite** order, NOT the CSS clockwise order — an
+ * intentional convention arbitrated in issue #216 (see
+ * `formatMarginStylesVar`). The per-side props exist precisely so a
+ * consumer never has to know that.
+ *
+ * NOTE ON THE UTILITY CLASSES — the scale steps
+ * (`SPACING_SCALE_STEPS`) are mirrored by global utility classes
+ * (`.origam--m-0` … `.origam--m-12`) that a STRING value opts into
+ * (`margin="4"` → `var(--origam-space---4)`); the NUMBER form keeps its
+ * legacy raw-pixel meaning (`margin={4}` → `4px`). Axis-specific
+ * utilities (`mx`, `my`, `mt`, …) do NOT exist in the manifest, so the
+ * directional props resolve through the INLINE-STYLE path below.
+ *
+ * (An earlier version of this comment claimed `marginTop` / `marginInline`
+ * "continue to fall through to the inline style path until Phase 1.5
+ * lands". That was false in a way worth naming: no such path existed —
+ * the props were parsed by nothing at all and emitted nothing. They now
+ * genuinely do fall through to the inline path, which is what rungs 2
+ * and 3 below implement.)
  ********************************************************/
 export declare function useMargin(props: IMarginProps, name?: string): {
     marginClasses: import("vue").ComputedRef<string[]>;

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

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

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

@@ -67,7 +67,7 @@ const useNested = props => {
         const arr = [];
         if (selected.value) {
           for (const [key, value] of selected.value.entries()) {
-            if (value === "on") arr.push(key);
+            if (value === _enums.SELECTED.ON) arr.push(key);
           }
         }
         return arr;
@@ -181,8 +181,8 @@ function useNestedItem(id, isGroup) {
         parent.root.select(computedId.value, selected, e);
       }
     },
-    isSelected: (0, _vue.computed)(() => Boolean(parent?.root?.selected.value.get((0, _vue.toRaw)(computedId.value)) === "on")),
-    isIndeterminate: (0, _vue.computed)(() => Boolean(parent?.root?.selected.value.get(computedId.value) === "indeterminate")),
+    isSelected: (0, _vue.computed)(() => Boolean(parent?.root?.selected.value.get((0, _vue.toRaw)(computedId.value)) === _enums.SELECTED.ON)),
+    isIndeterminate: (0, _vue.computed)(() => Boolean(parent?.root?.selected.value.get(computedId.value) === _enums.SELECTED.INDETERMINATE)),
     isLeaf: (0, _vue.computed)(() => Boolean(!parent?.root?.children.value.get(computedId.value))),
     isGroupActivator: parent?.isGroupActivator
   };

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

@@ -1,10 +1,11 @@
+import { SELECTED } from '../../enums';
 import type { INestedProps } from '../../interfaces';
 import { Ref } from 'vue';
 export declare const useNested: (props: INestedProps) => {
     children: Ref<Map<unknown, Array<unknown>>>;
     parents: Ref<Map<unknown, unknown>>;
     opened: Ref<Set<unknown>>;
-    selected: Ref<Map<unknown, `${import("../../enums").SELECTED}`>>;
+    selected: Ref<Map<unknown, `${SELECTED}`>>;
     selectedValues: Ref<Array<unknown>>;
     register: (id: unknown, parentId: unknown, isGroup?: boolean) => void;
     unregister: (id: unknown) => void;
@@ -30,7 +31,7 @@ export declare function useNestedItem(id: Ref<unknown>, isGroup: boolean): {
         children: Ref<Map<unknown, Array<unknown>>>;
         parents: Ref<Map<unknown, unknown>>;
         opened: Ref<Set<unknown>>;
-        selected: Ref<Map<unknown, `${import("../../enums").SELECTED}`>>;
+        selected: Ref<Map<unknown, `${SELECTED}`>>;
         selectedValues: Ref<Array<unknown>>;
         register: (id: unknown, parentId: unknown, isGroup?: boolean) => void;
         unregister: (id: unknown) => void;

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

@@ -6,7 +6,7 @@ import {
   ORIGAM_NESTED_KEY,
   SINGLE_OPEN_STRATEGY
 } from "../../consts/index.js";
-import { OPEN_STRATEGY, SELECT_STRATEGY } from "../../enums/index.js";
+import { OPEN_STRATEGY, SELECTED, SELECT_STRATEGY } from "../../enums/index.js";
 import {
   classicSelectStrategy,
   getCurrentInstance,
@@ -79,7 +79,7 @@ export const useNested = (props) => {
         const arr = [];
         if (selected.value) {
           for (const [key, value] of selected.value.entries()) {
-            if (value === "on") arr.push(key);
+            if (value === SELECTED.ON) arr.push(key);
           }
         }
         return arr;
@@ -182,8 +182,8 @@ export function useNestedItem(id, isGroup) {
         parent.root.select(computedId.value, selected, e);
       }
     },
-    isSelected: computed(() => Boolean(parent?.root?.selected.value.get(toRaw(computedId.value)) === "on")),
-    isIndeterminate: computed(() => Boolean(parent?.root?.selected.value.get(computedId.value) === "indeterminate")),
+    isSelected: computed(() => Boolean(parent?.root?.selected.value.get(toRaw(computedId.value)) === SELECTED.ON)),
+    isIndeterminate: computed(() => Boolean(parent?.root?.selected.value.get(computedId.value) === SELECTED.INDETERMINATE)),
     isLeaf: computed(() => Boolean(!parent?.root?.children.value.get(computedId.value))),
     isGroupActivator: parent?.isGroupActivator
   };

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

@@ -7,9 +7,8 @@ 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"]);
 function isUtilityPaddingScale(value) {
-  return typeof value === "string" && UTILITY_PADDING_SCALE.has(value);
+  return typeof value === "string" && _consts.SPACING_SCALE_STEPS.includes(value);
 }
 function usePadding(props, name = (0, _utils.getCurrentInstanceName)()) {
   const paddingClasses = (0, _vue.computed)(() => {
@@ -26,18 +25,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 = _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));
+          });
+        }
+      } else if (typeof padding === "number") {
+        styles.push(`padding: ${(0, _utils.convertToUnit)(padding)}`);
       }
-    } else if (typeof padding === "number") {
-      styles.push(`padding: ${(0, _utils.convertToUnit)(padding)}`);
     }
+    _consts.PADDING_LOGICAL_AXIS_MAP.forEach(({
+      axis,
+      prop
+    }) => {
+      const resolved = (0, _utils.resolveSpacingValue)(props[prop]);
+      if (resolved) styles.push(`padding-${axis}: ${resolved}`);
+    });
+    _consts.PADDING_POSITION_MAP.forEach(({
+      side,
+      prop
+    }) => {
+      const resolved = (0, _utils.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';
 /*********************************************************
  * 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,8 @@
 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_LOGICAL_AXIS_MAP, PADDING_POSITION_MAP, PADDING_REGEX, SPACING_SCALE_STEPS } from "../../consts/index.js";
+import { convertToUnit, formatPaddingStylesVar, getCurrentInstanceName, resolveSpacingValue } from "../../utils/index.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 +19,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/props.composable.d.ts

@@ -1,5 +1,50 @@
 import type { IFilterPropsOptions } from "../../interfaces";
 /*********************************************************
  * 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>;

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

@@ -7,9 +7,8 @@ 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"]);
 function isUtilityRounded(value) {
-  return typeof value === "string" && UTILITY_ROUNDED.has(value);
+  return typeof value === "string" && Object.hasOwn(_consts.UTILITY_RADIUS_FALLBACK, value);
 }
 function useRounded(props, name = (0, _utils.getCurrentInstanceName)()) {
   const roundedClasses = (0, _vue.computed)(() => {
@@ -30,33 +29,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}, ${_consts.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];
+      const token = _consts.NAMED_RADIUS_TOKEN[rounded];
       if (token) styles.push(`border-radius: ${token}`);
       return styles;
     }
@@ -78,6 +59,20 @@ function useRounded(props, name = (0, _utils.getCurrentInstanceName)()) {
       styles.push(`border-radius: ${(0, _utils.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)) {
+      _consts.ROUNDED_CORNER_MAP.forEach(({
+        corner,
+        prop
+      }) => {
+        const resolved = (0, _utils.resolveRoundedCornerValue)(props[prop]);
+        if (resolved) styles.push(`border-${corner}-radius: ${resolved}`);
+      });
+    }
+    return styles;
   });
   return {
     roundedClasses,

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';
-/**
+/*********************************************************
+ * 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[]>;

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

@@ -1,17 +1,20 @@
 import { computed, isRef } from "vue";
-import { BORDER_RADIUS_REGEX, PREDEFINED_ROUNDED } from "../../consts/index.js";
-import { convertToUnit, formatRoundedStylesVar, getCurrentInstanceName, isCustomBorderRadius } from "../../utils/index.js";
-const UTILITY_ROUNDED = /* @__PURE__ */ new Set([
-  "none",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "full"
-]);
+import {
+  BORDER_RADIUS_REGEX,
+  NAMED_RADIUS_TOKEN,
+  PREDEFINED_ROUNDED,
+  ROUNDED_CORNER_MAP,
+  UTILITY_RADIUS_FALLBACK
+} from "../../consts/index.js";
+import {
+  convertToUnit,
+  formatRoundedStylesVar,
+  getCurrentInstanceName,
+  isCustomBorderRadius,
+  resolveRoundedCornerValue
+} from "../../utils/index.js";
 function isUtilityRounded(value) {
-  return typeof value === "string" && UTILITY_ROUNDED.has(value);
+  return typeof value === "string" && Object.hasOwn(UTILITY_RADIUS_FALLBACK, value);
 }
 export function useRounded(props, name = getCurrentInstanceName()) {
   const roundedClasses = computed(() => {
@@ -32,25 +35,7 @@ export function useRounded(props, name = 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 = computed(() => {
-    const rounded = isRef(props) ? props.value : props.rounded;
+  const shorthandStyles = (rounded) => {
     const styles = [];
     if (rounded == null || rounded === false) return styles;
     if (isUtilityRounded(rounded)) {
@@ -80,6 +65,17 @@ export function useRounded(props, name = getCurrentInstanceName()) {
       styles.push(`border-radius: ${convertToUnit(rounded)}`);
     }
     return styles;
+  };
+  const roundedStyles = computed(() => {
+    const rounded = isRef(props) ? props.value : props.rounded;
+    const styles = shorthandStyles(rounded);
+    if (!isRef(props)) {
+      ROUNDED_CORNER_MAP.forEach(({ corner, prop }) => {
+        const resolved = resolveRoundedCornerValue(props[prop]);
+        if (resolved) styles.push(`border-${corner}-radius: ${resolved}`);
+      });
+    }
+    return styles;
   });
   return {
     roundedClasses,