origam 2.18.20 → 2.18.21

package/CHANGELOG.md

@@ -18,6 +18,66 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.18.21] - 2026-09-30
+
+### Fixed — `useBorder` supprimait silencieusement une largeur en `var()`
+
+`BORDER_REGEX` n'acceptait en largeur que des chiffres suivis d'une unite,
+tandis que son groupe **couleur** accepte `var(--…)`. Une chaine comme
+`borderLeft="var(--x) solid var(--y)"` etait donc happee **entierement par le
+groupe couleur** : `parseBorderPositionValue` renvoyait une largeur vide,
+`formatBorderPositionStylesVar` sautait la declaration, et le navigateur
+jetait le `border-left-color` invalide. Resultat rendu : un bord `medium`
+(~3px) en `currentColor` au lieu de la largeur et de la couleur demandees.
+
+⛔ **Aucun diagnostic.** Le type-check passait, rien n'etait leve, rien
+n'etait logue. Le chemin booleen (`borderLeft: true`) emettait pourtant un
+`var()` correctement — seul l'analyseur de chaine refusait.
+
+Le groupe `width` accepte desormais une alternative `var()`, **conditionnee
+par un lookahead sur un mot-clé de style**. Ce garde n'est pas decoratif : les
+trois groupes de la regex peuvent matcher vide, donc une alternative `var()`
+nue aurait happe `var(--ma-couleur)` — une couleur SEULE, cas courant qui
+fonctionnait — et aurait inverse la panne. Le lookahead tire sa liste de
+`BORDER_STYLE`, pour qu'elle ne puisse plus deriver de celle du groupe `style`.
+
+⚠️ **Limite connue, pinnee par trois tests et non corrigee ici.** Une largeur
+`var()` **contenant une espace** (`var(--x, 4px)`) ne passe que par les props
+PAR COTE. La prop globale `border` fait un `split(' ')` et coupe la valeur en
+fragments invalides. Avant ce lot la meme valeur tombait entiere dans `color`
+et y etait scindee en quatre — aucun bord dans les deux cas, donc pas de
+regression, mais pas repare. **Un preset portant une largeur tokenisee doit
+viser une prop par cote ou d'axe, jamais `border`.**
+
+### Added — `fontStyle` en passthrough sur `ITypographyProps`
+
+`font-style` n'avait ni prop, ni groupe de tokens, ni classe utilitaire
+(`0` occurrence dans `interfaces/Commons/` et `composables/Commons/`, `0` pour
+`font__style` dans `primitive.css`). `useTypography` enveloppant toute valeur
+en token, `italic` / `normal` — des mots-clés CSS, pas des echelons — devaient
+passer **litteralement**. Aucun canal nouveau : `--origam-blockquote---font-style`
+etait deja declare et deja lu.
+
+### Internal — ce que la campagne zero-changement ne prouve pas
+
+`BORDER_REGEX` sert la prop `border` sur ~100 composants sans baseline VRT, et
+la verification exigee etait donc : aucune valeur du depot ne change de
+decoupage. Verdict — **81 valeurs `border*` distinctes, 81 decoupages
+identiques, delta zero**.
+
+⛔ Mais la regex **naive** que ce garde-fou existe pour eviter ne diverge, elle
+non plus, **sur aucune des 81 valeurs reelles** : aucun fichier du depot ne
+passe une couleur `var()` seule a une prop de bordure. **Le corpus reel
+n'aurait pas attrape la regression inverse** — seul le controle negatif
+synthetique `var(--c)` l'attrape. Une campagne sur valeurs reelles prouve
+moins qu'elle n'en a l'air ; les controles negatifs sont ce qui la rend
+concluante. Consigne dans `border.const.ts`.
+
+Hors paquet publie, dans le meme intervalle : `pnpm audit` est repasse de
+**7 high / 7 moderate / 3 low** a **0**, par relevement de trois `overrides`
+(`brace-expansion@2`, `brace-expansion@5`, `undici@8`). Aucun fichier de
+`packages/ds` touche, donc le tarball est inchange par cette partie.
+
 ## [2.18.20] - 2026-09-30
 
 ### Added — surfaces de props `opacity` et `backdrop`, et les deux trous de `IStateEffectConfig`

