origam 2.19.0 → 2.21.0

package/dist/src/utils/Bracket/bracket-surface.util.cjs

@@ -129,5 +129,24 @@ function bracketSurfaceVars(input) {
     const width = resolveBracketBorderWidth(input[widthProp]);
     if (width) vars[`--origam-bracket-match---border-${axis}-width`] = width;
   });
+  const BLOCK_EDGES = [{
+    edge: "block-start",
+    widthProp: "borderBlockStart",
+    colorProp: "borderBlockStartColor"
+  }, {
+    edge: "block-end",
+    widthProp: "borderBlockEnd",
+    colorProp: "borderBlockEndColor"
+  }];
+  BLOCK_EDGES.forEach(({
+    edge,
+    widthProp,
+    colorProp
+  }) => {
+    const width = resolveBracketBorderWidth(input[widthProp]);
+    if (width) vars[`--origam-bracket-match---border-${edge}-width`] = width;
+    const edgeColor = resolveBracketBorderColor(input[colorProp]);
+    if (edgeColor) vars[`--origam-bracket-match---border-${edge}-color`] = edgeColor;
+  });
   return vars;
 }

package/dist/src/utils/Bracket/bracket-surface.util.js

@@ -101,5 +101,15 @@ export function bracketSurfaceVars(input) {
     const width = resolveBracketBorderWidth(input[widthProp]);
     if (width) vars[`--origam-bracket-match---border-${axis}-width`] = width;
   });
+  const BLOCK_EDGES = [
+    { edge: "block-start", widthProp: "borderBlockStart", colorProp: "borderBlockStartColor" },
+    { edge: "block-end", widthProp: "borderBlockEnd", colorProp: "borderBlockEndColor" }
+  ];
+  BLOCK_EDGES.forEach(({ edge, widthProp, colorProp }) => {
+    const width = resolveBracketBorderWidth(input[widthProp]);
+    if (width) vars[`--origam-bracket-match---border-${edge}-width`] = width;
+    const edgeColor = resolveBracketBorderColor(input[colorProp]);
+    if (edgeColor) vars[`--origam-bracket-match---border-${edge}-color`] = edgeColor;
+  });
   return vars;
 }

package/dist/src/utils/Commons/border.util.d.ts

@@ -1,4 +1,4 @@
-import type { TDirectionBoth } from '../../types/Commons/anchor.type';
+import type { TDirectionBoth, TLogicalSide } from '../../types/Commons/anchor.type';
 import type { TBorderLogicalAxis } from '../../types/Commons/border.type';
 import type { TColor } from '../../types/Commons/color.type';
 /**
@@ -43,14 +43,22 @@ export declare function parseBorderPositionValue(value: string): {
  * physical too: no logical/physical mismatch for the consumer to
  * mentally translate) or a LOGICAL axis (`TBorderLogicalAxis` —
  * `borderBlock` / `borderInline`, which map onto the native CSS logical
- * properties `border-block-*` / `border-inline-*` verbatim). Both share
- * the exact same `border-{position}-{width,style,color}` template, so
- * one function covers both without duplicating the formatting logic
- * (unlike `formatBorderStylesVar`'s 2/4-value output for the global
- * `border` shorthand, which distributes ACROSS axes from a single value
- * list — a different concern).
+ * properties `border-block-*` / `border-inline-*` verbatim) or a LOGICAL
+ * SIDE (`TLogicalSide` — `borderInlineStart` / `borderInlineEnd` /
+ * `borderBlockStart` / `borderBlockEnd`, issue #1013, mapping onto
+ * `border-inline-start-*` and friends). All three share the exact same
+ * `border-{position}-{width,style,color}` template, so one function
+ * covers all of them without duplicating the formatting logic (unlike
+ * `formatBorderStylesVar`'s 2/4-value output for the global `border`
+ * shorthand, which distributes ACROSS axes from a single value list — a
+ * different concern).
+ *
+ * #1013 widened the `position` union by one member and changed NOTHING
+ * else here: `'inline-start'` interpolates into the same template and
+ * yields the correct native longhands. That is the whole reason the
+ * logical-per-side grid needed no new formatter.
  */
-export declare function formatBorderPositionStylesVar(position: TDirectionBoth | TBorderLogicalAxis, facets: {
+export declare function formatBorderPositionStylesVar(position: TDirectionBoth | TBorderLogicalAxis | TLogicalSide, facets: {
     width?: string;
     style?: string;
     color?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.19.0",
+  "version": "2.21.0",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [