origam 2.18.21 → 2.20.0

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)",

package/dist/src/consts/Commons/border.const.d.ts

@@ -1,5 +1,6 @@
 import { BLOCK, INLINE } from '../../enums';
 import type { TBorderLogicalAxis, TBorderWidthKeyword } from '../../types/Commons/border.type';
+import type { TLogicalSide } from '../../types/Commons/anchor.type';
 export declare const BORDER_REGEX: RegExp;
 /**
  * Physical-side lookup driving the per-side border wiring (issue #215).
@@ -37,14 +38,74 @@ export declare const BORDER_POSITION_MAP: readonly [{
  * onto the native CSS logical properties `border-block-{width,style,color}`
  * / `border-inline-{width,style,color}` — no physical translation table
  * needed, the browser resolves start/end per the active writing mode.
- * No matching `borderBlockColor` / `borderInlineColor` prop exists (the
- * per-side color override only applies to the 4 physical corners), so
- * unlike `BORDER_POSITION_MAP` there is no `colorProp` here.
+ * No matching `borderBlockColor` / `borderInlineColor` prop exists — the
+ * per-side color override is defined PER EDGE, not per axis, so an
+ * axis-level color prop would be ambiguous about which of its two edges
+ * it paints. Hence, unlike `BORDER_POSITION_MAP` and
+ * `BORDER_LOGICAL_SIDE_MAP` (both per-EDGE), there is no `colorProp`
+ * here.
+ *
+ * ⚠️ This note used to read "the per-side color override only applies to
+ * the 4 physical corners". That was true until #1013, which added the 4
+ * LOGICAL per-side color props — per-edge color is now available on both
+ * spellings. The reason this map has no `colorProp` was never the
+ * physical/logical distinction; it is the axis/edge one, which #1013 does
+ * not change.
  */
 export declare const BORDER_LOGICAL_AXIS_MAP: ReadonlyArray<{
     axis: TBorderLogicalAxis;
     widthProp: 'borderBlock' | 'borderInline';
 }>;
+/*********************************************************
+ * BORDER_LOGICAL_SIDE_MAP
+ *
+ * @description
+ * Logical-PER-SIDE lookup driving `borderInlineStart` / `borderInlineEnd`
+ * / `borderBlockStart` / `borderBlockEnd` and their four `*Color` twins
+ * (issue #1013). The third and last of the three directional grids: this
+ * map is to `BORDER_LOGICAL_AXIS_MAP` what `BORDER_POSITION_MAP` is to
+ * the global `border` shorthand — it narrows an axis to ONE of its two
+ * edges.
+ *
+ * @description
+ * ⛔ DELIBERATELY THE SAME SHAPE AS `BORDER_POSITION_MAP`
+ * (`{side, widthProp, colorProp}`), because `useBorder` iterates both
+ * with the SAME loop body. That body emits
+ * `border-${side}-{width,style,color}`, so a `side` of `'inline-start'`
+ * produces `border-inline-start-width` / `-style` / `-color` verbatim —
+ * the native CSS logical longhands, which the browser maps to the correct
+ * physical edge per the active writing mode. This lot is therefore an
+ * extension of an existing TABLE, not a new precedence grammar: nothing
+ * in the loop body changed to accommodate it.
+ *
+ * @description
+ * WHY LOGICAL PER SIDE AT ALL, given `borderInline` exists. The axis prop
+ * paints BOTH edges; there was no way to paint a single writing-mode-
+ * relative edge. The only alternative was a PHYSICAL prop
+ * (`borderLeft`), which silently breaks RTL — exactly the trap
+ * `OrigamBlockquote`'s accent rule avoids by hand-writing
+ * `border-inline-start` in its SCSS (#1013's trigger).
+ *
+ * @description
+ * ⚠️ VALUE GRAMMAR IS SHARED WITH THE OTHER TWO GRIDS, LIMITS INCLUDED.
+ * String values go through `parseBorderPositionValue` → `BORDER_REGEX`,
+ * so these props accept exactly what `borderLeft` / `borderBlock` accept
+ * and reject exactly what they reject. Measured 2026-10-01, and NOT
+ * introduced by this lot: `"calc(2px + 1px) solid red"` and a FRACTIONAL
+ * width such as `"0.5rem solid red"` both fail the regex outright (the
+ * width group is `[0-9]+` with no decimal point, and has no `calc()`
+ * alternative), so `parseBorderPositionValue` returns `null` and NOTHING
+ * is emitted. A tokenised width works only in the `var(--x) <style>`
+ * form, and a bare number (`:border-inline-start="4"`) bypasses the regex
+ * entirely via `convertToUnit`. Pinned by the "shared grammar limits"
+ * tests in `packages/tests/TU/composables/Commons/border-logical-side.spec.ts`
+ * so a future regex change has to acknowledge all three grids at once.
+ ********************************************************/
+export declare const BORDER_LOGICAL_SIDE_MAP: ReadonlyArray<{
+    side: TLogicalSide;
+    widthProp: 'borderBlockStart' | 'borderBlockEnd' | 'borderInlineStart' | 'borderInlineEnd';
+    colorProp: 'borderBlockStartColor' | 'borderBlockEndColor' | 'borderInlineStartColor' | 'borderInlineEndColor';
+}>;
 /*********************************************************
  * BORDER_PROP_KEYS
  *
@@ -63,7 +124,7 @@ export declare const BORDER_LOGICAL_AXIS_MAP: ReadonlyArray<{
  * retyped in four templates, where one forgotten key (`borderBlock`,
  * `borderTopColor`, …) would silently restore the defect for that one value.
  */
