origam 2.18.5 → 2.18.7

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

@@ -253,7 +253,7 @@
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
-  --origam-btn---height: 36px;
+  --origam-btn---height: var(--origam-btn---height-md, 36px);
   --origam-btn---max-height: 100%;
   --origam-btn---height-xs: 20px;
   --origam-btn---height-sm: 28px;
@@ -780,7 +780,7 @@
   --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
   --origam-toolbar---max-width: 100%;
   --origam-toolbar---width: 100%;
-  --origam-toolbar---height: var(--origam-space---14);
+  --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
   --origam-toolbar---height-compact: var(--origam-space---10);
   --origam-toolbar---height-default: var(--origam-space---14);
   --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -2064,7 +2064,7 @@
   --origam-picker---z-index: var(--origam-zIndex---dropdown);
   --origam-picker---transition-duration: var(--origam-motion__duration---medium);
   --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-  --origam-picker-title---color: var(--origam-color__text---secondary);
+  --origam-picker-title---color: currentColor;
   --origam-picker-title---font-size: 0.75rem;
   --origam-picker-title---font-weight: 400;
   --origam-picker-title---letter-spacing: 0.1667em;
@@ -2833,11 +2833,11 @@
   --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
   --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
   --origam-chart-range-selector__btn--hover---color: #111827;
-  --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+  --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
   --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-  --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-  --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+  --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+  --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
   --origam-chart-sparkline__bar---border-radius: 1;
   --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
   --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);
@@ -2989,7 +2989,7 @@
     --origam-btn---width: auto;
     --origam-btn---min-width: 64px;
     --origam-btn---max-width: 100%;
-    --origam-btn---height: 36px;
+    --origam-btn---height: var(--origam-btn---height-md, 36px);
     --origam-btn---max-height: 100%;
     --origam-btn---height-xs: 20px;
     --origam-btn---height-sm: 28px;
@@ -3516,7 +3516,7 @@
     --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
     --origam-toolbar---max-width: 100%;
     --origam-toolbar---width: 100%;
-    --origam-toolbar---height: var(--origam-space---14);
+    --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
     --origam-toolbar---height-compact: var(--origam-space---10);
     --origam-toolbar---height-default: var(--origam-space---14);
     --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -4800,7 +4800,7 @@
     --origam-picker---z-index: var(--origam-zIndex---dropdown);
     --origam-picker---transition-duration: var(--origam-motion__duration---medium);
     --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-    --origam-picker-title---color: var(--origam-color__text---secondary);
+    --origam-picker-title---color: currentColor;
     --origam-picker-title---font-size: 0.75rem;
     --origam-picker-title---font-weight: 400;
     --origam-picker-title---letter-spacing: 0.1667em;
@@ -5569,11 +5569,11 @@
     --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
     --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
     --origam-chart-range-selector__btn--hover---color: #111827;
-    --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+    --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
     --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-    --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-    --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-    --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+    --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+    --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+    --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
     --origam-chart-sparkline__bar---border-radius: 1;
     --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
     --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);

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

@@ -155,7 +155,7 @@
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
-  --origam-btn---height: 36px;
+  --origam-btn---height: var(--origam-btn---height-md, 36px);
   --origam-btn---max-height: 100%;
   --origam-btn---height-xs: 20px;
   --origam-btn---height-sm: 28px;
@@ -682,7 +682,7 @@
   --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
   --origam-toolbar---max-width: 100%;
   --origam-toolbar---width: 100%;
-  --origam-toolbar---height: var(--origam-space---14);
+  --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
   --origam-toolbar---height-compact: var(--origam-space---10);
   --origam-toolbar---height-default: var(--origam-space---14);
   --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -1968,7 +1968,7 @@
   --origam-picker---z-index: var(--origam-zIndex---dropdown);
   --origam-picker---transition-duration: var(--origam-motion__duration---medium);
   --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-  --origam-picker-title---color: var(--origam-color__text---secondary);
