origam 2.18.9 → 2.18.11

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

@@ -2158,7 +2158,8 @@
   --origam-switch__track---width: 44px;
   --origam-switch__track---height: 24px;
   --origam-switch__track---border-radius: var(--origam-radius---full);
-  --origam-switch__track---background-color: var(--origam-color__surface---disabled);
+  /* #919 — track-vs-page mesure 1.06-1.83:1 sur les 16 combos identite x mode (Playwright/Chromium) quand ce token vaut surface---disabled : la teinte est visuellement trop proche de la page dans les 8 identites. Derive de text---primary (garanti contraste contre la page par la lisibilite du texte) via color-mix ; comme le pouce par defaut vaut surface---default (= la page), il herite automatiquement du meme contraste contre ce nouveau track. Pire cas remesure apres correctif (cartoon|light) : 3.90:1. */
+  --origam-switch__track---background-color: color-mix(in srgb, var(--origam-color__text---primary) 60%, var(--origam-color__surface---default));
   --origam-switch__track---background-color-checked: var(--origam-color__action--primary---bg);
   --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
   --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
@@ -2171,7 +2172,9 @@
   --origam-switch__thumb---background-color: var(--origam-color__surface---default);
   --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
   --origam-switch__thumb---background-color-disabled: var(--origam-color__surface---overlay);
-  --origam-switch__thumb---background-color-error: var(--origam-color__feedback--danger---bg);
+  /* #919 point 5 — voir light.css pour l'explication complete (pouce invisible
+     sur le rail en erreur, 1.00:1 mesure ; revient a surface---default). */
+  --origam-switch__thumb---background-color-error: var(--origam-color__surface---default);
   --origam-switch__thumb---color-error: var(--origam-color__feedback--danger---fg);
   --origam-switch__thumb---box-shadow: var(--origam-shadow---sm);
   --origam-switch__thumb---border-radius: var(--origam-radius---full);
@@ -4896,7 +4899,8 @@
     --origam-switch__track---width: 44px;
     --origam-switch__track---height: 24px;
     --origam-switch__track---border-radius: var(--origam-radius---full);
-    --origam-switch__track---background-color: var(--origam-color__surface---disabled);
+    /* #919 — track-vs-page mesure 1.06-1.83:1 sur les 16 combos identite x mode (Playwright/Chromium) quand ce token vaut surface---disabled : la teinte est visuellement trop proche de la page dans les 8 identites. Derive de text---primary (garanti contraste contre la page par la lisibilite du texte) via color-mix ; comme le pouce par defaut vaut surface---default (= la page), il herite automatiquement du meme contraste contre ce nouveau track. Pire cas remesure apres correctif (cartoon|light) : 3.90:1. */
+    --origam-switch__track---background-color: color-mix(in srgb, var(--origam-color__text---primary) 60%, var(--origam-color__surface---default));
     --origam-switch__track---background-color-checked: var(--origam-color__action--primary---bg);
     --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
     --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
@@ -4909,7 +4913,9 @@
     --origam-switch__thumb---background-color: var(--origam-color__surface---default);
     --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
     --origam-switch__thumb---background-color-disabled: var(--origam-color__surface---overlay);
-    --origam-switch__thumb---background-color-error: var(--origam-color__feedback--danger---bg);
+    /* #919 point 5 — voir light.css pour l'explication complete (pouce invisible
+       sur le rail en erreur, 1.00:1 mesure ; revient a surface---default). */
+    --origam-switch__thumb---background-color-error: var(--origam-color__surface---default);
     --origam-switch__thumb---color-error: var(--origam-color__feedback--danger---fg);
     --origam-switch__thumb---box-shadow: var(--origam-shadow---sm);
     --origam-switch__thumb---border-radius: var(--origam-radius---full);

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

@@ -2064,7 +2064,8 @@
   --origam-switch__track---width: 44px;
   --origam-switch__track---height: 24px;
   --origam-switch__track---border-radius: var(--origam-radius---full);
-  --origam-switch__track---background-color: var(--origam-color__surface---disabled);
+  /* #919 — track-vs-page mesure 1.06-1.83:1 sur les 16 combos identite x mode (Playwright/Chromium) quand ce token vaut surface---disabled : la teinte est visuellement trop proche de la page dans les 8 identites. Derive de text---primary (garanti contraste contre la page par la lisibilite du texte) via color-mix ; comme le pouce par defaut vaut surface---default (= la page), il herite automatiquement du meme contraste contre ce nouveau track. Pire cas remesure apres correctif (cartoon|light) : 3.90:1. */
+  --origam-switch__track---background-color: color-mix(in srgb, var(--origam-color__text---primary) 60%, var(--origam-color__surface---default));
   --origam-switch__track---background-color-checked: var(--origam-color__action--primary---bg);
   --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
   --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
