@mlola-ui/engine 1.1.26 → 1.2.0

package/generated/agents.json

@@ -117,7 +117,11 @@
         "--ml-space-10",
         "--ml-space-12",
         "--ml-space-14",
-        "--ml-space-16"
+        "--ml-space-16",
+        "--ml-space-fluid-sm",
+        "--ml-space-fluid-md",
+        "--ml-space-fluid-lg",
+        "--ml-space-fluid-xl"
       ]
     },
     {
@@ -132,6 +136,10 @@
         "--ml-type-lg",
         "--ml-type-xl",
         "--ml-type-2xl",
+        "--ml-type-display-sm",
+        "--ml-type-display-md",
+        "--ml-type-display-lg",
+        "--ml-type-display-xl",
         "--ml-leading-tight",
         "--ml-leading-snug",
         "--ml-leading-normal",
@@ -221,7 +229,7 @@
       ]
     }
   ],
-  "rules": "## Designing new UI in the Mlola language\n\nWhen the elements above do not cover what you need, build it the way they are\nbuilt, and it will look like it belongs.\n\n1. **Compose first.** Reach for a component, then a layout primitive, and\n   write CSS only for what neither covers. Put it in a layer of your own,\n   declared before `mlola.accessibility` so the accessibility guarantees\n   still win:\n   `@layer mlola.tokens, mlola.foundations, mlola.materials, mlola.recipes, mlola.motion, app, mlola.accessibility;`\n2. **Name what it is, not how it looks.** One class per element role, with\n   your own prefix (not `ml-`, so a later Mlola element never collides).\n   State and variant go in `data-*` and `aria-*`, never in a second class.\n   Reuse the shared words: `data-tone` is `neutral primary info success\n   warning danger`; `data-size` is `xs sm md lg xl`; work that went\n   wrong is `error`.\n3. **Color by role, never by value.** Planes are `background`,\n   `background-subtle`, `surface`, `surface-elevated`. Ink is `text`,\n   `text-muted`, `text-faint`. A colored fill (`primary`, `danger`, …)\n   always carries its `-foreground`. Colored text, icons, lines and status\n   marks on the page use the `-text` role: fills are only kept 1.5:1 from the\n   page, enough for an area, not for meaning. Series use `chart-1`…`chart-6`.\n4. **Measure with the scales.** Spacing from `--ml-space-*`, type from\n   `--ml-type-*` with `--ml-leading-*`, control heights from\n   `--ml-control-*`, panel padding from `--ml-panel-padding`. A `clamp()`\n   between two steps is fine; a value invented between them is not.\n5. **Shape and depth come from the theme.** Radii by the size of the thing\n   (`xs` a tag, `sm` a small control, `md` a control or card, `lg` a panel\n   or dialog, `pill`). Elevation from `--ml-shadow-*`; a floating surface\n   also takes the material: `--ml-surface-alpha`, `--ml-surface-blur`,\n   `--ml-surface-highlight`.\n6. **Move with the theme.** Durations from `--ml-duration-*`, easing from\n   `--ml-ease-*`. Reduced motion is handled by the engine.\n7. **Stack with the layers.** `--ml-layer-*`, never a raw z-index above 9.\n8. **Keep it usable by hand.** Never remove an outline without a\n   `:focus-visible` style in its place. Targets are at least 24px; a smaller\n   control adds `data-hit=\"expand\"` for touch. Text is never under\n   `--ml-type-2xs`.\n9. **Leave the theme alone.** `data-theme` and `data-mode` belong to the\n   engine; never set them for a component's own meaning, and never style a\n   theme or mode by name. If something must differ by theme, it is a token.\n",
+  "rules": "## Designing new UI in the Mlola language\n\nWhen the elements above do not cover what you need, build it the way they are\nbuilt, and it will look like it belongs.\n\n1. **Compose first.** Reach for a component, then a layout primitive, and\n   write CSS only for what neither covers. Put it in a layer of your own,\n   declared before `mlola.accessibility` so the accessibility guarantees\n   still win:\n   `@layer mlola.tokens, mlola.foundations, mlola.materials, mlola.recipes, mlola.motion, app, mlola.accessibility;`\n2. **Name what it is, not how it looks.** One class per element role, with\n   your own prefix (not `ml-`, so a later Mlola element never collides).\n   State and variant go in `data-*` and `aria-*`, never in a second class.\n   Reuse the shared words: `data-tone` is `neutral primary info success\n   warning danger`; `data-size` is `xs sm md lg xl`; work that went\n   wrong is `error`.\n3. **Color by role, never by value.** Planes are `background`,\n   `background-subtle`, `surface`, `surface-elevated`. Ink is `text`,\n   `text-muted`, `text-faint`. A colored fill (`primary`, `danger`, …)\n   always carries its `-foreground`. Colored text, icons, lines and status\n   marks on the page use the `-text` role: fills are only kept 1.5:1 from the\n   page, enough for an area, not for meaning. Series use `chart-1`…`chart-6`.\n4. **Measure with the scales.** Spacing from `--ml-space-*`, type from\n   `--ml-type-*` with `--ml-leading-*`, control heights from\n   `--ml-control-*`, panel padding from `--ml-panel-padding`. Space and\n   headings that grow with the window read the fluid steps\n   (`--ml-space-fluid-sm`…`-xl`, `--ml-type-display-sm`…`-xl`) instead of\n   a `clamp()` of their own; a length invented between the steps is not.\n5. **Shape and depth come from the theme.** Radii by the size of the thing\n   (`xs` a tag, `sm` a small control, `md` a control or card, `lg` a panel\n   or dialog, `pill`). Elevation from `--ml-shadow-*`; a floating surface\n   also takes the material: `--ml-surface-alpha`, `--ml-surface-blur`,\n   `--ml-surface-highlight`.\n6. **Move with the theme.** Durations from `--ml-duration-*`, easing from\n   `--ml-ease-*`. Reduced motion is handled by the engine.\n7. **Stack with the layers.** `--ml-layer-*`, never a raw z-index above 9.\n8. **Keep it usable by hand.** Never remove an outline without a\n   `:focus-visible` style in its place. Targets are at least 24px; a smaller\n   control adds `data-hit=\"expand\"` for touch. Text is never under\n   `--ml-type-2xs`.\n9. **Leave the theme alone.** `data-theme` and `data-mode` belong to the\n   engine; never set them for a component's own meaning, and never style a\n   theme or mode by name. If something must differ by theme, it is a token.\n",
   "primitives": [
     {
       "name": "ml-actions",

package/generated/agents.md

@@ -64,9 +64,9 @@ Values change with the theme and the mode, the names never do.
 - **Interaction and light.** Focus, hover and pressed fills, tracks, the veil behind overlays, light and knobs.
   `--ml-focus` `--ml-fill-hover` `--ml-fill-active` `--ml-track` `--ml-control-border` `--ml-ring` `--ml-scrim` `--ml-highlight` `--ml-knob` `--ml-knob-shadow` `--ml-sheen`
 - **Spacing.** The only spacing: gaps, padding, margins, offsets.
-  `--ml-space-px` `--ml-space-0-5` `--ml-space-1` `--ml-space-1-5` `--ml-space-2` `--ml-space-2-5` `--ml-space-3` `--ml-space-3-5` `--ml-space-4` `--ml-space-4-5` `--ml-space-5` `--ml-space-6` `--ml-space-7` `--ml-space-8` `--ml-space-9` `--ml-space-10` `--ml-space-12` `--ml-space-14` `--ml-space-16`
+  `--ml-space-px` `--ml-space-0-5` `--ml-space-1` `--ml-space-1-5` `--ml-space-2` `--ml-space-2-5` `--ml-space-3` `--ml-space-3-5` `--ml-space-4` `--ml-space-4-5` `--ml-space-5` `--ml-space-6` `--ml-space-7` `--ml-space-8` `--ml-space-9` `--ml-space-10` `--ml-space-12` `--ml-space-14` `--ml-space-16` `--ml-space-fluid-sm` `--ml-space-fluid-md` `--ml-space-fluid-lg` `--ml-space-fluid-xl`
 - **Type.** The only type sizes, line heights, families and weights.
-  `--ml-type-2xs` `--ml-type-xs` `--ml-type-sm` `--ml-type-base` `--ml-type-md` `--ml-type-lg` `--ml-type-xl` `--ml-type-2xl` `--ml-leading-tight` `--ml-leading-snug` `--ml-leading-normal` `--ml-font-sans` `--ml-font-display` `--ml-font-mono` `--ml-display-weight` `--ml-body-leading` `--ml-tracking`
+  `--ml-type-2xs` `--ml-type-xs` `--ml-type-sm` `--ml-type-base` `--ml-type-md` `--ml-type-lg` `--ml-type-xl` `--ml-type-2xl` `--ml-type-display-sm` `--ml-type-display-md` `--ml-type-display-lg` `--ml-type-display-xl` `--ml-leading-tight` `--ml-leading-snug` `--ml-leading-normal` `--ml-font-sans` `--ml-font-display` `--ml-font-mono` `--ml-display-weight` `--ml-body-leading` `--ml-tracking`
 - **Density.** Control heights, panel padding, the touch target.
   `--ml-control-sm` `--ml-control-md` `--ml-control-lg` `--ml-panel-padding` `--ml-target-min`
 - **Shape.** Corner radii by the size of the thing, and the border weight.
@@ -104,8 +104,10 @@ built, and it will look like it belongs.
    page, enough for an area, not for meaning. Series use `chart-1`…`chart-6`.
 4. **Measure with the scales.** Spacing from `--ml-space-*`, type from
    `--ml-type-*` with `--ml-leading-*`, control heights from
-   `--ml-control-*`, panel padding from `--ml-panel-padding`. A `clamp()`
-   between two steps is fine; a value invented between them is not.
+   `--ml-control-*`, panel padding from `--ml-panel-padding`. Space and
+   headings that grow with the window read the fluid steps
+   (`--ml-space-fluid-sm`…`-xl`, `--ml-type-display-sm`…`-xl`) instead of
+   a `clamp()` of their own; a length invented between the steps is not.
 5. **Shape and depth come from the theme.** Radii by the size of the thing
    (`xs` a tag, `sm` a small control, `md` a control or card, `lg` a panel
    or dialog, `pill`). Elevation from `--ml-shadow-*`; a floating surface

package/generated/foundations.css

@@ -82,15 +82,15 @@ body {
 }
 
 h1 {
-  font-size: clamp(2.25rem,5vw,4.75rem);
+  font-size: var(--ml-type-display-lg);
 }
 
 h2 {
-  font-size: clamp(1.75rem,3.2vw,3rem);
+  font-size: var(--ml-type-display-md);
 }
 
 h3 {
-  font-size: clamp(1.25rem,2vw,1.75rem);
+  font-size: var(--ml-type-display-sm);
 }
 
 :where(code,kbd,samp,pre) {

package/generated/recipes.css

@@ -101,7 +101,7 @@
 
 .ml-display {
   font-family: var(--ml-font-display);
-  font-size: clamp(2.5rem,6vw,4.5rem);
+  font-size: var(--ml-type-display-lg);
   font-weight: var(--ml-display-weight);
   line-height: 1.05;
   letter-spacing: -.03em;
@@ -175,7 +175,7 @@
 }
 
 .ml-section {
-  padding-block: clamp(3.5rem,8vw,6.5rem);
+  padding-block: var(--ml-space-fluid-xl);
   /* A section is a grid or flex item in a page shell; without this, a wide
      table inside it widens the whole page instead of scrolling in place. */
   min-width: 0;
@@ -197,7 +197,7 @@
 .ml-section-header {
   display: grid;
   gap: var(--ml-space-3);
-  margin-block-end: clamp(2rem,5vw,3rem);
+  margin-block-end: var(--ml-space-fluid-md);
   max-width: 42rem;
 }
 
@@ -224,7 +224,7 @@
 
 .ml-heading {
   font-family: var(--ml-font-display);
-  font-size: clamp(1.75rem,3.2vw,2.75rem);
+  font-size: var(--ml-type-display-md);
   font-weight: var(--ml-display-weight);
   line-height: 1.1;
   letter-spacing: -.025em;
@@ -501,7 +501,7 @@
   flex-wrap: wrap;
   align-items: baseline;
   gap: var(--ml-space-1-5);
-  font-size: clamp(2rem,4vw,2.75rem);
+  font-size: var(--ml-type-display-md);
   font-weight: 800;
   letter-spacing: -.03em;
 }
@@ -1665,6 +1665,17 @@ button.ml-breadcrumb-link {
   color: var(--ml-primary-text);
 }
 
+/* A link button is drawn as text, a line tall. On touch it keeps that look
+   and gains an invisible target around it, as a control marked
+   data-hit="expand" does, so a finger reaches it (WCAG 2.5.8). */
+@media (pointer: coarse) {
+  .ml-button[data-variant="link"]::after {
+    position: absolute;
+    inset: min(calc(var(--ml-space-1-5) * -1), calc((var(--ml-target-min) - 100%) / -2));
+    content: "";
+  }
+}
+
 .ml-button[data-size="sm"] {
   min-height: var(--ml-control-sm);
   gap: var(--ml-space-1-5);

package/generated/tokens.css

@@ -19,6 +19,10 @@
   --ml-space-12: 3rem;
   --ml-space-14: 3.5rem;
   --ml-space-16: 4rem;
+  --ml-space-fluid-sm: clamp(1.25rem, 3vw, 2.5rem);
+  --ml-space-fluid-md: clamp(2rem, 5vw, 3rem);
+  --ml-space-fluid-lg: clamp(2rem, 5vw, 4rem);
+  --ml-space-fluid-xl: clamp(3.5rem, 8vw, 6.5rem);
   --ml-type-2xs: 0.6875rem;
   --ml-type-xs: 0.75rem;
   --ml-type-sm: 0.8125rem;
@@ -27,6 +31,10 @@
   --ml-type-lg: 1.125rem;
   --ml-type-xl: 1.25rem;
   --ml-type-2xl: 1.5rem;
+  --ml-type-display-sm: clamp(1.375rem, 2.5vw, 1.875rem);
+  --ml-type-display-md: clamp(1.75rem, 3.5vw, 2.75rem);
+  --ml-type-display-lg: clamp(2.5rem, 6vw, 4.5rem);
+  --ml-type-display-xl: clamp(4rem, 14vw, 8rem);
   --ml-leading-tight: 1.25;
   --ml-leading-snug: 1.4;
   --ml-leading-normal: 1.55;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/engine",
-  "version": "1.1.26",
+  "version": "1.2.0",
   "description": "Framework-free CSS, spring easings, and the machine-readable contract for Mlola UI",
   "type": "module",
   "sideEffects": [

package/src/render.mjs

@@ -12,7 +12,13 @@ const round = (value, places = 3) => Number(value.toFixed(places));
  * The one spacing and type scale every recipe draws from. Theme-invariant on
  * purpose: theme varies radius, density of ink, motion and depth, while
  * the rhythm of the grid stays constant so composed pages line up. Recipes must
- * not invent values between these steps. Layers are the one stacking order
+ * not invent values between these steps. The fluid steps grow with the window,
+ * each between two ends of the scale: space inside a large panel (sm), between
+ * groups in a section (md), between a section's columns or blocks (lg) and
+ * between sections (xl); display type for a card or step title (sm), a
+ * section title (md), a page title (lg) and a numeral that is the picture
+ * (xl, a 404). A page or block reads these instead of writing a clamp() of its
+ * own, so every section and heading follows one curve. Layers are the one stacking order
  * for everything that floats: raised content, sticky headers, menus, dialogs,
  * popovers, toasts and tooltips, and the few layers that sit above them all.
  */
@@ -37,6 +43,10 @@ export function renderScaleCss() {
   --ml-space-12: 3rem;
   --ml-space-14: 3.5rem;
   --ml-space-16: 4rem;
+  --ml-space-fluid-sm: clamp(1.25rem, 3vw, 2.5rem);
+  --ml-space-fluid-md: clamp(2rem, 5vw, 3rem);
+  --ml-space-fluid-lg: clamp(2rem, 5vw, 4rem);
+  --ml-space-fluid-xl: clamp(3.5rem, 8vw, 6.5rem);
   --ml-type-2xs: 0.6875rem;
   --ml-type-xs: 0.75rem;
   --ml-type-sm: 0.8125rem;
@@ -45,6 +55,10 @@ export function renderScaleCss() {
   --ml-type-lg: 1.125rem;
   --ml-type-xl: 1.25rem;
   --ml-type-2xl: 1.5rem;
+  --ml-type-display-sm: clamp(1.375rem, 2.5vw, 1.875rem);
+  --ml-type-display-md: clamp(1.75rem, 3.5vw, 2.75rem);
+  --ml-type-display-lg: clamp(2.5rem, 6vw, 4.5rem);
+  --ml-type-display-xl: clamp(4rem, 14vw, 8rem);
   --ml-leading-tight: 1.25;
   --ml-leading-snug: 1.4;
   --ml-leading-normal: 1.55;