@adia-ai/web-components 0.8.47 → 0.8.50

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 (68) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/MIGRATION.md +136 -0
  3. package/components/card/card.css +25 -2
  4. package/components/chart/chart.a2ui.json +1 -1
  5. package/components/chart/chart.class.js +41 -10
  6. package/components/chart/chart.d.ts +1 -1
  7. package/components/chart/chart.yaml +6 -3
  8. package/components/input/input.a2ui.json +2 -2
  9. package/components/input/input.css +45 -16
  10. package/components/input/input.yaml +11 -9
  11. package/components/link/link.css +3 -2
  12. package/components/richtext/richtext.css +2 -2
  13. package/components/search/search.a2ui.json +1 -1
  14. package/components/search/search.class.js +43 -0
  15. package/components/search/search.css +28 -0
  16. package/components/search/search.yaml +4 -1
  17. package/components/select/select.class.js +4 -1
  18. package/components/select/select.css +13 -0
  19. package/components/stat/stat.a2ui.json +30 -3
  20. package/components/stat/stat.css +88 -0
  21. package/components/stat/stat.d.ts +2 -2
  22. package/components/stat/stat.yaml +99 -6
  23. package/components/table/table.a2ui.json +5 -2
  24. package/components/table/table.class.js +36 -1
  25. package/components/table/table.d.ts +2 -2
  26. package/components/table/table.yaml +17 -1
  27. package/components/table-footer/table-footer.a2ui.json +20 -2
  28. package/components/table-footer/table-footer.class.js +94 -8
  29. package/components/table-footer/table-footer.d.ts +6 -2
  30. package/components/table-footer/table-footer.yaml +57 -6
  31. package/components/table-toolbar/table-toolbar.a2ui.json +28 -2
  32. package/components/table-toolbar/table-toolbar.class.js +69 -2
  33. package/components/table-toolbar/table-toolbar.css +36 -2
  34. package/components/table-toolbar/table-toolbar.d.ts +8 -2
  35. package/components/table-toolbar/table-toolbar.examples.md +6 -4
  36. package/components/table-toolbar/table-toolbar.yaml +140 -26
  37. package/components/theme-provider/theme-provider.a2ui.json +3 -5
  38. package/components/theme-provider/theme-provider.class.js +9 -30
  39. package/components/theme-provider/theme-provider.d.ts +3 -5
  40. package/components/theme-provider/theme-provider.yaml +4 -8
  41. package/core/element.js +16 -3
  42. package/custom-elements.json +52 -10
  43. package/dist/host.min.css +1 -1
  44. package/dist/host.sheet.js +1 -1
  45. package/dist/theme-provider.min.js +8 -8
  46. package/dist/themes.min.css +1 -1
  47. package/dist/themes.sheet.js +1 -1
  48. package/dist/web-components.min.css +1 -1
  49. package/dist/web-components.min.js +70 -69
  50. package/dist/web-components.sheet.js +1 -1
  51. package/index.css +1 -2
  52. package/package.json +1 -1
  53. package/styles/README.md +1 -1
  54. package/styles/api/sizing.css +1 -1
  55. package/styles/colors/material-static.css +34 -12
  56. package/styles/host.css +1 -4
  57. package/styles/index.css +2 -2
  58. package/styles/scale.css +19 -26
  59. package/styles/themes.css +2678 -2
  60. package/styles/type/elements.css +1 -0
  61. package/styles/type/roles.css +3 -3
  62. package/styles/typography.css +6 -5
  63. package/dist/prose.min.css +0 -1
  64. package/dist/prose.sheet.js +0 -11
  65. package/dist/verse.min.css +0 -1
  66. package/dist/verse.sheet.js +0 -11
  67. package/styles/prose.css +0 -211
  68. package/styles/verse.css +0 -151
package/styles/type/elements.css CHANGED
@@ -188,6 +188,7 @@ ol[role='list'] {
188
188
  :where(a) {
189
189
  color: var(--a-link);
190
190
  text-decoration: none;
191
+ transition: color var(--a-duration-fast) var(--a-easing);
191
192
  }
192
193
 
193
194
  :where(a:hover) {
package/styles/type/roles.css CHANGED
@@ -260,12 +260,12 @@
260
260
  /* ═══════════════════════════════════════════════════════════
261
261
  MODE OVERRIDES — REGISTER (voice) control.
262
262
 
263
- [prose] is ORTHOGONAL to [size]:
264
- • [prose] shifts the sm/md/lg VALUES (bigger at every tier)
263
+ [scale="content-md"] is ORTHOGONAL to [size]:
264
+ • [scale="content-md"] shifts the sm/md/lg VALUES (bigger at every tier)
265
265
  and changes the DEFAULT tier pick to -md for all roles.
266
266
  • [size] on containers shifts which tier is active.
267
267
 
268
- Neither [prose] nor [size] should be set globally on <body>.
268
+ Neither [scale="content-md"] nor [size] should be set globally on <body>.
269
269
  Both scope to containers — a page can have a compact sidebar
270
270
  + expressive hero + standard body.
271
271
  ═══════════════════════════════════════════════════════════ */
package/styles/typography.css CHANGED
@@ -25,24 +25,25 @@
25
25
  tokens so every consuming component tracks the cascade.
26
26
 
27
27
  THREE PUBLICATION REGISTERS (inset · gap · control · type · radius scale together)
28
- [verse] — Dense product UI (inspectors, tables, toolbars, side rails).
28
+ [scale="ui-sm"] — Dense product UI (inspectors, tables, toolbars, side rails).
29
29
  Smallest scale: tight inset/gap, small controls + type, tight radius
30
- (max 16px). Type SHIFTS with [size] (body 11/12/13). styles/verse.css.
30
+ (max 16px). Type SHIFTS with [size] (body 11/12/13). styles/scale.css.
31
31
 
32
32
  Default (productive) — Product UI.
33
33
  Static, compressed scale. Announce/Divide roles default to -sm
34
34
  because product UI rarely needs hero-scale type. Everything else
35
35
  defaults to -md. 1-2 px between tiers. No fluid clamps in UI chrome.
36
36
 
37
- [prose] — Long-form content (articles, docs, marketing).
37
+ [scale="content-md"] — Long-form content (articles, docs, marketing).
38
38
  Dynamic scale. All roles default to -md (type PINNED — doesn't shift
39
39
  with [size]). Fluid clamps on display/title/metric respond to viewport.
40
40
  Reading measure (max-width) + generous insets + rounder radius (max 28px).
41
41
 
42
42
  TIERS
43
43
  Base defaults to -sm. [size="md"] or [size="lg"] on containers shifts up.
44
- [verse] keeps the base convention (type shifts with [size]); [prose]
45
- overrides to -md defaults (pinned) with fluid viewport-responsive clamps.
44
+ [scale="ui-sm"] keeps the base convention (type shifts with [size]);
45
+ [scale="content-md"] overrides to -md defaults (pinned) with fluid
46
+ viewport-responsive clamps.
46
47
 
47
48
  FONTS
48
49
  --a-font-family-sans — long-form, marketing body
package/dist/prose.min.css DELETED
@@ -1 +0,0 @@
1
- @layer context{[prose]{--a-radius-min:.375rem;--a-radius-max:1.75rem;--a-radius-sm:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));--a-radius-md:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));--a-radius-lg:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));--a-radius:var(--a-radius-md);--a-inset-sm:var(--a-space-8);--a-inset-md:var(--a-space-10);--a-inset-lg:var(--a-space-12);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-4) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-5) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-6) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-7) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-size-sm:calc(var(--a-density) * 1.75rem);--a-size-md:calc(var(--a-density) * 2.25rem);--a-size-lg:calc(var(--a-density) * 2.75rem);--a-size:var(--a-size-md);--a-display-sm:clamp(24px, 20px + 1.5vw, 36px);--a-display-md:clamp(32px, 24px + 3vw, 56px);--a-display-lg:clamp(40px, 32px + 4vw, 80px);--a-display-size:var(--a-display-md);--a-title-sm:clamp(18px, 16px + .75vw, 24px);--a-title-md:clamp(24px, 20px + 1.5vw, 36px);--a-title-lg:clamp(28px, 24px + 2vw, 48px);--a-title-size:var(--a-title-md);--a-heading-sm:16px;--a-heading-md:20px;--a-heading-lg:24px;--a-heading-size:var(--a-heading-md);--a-section-sm:14px;--a-section-md:17px;--a-section-lg:20px;--a-section-size:var(--a-section-md);--a-subsection-sm:13px;--a-subsection-md:15px;--a-subsection-lg:17px;--a-subsection-size:var(--a-subsection-md);--a-body-sm:14px;--a-body-md:16px;--a-body-lg:18px;--a-body-size:var(--a-body-md);--a-deck-sm:15px;--a-deck-md:18px;--a-deck-lg:20px;--a-deck-size:var(--a-deck-md);--a-caption-sm:14px;--a-caption-md:15px;--a-caption-lg:16px;--a-caption-size:var(--a-caption-md);--a-kicker-sm:14px;--a-kicker-md:15px;--a-kicker-lg:16px;--a-kicker-size:var(--a-kicker-md);--a-label-sm:12px;--a-label-md:13px;--a-label-lg:14px;--a-label-size:var(--a-label-md);--a-metric-sm:clamp(20px, 16px + 1.5vw, 32px);--a-metric-md:clamp(28px, 24px + 2vw, 48px);--a-metric-lg:clamp(40px, 32px + 4vw, 72px);--a-metric-size:var(--a-metric-md);--a-code-sm:14px;--a-code-md:15px;--a-code-lg:16px;--a-code-size:var(--a-code-md);--a-ui-px:var(--a-space-3);--a-ui-py:var(--a-space-2);--a-ui-sm:14px;--a-ui-md:15px;--a-ui-lg:16px;--a-ui-size:var(--a-ui-md);--prose-max-width-sm:55ch;--prose-max-width-md:65ch;--prose-max-width-lg:75ch;--prose-max-width:var(--prose-max-width-md)}[prose][size=lg],[prose] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-radius:var(--a-radius-lg)}[prose][size=sm],[prose] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-radius:var(--a-radius-sm)}[prose]>:is(p,ul,ol,blockquote,pre,table,dl){max-width:var(--prose-max-width)}[prose] :is(ul,ol){margin-block:.75em;padding-inline-start:1.75em}[prose] li+li{margin-block-start:.375em}[prose] blockquote{padding:var(--a-space-4) var(--a-space-6);font-size:var(--a-body-size);border-inline-start-width:4px}[prose] hr{margin-block:var(--a-space-6)}[prose] table{border:1px solid var(--a-border-subtle);border-radius:var(--a-radius-md);overflow:hidden}[prose] th{background:var(--a-bg-muted)}[prose] pre{padding:var(--a-space-5)}[prose] img{border-radius:var(--a-radius-lg)}}
package/dist/prose.sheet.js DELETED
@@ -1,11 +0,0 @@
1
- // Auto-generated by scripts/build/bundle-css.mjs — DO NOT EDIT.
2
- // Constructable CSSStyleSheet form of prose.min.css (same build, byte-identical CSS).
3
- // For <theme-provider> / runtime injection where a <link> in <head> isn't possible.
4
- const css = "@layer context{[prose]{--a-radius-min:.375rem;--a-radius-max:1.75rem;--a-radius-sm:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));--a-radius-md:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));--a-radius-lg:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));--a-radius:var(--a-radius-md);--a-inset-sm:var(--a-space-8);--a-inset-md:var(--a-space-10);--a-inset-lg:var(--a-space-12);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-4) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-5) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-6) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-7) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-size-sm:calc(var(--a-density) * 1.75rem);--a-size-md:calc(var(--a-density) * 2.25rem);--a-size-lg:calc(var(--a-density) * 2.75rem);--a-size:var(--a-size-md);--a-display-sm:clamp(24px, 20px + 1.5vw, 36px);--a-display-md:clamp(32px, 24px + 3vw, 56px);--a-display-lg:clamp(40px, 32px + 4vw, 80px);--a-display-size:var(--a-display-md);--a-title-sm:clamp(18px, 16px + .75vw, 24px);--a-title-md:clamp(24px, 20px + 1.5vw, 36px);--a-title-lg:clamp(28px, 24px + 2vw, 48px);--a-title-size:var(--a-title-md);--a-heading-sm:16px;--a-heading-md:20px;--a-heading-lg:24px;--a-heading-size:var(--a-heading-md);--a-section-sm:14px;--a-section-md:17px;--a-section-lg:20px;--a-section-size:var(--a-section-md);--a-subsection-sm:13px;--a-subsection-md:15px;--a-subsection-lg:17px;--a-subsection-size:var(--a-subsection-md);--a-body-sm:14px;--a-body-md:16px;--a-body-lg:18px;--a-body-size:var(--a-body-md);--a-deck-sm:15px;--a-deck-md:18px;--a-deck-lg:20px;--a-deck-size:var(--a-deck-md);--a-caption-sm:14px;--a-caption-md:15px;--a-caption-lg:16px;--a-caption-size:var(--a-caption-md);--a-kicker-sm:14px;--a-kicker-md:15px;--a-kicker-lg:16px;--a-kicker-size:var(--a-kicker-md);--a-label-sm:12px;--a-label-md:13px;--a-label-lg:14px;--a-label-size:var(--a-label-md);--a-metric-sm:clamp(20px, 16px + 1.5vw, 32px);--a-metric-md:clamp(28px, 24px + 2vw, 48px);--a-metric-lg:clamp(40px, 32px + 4vw, 72px);--a-metric-size:var(--a-metric-md);--a-code-sm:14px;--a-code-md:15px;--a-code-lg:16px;--a-code-size:var(--a-code-md);--a-ui-px:var(--a-space-3);--a-ui-py:var(--a-space-2);--a-ui-sm:14px;--a-ui-md:15px;--a-ui-lg:16px;--a-ui-size:var(--a-ui-md);--prose-max-width-sm:55ch;--prose-max-width-md:65ch;--prose-max-width-lg:75ch;--prose-max-width:var(--prose-max-width-md)}[prose][size=lg],[prose] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-radius:var(--a-radius-lg)}[prose][size=sm],[prose] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-radius:var(--a-radius-sm)}[prose]>:is(p,ul,ol,blockquote,pre,table,dl){max-width:var(--prose-max-width)}[prose] :is(ul,ol){margin-block:.75em;padding-inline-start:1.75em}[prose] li+li{margin-block-start:.375em}[prose] blockquote{padding:var(--a-space-4) var(--a-space-6);font-size:var(--a-body-size);border-inline-start-width:4px}[prose] hr{margin-block:var(--a-space-6)}[prose] table{border:1px solid var(--a-border-subtle);border-radius:var(--a-radius-md);overflow:hidden}[prose] th{background:var(--a-bg-muted)}[prose] pre{padding:var(--a-space-5)}[prose] img{border-radius:var(--a-radius-lg)}}";
5
- let _sheet = null;
6
- export function constructSheet() {
7
- if (typeof CSSStyleSheet === 'undefined') return null; // non-DOM (SSR/Node) — link the .min.css instead
8
- if (!_sheet) { _sheet = new CSSStyleSheet(); _sheet.replaceSync(css); }
9
- return _sheet;
10
- }
11
- export default constructSheet;
package/dist/verse.min.css DELETED
@@ -1 +0,0 @@
1
- @layer context{[verse]{--a-inset-sm:var(--a-space-2-5);--a-inset-md:var(--a-space-3);--a-inset-lg:var(--a-space-3-5);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-2) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-2-5) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-3-5) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-4) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-radius-min:.25rem;--a-radius-max:.75rem;--a-radius-xs:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));--a-radius-sm:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));--a-radius-md:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));--a-radius-lg:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));--a-radius:var(--a-radius-md);--a-size-sm:calc(var(--a-density) * 1.25rem);--a-size-md:calc(var(--a-density) * 1.5rem);--a-size-lg:calc(var(--a-density) * 1.75rem);--a-size:var(--a-size-md);--a-icon-size:16px;--a-caret-size:14px;--a-toggle-size:var(--a-space-5);--a-display-sm:18px;--a-display-md:23px;--a-display-lg:29px;--a-title-sm:16px;--a-title-md:19px;--a-title-lg:22px;--a-heading-sm:13px;--a-heading-md:14px;--a-heading-lg:15px;--a-section-sm:13px;--a-section-md:14px;--a-section-lg:16px;--a-subsection-sm:12px;--a-subsection-md:13px;--a-subsection-lg:14px;--a-body-sm:11px;--a-body-md:12px;--a-body-lg:13px;--a-deck-sm:14px;--a-deck-md:15px;--a-deck-lg:16px;--a-caption-sm:10px;--a-caption-md:11px;--a-caption-lg:12px;--a-kicker-sm:10px;--a-kicker-md:10px;--a-kicker-lg:11px;--a-label-sm:10px;--a-label-md:10px;--a-label-lg:11px;--a-metric-sm:19px;--a-metric-md:25px;--a-metric-lg:34px;--a-code-sm:11px;--a-code-md:12px;--a-code-lg:13px;--a-ui-px:var(--a-space-2);--a-ui-py:var(--a-space-1);--a-ui-sm:11px;--a-ui-md:12px;--a-ui-lg:13px}[verse]:not([size]){--a-display-size:var(--a-display-md);--a-title-size:var(--a-title-md);--a-heading-size:var(--a-heading-md);--a-section-size:var(--a-section-md);--a-subsection-size:var(--a-subsection-md);--a-body-size:var(--a-body-md);--a-deck-size:var(--a-deck-md);--a-caption-size:var(--a-caption-md);--a-kicker-size:var(--a-kicker-md);--a-label-size:var(--a-label-md);--a-metric-size:var(--a-metric-md);--a-code-size:var(--a-code-md);--a-ui-size:var(--a-ui-md)}[verse][size=lg],[verse] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-icon-size:18px;--a-caret-size:16px;--a-toggle-size:var(--a-space-6)}[verse][size=sm],[verse] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-icon-size:14px;--a-caret-size:12px;--a-toggle-size:var(--a-space-4)}}
package/dist/verse.sheet.js DELETED
@@ -1,11 +0,0 @@
1
- // Auto-generated by scripts/build/bundle-css.mjs — DO NOT EDIT.
2
- // Constructable CSSStyleSheet form of verse.min.css (same build, byte-identical CSS).
3
- // For <theme-provider> / runtime injection where a <link> in <head> isn't possible.
4
- const css = "@layer context{[verse]{--a-inset-sm:var(--a-space-2-5);--a-inset-md:var(--a-space-3);--a-inset-lg:var(--a-space-3-5);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-2) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-2-5) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-3-5) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-4) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-radius-min:.25rem;--a-radius-max:.75rem;--a-radius-xs:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));--a-radius-sm:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));--a-radius-md:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));--a-radius-lg:clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));--a-radius:var(--a-radius-md);--a-size-sm:calc(var(--a-density) * 1.25rem);--a-size-md:calc(var(--a-density) * 1.5rem);--a-size-lg:calc(var(--a-density) * 1.75rem);--a-size:var(--a-size-md);--a-icon-size:16px;--a-caret-size:14px;--a-toggle-size:var(--a-space-5);--a-display-sm:18px;--a-display-md:23px;--a-display-lg:29px;--a-title-sm:16px;--a-title-md:19px;--a-title-lg:22px;--a-heading-sm:13px;--a-heading-md:14px;--a-heading-lg:15px;--a-section-sm:13px;--a-section-md:14px;--a-section-lg:16px;--a-subsection-sm:12px;--a-subsection-md:13px;--a-subsection-lg:14px;--a-body-sm:11px;--a-body-md:12px;--a-body-lg:13px;--a-deck-sm:14px;--a-deck-md:15px;--a-deck-lg:16px;--a-caption-sm:10px;--a-caption-md:11px;--a-caption-lg:12px;--a-kicker-sm:10px;--a-kicker-md:10px;--a-kicker-lg:11px;--a-label-sm:10px;--a-label-md:10px;--a-label-lg:11px;--a-metric-sm:19px;--a-metric-md:25px;--a-metric-lg:34px;--a-code-sm:11px;--a-code-md:12px;--a-code-lg:13px;--a-ui-px:var(--a-space-2);--a-ui-py:var(--a-space-1);--a-ui-sm:11px;--a-ui-md:12px;--a-ui-lg:13px}[verse]:not([size]){--a-display-size:var(--a-display-md);--a-title-size:var(--a-title-md);--a-heading-size:var(--a-heading-md);--a-section-size:var(--a-section-md);--a-subsection-size:var(--a-subsection-md);--a-body-size:var(--a-body-md);--a-deck-size:var(--a-deck-md);--a-caption-size:var(--a-caption-md);--a-kicker-size:var(--a-kicker-md);--a-label-size:var(--a-label-md);--a-metric-size:var(--a-metric-md);--a-code-size:var(--a-code-md);--a-ui-size:var(--a-ui-md)}[verse][size=lg],[verse] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-icon-size:18px;--a-caret-size:16px;--a-toggle-size:var(--a-space-6)}[verse][size=sm],[verse] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-icon-size:14px;--a-caret-size:12px;--a-toggle-size:var(--a-space-4)}}";
5
- let _sheet = null;
6
- export function constructSheet() {
7
- if (typeof CSSStyleSheet === 'undefined') return null; // non-DOM (SSR/Node) — link the .min.css instead
8
- if (!_sheet) { _sheet = new CSSStyleSheet(); _sheet.replaceSync(css); }
9
- return _sheet;
10
- }
11
- export default constructSheet;
package/styles/prose.css DELETED
@@ -1,211 +0,0 @@
1
- /* ═══════════════════════════════════════════════════════════════
2
- PROSE — content context via [prose] attribute.
3
-
4
- ⚠ DEPRECATED (v0.8.11) — superseded by [scale="content-md"]
5
- (styles/scale.css, byte-identical values). Removed at v1.0.
6
- Do not combine [prose] with [scale] on one element.
7
-
8
- Shifts the entire spatial + typographic context to
9
- content-optimized values. Overrides the sm/md/lg tier tokens
10
- so the standard [size] selector in tokens.css still works.
11
-
12
- <section prose>...</section> — md (default)
13
- <article prose size="sm">...</article> — compact prose
14
- <div prose size="lg">...</div> — spacious prose
15
- ═══════════════════════════════════════════════════════════════ */
16
-
17
- /* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
18
- context sits above `utilities`+`components`, so a [theme]/[prose] scope
19
- re-skins everything within it. The @layer order is declared by the co-loaded
20
- barrel (styles/index.css); this file only contributes to `context`. */
21
- @layer context {
22
- [prose] {
23
- /* ── Radius — prose register: rounder bounds (max 28px) than UI. ── */
24
- --a-radius-min: 0.375rem; /* 6px */
25
- --a-radius-max: 1.75rem; /* 28px */
26
- --a-radius-sm: clamp(
27
- var(--a-radius-min),
28
- calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)),
29
- var(--a-radius-max)
30
- );
31
- --a-radius-md: clamp(
32
- var(--a-radius-min),
33
- calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)),
34
- var(--a-radius-max)
35
- );
36
- --a-radius-lg: clamp(
37
- var(--a-radius-min),
38
- calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)),
39
- var(--a-radius-max)
40
- );
41
- --a-radius: var(--a-radius-md);
42
-
43
- /* ── Inset — prose register (generous; sm/md/lg = 32/40/48). ── */
44
- --a-inset-sm: var(--a-space-8); /* 32px */
45
- --a-inset-md: var(--a-space-10); /* 40px */
46
- --a-inset-lg: var(--a-space-12); /* 48px */
47
- --a-inset: var(--a-inset-md);
48
-
49
- /* ── Gaps — prose register (value × --a-gap-k), one rung up from regular.
50
- At k=1: 12/16/20/24/28px. ── */
51
- --a-gap-xs: calc(var(--a-space-3) * var(--a-gap-k)); /* 12px @k=1 */
52
- --a-gap-sm: calc(var(--a-space-4) * var(--a-gap-k)); /* 16px @k=1 */
53
- --a-gap-md: calc(var(--a-space-5) * var(--a-gap-k)); /* 20px @k=1 */
54
- --a-gap-lg: calc(var(--a-space-6) * var(--a-gap-k)); /* 24px @k=1 */
55
- --a-gap-xl: calc(var(--a-space-7) * var(--a-gap-k)); /* 28px @k=1 */
56
- --a-gap: var(--a-gap-md);
57
-
58
- /* ── Sizing — larger controls ── */
59
- --a-size-sm: calc(var(--a-density) * 1.75rem);
60
- --a-size-md: calc(var(--a-density) * 2.25rem);
61
- --a-size-lg: calc(var(--a-density) * 2.75rem);
62
- --a-size: var(--a-size-md);
63
-
64
- /* ── Typography — override sm/md/lg tiers with prose sizes
65
- Also set --a-*-size to -md (base typography defaults to -sm) ── */
66
-
67
- /* display */
68
- --a-display-sm: clamp(24px, 20px + 1.5vw, 36px);
69
- --a-display-md: clamp(32px, 24px + 3vw, 56px);
70
- --a-display-lg: clamp(40px, 32px + 4vw, 80px);
71
- --a-display-size: var(--a-display-md);
72
-
73
- /* title */
74
- --a-title-sm: clamp(18px, 16px + 0.75vw, 24px);
75
- --a-title-md: clamp(24px, 20px + 1.5vw, 36px);
76
- --a-title-lg: clamp(28px, 24px + 2vw, 48px);
77
- --a-title-size: var(--a-title-md);
78
-
79
- /* heading */
80
- --a-heading-sm: 16px;
81
- --a-heading-md: 20px;
82
- --a-heading-lg: 24px;
83
- --a-heading-size: var(--a-heading-md);
84
-
85
- /* section */
86
- --a-section-sm: 14px;
87
- --a-section-md: 17px;
88
- --a-section-lg: 20px;
89
- --a-section-size: var(--a-section-md);
90
-
91
- /* subsection */
92
- --a-subsection-sm: 13px;
93
- --a-subsection-md: 15px;
94
- --a-subsection-lg: 17px;
95
- --a-subsection-size: var(--a-subsection-md);
96
-
97
- /* body */
98
- --a-body-sm: 14px;
99
- --a-body-md: 16px;
100
- --a-body-lg: 18px;
101
- --a-body-size: var(--a-body-md);
102
-
103
- /* deck */
104
- --a-deck-sm: 15px;
105
- --a-deck-md: 18px;
106
- --a-deck-lg: 20px;
107
- --a-deck-size: var(--a-deck-md);
108
-
109
- /* caption */
110
- --a-caption-sm: 14px;
111
- --a-caption-md: 15px;
112
- --a-caption-lg: 16px;
113
- --a-caption-size: var(--a-caption-md);
114
-
115
- /* kicker */
116
- --a-kicker-sm: 14px;
117
- --a-kicker-md: 15px;
118
- --a-kicker-lg: 16px;
119
- --a-kicker-size: var(--a-kicker-md);
120
-
121
- /* label */
122
- --a-label-sm: 12px;
123
- --a-label-md: 13px;
124
- --a-label-lg: 14px;
125
- --a-label-size: var(--a-label-md);
126
-
127
- /* metric */
128
- --a-metric-sm: clamp(20px, 16px + 1.5vw, 32px);
129
- --a-metric-md: clamp(28px, 24px + 2vw, 48px);
130
- --a-metric-lg: clamp(40px, 32px + 4vw, 72px);
131
- --a-metric-size: var(--a-metric-md);
132
-
133
- /* code */
134
- --a-code-sm: 14px;
135
- --a-code-md: 15px;
136
- --a-code-lg: 16px;
137
- --a-code-size: var(--a-code-md);
138
-
139
- /* ── UI — scale up for content context ── */
140
- --a-ui-px: var(--a-space-3);
141
- --a-ui-py: var(--a-space-2);
142
- --a-ui-sm: 14px;
143
- --a-ui-md: 15px;
144
- --a-ui-lg: 16px;
145
- --a-ui-size: var(--a-ui-md);
146
-
147
- --prose-max-width-sm: 55ch;
148
- --prose-max-width-md: 65ch;
149
- --prose-max-width-lg: 75ch;
150
- --prose-max-width: var(--prose-max-width-md);
151
- }
152
-
153
- [prose][size="lg"],
154
- [prose] [size="lg"] {
155
- --a-inset: var(--a-inset-lg);
156
- --a-gap: var(--a-gap-lg);
157
- --a-size: var(--a-size-lg);
158
- --a-radius: var(--a-radius-lg);
159
- }
160
- [prose][size="sm"],
161
- [prose] [size="sm"] {
162
- --a-inset: var(--a-inset-sm);
163
- --a-gap: var(--a-gap-sm);
164
- --a-size: var(--a-size-sm);
165
- --a-radius: var(--a-radius-sm);
166
- }
167
-
168
- /* Max-width constraint on flow content */
169
- [prose] > :is(p, ul, ol, blockquote, pre, table, dl) {
170
- max-width: var(--prose-max-width);
171
- }
172
-
173
- /* ── Prose-enhanced native elements ── */
174
-
175
- [prose] :is(ul, ol) {
176
- padding-inline-start: 1.75em;
177
- margin-block: 0.75em;
178
- }
179
-
180
- [prose] li + li {
181
- margin-block-start: 0.375em;
182
- }
183
-
184
- [prose] blockquote {
185
- padding: var(--a-space-4) var(--a-space-6);
186
- border-inline-start-width: 4px;
187
- font-size: var(--a-body-size);
188
- }
189
-
190
- [prose] hr {
191
- margin-block: var(--a-space-6);
192
- }
193
-
194
- [prose] table {
195
- border: 1px solid var(--a-border-subtle);
196
- border-radius: var(--a-radius-md);
197
- overflow: hidden;
198
- }
199
-
200
- [prose] th {
201
- background: var(--a-bg-muted);
202
- }
203
-
204
- [prose] pre {
205
- padding: var(--a-space-5);
206
- }
207
-
208
- [prose] img {
209
- border-radius: var(--a-radius-lg);
210
- }
211
- }
package/styles/verse.css DELETED
@@ -1,151 +0,0 @@
1
- /* ═══════════════════════════════════════════════════════════════
2
- VERSE — dense / compact context via [verse] attribute.
3
-
4
- ⚠ DEPRECATED (v0.8.11) — superseded by [scale="ui-sm"]
5
- (styles/scale.css, byte-identical values). Removed at v1.0.
6
- Do not combine [verse] with [scale] on one element.
7
-
8
- The third typographic register, sibling to [prose]. Where [prose]
9
- shifts everything UP (long-form, generous), [verse] shifts everything
10
- DOWN — tighter inset/gap, smaller controls, smaller type — for dense
11
- product surfaces (inspectors, data tables, toolbars, side rails).
12
-
13
- <aside verse>...</aside> — md (default)
14
- <div verse size="sm">...</div> — extra-compact
15
- <section verse size="lg">...</section> — relaxed-compact
16
-
17
- Scale relationship (at density=1, --a-gap-k=1):
18
- register inset sm/md/lg gap sm/md/lg body sm/md/lg
19
- verse 10 / 12 / 14 10 / 12 / 14 11 / 12 / 13
20
- regular 14 / 16 / 18 10 / 12 / 14 14 / 15 / 16
21
- prose 32 / 40 / 48 16 / 20 / 24 14 / 16 / 18
22
-
23
- TYPE SHIFTS WITH [size] (unlike [prose], which pins type at -md):
24
- verse redefines the sm/md/lg type VALUES; the `-size` pointers are
25
- re-declared under [verse]:not([size]) so a BARE verse resolves verse's
26
- own md value (a pointer left at :root would resolve the BASE value —
27
- custom props compute at their declaration site). The global [size]
28
- rules then shift the pointer on [size]-bearing elements, resolving
29
- verse's sm/lg values. Control-size (--a-size) needs explicit tier rules
30
- because the global [size] rules set it to hardcoded base values, not via
31
- --a-size-*.
32
-
33
- NOTE: type sizes below the spacing anchors (body 11/12/13, control
34
- 20/24/28) are DEDUCED — proposed compact scale, tune to taste.
35
- ═══════════════════════════════════════════════════════════════ */
36
-
37
- /* `context` layer (ADR-0038 step 7) — sits above utilities+components. */
38
- @layer context {
39
- [verse] {
40
- /* ── Inset — tighter than regular ── */
41
- --a-inset-sm: var(--a-space-2-5); /* 10px */
42
- --a-inset-md: var(--a-space-3); /* 12px */
43
- --a-inset-lg: var(--a-space-3-5); /* 14px */
44
- --a-inset: var(--a-inset-md);
45
-
46
- /* ── Gaps — parametric (value × --a-gap-k); k=1 = base value. ── */
47
- --a-gap-xs: calc(var(--a-space-2) * var(--a-gap-k)); /* 8px @k=1 */
48
- --a-gap-sm: calc(var(--a-space-2-5) * var(--a-gap-k)); /* 10px @k=1 */
49
- --a-gap-md: calc(var(--a-space-3) * var(--a-gap-k)); /* 12px @k=1 */
50
- --a-gap-lg: calc(var(--a-space-3-5) * var(--a-gap-k)); /* 14px @k=1 */
51
- --a-gap-xl: calc(var(--a-space-4) * var(--a-gap-k)); /* 16px @k=1 */
52
- --a-gap: var(--a-gap-md);
53
-
54
- /* ── Radius — verse register: tighter bounds (max 16px). Re-declares the
55
- clamps so they resolve verse's min/max (base clamps compute at :root). ── */
56
- --a-radius-min: 0.25rem; /* 4px */
57
- --a-radius-max: 0.75rem; /* 12px */
58
- --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
59
- --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
60
- --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
61
- --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
62
- --a-radius: var(--a-radius-md);
63
-
64
- /* ── Control sizing — smaller (explicit tier rules below) ── */
65
- --a-size-sm: calc(var(--a-density) * 1.250rem); /* 20px */
66
- --a-size-md: calc(var(--a-density) * 1.500rem); /* 24px */
67
- --a-size-lg: calc(var(--a-density) * 1.750rem); /* 28px */
68
- --a-size: var(--a-size-md);
69
-
70
- /* ── Icon / caret — shifted down one tier so chrome tracks verse's
71
- smaller type + controls. The select/combobox caret is an <icon-ui>
72
- reading --a-icon-size; CSS-drawn carets (calendar / nav-group / pane)
73
- read --a-caret-size — both shrink here. Bumped +1 tier (0.7.9 control
74
- bump) to track the larger 20/24/28 controls: md = 16/14, lg = 18/16,
75
- sm = 14/12. Like --a-size, these
76
- need explicit [size] tier rules below: the global [size] icon/caret
77
- rules live in the utilities layer, which `context` shadows. ── */
78
- --a-icon-size: 16px;
79
- --a-caret-size: 14px;
80
-
81
- /* ── Toggle (check / radio / switch) chrome — one tier down like inset +
82
- --a-size, on clean space rungs. Bumped +1 tier with the 0.7.9 control
83
- bump → verse toggle 16/20/24 (= --a-space-4/5/6). The explicit [size]
84
- tier rules below are REQUIRED for the same reason --a-size needs them:
85
- this context-layer base value pins the token, so the lower-layer global
86
- [size] --a-toggle-size rules can't reach a verse subtree on their own. ── */
87
- --a-toggle-size: var(--a-space-5); /* 20px @d=1 — md (bumped +1 tier, 0.7.9) */
88
-
89
- /* ── Typography — compact register (deduced; static, no fluid clamps;
90
- floored at 10px). VALUES only — pointers live under :not([size]). ── */
91
- --a-display-sm: 18px; --a-display-md: 23px; --a-display-lg: 29px;
92
- --a-title-sm: 16px; --a-title-md: 19px; --a-title-lg: 22px;
93
- --a-heading-sm: 13px; --a-heading-md: 14px; --a-heading-lg: 15px;
94
- --a-section-sm: 13px; --a-section-md: 14px; --a-section-lg: 16px;
95
- --a-subsection-sm: 12px; --a-subsection-md: 13px; --a-subsection-lg: 14px;
96
- --a-body-sm: 11px; --a-body-md: 12px; --a-body-lg: 13px;
97
- --a-deck-sm: 14px; --a-deck-md: 15px; --a-deck-lg: 16px;
98
- --a-caption-sm: 10px; --a-caption-md: 11px; --a-caption-lg: 12px;
99
- --a-kicker-sm: 10px; --a-kicker-md: 10px; --a-kicker-lg: 11px;
100
- --a-label-sm: 10px; --a-label-md: 10px; --a-label-lg: 11px;
101
- --a-metric-sm: 19px; --a-metric-md: 25px; --a-metric-lg: 34px;
102
- --a-code-sm: 11px; --a-code-md: 12px; --a-code-lg: 13px;
103
-
104
- /* ── UI control text ── */
105
- --a-ui-px: var(--a-space-2);
106
- --a-ui-py: var(--a-space-1);
107
- --a-ui-sm: 11px; --a-ui-md: 12px; --a-ui-lg: 13px;
108
- }
109
-
110
- /* Bare-verse default tier — re-declares the `-size` pointers ON the verse
111
- element so they resolve verse's values (base :root pointers would resolve
112
- base values). Mirrors the base default-tier convention: announce/divide
113
- roles → -sm, text/data roles → -md. The global [size] rules override these
114
- on [size]-bearing elements (resolving verse's sm/lg token values). */
115
- [verse]:not([size]) {
116
- --a-display-size: var(--a-display-md);
117
- --a-title-size: var(--a-title-md);
118
- --a-heading-size: var(--a-heading-md);
119
- --a-section-size: var(--a-section-md);
120
- --a-subsection-size: var(--a-subsection-md);
121
- --a-body-size: var(--a-body-md);
122
- --a-deck-size: var(--a-deck-md);
123
- --a-caption-size: var(--a-caption-md);
124
- --a-kicker-size: var(--a-kicker-md);
125
- --a-label-size: var(--a-label-md);
126
- --a-metric-size: var(--a-metric-md);
127
- --a-code-size: var(--a-code-md);
128
- --a-ui-size: var(--a-ui-md);
129
- }
130
-
131
- /* Tier shifts — inset/gap/control-size (typography shifts via global [size],
132
- which resolves verse's token values). Mirrors the [prose] tier pattern. */
133
- [verse][size="lg"],
134
- [verse] [size="lg"] {
135
- --a-inset: var(--a-inset-lg);
136
- --a-gap: var(--a-gap-lg);
137
- --a-size: var(--a-size-lg);
138
- --a-icon-size: 18px;
139
- --a-caret-size: 16px;
140
- --a-toggle-size: var(--a-space-6); /* 24px @d=1 — lg (bumped +1 tier) */
141
- }
142
- [verse][size="sm"],
143
- [verse] [size="sm"] {
144
- --a-inset: var(--a-inset-sm);
145
- --a-gap: var(--a-gap-sm);
146
- --a-size: var(--a-size-sm);
147
- --a-icon-size: 14px;
148
- --a-caret-size: 12px;
149
- --a-toggle-size: var(--a-space-4); /* 16px @d=1 — sm (bumped +1 tier) */
150
- }
151
- }