origam 2.18.18 → 2.18.20

package/dist/src/components/Field/OrigamField.vue

@@ -572,8 +572,41 @@ defineExpose({
 		display: grid;
 		grid-template-areas: "prepend-inner field clear append-inner";
 		grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
+		/*
+		 * ⛔ #595 — NEUF tokens `--origam-field*` (plus un `--origam-input*`)
+		 * que les feuilles declarent et que ce SCSS ne lit pas. Ils restent en
+		 * baseline `token-var-channels-dormant.json` :
+		 *
+		 *   · les quatre `__overlay---{background-color,opacity,
+		 *     pointer-events,position}` — l element `.origam-field__overlay`
+		 *     EXISTE dans le template (ligne 10) mais AUCUNE regle ne le style :
+		 *     il est aujourd hui sans position, sans fond, sans opacite. Les
+		 *     cabler ajouterait quatre proprietes absentes du rendu. C est le
+		 *     raisonnement « visuellement inerte » qu un lot de #550 a tenu
+		 *     avant de devoir tout reverter (hypothese de containment non
+		 *     verifiee en navigateur) : on ne le rejoue pas ;
+		 *   · `---color` (text---primary) — la racine ne declare aucun `color`,
+		 *     la couleur du champ est heritee ;
+		 *   · `---transition-duration`, `---transition-easing` — la racine ne
+		 *     declare aucune `transition` ; celles qui existent sont portees par
+		 *     `__label` / `__clearable` / `__outline`, chacune avec son propre
+		 *     couple de tokens deja cable ;
+		 *   · `---prepend-inner-icon-opacity-focused`,
+		 *     `---append-inner-icon-opacity-focused` (opacity---100) — au focus,
+		 *     `opacity: 1` est pose sur les CONTENEURS `__prepend-inner` /
+		 *     `__append-inner`, pas sur l icone : l icone garde son 0.7. Cabler
+		 *     par le nom la ferait passer a 1 (changement de rendu) ; cabler le
+		 *     conteneur graverait un nom faux ;
+		 *   · `--origam-input---icon-opacity-active` (opacity---100) — le seul
+		 *     `opacity: 1` d icone vit dans `OrigamInput` sous
+		 *     `&--disabled, &--error`. La valeur coinciderait, le nom
+		 *     « active » non.
+		 *
+		 * `---letter-spacing`, lui, vient d etre cable : la valeur livree en dur
+		 * est identique aux deux sites, et la feuille a ete realignee sur elle.
+		 */
 		font-size: var(--origam-field---font-size, 16px);
-		letter-spacing: 0.009375em;
+		letter-spacing: var(--origam-field---letter-spacing, 0.009375em);
 		max-width: 100%;
 		border-radius: var(--origam-field---border-radius, 8px);
 		contain: layout;
@@ -608,6 +641,18 @@ defineExpose({
 
 		&__skeleton {
 			width: 100%;
+			/*
+			 * ⛔ #595 — FAUX POSITIF de `token-var-channels`, a laisser en
+			 * baseline. Le repli est `var(--origam-input__control---height, 36px)`,
+			 * et ce token-la est ECRIT PAR INSTANCE : les quatre modificateurs
+			 * de taille de ce composant (~l.1532-1550) comme ceux d `OrigamInput`
+			 * et d `OrigamTextareaField` le posent sur l element
+			 * (`sm`=28 / `md`=36 / `lg`=44 / `xl`=52px). Declarer
+			 * `--origam-field__skeleton---min-height` a `:root` avec ce repli
+			 * substituerait la valeur RACINE (36px) une fois pour toutes : le
+			 * squelette cesserait de suivre la taille du champ. Meme piege que
+			 * `---hover-x` sur SliderField.
+			 */
 			min-height: var(--origam-field__skeleton---min-height, var(--origam-input__control---height, 36px));
 			border-radius: var(--origam-field---border-radius, 8px);
 			grid-column: 1 / -1;
@@ -635,9 +680,24 @@ defineExpose({
 			column-gap: 2px;
 			display: flex;
 			flex-wrap: wrap;
-			letter-spacing: 0.009375em;
+			letter-spacing: var(--origam-field---letter-spacing, 0.009375em);
 			opacity: var(--origam-field__input---opacity, 0.7);
 			box-sizing: border-box;
+			/*
+			 * ⛔ #595 — FAUX POSITIF de `token-var-channels`, a laisser en
+			 * baseline (5 lectures ici, 1 dans OrigamSwitch, 1 dans
+			 * OrigamCheckbox). `--origam-input---density` est ECRIT PAR
+			 * INSTANCE par les trois modificateurs de densite d `OrigamInput`
+			 * (~l.424-432 : `default`=0px, `compact`=-8px,
+			 * `comfortable`=+8px) — ce sont eux, et non une feuille, qui
+			 * portent la valeur. Ce que les feuilles declarent, c est l ECHELLE
+			 * (`--origam-input---density-{default,compact,comfortable}-density`),
+			 * qui est bien atteignable par un theme ; le token agrege ne doit
+			 * pas l etre. La declarer a `:root` figerait la densite racine pour
+			 * tout champ dont le modificateur ne serait pas un ancetre du
+			 * lecteur — et le lot ne peut pas le verifier sur les trois
+			 * composants sans changer de perimetre.
+			 */
 			min-height: max(calc(var(--origam-input__control---height, 36px) + var(--origam-input---density, 0px)), 1.5rem + var(--origam-field__input---padding-top) + var(--origam-field__input---padding-bottom));
 			min-width: 0;
 			padding-inline: var(--origam-field__input---padding-start) var(--origam-field__input---padding-end);
@@ -1011,7 +1071,20 @@ defineExpose({
 
 		&--variant {
 			&-solo {
-				box-shadow: var(--origam-theme---elevation, var(--origam-field--variant-solo---box-shadow, var(--origam-shadow---sm)));
+				/*
+				 * #595 — EFFONDREMENT d un repli fantome. Cette ligne lisait
+				 * `var(--origam-theme---elevation, var(RUNG2, ...))`. Mesure du
+				 * 2026-09-29 : `--origam-theme---elevation` a UNE SEULE
+				 * occurrence dans tout le depot — ce site de lecture. Aucune
+				 * feuille ne la declare, aucun composant ne l ecrit, et la
+				 * matrice runtime (`apply-theme.util.ts`) ne l emet pas non
+				 * plus. Le nom n est d ailleurs pas grammatical : `--origam-theme`
+				 * n est pas un bloc de composant. RUNG2
+				 * (`--origam-field--variant-solo---box-shadow`) est lui declare
+				 * light ET dark a `var(--origam-shadow---sm)` : c est lui qui
+				 * peignait, et qui peint toujours. Zero pixel deplace.
+				 */
+				box-shadow: var(--origam-field--variant-solo---box-shadow, var(--origam-shadow---sm));
 				border-color: transparent;
 				--origam-field__input---padding-top: var(--origam-field__input---padding-block-solo);
 			}

package/dist/src/components/List/OrigamList.vue

@@ -372,10 +372,97 @@ defineExpose({
 			// padding `0px/0px`, so the rows ran edge-to-edge inside the menu
 			// and their hover surface was clipped by the menu's own corner
 			// radius. The two longhands are the names the base rule reads.
-			--origam-list---padding-inline-start: var(--origam-space---2, 8px);
-			--origam-list---padding-inline-end: var(--origam-space---2, 8px);
+			--origam-list---padding-inline-start: var(--origam-space---1, 4px);
+			--origam-list---padding-inline-end: var(--origam-space---1, 4px);
+
+			// ⛔ L'AXE VERTICAL DOIT ETRE DECLARE ICI AUSSI, et pas seulement dans
+			// la feuille. Mesure du 2026-09-30, menu nav de la barre marketing sur
+			// les 8 identites : `--origam-list---padding-block-start/end` valait
+			// `0` sur SEPT d'entre elles, et `var(--origam-space---2)` sur la seule
+			// `origam`. La feuille (`light.css:1716`) donne bien 8px, mais la
+			// matrice de theme runtime emet `0` pour chaque marque, et `origam`
+			// n'y echappe que parce qu'elle porte encore le reset genere
+			// (`origam-reset.generated.ts`, cf. #609) qui le re-declare.
+			//
+			// Une declaration SUR L'ELEMENT bat celle de `:root` : la poser ici
+			// neutralise l'ecart entre identites sans toucher aux 7 themes. Le
+			// rendu passait de 5-7px en vertical contre 13-27px en inline — un
+			// facteur 4 sur cartoon et glass — a des gouttieres du meme ordre.
+			--origam-list---padding-block-start: var(--origam-space---1, 4px);
+			--origam-list---padding-block-end: var(--origam-space---1, 4px);
+
 			--origam-list-subheader---font-size: var(--origam-list__subheader---nav-font-size, 0.75rem);
-			--origam-list---indent-padding: var(--origam-list---indent-padding-nav, -8px);
+
+			// ⛔ INDENT A ZERO EN MODE NAV — il rendait les items ASYMETRIQUES.
+			// `OrigamListItem` calcule
+			// `padding-inline-start: calc(base + indent + density)` mais
+			// `padding-inline-end: calc(base + density)` : l'indent ne s'applique
+			// QU'AU COTE START. Avec -8px, un item de menu recevait donc 8px de
+			// moins a gauche qu'a droite. Mesure : du bord du menu au texte,
+			// `origam` 12px a gauche contre 20px a droite, `apple` 14/18,
+			// `ecom`/`editorial`/`geek` 13/17 — cinq identites sur huit
+			// desequilibrees.
+			//
+			// L'indent sert a decaler les niveaux IMBRIQUES ; un menu de
+			// navigation est plat, il n'a rien a indenter. Les listes imbriquees
+			// gardent `--origam-list---indent-padding` intact hors mode nav.
+			--origam-list---indent-padding: 0px;
+
+			// ⛔ HAUTEUR DE RANGEE RESSERREE — 48px -> 36px, decision de
+			// l'utilisateur (2026-09-30), et elle a un COUT qu'il a accepte en
+			// connaissance de cause.
+			//
+			// `OrigamListItem` calcule
+			// `min-height: max(calc(base + densite), 1.5rem)`. Avec la base de
+			// feuille a 56px et la densite compacte a -8px, une rangee de menu
+			// faisait 48px : les libelles restaient a 50px les uns des autres
+			// alors que les gouttieres venaient d'etre resserrees a 8-11px. C'est
+			// la hauteur de rangee, PAS une gouttiere, qui portait le reste du
+			// desequilibre signale.
+			//
+			// ⚠️ 36px passe SOUS la cible tactile de 44x44 recommandee par WCAG
+			// 2.5.5. Le compromis est assume pour un menu de navigation d'en-tete,
+			// dense et pointe a la souris. ⛔ NE PAS propager cette valeur aux
+			// listes hors mode `nav` : une liste de contenu garde 48px, et c'est
+			// pour cela que la declaration vit dans `&--nav` et nulle part
+			// ailleurs. La base ajoute la densite, donc on vise 44 pour obtenir 36
+			// en densite compacte.
+			--origam-list-item---min-height: var(--origam-list--nav---item-min-height, 44px);
+
+			// Le `min-height` seul ne suffit pas : mesure, la rangee rendait 40px
+			// et non 36, parce que le CONTENU la depassait — texte plus les 8px de
+			// padding haut et bas de l'item. On resserre donc aussi ce padding en
+			// mode nav, sinon la hauteur demandee reste theorique.
+			:deep(.origam-list-item) {
+				--origam-list-item---padding-block-start: var(--origam-list--nav---item-padding-block, 6px);
+				--origam-list-item---padding-block-end: var(--origam-list--nav---item-padding-block, 6px);
+			}
+
+			// ⛔ L'ECART ENTRE PASTILLES ETAIT NUL — le desequilibre signale.
+			// Mesure du 2026-09-30 sur le menu « Features » (10 items), 8
+			// identites : la pastille d'un item est en retrait de 12 a 15px a
+			// gauche ET a droite, mais l'ecart VERTICAL entre deux pastilles
+			// valait `0` sur SEPT identites sur huit (geek : 5px). Les rangees se
+			// touchent donc bord a bord pendant que les cotes respirent — un
+			// rapport infini, pas seulement desequilibre.
+			//
+			// La liste est un conteneur BLOC : pas de `gap` disponible sans la
+			// passer en flex, ce qui toucherait les ~200 consommateurs de
+			// `origam-list`. La marge entre freres adjacents obtient le meme
+			// resultat sans changer le mode de disposition, et ne s'applique qu'au
+			// mode nav.
+			// ⛔ `:deep()` EST OBLIGATOIRE ICI, et une regle scopee nue ne marche
+			// PAS. Mesure : l'item porte `data-v-5f5f508b` (OrigamListItem) et le
+			// scope de l'appelant, mais PAS `data-v-05b52ddf` (OrigamList) — les
+			// items arrivent par le SLOT, donc ils appartiennent au scope de celui
+			// qui les ecrit, pas a celui de la liste qui les recoit. Une regle
+			// scopee nue compile en `… .origam-list-item[data-v-05b52ddf]` et ne
+			// matche jamais : le premier essai a rendu un ecart de 0px, identique
+			// a l'etat d'avant. `:deep()` pose l'attribut sur l'ANCETRE, qui lui
+			// le porte.
+			:deep(.origam-list-item + .origam-list-item) {
+				margin-block-start: var(--origam-list--nav---item-gap, 2px);
+			}
 		}
 
 		&--rounded {

package/dist/src/components/Main/OrigamMain.vue

@@ -20,7 +20,7 @@ import { useDimension } from "../../composables/Commons/dimension.composable";
 import { useBorder } from "../../composables/Commons/border.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
 import { useElevation } from "../../composables/Commons/elevation.composable";
-import { useLayout } from "../../composables/Commons/layout.composable";
+import { useLayoutMain } from "../../composables/Commons/layout.composable";
 import { useMargin } from "../../composables/Commons/margin.composable";
 import { usePadding } from "../../composables/Commons/padding.composable";
 import { useProps } from "../../composables/Commons/props.composable";
@@ -78,7 +78,7 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 defineEmits([]);
 defineSlots();
-const { mainStyles: mainLayoutStyles } = useLayout();
+const { mainStyles: mainLayoutStyles } = useLayoutMain();
 const { ssrBootStyles } = useSsrBoot();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { elevationClasses } = useElevation(props);

package/dist/src/components/Media/OrigamMediaScrubber.vue

@@ -428,7 +428,17 @@ defineExpose({
 		color: var(--origam-media-scrubber__tooltip---color, #ffffff);
 		font-size: 11px;
 		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);
 		border-radius: 3px;
 		white-space: nowrap;
 		pointer-events: none;

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -981,14 +981,67 @@ defineExpose({
 			position: absolute;
 			pointer-events: none;
 			bottom: calc(100% + 6px);
+			/*
+			 * ⛔ #595 — FAUX POSITIF de `token-var-channels`, a laisser en
+			 * baseline. `--origam-slider-field---hover-x` est ECRIT PAR
+			 * INSTANCE, en style inline, par le `pointermove` de ce meme
+			 * composant (`container.style.setProperty(...)`, ~l.680) et RETIRE
+			 * au `pointerleave` (`removeProperty`, ~l.703). Une custom property
+			 * est substituee SUR L ELEMENT QUI LA DECLARE : la declarer a
+			 * `:root` ferait que, apres `removeProperty`, l infobulle ne
+			 * retomberait plus sur le repli `0%` mais sur la valeur de la
+			 * feuille — l infobulle resterait collee a sa derniere position au
+			 * lieu de revenir au depart. La garde compare des noms, pas des
+			 * chaines de repli : elle ne peut pas voir la difference.
+			 */
 			inset-inline-start: var(--origam-slider-field---hover-x, 0%);
 			transform: translateX(-50%);
 			padding: 3px 6px;
-			background: var(--origam-slider-field__hover-tooltip---background-color, var(--origam-color__surface--inverse---bg, rgba(0, 0, 0, 0.85)));
-			color: var(--origam-slider-field__hover-tooltip---color, var(--origam-color__on--inverse---fg, #ffffff));
+			/*
+			 * #595 — EFFONDREMENT. Ces deux lignes lisaient
+			 * `var(RUNG1, var(--origam-color__{surface--inverse---bg,
+			 * on--inverse---fg}, T))`. Les deux RUNG1 viennent d etre declares
+			 * dans les feuilles — AVEC leur `var()` interne recopie verbatim,
+			 * donc le canal `--inverse` reste atteignable PAR LA FEUILLE. Le
+			 * garder aussi ici etait du poids mort : RUNG1 etant declare,
+			 * l echelon 2 du site de lecture est inatteignable par
+			 * construction. Retire : zero pixel deplace, deux canaux morts en
+			 * moins.
+			 *
+			 * ⛔ Et les deux noms de l echelon 2 etaient FAUX. Forme d ETAT
+			 * (`--inverse---`) d une famille qui n existe pas : zero
+			 * declaration dans tout `assets/`. L infobulle retombait donc
+			 * eternellement sur son repli sombre en dur, qui n inversait
+			 * JAMAIS. Les vrais noms existaient a cote depuis toujours, et ils
+			 * inversent — mesure en Chromium le 2026-09-29, data-theme pilote :
+			 *
+			 *     --origam-color__surface---inverse   light #171717  dark #ffffff
+			 *     --origam-color__text---inverse      light #ffffff  dark #0a0a0a
+			 *
+			 * La DECLARATION de chaque RUNG1, dans les quatre feuilles, pointe
+			 * maintenant sur eux. C est la que vit la correction : RUNG1 etant
+			 * declare, le repli ecrit ici ne serait jamais atteint — corriger
+			 * ce fichier seul n aurait rien change.
+			 *
+			 * ⚠️ Ceci CHANGE le rendu, volontairement : l infobulle inverse
+			 * enfin (surface claire + texte sombre en mode sombre). Avant, les
+			 * deux tokens rendaient la MEME valeur dans les deux modes.
+			 */
+			background: var(--origam-slider-field__hover-tooltip---background-color, rgba(0, 0, 0, 0.85));
+			color: var(--origam-slider-field__hover-tooltip---color, #ffffff);
 			font-size: 11px;
 			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);
 			border-radius: 3px;
 			white-space: nowrap;
 			z-index: 4;
@@ -1099,6 +1152,22 @@ defineExpose({
 				height: 100%;
 				display: flex;
 				justify-content: center;
+				/*
+				 * ⛔ #595, trouvaille hors perimetre : le repli `2` est SANS
+				 * UNITE. `width: 2` est invalide et `calc(2 + 2px)` aussi — le
+				 * navigateur jette la declaration entiere. Tant que
+				 * `OrigamSliderFieldTrack` n ecrit pas
+				 * `--origam-slider-field-track---size` en inline (il ne le fait
+				 * que si la prop `size` est fournie), TOUTES les regles de
+				 * largeur du mode vertical sont mortes. Meme famille que la
+				 * gouttiere d `OrigamRow` (#568) et que le garde
+				 * `unitless-zero-in-calc`.
+				 *
+				 * Non corrige ici : declarer le token ou unifier le repli a
+				 * `2px` REPARERAIT le rendu, donc le changerait — hors du
+				 * contrat « zero pixel deplace » de ce lot. Signale sans
+				 * ticket (consigne du lot).
+				 */
 				width: calc(var(--origam-slider-field-track---size, 2) + 2px);
 
 				.origam-slider-field-track__background {
@@ -1334,6 +1403,72 @@ defineExpose({
 		}
 	}
 
+	/*
+	 * ⛔ #595 — SEIZE tokens `--origam-slider-field*` que les feuilles
+	 * declarent et que ce SCSS ne lit pas. Ils restent en baseline
+	 * `token-var-channels-dormant.json` ; raison par famille :
+	 *
+	 *   · `__thumb---border-color` (surface---default) — DEUXIEME grammaire
+	 *     pour la meme propriete. La grammaire VIVANTE est
+	 *     `--origam-slider-field-thumb__surface---border-color`, lue trois
+	 *     lignes plus bas, et `packages/marketing/src/themes/ecom.theme.ts`
+	 *     la surcharge deja (`#e11d48`). Renommer la lecture casserait ce
+	 *     theme ; c est donc le nom `-thumb__surface-` qui vient d etre
+	 *     declare, et celui-ci qui reste dormant ;
+	 *   · `__thumb---border-width` (border__width---2 = 2px) — le pouce livre
+	 *     `border: 1px solid` ; `__thumb---box-shadow` (shadow---sm) — il
+	 *     livre `box-shadow: none`. Cabler l un ou l autre change le rendu ;
+	 *   · `__thumb---focus-ring-color`, `---focus-ring-width`,
+	 *     `---scale-hover`, `---scale-active` — l anneau et l agrandissement
+	 *     sont dessines par `&__surface:before` (`transform: scale(2)`,
+	 *     `opacity: .12/.04`), pas par un anneau dimensionne : aucune
+	 *     declaration a remplacer ;
+	 *   · `---opacity-disabled` (opacity---32 = 0.32) — le rendu desactive est
+	 *     `opacity: 0.38` ;
+	 *   · `---padding-block` (space---2) — aucune declaration `padding-block`
+	 *     sur la racine ;
+	 *   · `---transition-duration` (motion---fast), `---transition-timing-
+	 *     function` (easing---standard) — les transitions sont des raccourcis
+	 *     multi-proprietes ecrits en dur (0.15s/0.2s/0.3s/120ms) ;
+	 *   · les trois `__label---{color,font-size,padding}` — le libelle est
+	 *     rendu par `OrigamLabel`, qui lit `--origam-label---*` ;
+	 *   · `__tick---size` (4px) — la taille du tick est ECRITE EN INLINE par
+	 *     `OrigamSliderFieldTrack` (`convertToUnit(props.tickSize)`) sous le
+	 *     nom `--origam-slider-field-track__tick---size` : c est une valeur
+	 *     d instance, pas un canal de theme ;
+	 *   · `__track---height` (4px) — `.origam-slider-field__track` existe dans
+	 *     le template mais aucune regle ne lui donne de hauteur ; la hauteur
+	 *     vivante est celle de `.origam-slider-field-track` (sous-composant).
+	 *
+	 * ⛔ `--origam-slider-field---track-size` : FAUX POSITIF de la garde, a
+	 * laisser en baseline et surtout a NE PAS declarer.
+	 *
+	 * Il est ECRIT PAR INSTANCE, inconditionnellement, par `sliderFieldStyles`
+	 * (~l.1018) : `convertToUnit(trackProps.size ?? 4)`. Ce style inline est
+	 * pose sur la RACINE des deux variantes (`<origam-input>` et `<section>`),
+	 * donc tout le sous-arbre en herite et les HUIT sites de lecture prennent
+	 * cette valeur. Mesure en Chromium le 2026-09-29, trois variants de la
+	 * story, bloc `--horizontal` present :
+	 *
+	 *     style inline sur la racine  --origam-slider-field---track-size: 4px
+	 *     token relu sur la racine    4px
+	 *     token relu sur la piste     4px
+	 *     hauteur rendue de la piste  4px   <- la regle au repli 14px
+	 *
+	 * ⚠️ Deux consequences, contre-intuitives toutes les deux :
+	 *
+	 *   1. Les replis `14px` des six lignes du bloc `--horizontal` sont du CODE
+	 *      MORT : ils ne sont jamais atteints, la piste horizontale mesure 4px.
+	 *      Il n y a donc PAS « deux camps » a arbitrer — la lecture precedente
+	 *      de ce commentaire, qui annoncait un arbitrage entre 4px et 14px,
+	 *      etait fausse : elle comparait des textes de repli sans verifier
+	 *      lequel s applique.
+	 *   2. Le declarer a `:root` serait INERTE : l ecriture inline sur la
+	 *      racine bat une declaration de feuille pour tout le sous-arbre. Un
+	 *      theme qui le reglerait ne verrait RIEN changer — on annoncerait un
+	 *      canal qui ne fonctionne pas. C est exactement le motif que la
+	 *      campagne interdit de cabler.
+	 */
 	.origam-slider-field-thumb {
 		$this: &;
 

package/dist/src/components/SliderField/OrigamSliderFieldTrack.vue

@@ -271,7 +271,18 @@ defineExpose({
 			position: absolute;
 			opacity: 0;
 			transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1);
-			border-radius: 2px;
+			// #595 — remplacement litteral : la valeur livree (`2px`) est
+			// desormais lue depuis son token, dont la feuille a ete realignee
+			// sur elle (elle annoncait `radius---full`, soit 9999px). Zero
+			// pixel deplace, un canal de theme de plus.
+			//
+			// ⛔ `--origam-slider-field-track__tick---size` juste en dessous
+			// reste NON declare a dessein : OrigamSliderFieldTrack l ecrit en
+			// style INLINE par instance (`convertToUnit(props.tickSize)`,
+			// ligne ~152). Le declarer a `:root` remplacerait le repli par une
+			// valeur de feuille des que la prop est absente — un changement de
+			// rendu, pas un canal.
+			border-radius: var(--origam-slider-field__tick---border-radius, 2px);
 			width: var(--origam-slider-field-track__tick---size, 2);
 			height: var(--origam-slider-field-track__tick---size, 2);
 			transform: translate(calc(var(--origam-slider-field-track__tick---size, 2) / -2), calc(var(--origam-slider-field-track__tick---size, 2) / -2));

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -92,7 +92,7 @@ import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
 import OrigamSnack from "../Transition/OrigamSnack.vue";
 import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
-import { useLayout } from "../../composables/Commons/layout.composable";
+import { useLayoutMain } from "../../composables/Commons/layout.composable";
 import { usePosition } from "../../composables/Commons/position.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useScopeId } from "../../composables/Commons/scopeId.composable";
@@ -216,7 +216,7 @@ const mainStyles = ref();
 const hasLayout = inject(ORIGAM_LAYOUT_KEY, void 0);
 const timerKey = shallowRef(0);
 useToggleScope(() => !!hasLayout, () => {
-  const layout = useLayout();
+  const layout = useLayoutMain();
   watchEffect(() => {
     mainStyles.value = layout.mainStyles.value;
   });

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -571,6 +571,38 @@ defineExpose({
       background-color: currentColor;
     }
 
+    /*
+     * ⛔ #595 — DOUZE tokens `--origam-switch__*` que les feuilles declarent
+     * et que ce SCSS ne lit PAS. Mesure du 2026-09-27 : dans les douze cas la
+     * feuille decrit une intention de design que le SCSS n a jamais
+     * implementee, et la cabler DEPLACERAIT le rendu. Ils restent donc en
+     * baseline `token-var-channels-dormant.json`, ici est la raison :
+     *
+     *   · `__thumb---background-color-checked` (surface---default) — le pouce
+     *     coche est peint `currentColor` par les regles `:has()` ci-dessus, pas
+     *     par un token : la valeur declaree est une AUTRE couleur ;
+     *   · `__thumb---background-color-disabled` (surface---overlay),
+     *     `__thumb---box-shadow` (shadow---sm) — aucune declaration
+     *     correspondante n existe sur le pouce (ni fond desactive, ni ombre) :
+     *     les ajouter serait ajouter une propriete ABSENTE du rendu, ce que la
+     *     regle de securite de #550 interdit apres un revert ;
+     *   · `__thumb---transition-duration` (motion---medium) — la transition du
+     *     pouce est un raccourci multi-proprietes ecrit en dur a 0.15s/0.2s ;
+     *   · `__thumb---translate-distance` (20px) — le deplacement est pose en
+     *     `translateX(±10px)` sur `.origam-selection-control__input`, soit la
+     *     MOITIE du token. Cabler par le nom exigerait un `calc()` derive ;
+     *   · `__track---background-color-checked` (action--primary---bg) — le rail
+     *     coche est peint par `bgColor` / la classe utilitaire, pas par une
+     *     regle `--dirty` ;
+     *   · `__input---opacity` (0) — aucune classe `.origam-switch__input` :
+     *     l input natif appartient a `OrigamSelectionControl` ;
+     *   · les cinq `__label---*` (color, color-disabled, color-error,
+     *     font-size, padding-inline) — le libelle est rendu par `OrigamLabel`,
+     *     qui lit `--origam-label---*`. La seule regle que Switch pose sur lui
+     *     est `padding-inline-start: 10px`, quand le token vaut `space---2`
+     *     (8px) : cabler decalerait chaque libelle de 2px, et le nom
+     *     `padding-inline` mentirait sur une regle qui ne touche que `-start`.
+     */
     &__thumb {
       align-items: center;
       background-color: var(--origam-switch__thumb---background-color, rgb(255, 255, 255));

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

@@ -487,7 +487,9 @@ const enrichedRules = computed(() => {
   }
   return base;
 });
-const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+const filteredAttrs = computed(() => filterInputAttrs(attrs));
+const rootAttrs = computed(() => filteredAttrs.value[0]);
+const inputAttrs = computed(() => filteredAttrs.value[1]);
 const inputProps = computed(() => {
   return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", ...BORDER_PROP_KEYS]);
 });

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/backdrop.composable.cjs

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBackdrop = useBackdrop;
+var _vue = require("vue");
+var _backdrop = require("../../consts/Commons/backdrop.const.cjs");
+function resolveBackdropBlur(value) {
+  if (value == null || value === false || value === "") return null;
+  if (value === true) {
+    return {
+      rung: _backdrop.BACKDROP_BLUR_DEFAULT_RUNG,
+      length: _backdrop.BACKDROP_BLUR_RUNG_VARS[_backdrop.BACKDROP_BLUR_DEFAULT_RUNG]
+    };
+  }
+  if (typeof value === "number") return {
+    rung: null,
+    length: `${value}px`
+  };
+  const key = String(value).trim();
+  const rungVar = _backdrop.BACKDROP_BLUR_RUNG_VARS[key];
+  if (rungVar) return {
+    rung: key,
+    length: rungVar
+  };
+  return {
+    rung: null,
+    length: key
+  };
+}
+function useBackdrop(props) {
+  const resolved = (0, _vue.computed)(() => {
+    return resolveBackdropBlur((0, _vue.isRef)(props) ? props.value : props.backdropBlur);
+  });
+  const backdropClasses = (0, _vue.computed)(() => {
+    const rung = resolved.value?.rung;
+    return rung ? [`${_backdrop.BACKDROP_UTILITY_CLASS_PREFIX}${rung}`] : [];
+  });
+  const backdropStyles = (0, _vue.computed)(() => {
+    const current = resolved.value;
+    if (!current) return [];
+    const filter = `blur(${current.length})`;
+    return [`backdrop-filter: ${filter}`, `-webkit-backdrop-filter: ${filter}`];
+  });
+  return {
+    backdropClasses,
+    backdropStyles
+  };
+}

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

@@ -0,0 +1,32 @@
+import { Ref } from 'vue';
+import type { IBackdropProps } from '../../interfaces/Commons/backdrop.interface';
+import { TBackdropBlur } from '../../types/Commons/backdrop.type';
+/*********************************************************
+ * useBackdrop
+ *
+ * @description
+ * Translates the `backdropBlur` prop into `backdropClasses` (the global
+ * utility class, when the value lands on a token rung) AND
+ * `backdropStyles` (always a `backdrop-filter` pair). Both channels are
+ * emitted in PARALLEL — strategy A, same contract as `useElevation`.
+ *
+ * @description
+ * The `-webkit-` prefixed twin is emitted alongside the standard property
+ * on every path: Safari still ships `backdrop-filter` prefixed only, and
+ * every one of the 12 components already painting glass in this DS writes
+ * the pair. Dropping it would make the prop a no-op on Safari while
+ * looking correct everywhere the author tests.
+ *
+ * @description
+ * No `@supports` gate, and that is not an oversight. An unsupported
+ * browser drops an unknown declaration by itself, so the gate would buy
+ * nothing here — and an inline style cannot carry one anyway. The
+ * `@supports not (backdrop-filter: ...)` blocks that exist in the DS
+ * today thicken the BACKGROUND COLOUR when blur is unavailable, which is
+ * a `bgColor` decision belonging to whoever writes the preset, not to
+ * this composable.
+ ********************************************************/
+export declare function useBackdrop(props: IBackdropProps | Ref<TBackdropBlur | undefined>): {
+    backdropClasses: import("vue").ComputedRef<string[]>;
+    backdropStyles: import("vue").ComputedRef<string[]>;
+};

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

@@ -0,0 +1,33 @@
+import { computed, isRef } from "vue";
+import {
+  BACKDROP_BLUR_DEFAULT_RUNG,
+  BACKDROP_BLUR_RUNG_VARS,
+  BACKDROP_UTILITY_CLASS_PREFIX
+} from "../../consts/Commons/backdrop.const.js";
+function resolveBackdropBlur(value) {
+  if (value == null || value === false || value === "") return null;
+  if (value === true) {
+    return { rung: BACKDROP_BLUR_DEFAULT_RUNG, length: BACKDROP_BLUR_RUNG_VARS[BACKDROP_BLUR_DEFAULT_RUNG] };
+  }
+  if (typeof value === "number") return { rung: null, length: `${value}px` };
+  const key = String(value).trim();
+  const rungVar = BACKDROP_BLUR_RUNG_VARS[key];
+  if (rungVar) return { rung: key, length: rungVar };
+  return { rung: null, length: key };
+}
+export function useBackdrop(props) {
+  const resolved = computed(() => {
+    return resolveBackdropBlur(isRef(props) ? props.value : props.backdropBlur);
+  });
+  const backdropClasses = computed(() => {
+    const rung = resolved.value?.rung;
+    return rung ? [`${BACKDROP_UTILITY_CLASS_PREFIX}${rung}`] : [];
+  });
+  const backdropStyles = computed(() => {
+    const current = resolved.value;
+    if (!current) return [];
+    const filter = `blur(${current.length})`;
+    return [`backdrop-filter: ${filter}`, `-webkit-backdrop-filter: ${filter}`];
+  });
+  return { backdropClasses, backdropStyles };
+}

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");