@adia-ai/web-components 0.8.15 → 0.8.17

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 (22) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/components/button/button.a2ui.json +1 -1
  3. package/components/button/button.css +30 -0
  4. package/components/button/button.d.ts +1 -1
  5. package/components/button/button.yaml +9 -2
  6. package/components/combobox/combobox.a2ui.json +2 -2
  7. package/components/combobox/combobox.yaml +6 -4
  8. package/components/nav-item/nav-item.css +5 -4
  9. package/components/select/select.class.js +13 -3
  10. package/components/select/select.css +54 -3
  11. package/dist/host.min.css +1 -1
  12. package/dist/host.sheet.js +1 -1
  13. package/dist/theme-provider.min.js +1 -1
  14. package/dist/web-components.min.css +1 -1
  15. package/dist/web-components.min.js +1 -1
  16. package/dist/web-components.sheet.js +1 -1
  17. package/package.json +1 -1
  18. package/styles/colors/material-static.css +64 -24
  19. package/styles/colors/semantics/core.css +8 -2
  20. package/styles/theme-fonts-url.txt +2 -1
  21. package/styles/themes.css +13 -4
  22. package/styles/type/roles.css +11 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adia-ai/web-components",
3
- "version": "0.8.15",
3
+ "version": "0.8.17",
4
4
  "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
5
5
  "type": "module",
6
6
  "types": "./index.d.ts",
package/styles/colors/material-static.css CHANGED
@@ -71,16 +71,21 @@
71
71
  --md-sys-color-neutral-500-900: oklch(0.598 0.0316 225.06 / 90%);
72
72
  --md-sys-color-neutral-500-950: oklch(0.598 0.0316 225.06 / 95%);
73
73
  /* Neutral — semantic roles */
74
- --md-sys-color-neutral: light-dark(var(--md-sys-color-neutral-500), var(--md-sys-color-neutral-500));
74
+ --md-sys-color-neutral: light-dark(var(--md-sys-color-neutral-600), var(--md-sys-color-neutral-600));
75
75
  --md-sys-color-neutral-dim: light-dark(var(--md-sys-color-neutral-650), var(--md-sys-color-neutral-700));
76
76
  --md-sys-color-neutral-bright: light-dark(var(--md-sys-color-neutral-350), var(--md-sys-color-neutral-400));
77
77
  --md-sys-color-neutral-low: light-dark(var(--md-sys-color-neutral-350), var(--md-sys-color-neutral-700));
78
78
  --md-sys-color-neutral-high: light-dark(var(--md-sys-color-neutral-650), var(--md-sys-color-neutral-400));
79
- --md-sys-color-neutral-hover: light-dark(var(--md-sys-color-neutral-600), var(--md-sys-color-neutral-550));
80
- --md-sys-color-neutral-active: light-dark(var(--md-sys-color-neutral-750), var(--md-sys-color-neutral-250));
79
+ --md-sys-color-neutral-hover: light-dark(var(--md-sys-color-neutral-650), var(--md-sys-color-neutral-650));
80
+ --md-sys-color-neutral-active: light-dark(var(--md-sys-color-neutral-700), var(--md-sys-color-neutral-700));
81
81
  --md-sys-color-neutral-disabled: light-dark(var(--md-sys-color-neutral-500-600), var(--md-sys-color-neutral-500-600));
82
82
  --md-sys-color-neutral-on-neutral: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-050));
83
83
  --md-sys-color-neutral-on-neutral-variant: light-dark(var(--md-sys-color-neutral-200), var(--md-sys-color-neutral-200));