@@ -2077,7 +2078,19 @@
   --origam-switch__thumb---background-color: var(--origam-color__surface---default);
   --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
   --origam-switch__thumb---background-color-disabled: var(--origam-color__surface---overlay);
-  --origam-switch__thumb---background-color-error: var(--origam-color__feedback--danger---bg);
+  /* #919 point 5 (etats non mesures) — le pouce et le rail utilisaient le MEME
+     token (danger---bg) : pouce totalement invisible sur le rail en erreur,
+     ratio 1.00:1 mesure sur les 16 configs (Playwright/Chromium, `switch-error`
+     dans why-origam-contrast.audit.mjs). Le pouce revient a surface---default —
+     le MEME token que le pouce par defaut (non colore) — au lieu de copier la
+     couleur du rail. Note : `--origam-switch__thumb---color-error` (icone/texte
+     DANS le pouce, applique par le meme selecteur SCSS) reste danger---fg
+     (blanc) ; s'il n'y a pas d'icone (cas par defaut), cette valeur ne peint
+     rien de visible et ne cree aucun conflit. Avec un `icon` explicite EN PLUS
+     de `error`, l'icone blanche perdrait en lisibilite sur un pouce clair en
+     light — combinaison rare, non couverte ici, a traiter separement si elle
+     se presente. */
+  --origam-switch__thumb---background-color-error: var(--origam-color__surface---default);
   --origam-switch__thumb---color-error: var(--origam-color__feedback--danger---fg);
   --origam-switch__thumb---box-shadow: var(--origam-shadow---sm);
   --origam-switch__thumb---border-radius: var(--origam-radius---full);

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

@@ -2158,7 +2158,8 @@
   --origam-switch__track---width: 44px;
   --origam-switch__track---height: 24px;
   --origam-switch__track---border-radius: var(--origam-radius---full);
-  --origam-switch__track---background-color: var(--origam-color__surface---disabled);
+  /* #919 — track-vs-page mesure 1.06-1.83:1 sur les 16 combos identite x mode (Playwright/Chromium) quand ce token vaut surface---disabled : la teinte est visuellement trop proche de la page dans les 8 identites. Derive de text---primary (garanti contraste contre la page par la lisibilite du texte) via color-mix ; comme le pouce par defaut vaut surface---default (= la page), il herite automatiquement du meme contraste contre ce nouveau track. Pire cas remesure apres correctif (cartoon|light) : 3.90:1. */
+  --origam-switch__track---background-color: color-mix(in srgb, var(--origam-color__text---primary) 60%, var(--origam-color__surface---default));
   --origam-switch__track---background-color-checked: var(--origam-color__action--primary---bg);
   --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
   --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
@@ -2171,7 +2172,9 @@
   --origam-switch__thumb---background-color: var(--origam-color__surface---default);
   --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
   --origam-switch__thumb---background-color-disabled: var(--origam-color__surface---overlay);
-  --origam-switch__thumb---background-color-error: var(--origam-color__feedback--danger---bg);
+  /* #919 point 5 — voir light.css pour l'explication complete (pouce invisible
+     sur le rail en erreur, 1.00:1 mesure ; revient a surface---default). */
+  --origam-switch__thumb---background-color-error: var(--origam-color__surface---default);
   --origam-switch__thumb---color-error: var(--origam-color__feedback--danger---fg);
   --origam-switch__thumb---box-shadow: var(--origam-shadow---sm);
   --origam-switch__thumb---border-radius: var(--origam-radius---full);
@@ -4896,7 +4899,8 @@
     --origam-switch__track---width: 44px;
     --origam-switch__track---height: 24px;
     --origam-switch__track---border-radius: var(--origam-radius---full);
