@adia-ai/web-components 0.7.28 → 0.8.1

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 (158) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/components/accordion/accordion.css +13 -4
  3. package/components/action-list/action-list.css +3 -3
  4. package/components/agent-artifact/agent-artifact.css +4 -4
  5. package/components/agent-questions/agent-questions.css +8 -8
  6. package/components/agent-reasoning/agent-reasoning.css +6 -6
  7. package/components/agent-trace/agent-trace.css +4 -4
  8. package/components/agent-trace/agent-trace.js +1 -1
  9. package/components/alert/alert.css +16 -16
  10. package/components/avatar/avatar.css +3 -3
  11. package/components/badge/badge.css +32 -32
  12. package/components/blockquote/blockquote.css +1 -1
  13. package/components/breadcrumb/breadcrumb.css +2 -2
  14. package/components/button/button.css +14 -14
  15. package/components/calendar-grid/calendar-grid.a2ui.json +3 -3
  16. package/components/calendar-grid/calendar-grid.css +10 -10
  17. package/components/calendar-grid/calendar-grid.yaml +3 -3
  18. package/components/calendar-picker/calendar-picker.css +11 -11
  19. package/components/canvas/canvas.css +2 -2
  20. package/components/card/card.css +15 -15
  21. package/components/chart/chart.css +23 -23
  22. package/components/chart-legend/chart-legend.css +2 -2
  23. package/components/chat-thread/chat-input.css +6 -6
  24. package/components/chat-thread/chat-thread.css +7 -7
  25. package/components/check/check.css +4 -4
  26. package/components/code/code-editor.js +1 -1
  27. package/components/code/code.css +45 -22
  28. package/components/color-picker/color-picker.css +4 -4
  29. package/components/combobox/combobox.css +6 -6
  30. package/components/command/command.class.js +14 -3
  31. package/components/command/command.css +4 -4
  32. package/components/context-menu/context-menu.css +2 -2
  33. package/components/date-range-picker/date-range-picker.a2ui.json +3 -3
  34. package/components/date-range-picker/date-range-picker.css +8 -8
  35. package/components/date-range-picker/date-range-picker.yaml +3 -3
  36. package/components/datetime-picker/datetime-picker.css +6 -6
  37. package/components/demo-toggle/demo-toggle.css +4 -4
  38. package/components/description-list/description-list.css +1 -1
  39. package/components/display-field/display-field.css +2 -2
  40. package/components/divider/divider.css +1 -1
  41. package/components/drawer/drawer.css +7 -7
  42. package/components/embed/embed.css +1 -1
  43. package/components/empty-state/empty-state.css +5 -5
  44. package/components/feed/feed.css +7 -7
  45. package/components/field/field.css +2 -2
  46. package/components/heatmap/heatmap.css +8 -8
  47. package/components/inline-edit/inline-edit.a2ui.json +1 -1
  48. package/components/inline-edit/inline-edit.css +3 -3
  49. package/components/inline-edit/inline-edit.yaml +1 -1
  50. package/components/inline-message/inline-message.css +4 -4
  51. package/components/input/input.css +1 -1
  52. package/components/inspector/inspector.css +1 -1
  53. package/components/integration-card/integration-card.css +3 -3
  54. package/components/kbd/kbd.css +2 -2
  55. package/components/link/link.css +2 -2
  56. package/components/list/list.css +10 -10
  57. package/components/list-window/list-window.css +2 -2
  58. package/components/mark/mark.css +9 -9
  59. package/components/menu/menu.css +9 -9
  60. package/components/modal/modal.css +4 -4
  61. package/components/nav/nav.css +1 -1
  62. package/components/nav-group/nav-group.css +7 -16
  63. package/components/nav-item/nav-item.css +1 -1
  64. package/components/noodles/noodles.a2ui.json +1 -1
  65. package/components/noodles/noodles.css +3 -3
  66. package/components/noodles/noodles.d.ts +1 -1
  67. package/components/noodles/noodles.yaml +1 -1
  68. package/components/option-card/option-card.css +11 -11
  69. package/components/otp-input/otp-input.css +1 -1
  70. package/components/page/page.css +2 -2
  71. package/components/pane/pane.css +5 -5
  72. package/components/password-strength/password-strength.css +1 -1
  73. package/components/pipeline-status/pipeline-status.css +9 -9
  74. package/components/popover/popover.css +2 -2
  75. package/components/preview/preview.css +14 -3
  76. package/components/progress/progress.a2ui.json +1 -1
  77. package/components/progress/progress.css +1 -1
  78. package/components/progress/progress.d.ts +1 -1
  79. package/components/progress/progress.yaml +1 -1
  80. package/components/progress-row/progress-row.css +2 -2
  81. package/components/radio/radio.css +4 -4
  82. package/components/range/range.css +2 -2
  83. package/components/rating/rating.css +2 -2
  84. package/components/richtext/richtext.class.js +4 -0
  85. package/components/richtext/richtext.css +5 -5
  86. package/components/richtext/richtext.yaml +1 -0
  87. package/components/row/row.css +1 -1
  88. package/components/select/select.css +8 -8
  89. package/components/skip-nav/skip-nav.a2ui.json +2 -2
  90. package/components/skip-nav/skip-nav.css +3 -3
  91. package/components/skip-nav/skip-nav.yaml +2 -2
  92. package/components/slider/slider.css +5 -5
  93. package/components/spinner/spinner.css +2 -2
  94. package/components/spinner/spinner.test.js +4 -2
  95. package/components/stat/stat.css +1 -1
  96. package/components/step-progress/step-progress.a2ui.json +1 -1
  97. package/components/step-progress/step-progress.class.js +1 -1
  98. package/components/step-progress/step-progress.css +2 -2
  99. package/components/step-progress/step-progress.d.ts +1 -1
  100. package/components/step-progress/step-progress.yaml +1 -1
  101. package/components/stepper/stepper.css +22 -22
  102. package/components/stream/stream.css +2 -2
  103. package/components/swatch/swatch.class.js +1 -1
  104. package/components/swatch/swatch.css +11 -11
  105. package/components/swiper/swiper.css +5 -5
  106. package/components/switch/switch.css +5 -5
  107. package/components/table/cell-types.js +1 -1
  108. package/components/table/table.css +16 -11
  109. package/components/table-toolbar/table-toolbar.css +8 -8
  110. package/components/tabs/tabs.css +5 -5
  111. package/components/tag/tag.css +41 -29
  112. package/components/tag/tag.test.js +22 -29
  113. package/components/tags-input/tags-input.a2ui.json +2 -2
  114. package/components/tags-input/tags-input.class.js +93 -20
  115. package/components/tags-input/tags-input.css +3 -3
  116. package/components/tags-input/tags-input.test.js +109 -0
  117. package/components/tags-input/tags-input.yaml +18 -4
  118. package/components/text/text.css +4 -4
  119. package/components/textarea/textarea.css +1 -1
  120. package/components/time-picker/time-picker.css +2 -2
  121. package/components/timeline/timeline.css +31 -31
  122. package/components/toast/toast.css +19 -19
  123. package/components/toc/toc.a2ui.json +1 -1
  124. package/components/toc/toc.css +3 -3
  125. package/components/toc/toc.yaml +1 -1
  126. package/components/toggle-group/toggle-group.css +3 -3
  127. package/components/toolbar/toolbar.css +3 -3
  128. package/components/tooltip/tooltip.css +9 -9
  129. package/components/tour/tour.css +3 -3
  130. package/components/tree/tree.css +2 -2
  131. package/components/upload/upload.css +7 -7
  132. package/dist/host.min.css +1 -1
  133. package/dist/host.sheet.js +1 -1
  134. package/dist/theme-provider.min.js +7 -7
  135. package/dist/themes.min.css +1 -1
  136. package/dist/themes.sheet.js +1 -1
  137. package/dist/web-components.min.css +1 -1
  138. package/dist/web-components.min.js +41 -41
  139. package/dist/web-components.sheet.js +1 -1
  140. package/package.json +3 -3
  141. package/styles/api/text.css +1 -1
  142. package/styles/colors/bridges/material-bridge.css +30 -0
  143. package/styles/colors/index.css +19 -1
  144. package/styles/colors/material-static.css +771 -0
  145. package/styles/colors/parameters.css +40 -4
  146. package/styles/colors/primitives-primary.css +89 -0
  147. package/styles/colors/primitives-secondary.css +89 -0
  148. package/styles/colors/primitives-tertiary.css +89 -0
  149. package/styles/colors/primitives.css +3 -1
  150. package/styles/colors/scrims.css +19 -180
  151. package/styles/colors/semantics/aliases.css +25 -11
  152. package/styles/colors/semantics/buckets.css +28 -12
  153. package/styles/colors/semantics/core.css +330 -202
  154. package/styles/colors/semantics/data-viz.css +13 -13
  155. package/styles/colors/semantics/features.css +31 -13
  156. package/styles/colors/surfaces.css +41 -31
  157. package/styles/themes.css +15 -15
  158. package/styles/colors/primitives-accent.css +0 -89
package/components/skip-nav/skip-nav.a2ui.json CHANGED
@@ -79,11 +79,11 @@
79
79
  "tokens": {
80
80
  "--skip-nav-bg": {
81
81
  "description": "Background of the visible (focused) skip link.",
82
- "default": "var(--a-accent-bg)"
82
+ "default": "var(--a-primary-bg)"
83
83
  },
84
84
  "--skip-nav-fg": {
85
85
  "description": "Foreground of the visible (focused) skip link.",
86
- "default": "var(--a-accent-fg)"
86
+ "default": "var(--md-sys-color-primary-on-primary)"
87
87
  }
88
88
  },
89
89
  "traits": [],
package/components/skip-nav/skip-nav.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @scope (skip-nav-ui) {
2
2
  :where(:scope) {
3
- --skip-nav-bg: var(--a-accent-bg);
4
- --skip-nav-fg: var(--a-accent-fg);
3
+ --skip-nav-bg: var(--a-primary-bg);
4
+ --skip-nav-fg: var(--md-sys-color-primary-on-primary);
5
5
  }
6
6
 
7
7
  /* Host renders nothing in flow — pure behavioral wrapper. The inner
@@ -48,7 +48,7 @@
48
48
  overflow: visible;
49
49
  clip: auto;
50
50
  clip-path: none;
51
- outline: 2px solid var(--a-accent-bg);
51
+ outline: 2px solid var(--a-primary-bg);
52
52
  outline-offset: 2px;
53
53
  }
54
54
  }
package/components/skip-nav/skip-nav.yaml CHANGED
@@ -36,10 +36,10 @@ traits: []
36
36
  tokens:
37
37
  --skip-nav-bg:
38
38
  description: Background of the visible (focused) skip link.
39
- default: var(--a-accent-bg)
39
+ default: var(--a-primary-bg)
40
40
  --skip-nav-fg:
41
41
  description: Foreground of the visible (focused) skip link.
42
- default: var(--a-accent-fg)
42
+ default: var(--md-sys-color-primary-on-primary)
43
43
  a2ui:
44
44
  rules:
45
45
  - rule: 'Place as the FIRST focusable element on the page — inside <body> before any nav / shell chrome. Otherwise keyboard users still tab through the nav before hitting the skip link.'
package/components/slider/slider.css CHANGED
@@ -95,8 +95,8 @@
95
95
  --slider-track-bg: var(--a-bg-muted);
96
96
  --slider-fill-bg: var(--a-primary-bg);
97
97
  --slider-thumb-bg: var(--a-chrome-light);
98
- --slider-fill-bg-disabled: var(--a-canvas-1-scrim);
99
- --slider-thumb-bg-disabled: var(--a-canvas-2-scrim);
98
+ --slider-fill-bg-disabled: var(--md-sys-color-neutral-scrim-weaker);
99
+ --slider-thumb-bg-disabled: var(--md-sys-color-neutral-scrim-weak);
100
100
 
101
101
  /* ── Typography ── */
102
102
  --slider-font-size: var(--a-ui-size);
@@ -134,7 +134,7 @@
134
134
  }
135
135
 
136
136
  [slot="label"] {
137
- color: var(--a-fg-subtle);
137
+ color: var(--md-sys-color-neutral-on-surface-variant);
138
138
  }
139
139
 
140
140
  [slot="readout"] {
@@ -144,7 +144,7 @@
144
144
  }
145
145
 
146
146
  [slot="value"] {
147
- color: var(--a-fg);
147
+ color: var(--md-sys-color-neutral-on-surface);
148
148
  font-weight: var(--slider-value-weight);
149
149
  font-variant-numeric: tabular-nums;
150
150
  }
@@ -286,7 +286,7 @@
286
286
  }
287
287
  :scope[dual] [slot="value-lower"],
288
288
  :scope[dual] [slot="value-upper"] {
289
- color: var(--a-fg);
289
+ color: var(--md-sys-color-neutral-on-surface);
290
290
  font-weight: var(--slider-value-weight);
291
291
  font-variant-numeric: tabular-nums;
292
292
  }
package/components/spinner/spinner.css CHANGED
@@ -45,8 +45,8 @@
45
45
 
46
46
  /* ── Tones (override --spinner-color token) ────────────────────── */
47
47
  :scope[tone="current"] { --spinner-color: currentColor; }
48
- :scope[tone="subtle"] { --spinner-color: var(--a-fg-subtle); }
49
- :scope[tone="accent"] { --spinner-color: var(--a-accent-strong); }
48
+ :scope[tone="subtle"] { --spinner-color: var(--md-sys-color-neutral-on-surface-variant); }
49
+ :scope[tone="accent"] { --spinner-color: var(--a-primary-strong); }
50
50
  :scope[tone="inverse"] { --spinner-color: var(--a-chrome-light); }
51
51
 
52
52
  /* ── Variant: ARC (default) — rotating quarter-circle border ───── */
package/components/spinner/spinner.test.js CHANGED
@@ -191,8 +191,10 @@ describe('spinner-ui — CSS source contract', () => {
191
191
  });
192
192
 
193
193
  it('tone="subtle" / "accent" / "inverse" set --spinner-color via semantic tokens', () => {
194
- expect(SPINNER_CSS).toMatch(/:scope\[tone="subtle"\][^}]*--spinner-color:\s*var\(--a-fg-subtle\)/);
195
- expect(SPINNER_CSS).toMatch(/:scope\[tone="accent"\][^}]*--spinner-color:\s*var\(--a-accent-strong\)/);
194
+ // subtle reads the Material on-surface-variant role since the
195
+ // static-token migration (material-color-bridge-contract.md).
196
+ expect(SPINNER_CSS).toMatch(/:scope\[tone="subtle"\][^}]*--spinner-color:\s*var\(--md-sys-color-neutral-on-surface-variant\)/);
197
+ expect(SPINNER_CSS).toMatch(/:scope\[tone="accent"\][^}]*--spinner-color:\s*var\(--a-primary-strong\)/);
196
198
  expect(SPINNER_CSS).toMatch(/:scope\[tone="inverse"\][^}]*--spinner-color:\s*var\(--a-chrome-light\)/);
197
199
  });
198
200
 
package/components/stat/stat.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --stat-value-weight: var(--a-weight-bold);
7
7
  --stat-value-fg: var(--a-fg-strong);
8
8
  --stat-label-size: var(--a-ui-size);
9
- --stat-label-fg: var(--a-fg);
9
+ --stat-label-fg: var(--md-sys-color-neutral-on-surface);
10
10
  --stat-change-size: var(--a-ui-size);
11
11
  --stat-up-fg: var(--a-success-bg);
12
12
  --stat-down-fg: var(--a-danger-bg);
package/components/step-progress/step-progress.a2ui.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$id": "https://adiaui.dev/a2ui/v0_9/components/StepProgress.json",
4
4
  "title": "StepProgress",
