@flipdish/ui-library 0.38.0 → 0.39.1

package/README.md

@@ -185,7 +185,7 @@ Unable to resolve module .../dist/native/components/atoms/Button/index.js
 
 ## Scoping Tailwind CSS to a subtree
 
-When your app doesn't own the whole page — a widget, an embed, a Storybook preview, a multi-tenant host, or a micro-frontend — its Tailwind v4 output (utilities **and** Preflight resets) can leak into or clash with the surrounding CSS. The fix is to scope every emitted selector under a single mount element.
+When your app doesn't own the whole page — a widget, an embed, a Storybook preview, a multi-tenant host, or a micro-frontend — its Tailwind v4 output (utilities **and** Preflight resets) can leak into or clash with the surrounding CSS. The fix is to scope every emitted selector under a single element the app renders itself: `UIProvider`'s `scopeId` stamps `data-mfe-scope` on the themed root for this. Never scope to a host container id (`#flipdish-micro-frontend`) or a union of ids; several apps share those containers, so the rules leak across them.
 
 `@flipdish/ui-library/utilities/cssScopeUtils` ships `createScopedPrefixTransform`, a small factory for [`postcss-prefix-selector`](https://www.npmjs.com/package/postcss-prefix-selector) that consolidates the scoping rules (scope `:root`/`html` so `@theme` tokens and base typography cascade only within the subtree, leave `:host` and `@keyframes` steps alone, never double-prefix, etc.) so you write one line instead of copy-pasting a bespoke transform.
 
@@ -202,7 +202,8 @@ Then add it to your PostCSS config:
 import prefixSelector from "postcss-prefix-selector";
 import { createScopedPrefixTransform } from "@flipdish/ui-library/utilities/cssScopeUtils";
 
-const SCOPE = "#flipdish-micro-frontend"; // the id/attribute on your mount node
+// Your Portal microFrontendWindowName; must match <UIProvider scopeId="sale-service">.
+const SCOPE = '[data-mfe-scope="sale-service"]';
 
 export default {
   plugins: [
@@ -214,23 +215,22 @@ export default {
 };
 ```
 
-Tailwind's output becomes plain `#flipdish-micro-frontend .px-4 { … }`, which every downstream tool (Vite, lightningcss) understands.
+Tailwind's output becomes plain `[data-mfe-scope="sale-service"] .px-4 { … }`, which every downstream tool (Vite, lightningcss) understands.
 
 ### Options
 
 `createScopedPrefixTransform(scopeSelector, options?)`:
 
-| Option             | Type                                         | Default      | Description                                                                                                                                 |
-| ------------------ | -------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `shouldScope`      | `(filePath: string \| undefined) => boolean` | `() => true` | Return `false` to leave a file's selectors untouched (e.g. third-party CSS you don't want prefixed).                                        |
-| `scopeBody`        | `boolean`                                    | `false`      | Scope Preflight `body` resets to the mount selector instead of leaving `body` global. Enable when the host page must not inherit the reset. |
-| `matchRootElement` | `boolean`                                    | `false`      | Also emit a compound selector so the scope root element itself matches class selectors (e.g. `<div data-scope class="flex-1">`).            |
+| Option             | Type                                         | Default      | Description                                                                                                                                      |
+| ------------------ | -------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `shouldScope`      | `(filePath: string \| undefined) => boolean` | `() => true` | Return `false` to leave a file's selectors untouched (e.g. third-party CSS you don't want prefixed).                                             |
+| `scopeBody`        | `boolean`                                    | `false`      | Scope Preflight `body` resets to the mount selector instead of leaving `body` global. Enable when the host page must not inherit the reset.      |
+| `matchRootElement` | `boolean`                                    | `true`       | Also emit a compound selector so the scope root itself matches class and attribute selectors; `[data-theme="dark"]` on the themed root needs it. |
 
 ```js
 createScopedPrefixTransform("[data-tailwind]", {
   shouldScope: (file) => !file || !file.includes("node_modules"),
   scopeBody: true,
-  matchRootElement: true,
 });
 ```
 

package/dist/components/templates/WidgetLayout/index.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ErrorBoundary = require('@flipdish/ui-library/providers/ErrorBoundary');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+
+/** English fallback copy — consumers localise via `renderError`. TODO(i18n): source from ui-library's translation layer once one exists. */
+const DefaultWidgetError = ({ testId }) => (jsxRuntime.jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full flex-col items-center gap-2 py-xl text-center", children: [jsxRuntime.jsx("h2", { className: "font-semibold text-md text-primary", children: "Something went wrong" }), jsxRuntime.jsx("p", { className: "text-sm text-tertiary", children: "An unexpected error occurred in this widget." })] }));
+/**
+ * Widget-shaped template for a micro-frontend mounted beside a page: a named `region` that fills
+ * the height its host gives it, with pinned `header` and `footer` slots around a content area
+ * that scrolls internally, and an error boundary keyed by `widgetName`. Reach for it instead of
+ * `PageLayout` whenever the host page already owns `<main>` and the document must not scroll.
+ *
+ * @summary bounded-height widget template with pinned header and footer
+ */
+const WidgetLayout = ({ widgetName, label, header, footer, children, renderError, onError, scrollAreaProps, className, 'data-testid': dataTestId, }) => {
+    const widgetLayoutTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'widget-layout', rootName: 'widget-layout' });
+    const scrollAreaTestId = scrollAreaProps?.['data-testid'] ?? testIdUtils.joinTestId(widgetLayoutTestId, 'scroll-area');
+    // A `<section>` with an accessible name is a `region` landmark; without a name it is a plain `div`, so a
+    // host that already provides the landmark does not get a nested, same-named one.
+    const Root = label ? 'section' : 'div';
+    return (
+    // `h-full`, never a viewport unit: the host supplies the bounded height, and WebView viewport units can
+    // disagree with the visible area. `min-h-0` lets the scroll region shrink below its content's height.
+    jsxRuntime.jsxs(Root, { "aria-label": label, "data-testid": widgetLayoutTestId, className: cx.cx('flex h-full min-h-0 w-full flex-col gap-md p-md pb-[max(var(--spacing-md),env(safe-area-inset-bottom))]', className), children: [header, jsxRuntime.jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaProps?.ref, "data-testid": scrollAreaTestId, 
+                // Focusable so keyboard users can scroll content that has no focusable element of its own (axe: scrollable-region-focusable).
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
+                tabIndex: 0, 
+                // `overscroll-contain` keeps a scroll that reaches the end from chaining to the host page.
+                className: cx.cx('min-h-0 flex-1 overflow-y-auto overscroll-contain outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', scrollAreaProps?.className), children: jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { identifier: widgetName, onError: onError, renderFallback: (error) => renderError?.({ error, widgetName }) ?? jsxRuntime.jsx(DefaultWidgetError, { testId: testIdUtils.joinTestId(widgetLayoutTestId, 'error') }), children: children }) }), footer] }));
+};
+
+exports.WidgetLayout = WidgetLayout;
+//# sourceMappingURL=index.cjs.map