+  --origam-picker-title---color: currentColor;
   --origam-picker-title---font-size: 0.75rem;
   --origam-picker-title---font-weight: 400;
   --origam-picker-title---letter-spacing: 0.1667em;
@@ -2737,11 +2737,11 @@
   --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
   --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
   --origam-chart-range-selector__btn--hover---color: #111827;
-  --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+  --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
   --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-  --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-  --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+  --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+  --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
   --origam-chart-sparkline__bar---border-radius: 1;
   --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
   --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);

package/dist/src/assets/css/tokens/origam-utilities.css

@@ -23,22 +23,40 @@
 /* import below the component layer.                         */
 
 /* ── Foreground color (intent) ───────────────────────────────── */
-.origam--color-primary { color: var(--origam-color__action--primary---fg); }
+/*                                                                */
+/* The intent's own colour, AS TEXT, on a neutral surface. These  */
+/* MUST mirror `tokenForegroundForIntent()`                       */
+/* (utils/Commons/color.util.ts) — that helper is what the inline */
+/* `color:` declaration uses for the very same `color="{intent}"` */
+/* prop, and an inline declaration outranks this class. Reading   */
+/* `---fg` here made the two channels disagree on 5 of 7 intents: */
+/* `---fg` is the on-intent foreground (white), legible only ON   */
+/* the saturated `---bg`, so a standalone `.origam--color-primary` */
+/* painted white-on-white. Pair it with `.origam--bg-*` below     */
+/* when you want the on-intent foreground instead. See #818.      */
+.origam--color-primary { color: var(--origam-color__action--primary---fgSubtle); }
 .origam--color-secondary { color: var(--origam-color__action--secondary---fg); }
-.origam--color-success { color: var(--origam-color__feedback--success---fg); }
-.origam--color-warning { color: var(--origam-color__feedback--warning---fg); }
-.origam--color-danger { color: var(--origam-color__feedback--danger---fg); }
-.origam--color-info { color: var(--origam-color__feedback--info---fg); }
+.origam--color-success { color: var(--origam-color__feedback--success---fgSubtle); }
+.origam--color-warning { color: var(--origam-color__feedback--warning---fgSubtle); }
+.origam--color-danger { color: var(--origam-color__feedback--danger---fgSubtle); }
+.origam--color-info { color: var(--origam-color__feedback--info---fgSubtle); }
 .origam--color-neutral { color: var(--origam-color__text---primary); }
 
 /* ── Background color (intent) ───────────────────────────────── */
-.origam--bg-primary { background-color: var(--origam-color__action--primary---bg); }
-.origam--bg-secondary { background-color: var(--origam-color__action--secondary---bg); }
-.origam--bg-success { background-color: var(--origam-color__feedback--success---bg); }
-.origam--bg-warning { background-color: var(--origam-color__feedback--warning---bg); }
-.origam--bg-danger { background-color: var(--origam-color__feedback--danger---bg); }
-.origam--bg-info { background-color: var(--origam-color__feedback--info---bg); }
-.origam--bg-neutral { background-color: var(--origam-color__surface---default); }
+/*                                                                */
+/* Each intent surface carries its PAIRED on-intent foreground,   */
+/* the same auto-pairing `useColor()` already performs on the     */
+/* inline channel ("lets `bgColor=primary` alone auto-pair the    */
+/* right text colour"). Without it, `.origam--bg-primary` on bare */
+/* markup inherited the page's dark ink onto a saturated surface. */
+/* Every pair below is >= 4.5:1 in the light token set. See #818. */
+.origam--bg-primary { background-color: var(--origam-color__action--primary---bg); color: var(--origam-color__action--primary---fg); }
+.origam--bg-secondary { background-color: var(--origam-color__action--secondary---bg); color: var(--origam-color__action--secondary---fg); }
+.origam--bg-success { background-color: var(--origam-color__feedback--success---bg); color: var(--origam-color__feedback--success---fg); }
+.origam--bg-warning { background-color: var(--origam-color__feedback--warning---bg); color: var(--origam-color__feedback--warning---fg); }
+.origam--bg-danger { background-color: var(--origam-color__feedback--danger---bg); color: var(--origam-color__feedback--danger---fg); }
+.origam--bg-info { background-color: var(--origam-color__feedback--info---bg); color: var(--origam-color__feedback--info---fg); }
+.origam--bg-neutral { background-color: var(--origam-color__surface---default); color: var(--origam-color__text---primary); }
 
 /* ── Elevation (box-shadow) ───────────────────────────────── */
 .origam--shadow-none { box-shadow: var(--origam-shadow---none); }

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