84
+ /* tonal text (gh#434): dark in-family text on the translucent container fill.
85
+ light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
86
+ composited on the page bg); dark leg = the 200 stop, on-neutral-variant's own
87
+ dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
88
+ --md-sys-color-neutral-on-neutral-container: light-dark(var(--md-sys-color-neutral-950), var(--md-sys-color-neutral-200));
84
89
  --md-sys-color-neutral-on-neutral-hover: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-050));
85
90
  --md-sys-color-neutral-on-neutral-active: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-050));
86
91
  --md-sys-color-neutral-on-neutral-disabled: light-dark(var(--md-sys-color-neutral-500-400), var(--md-sys-color-neutral-500-400));
@@ -163,16 +168,21 @@
163
168
  --md-sys-color-primary-500-900: oklch(0.6498 0.1222 224.12 / 90%);
164
169
  --md-sys-color-primary-500-950: oklch(0.6498 0.1222 224.12 / 95%);
165
170
  /* Primary — semantic roles */
166
- --md-sys-color-primary: light-dark(var(--md-sys-color-primary-500), var(--md-sys-color-primary-500));
171
+ --md-sys-color-primary: light-dark(var(--md-sys-color-primary-600), var(--md-sys-color-primary-600));
167
172
  --md-sys-color-primary-dim: light-dark(var(--md-sys-color-primary-650), var(--md-sys-color-primary-700));
168
173
  --md-sys-color-primary-bright: light-dark(var(--md-sys-color-primary-350), var(--md-sys-color-primary-400));
169
174
  --md-sys-color-primary-low: light-dark(var(--md-sys-color-primary-350), var(--md-sys-color-primary-700));
170
175
  --md-sys-color-primary-high: light-dark(var(--md-sys-color-primary-650), var(--md-sys-color-primary-400));
171
- --md-sys-color-primary-hover: light-dark(var(--md-sys-color-primary-600), var(--md-sys-color-primary-550));
172
- --md-sys-color-primary-active: light-dark(var(--md-sys-color-primary-750), var(--md-sys-color-primary-250));
176
+ --md-sys-color-primary-hover: light-dark(var(--md-sys-color-primary-650), var(--md-sys-color-primary-650));
177
+ --md-sys-color-primary-active: light-dark(var(--md-sys-color-primary-700), var(--md-sys-color-primary-700));
173
178
  --md-sys-color-primary-disabled: light-dark(var(--md-sys-color-primary-500-600), var(--md-sys-color-primary-500-600));
174
179
  --md-sys-color-primary-on-primary: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
175
180
  --md-sys-color-primary-on-primary-variant: light-dark(var(--md-sys-color-primary-200), var(--md-sys-color-primary-200));
181
+ /* tonal text (gh#434): dark in-family text on the translucent container fill.
182
+ light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
183
+ composited on the page bg); dark leg = the 200 stop, on-primary-variant's own
184
+ dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
185
+ --md-sys-color-primary-on-primary-container: light-dark(var(--md-sys-color-primary-950), var(--md-sys-color-primary-200));
176
186
  --md-sys-color-primary-on-primary-hover: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
177
187
  --md-sys-color-primary-on-primary-active: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
178
188
  --md-sys-color-primary-on-primary-disabled: light-dark(var(--md-sys-color-primary-500-400), var(--md-sys-color-primary-500-400));
@@ -255,16 +265,21 @@
255
265
  --md-sys-color-secondary-500-900: oklch(0.6683 0.0985 204.61 / 90%);
256
266
  --md-sys-color-secondary-500-950: oklch(0.6683 0.0985 204.61 / 95%);
257
267
  /* Secondary — semantic roles */
258
- --md-sys-color-secondary: light-dark(var(--md-sys-color-secondary-500), var(--md-sys-color-secondary-500));
268
+ --md-sys-color-secondary: light-dark(var(--md-sys-color-secondary-650), var(--md-sys-color-secondary-650));
259
269
  --md-sys-color-secondary-dim: light-dark(var(--md-sys-color-secondary-650), var(--md-sys-color-secondary-700));
260
270
  --md-sys-color-secondary-bright: light-dark(var(--md-sys-color-secondary-350), var(--md-sys-color-secondary-400));
261
271
  --md-sys-color-secondary-low: light-dark(var(--md-sys-color-secondary-350), var(--md-sys-color-secondary-700));
262
272
  --md-sys-color-secondary-high: light-dark(var(--md-sys-color-secondary-650), var(--md-sys-color-secondary-400));
