@adia-ai/web-components 0.7.11 → 0.7.13

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 (46) hide show
  1. package/CHANGELOG.md +29 -4
  2. package/README.md +7 -7
  3. package/USAGE.md +2 -2
  4. package/components/button/button.css +4 -3
  5. package/components/frame/frame.a2ui.json +11 -1
  6. package/components/frame/frame.yaml +19 -1
  7. package/components/theme-provider/theme-provider.a2ui.json +88 -0
  8. package/components/theme-provider/theme-provider.class.js +134 -0
  9. package/components/theme-provider/theme-provider.css +18 -0
  10. package/components/theme-provider/theme-provider.d.ts +45 -0
  11. package/components/theme-provider/theme-provider.js +22 -0
  12. package/components/theme-provider/theme-provider.test.js +94 -0
  13. package/components/theme-provider/theme-provider.yaml +96 -0
  14. package/dist/host.min.css +1 -1
  15. package/dist/host.sheet.js +11 -0
  16. package/dist/prose.min.css +1 -0
  17. package/dist/prose.sheet.js +11 -0
  18. package/dist/themes.min.css +1 -0
  19. package/dist/themes.sheet.js +11 -0
  20. package/dist/verse.min.css +1 -0
  21. package/dist/verse.sheet.js +11 -0
  22. package/dist/web-components.min.css +1 -1
  23. package/dist/web-components.sheet.js +11 -0
  24. package/package.json +7 -1
  25. package/styles/README.md +1 -1
  26. package/styles/colors/parameters.css +1 -1
  27. package/styles/colors/primitives-accent.css +1 -1
  28. package/styles/colors/primitives-brand.css +1 -1
  29. package/styles/colors/primitives-danger.css +1 -1
  30. package/styles/colors/primitives-info.css +1 -1
  31. package/styles/colors/primitives-neutral.css +1 -1
  32. package/styles/colors/primitives-success.css +1 -1
  33. package/styles/colors/primitives-warning.css +1 -1
  34. package/styles/colors/scrims.css +1 -1
  35. package/styles/colors/semantics/aliases.css +1 -1
  36. package/styles/colors/semantics/buckets.css +1 -1
  37. package/styles/colors/semantics/core.css +1 -1
  38. package/styles/colors/semantics/data-viz.css +1 -1
  39. package/styles/colors/semantics/features.css +1 -1
  40. package/styles/colors/surfaces.css +1 -1
  41. package/styles/components.css +1 -0
  42. package/styles/design-tokens-export.js +1 -1
  43. package/styles/host.css +1 -1
  44. package/styles/prose.css +1 -1
  45. package/styles/themes.css +12 -12
  46. package/web-components.sheet.d.ts +7 -0
