@mlola-ui/tokens 1.0.1 → 1.0.3

package/generated/accessibility.css

@@ -0,0 +1,9 @@
+/* Accessibility layer: last in the cascade, so these guarantees hold over any recipe. */
+/* On a touch screen, a text field smaller than 16px makes iOS zoom the page
+   when it takes focus, and the page stays zoomed after. Every field that
+   takes typing is at least 16px there; everything else keeps its size. */
+@media (pointer: coarse) {
+  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]), textarea, select, [contenteditable]:not([contenteditable="false"])) {
+    font-size: max(1rem, 1em);
+  }
+}

package/generated/foundations.css

@@ -113,10 +113,27 @@ h3 {
   opacity: .5;
 }
 
+/* Room for a fingertip on text fields, which grow with their content.
+   Buttons keep the shape their recipe draws: stretching a round or square
+   control only distorts it. Small ones widen their target invisibly instead
+   (see [data-hit] below), and every other button already clears the 24px
+   minimum of WCAG 2.5.8. */
 @media (pointer:coarse) {
-  :where(button,[role="button"],input:not([type="hidden"]),select,textarea) {
+  :where(input:not([type="hidden"],[type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"],[type="submit"],[type="button"],[type="reset"],[type="image"]),select,textarea):where(:not([data-shape="inline"])) {
     min-height: var(--ml-target-min);
   }
+
+  /* A control drawn smaller than a fingertip keeps its look and gains an
+     invisible target around it. */
+  :where([data-hit="expand"]) {
+    position: relative;
+  }
+
+  :where([data-hit="expand"])::after {
+    position: absolute;
+    inset: min(-0.375rem, calc((var(--ml-target-min) - 100%) / -2));
+    content: "";
+  }
 }
 
 @media (prefers-reduced-transparency:reduce) {
@@ -139,7 +156,7 @@ h3 {
     forced-color-adjust: auto;
   }
 
-  /* Box-shadow rings vanish in forced colours; the system highlight stands in. */
+  /* Box-shadow rings vanish in forced colors; the system highlight stands in. */
   :focus-visible {
     outline: 2px solid Highlight!important;
     outline-offset: 2px!important;

package/generated/mlola.css

@@ -8,3 +8,4 @@
 @import "./materials.css" layer(mlola.materials);
 @import "./recipes.css" layer(mlola.recipes);
 @import "./motion.css" layer(mlola.motion);
+@import "./accessibility.css" layer(mlola.accessibility);

package/generated/recipes.css

@@ -559,7 +559,7 @@
   border-radius: var(--ml-radius-xs);
   background: transparent;
   color: var(--ml-text);
-  text-align: left;
+  text-align: start;
   font-size: var(--ml-type-base);
   font-weight: 500;
   cursor: pointer;
@@ -822,7 +822,7 @@
   transition: opacity var(--ml-duration-fast) var(--ml-ease-standard), transform var(--ml-duration-normal) var(--ml-ease-standard);
 }
 
-/* A solid mark in the tone, centred on the first line of text. */
+/* A solid mark in the tone, centered on the first line of text. */
 .ml-alert-icon {
   position: relative;
   display: inline-grid;
@@ -1302,7 +1302,7 @@
   font-size: var(--ml-type-sm);
 }
 
-/* Tone picks the colour role; variant decides how it is worn. */
+/* Tone picks the color role; variant decides how it is worn. */
 .ml-badge[data-tone="primary"] {
   --ml-badge-tone: var(--ml-primary);
   --ml-badge-text: var(--ml-primary-text);
@@ -1492,7 +1492,7 @@
 }
 
 /* A toggle button that is on reads as filled ink, so its state is visible
-   without relying on colour alone. */
+   without relying on color alone. */
 .ml-button[data-variant="secondary"][aria-pressed="true"],
 .ml-button[data-variant="subtle"][aria-pressed="true"],
 .ml-button[data-variant="outline"][aria-pressed="true"] {
@@ -1579,7 +1579,7 @@
   width: .875rem;
   height: .875rem;
   border: 1.5px solid currentColor;
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
   border-radius: 50%;
   animation: ml-spin .7s linear infinite;
 }
@@ -1596,7 +1596,7 @@
 }
 
 /* A shortcut inside a filled button takes the button's own ink: an outline
-   of the text colour, no fill of its own, so it reads on any variant. */
+   of the text color, no fill of its own, so it reads on any variant. */
 .ml-button .ml-kbd {
   border-color: color-mix(in oklab, currentColor 40%, transparent);
   background: transparent;
@@ -1608,6 +1608,9 @@
 .ml-calendar {
   --ml-calendar-day: 2.25rem;
   display: inline-grid;
+  /* One column no wider than the calendar, so two months wrap into a stack
+     when the space is narrower than both side by side. */
+  grid-template-columns: minmax(0, 1fr);
   width: max-content;
   max-width: 100%;
   color: var(--ml-text);
@@ -1835,7 +1838,7 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background: linear-gradient(135deg,oklch(1 0 0/.18),transparent 46%,oklch(0 0 0/.05));
+  background: var(--ml-sheen);
 }
 
 .ml-card-header {
@@ -2188,6 +2191,7 @@
   position: relative;
   height: 9.5rem;
   border-radius: var(--ml-radius-md);
+  /* audit-allow: color.literal — this is the color model itself: value falls to black, saturation to white. */
   background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--ml-color-hue);
   cursor: crosshair;
   outline: none;
@@ -2235,16 +2239,16 @@
   position: absolute;
   width: 1rem;
   height: 1rem;
-  border: 2.5px solid #fff;
+  border: 2.5px solid var(--ml-knob);
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), 0 1px 4px rgb(0 0 0 / 0.3);
+  box-shadow: var(--ml-knob-shadow);
   pointer-events: none;
   translate: -50% -50%;
 }
 
 .ml-color-picker-area:focus-visible > .ml-color-picker-thumb,
 .ml-color-picker-track:focus-visible > .ml-color-picker-thumb {
-  box-shadow: 0 0 0 2px var(--ml-focus), 0 1px 4px rgb(0 0 0 / 0.3);
+  box-shadow: 0 0 0 2px var(--ml-focus), 0 1px 4px var(--ml-shadow-tint);
 }
 
 .ml-color-picker-row {
@@ -2455,7 +2459,8 @@
 .ml-combobox-list {
   display: grid;
   gap: var(--ml-space-0-5);
-  max-height: 16rem;
+  /* Never taller than the visible room beside the field (set when it opens). */
+  max-height: min(16rem, var(--ml-combobox-room, 16rem));
   margin: 0;
   padding: 0;
   overflow-y: auto;
@@ -2569,6 +2574,7 @@
   flex: 1;
   min-width: 0;
   border: 0;
+  /* audit-allow: focus.removed — the search field is the open dialog's only field; its caret shows focus. */
   outline: none;
   background: transparent;
   color: var(--ml-text);
@@ -2688,6 +2694,7 @@
   border-radius: var(--ml-radius-lg);
   box-shadow: var(--ml-surface-highlight), var(--ml-shadow-lg);
   color: var(--ml-text);
+  /* audit-allow: focus.removed — a menu container, focused only by script (tabindex -1); its items carry the focus style. */
   outline: none;
   background-color: color-mix(in oklab, var(--ml-surface-elevated) var(--ml-surface-alpha), transparent);
   background-image: var(--ml-surface-grain);
@@ -2981,7 +2988,7 @@
   color: var(--ml-text);
   font-size: var(--ml-type-sm);
   font-weight: 400;
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   cursor: pointer;
 }
@@ -3271,6 +3278,7 @@
 /* components/input */
 .ml-input-field {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--ml-space-1-5);
   width: 100%;
 }
@@ -3646,12 +3654,16 @@
 /* components/otp-input */
 .ml-otp {
   display: flex;
+  max-width: 100%;
   align-items: center;
   gap: var(--ml-space-2);
 }
 
+/* Boxes give a little way on the narrowest phones instead of running past the edge. */
 .ml-otp-box {
+  flex: 0 1 var(--ml-control-lg);
   width: var(--ml-control-lg);
+  min-width: 2rem;
   height: calc(var(--ml-control-lg) * 1.15);
   padding: 0;
   border: var(--ml-border-width) solid var(--ml-border);
@@ -3682,6 +3694,7 @@
 }
 
 .ml-otp-separator {
+  flex: none;
   width: var(--ml-space-2);
   height: 2px;
   border-radius: var(--ml-radius-pill);
@@ -3816,7 +3829,7 @@
 }
 
 .ml-priority-icon[data-priority="urgent"] {
-  color: var(--ml-danger);
+  color: var(--ml-danger-text);
 }
 
 .ml-priority-icon[data-priority="high"] {
@@ -4404,7 +4417,7 @@
   border-radius: var(--ml-radius-md);
   box-shadow: var(--ml-shadow-xs);
   cursor: pointer;
-  text-align: left;
+  text-align: start;
   transition: border-color var(--ml-duration-fast),box-shadow var(--ml-duration-fast);
 }
 
@@ -4439,7 +4452,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  text-align: left;
+  text-align: start;
 }
 
 .ml-select-chips {
@@ -4528,6 +4541,7 @@
   border-radius: var(--ml-radius-sm);
   background: transparent;
   font-size: var(--ml-type-sm);
+  /* audit-allow: focus.removed — the search field inside an open listbox; its caret shows focus. */
   outline: none;
 }
 
@@ -4567,7 +4581,7 @@
   background: transparent;
   color: var(--ml-text);
   font-size: var(--ml-type-sm);
-  text-align: left;
+  text-align: start;
   cursor: pointer;
 }
 