263
- --md-sys-color-secondary-hover: light-dark(var(--md-sys-color-secondary-600), var(--md-sys-color-secondary-550));
264
- --md-sys-color-secondary-active: light-dark(var(--md-sys-color-secondary-750), var(--md-sys-color-secondary-250));
273
+ --md-sys-color-secondary-hover: light-dark(var(--md-sys-color-secondary-700), var(--md-sys-color-secondary-700));
274
+ --md-sys-color-secondary-active: light-dark(var(--md-sys-color-secondary-750), var(--md-sys-color-secondary-750));
265
275
  --md-sys-color-secondary-disabled: light-dark(var(--md-sys-color-secondary-500-600), var(--md-sys-color-secondary-500-600));
266
276
  --md-sys-color-secondary-on-secondary: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
267
277
  --md-sys-color-secondary-on-secondary-variant: light-dark(var(--md-sys-color-secondary-200), var(--md-sys-color-secondary-200));
278
+ /* tonal text (gh#434): dark in-family text on the translucent container fill.
279
+ light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
280
+ composited on the page bg); dark leg = the 200 stop, on-secondary-variant's own
281
+ dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
282
+ --md-sys-color-secondary-on-secondary-container: light-dark(var(--md-sys-color-secondary-950), var(--md-sys-color-secondary-200));
268
283
  --md-sys-color-secondary-on-secondary-hover: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
269
284
  --md-sys-color-secondary-on-secondary-active: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
270
285
  --md-sys-color-secondary-on-secondary-disabled: light-dark(var(--md-sys-color-secondary-500-400), var(--md-sys-color-secondary-500-400));
@@ -347,16 +362,21 @@
347
362
  --md-sys-color-tertiary-500-900: oklch(0.5993 0.2006 285.17 / 90%);
348
363
  --md-sys-color-tertiary-500-950: oklch(0.5993 0.2006 285.17 / 95%);
349
364
  /* Tertiary — semantic roles */
350
- --md-sys-color-tertiary: light-dark(var(--md-sys-color-tertiary-500), var(--md-sys-color-tertiary-500));
365
+ --md-sys-color-tertiary: light-dark(var(--md-sys-color-tertiary-600), var(--md-sys-color-tertiary-600));
351
366
  --md-sys-color-tertiary-dim: light-dark(var(--md-sys-color-tertiary-650), var(--md-sys-color-tertiary-700));
352
367
  --md-sys-color-tertiary-bright: light-dark(var(--md-sys-color-tertiary-350), var(--md-sys-color-tertiary-400));
353
368
  --md-sys-color-tertiary-low: light-dark(var(--md-sys-color-tertiary-350), var(--md-sys-color-tertiary-700));
354
369
  --md-sys-color-tertiary-high: light-dark(var(--md-sys-color-tertiary-650), var(--md-sys-color-tertiary-400));
355
- --md-sys-color-tertiary-hover: light-dark(var(--md-sys-color-tertiary-600), var(--md-sys-color-tertiary-550));
356
- --md-sys-color-tertiary-active: light-dark(var(--md-sys-color-tertiary-750), var(--md-sys-color-tertiary-250));
370
+ --md-sys-color-tertiary-hover: light-dark(var(--md-sys-color-tertiary-650), var(--md-sys-color-tertiary-650));
371
+ --md-sys-color-tertiary-active: light-dark(var(--md-sys-color-tertiary-700), var(--md-sys-color-tertiary-700));
357
372
  --md-sys-color-tertiary-disabled: light-dark(var(--md-sys-color-tertiary-500-600), var(--md-sys-color-tertiary-500-600));
358
373
  --md-sys-color-tertiary-on-tertiary: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
359
374
  --md-sys-color-tertiary-on-tertiary-variant: light-dark(var(--md-sys-color-tertiary-200), var(--md-sys-color-tertiary-200));
