origam 2.19.0 → 2.20.0

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

@@ -118,12 +118,20 @@ const props = defineProps({
   borderRight: { type: [Boolean, Number, String], required: false },
   borderBlock: { type: [Boolean, Number, String], required: false },
   borderInline: { type: [Boolean, Number, String], required: false },
+  borderInlineStart: { type: [Boolean, Number, String], required: false },
+  borderInlineEnd: { type: [Boolean, Number, String], required: false },
+  borderBlockStart: { type: [Boolean, Number, String], required: false },
+  borderBlockEnd: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
   borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderInlineStartColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderInlineEndColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBlockStartColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBlockEndColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -131,6 +139,10 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
+  paddingInlineStart: { type: [Boolean, Number, String], required: false },
+  paddingInlineEnd: { type: [Boolean, Number, String], required: false },
+  paddingBlockStart: { type: [Boolean, Number, String], required: false },
+  paddingBlockEnd: { type: [Boolean, Number, String], required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -138,11 +150,19 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
+  marginInlineStart: { type: [Boolean, Number, String], required: false },
+  marginInlineEnd: { type: [Boolean, Number, String], required: false },
+  marginBlockStart: { type: [Boolean, Number, String], required: false },
+  marginBlockEnd: { type: [Boolean, Number, String], required: false },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  roundedStartStart: { type: [Boolean, Number, String], required: false },
+  roundedStartEnd: { type: [Boolean, Number, String], required: false },
+  roundedEndStart: { type: [Boolean, Number, String], required: false },
+  roundedEndEnd: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   hover: { type: [Boolean, Object], required: false },

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

@@ -17,6 +17,22 @@ function isUtilityBorder(value) {
 function isDirectionBorder(value) {
   return typeof value === "string" && _anchor.DIRECTION_ARRAY.includes(value);
 }
+function pushEdgeDeclarations(styles, edge, edgeValue, edgeColor) {
+  if (typeof edgeValue === "number") {
+    styles.push(`border-${edge}-width: ${(0, _commons.convertToUnit)(edgeValue)}`);
+    styles.push(`border-${edge}-style: solid`);
+    styles.push(`border-${edge}-color: currentColor`);
+  } else if (edgeValue === true) {
+    styles.push(`border-${edge}-width: var(--origam-border__width---thin)`);
+    styles.push(`border-${edge}-style: solid`);
+    styles.push(`border-${edge}-color: currentColor`);
+  } else if (typeof edgeValue === "string" && edgeValue !== "") {
+    const parsed = (0, _border2.parseBorderPositionValue)(edgeValue);
+    if (parsed) styles.push(...(0, _border2.formatBorderPositionStylesVar)(edge, parsed));
+  }
+  const resolvedEdgeColor = (0, _border2.resolveBorderSideColor)(edgeColor);
+  if (resolvedEdgeColor) styles.push(`border-${edge}-color: ${resolvedEdgeColor}`);
+}
 function useBorder(props, name = (0, _getCurrentInstance.getCurrentInstanceName)()) {
   const borderClasses = (0, _vue.computed)(() => {
     const border = (0, _vue.isRef)(props) ? props.value : props.border;
@@ -88,27 +104,19 @@ function useBorder(props, name = (0, _getCurrentInstance.getCurrentInstanceName)
           if (parsed) styles.push(...(0, _border2.formatBorderPositionStylesVar)(axis, parsed));
         }
       });
+      _border.BORDER_LOGICAL_SIDE_MAP.forEach(({
+        side,
+        widthProp,
+        colorProp
+      }) => {
+        pushEdgeDeclarations(styles, side, props[widthProp], props[colorProp]);
+      });
       _border.BORDER_POSITION_MAP.forEach(({
         side,
         widthProp,
         colorProp
       }) => {
-        const sideValue = props[widthProp];
-        const sideColor = props[colorProp];
-        if (typeof sideValue === "number") {
-          styles.push(`border-${side}-width: ${(0, _commons.convertToUnit)(sideValue)}`);
-          styles.push(`border-${side}-style: solid`);
-          styles.push(`border-${side}-color: currentColor`);
-        } else if (sideValue === true) {
-          styles.push(`border-${side}-width: var(--origam-border__width---thin)`);
-          styles.push(`border-${side}-style: solid`);
-          styles.push(`border-${side}-color: currentColor`);
-        } else if (typeof sideValue === "string" && sideValue !== "") {
-          const parsed = (0, _border2.parseBorderPositionValue)(sideValue);
-          if (parsed) styles.push(...(0, _border2.formatBorderPositionStylesVar)(side, parsed));
-        }
-        const resolvedSideColor = (0, _border2.resolveBorderSideColor)(sideColor);
-        if (resolvedSideColor) styles.push(`border-${side}-color: ${resolvedSideColor}`);
+        pushEdgeDeclarations(styles, side, props[widthProp], props[colorProp]);
       });
     }
     return styles;

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

@@ -12,22 +12,43 @@ import { TDirectionBoth } from '../../types/Commons/anchor.type';
  *
  *   1. global `border` shorthand (1/2/4-value, logical properties)
  *   2. global standalone `borderColor` / `borderStyle`
- *   3. logical-axis `borderBlock` / `borderInline` (width, and
+ *   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`
+ *   4. logical-PER-SIDE `borderInlineStart` / `borderInlineEnd` /
+ *      `borderBlockStart` / `borderBlockEnd` — plus their
+ *      `borderInlineStartColor` / … twins, each pushed immediately after
+ *      its own edge's width/style (issue #1013). More specific than the
+ *      axis rung above: `borderInlineStart` overrides whatever
+ *      `borderInline` set for that one edge.
+ *   5. physical-PER-SIDE `borderTop` / `borderRight` / `borderBottom` /
+ *      `borderLeft` — plus their `borderTopColor` / … twins, same
+ *      per-edge pairing (issue #215).
  *
- * 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
+ * So `borderBlock` beats `border` for the top+bottom edges,
+ * `borderBlockStart` beats both for the top edge specifically,
+ * `borderTop` beats all three for that same edge, and each `*Color`
+ * beats the color embedded in its own edge's width string, the
  * axis-level color, and the global `borderColor` — each rung only
- * overrides the side(s)/axis it actually targets, everything else keeps
+ * overrides the edge(s)/axis it actually targets, everything else keeps
  * cascading from the rung below.
  *
  * @description
+ * ⛔ WHY PHYSICAL BEATS LOGICAL FOR THE SAME EDGE (rungs 4 vs 5, #1013).
+ * `borderLeft` and `borderInlineStart` are two SPELLINGS of one edge in
+ * LTR, not two edges, and CSS gives them equal specificity — so neither
+ * wins on its own merits and declaration order is the entire mechanism.
+ * The tie is broken in favour of PHYSICAL to match the repo's only
+ * pre-existing physical-vs-logical tiebreak, recorded on
+ * `ROUNDED_CORNER_MAP` (`consts/Commons/spacing.const.ts:85-88`), where
+ * the per-corner PHYSICAL declarations are pushed last for exactly this
+ * reason. Settling it the same way across all four directional grids —
+ * border here, padding/margin/rounded in the other half of #1013 — is
+ * the point: a user who learns the rule once should not have to relearn
+ * it per prop family. Passing BOTH spellings for the same edge is
+ * nonetheless a code smell; pick the vocabulary that matches the intent
+ * (logical when the design follows the reading direction).
+ *
+ * @description
  * WIDTH KEYWORDS AND DIRECTIONS ARE EMITTED INLINE (#391). 'none' | 'thin'
  * | 'thick' and 'top' | 'right' | 'bottom' | 'left' resolve to a WIDTH, so
  * they take the same inline path the numeric `:border="4"` form already

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

@@ -1,6 +1,6 @@
 import { computed, isRef } from "vue";
 import { DIRECTION_ARRAY } from "../../consts/Commons/anchor.const.js";
-import { BORDER_KEYWORD_WIDTH, BORDER_LOGICAL_AXIS_MAP, BORDER_POSITION_MAP, BORDER_REGEX } from "../../consts/Commons/border.const.js";
+import { BORDER_KEYWORD_WIDTH, BORDER_LOGICAL_AXIS_MAP, BORDER_LOGICAL_SIDE_MAP, BORDER_POSITION_MAP, BORDER_REGEX } from "../../consts/Commons/border.const.js";
 import { formatBorderPositionStylesVar, formatBorderStylesVar, parseBorderPositionValue, resolveBorderSideColor } from "../../utils/Commons/border.util.js";
 import { convertToUnit, isEmpty } from "../../utils/Commons/commons.util.js";
 import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
@@ -15,6 +15,22 @@ function isUtilityBorder(value) {
 function isDirectionBorder(value) {
   return typeof value === "string" && DIRECTION_ARRAY.includes(value);
 }
+function pushEdgeDeclarations(styles, edge, edgeValue, edgeColor) {
+  if (typeof edgeValue === "number") {
+    styles.push(`border-${edge}-width: ${convertToUnit(edgeValue)}`);
+    styles.push(`border-${edge}-style: solid`);
+    styles.push(`border-${edge}-color: currentColor`);
+  } else if (edgeValue === true) {
+    styles.push(`border-${edge}-width: var(--origam-border__width---thin)`);
+    styles.push(`border-${edge}-style: solid`);
+    styles.push(`border-${edge}-color: currentColor`);
+  } else if (typeof edgeValue === "string" && edgeValue !== "") {
+    const parsed = parseBorderPositionValue(edgeValue);
+    if (parsed) styles.push(...formatBorderPositionStylesVar(edge, parsed));
+  }
+  const resolvedEdgeColor = resolveBorderSideColor(edgeColor);
+  if (resolvedEdgeColor) styles.push(`border-${edge}-color: ${resolvedEdgeColor}`);
+}
 export function useBorder(props, name = getCurrentInstanceName()) {
   const borderClasses = computed(() => {
     const border = isRef(props) ? props.value : props.border;
@@ -80,23 +96,11 @@ export function useBorder(props, name = getCurrentInstanceName()) {
           if (parsed) styles.push(...formatBorderPositionStylesVar(axis, parsed));
         }
       });
+      BORDER_LOGICAL_SIDE_MAP.forEach(({ side, widthProp, colorProp }) => {
+        pushEdgeDeclarations(styles, side, props[widthProp], props[colorProp]);
+      });
       BORDER_POSITION_MAP.forEach(({ side, widthProp, colorProp }) => {
-        const sideValue = props[widthProp];
-        const sideColor = props[colorProp];
-        if (typeof sideValue === "number") {
-          styles.push(`border-${side}-width: ${convertToUnit(sideValue)}`);
-          styles.push(`border-${side}-style: solid`);
-          styles.push(`border-${side}-color: currentColor`);
-        } else if (sideValue === true) {
-          styles.push(`border-${side}-width: var(--origam-border__width---thin)`);
-          styles.push(`border-${side}-style: solid`);
-          styles.push(`border-${side}-color: currentColor`);
-        } else if (typeof sideValue === "string" && sideValue !== "") {
-          const parsed = parseBorderPositionValue(sideValue);
-          if (parsed) styles.push(...formatBorderPositionStylesVar(side, parsed));
-        }
-        const resolvedSideColor = resolveBorderSideColor(sideColor);
-        if (resolvedSideColor) styles.push(`border-${side}-color: ${resolvedSideColor}`);
+        pushEdgeDeclarations(styles, side, props[widthProp], props[colorProp]);
       });
     }
     return styles;

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

@@ -49,6 +49,13 @@ function useMargin(props, name = (0, _getCurrentInstance.getCurrentInstanceName)
       const resolved = (0, _spacing2.resolveSpacingValue)(props[prop]);
       if (resolved) styles.push(`margin-${axis}: ${resolved}`);
     });
+    _spacing.MARGIN_LOGICAL_SIDE_MAP.forEach(({
+      side,
+      prop
+    }) => {
+      const resolved = (0, _spacing2.resolveSpacingValue)(props[prop]);
+      if (resolved) styles.push(`margin-${side}: ${resolved}`);
+    });
     _spacing.MARGIN_POSITION_MAP.forEach(({
       side,
       prop

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

@@ -11,13 +11,19 @@ import type { IMarginProps } from '../../interfaces/Commons/margin.interface';
  *
  *   1. global `margin` shorthand (1/2/4-value, logical properties)
  *   2. logical-axis `marginBlock` / `marginInline`
- *   3. physical per-side `marginTop` / `marginRight` / `marginBottom` /
+ *   3. logical per-side `marginInlineStart` / `marginInlineEnd` /
+ *      `marginBlockStart` / `marginBlockEnd` (issue #1013)
+ *   4. 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.
  *
+ * ⚠️ RUNGS 3 AND 4 ARE EQUALLY SPECIFIC — the physical spelling wins for
+ * the edge they share, by push order. Same decision and same reasoning as
+ * `usePadding`'s table, which carries the full rationale.
+ *
  * ⚠️ 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

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

@@ -1,6 +1,6 @@
 import { computed } from "vue";
 import { MARGIN_REGEX } from "../../consts/Commons/margin.const.js";
-import { MARGIN_LOGICAL_AXIS_MAP, MARGIN_POSITION_MAP, SPACING_SCALE_STEPS } from "../../consts/Commons/spacing.const.js";
+import { MARGIN_LOGICAL_AXIS_MAP, MARGIN_LOGICAL_SIDE_MAP, MARGIN_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 { formatMarginStylesVar } from "../../utils/Commons/margin.util.js";
@@ -40,6 +40,10 @@ export function useMargin(props, name = getCurrentInstanceName()) {
       const resolved = resolveSpacingValue(props[prop]);
       if (resolved) styles.push(`margin-${axis}: ${resolved}`);
     });
+    MARGIN_LOGICAL_SIDE_MAP.forEach(({ side, prop }) => {
+      const resolved = resolveSpacingValue(props[prop]);
+      if (resolved) styles.push(`margin-${side}: ${resolved}`);
+    });
     MARGIN_POSITION_MAP.forEach(({ side, prop }) => {
       const resolved = resolveSpacingValue(props[prop]);
       if (resolved) styles.push(`margin-${side}: ${resolved}`);

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

@@ -49,6 +49,13 @@ function usePadding(props, name = (0, _getCurrentInstance.getCurrentInstanceName
       const resolved = (0, _spacing2.resolveSpacingValue)(props[prop]);
       if (resolved) styles.push(`padding-${axis}: ${resolved}`);
     });
+    _spacing.PADDING_LOGICAL_SIDE_MAP.forEach(({
+      side,
+      prop
+    }) => {
+      const resolved = (0, _spacing2.resolveSpacingValue)(props[prop]);
+      if (resolved) styles.push(`padding-${side}: ${resolved}`);
+    });
     _spacing.PADDING_POSITION_MAP.forEach(({
       side,
       prop

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

@@ -12,7 +12,9 @@ import type { IPaddingProps } from '../../interfaces/Commons/padding.interface';
  *
  *   1. global `padding` shorthand (1/2/4-value, logical properties)
  *   2. logical-axis `paddingBlock` / `paddingInline`
- *   3. physical per-side `paddingTop` / `paddingRight` / `paddingBottom` /
+ *   3. logical per-side `paddingInlineStart` / `paddingInlineEnd` /
+ *      `paddingBlockStart` / `paddingBlockEnd` (issue #1013)
+ *   4. physical per-side `paddingTop` / `paddingRight` / `paddingBottom` /
  *      `paddingLeft`
  *
  * So `paddingBlock` beats `padding` for the top+bottom edges, and
@@ -20,6 +22,18 @@ import type { IPaddingProps } from '../../interfaces/Commons/padding.interface';
  * specifically — each rung only overrides the edge(s) it actually
  * targets, everything else keeps cascading from the rung below.
  *
+ * ⚠️ RUNGS 3 AND 4 ARE EQUALLY SPECIFIC, and that is the one rank in this
+ * table that is a decision rather than a deduction. `paddingInlineStart`
+ * and `paddingLeft` name the SAME edge under LTR horizontal-tb, so neither
+ * is narrower than the other; push order alone decides, and we put the
+ * physical one last. The reason is uniformity, not a claim that physical
+ * is better: `ROUNDED_CORNER_MAP`'s header already documents the repo's
+ * only other physical-vs-logical tiebreak resolving the same way, and two
+ * opposite conventions across one prop surface is exactly the "half a
+ * grid" that issue #1013 exists to remove. Settling it here rather than
+ * leaving it emergent also matters because `useBorder` has to make the
+ * identical call for `borderInlineStart` vs `borderLeft`.
+ *
  * ⚠️ 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

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

@@ -1,6 +1,6 @@
 import { computed } from "vue";
 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 { PADDING_LOGICAL_AXIS_MAP, PADDING_LOGICAL_SIDE_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";
@@ -40,6 +40,10 @@ export function usePadding(props, name = getCurrentInstanceName()) {
       const resolved = resolveSpacingValue(props[prop]);
       if (resolved) styles.push(`padding-${axis}: ${resolved}`);
     });
+    PADDING_LOGICAL_SIDE_MAP.forEach(({ side, prop }) => {
+      const resolved = resolveSpacingValue(props[prop]);
+      if (resolved) styles.push(`padding-${side}: ${resolved}`);
+    });
     PADDING_POSITION_MAP.forEach(({ side, prop }) => {
       const resolved = resolveSpacingValue(props[prop]);
       if (resolved) styles.push(`padding-${side}: ${resolved}`);

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

@@ -68,6 +68,13 @@ function useRounded(props, name = (0, _getCurrentInstance.getCurrentInstanceName
     const rounded = (0, _vue.isRef)(props) ? props.value : props.rounded;
     const styles = shorthandStyles(rounded);
     if (!(0, _vue.isRef)(props)) {
+      _spacing.ROUNDED_LOGICAL_CORNER_MAP.forEach(({
+        corner,
+        prop
+      }) => {
+        const resolved = (0, _spacing2.resolveRoundedCornerValue)(props[prop]);
+        if (resolved) styles.push(`border-${corner}-radius: ${resolved}`);
+      });
       _spacing.ROUNDED_CORNER_MAP.forEach(({
         corner,
         prop

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

@@ -16,12 +16,25 @@ import type { TRounded } from '../../types/Commons/rounded.type';
  *
  *   1. global `rounded` (utility rung, named variant, legacy boolean, or
  *      free-form 1/4-value CSS)
- *   2. per-corner `roundedTopLeft` / `roundedTopRight` /
+ *   2. LOGICAL per-corner `roundedStartStart` / `roundedStartEnd` /
+ *      `roundedEndStart` / `roundedEndEnd` (issue #1013)
+ *   3. PHYSICAL per-corner `roundedTopLeft` / `roundedTopRight` /
  *      `roundedBottomLeft` / `roundedBottomRight`
  *
  * So `roundedTopLeft="0px"` beats `rounded="lg"` for the top-left corner
  * only; the other three keep the `lg` rung.
  *
+ * ⚠️ RUNGS 2 AND 3 ARE EQUALLY SPECIFIC — `roundedStartStart` and
+ * `roundedTopLeft` are the same corner under LTR horizontal-tb, so push
+ * order alone decides and the physical one is last. Same decision, same
+ * reasoning as `usePadding`'s rungs 3/4, which carries the full rationale;
+ * it also matches what `ROUNDED_CORNER_MAP`'s own header already said
+ * about the physical corners beating the shorthand's logical output.
+ *
+ * ⚠️ The logical corner names read `{block}-{inline}`: `startEnd` is
+ * block-start inline-end — top-RIGHT in LTR. They are NOT the physical
+ * clockwise order, and the two halves are not interchangeable.
+ *
  * ⚠️ This example used to read `roundedTopLeft="0"`, and that form does
  * NOT work — measured: `{rounded:'lg', roundedTopLeft:'0'}` emits the
  * shorthand declaration ALONE. The bare string `"0"` is neither a utility

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

@@ -1,6 +1,6 @@
 import { computed, isRef } from "vue";
 import { BORDER_RADIUS_REGEX, PREDEFINED_ROUNDED } from "../../consts/Commons/rounded.const.js";
-import { NAMED_RADIUS_TOKEN, ROUNDED_CORNER_MAP, UTILITY_RADIUS_FALLBACK } from "../../consts/Commons/spacing.const.js";
+import { NAMED_RADIUS_TOKEN, ROUNDED_CORNER_MAP, ROUNDED_LOGICAL_CORNER_MAP, UTILITY_RADIUS_FALLBACK } from "../../consts/Commons/spacing.const.js";
 import { convertToUnit } from "../../utils/Commons/commons.util.js";
 import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
 import { formatRoundedStylesVar, isCustomBorderRadius } from "../../utils/Commons/rounded.util.js";
@@ -62,6 +62,10 @@ export function useRounded(props, name = getCurrentInstanceName()) {
     const rounded = isRef(props) ? props.value : props.rounded;
     const styles = shorthandStyles(rounded);
     if (!isRef(props)) {
+      ROUNDED_LOGICAL_CORNER_MAP.forEach(({ corner, prop }) => {
+        const resolved = resolveRoundedCornerValue(props[prop]);
+        if (resolved) styles.push(`border-${corner}-radius: ${resolved}`);
+      });
       ROUNDED_CORNER_MAP.forEach(({ corner, prop }) => {
         const resolved = resolveRoundedCornerValue(props[prop]);
         if (resolved) styles.push(`border-${corner}-radius: ${resolved}`);

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

@@ -119,6 +119,18 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     get borderInline() {
       return props.borderInline;
     },
+    get borderBlockStart() {
+      return props.borderBlockStart;
+    },
+    get borderBlockEnd() {
+      return props.borderBlockEnd;
+    },
+    get borderInlineStart() {
+      return props.borderInlineStart;
+    },
+    get borderInlineEnd() {
+      return props.borderInlineEnd;
+    },
     get borderTop() {
       return props.borderTop;
     },
@@ -142,6 +154,18 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     },
     get borderLeftColor() {
       return props.borderLeftColor;
+    },
+    get borderBlockStartColor() {
+      return props.borderBlockStartColor;
+    },
+    get borderBlockEndColor() {
+      return props.borderBlockEndColor;
+    },
+    get borderInlineStartColor() {
+      return props.borderInlineStartColor;
+    },
+    get borderInlineEndColor() {
+      return props.borderInlineEndColor;
     }
   }));
   const {
@@ -162,6 +186,18 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     },
     get roundedBottomRight() {
       return props.roundedBottomRight;
+    },
+    get roundedStartStart() {
+      return props.roundedStartStart;
+    },
+    get roundedStartEnd() {
+      return props.roundedStartEnd;
+    },
+    get roundedEndStart() {
+      return props.roundedEndStart;
+    },
+    get roundedEndEnd() {
+      return props.roundedEndEnd;
     }
   }));
   const {
@@ -192,6 +228,18 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     },
     get paddingInline() {
       return props.paddingInline;
+    },
+    get paddingInlineStart() {
+      return props.paddingInlineStart;
+    },
+    get paddingInlineEnd() {
+      return props.paddingInlineEnd;
+    },
+    get paddingBlockStart() {
+      return props.paddingBlockStart;
+    },
+    get paddingBlockEnd() {
+      return props.paddingBlockEnd;
     }
   }));
   const {
@@ -218,6 +266,18 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     },
     get marginInline() {
       return props.marginInline;
+    },
+    get marginInlineStart() {
+      return props.marginInlineStart;
+    },
+    get marginInlineEnd() {
+      return props.marginInlineEnd;
+    },
+    get marginBlockStart() {
+      return props.marginBlockStart;
+    },
+    get marginBlockEnd() {
+      return props.marginBlockEnd;
     }
   }));
   const gapStyles = (0, _vue.computed)(() => {

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

@@ -125,6 +125,18 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
       get borderInline() {
         return props.borderInline;
       },
+      get borderBlockStart() {
+        return props.borderBlockStart;
+      },
+      get borderBlockEnd() {
+        return props.borderBlockEnd;
+      },
+      get borderInlineStart() {
+        return props.borderInlineStart;
+      },
+      get borderInlineEnd() {
+        return props.borderInlineEnd;
+      },
       get borderTop() {
         return props.borderTop;
       },
@@ -148,6 +160,18 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
       },
       get borderLeftColor() {
         return props.borderLeftColor;
+      },
+      get borderBlockStartColor() {
+        return props.borderBlockStartColor;
+      },
+      get borderBlockEndColor() {
+        return props.borderBlockEndColor;
+      },
+      get borderInlineStartColor() {
+        return props.borderInlineStartColor;
+      },
+      get borderInlineEndColor() {
+        return props.borderInlineEndColor;
       }
     })
   );
@@ -167,6 +191,18 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
       },
       get roundedBottomRight() {
         return props.roundedBottomRight;
+      },
+      get roundedStartStart() {
+        return props.roundedStartStart;
+      },
+      get roundedStartEnd() {
+        return props.roundedStartEnd;
+      },
+      get roundedEndStart() {
+        return props.roundedEndStart;
+      },
+      get roundedEndEnd() {
+        return props.roundedEndEnd;
       }
     })
   );
@@ -196,6 +232,18 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
       },
       get paddingInline() {
         return props.paddingInline;
+      },
+      get paddingInlineStart() {
+        return props.paddingInlineStart;
+      },
+      get paddingInlineEnd() {
+        return props.paddingInlineEnd;
+      },
+      get paddingBlockStart() {
+        return props.paddingBlockStart;
+      },
+      get paddingBlockEnd() {
+        return props.paddingBlockEnd;
       }
     })
   );
@@ -221,6 +269,18 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
       },
       get marginInline() {
         return props.marginInline;
+      },
+      get marginInlineStart() {
+        return props.marginInlineStart;
+      },
+      get marginInlineEnd() {
+        return props.marginInlineEnd;
+      },
+      get marginBlockStart() {
+        return props.marginBlockStart;
+      },
+      get marginBlockEnd() {
+        return props.marginBlockEnd;
       }
     })
   );

package/dist/src/consts/Commons/border.const.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BORDER_REGEX = exports.BORDER_PROP_KEYS = exports.BORDER_POSITION_MAP = exports.BORDER_LOGICAL_AXIS_MAP = exports.BORDER_KEYWORD_WIDTH = void 0;
+exports.BORDER_REGEX = exports.BORDER_PROP_KEYS = exports.BORDER_POSITION_MAP = exports.BORDER_LOGICAL_SIDE_MAP = exports.BORDER_LOGICAL_AXIS_MAP = exports.BORDER_KEYWORD_WIDTH = void 0;
 var _enums = require("../../enums/index.cjs");
 const BORDER_STYLE_ALTERNATION = Object.values(_enums.BORDER_STYLE).join("|");
 const BORDER_LENGTH_UNITS = "(?:px|pt|PC|in|cm|mm|em|rem|%|ex|ch|fr)?";
@@ -33,7 +33,24 @@ const BORDER_LOGICAL_AXIS_MAP = exports.BORDER_LOGICAL_AXIS_MAP = [{
   axis: _enums.BORDER_LOGICAL_AXIS.INLINE,
   widthProp: "borderInline"
 }];
-const BORDER_PROP_KEYS = exports.BORDER_PROP_KEYS = ["border", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderBlock", "borderInline", "borderColor", "borderStyle", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
+const BORDER_LOGICAL_SIDE_MAP = exports.BORDER_LOGICAL_SIDE_MAP = [{
+  side: `${_enums.BORDER_LOGICAL_AXIS.BLOCK}-${_enums.START_END.START}`,
+  widthProp: "borderBlockStart",
+  colorProp: "borderBlockStartColor"
+}, {
+  side: `${_enums.BORDER_LOGICAL_AXIS.BLOCK}-${_enums.START_END.END}`,
+  widthProp: "borderBlockEnd",
+  colorProp: "borderBlockEndColor"
+}, {
+  side: `${_enums.BORDER_LOGICAL_AXIS.INLINE}-${_enums.START_END.START}`,
+  widthProp: "borderInlineStart",
+  colorProp: "borderInlineStartColor"
+}, {
+  side: `${_enums.BORDER_LOGICAL_AXIS.INLINE}-${_enums.START_END.END}`,
+  widthProp: "borderInlineEnd",
+  colorProp: "borderInlineEndColor"
+}];
+const BORDER_PROP_KEYS = exports.BORDER_PROP_KEYS = ["border", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderBlock", "borderInline", "borderBlockStart", "borderBlockEnd", "borderInlineStart", "borderInlineEnd", "borderColor", "borderStyle", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "borderBlockStartColor", "borderBlockEndColor", "borderInlineStartColor", "borderInlineEndColor"];
 const BORDER_KEYWORD_WIDTH = exports.BORDER_KEYWORD_WIDTH = {
   none: "var(--origam-border__width---0)",
   thin: "var(--origam-border__width---thin)",