@@ -253,7 +253,7 @@
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
-  --origam-btn---height: 36px;
+  --origam-btn---height: var(--origam-btn---height-md, 36px);
   --origam-btn---max-height: 100%;
   --origam-btn---height-xs: 20px;
   --origam-btn---height-sm: 28px;
@@ -780,7 +780,7 @@
   --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
   --origam-toolbar---max-width: 100%;
   --origam-toolbar---width: 100%;
-  --origam-toolbar---height: var(--origam-space---14);
+  --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
   --origam-toolbar---height-compact: var(--origam-space---10);
   --origam-toolbar---height-default: var(--origam-space---14);
   --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -2064,7 +2064,7 @@
   --origam-picker---z-index: var(--origam-zIndex---dropdown);
   --origam-picker---transition-duration: var(--origam-motion__duration---medium);
   --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-  --origam-picker-title---color: var(--origam-color__text---secondary);
+  --origam-picker-title---color: currentColor;
   --origam-picker-title---font-size: 0.75rem;
   --origam-picker-title---font-weight: 400;
   --origam-picker-title---letter-spacing: 0.1667em;
@@ -2833,11 +2833,11 @@
   --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
   --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
   --origam-chart-range-selector__btn--hover---color: #111827;
-  --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+  --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
   --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-  --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-  --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+  --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+  --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
   --origam-chart-sparkline__bar---border-radius: 1;
   --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
   --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);
@@ -2989,7 +2989,7 @@
     --origam-btn---width: auto;
     --origam-btn---min-width: 64px;
     --origam-btn---max-width: 100%;
-    --origam-btn---height: 36px;
+    --origam-btn---height: var(--origam-btn---height-md, 36px);
     --origam-btn---max-height: 100%;
     --origam-btn---height-xs: 20px;
     --origam-btn---height-sm: 28px;
@@ -3516,7 +3516,7 @@
     --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
     --origam-toolbar---max-width: 100%;
     --origam-toolbar---width: 100%;
-    --origam-toolbar---height: var(--origam-space---14);
+    --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
     --origam-toolbar---height-compact: var(--origam-space---10);
     --origam-toolbar---height-default: var(--origam-space---14);
     --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -4800,7 +4800,7 @@
     --origam-picker---z-index: var(--origam-zIndex---dropdown);
     --origam-picker---transition-duration: var(--origam-motion__duration---medium);
     --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-    --origam-picker-title---color: var(--origam-color__text---secondary);
+    --origam-picker-title---color: currentColor;
     --origam-picker-title---font-size: 0.75rem;
     --origam-picker-title---font-weight: 400;
     --origam-picker-title---letter-spacing: 0.1667em;
@@ -5569,11 +5569,11 @@
     --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
     --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
     --origam-chart-range-selector__btn--hover---color: #111827;
-    --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+    --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
     --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-    --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-    --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-    --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+    --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+    --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+    --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
     --origam-chart-sparkline__bar---border-radius: 1;
     --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
     --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);

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

@@ -155,7 +155,7 @@
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
-  --origam-btn---height: 36px;
+  --origam-btn---height: var(--origam-btn---height-md, 36px);
   --origam-btn---max-height: 100%;
   --origam-btn---height-xs: 20px;
   --origam-btn---height-sm: 28px;
@@ -682,7 +682,7 @@
   --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
   --origam-toolbar---max-width: 100%;
   --origam-toolbar---width: 100%;