package/dist/components/templates/WidgetLayout/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/WidgetLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","useResolvedTestId","joinTestId","cx","ErrorBoundary"],"mappings":";;;;;;;AAiDA;AACA,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACzDA,eAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,2DAA2D,EAAA,QAAA,EAAA,CAC1GC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,8CAAA,EAAA,CAAiD,CAAA,EAAA,CACjF,CACP;AAED;;;;;;;AAOG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,eAAe,EACf,SAAS,EACT,aAAa,EAAE,UAAU,GACP,KAAe;AACjC,IAAA,MAAM,kBAAkB,GAAGC,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;AACzH,IAAA,MAAM,gBAAgB,GAAG,eAAe,GAAG,aAAa,CAAC,IAAIC,sBAAU,CAAC,kBAAkB,EAAE,aAAa,CAAC;;;IAG1G,MAAM,IAAI,GAAG,KAAK,GAAG,SAAS,GAAG,KAAK;IAEtC;;;AAGE,IAAAH,eAAA,CAAC,IAAI,EAAA,EAAA,YAAA,EACS,KAAK,EAAA,aAAA,EACJ,kBAAkB,EAC/B,SAAS,EAAEI,KAAE,CAAC,yGAAyG,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAElI,MAAM,EAEPH,cAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,eAAe,EAAE,GAAG,iBACZ,gBAAgB;;;AAG7B,gBAAA,QAAQ,EAAE,CAAC;;gBAEX,SAAS,EAAEG,KAAE,CACX,8HAA8H,EAC9H,eAAe,EAAE,SAAS,CAC3B,EAAA,QAAA,EAEDH,cAAA,CAACI,2BAAa,EAAA,EACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,IAAIJ,cAAA,CAAC,kBAAkB,EAAA,EAAC,MAAM,EAAEE,sBAAU,CAAC,kBAAkB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEzI,QAAQ,EAAA,CACK,EAAA,CACZ,EAEL,MAAM,CAAA,EAAA,CACF;AAEX;;"}

package/dist/components/templates/WidgetLayout/index.d.ts

@@ -0,0 +1,54 @@
+import type { ErrorInfo, ReactNode, Ref } from 'react';
+export interface WidgetLayoutScrollAreaProps {
+    /** `id` for the scrolling element, e.g. for a scroll-to-bottom helper that looks it up. */
+    id?: string;
+    /** Ref to the scrolling element, e.g. to keep a chat list pinned to its newest message. */
+    ref?: Ref<HTMLDivElement>;
+    /** Extra classes merged onto the scrolling element, e.g. a gap between messages. */
+    className?: string;
+    /** Overrides the scrolling element's `data-testid` (defaults to `<root>--scroll-area`). */
+    'data-testid'?: string;
+}
+export interface WidgetLayoutProps {
+    /**
+     * Stable, human-readable name of the widget (e.g. "ChatWidget"). Tags the widget-scoped error
+     * boundary so a thrown error can be attributed in logs/RUM, and is forwarded to `renderError`
+     * and `onError`.
+     */
+    widgetName: string;
+    /**
+     * Accessible name that makes the root a `region` landmark. Set it when the widget is the landmark,
+     * since the host page already owns `<main>`; omit it when the host already wraps the widget in a named
+     * landmark such as `SidePanel`, so the root is a plain `div` and no nested region repeats the name.
+     */
+    label?: string;
+    /** Pinned above the scroll region and rendered OUTSIDE the error boundary, so a title or close control stays usable when content throws. */
+    header?: ReactNode;
+    /** Pinned below the scroll region and rendered OUTSIDE the error boundary; the composer slot. Keeps clear of the device's bottom safe area. */
+    footer?: ReactNode;
+    /** Widget content, rendered INSIDE the error boundary and the scroll region. */
+    children: ReactNode;
+    /** Replaces the default fallback shown when a child throws. Receives the thrown error and `widgetName` so consumers can render localised copy. */
+    renderError?: (props: {
+        error: Error;
+        widgetName: string;
+    }) => ReactNode;
+    /** Called when a child throws — wire app-level reporting (e.g. Datadog RUM) here. */
+    onError?: (error: Error, info: ErrorInfo) => void;
+    /** Hooks for the element that scrolls the content, since the host's bounded height means the widget never scrolls the document. */
+    scrollAreaProps?: WidgetLayoutScrollAreaProps;
+    /** Extra classes merged onto the root `<section>`. */
+    className?: string;
+    /** Overrides the `data-testid` (defaults to `fd-widget-layout`). */
+    'data-testid'?: string;
+}
+/**
+ * Widget-shaped template for a micro-frontend mounted beside a page: a named `region` that fills
+ * the height its host gives it, with pinned `header` and `footer` slots around a content area
+ * that scrolls internally, and an error boundary keyed by `widgetName`. Reach for it instead of
+ * `PageLayout` whenever the host page already owns `<main>` and the document must not scroll.
+ *
+ * @summary bounded-height widget template with pinned header and footer
+ */
+export declare const WidgetLayout: ({ widgetName, label, header, footer, children, renderError, onError, scrollAreaProps, className, "data-testid": dataTestId, }: WidgetLayoutProps) => ReactNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/templates/WidgetLayout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/WidgetLayout/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,2BAA2B;IAC1C,2FAA2F;IAC3F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2FAA2F;IAC3F,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4IAA4I;IAC5I,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+IAA+I;IAC/I,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gFAAgF;IAChF,QAAQ,EAAE,SAAS,CAAC;IACpB,kJAAkJ;IAClJ,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IACzE,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,mIAAmI;IACnI,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAUD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GAAI,+HAW1B,iBAAiB,KAAG,SA0CtB,CAAC"}

package/dist/components/templates/WidgetLayout/index.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ErrorBoundary } from '@flipdish/ui-library/providers/ErrorBoundary';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+
+/** English fallback copy — consumers localise via `renderError`. TODO(i18n): source from ui-library's translation layer once one exists. */
+const DefaultWidgetError = ({ testId }) => (jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full flex-col items-center gap-2 py-xl text-center", children: [jsx("h2", { className: "font-semibold text-md text-primary", children: "Something went wrong" }), jsx("p", { className: "text-sm text-tertiary", children: "An unexpected error occurred in this widget." })] }));
+/**
+ * Widget-shaped template for a micro-frontend mounted beside a page: a named `region` that fills
+ * the height its host gives it, with pinned `header` and `footer` slots around a content area
+ * that scrolls internally, and an error boundary keyed by `widgetName`. Reach for it instead of
+ * `PageLayout` whenever the host page already owns `<main>` and the document must not scroll.
+ *
+ * @summary bounded-height widget template with pinned header and footer
+ */
+const WidgetLayout = ({ widgetName, label, header, footer, children, renderError, onError, scrollAreaProps, className, 'data-testid': dataTestId, }) => {
+    const widgetLayoutTestId = useResolvedTestId({ testId: dataTestId, segment: 'widget-layout', rootName: 'widget-layout' });
+    const scrollAreaTestId = scrollAreaProps?.['data-testid'] ?? joinTestId(widgetLayoutTestId, 'scroll-area');
+    // A `<section>` with an accessible name is a `region` landmark; without a name it is a plain `div`, so a
+    // host that already provides the landmark does not get a nested, same-named one.
+    const Root = label ? 'section' : 'div';
+    return (
+    // `h-full`, never a viewport unit: the host supplies the bounded height, and WebView viewport units can
+    // disagree with the visible area. `min-h-0` lets the scroll region shrink below its content's height.
+    jsxs(Root, { "aria-label": label, "data-testid": widgetLayoutTestId, className: cx('flex h-full min-h-0 w-full flex-col gap-md p-md pb-[max(var(--spacing-md),env(safe-area-inset-bottom))]', className), children: [header, jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaProps?.ref, "data-testid": scrollAreaTestId, 
+                // Focusable so keyboard users can scroll content that has no focusable element of its own (axe: scrollable-region-focusable).
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
+                tabIndex: 0, 
+                // `overscroll-contain` keeps a scroll that reaches the end from chaining to the host page.
+                className: cx('min-h-0 flex-1 overflow-y-auto overscroll-contain outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', scrollAreaProps?.className), children: jsx(ErrorBoundary, { identifier: widgetName, onError: onError, renderFallback: (error) => renderError?.({ error, widgetName }) ?? jsx(DefaultWidgetError, { testId: joinTestId(widgetLayoutTestId, 'error') }), children: children }) }), footer] }));
+};
+
+export { WidgetLayout };
+//# sourceMappingURL=index.js.map