-    --origam-switch__track---background-color: var(--origam-color__surface---disabled);
+    /* #919 — track-vs-page mesure 1.06-1.83:1 sur les 16 combos identite x mode (Playwright/Chromium) quand ce token vaut surface---disabled : la teinte est visuellement trop proche de la page dans les 8 identites. Derive de text---primary (garanti contraste contre la page par la lisibilite du texte) via color-mix ; comme le pouce par defaut vaut surface---default (= la page), il herite automatiquement du meme contraste contre ce nouveau track. Pire cas remesure apres correctif (cartoon|light) : 3.90:1. */
+    --origam-switch__track---background-color: color-mix(in srgb, var(--origam-color__text---primary) 60%, var(--origam-color__surface---default));
     --origam-switch__track---background-color-checked: var(--origam-color__action--primary---bg);
     --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
     --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
@@ -4909,7 +4913,9 @@
     --origam-switch__thumb---background-color: var(--origam-color__surface---default);
     --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
     --origam-switch__thumb---background-color-disabled: var(--origam-color__surface---overlay);
-    --origam-switch__thumb---background-color-error: var(--origam-color__feedback--danger---bg);
+    /* #919 point 5 — voir light.css pour l'explication complete (pouce invisible
+       sur le rail en erreur, 1.00:1 mesure ; revient a surface---default). */
+    --origam-switch__thumb---background-color-error: var(--origam-color__surface---default);
     --origam-switch__thumb---color-error: var(--origam-color__feedback--danger---fg);
     --origam-switch__thumb---box-shadow: var(--origam-shadow---sm);
     --origam-switch__thumb---border-radius: var(--origam-radius---full);

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

@@ -2064,7 +2064,8 @@
   --origam-switch__track---width: 44px;
   --origam-switch__track---height: 24px;
   --origam-switch__track---border-radius: var(--origam-radius---full);
-  --origam-switch__track---background-color: var(--origam-color__surface---disabled);
+  /* #919 — track-vs-page mesure 1.06-1.83:1 sur les 16 combos identite x mode (Playwright/Chromium) quand ce token vaut surface---disabled : la teinte est visuellement trop proche de la page dans les 8 identites. Derive de text---primary (garanti contraste contre la page par la lisibilite du texte) via color-mix ; comme le pouce par defaut vaut surface---default (= la page), il herite automatiquement du meme contraste contre ce nouveau track. Pire cas remesure apres correctif (cartoon|light) : 3.90:1. */
+  --origam-switch__track---background-color: color-mix(in srgb, var(--origam-color__text---primary) 60%, var(--origam-color__surface---default));
   --origam-switch__track---background-color-checked: var(--origam-color__action--primary---bg);
   --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
   --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
@@ -2077,7 +2078,19 @@
   --origam-switch__thumb---background-color: var(--origam-color__surface---default);
   --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
   --origam-switch__thumb---background-color-disabled: var(--origam-color__surface---overlay);
-  --origam-switch__thumb---background-color-error: var(--origam-color__feedback--danger---bg);
+  /* #919 point 5 (etats non mesures) — le pouce et le rail utilisaient le MEME
+     token (danger---bg) : pouce totalement invisible sur le rail en erreur,
+     ratio 1.00:1 mesure sur les 16 configs (Playwright/Chromium, `switch-error`
+     dans why-origam-contrast.audit.mjs). Le pouce revient a surface---default —
+     le MEME token que le pouce par defaut (non colore) — au lieu de copier la
+     couleur du rail. Note : `--origam-switch__thumb---color-error` (icone/texte
+     DANS le pouce, applique par le meme selecteur SCSS) reste danger---fg
+     (blanc) ; s'il n'y a pas d'icone (cas par defaut), cette valeur ne peint
+     rien de visible et ne cree aucun conflit. Avec un `icon` explicite EN PLUS
+     de `error`, l'icone blanche perdrait en lisibilite sur un pouce clair en
+     light — combinaison rare, non couverte ici, a traiter separement si elle
+     se presente. */
+  --origam-switch__thumb---background-color-error: var(--origam-color__surface---default);
   --origam-switch__thumb---color-error: var(--origam-color__feedback--danger---fg);
   --origam-switch__thumb---box-shadow: var(--origam-shadow---sm);
   --origam-switch__thumb---border-radius: var(--origam-radius---full);

package/dist/src/components/Btn/OrigamBtn.vue