-  --origam-toolbar---height: var(--origam-space---14);
+  --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
   --origam-toolbar---height-compact: var(--origam-space---10);
   --origam-toolbar---height-default: var(--origam-space---14);
   --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -1968,7 +1968,7 @@
   --origam-picker---z-index: var(--origam-zIndex---dropdown);
   --origam-picker---transition-duration: var(--origam-motion__duration---medium);
   --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-  --origam-picker-title---color: var(--origam-color__text---secondary);
+  --origam-picker-title---color: currentColor;
   --origam-picker-title---font-size: 0.75rem;
   --origam-picker-title---font-weight: 400;
   --origam-picker-title---letter-spacing: 0.1667em;
@@ -2737,11 +2737,11 @@
   --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
   --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
   --origam-chart-range-selector__btn--hover---color: #111827;
-  --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+  --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
   --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-  --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-  --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+  --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+  --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
   --origam-chart-sparkline__bar---border-radius: 1;
   --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
   --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);

package/dist/src/assets/scss/tokens/_origam-utilities.scss

@@ -23,22 +23,40 @@
 /* import below the component layer.                         */
 
 /* ── Foreground color (intent) ───────────────────────────────── */
-.origam--color-primary { color: var(--origam-color__action--primary---fg); }
+/*                                                                */
+/* The intent's own colour, AS TEXT, on a neutral surface. These  */
+/* MUST mirror `tokenForegroundForIntent()`                       */
+/* (utils/Commons/color.util.ts) — that helper is what the inline */
+/* `color:` declaration uses for the very same `color="{intent}"` */
+/* prop, and an inline declaration outranks this class. Reading   */
+/* `---fg` here made the two channels disagree on 5 of 7 intents: */
+/* `---fg` is the on-intent foreground (white), legible only ON   */
+/* the saturated `---bg`, so a standalone `.origam--color-primary` */
+/* painted white-on-white. Pair it with `.origam--bg-*` below     */
+/* when you want the on-intent foreground instead. See #818.      */
+.origam--color-primary { color: var(--origam-color__action--primary---fgSubtle); }
 .origam--color-secondary { color: var(--origam-color__action--secondary---fg); }
-.origam--color-success { color: var(--origam-color__feedback--success---fg); }
-.origam--color-warning { color: var(--origam-color__feedback--warning---fg); }
-.origam--color-danger { color: var(--origam-color__feedback--danger---fg); }
-.origam--color-info { color: var(--origam-color__feedback--info---fg); }
+.origam--color-success { color: var(--origam-color__feedback--success---fgSubtle); }
+.origam--color-warning { color: var(--origam-color__feedback--warning---fgSubtle); }
+.origam--color-danger { color: var(--origam-color__feedback--danger---fgSubtle); }
+.origam--color-info { color: var(--origam-color__feedback--info---fgSubtle); }
 .origam--color-neutral { color: var(--origam-color__text---primary); }
 
 /* ── Background color (intent) ───────────────────────────────── */
-.origam--bg-primary { background-color: var(--origam-color__action--primary---bg); }
-.origam--bg-secondary { background-color: var(--origam-color__action--secondary---bg); }
-.origam--bg-success { background-color: var(--origam-color__feedback--success---bg); }
-.origam--bg-warning { background-color: var(--origam-color__feedback--warning---bg); }
-.origam--bg-danger { background-color: var(--origam-color__feedback--danger---bg); }
-.origam--bg-info { background-color: var(--origam-color__feedback--info---bg); }
-.origam--bg-neutral { background-color: var(--origam-color__surface---default); }
+/*                                                                */
+/* Each intent surface carries its PAIRED on-intent foreground,   */
+/* the same auto-pairing `useColor()` already performs on the     */
+/* inline channel ("lets `bgColor=primary` alone auto-pair the    */
+/* right text colour"). Without it, `.origam--bg-primary` on bare */
+/* markup inherited the page's dark ink onto a saturated surface. */
+/* Every pair below is >= 4.5:1 in the light token set. See #818. */
+.origam--bg-primary { background-color: var(--origam-color__action--primary---bg); color: var(--origam-color__action--primary---fg); }
+.origam--bg-secondary { background-color: var(--origam-color__action--secondary---bg); color: var(--origam-color__action--secondary---fg); }
+.origam--bg-success { background-color: var(--origam-color__feedback--success---bg); color: var(--origam-color__feedback--success---fg); }
+.origam--bg-warning { background-color: var(--origam-color__feedback--warning---bg); color: var(--origam-color__feedback--warning---fg); }
+.origam--bg-danger { background-color: var(--origam-color__feedback--danger---bg); color: var(--origam-color__feedback--danger---fg); }
+.origam--bg-info { background-color: var(--origam-color__feedback--info---bg); color: var(--origam-color__feedback--info---fg); }
+.origam--bg-neutral { background-color: var(--origam-color__surface---default); color: var(--origam-color__text---primary); }
 
 /* ── Elevation (box-shadow) ───────────────────────────────── */
 .origam--shadow-none { box-shadow: var(--origam-shadow---none); }