375
+ /* tonal text (gh#434): dark in-family text on the translucent container fill.
376
+ light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
377
+ composited on the page bg); dark leg = the 200 stop, on-tertiary-variant's own
378
+ dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
379
+ --md-sys-color-tertiary-on-tertiary-container: light-dark(var(--md-sys-color-tertiary-950), var(--md-sys-color-tertiary-200));
360
380
  --md-sys-color-tertiary-on-tertiary-hover: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
361
381
  --md-sys-color-tertiary-on-tertiary-active: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
362
382
  --md-sys-color-tertiary-on-tertiary-disabled: light-dark(var(--md-sys-color-tertiary-500-400), var(--md-sys-color-tertiary-500-400));
@@ -439,16 +459,21 @@
439
459
  --md-sys-color-info-500-900: oklch(0.5984 0.1736 265.15 / 90%);
440
460
  --md-sys-color-info-500-950: oklch(0.5984 0.1736 265.15 / 95%);
441
461
  /* Info — semantic roles */
442
- --md-sys-color-info: light-dark(var(--md-sys-color-info-500), var(--md-sys-color-info-500));
462
+ --md-sys-color-info: light-dark(var(--md-sys-color-info-600), var(--md-sys-color-info-600));
443
463
  --md-sys-color-info-dim: light-dark(var(--md-sys-color-info-650), var(--md-sys-color-info-700));
444
464
  --md-sys-color-info-bright: light-dark(var(--md-sys-color-info-350), var(--md-sys-color-info-400));
445
465
  --md-sys-color-info-low: light-dark(var(--md-sys-color-info-350), var(--md-sys-color-info-700));
446
466
  --md-sys-color-info-high: light-dark(var(--md-sys-color-info-650), var(--md-sys-color-info-400));
447
- --md-sys-color-info-hover: light-dark(var(--md-sys-color-info-600), var(--md-sys-color-info-550));
448
- --md-sys-color-info-active: light-dark(var(--md-sys-color-info-750), var(--md-sys-color-info-250));
467
+ --md-sys-color-info-hover: light-dark(var(--md-sys-color-info-650), var(--md-sys-color-info-650));
468
+ --md-sys-color-info-active: light-dark(var(--md-sys-color-info-700), var(--md-sys-color-info-700));
449
469
  --md-sys-color-info-disabled: light-dark(var(--md-sys-color-info-500-600), var(--md-sys-color-info-500-600));
450
470
  --md-sys-color-info-on-info: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
451
471
  --md-sys-color-info-on-info-variant: light-dark(var(--md-sys-color-info-200), var(--md-sys-color-info-200));
472
+ /* tonal text (gh#434): dark in-family text on the translucent container fill.
473
+ light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
474
+ composited on the page bg); dark leg = the 200 stop, on-info-variant's own
475
+ dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
476
+ --md-sys-color-info-on-info-container: light-dark(var(--md-sys-color-info-950), var(--md-sys-color-info-200));
452
477
  --md-sys-color-info-on-info-hover: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
453
478
  --md-sys-color-info-on-info-active: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
454
479
  --md-sys-color-info-on-info-disabled: light-dark(var(--md-sys-color-info-500-400), var(--md-sys-color-info-500-400));
@@ -531,16 +556,21 @@
531
556
  --md-sys-color-success-500-900: oklch(0.5987 0.1161 150.34 / 90%);
532
557
  --md-sys-color-success-500-950: oklch(0.5987 0.1161 150.34 / 95%);
533
558
  /* Success — semantic roles */
534
- --md-sys-color-success: light-dark(var(--md-sys-color-success-500), var(--md-sys-color-success-500));
559
+ --md-sys-color-success: light-dark(var(--md-sys-color-success-600), var(--md-sys-color-success-600));
535
560
  --md-sys-color-success-dim: light-dark(var(--md-sys-color-success-650), var(--md-sys-color-success-700));
536
561
  --md-sys-color-success-bright: light-dark(var(--md-sys-color-success-350), var(--md-sys-color-success-400));
537
562
  --md-sys-color-success-low: light-dark(var(--md-sys-color-success-350), var(--md-sys-color-success-700));