package/dist/components/templates/WidgetLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/templates/WidgetLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAiDA;AACA,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACzDA,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,2DAA2D,EAAA,QAAA,EAAA,CAC1GC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,8CAAA,EAAA,CAAiD,CAAA,EAAA,CACjF,CACP;AAED;;;;;;;AAOG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,eAAe,EACf,SAAS,EACT,aAAa,EAAE,UAAU,GACP,KAAe;AACjC,IAAA,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;AACzH,IAAA,MAAM,gBAAgB,GAAG,eAAe,GAAG,aAAa,CAAC,IAAI,UAAU,CAAC,kBAAkB,EAAE,aAAa,CAAC;;;IAG1G,MAAM,IAAI,GAAG,KAAK,GAAG,SAAS,GAAG,KAAK;IAEtC;;;AAGE,IAAAD,IAAA,CAAC,IAAI,EAAA,EAAA,YAAA,EACS,KAAK,EAAA,aAAA,EACJ,kBAAkB,EAC/B,SAAS,EAAE,EAAE,CAAC,yGAAyG,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAElI,MAAM,EAEPC,GAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,eAAe,EAAE,GAAG,iBACZ,gBAAgB;;;AAG7B,gBAAA,QAAQ,EAAE,CAAC;;gBAEX,SAAS,EAAE,EAAE,CACX,8HAA8H,EAC9H,eAAe,EAAE,SAAS,CAC3B,EAAA,QAAA,EAEDA,GAAA,CAAC,aAAa,EAAA,EACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,IAAIA,GAAA,CAAC,kBAAkB,EAAA,EAAC,MAAM,EAAE,UAAU,CAAC,kBAAkB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEzI,QAAQ,EAAA,CACK,EAAA,CACZ,EAEL,MAAM,CAAA,EAAA,CACF;AAEX;;"}