package/dist/src/components/Alert/OrigamAlert.vue

@@ -421,10 +421,6 @@ defineExpose({
       --origam-alert---density: -8px;
     }
 
-    &--density-default {
-      --origam-alert---density: 0px;
-    }
-
     &--density-compact {
       --origam-alert---density: 8px;
     }

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

@@ -551,9 +551,6 @@ defineExpose({
 		}
 
 		&--size-default {
-			--origam-btn---height: var(--origam-btn---height-md, 36px);
-			--origam-btn---font-size: 0.875rem;
-			--origam-btn---min-width: 64px;
 			padding: 0 calc(var(--origam-btn---padding-md, 16px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
@@ -589,7 +586,6 @@ defineExpose({
 		}
 
 		&--density-default {
-			--origam-btn---density: 0px;
 			--origam-btn---density-padding-x: 0px;
 		}
 

package/dist/src/components/Calendar/OrigamCalendar.vue

@@ -88,6 +88,8 @@
     <div
       v-if="resolvedView === CALENDAR_VIEW.MONTH"
       class="origam-calendar__body origam-calendar__body--month"
+      role="grid"
+      :aria-label="ariaMonthLabel"
       data-cy="origam-calendar-body-month"
     >
       <div
@@ -110,8 +112,6 @@
       </div>
       <div
         class="origam-calendar__month-grid"
-        role="grid"
-        :aria-label="ariaMonthLabel"
       >
         <div
           v-for="(weekRow, rowIndex) in monthGrid"

package/dist/src/components/Chart/OrigamChartMap.vue

@@ -83,7 +83,7 @@
 							:data-cy="`origam-chart-map-country-${ country.code }`"
 							:tabindex="country.hasData ? 0 : -1"
 							:role="country.hasData ? 'button' : undefined"
-							:aria-label="countryAriaLabel(country)"
+							:aria-label="country.hasData ? countryAriaLabel(country) : undefined"
 							@click="onCountryActivate(country, $event)"
 							@keydown.enter.prevent="onCountryActivate(country, $event)"
 							@keydown.space.prevent="onCountryActivate(country, $event)"

package/dist/src/components/Chip/OrigamChip.vue

@@ -637,9 +637,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style lang="scss" scoped>
-	.origam-chip {
-		--origam-chip---density: 0px;
-	}
-</style>

package/dist/src/components/DataTable/OrigamDataTable.vue

@@ -422,7 +422,24 @@ defineExpose({
 		}
 
 		&--loading {
-			&:deep(.origam-data-table-cell) {
+			/*********************************************************
+			 * #818 — le voile de chargement epargne les EN-TETES
+			 *
+			 * @description
+			 * Un libelle de colonne n'est pas la donnee en cours de
+			 * rafraichissement : c'est la structure du tableau, elle
+			 * reste lisible pendant le chargement. Le voile s'applique
+			 * donc au corps, pas a l'en-tete.
+			 *
+			 * @description
+			 * Mesure axe-core (Chromium, theme origam clair) : l'en-tete
+			 * peint `--origam-color__action--primary---fgSubtle`
+			 * (#6d28d9) ; a 0.5 sur blanc il composite en #b694ec, soit
+			 * 2.38:1 — tres sous les 4.5:1 de l'AA. Remonter l'opacite ne
+			 * sauve pas la regle : il faudrait >= 0.82 pour repasser AA,
+			 * et un voile a 0.82 n'est plus un voile.
+			 ********************************************************/
+			&:deep(.origam-data-table-cell:not(.origam-data-table-header-cell)) {
 				opacity: var(--origam-data-table--loading---opacity, var(--origam-data-table__loading---opacity, 0.5));
 			}
 		}

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

@@ -1021,10 +1021,18 @@ defineExpose({
 				border-radius: var(--origam-field---border-radius, 8px) var(--origam-field---border-radius, 8px) 0 0;
 				--origam-field__input---padding-top: var(--origam-field__input---padding-block-filled);
 
+				// #818 — meme correctif que les variantes `outlined` /
+				// `underlined` : l'alpha du trait passe sur `border-color`,
+				// sans quoi le groupe de composition delave le label flottant
+				// monte dans `__outline--notch`.
 				#{$this}__outlines {
 					#{$this}__outline {
-						border-bottom: 1px solid var(--origam-field---border-color, currentColor);
-						opacity: var(--origam-field--variant-filled---border-opacity, 0.42);
+						border-bottom: 1px solid color-mix(
+							in srgb,
+							var(--origam-field---border-color, currentColor)
+							calc(var(--origam-field--variant-filled---border-opacity, .42) * 100%),
+							transparent
+						);
 					}
 				}
 
@@ -1032,7 +1040,7 @@ defineExpose({
 				&#{$this}--focused {
 					#{$this}__outlines {
 						#{$this}__outline {
-							opacity: 1;
+							border-bottom-color: var(--origam-field---border-color, currentColor);
 						}
 					}
 				}
@@ -1065,9 +1073,32 @@ defineExpose({
 				background: var(--origam-field---background-color, var(--origam-field---variant-outlined-background-color, transparent));
 
 				#{$this}__outline {
-					border-color: var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor));
+					/*********************************************************
+					 * #818 — l'alpha du trait vit sur la COULEUR, pas sur la boite
+					 *
+					 * @description
+					 * `opacity` sur `__outline` cree un groupe de composition
+					 * qui delave TOUT le sous-arbre. Or `__outline--notch`
+					 * n'est pas vide : le label flottant y est monte (voir le
+					 * template). Le label heritait donc du .38 destine au seul
+					 * trait de bordure — mesure axe-core, Chromium :
+					 * #6d28d9 a .38 sur blanc = #c8adf1, soit 1.96:1, tres
+					 * sous les 4.5:1 de l'AA.
+					 *
+					 * @description
+					 * Porter l'alpha sur `border-color` rend EXACTEMENT le meme
+					 * trait (la boite n'a ni fond ni autre contenu peint :
+					 * `__outlines` est en `position: absolute` /
+					 * `pointer-events: none`, les pattes ne portent que des
+					 * bordures) et laisse le label a son opacite pleine.
+					 ********************************************************/
+					border-color: color-mix(
+						in srgb,
+						var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor))
+						calc(var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38)) * 100%),
+						transparent
+					);
 					border-style: var(--origam-field__outline---border-style, solid);
-					opacity: var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38));
 
 					&--start {
 						border-top-width: var(--origam-field---border-width);
@@ -1131,11 +1162,19 @@ defineExpose({
 				--origam-field---border-width: 1px;
 				--origam-field---border-opacity: .38;
 
+				// #818 — meme raison que la variante `outlined` ci-dessus :
+				// l'alpha passe sur `border-color` pour ne plus delaver le
+				// label flottant, enfant de `__outline--notch`. La transition
+				// suit la couleur puisque c'est elle qui porte desormais l'alpha.
 				#{$this}__outline {
-					border-color: var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor));
+					border-color: color-mix(
+						in srgb,
+						var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor))
+						calc(var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38)) * 100%),
+						transparent
+					);
 					border-style: var(--origam-field__outline---border-style, solid);
