mlola-ui 1.1.27 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/registry/agents.json +10 -2
  3. package/registry/agents.md +6 -4
  4. package/registry/index.json +48 -48
  5. package/src/knowledge.js +7 -25
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mlola-ui",
3
- "version": "1.1.27",
3
+ "version": "1.2.0",
4
4
  "mcpName": "io.github.mlolahq/mlola-ui",
5
5
  "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
6
6
  "type": "module",
package/registry/agents.json CHANGED
@@ -117,7 +117,11 @@
117
117
  "--ml-space-10",
118
118
  "--ml-space-12",
119
119
  "--ml-space-14",
120
- "--ml-space-16"
120
+ "--ml-space-16",
121
+ "--ml-space-fluid-sm",
122
+ "--ml-space-fluid-md",
123
+ "--ml-space-fluid-lg",
124
+ "--ml-space-fluid-xl"
121
125
  ]
122
126
  },
123
127
  {
@@ -132,6 +136,10 @@
132
136
  "--ml-type-lg",
133
137
  "--ml-type-xl",
134
138
  "--ml-type-2xl",
139
+ "--ml-type-display-sm",
140
+ "--ml-type-display-md",
141
+ "--ml-type-display-lg",
142
+ "--ml-type-display-xl",
135
143
  "--ml-leading-tight",
136
144
  "--ml-leading-snug",
137
145
  "--ml-leading-normal",
@@ -221,7 +229,7 @@
221
229
  ]
222
230
  }
223
231
  ],
