@fluentui/web-components 3.0.0-beta.57 → 3.0.0-beta.59

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Fri, 16 Aug 2024 04:08:08 GMT and should not be manually modified.
+This log was last generated on Wed, 21 Aug 2024 04:07:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.59](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.59)
+
+Wed, 21 Aug 2024 04:07:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.58..@fluentui/web-components_v3.0.0-beta.59)
+
+### Changes
+
+- feat: update fast-element to latest stable version ([PR #32344](https://github.com/microsoft/fluentui/pull/32344) by 13071055+chrisdholt@users.noreply.github.com)
+
+## [3.0.0-beta.58](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.58)
+
+Tue, 20 Aug 2024 04:06:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.57..@fluentui/web-components_v3.0.0-beta.58)
+
+### Changes
+
+- feat: enabling setting theme on an individual element and unsetting themes ([PR #31973](https://github.com/microsoft/fluentui/pull/31973) by machi@microsoft.com)
+
 ## [3.0.0-beta.57](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.57)
 
-Fri, 16 Aug 2024 04:08:08 GMT 
+Fri, 16 Aug 2024 04:08:15 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.56..@fluentui/web-components_v3.0.0-beta.57)
 
 ### Changes

package/dist/dts/theme/set-theme.d.ts

@@ -17,10 +17,13 @@ export type Theme = Record<string, string | number>;
  *     Note that this argument is not limited to existing theme objects (from
  *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
  *     as each entry’s value is either a string or a number.
+ * @param node - The node to set the theme on, defaults to `document` for
+ *     setting global theme.
  * @internal
  */
-export declare const setTheme: (theme: Theme) => void;
+export declare function setTheme(theme: Theme | null, node?: Document | HTMLElement): void;
 /**
  * @internal
+ * @deprecated Use `setTheme(theme, element)` instead.
  */
-export declare const setThemeFor: (element: HTMLElement, theme: Theme) => void;
+export declare function setThemeFor(element: HTMLElement, theme: Theme | null): void;

package/dist/dts/theme/set-theme.local.bench.d.ts

@@ -0,0 +1,3 @@
+import { type TestRenderFunction } from '@tensile-perf/web-components';
+declare const tests: Record<string, TestRenderFunction>;
+export { tests };

package/dist/dts/theme/set-theme.shadow.bench.d.ts

@@ -0,0 +1,3 @@
+import { type TestRenderFunction } from '@tensile-perf/web-components';
+declare const tests: Record<string, TestRenderFunction>;
+export { tests };

package/dist/esm/theme/{set-theme.bench.js → set-theme.global.bench.js}

@@ -15,9 +15,11 @@ const tests = {
         setTheme(webDarkTheme);
         setTheme(teamsDarkTheme);
         setTheme(teamsLightTheme);
+        // Unset themes
+        setTheme(null);
         endMeasure();
         onComplete();
     },
 };
 export { tests };
-//# sourceMappingURL=set-theme.bench.js.map
+//# sourceMappingURL=set-theme.global.bench.js.map

package/dist/esm/theme/set-theme.global.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-theme.global.bench.js","sourceRoot":"","sources":["../../../src/theme/set-theme.global.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,8BAA8B,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,KAAK,GAAuC;IAChD,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;QACxB,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,kBAAkB,EAAE,CAAC;QAE1D,YAAY,EAAE,CAAC;QAEf,mBAAmB;QACnB,QAAQ,CAAC,aAAa,CAAC,CAAC;QACxB,QAAQ,CAAC,YAAY,CAAC,CAAC;QACvB,QAAQ,CAAC,cAAc,CAAC,CAAC;QACzB,QAAQ,CAAC,eAAe,CAAC,CAAC;QAE1B,gBAAgB;QAChB,QAAQ,CAAC,aAAa,CAAC,CAAC;QACxB,QAAQ,CAAC,YAAY,CAAC,CAAC;QACvB,QAAQ,CAAC,cAAc,CAAC,CAAC;QACzB,QAAQ,CAAC,eAAe,CAAC,CAAC;QAE1B,eAAe;QACf,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEf,UAAU,EAAE,CAAC;QAEb,UAAU,EAAE,CAAC;IACf,CAAC;CACF,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/esm/theme/set-theme.js

@@ -1,7 +1,21 @@
-const SUPPORTS_REGISTER_PROPERTY = 'registerProperty' in CSS;
+import { uniqueId } from '@microsoft/fast-web-utilities';
 const SUPPORTS_ADOPTED_STYLE_SHEETS = 'adoptedStyleSheets' in document;
-const themeStyleSheet = new CSSStyleSheet();
+const SUPPORTS_CSS_SCOPE = 'CSSScopeRule' in window;
+// A map from a theme to Custom Property declarations for the theme as a string.
+// Each value should be a list of CSS Custom Property declarations, and should
+// NOT include any selector, `{`, or `}`.
 const themeStyleTextMap = new Map();
+// A map from a theme to a unique string used to identity a theme. The string
+// will be used as the value of the `data-fluent-theme` attribute on a
+// differently themed element.
+const scopedThemeKeyMap = new Map();
+// A map from an element with shadow root to a `CSSStyleSheet` object that
+// references its local theme style sheet.
+const shadowAdoptedStyleSheetMap = new Map();
+// A map from an element to its set theme. This is used only when
+// `document.adoptedStyleSheets` or CSS Scope is not supported.
+const elementThemeMap = new Map();
+const globalThemeStyleSheet = new CSSStyleSheet();
 /**
  * Sets the theme tokens as CSS Custom Properties. The Custom Properties are
  * set in a constructed stylesheet on `document.adoptedStyleSheets` if
@@ -15,53 +29,163 @@ const themeStyleTextMap = new Map();
  *     Note that this argument is not limited to existing theme objects (from
  *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
  *     as each entry’s value is either a string or a number.
+ * @param node - The node to set the theme on, defaults to `document` for
+ *     setting global theme.
  * @internal
  */
-export const setTheme = (theme) => {
+export function setTheme(theme, node = document) {
+    if (!node || !isThemeableNode(node)) {
+        return;
+    }
     // Fallback to setting token custom properties on `<html>` element’s `style`
-    // attribute, only checking the support of  `document.adoptedStyleSheets`
-    // here because it has broader support than `CSS.registerProperty()`, which
-    // is checked later.
-    if (!SUPPORTS_ADOPTED_STYLE_SHEETS) {
-        setThemeFor(document.documentElement, theme);
+    // attribute.
+    if (!SUPPORTS_ADOPTED_STYLE_SHEETS || (node instanceof HTMLElement && !node.shadowRoot && !SUPPORTS_CSS_SCOPE)) {
+        const target = node === document ? document.documentElement : node;
+        setThemePropertiesOnElement(theme, target);
         return;
     }
+    if ([document, document.documentElement, document.body].includes(node)) {
+        setGlobalTheme(theme);
+    }
+    else {
+        setLocalTheme(theme, node);
+    }
+}
+function getThemeStyleText(theme) {
     if (!themeStyleTextMap.has(theme)) {
         const tokenDeclarations = [];
         for (const [tokenName, tokenValue] of Object.entries(theme)) {
-            if (typeof tokenValue !== 'string' && Number.isNaN(tokenValue)) {
-                throw new Error(`"${tokenName}" must be a string or a number.`);
-            }
-            const name = `--${tokenName}`;
-            const initialValue = tokenValue.toString();
-            if (SUPPORTS_REGISTER_PROPERTY) {
-                try {
-                    // @ts-expect-error - Baseline 2024
-                    CSS.registerProperty({
-                        name,
-                        initialValue,
-                        inherits: true,
-                    });
-                }
-                catch { }
-            }
-            tokenDeclarations.push(`${name}:${initialValue};`);
+            tokenDeclarations.push(`--${tokenName}:${tokenValue.toString()};`);
+        }
+        themeStyleTextMap.set(theme, tokenDeclarations.join(''));
+    }
+    return themeStyleTextMap.get(theme);
+}
+/**
+ * A themeable node should either be one of the following:
+ * - `document`
+ * - `html`
+ * - `body`
+ * - Any HTML element inside `body`
+ */
+function isThemeableNode(node) {
+    return [document, document.documentElement].includes(node) || (node instanceof HTMLElement && !!node.closest('body'));
+}
+function setGlobalTheme(theme) {
+    if (theme === null) {
+        if (document.adoptedStyleSheets.includes(globalThemeStyleSheet)) {
+            globalThemeStyleSheet.replaceSync('');
         }
-        themeStyleTextMap.set(theme, `html{${tokenDeclarations.join('')}}`);
+        return;
     }
     // Update the CSSStyleSheet with the new theme
-    themeStyleSheet.replaceSync(themeStyleTextMap.get(theme));
+    globalThemeStyleSheet.replaceSync(`
+    html {
+      ${getThemeStyleText(theme)}
+    }
+  `);
     // Adopt the updated CSSStyleSheet if it hasn't been adopted yet
-    if (!document.adoptedStyleSheets.includes(themeStyleSheet)) {
-        document.adoptedStyleSheets.push(themeStyleSheet);
+    if (!document.adoptedStyleSheets.includes(globalThemeStyleSheet)) {
+        document.adoptedStyleSheets.push(globalThemeStyleSheet);
+    }
+}
+function setLocalTheme(theme, element) {
+    if (theme === null) {
+        if (element.shadowRoot && shadowAdoptedStyleSheetMap.has(element)) {
+            shadowAdoptedStyleSheetMap.get(element).replaceSync('');
+        }
+        else {
+            delete element.dataset.fluentTheme;
+            forceRepaint(element);
+        }
+        return;
+    }
+    if (element.shadowRoot) {
+        getShadowAdoptedStyleSheet(element).replaceSync(`
+      :host {
+        ${getThemeStyleText(theme)}
+      }
+    `);
+    }
+    else {
+        element.dataset.fluentTheme = getScopedThemeKey(theme);
+        forceRepaint(element);
     }
-};
+}
+function getShadowAdoptedStyleSheet(element) {
+    var _a;
+    if (!shadowAdoptedStyleSheetMap.has(element)) {
+        const shadowAdoptedStyleSheet = new CSSStyleSheet();
+        shadowAdoptedStyleSheetMap.set(element, shadowAdoptedStyleSheet);
+        (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.adoptedStyleSheets.push(shadowAdoptedStyleSheet);
+    }
+    return shadowAdoptedStyleSheetMap.get(element);
+}
+function getScopedThemeKey(theme) {
+    if (!scopedThemeKeyMap.has(theme)) {
+        const themeKey = uniqueId('fluent-theme-');
+        const scopedThemeStyleSheet = new CSSStyleSheet();
+        scopedThemeKeyMap.set(theme, themeKey);
+        scopedThemeStyleSheet.replaceSync(`
+      @scope ([data-fluent-theme="${themeKey}"]) {
+        :scope {
+          ${getThemeStyleText(theme)}
+        }
+      }
+    `);
+        document.adoptedStyleSheets.push(scopedThemeStyleSheet);
+    }
+    return scopedThemeKeyMap.get(theme);
+}
+function setThemePropertiesOnElement(theme, element) {
+    let tokens;
+    if (theme === null) {
+        if (!elementThemeMap.has(element)) {
+            return;
+        }
+        tokens = elementThemeMap.get(element);
+    }
+    else {
+        elementThemeMap.set(element, theme);
+        tokens = theme;
+    }
+    for (const [tokenName, tokenValue] of Object.entries(tokens)) {
+        if (theme === null) {
+            element.style.removeProperty(`--${tokenName}`);
+        }
+        else {
+            element.style.setProperty(`--${tokenName}`, tokenValue.toString());
+        }
+    }
+}
 /**
- * @internal
+ * This function fixes a Safari bug: when an element should no longer be
+ * selected by an `@scope` rule, the styles defined in the `:scope` selector
+ * persist.
+ * @see https://bugs.webkit.org/show_bug.cgi?id=276454
+ *
+ * UA sniff regular expression is based on
+ * {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#rendering_engine | the MDN documentation}.
  */
-export const setThemeFor = (element, theme) => {
-    for (const [tokenName, tokenValue] of Object.entries(theme)) {
-        element.style.setProperty(`--${tokenName}`, tokenValue.toString());
+const { userAgent: UA } = navigator;
+const isWebkit = /\bAppleWebKit\/[\d+\.]+\b/.test(UA);
+function forceRepaint(element) {
+    if (!isWebkit) {
+        return;
     }
-};
+    const name = 'visibility';
+    const tempValue = 'hidden';
+    const currentValue = element.style.getPropertyValue(name);
+    element.style.setProperty(name, tempValue);
+    requestAnimationFrame(() => {
+        element.style.setProperty(name, currentValue);
+    });
+}
+/**
+ * @internal
+ * @deprecated Use `setTheme(theme, element)` instead.
+ */
+export function setThemeFor(element, theme) {
+    setThemePropertiesOnElement(theme, element);
+}
 //# sourceMappingURL=set-theme.js.map

package/dist/esm/theme/set-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AAOA,MAAM,0BAA0B,GAAG,kBAAkB,IAAI,GAAG,CAAC;AAC7D,MAAM,6BAA6B,GAAG,oBAAoB,IAAI,QAAQ,CAAC;AACvE,MAAM,eAAe,GAAG,IAAI,aAAa,EAAE,CAAC;AAC5C,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAiB,CAAC;AAEnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,4EAA4E;IAC5E,yEAAyE;IACzE,2EAA2E;IAC3E,oBAAoB;IACpB,IAAI,CAAC,6BAA6B,EAAE;QAClC,WAAW,CAAC,QAAQ,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QAC7C,OAAO;KACR;IAED,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACjC,MAAM,iBAAiB,GAAa,EAAE,CAAC;QAEvC,KAAK,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC3D,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;gBAC9D,MAAM,IAAI,KAAK,CAAC,IAAI,SAAS,iCAAiC,CAAC,CAAC;aACjE;YAED,MAAM,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YAC9B,MAAM,YAAY,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAC;YAC3C,IAAI,0BAA0B,EAAE;gBAC9B,IAAI;oBACF,mCAAmC;oBACnC,GAAG,CAAC,gBAAgB,CAAC;wBACnB,IAAI;wBACJ,YAAY;wBACZ,QAAQ,EAAE,IAAI;qBACf,CAAC,CAAC;iBACJ;gBAAC,MAAM,GAAE;aACX;YACD,iBAAiB,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,YAAY,GAAG,CAAC,CAAC;SACpD;QAED,iBAAiB,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;KACrE;IAED,8CAA8C;IAC9C,eAAe,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC,CAAC;IAE3D,gEAAgE;IAChE,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;QAC1D,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACnD;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC3D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpE;AACH,CAAC,CAAC"}
+{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"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"}

package/dist/esm/theme/set-theme.local.bench.js

@@ -0,0 +1,27 @@
+import { measurePerformance } from '@tensile-perf/web-components';
+import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
+import { setTheme } from './set-theme.js';
+const tests = {
+    mount: ({ onComplete }) => {
+        const { startMeasure, endMeasure } = measurePerformance();
+        const el = document.createElement('div');
+        document.body.append(el);
+        startMeasure();
+        // Newly set themes
+        setTheme(webLightTheme, el);
+        setTheme(webDarkTheme, el);
+        setTheme(teamsDarkTheme, el);
+        setTheme(teamsLightTheme, el);
+        // Cached themes
+        setTheme(webLightTheme, el);
+        setTheme(webDarkTheme, el);
+        setTheme(teamsDarkTheme, el);
+        setTheme(teamsLightTheme, el);
+        // Unset themes
+        setTheme(null, el);
+        endMeasure();
+        onComplete();
+    },
+};
+export { tests };
+//# sourceMappingURL=set-theme.local.bench.js.map

package/dist/esm/theme/set-theme.local.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-theme.local.bench.js","sourceRoot":"","sources":["../../../src/theme/set-theme.local.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,8BAA8B,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,KAAK,GAAuC;IAChD,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;QACxB,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,kBAAkB,EAAE,CAAC;QAE1D,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAEzB,YAAY,EAAE,CAAC;QAEf,mBAAmB;QACnB,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAC5B,QAAQ,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;QAC3B,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAC7B,QAAQ,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAE9B,gBAAgB;QAChB,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAC5B,QAAQ,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;QAC3B,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAC7B,QAAQ,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAE9B,eAAe;QACf,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAEnB,UAAU,EAAE,CAAC;QAEb,UAAU,EAAE,CAAC;IACf,CAAC;CACF,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/esm/theme/set-theme.shadow.bench.js

@@ -0,0 +1,29 @@
+import { measurePerformance } from '@tensile-perf/web-components';
+import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
+import { setTheme } from './set-theme.js';
+const tests = {
+    mount: ({ onComplete }) => {
+        const { startMeasure, endMeasure } = measurePerformance();
+        const el = document.createElement('div');
+        el.attachShadow({ mode: 'open' });
+        el.shadowRoot.append(document.createElement('span'));
+        document.body.append(el);
+        startMeasure();
+        // Newly set themes
+        setTheme(webLightTheme, el);
+        setTheme(webDarkTheme, el);
+        setTheme(teamsDarkTheme, el);
+        setTheme(teamsLightTheme, el);
+        // Cached themes
+        setTheme(webLightTheme, el);
+        setTheme(webDarkTheme, el);
+        setTheme(teamsDarkTheme, el);
+        setTheme(teamsLightTheme, el);
+        // Unset themes
+        setTheme(null, el);
+        endMeasure();
+        onComplete();
+    },
+};
+export { tests };
+//# sourceMappingURL=set-theme.shadow.bench.js.map

package/dist/esm/theme/set-theme.shadow.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-theme.shadow.bench.js","sourceRoot":"","sources":["../../../src/theme/set-theme.shadow.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,8BAA8B,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,KAAK,GAAuC;IAChD,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;QACxB,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,kBAAkB,EAAE,CAAC;QAE1D,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,EAAE,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QAClC,EAAE,CAAC,UAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;QACtD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAEzB,YAAY,EAAE,CAAC;QAEf,mBAAmB;QACnB,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAC5B,QAAQ,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;QAC3B,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAC7B,QAAQ,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAE9B,gBAAgB;QAChB,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAC5B,QAAQ,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;QAC3B,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAC7B,QAAQ,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAE9B,eAAe;QACf,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAEnB,UAAU,EAAE,CAAC;QAEb,UAAU,EAAE,CAAC;IACf,CAAC;CACF,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/web-components.d.ts

@@ -8001,14 +8001,17 @@ export declare const roleForMenuItem: {
  *     Note that this argument is not limited to existing theme objects (from
  *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
  *     as each entry’s value is either a string or a number.
+ * @param node - The node to set the theme on, defaults to `document` for
+ *     setting global theme.
  * @internal
  */
-export declare const setTheme: (theme: Theme) => void;
+export declare function setTheme(theme: Theme | null, node?: Document | HTMLElement): void;
 
 /**
  * @internal
+ * @deprecated Use `setTheme(theme, element)` instead.
  */
-export declare const setThemeFor: (element: HTMLElement, theme: Theme) => void;
+export declare function setThemeFor(element: HTMLElement, theme: Theme | null): void;
 
 /**
  * CSS custom property value for the {@link @fluentui/tokens#shadow16 | `shadow16`} design token.