@@ -4822,7 +4836,7 @@
 }
 
 /* Each line is one line box of the surrounding text: a bar about the height
-   of lowercase letters, centred in 1lh. */
+   of lowercase letters, centered in 1lh. */
 .ml-skeleton-line {
   height: 0.62em;
   margin-block: calc((1lh - 0.62em) / 2);
@@ -4948,7 +4962,7 @@
   height: var(--ml-space-4);
   border: var(--ml-border-width) solid color-mix(in oklab,var(--ml-primary) 45%,var(--ml-border));
   border-radius: 50%;
-  background: oklch(1 0 0);
+  background: var(--ml-knob);
   box-shadow: var(--ml-shadow-sm);
   transform: translate(-50%,-50%);
   cursor: grab;
@@ -4968,7 +4982,7 @@
 }
 
 /* components/status-icon */
-/* Colour carries the stage; the glyph carries it without colour too. */
+/* Color carries the stage; the glyph carries it without color too. */
 .ml-status-icon {
   --ml-status-mark: var(--ml-surface);
   flex: none;
@@ -4981,14 +4995,16 @@
 }
 
 .ml-status-icon[data-status="in-progress"] {
-  color: var(--ml-warning);
+  color: var(--ml-warning-text);
 }
 
 .ml-status-icon[data-status="in-review"] {
-  color: var(--ml-success);
+  color: var(--ml-success-text);
 }
 
