@happyvertical/smrt-ui 0.57.39 → 0.57.40

package/AGENTS.md

@@ -84,6 +84,11 @@ own theme provider or static preset stylesheet.
 
 ## Theme presets
 
+Only a root `ThemeProvider` writes the document attributes (`<html>` `data-theme`,
+`data-color-scheme`, `dark`, `data-contrast`, `data-density`). A nested one is
+`scope="local"` by default and themes its own wrapper only; `scope="document"`
+opts back in (#4485).
+
 Adding or editing a preset touches four things that must stay in lockstep:
 `src/themes/<id>/index.ts` (the `Theme`), the `ThemePreset` union in
 `src/themes/types.ts`, the `registry.ts` entry, and the static

package/dist/themes/ThemeProvider.svelte

@@ -2,7 +2,11 @@
 import type { Snippet } from 'svelte';
 import { onMount, untrack } from 'svelte';
 import { SMRT_CASCADE_LAYERS_CSS } from '../styles/layers.js';
-import { setThemeContext, type ThemeContext } from './context.svelte.js';
+import {
+  setThemeContext,
+  type ThemeContext,
+  tryGetThemeContext,
+} from './context.svelte.js';
 import { derivePrimaryOverrides } from './create-theme.js';
 import { generateThemeVariables } from './css-generator.js';
 import { FORCED_COLORS_TOKENS } from './forced-colors.js';
@@ -56,6 +60,16 @@ interface Props {
    * static stylesheet for a built-in preset.
    */
   inlineVariables?: boolean;
+  /**
+   * Where the theme attributes land. `document` (the default for a root
+   * provider) also stamps `data-theme`, `data-color-scheme`, the `dark` class,
+   * `color-scheme`, `data-contrast`, `data-density` and
+   * `data-smrt-theme-changing` onto `<html>`. `local` themes only this
+   * provider's own wrapper and never touches the document. A provider nested
+   * inside another `ThemeProvider` is `local` by default, so an embedded
+   * widget cannot retheme its host page (#4485).
+   */
+  scope?: 'document' | 'local';
   /** Content */
   children: Snippet;
 }
@@ -70,6 +84,7 @@ let {
   persist = defaultThemeConfig.persist,
   storageKey = defaultThemeConfig.storageKey,
   inlineVariables,
+  scope,
   children,
   density,
   contrast = 'auto',
@@ -318,6 +333,13 @@ const context: ThemeContext = {
   updateConfig,
 };
 
+// Resolved before this provider registers itself: a parent context means this
+// provider is nested, so it themes its own subtree only unless told otherwise.
+// Fixed at creation: a provider does not move between root and nested.
+const writesDocument = untrack(
+  () => (scope ?? (tryGetThemeContext() ? 'local' : 'document')) === 'document',
+);
+
 setThemeContext(context);
 
 onMount(() => {
@@ -362,7 +384,7 @@ onMount(() => {
 
 // Update document classes and attributes
 $effect(() => {
-  if (typeof document !== 'undefined' && mounted) {
+  if (typeof document !== 'undefined' && mounted && writesDocument) {
     const html = document.documentElement;
 
     // Dark mode class for Tailwind/tailwindcss-dark-mode compatibility
@@ -422,7 +444,7 @@ $effect(() => {
 });
 
 $effect(() => {
-  if (typeof document === 'undefined' || !mounted) return;
+  if (typeof document === 'undefined' || !mounted || !writesDocument) return;
   document.documentElement.toggleAttribute(
     'data-smrt-theme-changing',
     isChangingScheme,

package/dist/themes/ThemeProvider.svelte.d.ts

@@ -38,6 +38,16 @@ interface Props {
      * static stylesheet for a built-in preset.
      */
     inlineVariables?: boolean;
+    /**
+     * Where the theme attributes land. `document` (the default for a root
+     * provider) also stamps `data-theme`, `data-color-scheme`, the `dark` class,
+     * `color-scheme`, `data-contrast`, `data-density` and
+     * `data-smrt-theme-changing` onto `<html>`. `local` themes only this
+     * provider's own wrapper and never touches the document. A provider nested
+     * inside another `ThemeProvider` is `local` by default, so an embedded
+     * widget cannot retheme its host page (#4485).
+     */
+    scope?: 'document' | 'local';
     /** Content */
     children: Snippet;
 }

package/dist/themes/ThemeProvider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQtC,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAGlB,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,wFAAwF;IACxF,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAkfD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAYtC,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAGlB,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,wFAAwF;IACxF,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC7B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AA0fD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.57.39",
+  "version": "0.57.40",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -176,7 +176,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.57.39",
+    "@happyvertical/smrt-types": "0.57.40",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {