@adia-ai/web-components 0.8.15 → 0.8.16

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 (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/host.min.css +1 -1
  3. package/dist/host.sheet.js +1 -1
  4. package/dist/theme-provider.min.js +1 -1
  5. package/dist/web-components.min.css +1 -1
  6. package/dist/web-components.sheet.js +1 -1
  7. package/package.json +1 -1
  8. package/styles/colors/material-static.css +24 -24
  9. package/styles/theme-fonts-url.txt +2 -1
  10. package/styles/themes.css +13 -4
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.16",
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,13 +71,13 @@
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));
@@ -163,13 +163,13 @@
163
163
  --md-sys-color-primary-500-900: oklch(0.6498 0.1222 224.12 / 90%);
164
164
  --md-sys-color-primary-500-950: oklch(0.6498 0.1222 224.12 / 95%);
165
165
  /* Primary — semantic roles */
166
- --md-sys-color-primary: light-dark(var(--md-sys-color-primary-500), var(--md-sys-color-primary-500));
166
+ --md-sys-color-primary: light-dark(var(--md-sys-color-primary-600), var(--md-sys-color-primary-600));
167
167
  --md-sys-color-primary-dim: light-dark(var(--md-sys-color-primary-650), var(--md-sys-color-primary-700));
168
168
  --md-sys-color-primary-bright: light-dark(var(--md-sys-color-primary-350), var(--md-sys-color-primary-400));
169
169
  --md-sys-color-primary-low: light-dark(var(--md-sys-color-primary-350), var(--md-sys-color-primary-700));
170
170
  --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));
171
+ --md-sys-color-primary-hover: light-dark(var(--md-sys-color-primary-650), var(--md-sys-color-primary-650));
172
+ --md-sys-color-primary-active: light-dark(var(--md-sys-color-primary-700), var(--md-sys-color-primary-700));
173
173
  --md-sys-color-primary-disabled: light-dark(var(--md-sys-color-primary-500-600), var(--md-sys-color-primary-500-600));
174
174
  --md-sys-color-primary-on-primary: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
175
175
  --md-sys-color-primary-on-primary-variant: light-dark(var(--md-sys-color-primary-200), var(--md-sys-color-primary-200));
@@ -255,13 +255,13 @@
255
255
  --md-sys-color-secondary-500-900: oklch(0.6683 0.0985 204.61 / 90%);
256
256
  --md-sys-color-secondary-500-950: oklch(0.6683 0.0985 204.61 / 95%);
257
257
  /* Secondary — semantic roles */
258
- --md-sys-color-secondary: light-dark(var(--md-sys-color-secondary-500), var(--md-sys-color-secondary-500));
258
+ --md-sys-color-secondary: light-dark(var(--md-sys-color-secondary-650), var(--md-sys-color-secondary-650));
259
259
  --md-sys-color-secondary-dim: light-dark(var(--md-sys-color-secondary-650), var(--md-sys-color-secondary-700));
260
260
  --md-sys-color-secondary-bright: light-dark(var(--md-sys-color-secondary-350), var(--md-sys-color-secondary-400));
261
261
  --md-sys-color-secondary-low: light-dark(var(--md-sys-color-secondary-350), var(--md-sys-color-secondary-700));
262
262
  --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));
263
+ --md-sys-color-secondary-hover: light-dark(var(--md-sys-color-secondary-700), var(--md-sys-color-secondary-700));
264
+ --md-sys-color-secondary-active: light-dark(var(--md-sys-color-secondary-750), var(--md-sys-color-secondary-750));
265
265
  --md-sys-color-secondary-disabled: light-dark(var(--md-sys-color-secondary-500-600), var(--md-sys-color-secondary-500-600));
266
266
  --md-sys-color-secondary-on-secondary: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
267
267
  --md-sys-color-secondary-on-secondary-variant: light-dark(var(--md-sys-color-secondary-200), var(--md-sys-color-secondary-200));
@@ -347,13 +347,13 @@
347
347
  --md-sys-color-tertiary-500-900: oklch(0.5993 0.2006 285.17 / 90%);