+/* Done is a filled disc carrying its check in the foreground: a fill and its pair. */
 .ml-status-icon[data-status="done"] {
+  /* audit-allow: color.role — the disc is a fill; its mark takes --ml-primary-foreground. */
   color: var(--ml-primary);
   --ml-status-mark: var(--ml-primary-foreground);
 }
@@ -5029,7 +5045,7 @@
 }
 
 /* Horizontal: the connector is a flex item after the step, level with the
-   marker's centre, and fills once the step is done. */
+   marker's center, and fills once the step is done. */
 .ml-stepper[data-orientation="horizontal"] .ml-stepper-step:not(:last-child)::after {
   min-width: var(--ml-space-4);
   height: 2px;
@@ -5216,7 +5232,7 @@ button.ml-stepper-target:focus-visible {
 .ml-table {
   width: 100%;
   border-collapse: collapse;
-  text-align: left;
+  text-align: start;
   font-size: var(--ml-type-sm);
 }
 
@@ -5256,7 +5272,7 @@ button.ml-stepper-target:focus-visible {
 .ml-table [data-align="right"],
 .ml-table [data-align="end"],
 .ml-table [data-numeric] {
-  text-align: right;
+  text-align: end;
   font-variant-numeric: tabular-nums;
 }
 
@@ -5315,7 +5331,7 @@ button.ml-stepper-target:focus-visible {
   padding: var(--ml-space-3) var(--ml-space-4);
   color: var(--ml-text-muted);
   font-size: var(--ml-type-xs);
-  text-align: left;
+  text-align: start;
 }
 
 .ml-table-footer {
@@ -5351,6 +5367,7 @@ button.ml-stepper-target:focus-visible {
 /* components/tabs */
 .ml-tabs {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--ml-space-4);
   width: 100%;
 }
@@ -5745,7 +5762,7 @@ button.ml-stepper-target:focus-visible {
 
 /* components/timeline */
 /* A rail of markers and a column of text. Each item draws the segment of
-   rail below its own marker, so the line always runs through the centres,
+   rail below its own marker, so the line always runs through the centers,
    whatever each item holds, and fills in as the sequence progresses. */
 .ml-timeline {
   --ml-timeline-marker: 1.5rem;
@@ -5874,7 +5891,7 @@ button.ml-stepper-target:focus-visible {
   min-width: 0;
 }
 
-/* The heading row is as tall as the marker, so a one-line title sits on its centre. */
+/* The heading row is as tall as the marker, so a one-line title sits on its center. */
 .ml-timeline-heading {
   display: flex;
   flex-wrap: wrap;
@@ -6208,7 +6225,7 @@ button.ml-stepper-target:focus-visible {
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
-  background: oklch(1 0 0);
+  background: var(--ml-knob);
   box-shadow: var(--ml-shadow-sm);
   pointer-events: none;
   transition: transform var(--ml-duration-normal) var(--ml-ease-spring);
@@ -6373,11 +6390,12 @@ button.ml-stepper-target:focus-visible {
   background: var(--ml-surface-elevated);
   box-shadow: var(--ml-shadow-xl);
   color: var(--ml-text);
+  /* audit-allow: focus.removed — the tour card is focused by script (tabindex -1); its buttons carry the focus style. */
   outline: none;
   animation: ml-pop-in var(--ml-duration-fast) var(--ml-ease-spring);
 }
 
-.ml-tour-card[data-centred] {
+.ml-tour-card[data-centered] {
   top: 50%;
   left: 50%;
   translate: -50% -50%;

package/generated/tokens.css

@@ -91,6 +91,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.0304), 0 4.103px 13.32px -2px oklch(0 0 0 / 0.0608);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0266), 0 8.206px 23.68px -4px oklch(0 0 0 / 0.076);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0228), 0 15.044px 41.44px -8px oklch(0 0 0 / 0.095);
+  --ml-shadow-tint: oklch(0 0 0 / 0.0608);
   --ml-background: oklch(1 0 0);
   --ml-background-subtle: oklch(0.968 0.006 286);
   --ml-surface: oklch(1 0 0);
@@ -130,6 +131,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 :root[data-mode="dark"],
@@ -172,6 +177,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.079), 0 4.103px 13.32px -2px oklch(0 0 0 / 0.1581);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0692), 0 8.206px 23.68px -4px oklch(0 0 0 / 0.1976);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0593), 0 15.044px 41.44px -8px oklch(0 0 0 / 0.247);
+  --ml-shadow-tint: oklch(0 0 0 / 0.1581);
   --ml-focus: var(--ml-primary-text);
   --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
@@ -180,6 +186,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 @supports (transition-timing-function: linear(0, 1)) {
@@ -239,6 +249,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.0485), 0 6.378px 24.692px -2px oklch(0 0 0 / 0.0971);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0425), 0 12.756px 43.898px -4px oklch(0 0 0 / 0.1213);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0364), 0 23.387px 76.821px -8px oklch(0 0 0 / 0.1517);
+  --ml-shadow-tint: oklch(0 0 0 / 0.0971);
   --ml-background: oklch(0.972 0.016 80);
   --ml-background-subtle: oklch(0.94 0.02 80);
   --ml-surface: oklch(0.989 0.01 80);
@@ -278,6 +289,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 :root[data-theme="atelier"][data-mode="dark"],
@@ -319,6 +334,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.1262), 0 6.378px 24.692px -2px oklch(0 0 0 / 0.2524);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.1104), 0 12.756px 43.898px -4px oklch(0 0 0 / 0.3155);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0946), 0 23.387px 76.821px -8px oklch(0 0 0 / 0.3944);
+  --ml-shadow-tint: oklch(0 0 0 / 0.2524);
   --ml-focus: var(--ml-primary-text);
   --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