package/components/theme-provider/theme-provider.yaml ADDED
@@ -0,0 +1,96 @@
1
+ # Edit this file; run `npm run build:components` to regenerate a2ui.json.
2
+ $schema: ../../../../scripts/schemas/component.yaml.schema.json
3
+ name: UIThemeProvider
4
+ tag: theme-provider
5
+ status: experimental
6
+ component: ThemeProvider
7
+ category: layout
8
+ version: 1
9
+ description: |
10
+ Foundation-providing wrapper — adopts the AdiaUI foundation (design tokens +
11
+ resets + page-frame + every primitive's CSS) into the document from anywhere
12
+ in the DOM, so a surface renders fully-styled WITHOUT a hand-wired
13
+ <link rel="stylesheet"> in <head>. Layout-transparent (display: contents): the
14
+ element owns no box; children lay out as if it weren't there.
15
+
16
+ Mechanism: it imports the constructable-stylesheet twin of web-components.min.css
17
+ (byte-identical to the CDN bundle, emitted from the same build buffer) and
18
+ adopts it once into document.adoptedStyleSheets, deduped — adoption fires at
19
+ module load, before paint. Coexists with the render-blocking <link> path; both
20
+ deliver the same bytes. Use a <link> (-> the CDN web-components.min.css) for
21
+ multi-page / top-level surfaces (cacheable across navigations, zero flash); use
22
+ <theme-provider> for SPA roots, embedded apps, and dynamic mounts where you do
23
+ not control <head> (e.g. <embed-shell>, an A2UI surface, a micro-frontend).
24
+
25
+ Theming: the base foundation is OS light/dark via light-dark() tokens. Two opt-in
26
+ attributes adopt their layer on demand — theme="ocean|forest|slate|…" applies a
27
+ named preset (adopts the themes layer; matches the [theme] hook) and
28
+ scale="verse|prose" sets the compact / long-form typographic register (adopts the
29
+ matching register layer; maps onto the [verse]/[prose] attribute). Each layer is
30
+ fetched only when its attribute is set, so a bare provider stays lean.
31
+ Opt-in infra: NOT in the all-in-one @adia-ai/web-components barrel (it carries
32
+ the whole foundation); import @adia-ai/web-components/components/theme-provider
33
+ explicitly. Distinct from <frame-ui> (a layout skeleton, owns no CSS delivery)
34
+ and the page shells (chrome over the same foundation).
35
+ props:
36
+ theme:
37
+ description: 'Named theme preset for the wrapped subtree (default, ocean, forest, sunset, lavender, rose, slate, midnight). Adopts the themes layer on demand + matches the [theme="…"] hook.'
38
+ type: string
39
+ default: ""
40
+ reflect: true
41
+ scale:
42
+ description: 'Typographic / density register for the subtree — "verse" (compact) or "prose" (long-form). Adopts the matching register layer on demand; maps onto the [verse]/[prose] attribute (additive).'
43
+ type: string
44
+ default: ""
45
+ reflect: true
46
+ events: {}
47
+ slots: {}
48
+ states:
49
+ - name: idle
50
+ description: Default — foundation adopted into the document; children rendered.
51
+ traits: []
52
+ tokens: {}
53
+ a2ui:
54
+ rules:
55
+ - rule: 'Wrap a client-mounted surface root (SPA shell, embedded app, dynamic mount) in <theme-provider> so it self-provides the AdiaUI foundation — no <head> stylesheet link required.'
56
+ reason: 'Adopts the foundation bundle into the document from anywhere in the tree (document.adoptedStyleSheets).'
57
+ - rule: 'For multi-page / top-level pages, prefer a render-blocking <link rel="stylesheet" href=".../web-components.min.css"> in <head> instead — cacheable across navigations, styled on the first frame. <theme-provider> and the link deliver byte-identical CSS, so they coexist.'
58
+ reason: 'Link for multi-page (no flash); provider for SPA/embedded (no head access).'
59
+ - rule: 'Theme the wrapped subtree with theme="ocean" (a named preset) and/or scale="verse|prose" (compact / long-form register) — the provider adopts the matching opt-in layer on demand. The base foundation is OS light/dark automatically. Keep <theme-provider> at/near the mount root — display:contents means an ancestor "> " child selector will not reach its children.'
60
+ reason: 'theme/scale each fetch + adopt their layer (themes.css / verse.css / prose.css) on demand; display:contents preserves custom-property inheritance but not child-combinator reach (Light DOM, ADR-0033).'
61
+ anti_patterns: []
62
+ examples:
63
+ - name: spa-root
64
+ description: A client-mounted app root that self-provides the foundation (no head link).
65
+ a2ui: >-
66
+ [
67
+ { "id": "root", "component": "ThemeProvider", "children": ["panel"] },
68
+ { "id": "panel", "component": "Frame", "children": ["body", "actions"] },
69
+ { "id": "body", "component": "Section", "children": ["copy"] },
70
+ { "id": "copy", "component": "Text", "variant": "body", "textContent": "Fully styled — no <head> stylesheet link." },
71
+ { "id": "actions", "component": "Footer", "children": ["go"] },
72
+ { "id": "go", "component": "Button", "text": "Continue", "variant": "primary" }
73
+ ]
74
+ keywords:
75
+ - style
76
+ - provider
77
+ - foundation
78
+ - tokens
79
+ - reset
80
+ - adopt
81
+ - stylesheet
82
+ - shell
83
+ - embed
84
+ - spa
85
+ synonyms:
86
+ provider:
87
+ - provider
88
+ - root
89
+ - host
90
+ foundation:
91
+ - foundation
92
+ - tokens
93
+ - styles
94
+ related:
95
+ - Frame
96
+ - Card