348
348
  --md-sys-color-tertiary-500-950: oklch(0.5993 0.2006 285.17 / 95%);
349
349
  /* Tertiary — semantic roles */
350
- --md-sys-color-tertiary: light-dark(var(--md-sys-color-tertiary-500), var(--md-sys-color-tertiary-500));
350
+ --md-sys-color-tertiary: light-dark(var(--md-sys-color-tertiary-600), var(--md-sys-color-tertiary-600));
351
351
  --md-sys-color-tertiary-dim: light-dark(var(--md-sys-color-tertiary-650), var(--md-sys-color-tertiary-700));
352
352
  --md-sys-color-tertiary-bright: light-dark(var(--md-sys-color-tertiary-350), var(--md-sys-color-tertiary-400));
353
353
  --md-sys-color-tertiary-low: light-dark(var(--md-sys-color-tertiary-350), var(--md-sys-color-tertiary-700));
354
354
  --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));
355
+ --md-sys-color-tertiary-hover: light-dark(var(--md-sys-color-tertiary-650), var(--md-sys-color-tertiary-650));
356
+ --md-sys-color-tertiary-active: light-dark(var(--md-sys-color-tertiary-700), var(--md-sys-color-tertiary-700));
357
357
  --md-sys-color-tertiary-disabled: light-dark(var(--md-sys-color-tertiary-500-600), var(--md-sys-color-tertiary-500-600));
358
358
  --md-sys-color-tertiary-on-tertiary: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
359
359
  --md-sys-color-tertiary-on-tertiary-variant: light-dark(var(--md-sys-color-tertiary-200), var(--md-sys-color-tertiary-200));
@@ -439,13 +439,13 @@
439
439
  --md-sys-color-info-500-900: oklch(0.5984 0.1736 265.15 / 90%);
440
440
  --md-sys-color-info-500-950: oklch(0.5984 0.1736 265.15 / 95%);
441
441
  /* Info — semantic roles */
442
- --md-sys-color-info: light-dark(var(--md-sys-color-info-500), var(--md-sys-color-info-500));
442
+ --md-sys-color-info: light-dark(var(--md-sys-color-info-600), var(--md-sys-color-info-600));
443
443
  --md-sys-color-info-dim: light-dark(var(--md-sys-color-info-650), var(--md-sys-color-info-700));
444
444
  --md-sys-color-info-bright: light-dark(var(--md-sys-color-info-350), var(--md-sys-color-info-400));
445
445
  --md-sys-color-info-low: light-dark(var(--md-sys-color-info-350), var(--md-sys-color-info-700));
446
446
  --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));
447
+ --md-sys-color-info-hover: light-dark(var(--md-sys-color-info-650), var(--md-sys-color-info-650));
448
+ --md-sys-color-info-active: light-dark(var(--md-sys-color-info-700), var(--md-sys-color-info-700));
449
449
  --md-sys-color-info-disabled: light-dark(var(--md-sys-color-info-500-600), var(--md-sys-color-info-500-600));
450
450
  --md-sys-color-info-on-info: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
451
451
  --md-sys-color-info-on-info-variant: light-dark(var(--md-sys-color-info-200), var(--md-sys-color-info-200));
@@ -531,13 +531,13 @@
531
531
  --md-sys-color-success-500-900: oklch(0.5987 0.1161 150.34 / 90%);
532
532
  --md-sys-color-success-500-950: oklch(0.5987 0.1161 150.34 / 95%);
533
533
  /* Success — semantic roles */
534
- --md-sys-color-success: light-dark(var(--md-sys-color-success-500), var(--md-sys-color-success-500));
534
+ --md-sys-color-success: light-dark(var(--md-sys-color-success-600), var(--md-sys-color-success-600));
535
535
  --md-sys-color-success-dim: light-dark(var(--md-sys-color-success-650), var(--md-sys-color-success-700));
536
536
  --md-sys-color-success-bright: light-dark(var(--md-sys-color-success-350), var(--md-sys-color-success-400));
