origam 2.15.0 → 2.16.0

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/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,

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

@@ -144,7 +144,23 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   const {
     roundedClasses,
     roundedStyles
-  } = (0, _rounded.useRounded)(rounded);
+  } = (0, _rounded.useRounded)((0, _vue.reactive)({
+    get rounded() {
+      return rounded.value;
+    },
+    get roundedTopLeft() {
+      return props.roundedTopLeft;
+    },
+    get roundedTopRight() {
+      return props.roundedTopRight;
+    },
+    get roundedBottomLeft() {
+      return props.roundedBottomLeft;
+    },
+    get roundedBottomRight() {
+      return props.roundedBottomRight;
+    }
+  }));
   const {
     elevationClasses,
     elevationStyles
@@ -155,6 +171,24 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   } = (0, _padding.usePadding)((0, _vue.reactive)({
     get padding() {
       return padding.value;
+    },
+    get paddingTop() {
+      return props.paddingTop;
+    },
+    get paddingRight() {
+      return props.paddingRight;
+    },
+    get paddingBottom() {
+      return props.paddingBottom;
+    },
+    get paddingLeft() {
+      return props.paddingLeft;
+    },
+    get paddingBlock() {
+      return props.paddingBlock;
+    },
+    get paddingInline() {
+      return props.paddingInline;
     }
   }));
   const {
@@ -163,6 +197,24 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   } = (0, _margin.useMargin)((0, _vue.reactive)({
     get margin() {
       return margin.value;
+    },
+    get marginTop() {
+      return props.marginTop;
+    },
+    get marginRight() {
+      return props.marginRight;
+    },
+    get marginBottom() {
+      return props.marginBottom;
+    },
+    get marginLeft() {
+      return props.marginLeft;
+    },
+    get marginBlock() {
+      return props.marginBlock;
+    },
+    get marginInline() {
+      return props.marginInline;
     }
   }));
   const gapStyles = (0, _vue.computed)(() => {

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

@@ -1,9 +1,6 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { IActiveState, IBgColorProps, IBorderProps, IColorProps, IElevationProps, IHoverState, IMarginProps, IPaddingProps, IRoundedProps } from '../../interfaces';
-import type { TColor } from '../../types';
-type TStateEffectProps = IColorProps & IBgColorProps & IBorderProps & IRoundedProps & IElevationProps & IPaddingProps & IMarginProps & {
-    gap?: boolean | number | string;
-};
+import type { IActiveState, IHoverState } from '../../interfaces';
+import type { TColor, TStateEffectProps } from '../../types';
 /*********************************************************
  * useStateEffect
  ********************************************************/
@@ -38,4 +35,3 @@ flat?: Ref<boolean> | ComputedRef<boolean>): {
     gapClasses: ComputedRef<string[]>;
     gapStyles: ComputedRef<string[]>;
 };
-export {};