origam 2.19.0 → 2.21.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/Blockquote/blockquote.const.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.QUOTE_MARKS_BY_LANG = exports.BLOCKQUOTE_VARIANTS = exports.BLOCKQUOTE_LANGS = exports.BLOCKQUOTE_DEFAULTS = exports.BLOCKQUOTE_ALIGNS = void 0;
+exports.QUOTE_MARKS_BY_LANG = exports.BLOCKQUOTE_VARIANT_PRESETS = exports.BLOCKQUOTE_VARIANTS = exports.BLOCKQUOTE_LANGS = exports.BLOCKQUOTE_DEFAULTS = exports.BLOCKQUOTE_ALIGNS = void 0;
 var _enums = require("../../enums/index.cjs");
 const BLOCKQUOTE_VARIANTS = exports.BLOCKQUOTE_VARIANTS = Object.values(_enums.BLOCKQUOTE_VARIANT);
 const BLOCKQUOTE_LANGS = exports.BLOCKQUOTE_LANGS = Object.values(_enums.BLOCKQUOTE_LANG);
@@ -29,5 +29,42 @@ const QUOTE_MARKS_BY_LANG = exports.QUOTE_MARKS_BY_LANG = {
 const BLOCKQUOTE_DEFAULTS = exports.BLOCKQUOTE_DEFAULTS = {
   variant: "default",
   lang: "auto",
+  align: "left",
   tag: "blockquote"
+};
+const BLOCKQUOTE_VARIANT_PRESETS = exports.BLOCKQUOTE_VARIANT_PRESETS = {
+  default: {
+    borderInlineStart: "var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color, currentColor)",
+    paddingInlineStart: "calc(var(--origam-blockquote---padding-inline, 24px) + var(--origam-blockquote__accent---width, 4px))"
+  },
+  elegant: {
+    fontFamily: "serif",
+    fontSize: "xl",
+    fontStyle: "var(--origam-blockquote__elegant---font-style, italic)",
+    lineHeight: "loose",
+    paddingBlock: "var(--origam-blockquote__elegant---padding-block, 24px)",
+    borderInlineStart: "var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color, currentColor)",
+    paddingInlineStart: "calc(var(--origam-blockquote---padding-inline, 24px) + var(--origam-blockquote__accent---width, 4px))"
+  },
+  quoted: {
+    quoteMark: true,
+    paddingTop: "calc(var(--origam-blockquote---padding-block, 16px) + var(--origam-blockquote--quoted---glyph-padding-extra, 1rem))"
+  },
+  minimal: {
+    fontSize: "md",
+    fontStyle: "var(--origam-blockquote__minimal---font-style, italic)",
+    paddingBlock: 0,
+    paddingInline: "var(--origam-blockquote__minimal---padding-inline, 12px)",
+    borderInlineStart: "var(--origam-blockquote--minimal---accent-width, 2px) solid var(--origam-blockquote---resolved-accent-color, currentColor)",
+    paddingInlineStart: "calc(var(--origam-blockquote__minimal---padding-inline, 12px) + var(--origam-blockquote--minimal---accent-width, 2px))"
+  },
+  pull: {
+    fontFamily: "serif",
+    fontSize: "3xl",
+    fontWeight: "medium",
+    lineHeight: "snug",
+    align: "center",
+    paddingBlock: "var(--origam-blockquote__pull---padding-block, 24px)",
+    borderBlock: "var(--origam-blockquote__pull---rule-width, 2px) solid var(--origam-blockquote---resolved-accent-color, currentColor)"
+  }
 };

package/dist/src/consts/Blockquote/blockquote.const.d.ts

@@ -1,4 +1,6 @@
+import type { IBlockquoteProps } from '../../interfaces/Blockquote/blockquote.interface';
 import type { TBlockquoteAlign, TBlockquoteLang, TBlockquoteVariant } from '../../types/Blockquote/blockquote.type';
+import type { TVariantPresets } from '../../types/Commons/variant-preset.type';
 /**
  * Closed list of valid `variant` values for `<OrigamBlockquote>`.
  * Exposed so stories / consumers can iterate the matrix without
@@ -33,5 +35,116 @@ export declare const QUOTE_MARKS_BY_LANG: Record<Exclude<TBlockquoteLang, 'auto'
 export declare const BLOCKQUOTE_DEFAULTS: {
     readonly variant: TBlockquoteVariant;
     readonly lang: TBlockquoteLang;
+    readonly align: TBlockquoteAlign;
     readonly tag: "blockquote";
 };
+/*********************************************************
+ * BLOCKQUOTE_VARIANT_PRESETS
+ *
+ * @description
+ * ADR-005 D7, lot #1015 — le deuxieme composant converti, apres le pilote
+ * `OrigamKbd`. Un variant de Blockquote n'est plus un bloc SCSS : c'est ce
+ * sac de props, resolu au rang le plus faible de la chaine (prop du site
+ * d'appel > defaut de theme > PRESET > `withDefaults`).
+ *
+ * @description
+ * ⛔ CE QUE LA CONVERSION REPARE, ET C'EST SA JUSTIFICATION. Les regles
+ * `--variant-elegant` / `--variant-minimal` / `--variant-pull` declaraient
+ * `font-size` / `font-family` / `font-weight` / `line-height`
+ * DIRECTEMENT, a specificite (0,2,0) — identique a celle de la regle de
+ * base — et plus loin dans l'ordre source. Or `useTypography` n'ecrit pas
+ * ces proprietes : il ecrit la propriete custom
+ * `--origam-blockquote---{propriete}` que la regle de base consomme via
+ * `--resolved-{propriete}`. Les cinq props typographiques etaient donc
+ * VIVANTES sur `default` et `quoted` et MORTES sur les trois autres, sans
+ * aucun diagnostic — alors que la story exposait les cinq controles et que
+ * la doc les documentait.
+ * @description
+ * Verdict navigateur, chromium, Histoire statique, lot #1015 :
+ * `variant="elegant" font-size="sm"` rendait **18px**, exactement comme
+ * `variant="elegant"` nu. Apres conversion la prop gagne. C'est l'une des
+ * deux assertions ROUGE-avant / VERT-apres de `e2e/blockquote.spec.ts`.
+ *
+ * @description
+ * ⛔ CHAQUE VALEUR PORTE LA CHAINE `var()` QUE LA REGLE PORTAIT, partout ou
+ * le canal peut la transporter. `resolveSpacingValue` rend verbatim toute
+ * valeur qui n'est pas un echelon de l'echelle, et
+ * `parseBorderPositionValue` prend `match.width` EN ENTIER — donc les
+ * `calc()` et les largeurs `var(--…, repli)` voyagent telles quelles, et le
+ * canal d'override des themes survit.
+ *
+ * @description
+ * ⛔ LES CINQ VALEURS TYPOGRAPHIQUES SONT L'EXCEPTION, ET ELLE EST
+ * STRUCTURELLE. `useTypography` n'a AUCUNE echappatoire pour une valeur
+ * custom (`typography.composable.ts:210-216`) : il enveloppe toujours en
+ * `var(--origam-font__{groupe}---{valeur})`. Poser
+ * `fontSize: 'var(--origam-blockquote__elegant---font-size, 1.125rem)'`
+ * produirait le nom imbrique
+ * `var(--origam-font__size---var(--origam-blockquote__elegant---font-size, 1.125rem))`,
+ * qu'aucune feuille ne declare, et la declaration serait jetee. La ruse du
+ * pilote Kbd est donc indisponible ici — c'est **#1018**, ouvert, et il
+ * n'est PAS corrige dans ce lot. Seul `fontStyle` echappe, via
+ * `TYPOGRAPHY_PASSTHROUGH_MAP`, et son preset porte donc bien la chaine.
+ * @description
+ * Le cout de cette exception est NUL, et c'est mesure, pas suppose : chacun
+ * des 8 tokens concernes etait un ALIAS byte-pour-byte de l'echelon
+ * semantique que le preset pose a sa place (`__elegant---font-size:
+ * var(--origam-font__size---xl)` -> `fontSize: 'xl'`, et ainsi de suite),
+ * et aucun des 8 themes n'en lisait un seul. Les 8 tokens sortent donc des
+ * 4 feuilles et de `tokens.type.ts`, ce que `token-var-channels` prescrit
+ * lui-meme pour un token que plus rien ne lit.
+ *
+ * @description
+ * ⛔ CE QUE LA TABLE NE POSE PAS EST AUSSI IMPORTANT QUE CE QU'ELLE POSE.
+ * `pull` declarait `padding-inline:
+ * var(--origam-blockquote---resolved-padding-inline)` — une REDONDANCE avec
+ * la regle de base, qui pose exactement la meme valeur. L'inscrire ici
+ * emettrait une declaration INLINE, qui passerait devant la classe
+ * utilitaire qu'un `padding` du consommateur produit : la table
+ * confisquerait le canal qu'elle est censee servir. Valeur calculee
+ * identique des deux cotes tant qu'aucun `padding` n'est passe ; quand il
+ * l'est, l'axe inline de `pull` lui OBEIT desormais, ce qui va dans le sens
+ * du lot.
+ *
+ * @description
+ * ⛔ LES INDIRECTIONS `---resolved-*` NE SORTENT PAS D'ICI quand le token
+ * PUBLIC suffit. Les regles supprimees lisaient
+ * `var(--origam-blockquote---resolved-padding-inline)` et
+ * `var(--origam-blockquote---resolved-padding-block)`, deux proprietes
+ * custom que le bloc `<style scoped>` du composant synthetise lui-meme
+ * (`OrigamBlockquote.vue`, regle `.origam-blockquote`) et qu'AUCUNE feuille
+ * ne declare. Le preset nomme donc directement le token public que ces
+ * indirections resolvent — `--origam-blockquote---padding-inline, 24px` et
+ * `---padding-block, 16px` — ce qui est strictement equivalent par
+ * substitution (verifie : une seule declaration de chacune des deux
+ * indirections dans tout `packages/ds/src`, aucun modificateur ne les
+ * redeclare) et met le preset sur le canal de theme PUBLIC plutot que sur
+ * un detail interne. Le garde `ts-token-refs` cesse par la meme de
+ * rougir sur deux des quatre noms.
+ * @description
+ * ⚠️ `--origam-blockquote---resolved-accent-color` ne PEUT PAS subir le
+ * meme traitement, et c'est la seule entree de baseline que ce lot ajoute :
+ * les huit modificateurs `.origam-blockquote--accent-{intent}` REDECLARENT
+ * cette indirection. Nommer le token sous-jacent
+ * (`--origam-blockquote__accent---color`) rendrait `accent-color="primary"`
+ * inoperant sur le filet — une regression reelle. L'indirection est le
+ * mecanisme meme de l'axe `accentColor`, donc elle reste, avec un repli
+ * `currentColor` plat. ⛔ Un repli IMBRIQUE est exclu : le groupe `color`
+ * de `BORDER_REGEX` s'arrete a la premiere parenthese fermante, donc une
+ * valeur a repli imbrique ne matche pas DU TOUT et rien ne serait emis.
+ *
+ * @description
+ * ⚠️ `--origam-blockquote--minimal---accent-width` n'est declare par AUCUNE
+ * feuille — grammaire divergente, double tiret la ou le reste du composant
+ * ecrit `__`. `minimal` tombe donc toujours sur son repli `2px`. Le preset
+ * porte la chaine TELLE QUELLE : la fidelite est le travail, pas la
+ * correction. C'est **#1014**, et il n'est PAS corrige ici.
+ *
+ * @description
+ * ⚠️ `quoteMark` et `align` sont les deux moities « famille B » de ce
+ * composant — un element monte et un defaut d'alignement. D7 exige qu'elles
+ * passent par une prop COMPORTEMENTALE et que l'exemption soit documentee
+ * SUR la prop : voir leurs JSDoc dans
+ * `interfaces/Blockquote/blockquote.interface.ts`.
+ ********************************************************/
+export declare const BLOCKQUOTE_VARIANT_PRESETS: TVariantPresets<TBlockquoteVariant, IBlockquoteProps>;

package/dist/src/consts/Blockquote/blockquote.const.js

@@ -15,5 +15,42 @@ export const QUOTE_MARKS_BY_LANG = {
 export const BLOCKQUOTE_DEFAULTS = {
   variant: "default",
   lang: "auto",
+  align: "left",
   tag: "blockquote"
 };
+export const BLOCKQUOTE_VARIANT_PRESETS = {
+  default: {
+    borderInlineStart: "var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color, currentColor)",
+    paddingInlineStart: "calc(var(--origam-blockquote---padding-inline, 24px) + var(--origam-blockquote__accent---width, 4px))"
+  },
+  elegant: {
+    fontFamily: "serif",
+    fontSize: "xl",
+    fontStyle: "var(--origam-blockquote__elegant---font-style, italic)",
+    lineHeight: "loose",
+    paddingBlock: "var(--origam-blockquote__elegant---padding-block, 24px)",
+    borderInlineStart: "var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color, currentColor)",
+    paddingInlineStart: "calc(var(--origam-blockquote---padding-inline, 24px) + var(--origam-blockquote__accent---width, 4px))"
+  },
+  quoted: {
+    quoteMark: true,
+    paddingTop: "calc(var(--origam-blockquote---padding-block, 16px) + var(--origam-blockquote--quoted---glyph-padding-extra, 1rem))"
+  },
+  minimal: {
+    fontSize: "md",
+    fontStyle: "var(--origam-blockquote__minimal---font-style, italic)",
+    paddingBlock: 0,
+    paddingInline: "var(--origam-blockquote__minimal---padding-inline, 12px)",
+    borderInlineStart: "var(--origam-blockquote--minimal---accent-width, 2px) solid var(--origam-blockquote---resolved-accent-color, currentColor)",
+    paddingInlineStart: "calc(var(--origam-blockquote__minimal---padding-inline, 12px) + var(--origam-blockquote--minimal---accent-width, 2px))"
+  },
+  pull: {
+    fontFamily: "serif",
+    fontSize: "3xl",
+    fontWeight: "medium",
+    lineHeight: "snug",
+    align: "center",
+    paddingBlock: "var(--origam-blockquote__pull---padding-block, 24px)",
+    borderBlock: "var(--origam-blockquote__pull---rule-width, 2px) solid var(--origam-blockquote---resolved-accent-color, currentColor)"
+  }
+};

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.
  *