-					opacity: var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38));
-					transition: opacity var(--origam-field__outline---transition-duration, .25s) var(--origam-field__outline---transition-easing, cubic-bezier(.4, 0, .2, 1));
+					transition: border-color var(--origam-field__outline---transition-duration, .25s) var(--origam-field__outline---transition-easing, cubic-bezier(.4, 0, .2, 1));
 					border-width: 0;
 
 					&--start {

package/dist/src/components/InlineEdit/OrigamInlineEdit.vue

@@ -339,7 +339,7 @@ const handleFocusOut = (event) => {
   const next = event.relatedTarget;
   if (root && next instanceof Node && root.contains(next)) return;
   noteTransition(true);
-  void confirm();
+  confirm();
 };
 const restoreFocusAfterEdit = async () => {
   if (!restoreFocusOnLeave) return;
@@ -350,7 +350,7 @@ const restoreFocusAfterEdit = async () => {
 };
 watch(isEditing, async (next) => {
   if (!next) {
-    void restoreFocusAfterEdit();
+    restoreFocusAfterEdit();
     return;
   }
   if (!props.autoFocus) return;

package/dist/src/components/Kbd/OrigamKbd.vue

@@ -172,7 +172,6 @@ defineExpose({
 		&--variant-outlined,
 		&--variant-outlined &__key {
 			--origam-kbd---background-color: var(--origam-kbd--outlined---background-color, var(--origam-color__surface---raised, #fff));
-			--origam-kbd---border-color: var(--origam-color__border---subtle, #d4d4d4);
 			--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);

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

@@ -396,10 +396,6 @@ defineExpose({
 			--origam-list-group---prepend-width: var(--origam-list---slim-prepend-width, 28px);
 		}
 
-		&--density-default {
-			--origam-list---density: 0px;
-		}
-
 		&--density-compact {
 			--origam-list---density: -8px;
 		}

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

@@ -3,7 +3,9 @@
 			:is="tag"
 			:id="styleId"
 			v-contrast
+			:aria-labelledby="id"
 			:class="listGroupClasses"
+			:role="groupRole"
 			:style="listGroupStyles"
 	>
 		<origam-defaults-provider :defaults="slotDefaults">
@@ -65,6 +67,7 @@ import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import vContrast from "../../directives/Contrast/contrast.directive";
 import { omitUndefined } from "../../utils/Commons/commons.util";
+import { LIST_ITEM_ROLE } from "../../enums/List/list-item.enum";
 import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 const props = defineProps({
   collapseIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_UP },
@@ -147,6 +150,10 @@ const id = computed(() => `origam-list-group--id-${String(_id.value)}`);
 const list = useList();
 const { isBooted } = useSsrBoot();
 const transition = ref({ component: OrigamExpandY });
+const groupRole = computed(() => {
+  if (!list) return void 0;
+  return list.itemRole.value === LIST_ITEM_ROLE.OPTION ? "group" : LIST_ITEM_ROLE.LISTITEM;
+});
 const toggleIcon = computed(() => {
   if (isOpen.value) {
     return props.collapseIcon;

package/dist/src/components/RatingField/OrigamRatingField.vue

@@ -336,13 +336,13 @@ const eventState = computed(() => {
       if (!props.disabled && !props.readonly) {
         model.value = normalizedValue.value === value && props.clearable ? 0 : value;
       }
-      void nextTick(() => resyncRadios(e?.target));
+      nextTick(() => resyncRadios(e?.target));
     };
     const onChange = (e) => {
       if (!props.disabled && !props.readonly) {
         model.value = value;
       }
-      void nextTick(() => resyncRadios(e?.target));
+      nextTick(() => resyncRadios(e?.target));
     };
     return {
       onMouseenter: props.hover ? onMouseenter : void 0,