538
563
  --md-sys-color-success-high: light-dark(var(--md-sys-color-success-650), var(--md-sys-color-success-400));
539
- --md-sys-color-success-hover: light-dark(var(--md-sys-color-success-600), var(--md-sys-color-success-550));
540
- --md-sys-color-success-active: light-dark(var(--md-sys-color-success-750), var(--md-sys-color-success-250));
564
+ --md-sys-color-success-hover: light-dark(var(--md-sys-color-success-650), var(--md-sys-color-success-650));
565
+ --md-sys-color-success-active: light-dark(var(--md-sys-color-success-700), var(--md-sys-color-success-700));
541
566
  --md-sys-color-success-disabled: light-dark(var(--md-sys-color-success-500-600), var(--md-sys-color-success-500-600));
542
567
  --md-sys-color-success-on-success: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
543
568
  --md-sys-color-success-on-success-variant: light-dark(var(--md-sys-color-success-200), var(--md-sys-color-success-200));
569
+ /* tonal text (gh#434): dark in-family text on the translucent container fill.
570
+ light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
571
+ composited on the page bg); dark leg = the 200 stop, on-success-variant's own
572
+ dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
573
+ --md-sys-color-success-on-success-container: light-dark(var(--md-sys-color-success-950), var(--md-sys-color-success-200));
544
574
  --md-sys-color-success-on-success-hover: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
545
575
  --md-sys-color-success-on-success-active: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
546
576
  --md-sys-color-success-on-success-disabled: light-dark(var(--md-sys-color-success-500-400), var(--md-sys-color-success-500-400));
@@ -623,16 +653,21 @@
623
653
  --md-sys-color-warning-500-900: oklch(0.791 0.1581 75.1 / 90%);
624
654
  --md-sys-color-warning-500-950: oklch(0.791 0.1581 75.1 / 95%);
625
655
  /* Warning — semantic roles */
626
- --md-sys-color-warning: light-dark(var(--md-sys-color-warning-500), var(--md-sys-color-warning-500));
656
+ --md-sys-color-warning: light-dark(var(--md-sys-color-warning-700), var(--md-sys-color-warning-700));
627
657
  --md-sys-color-warning-dim: light-dark(var(--md-sys-color-warning-650), var(--md-sys-color-warning-700));
628
658
  --md-sys-color-warning-bright: light-dark(var(--md-sys-color-warning-350), var(--md-sys-color-warning-400));
629
659
  --md-sys-color-warning-low: light-dark(var(--md-sys-color-warning-350), var(--md-sys-color-warning-700));
630
660
  --md-sys-color-warning-high: light-dark(var(--md-sys-color-warning-650), var(--md-sys-color-warning-400));
631
- --md-sys-color-warning-hover: light-dark(var(--md-sys-color-warning-600), var(--md-sys-color-warning-550));
632
- --md-sys-color-warning-active: light-dark(var(--md-sys-color-warning-750), var(--md-sys-color-warning-250));
661
+ --md-sys-color-warning-hover: light-dark(var(--md-sys-color-warning-750), var(--md-sys-color-warning-750));
662
+ --md-sys-color-warning-active: light-dark(var(--md-sys-color-warning-800), var(--md-sys-color-warning-800));
633
663
  --md-sys-color-warning-disabled: light-dark(var(--md-sys-color-warning-500-600), var(--md-sys-color-warning-500-600));
634
664
  --md-sys-color-warning-on-warning: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
635
665
  --md-sys-color-warning-on-warning-variant: light-dark(var(--md-sys-color-warning-200), var(--md-sys-color-warning-200));
666
+ /* tonal text (gh#434): dark in-family text on the translucent container fill.
667
+ light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
668
+ composited on the page bg); dark leg = the 200 stop, on-warning-variant's own
669
+ dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
670
+ --md-sys-color-warning-on-warning-container: light-dark(var(--md-sys-color-warning-950), var(--md-sys-color-warning-200));
636
671
  --md-sys-color-warning-on-warning-hover: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
637
672
  --md-sys-color-warning-on-warning-active: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
638
673
  --md-sys-color-warning-on-warning-disabled: light-dark(var(--md-sys-color-warning-500-400), var(--md-sys-color-warning-500-400));
@@ -715,16 +750,21 @@
715
750
  --md-sys-color-danger-500-900: oklch(0.5992 0.1622 25.47 / 90%);
716
751
  --md-sys-color-danger-500-950: oklch(0.5992 0.1622 25.47 / 95%);
717
752
  /* Danger — semantic roles */
718
- --md-sys-color-danger: light-dark(var(--md-sys-color-danger-500), var(--md-sys-color-danger-500));
753
+ --md-sys-color-danger: light-dark(var(--md-sys-color-danger-600), var(--md-sys-color-danger-600));
719
754
  --md-sys-color-danger-dim: light-dark(var(--md-sys-color-danger-650), var(--md-sys-color-danger-700));
720
755
  --md-sys-color-danger-bright: light-dark(var(--md-sys-color-danger-350), var(--md-sys-color-danger-400));
721
756
  --md-sys-color-danger-low: light-dark(var(--md-sys-color-danger-350), var(--md-sys-color-danger-700));
722
757
  --md-sys-color-danger-high: light-dark(var(--md-sys-color-danger-650), var(--md-sys-color-danger-400));
723
- --md-sys-color-danger-hover: light-dark(var(--md-sys-color-danger-600), var(--md-sys-color-danger-550));
724
- --md-sys-color-danger-active: light-dark(var(--md-sys-color-danger-750), var(--md-sys-color-danger-250));
758
+ --md-sys-color-danger-hover: light-dark(var(--md-sys-color-danger-650), var(--md-sys-color-danger-650));
759
+ --md-sys-color-danger-active: light-dark(var(--md-sys-color-danger-700), var(--md-sys-color-danger-700));
725
760
  --md-sys-color-danger-disabled: light-dark(var(--md-sys-color-danger-500-600), var(--md-sys-color-danger-500-600));
726
761
  --md-sys-color-danger-on-danger: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
727
762
  --md-sys-color-danger-on-danger-variant: light-dark(var(--md-sys-color-danger-200), var(--md-sys-color-danger-200));
763
+ /* tonal text (gh#434): dark in-family text on the translucent container fill.
764
+ light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
765
+ composited on the page bg); dark leg = the 200 stop, on-danger-variant's own
766
+ dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
767
+ --md-sys-color-danger-on-danger-container: light-dark(var(--md-sys-color-danger-950), var(--md-sys-color-danger-200));
728
768
  --md-sys-color-danger-on-danger-hover: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
729
769
  --md-sys-color-danger-on-danger-active: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
730
770
  --md-sys-color-danger-on-danger-disabled: light-dark(var(--md-sys-color-danger-500-400), var(--md-sys-color-danger-500-400));
package/styles/colors/semantics/core.css CHANGED
@@ -53,7 +53,7 @@
53
53
  --a-canvas-muted: var(--md-sys-color-neutral-surface-dimmer);
54
54
  --a-canvas-hover: var(--md-sys-color-neutral-hover);
55
55
  --a-canvas-active: var(--md-sys-color-neutral-active);
56
- --a-canvas-selected: var(--md-sys-color-neutral-container-active);
56
+ --a-canvas-selected: var(--md-sys-color-neutral-container); /* same tier as --a-bg-selected — see its note */
57
57
 
58
58
  /* Text on neutral surfaces — Material's on-surface family has 3 tiers
59
59
  (on-surface / on-surface-variant / on-surface-disabled), compressing
@@ -95,7 +95,13 @@
95
95
  --a-bg-strong: var(--md-sys-color-neutral-surface-high);
96
96
  --a-bg-hover: var(--md-sys-color-neutral-hover);
97
97
  --a-bg-active: var(--md-sys-color-neutral-active);
98
- --a-bg-selected: var(--md-sys-color-neutral-container-active);
98
+ /* selected rides the plain -container stop (20%) — the SAME tier as
99
+ button variant="tonal"'s rest fill (operator ruling 2026-07-27), so
100
+ "selected" and "tonal" read as one surface language. The ladder
101
+ around it: hover = container-low (10%), selected/tonal rest =
102
+ container (20%), tonal hover = container-hover (30%). Was
103
+ container-active (40%), which overshot the rest tier. */
104
+ --a-bg-selected: var(--md-sys-color-neutral-container);
99
105
  --a-bg-disabled: var(--md-sys-color-neutral-container-disabled);
