origam 2.18.20 → 2.19.0

package/dist/src/assets/css/tokens/dark.css

@@ -2506,11 +2506,8 @@
   --origam-kbd---font-size-lg: var(--origam-font__size---lg);
   --origam-kbd---font-size-xl: var(--origam-font__size---xl);
   --origam-kbd__filled---background-color: var(--origam-color__surface---raised);
-  --origam-kbd__filled---border-width: var(--origam-border__width---thin);
   --origam-kbd--outlined---background-color: rgba(0, 0, 0, 0);
-  --origam-kbd--outlined---border-width: var(--origam-border__width---thin);
   --origam-kbd__tonal---background-color: var(--origam-color__surface---sunken);
-  --origam-kbd__tonal---border-width: var(--origam-border__width---0);
   --origam-kbd__separator---color: var(--origam-color__text---secondary);
   --origam-stepper---background-color: var(--origam-color__surface---default);
   --origam-stepper---color: var(--origam-color__text---primary);
@@ -5526,11 +5523,8 @@
     --origam-kbd---font-size-lg: var(--origam-font__size---lg);
     --origam-kbd---font-size-xl: var(--origam-font__size---xl);
     --origam-kbd__filled---background-color: var(--origam-color__surface---raised);
-    --origam-kbd__filled---border-width: var(--origam-border__width---thin);
     --origam-kbd--outlined---background-color: rgba(0, 0, 0, 0);
-    --origam-kbd--outlined---border-width: var(--origam-border__width---thin);
     --origam-kbd__tonal---background-color: var(--origam-color__surface---sunken);
-    --origam-kbd__tonal---border-width: var(--origam-border__width---0);
     --origam-kbd__separator---color: var(--origam-color__text---secondary);
     --origam-stepper---background-color: var(--origam-color__surface---default);
     --origam-stepper---color: var(--origam-color__text---primary);

package/dist/src/assets/css/tokens/light.css

@@ -2422,11 +2422,8 @@
   --origam-kbd---font-size-lg: var(--origam-font__size---lg);
   --origam-kbd---font-size-xl: var(--origam-font__size---xl);
   --origam-kbd__filled---background-color: var(--origam-color__surface---raised);
-  --origam-kbd__filled---border-width: var(--origam-border__width---thin);
   --origam-kbd--outlined---background-color: rgba(0, 0, 0, 0);
-  --origam-kbd--outlined---border-width: var(--origam-border__width---thin);
   --origam-kbd__tonal---background-color: var(--origam-color__surface---sunken);
-  --origam-kbd__tonal---border-width: var(--origam-border__width---0);
   --origam-kbd__separator---color: var(--origam-color__text---secondary);
   --origam-stepper---background-color: var(--origam-color__surface---default);
   --origam-stepper---color: var(--origam-color__text---primary);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -2506,11 +2506,8 @@
   --origam-kbd---font-size-lg: var(--origam-font__size---lg);
   --origam-kbd---font-size-xl: var(--origam-font__size---xl);
   --origam-kbd__filled---background-color: var(--origam-color__surface---raised);
-  --origam-kbd__filled---border-width: var(--origam-border__width---thin);
   --origam-kbd--outlined---background-color: rgba(0, 0, 0, 0);
-  --origam-kbd--outlined---border-width: var(--origam-border__width---thin);
   --origam-kbd__tonal---background-color: var(--origam-color__surface---sunken);
-  --origam-kbd__tonal---border-width: var(--origam-border__width---0);
   --origam-kbd__separator---color: var(--origam-color__text---secondary);
   --origam-stepper---background-color: var(--origam-color__surface---default);
   --origam-stepper---color: var(--origam-color__text---primary);
@@ -5526,11 +5523,8 @@
     --origam-kbd---font-size-lg: var(--origam-font__size---lg);
     --origam-kbd---font-size-xl: var(--origam-font__size---xl);
     --origam-kbd__filled---background-color: var(--origam-color__surface---raised);