5
- "description": "Discrete-dash step-progress indicator. One <span> dash per step in\n[total]; the first [value] dashes are filled with --a-accent. Used\nin multi-step flows (registration, onboarding, wizards). Replaces\nthe bespoke `[data-onb-progress]` + `[data-reg-progress]` markup\nthat lived in onboarding.css + registration.css with a single\nprimitive.\n",
5
+ "description": "Discrete-dash step-progress indicator. One <span> dash per step in\n[total]; the first [value] dashes are filled with --md-sys-color-primary. Used\nin multi-step flows (registration, onboarding, wizards). Replaces\nthe bespoke `[data-onb-progress]` + `[data-reg-progress]` markup\nthat lived in onboarding.css + registration.css with a single\nprimitive.\n",
6
6
  "type": "object",
7
7
  "allOf": [
8
8
  {
package/components/step-progress/step-progress.class.js CHANGED
@@ -18,7 +18,7 @@
18
18
  *
19
19
  * Discrete-dash step progress indicator. One dash per step in the
20
20
  * total; the first `value` dashes carry [data-active] and paint with
21
- * --a-accent. Used in registration + onboarding flows; replaces the
21
+ * --a-primary. Used in registration + onboarding flows; replaces the
22
22
  * bespoke `[data-onb-progress]` / `[data-reg-progress]` markup.
23
23
  *
24
24
  * Primitive shape (per ROADMAP § Done):
package/components/step-progress/step-progress.css CHANGED
@@ -9,8 +9,8 @@
9
9
  --step-progress-track-gap: var(--a-space-1);
10
10
  --step-progress-dash-h: 4px;
11
11
  --step-progress-dash-radius: var(--a-radius-full);
12
- --step-progress-dash-bg: var(--a-border-subtle);
13
- --step-progress-dash-bg-active: var(--a-accent);
12
+ --step-progress-dash-bg: var(--md-sys-color-neutral-outline-variant);
13
+ --step-progress-dash-bg-active: var(--md-sys-color-primary);
14
14
  --step-progress-caption-fg: var(--a-fg-muted);
15
15
  --step-progress-caption-size: var(--a-ui-sm);
16
16
 
package/components/step-progress/step-progress.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * `<step-progress-ui>` — Discrete-dash step-progress indicator. One <span> dash per step in
3
- [total]; the first [value] dashes are filled with --a-accent. Used
3
+ [total]; the first [value] dashes are filled with --md-sys-color-primary. Used
4
4
  in multi-step flows (registration, onboarding, wizards). Replaces
5
5
  the bespoke `[data-onb-progress]` + `[data-reg-progress]` markup
6
6
  that lived in onboarding.css + registration.css with a single
package/components/step-progress/step-progress.yaml CHANGED
@@ -7,7 +7,7 @@ category: feedback
7
7
  version: 1
8
8
  description: |
9
9
  Discrete-dash step-progress indicator. One <span> dash per step in
10
- [total]; the first [value] dashes are filled with --a-accent. Used
10
+ [total]; the first [value] dashes are filled with --md-sys-color-primary. Used
11
11
  in multi-step flows (registration, onboarding, wizards). Replaces
12
12
  the bespoke `[data-onb-progress]` + `[data-reg-progress]` markup
13
13
  that lived in onboarding.css + registration.css with a single
package/components/stepper/stepper.css CHANGED
@@ -13,23 +13,23 @@
13
13
  :where(:scope) {
14
14
  /* ── Circle ── */
15
15
  --stepper-size: 2rem;
16
- --stepper-bg: var(--a-bg);
17
- --stepper-border: var(--a-border);
16
+ --stepper-bg: var(--md-sys-color-neutral-background);
17
+ --stepper-border: var(--md-sys-color-neutral-outline);
18
18
  --stepper-fg: var(--a-fg-muted);
19
19
  --stepper-font: var(--a-ui-sm);
20
20
  --stepper-weight: var(--a-weight-medium);
21
21
  --stepper-border-size: 2px;
22
22
 
23
- --stepper-bg-active: var(--a-bg);
24
- --stepper-border-active: var(--a-accent);
25
- --stepper-fg-active: var(--a-accent);
23
+ --stepper-bg-active: var(--md-sys-color-neutral-background);
24
+ --stepper-border-active: var(--md-sys-color-primary);
25
+ --stepper-fg-active: var(--md-sys-color-primary);
26
26
 
27
- --stepper-bg-done: var(--a-accent);
28
- --stepper-border-done: var(--a-accent);
29
- --stepper-fg-done: var(--a-accent-fg);
27
+ --stepper-bg-done: var(--md-sys-color-primary);
28
+ --stepper-border-done: var(--md-sys-color-primary);
29
+ --stepper-fg-done: var(--md-sys-color-primary-on-primary);
30
30
 
31
- --stepper-line: var(--a-border-subtle);
32
- --stepper-line-done: var(--a-accent);
31
+ --stepper-line: var(--md-sys-color-neutral-outline-variant);
32
+ --stepper-line-done: var(--md-sys-color-primary);
33
33
  --stepper-line-size: 2px;
34
34
 
35
35
  /* ── Layout ──
@@ -69,23 +69,23 @@
69
69
  co-located item legitimately reads parent tokens (the same
70
70
  scope pattern as menu-item-ui inside menu-ui's popover). */
71
71
  --stepper-item-size: var(--stepper-size, 2rem);
72
- --stepper-item-bg: var(--stepper-bg, var(--a-bg));
73
- --stepper-item-border: var(--stepper-border, var(--a-border));
72
+ --stepper-item-bg: var(--stepper-bg, var(--md-sys-color-neutral-background));
73
+ --stepper-item-border: var(--stepper-border, var(--md-sys-color-neutral-outline));
74
74
  --stepper-item-fg: var(--stepper-fg, var(--a-fg-muted));
75
75
  --stepper-item-font: var(--stepper-font, var(--a-ui-sm));
76
76
  --stepper-item-weight: var(--stepper-weight, var(--a-weight-medium));
77
77
  --stepper-item-border-size: var(--stepper-border-size, 2px);
78
78
 
79
- --stepper-item-bg-active: var(--stepper-bg-active, var(--a-bg));
80
- --stepper-item-border-active: var(--stepper-border-active, var(--a-accent));
81
- --stepper-item-fg-active: var(--stepper-fg-active, var(--a-accent));
79
+ --stepper-item-bg-active: var(--stepper-bg-active, var(--md-sys-color-neutral-background));
80
+ --stepper-item-border-active: var(--stepper-border-active, var(--md-sys-color-primary));
81
+ --stepper-item-fg-active: var(--stepper-fg-active, var(--md-sys-color-primary));
82
82
 
83
- --stepper-item-bg-done: var(--stepper-bg-done, var(--a-accent));
84
- --stepper-item-border-done: var(--stepper-border-done, var(--a-accent));
85
- --stepper-item-fg-done: var(--stepper-fg-done, var(--a-accent-fg));
83
+ --stepper-item-bg-done: var(--stepper-bg-done, var(--md-sys-color-primary));
84
+ --stepper-item-border-done: var(--stepper-border-done, var(--md-sys-color-primary));
85
+ --stepper-item-fg-done: var(--stepper-fg-done, var(--md-sys-color-primary-on-primary));
86
86
 
87
- --stepper-item-line: var(--stepper-line, var(--a-border-subtle));
88
- --stepper-item-line-done: var(--stepper-line-done, var(--a-accent));
87
+ --stepper-item-line: var(--stepper-line, var(--md-sys-color-neutral-outline-variant));
88
+ --stepper-item-line-done: var(--stepper-line-done, var(--md-sys-color-primary));
89
89
  --stepper-item-line-size: var(--stepper-line-size, 2px);
90
90
 
91
91
  --stepper-item-radius-full: var(--a-radius-full);
@@ -98,9 +98,9 @@
98
98
 
99
99
  --stepper-item-label-weight: var(--a-weight-medium);
100
100
  --stepper-item-label-size: var(--a-ui-size);
101
- --stepper-item-label-fg: var(--a-fg);
101
+ --stepper-item-label-fg: var(--md-sys-color-neutral-on-surface);
102
102
  --stepper-item-pending-fg: var(--a-fg-muted);
103
- --stepper-item-desc-fg: var(--a-fg-subtle);
103
+ --stepper-item-desc-fg: var(--md-sys-color-neutral-on-surface-variant);
104
104
  --stepper-item-desc-size: var(--a-ui-sm);
105
105
 
106
106
  --stepper-item-icon-size: 0.625rem;
package/components/stream/stream.css CHANGED
@@ -1,10 +1,10 @@
1
1
  @scope (stream-ui) {
2
2
  :where(:scope) {
3
- --stream-fg: var(--a-fg);
3
+ --stream-fg: var(--md-sys-color-neutral-on-surface);
4
4
  --stream-font-size: var(--a-body-size);
5
5
  --stream-font-family: var(--a-font-family);
6
6
  --stream-leading: var(--a-body-leading);
7
- --stream-cursor-color: var(--a-accent-bg);
7
+ --stream-cursor-color: var(--a-primary-bg);
8
8
  --stream-blink-duration: 0.6s;
9
9
  }
10
10
 
package/components/swatch/swatch.class.js CHANGED
@@ -540,7 +540,7 @@ export class UISwatch extends UIElement {
540
540
  }
541
541
  // Resolve the actual rendered color. For var(...) refs the inline
542
542
  // [color] attr is what was set; we read from computed style so that
543
- // CSS-resolved tokens (e.g. var(--a-accent)) get their final value.
543
+ // CSS-resolved tokens (e.g. var(--md-sys-color-primary)) get their final value.
544
544
  const probe = this.color || getComputedStyle(this).getPropertyValue('--swatch-color').trim();
545
545
  if (probe === this.#lastColorForContrast) return;
546
546
  this.#lastColorForContrast = probe;
package/components/swatch/swatch.css CHANGED
@@ -18,7 +18,7 @@
18
18
  <swatch-ui> still renders something visible; consumers usually set
19
19
  --swatch-color via [color] attr or inline style. */
20
20
  --swatch-color: var(--a-data-0);
21
- --swatch-label-fg: var(--a-fg-subtle);
21
+ --swatch-label-fg: var(--md-sys-color-neutral-on-surface-variant);
22
22
 
23
23
  /* ── Shape ── */
24
24
  --swatch-radius-block: var(--a-radius-sm);
@@ -32,7 +32,7 @@
32
32
  --swatch-label-step-size: 10px;
33
33
  --swatch-label-step-mt: 4px;
34
34
  --swatch-detail-size: var(--a-ui-xs);
35
- --swatch-detail-fg: var(--a-fg-subtle);
35
+ --swatch-detail-fg: var(--md-sys-color-neutral-on-surface-variant);
36
36
 
37
37
  /* ── Badge ── */
38
38
  --swatch-badge-size: var(--a-ui-xs);
@@ -44,11 +44,11 @@
44
44
  /* ── Copy button ── */
45
45
  --swatch-copy-size: var(--a-space-3);
46
46
  --swatch-copy-fg: var(--a-fg-muted);
47
- --swatch-copy-fg-ok: var(--a-success);
48
- --swatch-copy-fg-fail: var(--a-warning);
47
+ --swatch-copy-fg-ok: var(--md-sys-color-success);
48
+ --swatch-copy-fg-fail: var(--md-sys-color-warning);
49
49
 
50
50
  /* ── Selectable ring ── */
51
- --swatch-select-ring: var(--a-accent);
51
+ --swatch-select-ring: var(--md-sys-color-primary);
52
52
  --swatch-select-ring-width: 2px;
53
53
  }
54
54
 
@@ -238,17 +238,17 @@
238
238
  font-size: var(--swatch-badge-size);
239
239
  line-height: 1;
240
240
  border-radius: var(--swatch-badge-radius);
241
- box-shadow: 0 0 0 1px color-mix(in oklab, var(--a-border-subtle) 60%, transparent);
241
+ box-shadow: 0 0 0 1px color-mix(in oklab, var(--md-sys-color-neutral-outline-variant) 60%, transparent);
242
242
  }
243
243
 
244
244
  /* Make sure the badge has a positioning context — the tile holds it. */
245
245
  :scope { position: relative; }
246
246
 
247
247
  /* Badge variants — symbol color encodes semantic */
248
- :scope > [data-badge] > [data-badge-variant="out-of-gamut"] { color: var(--a-warning); }
249
- :scope > [data-badge] > [data-badge-variant="p3-only"] { color: var(--a-info); }
250
- :scope > [data-badge] > [data-badge-variant="apca-pass"] { color: var(--a-success); }
251
- :scope > [data-badge] > [data-badge-variant="apca-fail"] { color: var(--a-danger); }
248
+ :scope > [data-badge] > [data-badge-variant="out-of-gamut"] { color: var(--md-sys-color-warning); }
249
+ :scope > [data-badge] > [data-badge-variant="p3-only"] { color: var(--md-sys-color-info); }
250
+ :scope > [data-badge] > [data-badge-variant="apca-pass"] { color: var(--md-sys-color-success); }
251
+ :scope > [data-badge] > [data-badge-variant="apca-fail"] { color: var(--md-sys-color-danger); }
252
252
 
253
253
  /* ═══════ Auto-contrast label color ═══════
254
254
  When [auto-contrast] is set, JS computes the swatch's OKLab L and
@@ -303,7 +303,7 @@
303
303
  border-radius: var(--a-radius-xs);
304
304
  transition: color var(--a-duration-fast) var(--a-easing-out), background var(--a-duration-fast) var(--a-easing-out);
305
305
  }
306
- :scope > [data-copy]:hover { color: var(--a-fg); background: var(--a-bg-muted); }
306
+ :scope > [data-copy]:hover { color: var(--md-sys-color-neutral-on-surface); background: var(--a-bg-muted); }
307
307
  :scope > [data-copy]:focus-visible {
308
308
  outline: var(--swatch-select-ring-width) solid var(--swatch-select-ring);
309
309
  outline-offset: 1px;
package/components/swiper/swiper.css CHANGED
@@ -34,8 +34,8 @@
34
34
  the row. The hitbox stays at 1rem; only the visible circle grows. */
35
35
  --swiper-dot-size-active: calc(var(--swiper-dot-size) + var(--a-space-1));
36
36
  --swiper-dot-gap: var(--a-space-2);
37
- --swiper-dot-bg: var(--a-border);
38
- --swiper-dot-bg-active: var(--a-fg);
37
+ --swiper-dot-bg: var(--md-sys-color-neutral-outline);
38
+ --swiper-dot-bg-active: var(--md-sys-color-neutral-on-surface);
39
39
  --swiper-dot-radius: var(--a-radius-full);
40
40
 
41
41
  /* ── Host vertical rhythm ── */
@@ -52,7 +52,7 @@
52
52
  --swiper-btn-size: 3rem;
53
53
  --swiper-btn-bg: transparent;
54
54
  --swiper-btn-bg-hover: var(--a-bg-muted);
55
- --swiper-btn-fg: var(--a-fg);
55
+ --swiper-btn-fg: var(--md-sys-color-neutral-on-surface);
56
56
  --swiper-btn-radius: var(--a-radius-full);
57
57
  --swiper-btn-shadow: none;
58
58
  --swiper-btn-offset: var(--a-space-2);
@@ -245,7 +245,7 @@
245
245
  :scope[chrome="toolbar"] > [data-swiper-head] > [data-swiper-label] {
246
246
  font-size: var(--a-ui-md);
247
247
  font-weight: var(--a-weight-semibold);
248
- color: var(--a-fg);
248
+ color: var(--md-sys-color-neutral-on-surface);
249
249
  }
250
250
 
251
251
  :scope[chrome="toolbar"] > [data-swiper-head] > [data-swiper-paddles] {
@@ -255,7 +255,7 @@
255
255
 
256
256
  :scope[chrome="toolbar"] > [data-swiper-foot] > [data-swiper-counter] {
257
257
  font-size: var(--a-ui-sm);
258
- color: var(--a-fg-subtle);
258
+ color: var(--md-sys-color-neutral-on-surface-variant);
259
259
  font-variant-numeric: tabular-nums;
260
260
  }
261
261
 
package/components/switch/switch.css CHANGED
@@ -29,8 +29,8 @@ switch-ui[checked] [slot="thumb"] {
29
29
 
30
30
  /* ── Colors ── */
31
31
  --switch-track-bg-hover: var(--a-bg-muted);
32
- --switch-track-bg-checked-hover: var(--a-primary-hover);
33
- --switch-track-border-checked-hover: var(--a-primary-hover);
32
+ --switch-track-bg-checked-hover: var(--md-sys-color-primary-hover);
33
+ --switch-track-border-checked-hover: var(--md-sys-color-primary-hover);
34
34
  --switch-thumb-shadow: var(--a-shadow-sm);
35
35
 
36
36
  /* ── Transition ── */
@@ -45,11 +45,11 @@ switch-ui[checked] [slot="thumb"] {
45
45
  --switch-track-width: calc(var(--a-toggle-size) * 1.8);
46
46
  --switch-track-bg: var(--a-ui-bg);
47
47
  --switch-track-border: var(--a-ui-border);
48
- --switch-track-border-hover: var(--a-fg-subtle);
48
+ --switch-track-border-hover: var(--md-sys-color-neutral-on-surface-variant);
49
49
 
50
50
  /* ── Track: checked ── */
51
- --switch-track-bg-checked: var(--a-primary);
52
- --switch-track-border-checked: var(--a-primary);
51
+ --switch-track-bg-checked: var(--md-sys-color-primary);
52
+ --switch-track-border-checked: var(--md-sys-color-primary);
53
53
 
54
54
  /* ── Thumb ── (derived from track; inset accounts for border + visual gap) */
55
55
  --switch-thumb-inset: 2px;
package/components/table/cell-types.js CHANGED
@@ -218,7 +218,7 @@ registerCellType('link', {
218
218
  if (!el) {
219
219
  cell.textContent = '';
220
220
  el = document.createElement('a');
221
- el.style.color = 'var(--table-accent, var(--a-primary))';
221
+ el.style.color = 'var(--table-accent, var(--md-sys-color-primary))';
222
222
  el.style.textDecoration = 'none';
223
223
  cell.appendChild(el);
224
224
  }
package/components/table/table.css CHANGED
@@ -9,23 +9,28 @@
9
9
  --table-heading-fg: var(--a-fg-muted);
10
10
  --table-heading-bg: transparent;
11
11
 
12
- --table-fg: var(--a-fg);
12
+ --table-fg: var(--md-sys-color-neutral-on-surface);
13
13
  --table-fg-hover: var(--a-fg-strong);
14
14
  --table-fg-secondary: var(--a-fg-muted);
15
- --table-border: var(--a-border-subtle);
16
- --table-border-strong: var(--a-border);
15
+ --table-border: var(--md-sys-color-neutral-outline-variant);
16
+ --table-border-strong: var(--md-sys-color-neutral-outline);
17
17
  --table-py: var(--a-space-3);
18
18
  --table-px: var(--a-space-4);
19
19
 
20
20
  --table-row-bg: transparent;
21
- --table-row-bg-hover: var(--a-bg-hover);
21
+ /* container-low, not the generic --a-bg-hover state-layer token
22
+ (TKT-0020) — --a-bg-hover / --md-sys-color-neutral-hover is tuned
23
+ for small interactive targets (buttons); the same tone across a
24
+ full-width row reads too heavy. container-low is the lighter,
25
+ large-surface-appropriate tint. */
26
+ --table-row-bg-hover: var(--md-sys-color-neutral-container-low);
22
27
  --table-row-bg-selected: var(--a-bg-selected);
23
28
  --table-row-bg-striped: var(--a-bg-subtle);
24
29
 
25
30
  --table-sort-fg: var(--a-fg-muted);
26
- --table-accent: var(--a-primary);
31
+ --table-accent: var(--md-sys-color-primary);
27
32
  --table-fg-disabled: var(--a-ui-text-disabled);
28
- --table-bg: var(--a-bg);
33
+ --table-bg: var(--md-sys-color-neutral-background);
29
34
  /* No default rounding — table-ui composes inside card-ui / drawer-ui
30
35
  which own the surface rounding; doubly-rounded corners (table inside
31
36
  card) look broken. Override per-instance via `--table-radius: …` if
@@ -40,7 +45,7 @@
40
45
  /* ── Filter popover ── */
41
46
  --table-filter-bg: var(--a-canvas);
42
47
  --table-filter-fg: var(--a-canvas-text);
43
- --table-filter-border: var(--a-border);
48
+ --table-filter-border: var(--md-sys-color-neutral-outline);
44
49
  --table-filter-radius: var(--a-radius-md);
45
50
  --table-filter-inset: var(--a-space-2);
46
51
  --table-filter-gap: var(--a-space-1);
@@ -50,11 +55,11 @@
50
55
  --table-filter-input-radius: var(--a-radius-sm);
51
56
  --table-filter-input-size: var(--a-ui-tiny);
52
57
  --table-filter-btn-px: var(--a-space-1);
53
- --table-filter-clear-fg: var(--a-accent);
58
+ --table-filter-clear-fg: var(--md-sys-color-primary);
54
59
 
55
60
  /* ── Chips / filter bar ── */
56
61
  --table-chip-bar-bg: var(--a-canvas-subtle);
57
- --table-chip-bar-border: var(--a-border);
62
+ --table-chip-bar-border: var(--md-sys-color-neutral-outline);
58
63
  --table-chip-bar-gap: var(--a-space-1);
59
64
  --table-chip-bar-py: var(--a-space-1);
60
65
  --table-chip-bar-px: var(--a-space-2);
@@ -62,7 +67,7 @@
62
67
 
63
68
  /* ── Detail / expansion row ── */
64
69
  --table-detail-bg: var(--a-canvas-subtle);
65
- --table-detail-border: var(--a-border);
70
+ --table-detail-border: var(--md-sys-color-neutral-outline);
66
71
  --table-detail-py: var(--a-space-3);
67
72
  --table-detail-px: var(--a-space-4);
68
73
 
@@ -71,7 +76,7 @@
71
76
  --table-pinned-shadow: var(--a-chrome-shadow-soft);
72
77
 
73
78
  /* ── Aggregation row ── */
74
- --table-agg-border: var(--a-border);
79
+ --table-agg-border: var(--md-sys-color-neutral-outline);
75
80
  --table-agg-size: var(--a-ui-tiny);
76
81
  --table-agg-py: var(--a-space-2);
77
82
  --table-agg-px: var(--a-space-3);
package/components/table-toolbar/table-toolbar.css CHANGED
@@ -33,7 +33,7 @@
33
33
  :scope {
34
34
  box-sizing: border-box;
35
35
  display: block;
36
- color: var(--a-fg);
36
+ color: var(--md-sys-color-neutral-on-surface);
37
37
  }
38
38
 
39
39
  [data-toolbar] {
@@ -54,8 +54,8 @@
54
54
  base styles". */
55
55
 
56
56
  :scope[variant="card"] {
57
- --table-toolbar-bg: var(--a-bg);
58
- --table-toolbar-border: var(--a-border-subtle);
57
+ --table-toolbar-bg: var(--md-sys-color-neutral-background);
58
+ --table-toolbar-border: var(--md-sys-color-neutral-outline-variant);
59
59
  --table-toolbar-border-width: 1px;
60
60
  --table-toolbar-py: var(--a-space-3);
61
61
  --table-toolbar-px: var(--a-space-4);
@@ -126,8 +126,8 @@
126
126
  [data-toolbar-popover]:popover-open {
127
127
  margin: 0;
128
128
  padding: var(--a-space-1);
129
- background: var(--a-canvas-bright);
130
- color: var(--a-fg);
129
+ background: var(--md-sys-color-neutral-surface-bright);
130
+ color: var(--md-sys-color-neutral-on-surface);
131
131
  border: 1px solid var(--a-ui-border);
132
132
  border-radius: var(--a-radius);
133
133
  box-shadow: var(--a-shadow-lg);
@@ -180,7 +180,7 @@
180
180
 
181
181
  [data-toolbar-popover] [data-popover-action] {
182
182
  margin-top: var(--a-space-1);
183
- border-top: 1px solid var(--a-border-subtle);
183
+ border-top: 1px solid var(--md-sys-color-neutral-outline-variant);
184
184
  padding-top: var(--a-space-1);
185
185
  }
186
186
 
@@ -198,7 +198,7 @@
198
198
  for exactly this. Stays inside the menu-item-ui token contract. */
199
199
  [data-toolbar-popover] [data-sort-row][data-active] {
200
200
  --menu-item-bg: var(--a-bg-selected);
201
- --menu-item-fg: var(--a-fg);
202
- --menu-item-icon-fg: var(--a-fg);
201
+ --menu-item-fg: var(--md-sys-color-neutral-on-surface);
202
+ --menu-item-icon-fg: var(--md-sys-color-neutral-on-surface);
203
203
  font-weight: var(--a-ui-weight, var(--a-weight-medium));
204
204
  }
package/components/tabs/tabs.css CHANGED
@@ -9,10 +9,10 @@
9
9
  --tabs-font-size: var(--a-ui-md);
10
10
  --tabs-font-family: var(--a-font-family-ui);
11
11
  --tabs-gap: var(--a-space-1);
12
- --tabs-indicator-color: var(--a-primary);
12
+ --tabs-indicator-color: var(--md-sys-color-primary);
13
13
  --tabs-indicator-height: 2px;
14
- --tabs-fg: var(--a-fg-subtle);
15
- --tabs-fg-hover: var(--a-fg);
14
+ --tabs-fg: var(--md-sys-color-neutral-on-surface-variant);
15
+ --tabs-fg-hover: var(--md-sys-color-neutral-on-surface);
16
16
  --tabs-fg-active: var(--a-fg-selected);
17
17
  --tabs-fg-disabled: var(--a-ui-text-disabled);
18
18
 
@@ -47,8 +47,8 @@
47
47
 
48
48
  /* Bordered variant — baseline border under the tab strip.
49
49
  The active indicator sits on top of the border for a clean join. */
50
- :scope[variant="bordered"] { --tabs-border: var(--a-border-subtle); }
51
- :scope[divider] { --tabs-border: var(--a-border-subtle); }
50
+ :scope[variant="bordered"] { --tabs-border: var(--md-sys-color-neutral-outline-variant); }
51
+ :scope[divider] { --tabs-border: var(--md-sys-color-neutral-outline-variant); }
52
52
 
53
53
  /* Vertical orientation: strip on the left, panels on the right */
54
54
  :scope[orientation="vertical"] {