100
106
  --a-bg-invalid: var(--a-danger-muted);
101
107
 
package/styles/theme-fonts-url.txt CHANGED
@@ -1,4 +1,5 @@
1
- Google Fonts stylesheet URL for the 12 named identities in themes.css.
1
+ Google Fonts stylesheet URL for the 12 named identities in themes.css —
2
+ 23 families in one request (an earlier version of this note said 22).
2
3
 
3
4
  Link this once in <head>, before themes.css, in any document that uses
4
5
  [theme]. Not @import'd from themes.css itself — see that file's header
package/styles/themes.css CHANGED
@@ -13,10 +13,19 @@
13
13
  Each family's ramp keeps its own shipped L/C curve (per-stop
14
14
  lightness untouched; chroma scales by the theme's own multiplier)
15
15
  and only rotates hue by a constant delta — the exact mechanism the
16
- old --a-{family}-hue knobs used. This preserves the verified WCAG
17
- AA 4.5:1 thresholds (npm run verify:contrast, 42/42 pairs, every
18
- theme) — it does not claim contrast ratios are literally
19
- unchanged, only that they still clear the bar.
16
+ old --a-{family}-hue knobs used. Because per-stop lightness is
17
+ untouched and WCAG luminance is lightness-dominated, a rotation is
18
+ expected to preserve the AA thresholds rather than shift them — it
19
+ does not claim contrast ratios are literally unchanged, only that
20
+ they still clear the bar.
21
+ SCOPE OF THAT CLAIM (corrected with gh#427): `npm run
22
+ verify:contrast` resolves the DEFAULT ramps only — it does not
23
+ iterate [theme] blocks. Its 90 pairs (42 canvas-text/link + 48
24
+ on-<family>-over-fill) therefore prove the default palette, and
25
+ the rotation argument above is why the themes are expected to
26
+ follow. Per-theme verification is not yet mechanized; the older
27
+ "42/42 pairs, every theme" phrasing here overstated it, and the
28
+ 42-pair roster it referred to never checked a fill at all.
20
29
  NEUTRAL's hue is aligned to the theme's own PRIMARY hue — its
21
30
  low, theme-scaled chroma (shipped base ~0.002-0.03, up to ~0.044
22
31
  under the most vivid themes' multiplier) keeps the tint subtle,
package/styles/type/roles.css CHANGED
@@ -305,7 +305,17 @@
305
305
  text-transform: var(--a-heading-case);
306
306
  color: var(--a-heading-color);
307
307
  }
308
- [variant="section"] {
308
+ /* :not(nav-*): the nav family's [variant="section"] is STRUCTURAL (the
309
+ flat subnav-rail tier — nav.yaml, nav-item.yaml, nav-group.yaml), not a
310
+ typographic role, but this attribute selector matches any element. The
311
+ exclusion must live HERE: this rule is in @layer utilities, component
312
+ sheets load in the earlier @layer components (styles/index.css), so a
313
+ later-layer match beats anything a component declares about itself —
314
+ nav cannot defend its own text. Seen live: nav rails rendering the
315
+ theme's display face (e.g. velour's Playfair) at heading weight.
316
+ text-ui is deliberately NOT excluded — its variant enum aligns with
317
+ this grammar on purpose. */
318
+ [variant="section"]:not(nav-ui, nav-item-ui, nav-group-ui) {
309
319
  font-family: var(--a-section-family);
310
320
  font-weight: var(--a-section-weight);
311
321
  font-size: var(--a-section-size);