package/dist/native/components/templates/WidgetLayout/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `WidgetLayout` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/components/templates/WidgetLayout` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `WidgetLayout` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/providers/PortalContainer/index.d.ts

@@ -19,7 +19,7 @@ export interface PortalContainerProps {
      * and is out of scope.
      *
      * @example
-     * <PortalContainer getContainer={() => document.getElementById('flipdish-micro-frontend')}>
+     * <PortalContainer getContainer={() => document.getElementById('my-overlay-host')}>
      *   <App />
      * </PortalContainer>
      */

package/dist/providers/ThemeProvider/index.cjs

@@ -17,6 +17,9 @@ const useTheme = () => {
     }
     return context;
 };
+// Providers currently mirroring onto <html>, so a page with several (a Storybook docs page mounts one per
+// story) only loses the attribute when the last one unmounts.
+let documentThemeWriters = 0;
 const resolveSystemPreference = () => {
     if (typeof window === 'undefined')
         return 'light';
@@ -24,15 +27,20 @@ const resolveSystemPreference = () => {
 };
 /**
  * Provides light/dark/system theme context, persisted to `localStorage` and following the OS
- * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` so tokens
- * and the Tailwind `dark:` variant cascade, including inside CSS-scoped micro-frontends.
+ * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` (and
+ * `data-mfe-scope` when `scopeId` is set) so tokens and the Tailwind `dark:` variant cascade,
+ * including inside CSS-scoped micro-frontends.
  *
  * @summary light/dark/system theme provider carrying data-theme
  */
-const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-theme', themeModeOverride }) => {
+const ThemeProvider = ({ children, defaultTheme = 'system', storageKey, themeModeOverride, scopeId: scopeIdProp, syncDocumentTheme: syncDocumentThemeProp, }) => {
+    // An empty scopeId is unset: it would stamp `data-mfe-scope=""` and switch the <html> mirror off for nothing.
+    const scopeId = scopeIdProp || undefined;
+    const syncDocumentTheme = syncDocumentThemeProp ?? (themeModeOverride === undefined && scopeId === undefined);
+    const resolvedStorageKey = storageKey ?? (scopeId ? `ui-theme:${scopeId}` : 'ui-theme');
     const [theme, setTheme] = React.useState(() => {
         if (typeof window !== 'undefined') {
-            const savedTheme = localStorage.getItem(storageKey);
+            const savedTheme = localStorage.getItem(resolvedStorageKey);
             return savedTheme || defaultTheme;
         }
         return defaultTheme;
@@ -41,24 +49,38 @@ const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-the
     const [themeRoot, setThemeRoot] = React.useState(null);
     const activeTheme = themeModeOverride ?? theme;
     const resolvedMode = activeTheme === 'system' ? systemPreference : activeTheme;
+    // The cleanup removes the attribute, so a host document is left as it was found when the mirror
+    // turns off or the provider unmounts.
     React.useEffect(() => {
+        if (!syncDocumentTheme)
+            return;
+        documentThemeWriters += 1;
         document.documentElement.setAttribute('data-theme', resolvedMode);
-        // Only persist the theme if it's not overridden
-        if (!themeModeOverride) {
-            if (activeTheme === 'system') {
-                localStorage.removeItem(storageKey);
-            }
-            else {
-                localStorage.setItem(storageKey, activeTheme);
-            }
+        return () => {
+            documentThemeWriters -= 1;
+            if (documentThemeWriters === 0)
+                document.documentElement.removeAttribute('data-theme');
+        };
+    }, [syncDocumentTheme, resolvedMode]);
+    // Only persist the theme if it's not overridden
+    React.useEffect(() => {
+        if (themeModeOverride)
+            return;
+        if (activeTheme === 'system') {
+            localStorage.removeItem(resolvedStorageKey);
+        }
+        else {
+            localStorage.setItem(resolvedStorageKey, activeTheme);
         }
+    }, [activeTheme, themeModeOverride, resolvedStorageKey]);
+    React.useEffect(() => {
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => setSystemPreference(mediaQuery.matches ? 'dark' : 'light');
         mediaQuery.addEventListener('change', handleChange);
         return () => mediaQuery.removeEventListener('change', handleChange);
-    }, [resolvedMode, activeTheme, themeModeOverride, storageKey]);
+    }, []);
     const contextValue = React.useMemo(() => ({ theme: activeTheme, setTheme, themeRoot, resolvedMode }), [activeTheme, themeRoot, resolvedMode]);
-    return (jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, style: { display: 'contents' }, children: children }) }));
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, "data-mfe-scope": scopeId, style: { display: 'contents' }, children: children }) }));
 };
 
 exports.ThemeProvider = ThemeProvider;

package/dist/providers/ThemeProvider/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useState","useEffect","useMemo","_jsx"],"mappings":";;;;;AAcA,MAAM,YAAY,GAAGA,mBAAa,CAA+B,SAAS,CAAC;AAE3E;;;;;AAKG;AACI,MAAM,QAAQ,GAAG,MAAuB;AAC7C,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;IACjE;AAEA,IAAA,OAAO,OAAO;AAChB;AAEA,MAAM,uBAAuB,GAAG,MAAuB;IACrD,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,QAAA,OAAO,OAAO;AACjD,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF,CAAC;AAqBD;;;;;;AAMG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,GAAG,QAAQ,EAAE,UAAU,GAAG,UAAU,EAAE,iBAAiB,EAAsB,KAAI;IACrI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAQ,MAAK;AAC7C,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAiB;YACnE,OAAO,UAAU,IAAI,YAAY;QACnC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAmB,uBAAuB,CAAC;IACnG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAqB,IAAI,CAAC;AAEpE,IAAA,MAAM,WAAW,GAAU,iBAAiB,IAAI,KAAK;AACrD,IAAA,MAAM,YAAY,GAAqB,WAAW,KAAK,QAAQ,GAAG,gBAAgB,GAAG,WAAW;IAEhGC,eAAS,CAAC,MAAK;QACb,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;;QAGjE,IAAI,CAAC,iBAAiB,EAAE;AACtB,YAAA,IAAI,WAAW,KAAK,QAAQ,EAAE;AAC5B,gBAAA,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC;YACrC;iBAAO;AACL,gBAAA,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC;YAC/C;QACF;QAEA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;AACpE,QAAA,MAAM,YAAY,GAAG,MAAM,mBAAmB,CAAC,UAAU,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrF,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QACnD,OAAO,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IACrE,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAE9D,IAAA,MAAM,YAAY,GAAGC,aAAO,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAEvI,IAAA,QACEC,cAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EACxCA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAA,YAAA,EAAc,YAAY,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAA,QAAA,EAC7E,QAAQ,EAAA,CACL,EAAA,CACgB;AAE5B;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useState","useEffect","useMemo","_jsx"],"mappings":";;;;;AAcA,MAAM,YAAY,GAAGA,mBAAa,CAA+B,SAAS,CAAC;AAE3E;;;;;AAKG;AACI,MAAM,QAAQ,GAAG,MAAuB;AAC7C,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;IACjE;AAEA,IAAA,OAAO,OAAO;AAChB;AAEA;AACA;AACA,IAAI,oBAAoB,GAAG,CAAC;AAE5B,MAAM,uBAAuB,GAAG,MAAuB;IACrD,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,QAAA,OAAO,OAAO;AACjD,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF,CAAC;AAkCD;;;;;;;AAOG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,YAAY,GAAG,QAAQ,EACvB,UAAU,EACV,iBAAiB,EACjB,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAE,qBAAqB,GACrB,KAAI;;AAEvB,IAAA,MAAM,OAAO,GAAG,WAAW,IAAI,SAAS;AACxC,IAAA,MAAM,iBAAiB,GAAG,qBAAqB,KAAK,iBAAiB,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,CAAC;AAC7G,IAAA,MAAM,kBAAkB,GAAG,UAAU,KAAK,OAAO,GAAG,CAAA,SAAA,EAAY,OAAO,CAAA,CAAE,GAAG,UAAU,CAAC;IAEvF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAQ,MAAK;AAC7C,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAiB;YAC3E,OAAO,UAAU,IAAI,YAAY;QACnC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAmB,uBAAuB,CAAC;IACnG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAqB,IAAI,CAAC;AAEpE,IAAA,MAAM,WAAW,GAAU,iBAAiB,IAAI,KAAK;AACrD,IAAA,MAAM,YAAY,GAAqB,WAAW,KAAK,QAAQ,GAAG,gBAAgB,GAAG,WAAW;;;IAIhGC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,iBAAiB;YAAE;QACxB,oBAAoB,IAAI,CAAC;QACzB,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AACjE,QAAA,OAAO,MAAK;YACV,oBAAoB,IAAI,CAAC;YACzB,IAAI,oBAAoB,KAAK,CAAC;AAAE,gBAAA,QAAQ,CAAC,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC;AACxF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;;IAGrCA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,iBAAiB;YAAE;AACvB,QAAA,IAAI,WAAW,KAAK,QAAQ,EAAE;AAC5B,YAAA,YAAY,CAAC,UAAU,CAAC,kBAAkB,CAAC;QAC7C;aAAO;AACL,YAAA,YAAY,CAAC,OAAO,CAAC,kBAAkB,EAAE,WAAW,CAAC;QACvD;IACF,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;IAExDA,eAAS,CAAC,MAAK;QACb,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;AACpE,QAAA,MAAM,YAAY,GAAG,MAAM,mBAAmB,CAAC,UAAU,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrF,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QACnD,OAAO,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IACrE,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAGC,aAAO,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAEvI,IAAA,QACEC,cAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EACxCA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAA,YAAA,EAAc,YAAY,EAAA,gBAAA,EAAkB,OAAO,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAA,QAAA,EACtG,QAAQ,EAAA,CACL,EAAA,CACgB;AAE5B;;;"}

package/dist/providers/ThemeProvider/index.d.ts

@@ -21,8 +21,9 @@ interface ThemeProviderProps {
      */
     defaultTheme?: Theme;
     /**
-     * The key to use to store the theme in localStorage
-     * @default "ui-theme"
+     * The key to use to store the theme in localStorage. With `scopeId` the default is namespaced so
+     * sibling MFEs on one host do not share a key; an explicit key is used as given.
+     * @default "ui-theme", or "ui-theme:<scopeId>" when `scopeId` is set
      */
     storageKey?: string;
     /**
@@ -30,14 +31,27 @@ interface ThemeProviderProps {
      * internal state and skips localStorage persistence — useful for controlled MFE's or tests.
      */
     themeModeOverride?: 'light' | 'dark';
+    /**
+     * Stamps `data-mfe-scope={scopeId}` on the themed root so a scoped CSS build
+     * (`[data-mfe-scope="sale-service"]`) matches this tree and nothing else on the page.
+     */
+    scopeId?: string;
+    /**
+     * Mirrors `data-theme` onto `<html>` as well as the themed root, and removes it again on unmount or
+     * when turned off. An embedded app must not mutate the host document, so this is off whenever
+     * `themeModeOverride` or `scopeId` is set.
+     * @default true when neither `themeModeOverride` nor `scopeId` is set
+     */
+    syncDocumentTheme?: boolean;
 }
 /**
  * Provides light/dark/system theme context, persisted to `localStorage` and following the OS
- * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` so tokens
- * and the Tailwind `dark:` variant cascade, including inside CSS-scoped micro-frontends.
+ * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` (and
+ * `data-mfe-scope` when `scopeId` is set) so tokens and the Tailwind `dark:` variant cascade,
+ * including inside CSS-scoped micro-frontends.
  *
  * @summary light/dark/system theme provider carrying data-theme
  */
-export declare const ThemeProvider: ({ children, defaultTheme, storageKey, themeModeOverride }: ThemeProviderProps) => import("react").JSX.Element;
+export declare const ThemeProvider: ({ children, defaultTheme, storageKey, themeModeOverride, scopeId: scopeIdProp, syncDocumentTheme: syncDocumentThemeProp, }: ThemeProviderProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/providers/ThemeProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ThemeProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAID;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,QAAO,gBAQ3B,CAAC;AAOF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACtC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,2DAAmF,kBAAkB,gCA0ClI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ThemeProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAID;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,QAAO,gBAQ3B,CAAC;AAWF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,4HAO3B,kBAAkB,gCA0DpB,CAAC"}

package/dist/providers/ThemeProvider/index.js

@@ -15,6 +15,9 @@ const useTheme = () => {
     }
     return context;
 };
+// Providers currently mirroring onto <html>, so a page with several (a Storybook docs page mounts one per
+// story) only loses the attribute when the last one unmounts.
+let documentThemeWriters = 0;
 const resolveSystemPreference = () => {
     if (typeof window === 'undefined')
         return 'light';
@@ -22,15 +25,20 @@ const resolveSystemPreference = () => {
 };
 /**
  * Provides light/dark/system theme context, persisted to `localStorage` and following the OS
- * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` so tokens
- * and the Tailwind `dark:` variant cascade, including inside CSS-scoped micro-frontends.
+ * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` (and
+ * `data-mfe-scope` when `scopeId` is set) so tokens and the Tailwind `dark:` variant cascade,
+ * including inside CSS-scoped micro-frontends.
  *
  * @summary light/dark/system theme provider carrying data-theme
  */
-const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-theme', themeModeOverride }) => {
+const ThemeProvider = ({ children, defaultTheme = 'system', storageKey, themeModeOverride, scopeId: scopeIdProp, syncDocumentTheme: syncDocumentThemeProp, }) => {
+    // An empty scopeId is unset: it would stamp `data-mfe-scope=""` and switch the <html> mirror off for nothing.
+    const scopeId = scopeIdProp || undefined;
+    const syncDocumentTheme = syncDocumentThemeProp ?? (themeModeOverride === undefined && scopeId === undefined);
+    const resolvedStorageKey = storageKey ?? (scopeId ? `ui-theme:${scopeId}` : 'ui-theme');
     const [theme, setTheme] = useState(() => {
         if (typeof window !== 'undefined') {
-            const savedTheme = localStorage.getItem(storageKey);
+            const savedTheme = localStorage.getItem(resolvedStorageKey);
             return savedTheme || defaultTheme;
         }
         return defaultTheme;
@@ -39,24 +47,38 @@ const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-the
     const [themeRoot, setThemeRoot] = useState(null);
     const activeTheme = themeModeOverride ?? theme;
     const resolvedMode = activeTheme === 'system' ? systemPreference : activeTheme;
+    // The cleanup removes the attribute, so a host document is left as it was found when the mirror
+    // turns off or the provider unmounts.
     useEffect(() => {
+        if (!syncDocumentTheme)
+            return;
+        documentThemeWriters += 1;
         document.documentElement.setAttribute('data-theme', resolvedMode);
-        // Only persist the theme if it's not overridden
-        if (!themeModeOverride) {
-            if (activeTheme === 'system') {
-                localStorage.removeItem(storageKey);
-            }
-            else {
-                localStorage.setItem(storageKey, activeTheme);
-            }
+        return () => {
+            documentThemeWriters -= 1;
+            if (documentThemeWriters === 0)
+                document.documentElement.removeAttribute('data-theme');
+        };
+    }, [syncDocumentTheme, resolvedMode]);
+    // Only persist the theme if it's not overridden
+    useEffect(() => {
+        if (themeModeOverride)
+            return;
+        if (activeTheme === 'system') {
+            localStorage.removeItem(resolvedStorageKey);
+        }
+        else {
+            localStorage.setItem(resolvedStorageKey, activeTheme);
         }
+    }, [activeTheme, themeModeOverride, resolvedStorageKey]);
+    useEffect(() => {
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => setSystemPreference(mediaQuery.matches ? 'dark' : 'light');
         mediaQuery.addEventListener('change', handleChange);
         return () => mediaQuery.removeEventListener('change', handleChange);
-    }, [resolvedMode, activeTheme, themeModeOverride, storageKey]);
+    }, []);
     const contextValue = useMemo(() => ({ theme: activeTheme, setTheme, themeRoot, resolvedMode }), [activeTheme, themeRoot, resolvedMode]);
-    return (jsx(ThemeContext.Provider, { value: contextValue, children: jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, style: { display: 'contents' }, children: children }) }));
+    return (jsx(ThemeContext.Provider, { value: contextValue, children: jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, "data-mfe-scope": scopeId, style: { display: 'contents' }, children: children }) }));
 };
 
 export { ThemeProvider, useTheme };

package/dist/providers/ThemeProvider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAcA,MAAM,YAAY,GAAG,aAAa,CAA+B,SAAS,CAAC;AAE3E;;;;;AAKG;AACI,MAAM,QAAQ,GAAG,MAAuB;AAC7C,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;IACjE;AAEA,IAAA,OAAO,OAAO;AAChB;AAEA,MAAM,uBAAuB,GAAG,MAAuB;IACrD,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,QAAA,OAAO,OAAO;AACjD,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF,CAAC;AAqBD;;;;;;AAMG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,GAAG,QAAQ,EAAE,UAAU,GAAG,UAAU,EAAE,iBAAiB,EAAsB,KAAI;IACrI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,MAAK;AAC7C,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAiB;YACnE,OAAO,UAAU,IAAI,YAAY;QACnC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAmB,uBAAuB,CAAC;IACnG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC;AAEpE,IAAA,MAAM,WAAW,GAAU,iBAAiB,IAAI,KAAK;AACrD,IAAA,MAAM,YAAY,GAAqB,WAAW,KAAK,QAAQ,GAAG,gBAAgB,GAAG,WAAW;IAEhG,SAAS,CAAC,MAAK;QACb,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;;QAGjE,IAAI,CAAC,iBAAiB,EAAE;AACtB,YAAA,IAAI,WAAW,KAAK,QAAQ,EAAE;AAC5B,gBAAA,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC;YACrC;iBAAO;AACL,gBAAA,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC;YAC/C;QACF;QAEA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;AACpE,QAAA,MAAM,YAAY,GAAG,MAAM,mBAAmB,CAAC,UAAU,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrF,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QACnD,OAAO,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IACrE,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAE9D,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAEvI,IAAA,QACEA,GAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EACxCA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAA,YAAA,EAAc,YAAY,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAA,QAAA,EAC7E,QAAQ,EAAA,CACL,EAAA,CACgB;AAE5B;;"}
+{"version":3,"file":"index.js","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

package/dist/providers/UIProvider/hooks/usePortalAnchor.cjs

@@ -0,0 +1,137 @@
+'use strict';
+
+var React = require('react');
+
+/** Fallback for the `body` anchor's stacking level when the `--z-index-overlay-root` token is not in scope. */
+const OVERLAY_ROOT_Z_INDEX_FALLBACK = 1300;
+/**
+ * Reads the design system's overlay stacking tier. Library overlays are `z-50`, which loses to host chrome
+ * such as Portal's sidebar at 200, so the `body` anchor lifts them as a whole to this tier. The token lives
+ * on the themed root because a scoped CSS build rewrites `:root` to the scope, so `body` never carries it.
+ *
+ * @param themeRoot The element the app's tokens cascade from.
+ * @returns The `--z-index-overlay-root` token as a number, or the 1300 fallback.
+ */
+const readOverlayZIndex = (themeRoot) => {
+    const value = themeRoot ? Number.parseInt(getComputedStyle(themeRoot).getPropertyValue('--z-index-overlay-root'), 10) : Number.NaN;
+    return Number.isFinite(value) ? value : OVERLAY_ROOT_Z_INDEX_FALLBACK;
+};
+const portalToBody = () => document.body;
+/**
+ * Decides where overlays portal. An embedded app (one with a `scopeId`) defaults to `document.body` so
+ * its overlays escape the host's `isolation` and `z-index` layers; `null` opts back into the themed root.
+ *
+ * @param portalContainer The consumer's `portalContainer` prop, as passed.
+ * @param scopeId The consumer's `scopeId` prop, as passed.
+ * @returns A resolver for the container, or `null` for the themed root.
+ */
+const resolvePortalContainer = (portalContainer, scopeId) => portalContainer === undefined && scopeId ? portalToBody : (portalContainer ?? null);
+/**
+ * Builds the anchor overlays portal into. On `body` it is a zero-height positioned block: no layout
+ * footprint (beyond a `gap` on a flex or grid body), but a stacking context the host's `z-index` layers cannot beat. Anywhere else it is
+ * `display: contents`, so it cannot disturb a flex or grid host. It carries `data-theme` and, with a
+ * scope, `data-mfe-scope`, which is what lets the app's scoped CSS reach an overlay rendered outside its tree.
+ *
+ * @param container The element the anchor is appended to.
+ * @param options The scope to stamp, if any, the resolved theme mode, and the stacking tier for a `body` anchor.
+ * @returns The appended anchor element.
+ */
+const createPortalAnchor = (container, { scopeId, resolvedMode, zIndex = OVERLAY_ROOT_Z_INDEX_FALLBACK }) => {
+    const anchor = document.createElement('div');
+    if (container === document.body) {
+        anchor.style.position = 'relative';
+        anchor.style.height = '0';
+        anchor.style.zIndex = String(zIndex);
+        // A flex or grid body must not stretch the block or give it a share of the space; a `gap` still applies.
+        anchor.style.flex = '0 0 auto';
+        anchor.style.alignSelf = 'flex-start';
+        anchor.style.margin = '0';
+    }
+    else {
+        anchor.style.display = 'contents';
+    }
+    anchor.setAttribute('data-theme', resolvedMode);
+    if (scopeId)
+        anchor.setAttribute('data-mfe-scope', scopeId);
+    container.appendChild(anchor);
+    return anchor;
+};
+/**
+ * Keeps one themed, optionally scoped anchor inside the resolved portal container and hands React Aria
+ * a `getContainer` that only ever returns an attached anchor or the themed root. Compares resolved DOM
+ * nodes rather than callback identity, so an inline `() => getElementById(...)` does not rebuild the
+ * anchor on every render, and returns `null` for the commit in which the container is still changing so
+ * no overlay lands on `document.body` unstyled and then relocates.
+ *
+ * @param options The container choice, scope, themed root and theme mode.
+ * @returns The `getContainer` callback for `PortalContainer`.
+ */
+const usePortalAnchor = ({ portalContainer, scopeId, themeRoot, resolvedMode }) => {
+    const resolveContainer = React.useMemo(() => resolvePortalContainer(portalContainer, scopeId), [portalContainer, scopeId]);
+    const [portalAnchor, setPortalAnchor] = React.useState(null);
+    const portalAnchorNode = React.useRef(null);
+    const lastExplicitContainer = React.useRef(null);
+    // useLayoutEffect + useState so the anchor exists before paint and its creation re-renders
+    // PortalContainer with a real container; a ref-only write left the first commit portalling to body.
+    React.useLayoutEffect(() => {
+        const explicit = resolveContainer?.() ?? null;
+        if (explicit === lastExplicitContainer.current) {
+            return;
+        }
+        lastExplicitContainer.current = explicit;
+        portalAnchorNode.current?.remove();
+        portalAnchorNode.current = null;
+        if (!explicit) {
+            setPortalAnchor(null);
+            return;
+        }
+        const anchor = createPortalAnchor(explicit, { scopeId, resolvedMode, zIndex: readOverlayZIndex(themeRoot) });
+        portalAnchorNode.current = anchor;
+        setPortalAnchor(anchor);
+    });
+    React.useLayoutEffect(() => () => {
+        portalAnchorNode.current?.remove();
+        portalAnchorNode.current = null;
+        // Reset alongside the node so StrictMode's dev-only mount → cleanup → remount does not see a stale
+        // "unchanged" match, skip recreating the anchor, and keep state pointing at the removed node.
+        lastExplicitContainer.current = null;
+    }, []);
+    React.useLayoutEffect(() => {
+        portalAnchorNode.current?.setAttribute('data-theme', resolvedMode);
+    }, [resolvedMode]);
+    React.useLayoutEffect(() => {
+        const anchor = portalAnchorNode.current;
+        if (!anchor)
+            return;
+        if (scopeId)
+            anchor.setAttribute('data-mfe-scope', scopeId);
+        else
+            anchor.removeAttribute('data-mfe-scope');
+    }, [scopeId]);
+    // `themeRoot` is state filled by a ref callback after the first commit, so the anchor is created before the
+    // token can be read; re-read it once the root exists (and whenever it changes) so a scoped override applies.
+    React.useLayoutEffect(() => {
+        if (!portalAnchor || portalAnchor.parentElement !== document.body)
+            return;
+        portalAnchor.style.zIndex = String(readOverlayZIndex(themeRoot));
+    }, [themeRoot, portalAnchor]);
+    // Re-resolving here (rather than trusting state alone) covers a host swap: this render's anchor still
+    // belongs to the old host until the layout effect rebuilds it, so it must not be handed out.
+    return React.useCallback(() => {
+        const explicit = resolveContainer?.() ?? null;
+        if (explicit) {
+            return explicit === lastExplicitContainer.current ? portalAnchor : null;
+        }
+        if (resolveContainer) {
+            return null;
+        }
+        return themeRoot;
+    }, [portalAnchor, resolveContainer, themeRoot]);
+};
+
+exports.OVERLAY_ROOT_Z_INDEX_FALLBACK = OVERLAY_ROOT_Z_INDEX_FALLBACK;
+exports.createPortalAnchor = createPortalAnchor;
+exports.readOverlayZIndex = readOverlayZIndex;
+exports.resolvePortalContainer = resolvePortalContainer;
+exports.usePortalAnchor = usePortalAnchor;
+//# sourceMappingURL=usePortalAnchor.cjs.map

package/dist/providers/UIProvider/hooks/usePortalAnchor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortalAnchor.cjs","sources":["../../../../src/providers/UIProvider/hooks/usePortalAnchor.ts"],"sourcesContent":[null],"names":["useMemo","useState","useRef","useLayoutEffect","useCallback"],"mappings":"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"}