-    --origam-kbd__filled---border-width: var(--origam-border__width---thin);
     --origam-kbd--outlined---background-color: rgba(0, 0, 0, 0);
-    --origam-kbd--outlined---border-width: var(--origam-border__width---thin);
     --origam-kbd__tonal---background-color: var(--origam-color__surface---sunken);
-    --origam-kbd__tonal---border-width: var(--origam-border__width---0);
     --origam-kbd__separator---color: var(--origam-color__text---secondary);
     --origam-stepper---background-color: var(--origam-color__surface---default);
     --origam-stepper---color: var(--origam-color__text---primary);

package/dist/src/assets/scss/tokens/_light.scss

@@ -2422,11 +2422,8 @@
   --origam-kbd---font-size-lg: var(--origam-font__size---lg);
   --origam-kbd---font-size-xl: var(--origam-font__size---xl);
   --origam-kbd__filled---background-color: var(--origam-color__surface---raised);
-  --origam-kbd__filled---border-width: var(--origam-border__width---thin);
   --origam-kbd--outlined---background-color: rgba(0, 0, 0, 0);
-  --origam-kbd--outlined---border-width: var(--origam-border__width---thin);
   --origam-kbd__tonal---background-color: var(--origam-color__surface---sunken);
-  --origam-kbd__tonal---border-width: var(--origam-border__width---0);
   --origam-kbd__separator---color: var(--origam-color__text---secondary);
   --origam-stepper---background-color: var(--origam-color__surface---default);
   --origam-stepper---color: var(--origam-color__text---primary);

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/Kbd/OrigamKbd.vue

@@ -9,14 +9,17 @@
 			<slot/>
 		</template>
 
-		<template v-else-if="combination && combination.length > 0">
+		<template v-else-if="hasCombination">
 			<template
 					v-for="(key, index) in combination"
 					:key="index"
 			>
-				<kbd class="origam-kbd__key">{{ key }}</kbd>
+				<kbd
+						class="origam-kbd__key"
+						:style="surfaceStyles"
+				>{{ key }}</kbd>
 				<span
-						v-if="index < combination.length - 1"
+						v-if="index < lastKeyIndex"
 						class="origam-kbd__separator"
 						aria-hidden="true"
 				>{{ separator }}</span>
@@ -31,6 +34,7 @@
 import vContrast from "../../directives/Contrast/contrast.directive";
 import { useBorder } from "../../composables/Commons/border.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useRounded } from "../../composables/Commons/rounded.composable";
 import { useSize } from "../../composables/Commons/size.composable";