-export declare const BORDER_PROP_KEYS: readonly ["border", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderBlock", "borderInline", "borderColor", "borderStyle", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
+export declare const BORDER_PROP_KEYS: readonly ["border", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderBlock", "borderInline", "borderBlockStart", "borderBlockEnd", "borderInlineStart", "borderInlineEnd", "borderColor", "borderStyle", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "borderBlockStartColor", "borderBlockEndColor", "borderInlineStartColor", "borderInlineEndColor"];
 /*********************************************************
  * BORDER_KEYWORD_WIDTH
  *

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

@@ -1,4 +1,4 @@
-import { BLOCK, BORDER_LOGICAL_AXIS, BORDER_STYLE, INLINE } from "../../enums/index.js";
+import { BLOCK, BORDER_LOGICAL_AXIS, BORDER_STYLE, INLINE, START_END } from "../../enums/index.js";
 const BORDER_STYLE_ALTERNATION = Object.values(BORDER_STYLE).join("|");
 const BORDER_LENGTH_UNITS = "(?:px|pt|PC|in|cm|mm|em|rem|%|ex|ch|fr)?";
 const BORDER_COLOR_GROUP = "(?<color>(?: ?(?:(?:(?:#)(?:[a-f0-9]{3}|[a-f0-9]{6}))|(?:var\\(--[^)]+\\))|(?:(?:rgb|hsl|rgba)a?\\(.*\\))|(?:[A-Za-z]+))){0,4})";
@@ -15,6 +15,12 @@ export const BORDER_LOGICAL_AXIS_MAP = [
   { axis: BORDER_LOGICAL_AXIS.BLOCK, widthProp: "borderBlock" },
   { axis: BORDER_LOGICAL_AXIS.INLINE, widthProp: "borderInline" }
 ];
+export const BORDER_LOGICAL_SIDE_MAP = [
+  { side: `${BORDER_LOGICAL_AXIS.BLOCK}-${START_END.START}`, widthProp: "borderBlockStart", colorProp: "borderBlockStartColor" },
+  { side: `${BORDER_LOGICAL_AXIS.BLOCK}-${START_END.END}`, widthProp: "borderBlockEnd", colorProp: "borderBlockEndColor" },
+  { side: `${BORDER_LOGICAL_AXIS.INLINE}-${START_END.START}`, widthProp: "borderInlineStart", colorProp: "borderInlineStartColor" },
+  { side: `${BORDER_LOGICAL_AXIS.INLINE}-${START_END.END}`, widthProp: "borderInlineEnd", colorProp: "borderInlineEndColor" }
+];
 export const BORDER_PROP_KEYS = [
   "border",
   "borderTop",
@@ -23,12 +29,20 @@ export const BORDER_PROP_KEYS = [
   "borderLeft",
   "borderBlock",
   "borderInline",
+  "borderBlockStart",
+  "borderBlockEnd",
+  "borderInlineStart",
+  "borderInlineEnd",
   "borderColor",
   "borderStyle",
   "borderTopColor",
   "borderRightColor",
   "borderBottomColor",
-  "borderLeftColor"
+  "borderLeftColor",
+  "borderBlockStartColor",
+  "borderBlockEndColor",
+  "borderInlineStartColor",
+  "borderInlineEndColor"
 ];
 export const BORDER_KEYWORD_WIDTH = {
   none: "var(--origam-border__width---0)",

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UTILITY_RADIUS_FALLBACK = exports.SPACING_SCALE_STEPS = exports.ROUNDED_CORNER_MAP = exports.PADDING_POSITION_MAP = exports.PADDING_LOGICAL_AXIS_MAP = exports.NAMED_RADIUS_TOKEN = exports.MARGIN_POSITION_MAP = exports.MARGIN_LOGICAL_AXIS_MAP = void 0;
+exports.UTILITY_RADIUS_FALLBACK = exports.SPACING_SCALE_STEPS = exports.ROUNDED_LOGICAL_CORNER_MAP = exports.ROUNDED_CORNER_MAP = exports.PADDING_POSITION_MAP = exports.PADDING_LOGICAL_SIDE_MAP = exports.PADDING_LOGICAL_AXIS_MAP = exports.NAMED_RADIUS_TOKEN = exports.MARGIN_POSITION_MAP = exports.MARGIN_LOGICAL_SIDE_MAP = exports.MARGIN_LOGICAL_AXIS_MAP = void 0;
 var _enums = require("../../enums/index.cjs");
 const SPACING_SCALE_STEPS = exports.SPACING_SCALE_STEPS = ["0", "1", "2", "3", "4", "5", "6", "8", "10", "12"];
 const PADDING_POSITION_MAP = exports.PADDING_POSITION_MAP = [{
@@ -26,6 +26,19 @@ const PADDING_LOGICAL_AXIS_MAP = exports.PADDING_LOGICAL_AXIS_MAP = [{
   axis: _enums.BORDER_LOGICAL_AXIS.INLINE,
   prop: "paddingInline"
 }];
+const PADDING_LOGICAL_SIDE_MAP = exports.PADDING_LOGICAL_SIDE_MAP = [{
+  side: `${_enums.BORDER_LOGICAL_AXIS.BLOCK}-${_enums.START_END.START}`,
+  prop: "paddingBlockStart"
+}, {
+  side: `${_enums.BORDER_LOGICAL_AXIS.BLOCK}-${_enums.START_END.END}`,
+  prop: "paddingBlockEnd"
+}, {
+  side: `${_enums.BORDER_LOGICAL_AXIS.INLINE}-${_enums.START_END.START}`,
+  prop: "paddingInlineStart"
+}, {
+  side: `${_enums.BORDER_LOGICAL_AXIS.INLINE}-${_enums.START_END.END}`,
+  prop: "paddingInlineEnd"
+}];
 const MARGIN_POSITION_MAP = exports.MARGIN_POSITION_MAP = [{
   side: _enums.BLOCK.TOP,
   prop: "marginTop"
@@ -46,6 +59,19 @@ const MARGIN_LOGICAL_AXIS_MAP = exports.MARGIN_LOGICAL_AXIS_MAP = [{
   axis: _enums.BORDER_LOGICAL_AXIS.INLINE,
   prop: "marginInline"
 }];
+const MARGIN_LOGICAL_SIDE_MAP = exports.MARGIN_LOGICAL_SIDE_MAP = [{
+  side: `${_enums.BORDER_LOGICAL_AXIS.BLOCK}-${_enums.START_END.START}`,
+  prop: "marginBlockStart"
+}, {
+  side: `${_enums.BORDER_LOGICAL_AXIS.BLOCK}-${_enums.START_END.END}`,
+  prop: "marginBlockEnd"
+}, {
+  side: `${_enums.BORDER_LOGICAL_AXIS.INLINE}-${_enums.START_END.START}`,
+  prop: "marginInlineStart"
+}, {
+  side: `${_enums.BORDER_LOGICAL_AXIS.INLINE}-${_enums.START_END.END}`,
+  prop: "marginInlineEnd"
+}];
 const ROUNDED_CORNER_MAP = exports.ROUNDED_CORNER_MAP = [{
   corner: "top-left",
   prop: "roundedTopLeft"
@@ -59,6 +85,19 @@ const ROUNDED_CORNER_MAP = exports.ROUNDED_CORNER_MAP = [{
   corner: "bottom-right",
   prop: "roundedBottomRight"
 }];
+const ROUNDED_LOGICAL_CORNER_MAP = exports.ROUNDED_LOGICAL_CORNER_MAP = [{
+  corner: `${_enums.START_END.START}-${_enums.START_END.START}`,
+  prop: "roundedStartStart"
+}, {
+  corner: `${_enums.START_END.START}-${_enums.START_END.END}`,
+  prop: "roundedStartEnd"
+}, {
+  corner: `${_enums.START_END.END}-${_enums.START_END.START}`,
+  prop: "roundedEndStart"
+}, {
+  corner: `${_enums.START_END.END}-${_enums.START_END.END}`,
+  prop: "roundedEndEnd"
+}];
 const NAMED_RADIUS_TOKEN = exports.NAMED_RADIUS_TOKEN = {
   "x-small": "var(--origam-radius---xs, 2px)",
   "small": "var(--origam-radius---sm, 4px)",

package/dist/src/consts/Commons/spacing.const.d.ts

@@ -1,4 +1,4 @@
-import type { TDirectionBoth } from '../../types/Commons/anchor.type';
+import type { TDirectionBoth, TLogicalCorner, TLogicalSide } from '../../types/Commons/anchor.type';
 import type { TBorderLogicalAxis } from '../../types/Commons/border.type';
 /**
  * Spacing scale steps mirrored by the global utility classes emitted from
@@ -45,6 +45,33 @@ export declare const PADDING_LOGICAL_AXIS_MAP: ReadonlyArray<{
     axis: TBorderLogicalAxis;
     prop: 'paddingBlock' | 'paddingInline';
 }>;
+/*********************************************************
+ * Logical-SIDE lookup driving the `paddingInlineStart` / `paddingInlineEnd`
+ * / `paddingBlockStart` / `paddingBlockEnd` wiring (issue #1013).
+ *
+ * This is the third and last grid of the directional surface. The repo
+ * already had PHYSICAL-per-side ({@link PADDING_POSITION_MAP}) and
+ * LOGICAL-per-axis ({@link PADDING_LOGICAL_AXIS_MAP}); logical-per-side was
+ * the half that stayed empty, which forced a consumer who wanted ONE
+ * writing-mode-relative edge to fall back on a physical prop and break RTL.
+ *
+ * Shape is deliberately identical to the two maps around it, so the SAME
+ * `forEach` body serves all three: `padding-${side}` yields
+ * `padding-inline-start` from `'inline-start'` exactly as it yields
+ * `padding-top` from `'top'`. No new grammar, one extra table.
+ *
+ * ⚠️ PRECEDENCE — these declarations are pushed AFTER the logical-axis rung
+ * and BEFORE the physical-per-side rung, so `paddingInlineStart` beats
+ * `paddingInline` (more specific: one edge, not two) while `paddingLeft`
+ * still beats `paddingInlineStart`. The tiebreak at that last step is not a
+ * specificity call — a physical and a logical longhand for the same edge
+ * are equally specific — it keeps "physical wins for the same edge" uniform
+ * with the rule {@link ROUNDED_CORNER_MAP} already documents below.
+ ********************************************************/
+export declare const PADDING_LOGICAL_SIDE_MAP: ReadonlyArray<{
+    side: TLogicalSide;
+    prop: 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd';
+}>;
 /**
  * Physical-side lookup driving the per-side `margin*` wiring.
  * Same contract as {@link PADDING_POSITION_MAP}, one axis over.
@@ -61,6 +88,20 @@ export declare const MARGIN_LOGICAL_AXIS_MAP: ReadonlyArray<{
     axis: TBorderLogicalAxis;
     prop: 'marginBlock' | 'marginInline';
 }>;
+/*********************************************************
+ * Logical-SIDE lookup driving the `marginInlineStart` / `marginInlineEnd` /
+ * `marginBlockStart` / `marginBlockEnd` wiring (issue #1013).
+ * Same contract and same precedence rank as
+ * {@link PADDING_LOGICAL_SIDE_MAP}, one axis over.
+ *
+ * These four also accept the `auto` keyword, like their physical twins —
+ * `marginInlineStart="auto"` is the RTL-safe way to push a flex child to
+ * the far end, which `marginLeft="auto"` gets wrong under RTL.
+ ********************************************************/
+export declare const MARGIN_LOGICAL_SIDE_MAP: ReadonlyArray<{
+    side: TLogicalSide;
+    prop: 'marginBlockStart' | 'marginBlockEnd' | 'marginInlineStart' | 'marginInlineEnd';
+}>;
 /**
  * Per-corner lookup driving the `rounded{Corner}` wiring.
  *
@@ -77,6 +118,32 @@ export declare const ROUNDED_CORNER_MAP: ReadonlyArray<{
     corner: string;
     prop: 'roundedTopLeft' | 'roundedTopRight' | 'roundedBottomLeft' | 'roundedBottomRight';
 }>;
+/*********************************************************
+ * Logical-CORNER lookup driving the `roundedStartStart` / `roundedStartEnd`
+ * / `roundedEndStart` / `roundedEndEnd` wiring (issue #1013).
+ *
+ * Emits the native LOGICAL corner longhands
+ * (`border-start-start-radius`, …) — the same family the 4-value `rounded`
+ * shorthand already emits through `formatRoundedStylesVar`, so these four
+ * props address exactly one of its corners instead of all four.
+ *
+ * ⚠️ CORNER NAME ORDER IS `{block}-{inline}`, per CSS: `start-start` is the
+ * block-start inline-start corner (top-left in LTR horizontal-tb),
+ * `start-end` is block-start inline-end (top-right in LTR). It is NOT the
+ * physical clockwise order, and it is NOT axis-agnostic — swapping the two
+ * halves silently addresses the opposite corner.
+ *
+ * ⚠️ PRECEDENCE — pushed AFTER the `rounded` shorthand and BEFORE
+ * {@link ROUNDED_CORNER_MAP}'s physical declarations, so a logical corner
+ * beats the shorthand (more specific: one corner, not four) and a physical
+ * corner still beats a logical one for the same corner. That last step is
+ * the rule the paragraph above already states for the shorthand, applied
+ * one rung down; see `useRounded`'s precedence table.
+ ********************************************************/
+export declare const ROUNDED_LOGICAL_CORNER_MAP: ReadonlyArray<{
+    corner: TLogicalCorner;
+    prop: 'roundedStartStart' | 'roundedStartEnd' | 'roundedEndStart' | 'roundedEndEnd';
+}>;
 /**
  * Named radius variant → primitive radius token.
  *

package/dist/src/consts/Commons/spacing.const.js

@@ -1,4 +1,4 @@
-import { BLOCK, BORDER_LOGICAL_AXIS, INLINE } from "../../enums/index.js";
+import { BLOCK, BORDER_LOGICAL_AXIS, INLINE, START_END } from "../../enums/index.js";
 export const SPACING_SCALE_STEPS = [
   "0",
   "1",
@@ -21,6 +21,12 @@ export const PADDING_LOGICAL_AXIS_MAP = [
   { axis: BORDER_LOGICAL_AXIS.BLOCK, prop: "paddingBlock" },
   { axis: BORDER_LOGICAL_AXIS.INLINE, prop: "paddingInline" }
 ];
+export const PADDING_LOGICAL_SIDE_MAP = [
+  { side: `${BORDER_LOGICAL_AXIS.BLOCK}-${START_END.START}`, prop: "paddingBlockStart" },
+  { side: `${BORDER_LOGICAL_AXIS.BLOCK}-${START_END.END}`, prop: "paddingBlockEnd" },
+  { side: `${BORDER_LOGICAL_AXIS.INLINE}-${START_END.START}`, prop: "paddingInlineStart" },
+  { side: `${BORDER_LOGICAL_AXIS.INLINE}-${START_END.END}`, prop: "paddingInlineEnd" }
+];
 export const MARGIN_POSITION_MAP = [
   { side: BLOCK.TOP, prop: "marginTop" },
   { side: INLINE.RIGHT, prop: "marginRight" },
@@ -31,12 +37,24 @@ export const MARGIN_LOGICAL_AXIS_MAP = [
   { axis: BORDER_LOGICAL_AXIS.BLOCK, prop: "marginBlock" },
   { axis: BORDER_LOGICAL_AXIS.INLINE, prop: "marginInline" }
 ];
+export const MARGIN_LOGICAL_SIDE_MAP = [
+  { side: `${BORDER_LOGICAL_AXIS.BLOCK}-${START_END.START}`, prop: "marginBlockStart" },
+  { side: `${BORDER_LOGICAL_AXIS.BLOCK}-${START_END.END}`, prop: "marginBlockEnd" },
+  { side: `${BORDER_LOGICAL_AXIS.INLINE}-${START_END.START}`, prop: "marginInlineStart" },
+  { side: `${BORDER_LOGICAL_AXIS.INLINE}-${START_END.END}`, prop: "marginInlineEnd" }
+];
 export const ROUNDED_CORNER_MAP = [
   { corner: "top-left", prop: "roundedTopLeft" },
   { corner: "top-right", prop: "roundedTopRight" },
   { corner: "bottom-left", prop: "roundedBottomLeft" },
   { corner: "bottom-right", prop: "roundedBottomRight" }
 ];
+export const ROUNDED_LOGICAL_CORNER_MAP = [
+  { corner: `${START_END.START}-${START_END.START}`, prop: "roundedStartStart" },
+  { corner: `${START_END.START}-${START_END.END}`, prop: "roundedStartEnd" },
+  { corner: `${START_END.END}-${START_END.START}`, prop: "roundedEndStart" },
+  { corner: `${START_END.END}-${START_END.END}`, prop: "roundedEndEnd" }
+];
 export const NAMED_RADIUS_TOKEN = {
   "x-small": "var(--origam-radius---xs, 2px)",
   "small": "var(--origam-radius---sm, 4px)",

package/dist/src/consts/Commons/variant-preset.const.cjs

@@ -4,5 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VARIANT_PROP_KEY = exports.VARIANT_PRESETS = void 0;
+var _kbd = require("../Kbd/kbd.const.cjs");
 const VARIANT_PROP_KEY = exports.VARIANT_PROP_KEY = "variant";
-const VARIANT_PRESETS = exports.VARIANT_PRESETS = {};
+const VARIANT_PRESETS = exports.VARIANT_PRESETS = {
+  "origam-kbd": _kbd.KBD_VARIANT_PRESETS
+};

package/dist/src/consts/Commons/variant-preset.const.d.ts

@@ -25,20 +25,23 @@ export declare const VARIANT_PROP_KEY = "variant";
  * constitue pas.
  *
  * @description
- * ⛔ VIDE A DESSEIN DANS CE LOT, et ce n'est pas du code mort. Le lot 1
+ * ⛔ UN SEUL COMPOSANT CONVERTI A CE JOUR — `OrigamKbd`, lot 2. Le lot 1
  * d'ADR-005 livre le MECANISME (type partage, rang dans le resolveur,
- * canal `theme.variants`) et aucune conversion de composant : chaque
- * composant arrive avec son propre lot, parce qu'aucun ne se convertit
- * mecaniquement. Mesure a l'appui (2026-09-30), la taxonomie « famille A »
- * de D5 est optimiste sur trois des quatre composants qu'elle liste :
- * @description
- * - `OrigamKbd` — ses regles de variant posent des PROPRIETES CUSTOM que
- *   `key-surface` consomme sur la racine ET sur les descendants `__key`
- *   (`&--variant-outlined &__key`). Un prop de racine emet
- *   `background-color`, qui n'herite pas jusqu'a `__key` ; et la
- *   declaration de `key-surface` siege a (0,2,0), donc une valeur de
- *   preset TOKENISEE lui perdrait. Conversion fidele = revoir par ou
- *   `key-surface` recoit sa couleur.
+ * canal `theme.variants`) et aucune conversion : chaque composant arrive
+ * avec son propre lot, parce qu'aucun ne se convertit mecaniquement.
+ * Mesure a l'appui (2026-09-30), la taxonomie « famille A » de D5 est
+ * optimiste sur trois des quatre composants qu'elle liste :
+ * @description
+ * - `OrigamKbd` — FAIT (lot 2). Ses regles de variant posaient des
+ *   PROPRIETES CUSTOM que `key-surface` consomme sur la racine ET sur les
+ *   descendants `__key` (`&--variant-outlined &__key`). Resolu en rendant
+ *   explicite ce que la CSS supposait : la surface peinte est la RACINE en
+ *   forme simple et chaque `__key` en forme combinaison — les deux ne
+ *   coexistent jamais — donc le composant lie les declarations de surface
+ *   a cet element-la, et a lui seul. Le second point, la declaration de
+ *   `key-surface` a (0,2,0) contre une classe utilitaire a (0,1,0), tombe
+ *   de lui-meme : un preset porte une chaine `var(…)`, qu'`isCssColor`
+ *   route vers le canal INLINE, lequel passe devant la regle scopee.
  * - `OrigamBtnGroup` — recopie `--origam-btn-group---border-width` dans
  *   une propriete custom qui alimente un `calc()` de rayon interieur.
  *   Inexprimable en prop de racine.
@@ -56,5 +59,11 @@ export declare const VARIANT_PROP_KEY = "variant";
  * theme de marque ne touche un seul token `origam-kbd` (verifie, zero
  * occurrence sur les 8 themes), donc le zero-changement y est prouvable en
  * isolation. `OrigamBtn` vient au lot 4.
+ *
+ * @description
+ * La mesure d'acceptation se rejoue :
+ * `pnpm -F @origam/tests audit:kbd-preset -- --json <fichier>`, puis
+ * `-- --compare <avant> <apres>`. Elle monte le composant sous les 8
+ * identites x 2 modes et lit chaque surface peinte, `__key` compris.
  ********************************************************/
 export declare const VARIANT_PRESETS: TVariantPresetRegistry;

package/dist/src/consts/Commons/variant-preset.const.js

@@ -1,2 +1,5 @@
+import { KBD_VARIANT_PRESETS } from "../Kbd/kbd.const.js";
 export const VARIANT_PROP_KEY = "variant";
-export const VARIANT_PRESETS = {};
+export const VARIANT_PRESETS = {
+  "origam-kbd": KBD_VARIANT_PRESETS
+};

package/dist/src/consts/Kbd/kbd.const.cjs

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KBD_VARIANT_PRESETS = void 0;
+const KBD_VARIANT_PRESETS = exports.KBD_VARIANT_PRESETS = {
+  outlined: {
+    bgColor: "var(--origam-kbd--outlined---background-color, var(--origam-color__surface---raised, #fff))",
+    elevation: "0 1px 0 0 color-mix(in srgb, currentColor 12%, transparent), inset 0 1px 0 0 color-mix(in srgb, white 50%, transparent)"
+  },
+  filled: {
+    bgColor: "var(--origam-kbd__filled---background-color, var(--origam-color__surface---overlay, #f5f5f5))",
+    elevation: "0 1px 2px 0 color-mix(in srgb, currentColor 18%, transparent), inset 0 1px 0 0 color-mix(in srgb, white 60%, transparent)"
+  },
+  tonal: {
+    bgColor: "var(--origam-kbd__tonal---background-color, color-mix(in srgb, currentColor 8%, transparent))",
+    border: "none",
+    borderColor: "transparent",
+    elevation: "none"
+  }
+};