@@ -327,6 +343,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 @supports (transition-timing-function: linear(0, 1)) {
@@ -385,6 +405,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.0306), 0 3.828px 13.331px -2px oklch(0 0 0 / 0.0612);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0268), 0 7.655px 23.699px -4px oklch(0 0 0 / 0.0764);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0229), 0 14.034px 41.474px -8px oklch(0 0 0 / 0.0956);
+  --ml-shadow-tint: oklch(0 0 0 / 0.0612);
   --ml-background: oklch(0.994 0.003 240);
   --ml-background-subtle: oklch(0.962 0.006 240);
   --ml-surface: oklch(0.997 0.001 240);
@@ -424,6 +445,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 :root[data-theme="machined"][data-mode="dark"],
@@ -465,6 +490,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.0795), 0 3.828px 13.331px -2px oklch(0 0 0 / 0.159);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0696), 0 7.655px 23.699px -4px oklch(0 0 0 / 0.1988);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0596), 0 14.034px 41.474px -8px oklch(0 0 0 / 0.2485);
+  --ml-shadow-tint: oklch(0 0 0 / 0.159);
   --ml-focus: var(--ml-primary-text);
   --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
@@ -473,6 +499,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 @supports (transition-timing-function: linear(0, 1)) {
@@ -531,6 +561,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.0593), 0 9.818px 32.195px -2px oklch(0 0 0 / 0.1186);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0519), 0 19.636px 57.235px -4px oklch(0 0 0 / 0.1483);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0445), 0 35.999px 100.162px -8px oklch(0 0 0 / 0.1854);
+  --ml-shadow-tint: oklch(0 0 0 / 0.1186);
   --ml-background: oklch(0.986 0.007 260);
   --ml-background-subtle: oklch(0.954 0.022 260);
   --ml-surface: oklch(0.995 0.002 260);
