origam 2.7.3 → 2.8.1

package/dist/src/components/SystemBar/OrigamSystemBar.vue

@@ -51,6 +51,10 @@ const props = defineProps({
   borderInline: { 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 },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },

package/dist/src/components/Table/OrigamTable.vue

@@ -58,6 +58,10 @@ const props = defineProps({
   borderInline: { 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 },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/TextField/OrigamTextField.vue

@@ -270,6 +270,10 @@ const _props = defineProps({
   borderInline: { 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 },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -362,6 +362,10 @@ const _props = defineProps({
   borderInline: { 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 },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Title/OrigamTitle.vue

@@ -60,6 +60,10 @@ const props = defineProps({
   borderInline: { 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 },
   fontFamily: { type: String, required: false },
   fontSize: { type: String, required: false },
   fontWeight: { type: String, required: false },

package/dist/src/components/Toolbar/OrigamToolbar.vue

@@ -72,6 +72,10 @@ const props = defineProps({
   borderInline: { 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 },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Video/OrigamVideo.vue

@@ -279,6 +279,10 @@ const props = defineProps({
   borderInline: { 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 },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },

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

@@ -103,6 +103,10 @@ const props = defineProps({
   borderInline: { 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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

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

@@ -53,6 +53,28 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
       } = props;
       if (!(0, _utils.isEmpty)(borderColor)) styles.push(`border-color: ${borderColor}`);
       if (!(0, _utils.isEmpty)(borderStyle)) styles.push(`border-style: ${borderStyle}`);
+      _consts.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, _utils.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, _utils.parseBorderPositionValue)(sideValue);
+          if (parsed) styles.push(...(0, _utils.formatBorderPositionStylesVar)(side, parsed));
+        }
+        const resolvedSideColor = (0, _utils.resolveBorderSideColor)(sideColor);
+        if (resolvedSideColor) styles.push(`border-${side}-color: ${resolvedSideColor}`);
+      });
     }
     return styles;
   });

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

@@ -3,6 +3,25 @@ import type { IBorderProps } from '../../interfaces';
 import { TDirectionBoth } from "../../types";
 /*********************************************************
  * useBorder
+ *
+ * @description
+ * Precedence rule (issue #215) — SPECIFIC beats GLOBAL, always in this
+ * order, enforced purely by PUSH ORDER onto the `styles` array (later
+ * declarations win within the same inline `style` attribute — this holds
+ * even across logical vs physical property syntax for the same box edge):
+ *
+ *   1. global `border` shorthand (1/2/4-value, logical properties)
+ *   2. global standalone `borderColor` / `borderStyle`
+ *   3. per-side `borderTop` / `borderRight` / `borderBottom` / `borderLeft`
+ *      (physical properties — width, and style/color when a full string
+ *      like `"2px dashed red"` is given)
+ *   4. per-side `borderTopColor` / `borderRightColor` /
+ *      `borderBottomColor` / `borderLeftColor`
+ *
+ * So `borderTop` beats `border` for the top side, and `borderTopColor`
+ * beats both the color embedded in `borderTop` and the global
+ * `borderColor` — each rung only overrides the physical side(s) it
+ * actually targets, everything else keeps cascading from the rung below.
  ********************************************************/
 export declare function useBorder(props: IBorderProps | Ref<boolean | number | string | TDirectionBoth | Array<TDirectionBoth> | null | undefined>, name?: string): {
     borderClasses: import("vue").ComputedRef<string[]>;

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

@@ -1,6 +1,14 @@
 import { computed, isRef } from "vue";
-import { BORDER_REGEX, DIRECTION_ARRAY } from "../../consts/index.js";
-import { convertToUnit, formatBorderStylesVar, getCurrentInstanceName, isEmpty } from "../../utils/index.js";
+import { BORDER_POSITION_MAP, BORDER_REGEX, DIRECTION_ARRAY } from "../../consts/index.js";
+import {
+  convertToUnit,
+  formatBorderPositionStylesVar,
+  formatBorderStylesVar,
+  getCurrentInstanceName,
+  isEmpty,
+  parseBorderPositionValue,
+  resolveBorderSideColor
+} from "../../utils/index.js";
 const UTILITY_BORDER = /* @__PURE__ */ new Set([
   "none",
   "thin",
@@ -48,6 +56,24 @@ export function useBorder(props, name = getCurrentInstanceName()) {
       const { borderColor, borderStyle } = props;
       if (!isEmpty(borderColor)) styles.push(`border-color: ${borderColor}`);
       if (!isEmpty(borderStyle)) styles.push(`border-style: ${borderStyle}`);
+      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}`);
+      });
     }
     return styles;
   });

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

@@ -42,7 +42,7 @@ function useElevation(props, flat = (0, _vue.ref)(false), bgColor = (0, _vue.ref
     classes.push(`${name}--elevated`);
     if (isUtilityRung(elevation)) {
       classes.push(`origam--shadow-${elevation}`);
-    } else if (!isOrigamRung(elevation)) {
+    } else if (!isOrigamRung(elevation) && !(typeof elevation === "string" && (0, _utils.isCustomBoxShadow)(elevation))) {
       const numeric = typeof elevation === "string" ? parseInt(elevation, 10) : elevation;
       if (typeof numeric === "number" && !Number.isNaN(numeric)) {
         const tokenName = elevationToToken(numeric);
@@ -61,6 +61,10 @@ function useElevation(props, flat = (0, _vue.ref)(false), bgColor = (0, _vue.ref
       styles.push(`box-shadow: var(--origam-shadow---${elevation})`);
       return styles;
     }
+    if (typeof elevation === "string" && (0, _utils.isCustomBoxShadow)(elevation)) {
+      styles.push(`box-shadow: ${elevation.trim()}`);
+      return styles;
+    }
     const numeric = typeof elevation === "string" ? parseInt(elevation, 10) : elevation;
     if (Number.isNaN(numeric)) return styles;
     const tokenName = elevationToToken(numeric);

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

@@ -1,19 +1,30 @@
 import { Ref } from 'vue';
 import type { IElevationProps } from '../../interfaces';
-import { TColor } from "../../types";
+import { TColor, TElevation } from "../../types";
 /**
  * `useElevation` — refactored to consume design tokens (Lot 1).
  *
+ * Accepts three shapes for `elevation` (see `TElevation`):
+ *   - an origam-native rung name (`'none'|'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'`),
+ *   - a Material-style number `0..24` (as a `number` or numeric `string`),
+ *   - a free-form custom `box-shadow` value (`'0 4px 12px rgba(0,0,0,.24)'`,
+ *     `'var(--origam-shadow---card)'`, `'inset 0 0 0 2px #fff'`, …) —
+ *     emitted verbatim via `elevationStyles`. Detected by `isCustomBoxShadow`
+ *     (permissive signal-based check, same approach as `useRounded`'s
+ *     `isCustomBorderRadius`), so genuinely invalid input keeps the
+ *     pre-existing silent-drop behaviour (no regression).
+ *
  * Backward-compat:
  *   - The signature is preserved (`bgColor` accepted but ignored).
  *   - Returns the same shape: `{ elevationClasses, elevationStyles }`.
  *   - `elevationStyles` is still a string array — emits a single `box-shadow:`
- *     declaration that references the appropriate `--origam-shadow-*` token.
+ *     declaration that references the appropriate `--origam-shadow-*` token,
+ *     or the custom value verbatim.
  */
 /*********************************************************
  * useElevation
  ********************************************************/
-export declare function useElevation(props: IElevationProps | Ref<number | string | undefined>, flat?: Ref<boolean>, bgColor?: Ref<TColor>, name?: string): {
+export declare function useElevation(props: IElevationProps | Ref<TElevation | undefined>, flat?: Ref<boolean>, bgColor?: Ref<TColor>, name?: string): {
     elevationClasses: import("vue").ComputedRef<string[]>;
     elevationStyles: import("vue").ComputedRef<string[]>;
 };

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

@@ -1,6 +1,6 @@
 import { computed, isRef, ref } from "vue";
 import { ORIGAM_SHADOW_RUNGS, UTILITY_SHADOW_RUNGS } from "../../consts/Commons/elevation.const.js";
-import { getCurrentInstanceName } from "../../utils/index.js";
+import { getCurrentInstanceName, isCustomBoxShadow } from "../../utils/index.js";
 function elevationToToken(level) {
   if (level <= 0) return "none";
   if (level <= 1) return "xs";
@@ -36,7 +36,7 @@ export function useElevation(props, flat = ref(false), bgColor = ref("rgb(0,0,0)
     classes.push(`${name}--elevated`);
     if (isUtilityRung(elevation)) {
       classes.push(`origam--shadow-${elevation}`);
-    } else if (!isOrigamRung(elevation)) {
+    } else if (!isOrigamRung(elevation) && !(typeof elevation === "string" && isCustomBoxShadow(elevation))) {
       const numeric = typeof elevation === "string" ? parseInt(elevation, 10) : elevation;
       if (typeof numeric === "number" && !Number.isNaN(numeric)) {
         const tokenName = elevationToToken(numeric);
@@ -55,6 +55,10 @@ export function useElevation(props, flat = ref(false), bgColor = ref("rgb(0,0,0)
       styles.push(`box-shadow: var(--origam-shadow---${elevation})`);
       return styles;
     }
+    if (typeof elevation === "string" && isCustomBoxShadow(elevation)) {
+      styles.push(`box-shadow: ${elevation.trim()}`);
+      return styles;
+    }
     const numeric = typeof elevation === "string" ? parseInt(elevation, 10) : elevation;
     if (Number.isNaN(numeric)) return styles;
     const tokenName = elevationToToken(numeric);

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

@@ -109,6 +109,30 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     },
     get borderStyle() {
       return props.borderStyle;
+    },
+    get borderTop() {
+      return props.borderTop;
+    },
+    get borderRight() {
+      return props.borderRight;
+    },
+    get borderBottom() {
+      return props.borderBottom;
+    },
+    get borderLeft() {
+      return props.borderLeft;
+    },
+    get borderTopColor() {
+      return props.borderTopColor;
+    },
+    get borderRightColor() {
+      return props.borderRightColor;
+    },
+    get borderBottomColor() {
+      return props.borderBottomColor;
+    },
+    get borderLeftColor() {
+      return props.borderLeftColor;
     }
   }));
   const {

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

@@ -120,6 +120,30 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
       },
       get borderStyle() {
         return props.borderStyle;
+      },
+      get borderTop() {
+        return props.borderTop;
+      },
+      get borderRight() {
+        return props.borderRight;
+      },
+      get borderBottom() {
+        return props.borderBottom;
+      },
+      get borderLeft() {
+        return props.borderLeft;
+      },
+      get borderTopColor() {
+        return props.borderTopColor;
+      },
+      get borderRightColor() {
+        return props.borderRightColor;
+      },
+      get borderBottomColor() {
+        return props.borderBottomColor;
+      },
+      get borderLeftColor() {
+        return props.borderLeftColor;
       }
     })
   );

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

@@ -3,5 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BORDER_REGEX = void 0;
-const BORDER_REGEX = exports.BORDER_REGEX = /^(?<width>(?: ?(?:[0-9]+)(?:px|pt|PC|in|cm|mm|em|rem|%|ex|ch|fr)?){0,4}) {0,1}(?<style>(?:(?: ?(?:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset))+){0,4}) ?(?<color>(?: ?(?:(?:(?:#)(?:[a-f0-9]{3}|[a-f0-9]{6}))|(?:var\(--[^)]+\))|(?:(?:rgb|hsl|rgba)a?\(.*\))|(?:[A-Za-z]+))){0,4})$/;
+exports.BORDER_REGEX = exports.BORDER_POSITION_MAP = void 0;
+var _enums = require("../../enums/index.cjs");
+const BORDER_REGEX = exports.BORDER_REGEX = /^(?<width>(?: ?(?:[0-9]+)(?:px|pt|PC|in|cm|mm|em|rem|%|ex|ch|fr)?){0,4}) {0,1}(?<style>(?:(?: ?(?:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset))+){0,4}) ?(?<color>(?: ?(?:(?:(?:#)(?:[a-f0-9]{3}|[a-f0-9]{6}))|(?:var\(--[^)]+\))|(?:(?:rgb|hsl|rgba)a?\(.*\))|(?:[A-Za-z]+))){0,4})$/;
+const BORDER_POSITION_MAP = exports.BORDER_POSITION_MAP = [{
+  side: _enums.BLOCK.TOP,
+  widthProp: "borderTop",
+  colorProp: "borderTopColor"
+}, {
+  side: _enums.INLINE.RIGHT,
+  widthProp: "borderRight",
+  colorProp: "borderRightColor"
+}, {
+  side: _enums.BLOCK.BOTTOM,
+  widthProp: "borderBottom",
+  colorProp: "borderBottomColor"
+}, {
+  side: _enums.INLINE.LEFT,
+  widthProp: "borderLeft",
+  colorProp: "borderLeftColor"
+}];

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

@@ -1,3 +1,4 @@
+import { BLOCK, INLINE } from '../../enums';
 /**
  * Parse a free-form `border` value into width / style / color groups.
  *
@@ -17,3 +18,31 @@
  * fixes the design-token path.
  */
 export declare const BORDER_REGEX: RegExp;
+/**
+ * Physical-side lookup driving the per-side border wiring (issue #215).
+ *
+ * `IBorderProps` names its discrete side props PHYSICALLY
+ * (`borderTop`/`borderRight`/`borderBottom`/`borderLeft`), unlike the
+ * global `border` shorthand's 4-value mode which distributes across
+ * LOGICAL axes (`block-start`/`inline-start`/…, see `formatBorderStylesVar`
+ * / issue #216). `useBorder` reads this map to emit matching PHYSICAL CSS
+ * declarations (`border-top-width`, …) — no logical/physical mismatch for
+ * the consumer to mentally translate.
+ */
+export declare const BORDER_POSITION_MAP: readonly [{
+    readonly side: BLOCK.TOP;
+    readonly widthProp: "borderTop";
+    readonly colorProp: "borderTopColor";
+}, {
+    readonly side: INLINE.RIGHT;
+    readonly widthProp: "borderRight";
+    readonly colorProp: "borderRightColor";
+}, {
+    readonly side: BLOCK.BOTTOM;
+    readonly widthProp: "borderBottom";
+    readonly colorProp: "borderBottomColor";
+}, {
+    readonly side: INLINE.LEFT;
+    readonly widthProp: "borderLeft";
+    readonly colorProp: "borderLeftColor";
+}];

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

@@ -1 +1,8 @@
+import { BLOCK, INLINE } from "../../enums/index.js";
 export const BORDER_REGEX = /^(?<width>(?: ?(?:[0-9]+)(?:px|pt|PC|in|cm|mm|em|rem|%|ex|ch|fr)?){0,4}) {0,1}(?<style>(?:(?: ?(?:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset))+){0,4}) ?(?<color>(?: ?(?:(?:(?:#)(?:[a-f0-9]{3}|[a-f0-9]{6}))|(?:var\(--[^)]+\))|(?:(?:rgb|hsl|rgba)a?\(.*\))|(?:[A-Za-z]+))){0,4})$/;
+export const BORDER_POSITION_MAP = [
+  { side: BLOCK.TOP, widthProp: "borderTop", colorProp: "borderTopColor" },
+  { side: INLINE.RIGHT, widthProp: "borderRight", colorProp: "borderRightColor" },
+  { side: BLOCK.BOTTOM, widthProp: "borderBottom", colorProp: "borderBottomColor" },
+  { side: INLINE.LEFT, widthProp: "borderLeft", colorProp: "borderLeftColor" }
+];

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UTILITY_SHADOW_RUNGS = exports.ORIGAM_SHADOW_RUNGS = void 0;
+exports.UTILITY_SHADOW_RUNGS = exports.ORIGAM_SHADOW_RUNGS = exports.CUSTOM_BOX_SHADOW_REGEX = void 0;
 const ORIGAM_SHADOW_RUNGS = exports.ORIGAM_SHADOW_RUNGS = /* @__PURE__ */new Set(["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"]);
-const UTILITY_SHADOW_RUNGS = exports.UTILITY_SHADOW_RUNGS = /* @__PURE__ */new Set(["none", "xs", "sm", "md", "lg", "xl"]);
+const UTILITY_SHADOW_RUNGS = exports.UTILITY_SHADOW_RUNGS = /* @__PURE__ */new Set(["none", "xs", "sm", "md", "lg", "xl"]);
+const CUSTOM_BOX_SHADOW_REGEX = exports.CUSTOM_BOX_SHADOW_REGEX = /(?:var|calc|clamp|min|max|env|rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color-mix)\(|#[0-9a-f]{3,8}\b|[\d.]+(?:px|pt|pc|in|cm|mm|q|em|rem|ex|ch|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|%)|\binset\b/i;

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

@@ -15,3 +15,23 @@ export declare const ORIGAM_SHADOW_RUNGS: ReadonlySet<string>;
  * to the inline-style path.
  */
 export declare const UTILITY_SHADOW_RUNGS: ReadonlySet<string>;
+/**
+ * Detects a free-form custom `box-shadow` value that is neither an
+ * origam-native rung name (`ORIGAM_SHADOW_RUNGS`) nor a Material 0..24
+ * number — e.g. `'0 4px 12px rgba(0,0,0,.24)'`, a `var(--origam-shadow---card)`
+ * / `calc(...)` reference, multiple comma-separated shadow layers, or an
+ * `inset` shadow.
+ *
+ * Mirrors `CUSTOM_BORDER_RADIUS_REGEX` (`rounded.const.ts`): deliberately
+ * permissive, not a full box-shadow grammar validator. It only checks that
+ * the string carries at least one signal a real `box-shadow` value would
+ * have — a CSS function call (`var(`, `calc(`, `clamp(`, `rgb(`, `rgba(`,
+ * `hsl(`, `hsla(`, `hwb(`, `color-mix(`, …), a hex color, a CSS length with
+ * a unit, or the `inset` keyword. Anything that matches none of these is
+ * treated as not-a-shadow and falls through to the existing (silent-drop)
+ * behaviour — no regression for genuinely invalid input.
+ *
+ * Example matches: `'0 4px 12px rgba(0,0,0,.24)'`, `'var(--origam-shadow---card)'`,
+ * `'inset 0 0 0 2px #fff'`, `'0 1px 2px #000, 0 2px 8px #000'`.
+ */
+export declare const CUSTOM_BOX_SHADOW_REGEX: RegExp;

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

@@ -16,3 +16,4 @@ export const UTILITY_SHADOW_RUNGS = /* @__PURE__ */ new Set([
   "lg",
   "xl"
 ]);
+export const CUSTOM_BOX_SHADOW_REGEX = /(?:var|calc|clamp|min|max|env|rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color-mix)\(|#[0-9a-f]{3,8}\b|[\d.]+(?:px|pt|pc|in|cm|mm|q|em|rem|ex|ch|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|%)|\binset\b/i;

package/dist/src/interfaces/Blockquote/blockquote.interface.d.ts

@@ -1,4 +1,4 @@
-import type { IBgColorProps, IBorderProps, IColorProps, ICommonsComponentProps, IElevationProps, IMarginProps, IPaddingProps, IRoundedProps, ITagProps, ITypographyProps } from '../../interfaces';
+import type { IAccentColorProps, IBgColorProps, IBorderProps, IColorProps, ICommonsComponentProps, IElevationProps, IMarginProps, IPaddingProps, IRoundedProps, ITagProps, ITypographyProps } from '../../interfaces';
 import type { TBlockquoteAlign, TBlockquoteLang, TBlockquoteVariant } from '../../types';
 /**
  * Props for `<OrigamBlockquote>` — typographic citation component.
@@ -12,21 +12,28 @@ import type { TBlockquoteAlign, TBlockquoteLang, TBlockquoteVariant } from '../.
  * - **`color`** drives the **citation text** itself (the body). Defaults
  *   to `text-primary`. An intent resolves to its readable-on-light shade
  *   (`fgSubtle`); a custom value is applied verbatim.
- * - **`bgColor`** drives the **accent**: the decorative bar / pull rules
- *   (the "borders"), the big background quote glyph and the author label.
- *   Defaults to `primary`. It does NOT paint a surface fill — the
- *   blockquote stays transparent (see ROADMAP: future rename to
- *   `accentColor`).
+ * - **`accentColor`** drives the **accent**: the decorative bar / pull
+ *   rules (the "borders"), the big background quote glyph and the author
+ *   label. Defaults to `primary`. It does NOT paint a surface fill — the
+ *   blockquote stays transparent.
  *
  * The two axes are meant to contrast: a dark body (`color`) reads against
- * a coloured accent (`bgColor`).
+ * a coloured accent (`accentColor`).
+ *
+ * @deprecated `bgColor` — renamed to `accentColor` (see ROADMAP.md,
+ * "Renommer `bgColor` → `accentColor`"). `bgColor` keeps working as an
+ * alias (`accentColor ?? bgColor`, `accentColor` wins) and warns once via
+ * `warnDeprecatedProp`. Removal targeted for v3.0.0. Only Blockquote
+ * migrates in this pass — `bgColor` stays the canonical, non-deprecated
+ * name on surface-fill components (Btn, Card, Chip, Badge, Alert,
+ * Pagination, …), where "accent" would misrepresent a full fill.
  *
  * Standard cross-cutting surfaces (`rounded`, `elevation`, `border`,
  * `padding`, `margin`) are inherited from the Commons interfaces and
  * consumed via the matching composables. The component never imposes an
  * outer margin unless `margin` is passed.
  */
-export interface IBlockquoteProps extends ICommonsComponentProps, ITagProps, IColorProps, IBgColorProps, IRoundedProps, IElevationProps, IBorderProps, IPaddingProps, IMarginProps, ITypographyProps {
+export interface IBlockquoteProps extends ICommonsComponentProps, ITagProps, IColorProps, IAccentColorProps, IBgColorProps, IRoundedProps, IElevationProps, IBorderProps, IPaddingProps, IMarginProps, ITypographyProps {
     /**
      * Visual variant. See `TBlockquoteVariant` for the per-variant
      * typographic contract.

package/dist/src/interfaces/Commons/border.interface.d.ts

@@ -1,4 +1,4 @@
-import { TDirectionBoth } from "../../types";
+import { TColor, TDirectionBoth } from "../../types";
 export interface IBorderProps {
     border?: boolean | number | string | TDirectionBoth | Array<TDirectionBoth>;
     borderTop?: boolean | number | string;
@@ -9,4 +9,23 @@ export interface IBorderProps {
     borderInline?: boolean | number | string;
     borderColor?: string;
     borderStyle?: string;
+    /**
+     * Per-side color override (issue #215). Additive: absent by default,
+     * no behaviour change for existing consumers.
+     *
+     * Precedence (specific > global): `borderTopColor` wins over any
+     * color implied by `borderTop` (e.g. `borderTop="2px dashed red"`),
+     * which itself wins over the global `borderColor` / `border` shorthand
+     * for the top side. See `useBorder` JSDoc for the full precedence
+     * table.
+     *
+     * Accepts a {@link TColor} (semantic intent, raw CSS color, or falsy
+     * to opt out) — same input family as `color` / `bgColor`. Gradients
+     * are NOT supported on border colors (CSS `border-color` has no
+     * gradient form) and are silently ignored.
+     */
+    borderTopColor?: TColor;
+    borderRightColor?: TColor;
+    borderBottomColor?: TColor;
+    borderLeftColor?: TColor;
 }

package/dist/src/interfaces/Commons/color.interface.d.ts

@@ -47,3 +47,27 @@ export interface IColorProps {
 export interface IBgColorProps {
     bgColor?: TColor;
 }
+/**
+ * Accent-only color contract.
+ *
+ * Combine with {@link IColorProps} on components that paint a
+ * **decorative accent** — a border bar, a background glyph, a pull-rule
+ * — rather than their own surface fill. `accentColor` is the canonical
+ * name for that axis (see ROADMAP.md — "Renommer `bgColor` →
+ * `accentColor`"). Do NOT reach for this on surface-fill components
+ * (Btn, Card, Chip, Badge, Alert, Pagination, …) — those keep
+ * {@link IBgColorProps}, whose `bgColor` paints a real
+ * `background-color`. Mixing the two meanings under the same prop name
+ * is exactly the confusion this interface exists to avoid.
+ *
+ *   // Blockquote paints text (color) + a decorative accent (accentColor).
+ *   interface IBlockquoteProps extends IColorProps, IAccentColorProps { … }
+ *
+ * `bgColor` remains a **deprecated alias** on components that migrate to
+ * `accentColor` — resolve it as `accentColor ?? bgColor` (accentColor
+ * wins) and warn once via `warnDeprecatedProp` from
+ * `src/utils/Commons/color.util.ts`. Removal targeted for v3.0.0.
+ */
+export interface IAccentColorProps {
+    accentColor?: TColor;
+}

package/dist/src/interfaces/Commons/elevation.interface.d.ts

@@ -1,3 +1,4 @@
+import type { TElevation } from '../../types';
 export interface IElevationProps {
-    elevation?: number | string;
+    elevation?: TElevation;
 }

package/dist/src/types/Commons/elevation.type.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/src/types/Commons/elevation.type.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `elevation` prop accepted by every component that consumes
+ * `useElevation` (`src/composables/Commons/elevation.composable.ts`).
+ *
+ * Three shapes are supported:
+ *   - An origam-native shadow rung name — `'none' | 'xs' | 'sm' | 'md' |
+ *     'lg' | 'xl' | '2xl' | '3xl'` — resolves to `var(--origam-shadow---{rung})`.
+ *   - A Material-style numeric elevation (`0..24`, as a `number` or a
+ *     numeric `string`) — bucketised onto the origam shadow ladder.
+ *   - A free-form custom `box-shadow` value (`var(...)`, `calc(...)`,
+ *     a literal shadow list like `'0 4px 12px rgba(0,0,0,.24)'`, multiple
+ *     comma-separated layers, `inset`, …) — emitted verbatim as
+ *     `box-shadow: <value>`. Mirrors the `TRounded` custom-string escape
+ *     hatch (`isCustomBorderRadius` in `rounded.util.ts`).
+ *
+ * The type stays a loose `number | string` union on purpose — the three
+ * shapes above are disambiguated at runtime by `useElevation`, not by the
+ * type system (same approach as `TRounded` for free-form radii).
+ */
+export type TElevation = number | string;

package/dist/src/types/index.cjs

@@ -564,6 +564,17 @@ Object.keys(_dimension).forEach(function (key) {
     }
   });
 });
+var _elevation = require("./Commons/elevation.type.cjs");
+Object.keys(_elevation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _elevation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _elevation[key];
+    }
+  });
+});
 var _variant = require("./Commons/variant.type.cjs");
 Object.keys(_variant).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/types/index.d.ts

@@ -49,6 +49,7 @@ export * from './Commons/letter-spacing.type';
 export * from './Commons/line-height.type';
 export * from './Commons/rounded.type';
 export * from './Commons/dimension.type';
+export * from './Commons/elevation.type';
 export * from './Commons/variant.type';
 export * from './Commons/direction.type';
 export * from './Commons/display.type';

package/dist/src/types/index.js

@@ -49,6 +49,7 @@ export * from "./Commons/letter-spacing.type.js";
 export * from "./Commons/line-height.type.js";
 export * from "./Commons/rounded.type.js";
 export * from "./Commons/dimension.type.js";
+export * from "./Commons/elevation.type.js";
 export * from "./Commons/variant.type.js";
 export * from "./Commons/direction.type.js";
 export * from "./Commons/display.type.js";