origam 2.18.17 → 2.18.19

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

@@ -229,6 +229,22 @@ defineExpose({
 		// the toolbar's own gutter (16 px) with whatever the layout
 		// reserved on each side (defaults to 0 when no layout item is
 		// present, so the standalone case still gets the 16 px gutter).
+		//
+		// ⛔ #596 — `--origam-layout---position-{left,right}` STAY UNDECLARED
+		// in the token sheets, deliberately. They are not theme tokens: they
+		// are runtime MEASUREMENTS, written as INLINE STYLES on the layout
+		// root by `useCreateLayout`'s `layoutStyles` (and on main by
+		// `mainStyles`) from `mainRect`, via `LAYOUT_POSITION_VARS` — see
+		// `composables/Commons/createLayout.composable.ts`. Descendants
+		// inherit them from that element, which is how this toolbar receives
+		// them. Declaring them at `:root` would publish a themeable channel
+		// that the layout's inline style overrides on every real instance —
+		// dead by construction — and `LAYOUT_DEFAULT_OFFSET` already is the
+		// `0px` written below. The guard flags them only because it compares
+		// names against the SHEETS; `OrigamMain` reads the same four vars and
+		// is absent from the baseline solely because it declares its own
+		// `0px` block locally. They stay in
+		// `baseline/token-var-channels.json` as known false positives.
 		padding-inline-start: calc(
 			var(--origam-toolbar---padding-inline, 16px) +
 			var(--origam-layout---position-left, 0px)
@@ -267,6 +283,28 @@ defineExpose({
 		border-end-start-radius: var(--origam-toolbar---border-end-start-radius, 0);
 
 		background: var(--origam-toolbar---background);
+		// ⛔ #596 — `--origam-appbar---backdrop-filter` STAYS UNDECLARED in the
+		// token sheets, and that is a NAMING decision left open on purpose,
+		// not an oversight. Measured: the DS's canonical AppBar family is
+		// spelt with a hyphen — `--origam-app-bar---*`, 11 tokens declared in
+		// all four sheets and listed in `TTokenName`, every one of them
+		// DORMANT because `OrigamAppBar.vue` contains no `var(--origam-…)` at
+		// all and delegates its whole surface to this component. This read
+		// uses a THIRD spelling, `--origam-appbar---`, which is also the
+		// namespace `packages/marketing` adopted locally (7 themes set
+		// `--origam-appbar---bg`, read by `marketing/src/layouts/default.vue`;
+		// 5 of them additionally set `--origam-appbar---backdrop-filter`, and
+		// it does reach this line today).
+		// Declaring `none` here would engrave a SECOND grammar for one
+		// component into the public token surface, three lines from the
+		// `--origam-app-bar---*` block. The two defensible renames —
+		// `--origam-app-bar---backdrop-filter` (matches the authoring intent
+		// and marketing's naming) or `--origam-toolbar---backdrop-filter`
+		// (matches the component that actually reads it, per the
+		// `--origam-{component}---{property}` rule) — both break the 5
+		// marketing themes unless they move in the same commit, i.e. a
+		// cross-package decision. Left in `baseline/token-var-channels.json`
+		// until that call is made.
 		backdrop-filter: var(--origam-appbar---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-appbar---backdrop-filter, none);
 		box-shadow: var(--origam-toolbar---box-shadow);
@@ -471,6 +509,26 @@ defineExpose({
 		//
 		// Shape: rounded SQUARE (8 px), overrides Btn's default
 		// `&--icon { border-radius: 50% }`.
+		//
+		// ⛔ #596 — the two DERIVED channels,
+		// `--origam-toolbar---btn-background-color-{hover,active}`, STAY
+		// UNDECLARED in the token sheets. Their fallbacks are
+		// `color-mix(in srgb, var(--btn-bg-base), black {20,30}%)`, and
+		// `--btn-bg-base` is synthesised PER INSTANCE at the top of this block
+		// from `--origam-toolbar---btn-background-color` (which #596 DID
+		// declare, its fallback being the plain literal `transparent`). A
+		// custom property's computed value is its specified value with `var()`
+		// already substituted ON THE DECLARING ELEMENT, so a `:root`
+		// declaration of that `color-mix()` would be substituted where
+		// `--btn-bg-base` does not exist → guaranteed-invalid → every read
+		// falls back to the inline fallback anyway. Identical rendering, green
+		// guard, dead channel: a lie, not a fix. Freezing them to a static
+		// colour instead would be worse — it would sever the derivation from
+		// whatever base colour the consumer sets, which is the whole point of
+		// the block above. They stay in `baseline/token-var-channels.json` as
+		// known false positives; the guard compares NAMES, not fallback
+		// chains. A theme overriding them on the toolbar element itself (or
+		// deeper) still works, because `--btn-bg-base` resolves there.
 		:deep(.origam-btn:not(:hover):not(.origam-btn--active)) {
 			--origam-btn---background-color: var(--btn-bg-base);
 			--origam-btn---color: var(--btn-fg-base);

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

@@ -956,7 +956,17 @@ defineExpose({
 	.origam-video__skip-ripple-label {
 		font-size: 13px;
 		font-weight: 600;
-		font-family: var(--origam-font---family, system-ui, sans-serif);
+		/*
+		 * #595 — REFERENCE CORRIGEE : lisait `var(--origam-font---family, …)`,
+		 * un nom que AUCUNE feuille ne declare (zero occurrence en partie
+		 * gauche dans `assets/`). Ce composant retombait donc toujours sur
+		 * `system-ui` et ignorait la police du DS. Le barreau reel est
+		 * `--origam-font__family---sans` (primitive.css) = `Inter, 'Helvetica
+		 * Neue', Arial, sans-serif`. ⚠️ Change le rendu, volontairement. Le
+		 * repli `system-ui, sans-serif` reste en ceinture de securite si la
+		 * feuille de primitives n est pas chargee.
+		 */
+		font-family: var(--origam-font__family---sans, system-ui, sans-serif);
 		letter-spacing: 0.02em;
 		white-space: nowrap;
 		user-select: none;

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLayout = useLayout;
+exports.useLayoutMain = useLayoutMain;
 var _vue = require("vue");
 var _layout = require("../../consts/Commons/layout.const.cjs");
-function useLayout() {
+function useLayoutMain() {
   const layout = (0, _vue.inject)(_layout.ORIGAM_LAYOUT_KEY);
   if (!layout) {
     throw new Error("[Origam] Could not find injected layout");

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

@@ -1,5 +1,19 @@
 /*********************************************************
- * useLayout
+ * useLayoutMain
+ *
+ * @description
+ * ⛔ RENOMME depuis `useLayout`, qui ECRASAIT le composable natif de Nuxt.
+ * Nuxt expose `useLayout` en auto-import (`#app/composables/layout`) ; le nôtre
+ * portant le même nom, c'est LE NOTRE QUI GAGNAIT et celui du framework qui
+ * était ignoré. Relevé sur le serveur de dev de l'utilisateur :
+ *   WARN [NUXT_B6002] useLayout is already auto-imported by Nuxt as a built-in,
+ *        and overriding it will likely cause issues.
+ *   WARN Duplicated imports "useLayout", the one from "#app/composables/layout"
+ *        has been ignored
+ * Ce n'était pas cosmétique : notre version LEVE une exception sans provider
+ * Origam, donc tout code Nuxt attendant `useLayout` plantait au lieu de recevoir
+ * le composable du framework. Le nom `useLayoutMain` dit ce qu'il fait — il
+ * expose la zone MAIN — et s'aligne sur `useLayoutItem`.
  *
  * @description
  * Reads the nearest `ORIGAM_LAYOUT_KEY` injection provided by
@@ -11,7 +25,7 @@
  * level (no direct function dependency) — the three only share the
  * `ORIGAM_LAYOUT_KEY` provide/inject contract.
  ********************************************************/
-export declare function useLayout(): {
+export declare function useLayoutMain(): {
     getLayoutItem: (id: string) => import("../../interfaces").ILayerItem | undefined;
     mainRect: import("vue").Ref<import("../../interfaces").ILayer, import("../../interfaces").ILayer>;
     mainStyles: import("vue").Ref<import("vue").CSSProperties, import("vue").CSSProperties>;

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

@@ -1,6 +1,6 @@
 import { inject } from "vue";
 import { ORIGAM_LAYOUT_KEY } from "../../consts/Commons/layout.const.js";
-export function useLayout() {
+export function useLayoutMain() {
   const layout = inject(ORIGAM_LAYOUT_KEY);
   if (!layout) {
     throw new Error("[Origam] Could not find injected layout");

package/dist/src/composables/Commons/theme-props-resolver.composable.cjs

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.installThemePropsResolver = installThemePropsResolver;
+exports.resolveVariantPresetRegistry = resolveVariantPresetRegistry;
 exports.themedPropKeysUnion = themedPropKeysUnion;
 var _vue = require("vue");
 var _defaults = require("../../consts/Commons/defaults.const.cjs");
+var _variantPreset = require("../../consts/Commons/variant-preset.const.cjs");
 var _commons = require("../../utils/Commons/commons.util.cjs");
 var _color = require("../../utils/Commons/color.util.cjs");
 var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
@@ -28,6 +30,15 @@ function themedPropKeysUnion(themes) {
   }
   return union;
 }
+function resolveVariantPresetRegistry(shipped, themeVariants) {
+  let out = {
+    ...shipped
+  };
+  for (const variants of themeVariants) {
+    out = (0, _commons.mergeDeep)(out, variants);
+  }
+  return out;
+}
 function passedPropValue(vnodeProps, key) {
   if (!vnodeProps) return void 0;
   for (const rawKey in vnodeProps) {
@@ -35,19 +46,40 @@ function passedPropValue(vnodeProps, key) {
   }
   return void 0;
 }
-function collectTargetKeys(themedKeysUnion, defaults, name) {
+function addSetKeys(source, target) {
+  if (!source) return;
+  for (const key of source) target.add(key);
+}
+function addObjectKeys(source, target) {
+  if (!source) return;
+  for (const key in source) target.add(key);
+}
+function addPresetKeys(presetTable, target) {
+  if (!presetTable) return;
+  for (const variantValue in presetTable) {
+    for (const key in presetTable[variantValue]) target.add(key);
+  }
+}
+function collectTargetKeys(themedKeysUnion, defaults, name, presetTable) {
   const ownKeys = themedKeysUnion.get(name);
   const globalKeys = themedKeysUnion.get("global");
   const providerOwnKeys = defaults.value?.[name];
   const providerGlobalKeys = defaults.value?.global;
-  if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys) return null;
+  if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys && !presetTable) return null;
   const targetKeys = ownKeys ? new Set(ownKeys) : /* @__PURE__ */new Set();
-  if (globalKeys) for (const key of globalKeys) targetKeys.add(key);
-  if (providerOwnKeys) for (const key in providerOwnKeys) targetKeys.add(key);
-  if (providerGlobalKeys) for (const key in providerGlobalKeys) targetKeys.add(key);
+  addSetKeys(globalKeys, targetKeys);
+  addObjectKeys(providerOwnKeys, targetKeys);
+  addObjectKeys(providerGlobalKeys, targetKeys);
+  addPresetKeys(presetTable, targetKeys);
   return targetKeys;
 }
-function patchThemedPropSlot(instance, defaults, name, key) {
+function readVariantPreset(presetTable, rawProps, key) {
+  if (!presetTable || key === _variantPreset.VARIANT_PROP_KEY) return void 0;
+  const activeVariant = rawProps[_variantPreset.VARIANT_PROP_KEY];
+  if (typeof activeVariant !== "string") return void 0;
+  return presetTable[activeVariant]?.[key];
+}
+function patchThemedPropSlot(instance, defaults, name, key, presetTable) {
   const rawProps = instance.props;
   const fallbackValue = (0, _vue.shallowRef)(rawProps[key]);
   let wasPassed = passedPropValue(instance.vnode.props, key) !== void 0;
@@ -65,6 +97,8 @@ function patchThemedPropSlot(instance, defaults, name, key) {
       if (globalDefaults && globalDefaults[key] !== void 0) {
         return globalDefaults[key];
       }
+      const fromPreset = readVariantPreset(presetTable, rawProps, key);
+      if (fromPreset !== void 0) return fromPreset;
       return fallback;
     },
     set(value) {
@@ -73,14 +107,15 @@ function patchThemedPropSlot(instance, defaults, name, key) {
     }
   });
 }
-function installThemePropsResolver(app, themedKeysUnion) {
+function installThemePropsResolver(app, themedKeysUnion, variantPresets = {}) {
   app.mixin({
     beforeCreate() {
       const instance = (0, _vue.getCurrentInstance)();
       if (!instance) return;
       const name = (0, _getCurrentInstance.getCurrentInstanceName)("theme-props-resolver");
       const defaults = (0, _vue.inject)(_defaults.ORIGAM_DEFAULTS_KEY, (0, _vue.ref)({}));
-      const targetKeys = collectTargetKeys(themedKeysUnion, defaults, name);
+      const presetTable = variantPresets[name];
+      const targetKeys = collectTargetKeys(themedKeysUnion, defaults, name, presetTable);
       if (!targetKeys) return;
       const rawProps = instance.props;
       for (const key of targetKeys) {
@@ -88,7 +123,7 @@ function installThemePropsResolver(app, themedKeysUnion) {
           (0, _color.warnUnsupportedProp)(name, key, `theme names this prop but <${name}> does not declare it`);
           continue;
         }
-        patchThemedPropSlot(instance, defaults, name, key);
+        patchThemedPropSlot(instance, defaults, name, key, presetTable);
       }
     }
   });

package/dist/src/composables/Commons/theme-props-resolver.composable.d.ts

@@ -1,5 +1,6 @@
 import { type App } from 'vue';
 import type { IDefault } from '../../interfaces/DefaultsProvider/defaults-provider.interface';
+import type { TVariantPresetRegistry } from '../../types/Commons/variant-preset.type';
 /*********************************************************
  * themedPropKeysUnion
  *
@@ -21,6 +22,37 @@ import type { IDefault } from '../../interfaces/DefaultsProvider/defaults-provid
  * `createOrigam()` install time.
  ********************************************************/
 export declare function themedPropKeysUnion(themes: IDefault[]): Map<string, Set<string>>;
+/*********************************************************
+ * resolveVariantPresetRegistry
+ *
+ * @description
+ * ADR-005 D4 — collapse les tables de presets que le DS livre avec celles
+ * que les themes enregistres redefinissent, en un seul registre.
+ *
+ * @description
+ * Un theme retune ce que `outlined` VEUT DIRE en changeant des valeurs de
+ * PROPS, et ne descend aux `vars` / `cssVars` que pour ce que les props
+ * n'expriment pas. C'est ce qui reconcilie les variants avec la regle
+ * PROPS-D'ABORD : le seul API du DS qui la violait structurellement.
+ *
+ * @description
+ * `variants` est un FRERE de `components`, pas une cle imbriquee dedans.
+ * `components` est type `IDefault` (composant -> map de props) ; y nicher
+ * un niveau de variant rendrait `{ 'origam-btn': { outlined: … } }`
+ * ambigu avec un prop qui s'appellerait litteralement `outlined`.
+ *
+ * @description
+ * Fusion par `mergeDeep`, celui-la meme que `provideDefaults` utilise —
+ * le theme gagne, prop par prop. Consequence a connaitre : un preset
+ * d'ETAT (`active: { … }`, autorise par Q3) est donc FUSIONNE et non
+ * remplace, comme l'est deja un bloc `components` de theme. Une marque qui
+ * veut effacer une cle d'etat la repose explicitement.
+ *
+ * @description
+ * Pure — aucun acces Vue/DOM — donc appelee une fois, synchronement, a
+ * l'installation par `createOrigam()`, comme `themedPropKeysUnion`.
+ ********************************************************/
+export declare function resolveVariantPresetRegistry(shipped: TVariantPresetRegistry, themeVariants: Array<TVariantPresetRegistry>): TVariantPresetRegistry;
 /*********************************************************
  * installThemePropsResolver
  *
@@ -46,4 +78,4 @@ export declare function themedPropKeysUnion(themes: IDefault[]): Map<string, Set
  * carries the cost argument: an instance that neither a theme nor an ancestor
  * provider names returns after a Map lookup and one property lookup.
  ********************************************************/
-export declare function installThemePropsResolver(app: App, themedKeysUnion: Map<string, Set<string>>): void;
+export declare function installThemePropsResolver(app: App, themedKeysUnion: Map<string, Set<string>>, variantPresets?: TVariantPresetRegistry): void;

package/dist/src/composables/Commons/theme-props-resolver.composable.js

@@ -1,6 +1,7 @@
 import { getCurrentInstance, inject, ref, shallowRef } from "vue";
 import { ORIGAM_DEFAULTS_KEY } from "../../consts/Commons/defaults.const.js";
-import { camelize } from "../../utils/Commons/commons.util.js";
+import { VARIANT_PROP_KEY } from "../../consts/Commons/variant-preset.const.js";
+import { camelize, mergeDeep } from "../../utils/Commons/commons.util.js";
 import { warnUnsupportedProp } from "../../utils/Commons/color.util.js";
 import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
 export function themedPropKeysUnion(themes) {
@@ -21,6 +22,13 @@ export function themedPropKeysUnion(themes) {
   }
   return union;
 }
+export function resolveVariantPresetRegistry(shipped, themeVariants) {
+  let out = { ...shipped };
+  for (const variants of themeVariants) {
+    out = mergeDeep(out, variants);
+  }
+  return out;
+}
 function passedPropValue(vnodeProps, key) {
   if (!vnodeProps) return void 0;
   for (const rawKey in vnodeProps) {
@@ -28,19 +36,40 @@ function passedPropValue(vnodeProps, key) {
   }
   return void 0;
 }
-function collectTargetKeys(themedKeysUnion, defaults, name) {
+function addSetKeys(source, target) {
+  if (!source) return;
+  for (const key of source) target.add(key);
+}
+function addObjectKeys(source, target) {
+  if (!source) return;
+  for (const key in source) target.add(key);
+}
+function addPresetKeys(presetTable, target) {
+  if (!presetTable) return;
+  for (const variantValue in presetTable) {
+    for (const key in presetTable[variantValue]) target.add(key);
+  }
+}
+function collectTargetKeys(themedKeysUnion, defaults, name, presetTable) {
   const ownKeys = themedKeysUnion.get(name);
   const globalKeys = themedKeysUnion.get("global");
   const providerOwnKeys = defaults.value?.[name];
   const providerGlobalKeys = defaults.value?.global;
-  if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys) return null;
+  if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys && !presetTable) return null;
   const targetKeys = ownKeys ? new Set(ownKeys) : /* @__PURE__ */ new Set();
-  if (globalKeys) for (const key of globalKeys) targetKeys.add(key);
-  if (providerOwnKeys) for (const key in providerOwnKeys) targetKeys.add(key);
-  if (providerGlobalKeys) for (const key in providerGlobalKeys) targetKeys.add(key);
+  addSetKeys(globalKeys, targetKeys);
+  addObjectKeys(providerOwnKeys, targetKeys);
+  addObjectKeys(providerGlobalKeys, targetKeys);
+  addPresetKeys(presetTable, targetKeys);
   return targetKeys;
 }
-function patchThemedPropSlot(instance, defaults, name, key) {
+function readVariantPreset(presetTable, rawProps, key) {
+  if (!presetTable || key === VARIANT_PROP_KEY) return void 0;
+  const activeVariant = rawProps[VARIANT_PROP_KEY];
+  if (typeof activeVariant !== "string") return void 0;
+  return presetTable[activeVariant]?.[key];
+}
+function patchThemedPropSlot(instance, defaults, name, key, presetTable) {
   const rawProps = instance.props;
   const fallbackValue = shallowRef(rawProps[key]);
   let wasPassed = passedPropValue(instance.vnode.props, key) !== void 0;
@@ -58,6 +87,8 @@ function patchThemedPropSlot(instance, defaults, name, key) {
       if (globalDefaults && globalDefaults[key] !== void 0) {
         return globalDefaults[key];
       }
+      const fromPreset = readVariantPreset(presetTable, rawProps, key);
+      if (fromPreset !== void 0) return fromPreset;
       return fallback;
     },
     set(value) {
@@ -66,14 +97,15 @@ function patchThemedPropSlot(instance, defaults, name, key) {
     }
   });
 }
-export function installThemePropsResolver(app, themedKeysUnion) {
+export function installThemePropsResolver(app, themedKeysUnion, variantPresets = {}) {
   app.mixin({
     beforeCreate() {
       const instance = getCurrentInstance();
       if (!instance) return;
       const name = getCurrentInstanceName("theme-props-resolver");
       const defaults = inject(ORIGAM_DEFAULTS_KEY, ref({}));
-      const targetKeys = collectTargetKeys(themedKeysUnion, defaults, name);
+      const presetTable = variantPresets[name];
+      const targetKeys = collectTargetKeys(themedKeysUnion, defaults, name, presetTable);
       if (!targetKeys) return;
       const rawProps = instance.props;
       for (const key of targetKeys) {
@@ -81,7 +113,7 @@ export function installThemePropsResolver(app, themedKeysUnion) {
           warnUnsupportedProp(name, key, `theme names this prop but <${name}> does not declare it`);
           continue;
         }
-        patchThemedPropSlot(instance, defaults, name, key);
+        patchThemedPropSlot(instance, defaults, name, key, presetTable);
       }
     }
   });

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANT_PROP_KEY = exports.VARIANT_PRESETS = void 0;
+const VARIANT_PROP_KEY = exports.VARIANT_PROP_KEY = "variant";
+const VARIANT_PRESETS = exports.VARIANT_PRESETS = {};

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

@@ -0,0 +1,60 @@
+import type { TVariantPresetRegistry } from '../../types/Commons/variant-preset.type';
+/*********************************************************
+ * VARIANT_PROP_KEY
+ *
+ * @description
+ * Le nom du prop discriminant qu'une table de presets indexe. ADR-005
+ * n'en prevoit qu'un, et le resolveur a besoin de le nommer pour deux
+ * raisons distinctes.
+ *
+ * @description
+ * ⛔ C'EST AUSSI LA GARDE ANTI-RECURSION. Le getter installe sur un prop
+ * lit `props.variant` pour savoir quelle entree de la table consulter. Si
+ * ce getter etait AUSSI installe sur `variant` lui-meme, cette lecture se
+ * rappellerait indefiniment. Un preset ne pose jamais `variant` — il n'y
+ * a donc rien a resoudre pour cette cle, et `patchThemedPropSlot` la
+ * saute explicitement sur le canal preset.
+ ********************************************************/
+export declare const VARIANT_PROP_KEY = "variant";
+/*********************************************************
+ * VARIANT_PRESETS
+ *
+ * @description
+ * Les tables de presets que le DS LIVRE, par nom kebab de composant. Un
+ * theme les surcharge via `IOrigamTheme.variants` (ADR-005 D4) ; il ne les
+ * constitue pas.
+ *
+ * @description
+ * ⛔ VIDE A DESSEIN DANS CE LOT, et ce n'est pas du code mort. 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.
+ * - `OrigamBtnGroup` — recopie `--origam-btn-group---border-width` dans
+ *   une propriete custom qui alimente un `calc()` de rayon interieur.
+ *   Inexprimable en prop de racine.
+ * - `OrigamBlockquote` — `padding-inline-start: calc(var(--…) + var(--…))`
+ *   et des regles imbriquees sur `__body` / `__attribution`.
+ * @description
+ * Seul `OrigamBtn` ne peint que des proprietes de racine — mais il depend
+ * de `IOpacityProps` / `IBackdropProps` (Q1, absents) et son `ghost` porte
+ * une branche `@supports not (backdrop-filter)` qui echange le fond de
+ * 12 % a 18 % : aucune prop n'exprime une valeur conditionnee a une
+ * feature query.
+ *
+ * @description
+ * Le pilote est `OrigamKbd`, pour une raison que D7 ne donne pas : AUCUN
+ * 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.
+ ********************************************************/
+export declare const VARIANT_PRESETS: TVariantPresetRegistry;

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

@@ -0,0 +1,2 @@
+export const VARIANT_PROP_KEY = "variant";
+export const VARIANT_PRESETS = {};

package/dist/src/consts/index.cjs

@@ -959,4 +959,15 @@ Object.keys(_elevation).forEach(function (key) {
       return _elevation[key];
     }
   });
+});
+var _variantPreset = require("./Commons/variant-preset.const.cjs");
+Object.keys(_variantPreset).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _variantPreset[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _variantPreset[key];
+    }
+  });
 });

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

@@ -85,3 +85,4 @@ export * from './Audio/audio-waveform.const';
 export * from './Clipboard/clipboard.const';
 export * from './Commons/css-support.const';
 export * from './Commons/elevation.const';
+export * from './Commons/variant-preset.const';

package/dist/src/consts/index.js

@@ -85,3 +85,4 @@ export * from "./Audio/audio-waveform.const.js";
 export * from "./Clipboard/clipboard.const.js";
 export * from "./Commons/css-support.const.js";
 export * from "./Commons/elevation.const.js";
+export * from "./Commons/variant-preset.const.js";

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

@@ -2,6 +2,7 @@ import type { Ref } from 'vue';
 import type { IThemeVars } from './semantic-tree.interface';
 import type { TThemeVars } from '../../types/Commons/token-tree.type';
 import type { TMode, TTheme } from '../../types/Commons/theme.type';
+import type { TVariantPresetRegistry } from '../../types/Commons/variant-preset.type';
 import type { IDefault } from '../DefaultsProvider/defaults-provider.interface';
 /**
  * Shape of the `useTheme()` singleton state.
@@ -127,4 +128,36 @@ export interface IOrigamTheme {
      * }
      */
     components?: IDefault;
+    /*********************************************************
+     * variants
+     *
+     * @description
+     * ADR-005 D4 — redefinit en PROPS ce qu'un `variant` veut dire, par
+     * composant puis par valeur de variant :
+     *
+     *     variants: {
+     *         'origam-btn': { outlined: { border: 3, rounded: 'lg' } }
+     *     }
+     *
+     * @description
+     * C'est ce qui rend les variants conformes a la regle PROPS-D'ABORD :
+     * un theme retune `outlined` en changeant des valeurs de props, et ne
+     * descend a `vars` / `cssVars` que pour ce que les props n'expriment
+     * pas. Les variants etaient le seul API du DS a violer cette regle
+     * structurellement.
+     *
+     * @description
+     * FRERE de `components`, pas une cle imbriquee dedans : `components`
+     * est type `IDefault` (composant -> map de props), donc y nicher un
+     * niveau de variant rendrait `{ 'origam-btn': { outlined: … } }`
+     * ambigu avec un prop qui s'appellerait litteralement `outlined`.
+     *
+     * @description
+     * Fusionne par-dessus la table livree par le DS a l'installation
+     * (`resolveVariantPresetRegistry`), avec le `mergeDeep` que
+     * `provideDefaults` utilise deja. Le preset resultant reste le rang
+     * LE PLUS FAIBLE de la resolution (arbitrage Q2) : un prop ecrit au
+     * site d'appel, comme un defaut de `components`, le battent tous deux.
+     ********************************************************/
+    variants?: TVariantPresetRegistry;
 }

package/dist/src/interfaces/Masonry/masonry.interface.d.ts

@@ -59,8 +59,8 @@ export interface IMasonryProps extends ICommonsComponentProps, ITagProps, IDimen
      * Gap between items, both vertically and horizontally. Accepts:
      *
      * - one of the grid size tokens `'xs' | 'sm' | 'md' | 'lg' | 'xl'`
-     *   (resolved via `tokens/component/grid.json`, same matrix as
-     *   `<OrigamGrid>` for visual consistency).
+     *   (resolved via `GRID_GAP_SIZE_VAR` to `--origam-grid---gap-{size}`,
+     *   same matrix as `<OrigamGrid>` for visual consistency).
      * - any CSS length string (`'24px'`, `'1rem'`).
      * - a plain `number` interpreted as pixels.
      *

package/dist/src/origam.cjs

@@ -32,6 +32,7 @@ function createOrigam(origam = {}) {
   const defaultsRef = (0, _composables.createDefaults)({});
   defaultsRef.value = activeDefaultsFor(allThemes, allThemes[0]?.name ?? "", void 0);
   const themedKeysUnion = (0, _composables.themedPropKeysUnion)(allThemes.map(theme => theme.components).filter(components2 => !!components2));
+  const variantPresets = (0, _composables.resolveVariantPresetRegistry)(_consts.VARIANT_PRESETS, allThemes.map(theme => theme.variants).filter(variants => !!variants));
   const scope = (0, _vue.effectScope)();
   return scope.run(() => {
     const icons = (0, _composables.createIcons)(options.icons);
@@ -67,7 +68,7 @@ function createOrigam(origam = {}) {
       app.provide(_consts.ORIGAM_GO_TO_KEY, goTo);
       app.provide(_consts.ORIGAM_THEMES_KEY, installedThemes);
       app.provide(_consts.ORIGAM_DEFAULTS_KEY, defaultsRef);
-      (0, _composables.installThemePropsResolver)(app, themedKeysUnion);
+      (0, _composables.installThemePropsResolver)(app, themedKeysUnion, variantPresets);
       app.provide(_consts.ORIGAM_THEME_DEFAULTS_KEY, (brand, mode) => activeDefaultsFor(allThemes, brand, mode));
       if (_consts.IN_BROWSER && options.ssr) {
         const nuxt = app.$nuxt;

package/dist/src/origam.js

@@ -7,6 +7,7 @@ import {
   createIcons,
   createLocale,
   installThemePropsResolver,
+  resolveVariantPresetRegistry,
   themedPropKeysUnion
 } from "./composables/index.js";
 import {
@@ -19,7 +20,8 @@ import {
   ORIGAM_ICONS_KEY,
   ORIGAM_LOCALE_KEY,
   ORIGAM_THEME_DEFAULTS_KEY,
-  ORIGAM_THEMES_KEY
+  ORIGAM_THEMES_KEY,
+  VARIANT_PRESETS
 } from "./consts/index.js";
 import * as origamDirectives from "./directives/index.js";
 import { setContrastConfig } from "./directives/Contrast/contrast.directive.js";
@@ -45,6 +47,10 @@ export function createOrigam(origam = {}) {
   const themedKeysUnion = themedPropKeysUnion(
     allThemes.map((theme) => theme.components).filter((components2) => !!components2)
   );
+  const variantPresets = resolveVariantPresetRegistry(
+    VARIANT_PRESETS,
+    allThemes.map((theme) => theme.variants).filter((variants) => !!variants)
+  );
   const scope = effectScope();
   return scope.run(() => {
     const icons = createIcons(options.icons);
@@ -80,7 +86,7 @@ export function createOrigam(origam = {}) {
       app.provide(ORIGAM_GO_TO_KEY, goTo);
       app.provide(ORIGAM_THEMES_KEY, installedThemes);
       app.provide(ORIGAM_DEFAULTS_KEY, defaultsRef);
-      installThemePropsResolver(app, themedKeysUnion);
+      installThemePropsResolver(app, themedKeysUnion, variantPresets);
       app.provide(ORIGAM_THEME_DEFAULTS_KEY, (brand, mode) => activeDefaultsFor(allThemes, brand, mode));
       if (IN_BROWSER && options.ssr) {
         const nuxt = app.$nuxt;

package/dist/src/types/Commons/variant-preset.type.cjs

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