537
537
  --md-sys-color-success-low: light-dark(var(--md-sys-color-success-350), var(--md-sys-color-success-700));
538
538
  --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));
539
+ --md-sys-color-success-hover: light-dark(var(--md-sys-color-success-650), var(--md-sys-color-success-650));
540
+ --md-sys-color-success-active: light-dark(var(--md-sys-color-success-700), var(--md-sys-color-success-700));
541
541
  --md-sys-color-success-disabled: light-dark(var(--md-sys-color-success-500-600), var(--md-sys-color-success-500-600));
542
542
  --md-sys-color-success-on-success: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
543
543
  --md-sys-color-success-on-success-variant: light-dark(var(--md-sys-color-success-200), var(--md-sys-color-success-200));
@@ -623,13 +623,13 @@
623
623
  --md-sys-color-warning-500-900: oklch(0.791 0.1581 75.1 / 90%);
624
624
  --md-sys-color-warning-500-950: oklch(0.791 0.1581 75.1 / 95%);
625
625
  /* Warning — semantic roles */
626
- --md-sys-color-warning: light-dark(var(--md-sys-color-warning-500), var(--md-sys-color-warning-500));
626
+ --md-sys-color-warning: light-dark(var(--md-sys-color-warning-700), var(--md-sys-color-warning-700));
627
627
  --md-sys-color-warning-dim: light-dark(var(--md-sys-color-warning-650), var(--md-sys-color-warning-700));
628
628
  --md-sys-color-warning-bright: light-dark(var(--md-sys-color-warning-350), var(--md-sys-color-warning-400));
629
629
  --md-sys-color-warning-low: light-dark(var(--md-sys-color-warning-350), var(--md-sys-color-warning-700));
630
630
  --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));
631
+ --md-sys-color-warning-hover: light-dark(var(--md-sys-color-warning-750), var(--md-sys-color-warning-750));
632
+ --md-sys-color-warning-active: light-dark(var(--md-sys-color-warning-800), var(--md-sys-color-warning-800));
633
633
  --md-sys-color-warning-disabled: light-dark(var(--md-sys-color-warning-500-600), var(--md-sys-color-warning-500-600));
634
634
  --md-sys-color-warning-on-warning: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
635
635
  --md-sys-color-warning-on-warning-variant: light-dark(var(--md-sys-color-warning-200), var(--md-sys-color-warning-200));
@@ -715,13 +715,13 @@
715
715
  --md-sys-color-danger-500-900: oklch(0.5992 0.1622 25.47 / 90%);
716
716
  --md-sys-color-danger-500-950: oklch(0.5992 0.1622 25.47 / 95%);
717
717
  /* Danger — semantic roles */
718
- --md-sys-color-danger: light-dark(var(--md-sys-color-danger-500), var(--md-sys-color-danger-500));
718
+ --md-sys-color-danger: light-dark(var(--md-sys-color-danger-600), var(--md-sys-color-danger-600));
719
719
  --md-sys-color-danger-dim: light-dark(var(--md-sys-color-danger-650), var(--md-sys-color-danger-700));
720
720
  --md-sys-color-danger-bright: light-dark(var(--md-sys-color-danger-350), var(--md-sys-color-danger-400));
721
721
  --md-sys-color-danger-low: light-dark(var(--md-sys-color-danger-350), var(--md-sys-color-danger-700));
722
722
  --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));
723
+ --md-sys-color-danger-hover: light-dark(var(--md-sys-color-danger-650), var(--md-sys-color-danger-650));
724
+ --md-sys-color-danger-active: light-dark(var(--md-sys-color-danger-700), var(--md-sys-color-danger-700));
725
725
  --md-sys-color-danger-disabled: light-dark(var(--md-sys-color-danger-500-600), var(--md-sys-color-danger-500-600));
726
726
  --md-sys-color-danger-on-danger: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
727
727
  --md-sys-color-danger-on-danger-variant: light-dark(var(--md-sys-color-danger-200), var(--md-sys-color-danger-200));
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,