@@ -570,6 +601,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 :root[data-theme="aerogel"][data-mode="dark"],
@@ -611,6 +646,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.1542), 0 9.818px 32.195px -2px oklch(0 0 0 / 0.3084);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.1349), 0 19.636px 57.235px -4px oklch(0 0 0 / 0.3855);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.1157), 0 35.999px 100.162px -8px oklch(0 0 0 / 0.4819);
+  --ml-shadow-tint: oklch(0 0 0 / 0.3084);
   --ml-focus: var(--ml-primary-text);
   --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
@@ -619,6 +655,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 @supports (transition-timing-function: linear(0, 1)) {
@@ -677,6 +717,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.0407), 0 4.887px 19.58px -2px oklch(0 0 0 / 0.0815);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0356), 0 9.775px 34.81px -4px oklch(0 0 0 / 0.1018);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0305), 0 17.92px 60.917px -8px oklch(0 0 0 / 0.1273);
+  --ml-shadow-tint: oklch(0 0 0 / 0.0815);
   --ml-background: oklch(0.969 0.018 135);
   --ml-background-subtle: oklch(0.937 0.023 135);
   --ml-surface: oklch(0.988 0.011 135);
@@ -716,6 +757,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 :root[data-theme="nordic"][data-mode="dark"],
@@ -757,6 +802,7 @@
   --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.1059), 0 4.887px 19.58px -2px oklch(0 0 0 / 0.2118);
   --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0927), 0 9.775px 34.81px -4px oklch(0 0 0 / 0.2647);
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0794), 0 17.92px 60.917px -8px oklch(0 0 0 / 0.3309);
+  --ml-shadow-tint: oklch(0 0 0 / 0.2118);
   --ml-focus: var(--ml-primary-text);
   --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
@@ -765,6 +811,10 @@
   --ml-control-border: var(--ml-text-faint);
   --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
   --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
 @supports (transition-timing-function: linear(0, 1)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/tokens",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Stable CSS entry for the framework-free Mlola UI design system",
   "main": "tokens.css",
   "sideEffects": [
@@ -19,7 +19,8 @@
     "./foundations.css": "./generated/foundations.css",
     "./materials.css": "./generated/materials.css",
     "./recipes.css": "./generated/recipes.css",
-    "./motion.css": "./generated/motion.css"
+    "./motion.css": "./generated/motion.css",
+    "./accessibility.css": "./generated/accessibility.css"
   },
   "license": "MIT",
   "author": "Mlola",