/**
 * `<theme-provider>` — Foundation-providing wrapper — adopts the AdiaUI foundation (design tokens +
resets + page-frame + every primitive's CSS) into the document from anywhere
in the DOM, so a surface renders fully-styled WITHOUT a hand-wired
<link rel="stylesheet"> in <head>. Layout-transparent (display: contents): the
element owns no box; children lay out as if it weren't there.

Mechanism: it imports the constructable-stylesheet twin of web-components.min.css
(byte-identical to the CDN bundle, emitted from the same build buffer) and
adopts it once into document.adoptedStyleSheets, deduped — adoption fires at
module load, before paint. Coexists with the render-blocking <link> path; both
deliver the same bytes. Use a <link> (-> the CDN web-components.min.css) for
multi-page / top-level surfaces (cacheable across navigations, zero flash); use
<theme-provider> for SPA roots, embedded apps, and dynamic mounts where you do
not control <head> (e.g. <embed-shell>, an A2UI surface, a micro-frontend).

Theming: the base foundation is OS light/dark via light-dark() tokens. Two opt-in
attributes adopt their layer on demand — theme="ocean|forest|slate|…" applies a
named preset (adopts the themes layer; matches the [theme] hook) and
scale="verse|prose" sets the compact / long-form typographic register (adopts the
matching register layer; maps onto the [verse]/[prose] attribute). Each layer is
fetched only when its attribute is set, so a bare provider stays lean.
Opt-in infra: NOT in the all-in-one @adia-ai/web-components barrel (it carries
the whole foundation); import @adia-ai/web-components/components/theme-provider
explicitly. Distinct from <frame-ui> (a layout skeleton, owns no CSS delivery)
and the page shells (chrome over the same foundation).

 *
 * @see https://ui-kit.exe.xyz/site/components/theme-provider
 *
 * Type declarations generated by scripts/build/dts-codegen.mjs from
 * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
 * run `npm run build:components`, then `npm run codegen:dts` to
 * regenerate; or hand-author this file fully if rich event types are
 * needed beyond what the yaml `events:` block can express.
 */

import { UIElement } from '../../core/element.js';

export class UIThemeProvider extends UIElement {
  /** 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. */
  theme: string;
  /** 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). */
  scale: string;
}