@@ -61,6 +65,7 @@ const props = defineProps({
   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 },
+  elevation: { type: [Number, String], required: false },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -76,19 +81,30 @@ defineSlots();
 const { sizeClasses, sizeStyles } = useSize(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
 const { typographyStyles } = useTypography(props, "kbd");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const hasCombination = computed(() => !!props.combination && props.combination.length > 0);
+const lastKeyIndex = computed(() => (props.combination?.length ?? 0) - 1);
+const surfaceStyles = computed(() => {
+  return [
+    borderStyles.value,
+    colorStyles.value,
+    elevationStyles.value
+  ];
+});
 const kbdClasses = computed(() => {
   return [
     "origam-kbd",
     {
       [`origam-kbd--variant-${props.variant}`]: props.variant,
-      "origam-kbd--combination": props.combination && props.combination.length > 0
+      "origam-kbd--combination": hasCombination.value
     },
     colorClasses.value,
     sizeClasses.value,
     roundedClasses.value,
     borderClasses.value,
+    elevationClasses.value,
     props.class
   ];
 });
@@ -96,8 +112,7 @@ const kbdStyles = computed(() => {
   return [
     sizeStyles.value,
     roundedStyles.value,
-    borderStyles.value,
-    colorStyles.value,
+    hasCombination.value ? [] : surfaceStyles.value,
     typographyStyles.value,
     props.style
   ];
@@ -159,8 +174,9 @@ defineExpose({
 
 			padding-block: 0;
 			padding-inline: 0;
-			--origam-kbd---border-width: 0;
+			border-width: 0;
 			background-color: transparent;
+			border-color: transparent;
 			box-shadow: none;
 			min-width: 0;
 		}
@@ -169,40 +185,6 @@ defineExpose({
 			@include key-surface;
 		}
 
-		&--variant-outlined,
-		&--variant-outlined &__key {
-			--origam-kbd---background-color: var(--origam-kbd--outlined---background-color, var(--origam-color__surface---raised, #fff));
-			--origam-kbd---border-width: var(--origam-kbd--outlined---border-width, 1px);
-			--origam-kbd---box-shadow: 0 1px 0 0 color-mix(in srgb, currentColor 12%, transparent),
-			                            inset 0 1px 0 0 color-mix(in srgb, white 50%, transparent);
-		}
-
-		&--variant-filled,
-		&--variant-filled &__key {
-			--origam-kbd---background-color: var(--origam-kbd__filled---background-color, var(--origam-color__surface---overlay, #f5f5f5));
-			--origam-kbd---border-color: var(--origam-color__border---subtle, #d4d4d4);
-			--origam-kbd---border-width: var(--origam-kbd__filled---border-width, 1px);
-			--origam-kbd---box-shadow: 0 1px 2px 0 color-mix(in srgb, currentColor 18%, transparent),
-			                            inset 0 1px 0 0 color-mix(in srgb, white 60%, transparent);
-		}
-
-		&--variant-tonal,
-		&--variant-tonal &__key {
-			--origam-kbd---background-color: var(--origam-kbd__tonal---background-color, color-mix(in srgb, currentColor 8%, transparent));
-			--origam-kbd---border-color: transparent;
-			--origam-kbd---border-width: var(--origam-kbd__tonal---border-width, 0px);
-			--origam-kbd---box-shadow: none;
-		}
-
-		&--combination#{&}--variant-outlined,
-		&--combination#{&}--variant-filled,
-		&--combination#{&}--variant-tonal {
-			background-color: transparent;
-			border-color: transparent;
-			--origam-kbd---border-width: 0;
-			box-shadow: none;
-		}
-
 		&--size-x-small { font-size: var(--origam-kbd---font-size, var(--origam-kbd---font-size-xs, 0.625rem)); }
 		&--size-small   { font-size: var(--origam-kbd---font-size, var(--origam-kbd---font-size-sm, 0.75rem)); }
 		&--size-default { font-size: var(--origam-kbd---font-size, var(--origam-kbd---font-size-md, 0.875rem)); }

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/consts/Commons/variant-preset.const.cjs

@@ -4,5 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VARIANT_PROP_KEY = exports.VARIANT_PRESETS = void 0;
+var _kbd = require("../Kbd/kbd.const.cjs");
 const VARIANT_PROP_KEY = exports.VARIANT_PROP_KEY = "variant";
-const VARIANT_PRESETS = exports.VARIANT_PRESETS = {};
+const VARIANT_PRESETS = exports.VARIANT_PRESETS = {
+  "origam-kbd": _kbd.KBD_VARIANT_PRESETS
+};

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

@@ -25,20 +25,23 @@ export declare const VARIANT_PROP_KEY = "variant";
  * constitue pas.
  *
  * @description
- * ⛔ VIDE A DESSEIN DANS CE LOT, et ce n'est pas du code mort. Le lot 1
+ * ⛔ UN SEUL COMPOSANT CONVERTI A CE JOUR — `OrigamKbd`, lot 2. 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.
+ * canal `theme.variants`) et aucune conversion : 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` — FAIT (lot 2). Ses regles de variant posaient des
+ *   PROPRIETES CUSTOM que `key-surface` consomme sur la racine ET sur les
+ *   descendants `__key` (`&--variant-outlined &__key`). Resolu en rendant
+ *   explicite ce que la CSS supposait : la surface peinte est la RACINE en
+ *   forme simple et chaque `__key` en forme combinaison — les deux ne
+ *   coexistent jamais — donc le composant lie les declarations de surface
+ *   a cet element-la, et a lui seul. Le second point, la declaration de
+ *   `key-surface` a (0,2,0) contre une classe utilitaire a (0,1,0), tombe
+ *   de lui-meme : un preset porte une chaine `var(…)`, qu'`isCssColor`
+ *   route vers le canal INLINE, lequel passe devant la regle scopee.
  * - `OrigamBtnGroup` — recopie `--origam-btn-group---border-width` dans
  *   une propriete custom qui alimente un `calc()` de rayon interieur.
  *   Inexprimable en prop de racine.
@@ -56,5 +59,11 @@ export declare const VARIANT_PROP_KEY = "variant";
  * 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.
+ *
+ * @description
+ * La mesure d'acceptation se rejoue :
+ * `pnpm -F @origam/tests audit:kbd-preset -- --json <fichier>`, puis
+ * `-- --compare <avant> <apres>`. Elle monte le composant sous les 8
+ * identites x 2 modes et lit chaque surface peinte, `__key` compris.
  ********************************************************/
 export declare const VARIANT_PRESETS: TVariantPresetRegistry;

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

@@ -1,2 +1,5 @@
+import { KBD_VARIANT_PRESETS } from "../Kbd/kbd.const.js";
 export const VARIANT_PROP_KEY = "variant";
-export const VARIANT_PRESETS = {};
+export const VARIANT_PRESETS = {
+  "origam-kbd": KBD_VARIANT_PRESETS
+};

package/dist/src/consts/Kbd/kbd.const.cjs

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KBD_VARIANT_PRESETS = void 0;
+const KBD_VARIANT_PRESETS = exports.KBD_VARIANT_PRESETS = {
+  outlined: {
+    bgColor: "var(--origam-kbd--outlined---background-color, var(--origam-color__surface---raised, #fff))",
+    elevation: "0 1px 0 0 color-mix(in srgb, currentColor 12%, transparent), inset 0 1px 0 0 color-mix(in srgb, white 50%, transparent)"
+  },
+  filled: {
+    bgColor: "var(--origam-kbd__filled---background-color, var(--origam-color__surface---overlay, #f5f5f5))",
+    elevation: "0 1px 2px 0 color-mix(in srgb, currentColor 18%, transparent), inset 0 1px 0 0 color-mix(in srgb, white 60%, transparent)"
+  },
+  tonal: {
+    bgColor: "var(--origam-kbd__tonal---background-color, color-mix(in srgb, currentColor 8%, transparent))",
+    border: "none",
+    borderColor: "transparent",
+    elevation: "none"
+  }
+};

package/dist/src/consts/Kbd/kbd.const.d.ts

@@ -0,0 +1,102 @@
+import type { IKbdProps } from '../../interfaces/Kbd/kbd.interface';
+import type { TVariantPresets } from '../../types/Commons/variant-preset.type';
+import type { TKbdVariant } from '../../types/Kbd/kbd.type';
+/*********************************************************
+ * KBD_VARIANT_PRESETS
+ *
+ * @description
+ * ADR-005 D1 — le premier composant converti. Un variant de Kbd 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
+ * ⛔ CHAQUE VALEUR PORTE LA CHAINE `var()` QUE LA REGLE PORTAIT, jamais sa
+ * traduction en echelon semantique. Ecrire `elevation: 'xs'` au lieu de la
+ * chaine litterale reviendrait a emettre `var(--origam-shadow---xs)` et a
+ * JETER le canal `--origam-kbd--{variant}---*` par lequel une marque
+ * rehabille ses touches. Aucun des 8 themes ne touche un token
+ * `origam-kbd` aujourd'hui — c'est meme la raison pour laquelle Kbd est le
+ * pilote, le zero-changement y etant prouvable en isolation — mais le
+ * canal doit survivre a la conversion, sinon la regle ne tiendra pas sur
+ * `OrigamBtn`, dont les 8 marques redeclarent bel et bien
+ * `box-shadow-elevated`, `border-width-outlined` et `background-color-tonal`.
+ *
+ * @description
+ * ⛔ ET C'EST AUSSI CE QUI REGLE LA CASCADE. `key-surface` peint depuis une
+ * regle scopee a (0,2,0), qu'une classe utilitaire a (0,1,0) ne peut pas
+ * battre. Une valeur TOKENISEE (`bgColor: 'primary'`) partirait sur le
+ * canal classe et perdrait donc en silence. Une chaine `var(…)` est routee
+ * par `isCssColor` vers le canal « valeur custom », c'est-a-dire la
+ * declaration INLINE, qui passe devant la regle scopee. La contrainte de
+ * fidelite et la contrainte de cascade demandent la meme chose.
+ *
+ * @description
+ * Les replis de chaque chaine sont conserves tels quels. Ils sont
+ * aujourd'hui INATTEIGNABLES — `light.css` et `dark.css` declarent les six
+ * tokens de variant, et une propriete custom declaree sur `:root` herite
+ * partout, donc le second argument d'un `var()` n'est jamais atteint. Ils
+ * restent parce qu'ils sont la valeur de secours si une feuille cessait de
+ * declarer le token, et parce que le garde `ts-token-refs` exige un repli
+ * des qu'un nom ne peut pas etre borne statiquement.
+ *
+ * @description
+ * ⛔ CE QUE LA TABLE NE POSE PAS EST AUSSI IMPORTANT QUE CE QU'ELLE POSE.
+ * `outlined` ne pose aucune couleur de bordure, et `filled` non plus, alors
+ * que leurs regles en posaient une. Les deux valeurs etaient IDENTIQUES au
+ * defaut de `key-surface` — la regle de `filled` reposait
+ * `var(--origam-color__border---subtle)`, que le token
+ * `--origam-kbd---border-color` porte deja. Les inscrire ici ne serait pas
+ * neutre : un preset emet une declaration INLINE, qui passe devant le
+ * token, donc une marque redeclarant `--origam-kbd---border-color`
+ * cesserait d'atteindre ces deux variants. La table confisquerait le canal
+ * qu'elle est censee servir.
+ *
+ * @description
+ * ⛔ AUCUNE LARGEUR DE BORDURE N'EST POSEE ICI, ET LA RAISON PORTANTE EST
+ * QUE LES TROIS TOKENS DE VARIANT NE PORTAIENT AUCUNE VALEUR PROPRE :
+ * `--origam-kbd--outlined---border-width` et `__filled---border-width`
+ * valent tous deux `var(--origam-border__width---thin)`, c'est-a-dire
+ * exactement le defaut de `key-surface`, et `__tonal---border-width` vaut
+ * `var(--origam-border__width---0)`, c'est-a-dire exactement ce que le
+ * mot-cle `border: 'none'` emet via `BORDER_KEYWORD_WIDTH`. Une indirection
+ * sans valeur distincte : les trois sont donc supprimes des feuilles, ce que
+ * `token-var-channels` prescrit lui-meme pour un token que plus rien ne lit.
+ *
+ * @description
+ * ⚠️ CE PARAGRAPHE A ETE CORRIGE, et l'ecart vaut d'etre connu. Il affirmait
+ * qu'« aucune largeur ne passe par une chaine `var()` » parce que le groupe
+ * `width` de `BORDER_REGEX` n'acceptait que chiffres + unite tandis que son
+ * groupe `color` acceptait `var(--…)` — un `border="var(--…)"` matchait donc
+ * comme COULEUR. Cette moitie est CORRIGEE sur `develop` depuis `cb3c68955`
+ * (lot 5) : le groupe `width` accepte desormais un `var()`, a condition
+ * qu'un mot-cle de style le suive.
+ *
+ * @description
+ * Ce qui RESTE vrai, et qui suffit a la decision : `IBorderProps` n'expose
+ * toujours pas de `borderWidth` autonome, et une largeur `var()` CONTENANT
+ * UNE ESPACE — ce qu'est n'importe quelle chaine a repli, `var(--x, 0px)` —
+ * ne voyage QUE par une prop par cote ou d'axe. La prop globale `border`
+ * fait un `split(' ')` pour distribuer ses 1/2/4 valeurs et coupe donc la
+ * chaine en fragments invalides ; voir l'en-tete de `BORDER_REGEX` et les
+ * trois tests « path » de `border.util.spec.ts`. Un preset qui reintroduirait
+ * une largeur tokenisee devrait viser `borderLeft` / `borderBlock` / …,
+ * jamais `border`.
+ *
+ * @description
+ * Ajouter `borderWidth` a `IBorderProps` a par ailleurs ete tente et REJETE
+ * sur la mesure, independamment de la regex : 24 composants declarent
+ * `IBorderProps` sans consommer ses props autonomes, et le garde
+ * `unconsumed-props` — qui ne peut que retrecir — passait de 0 a 24
+ * nouvelles violations.
+ *
+ * @description
+ * ⚠️ `tonal` portait `box-shadow: none`, le MOT-CLE. `elevation: 'none'`
+ * emet `var(--origam-shadow---none)`, que `primitive.css` declare
+ * `0px 0px 0px 0px rgba(0,0,0,0)`. Le style calcule change donc de `none` a
+ * cette quadruple valeur — une ombre d'etendue nulle et d'alpha nul, qui ne
+ * peut peindre aucun pixel. C'est le SEUL ecart de valeur calculee du lot
+ * sur le chemin « variant nu », et il est mesure et rapporte comme tel
+ * plutot que dissimule : le canal `elevation` n'a aucun moyen d'emettre le
+ * mot-cle, `isOrigamRung` interceptant `'none'` avant tout le reste.
+ ********************************************************/
+export declare const KBD_VARIANT_PRESETS: TVariantPresets<TKbdVariant, IKbdProps>;

package/dist/src/consts/Kbd/kbd.const.js

@@ -0,0 +1,16 @@
+export const KBD_VARIANT_PRESETS = {
+  outlined: {
+    bgColor: "var(--origam-kbd--outlined---background-color, var(--origam-color__surface---raised, #fff))",
+    elevation: "0 1px 0 0 color-mix(in srgb, currentColor 12%, transparent), inset 0 1px 0 0 color-mix(in srgb, white 50%, transparent)"
+  },
+  filled: {
+    bgColor: "var(--origam-kbd__filled---background-color, var(--origam-color__surface---overlay, #f5f5f5))",
+    elevation: "0 1px 2px 0 color-mix(in srgb, currentColor 18%, transparent), inset 0 1px 0 0 color-mix(in srgb, white 60%, transparent)"
+  },
+  tonal: {
+    bgColor: "var(--origam-kbd__tonal---background-color, color-mix(in srgb, currentColor 8%, transparent))",
+    border: "none",
+    borderColor: "transparent",
+    elevation: "none"
+  }
+};

package/dist/src/consts/index.cjs

@@ -520,6 +520,17 @@ Object.keys(_itemGroup).forEach(function (key) {
     }
   });
 });
+var _kbd = require("./Kbd/kbd.const.cjs");
+Object.keys(_kbd).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _kbd[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _kbd[key];
+    }
+  });
+});
 var _list = require("./List/list.const.cjs");
 Object.keys(_list).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -45,6 +45,7 @@ export * from './Menu/menu.const';
 export * from './Commons/mdi.const';
 export * from './Btn/btn-toggle.const';
 export * from './ItemGroup/item-group.const';
+export * from './Kbd/kbd.const';
 export * from './List/list.const';
 export * from './Progress/progress.const';
 export * from './Parallax/parallax.const';

package/dist/src/consts/index.js

@@ -45,6 +45,7 @@ export * from "./Menu/menu.const.js";
 export * from "./Commons/mdi.const.js";
 export * from "./Btn/btn-toggle.const.js";
 export * from "./ItemGroup/item-group.const.js";
+export * from "./Kbd/kbd.const.js";
 export * from "./List/list.const.js";
 export * from "./Progress/progress.const.js";
 export * from "./Parallax/parallax.const.js";