@@ -440,6 +440,24 @@ defineExpose({
 	.origam-btn {
 		$this: &;
 
+		// ⛔ #933 — `display` was never declared here. The root then fell back
+		// to the UA default, which for the `<a>` / `<span>` tags `useLink`
+		// renders is `inline`. An inline box ignores `height`, `min-width` and
+		// vertical `padding`, and it stretches to the full line box — so a Btn
+		// dropped into a plain block parent (`<p>`, `<div>`) rendered as a
+		// full-width, 15px-tall strip. Every Btn in this DS *looked* correct
+		// only because its parent happened to be a flex/grid container, which
+		// blockifies the child: measured on the marketing site, all 9 visible
+		// Btn roots computed `display: block` with a `display: flex` parent,
+		// and the single Btn inside a `<p>` computed `inline` at 984px wide.
+		//
+		// `inline-block` is the value the rest of this rule already assumed —
+		// `vertical-align: middle` right below only has meaning on an
+		// inline-level box. It is also the safest: inside a flex/grid parent it
+		// blockifies to `block`, i.e. byte-for-byte today's computed value, so
+		// no existing layout moves. `&--block` still overrides it with `flex`.
+		display: inline-block;
+
 		position: var(--origam-btn---position, relative);
 		vertical-align: middle;
 		flex-shrink: 0;

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

@@ -355,7 +355,16 @@ defineExpose({
 		}
 
 		&--nav {
-			--origam-list---padding-inline: 8px;
+			// ⛔ #934 — this used to declare `--origam-list---padding-inline`,
+			// a name NOTHING reads. A custom property is not a shorthand: it
+			// expands to nothing, so `padding-inline-start/end` above kept
+			// resolving to the sheet's `--origam-space---0`. Measured on the
+			// marketing appbar menu across all 8 identities: list inline
+			// 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-subheader---font-size: var(--origam-list__subheader---nav-font-size, 0.75rem);
 			--origam-list---indent-padding: var(--origam-list---indent-padding-nav, -8px);
 		}

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

@@ -626,7 +626,12 @@ defineExpose({
 		}
 
 		&--nav {
-			--origam-list-item---padding-inline: 8px;
+			// ⛔ #934 — same dead name as `.origam-list--nav` carried:
+			// `--origam-list-item---padding-inline` is read nowhere. The base
+			// rule reads the two longhands, inside a `calc()` that also folds
+			// in indent and density, so they go in here under the same names.
+			--origam-list-item---padding-inline-start: var(--origam-space---2, 8px);
+			--origam-list-item---padding-inline-end: var(--origam-space---2, 8px);
 
 			&:not(:only-child) {
 				--origam-list-item---margin-block-end: 4px;

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

@@ -473,6 +473,44 @@ defineExpose({
           }
         }
       }
+
+      /*
+       * ⛔ MEASURED (Chromium, /why-origam demo, all 8 marketing identities,
+       * light + dark, checked + unchecked): `OrigamSelectionControl`'s shared
+       * `&--focus-visible` rule draws its outline on
+       * `.origam-selection-control__input` — a ~28px square hit-area that is
+       * a SIBLING of `.origam-switch-track` (rendered via the `default`
+       * slot), never a descendant. The track's `overflow: hidden` therefore
+       * can never clip that outline, and because the square hit-area is
+       * already taller than the track (24px default / 32px inset) and offset
+       * by the thumb's hardcoded ±10px `translateX`, the ring visibly
+       * detaches from the track: 8px past its top/bottom edge and 8px past
+       * whichever side the thumb isn't currently near (right when ON, left
+       * when OFF) on every identity, `material` included — its own
+       * screenshot simply wasn't captured while focused.
+       *
+       * For Checkbox/Radio the square hit-area IS the visible control, so
+       * the shared rule is correct there and stays untouched
+       * (`OrigamSelectionControl.vue` is not modified). For Switch the
+       * visible control is the elongated track, so the ring is moved onto
+       * `.origam-switch-track` instead — same two tokens the shared rule
+       * already reads (`--origam-border__width---2`,
+       * `--origam-color__border---focus`), just retargeted to the shape a
+       * switch actually is. Native `outline` already follows an element's
+       * own `border-radius` in every supported browser, so the ring traces
+       * the track's real shape (pill / rounded / square per `rounded` prop)
+       * with no extra CSS.
+       */
+      &--focus-visible {
+        :deep(.origam-selection-control__input) {
+          outline: none;
+        }
+
+        :deep(.origam-switch-track) {
+          outline: var(--origam-border__width---2, 2px) solid var(--origam-color__border---focus, currentColor);
+          outline-offset: var(--origam-space---1, 2px);
+        }
+      }
     }
 
     &.origam-input {

package/package.json

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