224
- "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",
232
+ "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",
225
233
  "primitives": [
226
234
  {
227
235
  "name": "ml-actions",
package/registry/agents.md CHANGED
@@ -64,9 +64,9 @@ Values change with the theme and the mode, the names never do.
64
64
  - **Interaction and light.** Focus, hover and pressed fills, tracks, the veil behind overlays, light and knobs.
65
65
  `--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`
66
66
  - **Spacing.** The only spacing: gaps, padding, margins, offsets.
67
- `--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`
67
+ `--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`
68
68
  - **Type.** The only type sizes, line heights, families and weights.
69
- `--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`
69
+ `--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`
70
70
  - **Density.** Control heights, panel padding, the touch target.
71
71
  `--ml-control-sm` `--ml-control-md` `--ml-control-lg` `--ml-panel-padding` `--ml-target-min`
72
72
  - **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.
104
104
  page, enough for an area, not for meaning. Series use `chart-1`…`chart-6`.
105
105
  4. **Measure with the scales.** Spacing from `--ml-space-*`, type from
106
106
  `--ml-type-*` with `--ml-leading-*`, control heights from
107
- `--ml-control-*`, panel padding from `--ml-panel-padding`. A `clamp()`
108
- between two steps is fine; a value invented between them is not.
107
+ `--ml-control-*`, panel padding from `--ml-panel-padding`. Space and
108
+ headings that grow with the window read the fluid steps
109
+ (`--ml-space-fluid-sm`…`-xl`, `--ml-type-display-sm`…`-xl`) instead of
110
+ a `clamp()` of their own; a length invented between the steps is not.
109
111
  5. **Shape and depth come from the theme.** Radii by the size of the thing
110
112
  (`xs` a tag, `sm` a small control, `md` a control or card, `lg` a panel
111
113
  or dialog, `pill`). Elevation from `--ml-shadow-*`; a floating surface
package/registry/index.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "$schema": "./schema/registry-index.schema.json",
3
3
  "schemaVersion": 2,
4
4
  "name": "mlola-ui",
5
- "version": "1.1.27",
5
+ "version": "1.2.0",
6
6
  "homepage": "https://ui.mlola.com",
7
7
  "themeContract": {
8
8
  "attribute": "data-theme",
@@ -177,8 +177,8 @@
177
177
  },
178
178
  "registryDependencies": [],
179
179
  "engineDependencies": {
180
- "@mlola-ui/behavior": "^1.1.27",
181
- "@mlola-ui/icons": "^1.1.27"
180
+ "@mlola-ui/behavior": "^1.2.0",
181
+ "@mlola-ui/icons": "^1.2.0"
182
182
  },
183
183
  "options": [
184
184
  {
@@ -239,7 +239,7 @@
239
239
  },
240
240
  "registryDependencies": [],
241
241
  "engineDependencies": {
242
- "@mlola-ui/icons": "^1.1.27"
242
+ "@mlola-ui/icons": "^1.2.0"
243
243
  },
244
244
  "options": [
245
245
  {
@@ -401,7 +401,7 @@
401
401
  },
402
402
  "registryDependencies": [],
403
403
  "engineDependencies": {
404
- "@mlola-ui/icons": "^1.1.27"
404
+ "@mlola-ui/icons": "^1.2.0"
405
405
  },
406
406
  "options": [
407
407
  {
@@ -493,7 +493,7 @@
493
493
  },
494
494
  "registryDependencies": [],
495
495
  "engineDependencies": {
496
- "@mlola-ui/icons": "^1.1.27"
496
+ "@mlola-ui/icons": "^1.2.0"
497
497
  },
498
498
  "options": [],
499
499
  "variants": [],
@@ -546,7 +546,7 @@
546
546
  "spinner"
547
547
  ],
548
548
  "engineDependencies": {
549
- "@mlola-ui/motion": "^1.1.27"
549
+ "@mlola-ui/motion": "^1.2.0"
550
550
  },
551
551
  "options": [
552
552
  {
@@ -714,8 +714,8 @@
714
714
  },
715
715
  "registryDependencies": [],
716
716
  "engineDependencies": {
717
- "@mlola-ui/behavior": "^1.1.27",
718
- "@mlola-ui/icons": "^1.1.27"
717
+ "@mlola-ui/behavior": "^1.2.0",
718
+ "@mlola-ui/icons": "^1.2.0"
719
719
  },
720
720
  "options": [
721
721
  {
@@ -784,7 +784,7 @@
784
784
  },
785
785
  "registryDependencies": [],
786
786
  "engineDependencies": {
787
- "@mlola-ui/icons": "^1.1.27"
787
+ "@mlola-ui/icons": "^1.2.0"
788
788
  },
789
789
  "options": [],
790
790
  "variants": [],
@@ -839,7 +839,7 @@
839
839
  "modal"
840
840
  ],
841
841
  "engineDependencies": {
842
- "@mlola-ui/icons": "^1.1.27"
842
+ "@mlola-ui/icons": "^1.2.0"
843
843
  },
844
844
  "options": [],
845
845
  "variants": [],
@@ -903,8 +903,8 @@
903
903
  },
904
904
  "registryDependencies": [],
905
905
  "engineDependencies": {
906
- "@mlola-ui/behavior": "^1.1.27",
907
- "@mlola-ui/icons": "^1.1.27"
906
+ "@mlola-ui/behavior": "^1.2.0",
907
+ "@mlola-ui/icons": "^1.2.0"
908
908
  },
909
909
  "options": [
910
910
  {
@@ -993,7 +993,7 @@
993
993
  "input"
994
994
  ],
995
995
  "engineDependencies": {
996
- "@mlola-ui/icons": "^1.1.27"
996
+ "@mlola-ui/icons": "^1.2.0"
997
997
  },
998
998
  "options": [],
999
999
  "variants": [],
@@ -1218,8 +1218,8 @@
1218
1218
  },
1219
1219
  "registryDependencies": [],
1220
1220
  "engineDependencies": {
1221
- "@mlola-ui/behavior": "^1.1.27",
1222
- "@mlola-ui/icons": "^1.1.27"
1221
+ "@mlola-ui/behavior": "^1.2.0",
1222
+ "@mlola-ui/icons": "^1.2.0"
1223
1223
  },
1224
1224
  "options": [
1225
1225
  {
@@ -1370,7 +1370,7 @@
1370
1370
  },
1371
1371
  "registryDependencies": [],
1372
1372
  "engineDependencies": {
1373
- "@mlola-ui/icons": "^1.1.27"
1373
+ "@mlola-ui/icons": "^1.2.0"
1374
1374
  },
1375
1375
  "options": [],
1376
1376
  "variants": [],
@@ -1421,7 +1421,7 @@
1421
1421
  },
1422
1422
  "registryDependencies": [],
1423
1423
  "engineDependencies": {
1424
- "@mlola-ui/behavior": "^1.1.27"
1424
+ "@mlola-ui/behavior": "^1.2.0"
1425
1425
  },
1426
1426
  "options": [
1427
1427
  {
@@ -1799,7 +1799,7 @@
1799
1799
  },
1800
1800
  "registryDependencies": [],
1801
1801
  "engineDependencies": {
1802
- "@mlola-ui/behavior": "^1.1.27"
1802
+ "@mlola-ui/behavior": "^1.2.0"
1803
1803
  },
1804
1804
  "options": [],
1805
1805
  "variants": [],
@@ -1852,8 +1852,8 @@
1852
1852
  "input"
1853
1853
  ],
1854
1854
  "engineDependencies": {
1855
- "@mlola-ui/behavior": "^1.1.27",
1856
- "@mlola-ui/icons": "^1.1.27"
1855
+ "@mlola-ui/behavior": "^1.2.0",
1856
+ "@mlola-ui/icons": "^1.2.0"
1857
1857
  },
1858
1858
  "options": [
1859
1859
  {
@@ -1931,8 +1931,8 @@
1931
1931
  },
1932
1932
  "registryDependencies": [],
1933
1933
  "engineDependencies": {
1934
- "@mlola-ui/behavior": "^1.1.27",
1935
- "@mlola-ui/icons": "^1.1.27"
1934
+ "@mlola-ui/behavior": "^1.2.0",
1935
+ "@mlola-ui/icons": "^1.2.0"
1936
1936
  },
1937
1937
  "options": [
1938
1938
  {
@@ -2078,7 +2078,7 @@
2078
2078
  "input"
2079
2079
  ],
2080
2080
  "engineDependencies": {
2081
- "@mlola-ui/behavior": "^1.1.27"
2081
+ "@mlola-ui/behavior": "^1.2.0"
2082
2082
  },
2083
2083
  "options": [
2084
2084
  {
@@ -2223,7 +2223,7 @@
2223
2223
  },
2224
2224
  "registryDependencies": [],
2225
2225
  "engineDependencies": {
2226
- "@mlola-ui/behavior": "^1.1.27"
2226
+ "@mlola-ui/behavior": "^1.2.0"
2227
2227
  },
2228
2228
  "options": [
2229
2229
  {
@@ -2355,7 +2355,7 @@
2355
2355
  },
2356
2356
  "registryDependencies": [],
2357
2357
  "engineDependencies": {
2358
- "@mlola-ui/icons": "^1.1.27"
2358
+ "@mlola-ui/icons": "^1.2.0"
2359
2359
  },
2360
2360
  "options": [
2361
2361
  {
@@ -2443,8 +2443,8 @@
2443
2443
  "spinner"
2444
2444
  ],
2445
2445
  "engineDependencies": {
2446
- "@mlola-ui/behavior": "^1.1.27",
2447
- "@mlola-ui/icons": "^1.1.27"
2446
+ "@mlola-ui/behavior": "^1.2.0",
2447
+ "@mlola-ui/icons": "^1.2.0"
2448
2448
  },
2449
2449
  "options": [
2450
2450
  {
@@ -2599,7 +2599,7 @@
2599
2599
  },
2600
2600
  "registryDependencies": [],
2601
2601
  "engineDependencies": {
2602
- "@mlola-ui/behavior": "^1.1.27"
2602
+ "@mlola-ui/behavior": "^1.2.0"
2603
2603
  },
2604
2604
  "options": [
2605
2605
  {
@@ -2676,7 +2676,7 @@
2676
2676
  },
2677
2677
  "registryDependencies": [],
2678
2678
  "engineDependencies": {
2679
- "@mlola-ui/behavior": "^1.1.27"
2679
+ "@mlola-ui/behavior": "^1.2.0"
2680
2680
  },
2681
2681
  "options": [
2682
2682
  {
@@ -2758,7 +2758,7 @@
2758
2758
  },
2759
2759
  "registryDependencies": [],
2760
2760
  "engineDependencies": {
2761
- "@mlola-ui/icons": "^1.1.27"
2761
+ "@mlola-ui/icons": "^1.2.0"
2762
2762
  },
2763
2763
  "options": [
2764
2764
  {
@@ -2830,7 +2830,7 @@
2830
2830
  "popover"
2831
2831
  ],
2832
2832
  "engineDependencies": {
2833
- "@mlola-ui/icons": "^1.1.27"
2833
+ "@mlola-ui/icons": "^1.2.0"
2834
2834
  },
2835
2835
  "options": [
2836
2836
  {
@@ -2900,7 +2900,7 @@
2900
2900
  "popover"
2901
2901
  ],
2902
2902
  "engineDependencies": {
2903
- "@mlola-ui/icons": "^1.1.27"
2903
+ "@mlola-ui/icons": "^1.2.0"
2904
2904
  },
2905
2905
  "options": [],
2906
2906
  "variants": [],
@@ -3098,8 +3098,8 @@
3098
3098
  "input"
3099
3099
  ],
3100
3100
  "engineDependencies": {
3101
- "@mlola-ui/behavior": "^1.1.27",
3102
- "@mlola-ui/icons": "^1.1.27"
3101
+ "@mlola-ui/behavior": "^1.2.0",
3102
+ "@mlola-ui/icons": "^1.2.0"
3103
3103
  },
3104
3104
  "options": [
3105
3105
  {
@@ -3188,7 +3188,7 @@
3188
3188
  "input"
3189
3189
  ],
3190
3190
  "engineDependencies": {
3191
- "@mlola-ui/icons": "^1.1.27"
3191
+ "@mlola-ui/icons": "^1.2.0"
3192
3192
  },
3193
3193
  "options": [],
3194
3194
  "variants": [],
@@ -3243,7 +3243,7 @@
3243
3243
  "input"
3244
3244
  ],
3245
3245
  "engineDependencies": {
3246
- "@mlola-ui/icons": "^1.1.27"
3246
+ "@mlola-ui/icons": "^1.2.0"
3247
3247
  },
3248
3248
  "options": [],
3249
3249
  "variants": [],
@@ -3306,7 +3306,7 @@
3306
3306
  "popover"
3307
3307
  ],
3308
3308
  "engineDependencies": {
3309
- "@mlola-ui/icons": "^1.1.27"
3309
+ "@mlola-ui/icons": "^1.2.0"
3310
3310
  },
3311
3311
  "options": [
3312
3312
  {
@@ -3377,7 +3377,7 @@
3377
3377
  },
3378
3378
  "registryDependencies": [],
3379
3379
  "engineDependencies": {
3380
- "@mlola-ui/icons": "^1.1.27"
3380
+ "@mlola-ui/icons": "^1.2.0"
3381
3381
  },
3382
3382
  "options": [
3383
3383
  {
@@ -3496,8 +3496,8 @@
3496
3496
  },
3497
3497
  "registryDependencies": [],
3498
3498
  "engineDependencies": {
3499
- "@mlola-ui/behavior": "^1.1.27",
3500
- "@mlola-ui/icons": "^1.1.27"
3499
+ "@mlola-ui/behavior": "^1.2.0",
3500
+ "@mlola-ui/icons": "^1.2.0"
3501
3501
  },
3502
3502
  "options": [],
3503
3503
  "variants": [],
@@ -3561,7 +3561,7 @@
3561
3561
  },
3562
3562
  "registryDependencies": [],
3563
3563
  "engineDependencies": {
3564
- "@mlola-ui/behavior": "^1.1.27"
3564
+ "@mlola-ui/behavior": "^1.2.0"
3565
3565
  },
3566
3566
  "options": [
3567
3567
  {
@@ -3648,8 +3648,8 @@
3648
3648
  },
3649
3649
  "registryDependencies": [],
3650
3650
  "engineDependencies": {
3651
- "@mlola-ui/behavior": "^1.1.27",
3652
- "@mlola-ui/icons": "^1.1.27"
3651
+ "@mlola-ui/behavior": "^1.2.0",
3652
+ "@mlola-ui/icons": "^1.2.0"
3653
3653
  },
3654
3654
  "options": [],
3655
3655
  "variants": [],
@@ -3723,7 +3723,7 @@
3723
3723
  "sheet"
3724
3724
  ],
3725
3725
  "engineDependencies": {
3726
- "@mlola-ui/icons": "^1.1.27"
3726
+ "@mlola-ui/icons": "^1.2.0"
3727
3727
  },
3728
3728
  "options": [],
3729
3729
  "variants": [],
@@ -3846,7 +3846,7 @@
3846
3846
  "button"
3847
3847
  ],
3848
3848
  "engineDependencies": {
3849
- "@mlola-ui/icons": "^1.1.27"
3849
+ "@mlola-ui/icons": "^1.2.0"
3850
3850
  },
3851
3851
  "options": [
3852
3852
  {
@@ -3950,8 +3950,8 @@
3950
3950
  "input"
3951
3951
  ],
3952
3952
  "engineDependencies": {
3953
- "@mlola-ui/behavior": "^1.1.27",
3954
- "@mlola-ui/icons": "^1.1.27"
3953
+ "@mlola-ui/behavior": "^1.2.0",
3954
+ "@mlola-ui/icons": "^1.2.0"
3955
3955
  },
3956
3956
  "options": [
3957
3957
  {
package/src/knowledge.js CHANGED
@@ -207,35 +207,17 @@ const COLORS = /#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb)\([^)]
207
207
  */
208
208
  const SPACING_CSS = /(?:^|[;{\s])((?:padding|margin|inset)(?:-(?:top|right|bottom|left|inline|block)(?:-(?:start|end))?)?|(?:row-|column-)?gap)\s*:\s*([^;}]+)/gi;
209
209
  const SPACING_JS = /(?:^|[{,\s])((?:padding|margin|inset)(?:Top|Right|Bottom|Left|Inline|Block)?(?:Start|End)?|(?:row|column)?[gG]ap)\s*:\s*("[^"]*"|'[^']*'|`[^`]*`|-?\d+(?:\.\d+)?(?=\s*[,}]))/g;
210
- /** A value with every clamp(…) range taken out, nested parentheses and all. */
211
- function withoutRanges(value) {
212
- let out = "";
213
- for (let index = 0; index < value.length; index += 1) {
214
- if (/^clamp\(/i.test(value.slice(index, index + 6)) && !/[\w-]/.test(value[index - 1] ?? "")) {
215
- let depth = 0;
216
- let end = index + 5;
217
- for (; end < value.length; end += 1) {
218
- if (value[end] === "(") depth += 1;
219
- else if (value[end] === ")" && --depth === 0) break;
220
- }
221
- index = end;
222
- continue;
223
- }
224
- out += value[index];
225
- }
226
- return out;
227
- }
228
-
229
210
  /**
230
211
  * The lengths in a value that were typed by hand: px and rem, other than 0
231
- * and a 1px hairline, wherever they sit, beside a token or inside a calc().
232
- * A clamp() range is fluid on purpose, and em follows the element's own font
233
- * (optical tuning, not rhythm), so neither counts. This is the one rule for
234
- * spacing: check_markup, `mlola-ui check` and the library's own scale audit
212
+ * and a 1px hairline, wherever they sit, beside a token or inside a calc() or
213
+ * a clamp(). A fluid measure reads --ml-space-fluid-* or --ml-type-display-*,
214
+ * or clamps between scale steps. An em follows the element's own font
215
+ * (optical tuning, not rhythm), so it does not count. This is the one rule:
216
+ * check_markup, `mlola-ui check` and the library's own scale audit
235
217
  * (scripts/audit-scale.mjs) all read it here.
236
218
  */
237
219
  export function handWrittenLengths(value) {
238
- return [...withoutRanges(String(value)).matchAll(/(?<![\w.-])-?(?:\d*\.)?\d+(?:px|rem)\b/g)]
220
+ return [...String(value).matchAll(/(?<![\w.-])-?(?:\d*\.)?\d+(?:px|rem)\b/g)]
239
221
  .map((match) => match[0])
240
222
  .filter((length) => {
241
223
  const size = Math.abs(parseFloat(length));
@@ -272,7 +254,7 @@ function handSpacing(text) {
272
254
  return [...found.values()];
273
255
  }
274
256
 
275
- const SPACING_FIX = "Measure with the scale: var(--ml-space-2), var(--ml-space-4)… (get_tokens spacing), or a calc() of its steps. A fluid clamp() range and an em tuned to the font are fine; a length invented between the steps is not.";
257
+ const SPACING_FIX = "Measure with the scale: var(--ml-space-2), var(--ml-space-4)… (get_tokens spacing), or a calc() of its steps; space that grows with the window is var(--ml-space-fluid-sm)… to -xl. An em tuned to the font is fine; a length invented between the steps is not.";
276
258
 
277
259
  /** Every opening tag in HTML or JSX, with its string-valued attributes. */
278
260
  export function tagsOf(markup) {