package/dist/src/components/Blockquote/OrigamBlockquote.vue

@@ -113,7 +113,8 @@ const props = defineProps({
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  letterSpacing: { type: null, required: false },
+  fontStyle: { type: String, required: false }
 });
 defineEmits([]);
 defineSlots();

package/dist/src/components/TextMask/OrigamTextMask.vue

@@ -33,7 +33,8 @@ const props = defineProps({
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  letterSpacing: { type: null, required: false },
+  fontStyle: { type: String, required: false }
 });
 defineEmits([]);
 defineSlots();

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

@@ -66,7 +66,8 @@ const props = defineProps({
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  letterSpacing: { type: null, required: false },
+  fontStyle: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 defineEmits([]);

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTypography = useTypography;
 var _vue = require("vue");
 const TYPOGRAPHY_TOKEN_MAP = [["fontFamily", "font-family", "font__family"], ["fontSize", "font-size", "font__size"], ["fontWeight", "font-weight", "font__weight"], ["lineHeight", "line-height", "font__lineHeight"], ["letterSpacing", "letter-spacing", "font__letterSpacing"]];
+const TYPOGRAPHY_PASSTHROUGH_MAP = [["fontStyle", "font-style"]];
 function useTypography(props, varPrefix) {
   const typographyStyles = (0, _vue.computed)(() => {
     const styles = {};
@@ -15,6 +16,12 @@ function useTypography(props, varPrefix) {
         styles[`--origam-${varPrefix}---${cssProp}`] = `var(--origam-${tokenGroup}---${value})`;
       }
     }
+    for (const [propKey, cssProp] of TYPOGRAPHY_PASSTHROUGH_MAP) {
+      const value = props[propKey];
+      if (value) {
+        styles[`--origam-${varPrefix}---${cssProp}`] = String(value);
+      }
+    }
     return Object.keys(styles).length ? styles : null;
   });
   return {

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

@@ -4,13 +4,18 @@ import type { ITypographyProps } from '../../interfaces/Commons/typography.inter
  *
  * @description
  * Volet typographique de `useMargin`/`useBorder`/`useColor` : pour
- * chacune des cinq `ITypographyProps` (`fontFamily`, `fontSize`,
+ * chacune des cinq `ITypographyProps` de TOKEN (`fontFamily`, `fontSize`,
  * `fontWeight`, `lineHeight`, `letterSpacing`) que le consommateur a
  * fixee, emet une custom property inline `--origam-{varPrefix}---{prop}`
  * qui repointe vers le token primitif correspondant. Une prop non fixee
  * n'emet rien — le theme/la variante du composant garde la main.
  *
  * @description
+ * La sixieme, `fontStyle`, passe par un canal PASSTHROUGH : sa valeur est
+ * un mot-cle CSS rendu verbatim, sans enveloppe `var()`. Voir
+ * `TYPOGRAPHY_PASSTHROUGH_MAP` pour le pourquoi.
+ *
+ * @description
  * INLINE UNIQUEMENT (pas de classe utilitaire — `origam-utilities.css`
  * n'a pas de famille `.origam--font-*`), et `typographyStyles` est un
  * objet PLAT `{ '--var': valeur }` (jamais un tableau) : `useStyle()`

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

@@ -6,6 +6,9 @@ const TYPOGRAPHY_TOKEN_MAP = [
   ["lineHeight", "line-height", "font__lineHeight"],
   ["letterSpacing", "letter-spacing", "font__letterSpacing"]
 ];
+const TYPOGRAPHY_PASSTHROUGH_MAP = [
+  ["fontStyle", "font-style"]
+];
 export function useTypography(props, varPrefix) {
   const typographyStyles = computed(() => {
     const styles = {};
@@ -15,6 +18,12 @@ export function useTypography(props, varPrefix) {
         styles[`--origam-${varPrefix}---${cssProp}`] = `var(--origam-${tokenGroup}---${value})`;
       }
     }
+    for (const [propKey, cssProp] of TYPOGRAPHY_PASSTHROUGH_MAP) {
+      const value = props[propKey];
+      if (value) {
+        styles[`--origam-${varPrefix}---${cssProp}`] = String(value);
+      }
+    }
     return Object.keys(styles).length ? styles : null;
   });
   return { typographyStyles };

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BORDER_REGEX = exports.BORDER_PROP_KEYS = exports.BORDER_POSITION_MAP = exports.BORDER_LOGICAL_AXIS_MAP = exports.BORDER_KEYWORD_WIDTH = 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_STYLE_ALTERNATION = Object.values(_enums.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})";
+const BORDER_REGEX = exports.BORDER_REGEX = new RegExp(`^(?<width>(?: ?var\\(--[^)]+\\)(?= +(?:${BORDER_STYLE_ALTERNATION}))| ?(?:[0-9]+)${BORDER_LENGTH_UNITS}){0,4}) {0,1}(?<style>(?:(?: ?(?:${BORDER_STYLE_ALTERNATION}))+){0,4}) ?` + BORDER_COLOR_GROUP + "$");
 const BORDER_POSITION_MAP = exports.BORDER_POSITION_MAP = [{
   side: _enums.BLOCK.TOP,
   widthProp: "borderTop",

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

@@ -1,23 +1,5 @@
 import { BLOCK, INLINE } from '../../enums';
 import type { TBorderLogicalAxis, TBorderWidthKeyword } from '../../types/Commons/border.type';
-/**
- * Parse a free-form `border` value into width / style / color groups.
- *
- * Accepted color forms (in alternation order — `var()` MUST come before
- * the bare `[A-Za-z]+` branch, otherwise `var` would be eaten as a word
- * before the parenthesis group has a chance to match):
- *
- *   • Hex literal       — `#abc` / `#aabbcc`
- *   • CSS function      — `rgb(…)` / `rgba(…)` / `hsl(…)` / `hsla(…)`
- *   • CSS custom prop   — `var(--origam-color__action--primary---bg)` (with optional
- *                          fallback: `var(--x, fallback)`)
- *   • Named keyword     — `red`, `currentColor`, `transparent`, etc.
- *
- * The user reported that DS-token references (`var(--…)`) silently
- * dropped through this regex and were never emitted as `border-color`,
- * while raw hex / named colors worked. Adding the `var()` alternative
- * fixes the design-token path.
- */
 export declare const BORDER_REGEX: RegExp;
 /**
  * Physical-side lookup driving the per-side border wiring (issue #215).

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

@@ -1,5 +1,10 @@
-import { BLOCK, BORDER_LOGICAL_AXIS, 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})$/;
+import { BLOCK, BORDER_LOGICAL_AXIS, BORDER_STYLE, INLINE } 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})";
+export const BORDER_REGEX = new RegExp(
+  `^(?<width>(?: ?var\\(--[^)]+\\)(?= +(?:${BORDER_STYLE_ALTERNATION}))| ?(?:[0-9]+)${BORDER_LENGTH_UNITS}){0,4}) {0,1}(?<style>(?:(?: ?(?:${BORDER_STYLE_ALTERNATION}))+){0,4}) ?` + BORDER_COLOR_GROUP + "$"
+);
 export const BORDER_POSITION_MAP = [
   { side: BLOCK.TOP, widthProp: "borderTop", colorProp: "borderTopColor" },
   { side: INLINE.RIGHT, widthProp: "borderRight", colorProp: "borderRightColor" },

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

@@ -6,9 +6,14 @@ import type { TLineHeight } from '../../types/Commons/line-height.type';
 /**
  * Cross-cutting typography surface — the font equivalent of
  * `IColorProps` / `IBorderProps` / `IMarginProps`. Every prop is optional
- * and maps a primitive font token key to the matching component CSS
- * variable via `useTypography`. When a prop is unset the component keeps
- * its theme value (no override emitted).
+ * and resolves to the matching component CSS variable via `useTypography`.
+ * When a prop is unset the component keeps its theme value (no override
+ * emitted).
+ *
+ * The first FIVE props are primitive font token KEYS, wrapped into
+ * `var(--origam-font__{group}---{value})`. `fontStyle` is the one
+ * PASSTHROUGH: a CSS keyword emitted verbatim, because `font-style` has no
+ * design scale — see its own note below.
  *
  * | Prop            | CSS property      | Primitive token group        |
  * |-----------------|-------------------|------------------------------|
@@ -17,6 +22,7 @@ import type { TLineHeight } from '../../types/Commons/line-height.type';
  * | `fontWeight`    | `font-weight`     | `--origam-font__weight---*`        |
  * | `lineHeight`    | `line-height`     | `--origam-font__lineHeight---*`    |
  * | `letterSpacing` | `letter-spacing`  | `--origam-font__letterSpacing---*` |
+ * | `fontStyle`     | `font-style`      | *none — passthrough, see below*    |
  *
  * Collision-free names by design: `fontSize` / `fontWeight` / `fontFamily`
  * (not `size` / `weight` / `family`) so the surface composes with
@@ -53,4 +59,42 @@ export interface ITypographyProps {
      * When unset, the component keeps its theme letter-spacing.
      */
     letterSpacing?: TLetterSpacing;
+    /*********************************************************
+     * fontStyle
+     *
+     * @description
+     * Style de fonte, emis LITTERALEMENT dans
+     * `--origam-{prefix}---font-style`. Seul membre PASSTHROUGH de cette
+     * interface : les cinq autres props sont des cles de token que
+     * `useTypography` enveloppe en `var(--origam-font__{groupe}---{valeur})`.
+     *
+     * @description
+     * ⛔ POURQUOI PAS UN TOKEN. `italic` / `normal` / `oblique` sont des
+     * MOTS-CLES CSS, pas les echelons d'une echelle de design : il n'existe
+     * aucun groupe `--origam-font__style---*` dans `primitive.css` (verifie,
+     * zero occurrence) et il n'en faut pas. Enveloppee, la valeur sortirait
+     * en `var(--origam-font__style---italic)`, un nom que nulle feuille ne
+     * declare — donc rien ne peindrait.
+     *
+     * @description
+     * Type `string` volontairement large, par coherence avec
+     * `IBorderProps.borderStyle` / `borderColor`, les deux autres
+     * passthrough de mot-cle CSS des interfaces Commons. Laisse passer
+     * `oblique 10deg`, qu'une union fermee rejetterait.
+     *
+     * @description
+     * ⚠️ N'a d'EFFET que si la SCSS du composant lit le var GENERIQUE
+     * `--origam-{prefix}---font-style`. Mesure a l'ajout : un seul composant
+     * le fait — `OrigamBlockquote`
+     * (`--origam-blockquote---resolved-font-style` retombe dessus).
+     * @description
+     * ⛔ `OrigamBracketCompetitor` ne compte PAS, et la nuance vaut d'etre
+     * lue : il lit `--origam-bracket-competitor--pending---font-style`, un
+     * var de MODIFICATEUR D'ETAT (double tiret `--pending---`), pas le
+     * generique que `useTypography(props, 'bracket-competitor')` emet. La
+     * prop y type-check et emet sa variable sans rien peindre — meme cas
+     * que `fontFamily` sur Btn. Ne pas ajouter de regle SCSS pour lui
+     * forcer un effet sans le signaler.
+     ********************************************************/
+    fontStyle?: string;
 }

package/package.json

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