@flipdish/ui-library 0.38.0 → 0.39.1

package/dist/utilities/cssScopeUtils/index.js

@@ -10,12 +10,20 @@
  * [`postcss-prefix-selector`](https://www.npmjs.com/package/postcss-prefix-selector),
  * consolidating the scoping rules every consumer would otherwise hand-copy (and drift on):
  * scoping `:root`/`html` so `@theme` tokens and base typography cascade only within the
- * subtree, leaving `:host` and `@keyframes` steps alone, never double-prefixing, and
- * optionally scoping `body` resets or letting the scope root element match class selectors.
+ * subtree, leaving `:host` and `@keyframes` steps alone, never double-prefixing, letting the scope
+ * root element itself match class and attribute selectors (`matchRootElement`, on by default), and
+ * optionally scoping `body` resets.
  *
  * This is a pure function with no Node or DOM dependency, so it runs cleanly inside a
  * `postcss.config.mjs`.
  *
+ * **The scope must be exactly one selector that is unique to this app**, and the app must
+ * render it itself — `UIProvider`'s `scopeId` stamps `data-mfe-scope` on the themed root for
+ * exactly this. Never scope to a host container id (`#flipdish-micro-frontend`) or a union of
+ * ids (`:is(#a, #b)`): the host mounts other apps in those containers, so every rule leaks
+ * into them and the last-loaded bundle wins (`.text-xl` from one app beat `lg:text-display-xs`
+ * in another).
+ *
  * Why PostCSS (not Tailwind's own `important(#selector)`): Tailwind v4's `important(...)`
  * syntax emits non-standard `@media important(...)` blocks that lightningcss can't parse
  * during minification, so scoping is done as a PostCSS pass over Tailwind's output instead.
@@ -26,7 +34,8 @@
  * import prefixSelector from 'postcss-prefix-selector';
  * import { createScopedPrefixTransform } from '@flipdish/ui-library/utilities/cssScopeUtils';
  *
- * const SCOPE = '#flipdish-micro-frontend';
+ * // Your Portal microFrontendWindowName; must match <UIProvider scopeId="sale-service">.
+ * const SCOPE = '[data-mfe-scope="sale-service"]';
  *
  * export default {
  *   plugins: [
@@ -46,14 +55,15 @@ const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  * Builds the `transform` callback for `postcss-prefix-selector` that scopes Tailwind v4 output
  * under `scopeSelector`.
  *
- * @param scopeSelector The selector every rule is scoped under, such as
- *   `'#flipdish-micro-frontend'`; must match the `prefix` passed to `postcss-prefix-selector`.
+ * @param scopeSelector The single selector every rule is scoped under, such as
+ *   `'[data-mfe-scope="sale-service"]'`; must match the `prefix` passed to `postcss-prefix-selector`
+ *   and must be unique to this app on the page (never a host container id or a union of ids).
  * @param options Behavioural toggles; see `ScopedPrefixTransformOptions`.
  * @returns The `(prefix, selector, prefixedSelector, filePath?) => string` transform to pass
  *   to the plugin.
  */
 function createScopedPrefixTransform(scopeSelector, options = {}) {
-    const { shouldScope, scopeBody = false, matchRootElement = false } = options;
+    const { shouldScope, scopeBody = false, matchRootElement = true } = options;
     const normalisedScopeSelector = scopeSelector.trim();
     if (!normalisedScopeSelector) {
         throw new Error('createScopedPrefixTransform: `scopeSelector` must be a non-empty selector.');
@@ -91,13 +101,14 @@ function createScopedPrefixTransform(scopeSelector, options = {}) {
         if (KEYFRAME_STEP.test(selector.trim())) {
             return selector;
         }
-        // Class selectors: optionally also match the scope root element itself via a compound
-        // selector (`#scope.flex-1, #scope .flex-1`), so a utility on the mount node applies too.
-        if (matchRootElement && selector.startsWith('.')) {
+        // Class and attribute selectors: also match the scope root itself via a compound selector
+        // (`[data-mfe-scope="x"][data-theme="dark"], [data-mfe-scope="x"] [data-theme="dark"]`); the
+        // scope root is the themed root, so the dark-token rule only reaches it this way.
+        if (matchRootElement && (selector.startsWith('.') || selector.startsWith('['))) {
             return `${prefix}${selector}, ${prefixedSelector}`;
         }
-        // Everything else (`*`, `::before`, `::after`, `[hidden]`, element selectors, …) gets the
-        // standard descendant-scoped selector.
+        // Everything else (`*`, `::before`, `::after`, element selectors, …) gets the standard
+        // descendant-scoped selector.
         return prefixedSelector;
     };
 }

package/dist/utilities/cssScopeUtils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utilities/cssScopeUtils/index.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCG;AA4BH;AACA,MAAM,aAAa,GAAG,0BAA0B;AAEhD;AACA,MAAM,YAAY,GAAG,CAAC,KAAa,KAAa,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC;AAE5F;;;;;;;;;AASG;SACa,2BAA2B,CACzC,aAAqB,EACrB,UAAwC,EAAE,EAAA;AAE1C,IAAA,MAAM,EAAE,WAAW,EAAE,SAAS,GAAG,KAAK,EAAE,gBAAgB,GAAG,KAAK,EAAE,GAAG,OAAO;AAE5E,IAAA,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;IACpD,IAAI,CAAC,uBAAuB,EAAE;AAC5B,QAAA,MAAM,IAAI,KAAK,CAAC,4EAA4E,CAAC;IAC/F;;;;;AAMA,IAAA,MAAM,aAAa,GAAG,IAAI,MAAM,CAAC,CAAA,CAAA,EAAI,YAAY,CAAC,uBAAuB,CAAC,CAAA,qBAAA,CAAuB,CAAC;IAElG,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,KAAI;;QAEtD,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE;AACzC,YAAA,OAAO,QAAQ;QACjB;;QAGA,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,EAAE;AAC5C,YAAA,OAAO,QAAQ;QACjB;;;;QAKA,IAAI,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,MAAM,EAAE;AAC/C,YAAA,OAAO,MAAM;QACf;;AAGA,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,QAAQ;QACjB;;;AAIA,QAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,OAAO,SAAS,GAAG,MAAM,GAAG,QAAQ;QACtC;;QAGA,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE;AACvC,YAAA,OAAO,QAAQ;QACjB;;;QAIA,IAAI,gBAAgB,IAAI,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AAChD,YAAA,OAAO,GAAG,MAAM,CAAA,EAAG,QAAQ,CAAA,EAAA,EAAK,gBAAgB,EAAE;QACpD;;;AAIA,QAAA,OAAO,gBAAgB;AACzB,IAAA,CAAC;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../../src/utilities/cssScopeUtils/index.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDG;AA6BH;AACA,MAAM,aAAa,GAAG,0BAA0B;AAEhD;AACA,MAAM,YAAY,GAAG,CAAC,KAAa,KAAa,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC;AAE5F;;;;;;;;;;AAUG;SACa,2BAA2B,CACzC,aAAqB,EACrB,UAAwC,EAAE,EAAA;AAE1C,IAAA,MAAM,EAAE,WAAW,EAAE,SAAS,GAAG,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,GAAG,OAAO;AAE3E,IAAA,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;IACpD,IAAI,CAAC,uBAAuB,EAAE;AAC5B,QAAA,MAAM,IAAI,KAAK,CAAC,4EAA4E,CAAC;IAC/F;;;;;AAMA,IAAA,MAAM,aAAa,GAAG,IAAI,MAAM,CAAC,CAAA,CAAA,EAAI,YAAY,CAAC,uBAAuB,CAAC,CAAA,qBAAA,CAAuB,CAAC;IAElG,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,KAAI;;QAEtD,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE;AACzC,YAAA,OAAO,QAAQ;QACjB;;QAGA,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,EAAE;AAC5C,YAAA,OAAO,QAAQ;QACjB;;;;QAKA,IAAI,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,MAAM,EAAE;AAC/C,YAAA,OAAO,MAAM;QACf;;AAGA,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,QAAQ;QACjB;;;AAIA,QAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,OAAO,SAAS,GAAG,MAAM,GAAG,QAAQ;QACtC;;QAGA,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE;AACvC,YAAA,OAAO,QAAQ;QACjB;;;;AAKA,QAAA,IAAI,gBAAgB,KAAK,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE;AAC9E,YAAA,OAAO,GAAG,MAAM,CAAA,EAAG,QAAQ,CAAA,EAAA,EAAK,gBAAgB,EAAE;QACpD;;;AAIA,QAAA,OAAO,gBAAgB;AACzB,IAAA,CAAC;AACH;;"}

package/dist/utilities/renderUtils/index.cjs

@@ -43,18 +43,45 @@ const isProductionBuild = () => {
     const viteEnv = undefined;
     return viteEnv?.PROD === true || viteEnv?.MODE === 'production';
 };
+/** Id of the container Portal mounts page-level micro-frontends into; the lookup of last resort. */
+const DEFAULT_MICRO_FRONTEND_CONTAINER_ID = 'flipdish-micro-frontend';
+let microFrontendContainer = null;
 /**
- * Reads an attribute from the `#flipdish-micro-frontend` container Portal mounts the app into.
+ * Registers the container the host mounted this app into, so `getMicroFrontendAttribute` and the
+ * id getters read from it instead of `#flipdish-micro-frontend`. Call it first thing in the mount
+ * entry the host invokes, before anything reads `getAppId()` or `data-portal-base-url`. A resolver
+ * is accepted for containers that do not exist yet; pass `null` to clear the registration.
  *
- * @param key The attribute name, such as `data-app-id`.
- * @returns Its value, or an empty string when there is no document or no such attribute.
+ * @param container The mount element, a callback resolving it on each read, or `null` to fall
+ *   back to `#flipdish-micro-frontend`.
+ * @returns Nothing.
  */
-const getMicroFrontendAttribute = (key) => {
+const setMicroFrontendContainer = (container) => {
+    microFrontendContainer = container;
+};
+/**
+ * Resolves the container attributes are read from: the registered container while it is in the
+ * document, otherwise `#flipdish-micro-frontend`.
+ *
+ * @returns The container element, or `null` when neither source yields one.
+ */
+const getMicroFrontendContainer = () => {
     if (typeof document === 'undefined') {
-        return '';
+        return null;
     }
-    const microFrontendDiv = document.getElementById('flipdish-micro-frontend');
-    return microFrontendDiv?.getAttribute(key) || '';
+    const registered = typeof microFrontendContainer === 'function' ? microFrontendContainer() : microFrontendContainer;
+    // A registration left behind after the host removed the container must not serve stale attributes.
+    return registered?.isConnected ? registered : document.getElementById(DEFAULT_MICRO_FRONTEND_CONTAINER_ID);
+};
+/**
+ * Reads an attribute from the container the host mounted the app into: the one registered with
+ * `setMicroFrontendContainer`, else `#flipdish-micro-frontend`.
+ *
+ * @param key The attribute name, such as `data-app-id`.
+ * @returns Its value, or an empty string when there is no document, no container or no such attribute.
+ */
+const getMicroFrontendAttribute = (key) => {
+    return getMicroFrontendContainer()?.getAttribute(key) || '';
 };
 /**
  * Reads the app id: the `VITE_APPID_OVERRIDE` environment variable first, then the container's
@@ -115,7 +142,9 @@ exports.getBrandId = getBrandId;
 exports.getEnvironmentVariable = getEnvironmentVariable;
 exports.getIsFlipdishStaff = getIsFlipdishStaff;
 exports.getMicroFrontendAttribute = getMicroFrontendAttribute;
+exports.getMicroFrontendContainer = getMicroFrontendContainer;
 exports.getOrgId = getOrgId;
 exports.isProductionBuild = isProductionBuild;
 exports.lazyWithRetry = lazyWithRetry;
+exports.setMicroFrontendContainer = setMicroFrontendContainer;
 //# sourceMappingURL=index.cjs.map

package/dist/utilities/renderUtils/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/utilities/renderUtils/index.ts"],"sourcesContent":[null],"names":["lazy","importWithRetry"],"mappings":";;;;;AAIA;;;;;;AAMG;AACI,MAAM,sBAAsB,GAAG,CAAC,GAAW,KAAY;;AAE5D,IAAA,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;AACzF,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAW;IACnC;;;;;;AAMA,IAAA,MAAM,OAAO,GAAI,SAA6E;AAC9F,IAAA,OAAO,OAAO,GAAG,GAAG,CAAC,IAAI,EAAE;AAC7B;AAEA;;;;;;;;AAQG;AACI,MAAM,iBAAiB,GAAG,MAAc;AAC7C,IAAA,IAAI;AACF,QAAA,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,QAAQ;AAAE,YAAA,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;IAC5F;AAAE,IAAA,MAAM;;IAER;AACA,IAAA,MAAM,OAAO,GAAI,SAA4E;IAC7F,OAAO,OAAO,EAAE,IAAI,KAAK,IAAI,IAAI,OAAO,EAAE,IAAI,KAAK,YAAY;AACjE;AAEA;;;;;AAKG;AACI,MAAM,yBAAyB,GAAG,CAAC,GAAW,KAAY;AAC/D,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;AACnC,QAAA,OAAO,EAAE;IACX;IACA,MAAM,gBAAgB,GAAG,QAAQ,CAAC,cAAc,CAAC,yBAAyB,CAAC;IAC3E,OAAO,gBAAgB,EAAE,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE;AAClD;AAEA;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,MAAa;AACnC,IAAA,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,IAAI,yBAAyB,CAAC,aAAa,CAAC,IAAI,yBAAyB,CAAC,YAAY,CAAC;AAC7I;AAEA;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,MAAa;AACnC,IAAA,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,IAAI,yBAAyB,CAAC,aAAa,CAAC,IAAI,yBAAyB,CAAC,YAAY,CAAC;AAC7I;AAEA;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,sBAAsB,CAAC,uBAAuB,CAAC,IAAI,yBAAyB,CAAC,eAAe,CAAC,IAAI,yBAAyB,CAAC,cAAc,CAAC;AACnJ;AAEA;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG,MAAc;AAC9C,IAAA,MAAM,WAAW,GACf,sBAAsB,CAAC,8BAA8B,CAAC;QACtD,yBAAyB,CAAC,wBAAwB,CAAC;QACnD,yBAAyB,CAAC,sBAAsB,CAAC;AACnD,IAAA,OAAO,WAAW,EAAE,QAAQ,EAAE,KAAK,MAAM;AAC3C;AAEA;;;;;;AAMG;AACH;AACO,MAAM,aAAa,GAAG,CAAC,eAA0B,KAAKA,UAAI,CAAC,MAAMC,qCAAe,CAAC,eAAe,CAAC;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/utilities/renderUtils/index.ts"],"sourcesContent":[null],"names":["lazy","importWithRetry"],"mappings":";;;;;AAIA;;;;;;AAMG;AACI,MAAM,sBAAsB,GAAG,CAAC,GAAW,KAAY;;AAE5D,IAAA,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;AACzF,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAW;IACnC;;;;;;AAMA,IAAA,MAAM,OAAO,GAAI,SAA6E;AAC9F,IAAA,OAAO,OAAO,GAAG,GAAG,CAAC,IAAI,EAAE;AAC7B;AAEA;;;;;;;;AAQG;AACI,MAAM,iBAAiB,GAAG,MAAc;AAC7C,IAAA,IAAI;AACF,QAAA,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,QAAQ;AAAE,YAAA,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;IAC5F;AAAE,IAAA,MAAM;;IAER;AACA,IAAA,MAAM,OAAO,GAAI,SAA4E;IAC7F,OAAO,OAAO,EAAE,IAAI,KAAK,IAAI,IAAI,OAAO,EAAE,IAAI,KAAK,YAAY;AACjE;AAEA;AACA,MAAM,mCAAmC,GAAG,yBAAyB;AAIrE,IAAI,sBAAsB,GAA2B,IAAI;AAEzD;;;;;;;;;AASG;AACI,MAAM,yBAAyB,GAAG,CAAC,SAAiC,KAAU;IACnF,sBAAsB,GAAG,SAAS;AACpC;AAEA;;;;;AAKG;AACI,MAAM,yBAAyB,GAAG,MAAyB;AAChE,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;AACnC,QAAA,OAAO,IAAI;IACb;AACA,IAAA,MAAM,UAAU,GAAG,OAAO,sBAAsB,KAAK,UAAU,GAAG,sBAAsB,EAAE,GAAG,sBAAsB;;AAEnH,IAAA,OAAO,UAAU,EAAE,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,mCAAmC,CAAC;AAC5G;AAEA;;;;;;AAMG;AACI,MAAM,yBAAyB,GAAG,CAAC,GAAW,KAAY;IAC/D,OAAO,yBAAyB,EAAE,EAAE,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE;AAC7D;AAEA;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,MAAa;AACnC,IAAA,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,IAAI,yBAAyB,CAAC,aAAa,CAAC,IAAI,yBAAyB,CAAC,YAAY,CAAC;AAC7I;AAEA;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,MAAa;AACnC,IAAA,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,IAAI,yBAAyB,CAAC,aAAa,CAAC,IAAI,yBAAyB,CAAC,YAAY,CAAC;AAC7I;AAEA;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,sBAAsB,CAAC,uBAAuB,CAAC,IAAI,yBAAyB,CAAC,eAAe,CAAC,IAAI,yBAAyB,CAAC,cAAc,CAAC;AACnJ;AAEA;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG,MAAc;AAC9C,IAAA,MAAM,WAAW,GACf,sBAAsB,CAAC,8BAA8B,CAAC;QACtD,yBAAyB,CAAC,wBAAwB,CAAC;QACnD,yBAAyB,CAAC,sBAAsB,CAAC;AACnD,IAAA,OAAO,WAAW,EAAE,QAAQ,EAAE,KAAK,MAAM;AAC3C;AAEA;;;;;;AAMG;AACH;AACO,MAAM,aAAa,GAAG,CAAC,eAA0B,KAAKA,UAAI,CAAC,MAAMC,qCAAe,CAAC,eAAe,CAAC;;;;;;;;;;;"}

package/dist/utilities/renderUtils/index.d.ts

@@ -16,11 +16,31 @@ export declare const getEnvironmentVariable: (key: string) => string;
  * @returns `true` in a production build; `false` in development, tests and when nothing says otherwise.
  */
 export declare const isProductionBuild: () => boolean;
+type MicroFrontendContainer = HTMLElement | (() => HTMLElement | null) | null;
 /**
- * Reads an attribute from the `#flipdish-micro-frontend` container Portal mounts the app into.
+ * Registers the container the host mounted this app into, so `getMicroFrontendAttribute` and the
+ * id getters read from it instead of `#flipdish-micro-frontend`. Call it first thing in the mount
+ * entry the host invokes, before anything reads `getAppId()` or `data-portal-base-url`. A resolver
+ * is accepted for containers that do not exist yet; pass `null` to clear the registration.
+ *
+ * @param container The mount element, a callback resolving it on each read, or `null` to fall
+ *   back to `#flipdish-micro-frontend`.
+ * @returns Nothing.
+ */
+export declare const setMicroFrontendContainer: (container: MicroFrontendContainer) => void;
+/**
+ * Resolves the container attributes are read from: the registered container while it is in the
+ * document, otherwise `#flipdish-micro-frontend`.
+ *
+ * @returns The container element, or `null` when neither source yields one.
+ */
+export declare const getMicroFrontendContainer: () => HTMLElement | null;
+/**
+ * Reads an attribute from the container the host mounted the app into: the one registered with
+ * `setMicroFrontendContainer`, else `#flipdish-micro-frontend`.
  *
  * @param key The attribute name, such as `data-app-id`.
- * @returns Its value, or an empty string when there is no document or no such attribute.
+ * @returns Its value, or an empty string when there is no document, no container or no such attribute.
  */
 export declare const getMicroFrontendAttribute: (key: string) => string;
 /**
@@ -64,4 +84,5 @@ export declare const getIsFlipdishStaff: () => boolean;
  * @returns A lazy component to render inside `Suspense`.
  */
 export declare const lazyWithRetry: (componentImport: () => any) => import("react").LazyExoticComponent<import("react").ComponentType<any>>;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/utilities/renderUtils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/renderUtils/index.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GAAI,KAAK,MAAM,KAAG,MAYpD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,QAAO,OAQpC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,GAAI,KAAK,MAAM,KAAG,MAMvD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,QAAO,MAE3B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,QAAO,MAE3B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,QAAO,MAE7B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,QAAO,OAMrC,CAAC;AAEF;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,GAAI,iBAAiB,MAAM,GAAG,4EAAiD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/renderUtils/index.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GAAI,KAAK,MAAM,KAAG,MAYpD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,QAAO,OAQpC,CAAC;AAKF,KAAK,sBAAsB,GAAG,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AAI9E;;;;;;;;;GASG;AACH,eAAO,MAAM,yBAAyB,GAAI,WAAW,sBAAsB,KAAG,IAE7E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,QAAO,WAAW,GAAG,IAO1D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,GAAI,KAAK,MAAM,KAAG,MAEvD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,QAAO,MAE3B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,QAAO,MAE3B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,QAAO,MAE7B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,QAAO,OAMrC,CAAC;AAEF;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,GAAI,iBAAiB,MAAM,GAAG,4EAAiD,CAAC"}

package/dist/utilities/renderUtils/index.js

@@ -41,18 +41,45 @@ const isProductionBuild = () => {
     const viteEnv = import.meta.env;
     return viteEnv?.PROD === true || viteEnv?.MODE === 'production';
 };
+/** Id of the container Portal mounts page-level micro-frontends into; the lookup of last resort. */
+const DEFAULT_MICRO_FRONTEND_CONTAINER_ID = 'flipdish-micro-frontend';
+let microFrontendContainer = null;
 /**
- * Reads an attribute from the `#flipdish-micro-frontend` container Portal mounts the app into.
+ * Registers the container the host mounted this app into, so `getMicroFrontendAttribute` and the
+ * id getters read from it instead of `#flipdish-micro-frontend`. Call it first thing in the mount
+ * entry the host invokes, before anything reads `getAppId()` or `data-portal-base-url`. A resolver
+ * is accepted for containers that do not exist yet; pass `null` to clear the registration.
  *
- * @param key The attribute name, such as `data-app-id`.
- * @returns Its value, or an empty string when there is no document or no such attribute.
+ * @param container The mount element, a callback resolving it on each read, or `null` to fall
+ *   back to `#flipdish-micro-frontend`.
+ * @returns Nothing.
  */
-const getMicroFrontendAttribute = (key) => {
+const setMicroFrontendContainer = (container) => {
+    microFrontendContainer = container;
+};
+/**
+ * Resolves the container attributes are read from: the registered container while it is in the
+ * document, otherwise `#flipdish-micro-frontend`.
+ *
+ * @returns The container element, or `null` when neither source yields one.
+ */
+const getMicroFrontendContainer = () => {
     if (typeof document === 'undefined') {
-        return '';
+        return null;
     }
-    const microFrontendDiv = document.getElementById('flipdish-micro-frontend');
-    return microFrontendDiv?.getAttribute(key) || '';
+    const registered = typeof microFrontendContainer === 'function' ? microFrontendContainer() : microFrontendContainer;
+    // A registration left behind after the host removed the container must not serve stale attributes.
+    return registered?.isConnected ? registered : document.getElementById(DEFAULT_MICRO_FRONTEND_CONTAINER_ID);
+};
+/**
+ * Reads an attribute from the container the host mounted the app into: the one registered with
+ * `setMicroFrontendContainer`, else `#flipdish-micro-frontend`.
+ *
+ * @param key The attribute name, such as `data-app-id`.
+ * @returns Its value, or an empty string when there is no document, no container or no such attribute.
+ */
+const getMicroFrontendAttribute = (key) => {
+    return getMicroFrontendContainer()?.getAttribute(key) || '';
 };
 /**
  * Reads the app id: the `VITE_APPID_OVERRIDE` environment variable first, then the container's
@@ -108,5 +135,5 @@ const getIsFlipdishStaff = () => {
 // biome-ignore lint/suspicious/noExplicitAny: dynamic import factory shape isn't expressible without `any`; preserved from portal-library implementation
 const lazyWithRetry = (componentImport) => lazy(() => importWithRetry(componentImport));
 
-export { getAppId, getBrandId, getEnvironmentVariable, getIsFlipdishStaff, getMicroFrontendAttribute, getOrgId, isProductionBuild, lazyWithRetry };
+export { getAppId, getBrandId, getEnvironmentVariable, getIsFlipdishStaff, getMicroFrontendAttribute, getMicroFrontendContainer, getOrgId, isProductionBuild, lazyWithRetry, setMicroFrontendContainer };
 //# sourceMappingURL=index.js.map

package/dist/utilities/renderUtils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utilities/renderUtils/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;AAMG;AACI,MAAM,sBAAsB,GAAG,CAAC,GAAW,KAAY;;AAE5D,IAAA,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;AACzF,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAW;IACnC;;;;;;AAMA,IAAA,MAAM,OAAO,GAAI,MAAM,CAAC,IAAkE,CAAC,GAAG;AAC9F,IAAA,OAAO,OAAO,GAAG,GAAG,CAAC,IAAI,EAAE;AAC7B;AAEA;;;;;;;;AAQG;AACI,MAAM,iBAAiB,GAAG,MAAc;AAC7C,IAAA,IAAI;AACF,QAAA,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,QAAQ;AAAE,YAAA,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;IAC5F;AAAE,IAAA,MAAM;;IAER;AACA,IAAA,MAAM,OAAO,GAAI,MAAM,CAAC,IAAiE,CAAC,GAAG;IAC7F,OAAO,OAAO,EAAE,IAAI,KAAK,IAAI,IAAI,OAAO,EAAE,IAAI,KAAK,YAAY;AACjE;AAEA;;;;;AAKG;AACI,MAAM,yBAAyB,GAAG,CAAC,GAAW,KAAY;AAC/D,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;AACnC,QAAA,OAAO,EAAE;IACX;IACA,MAAM,gBAAgB,GAAG,QAAQ,CAAC,cAAc,CAAC,yBAAyB,CAAC;IAC3E,OAAO,gBAAgB,EAAE,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE;AAClD;AAEA;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,MAAa;AACnC,IAAA,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,IAAI,yBAAyB,CAAC,aAAa,CAAC,IAAI,yBAAyB,CAAC,YAAY,CAAC;AAC7I;AAEA;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,MAAa;AACnC,IAAA,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,IAAI,yBAAyB,CAAC,aAAa,CAAC,IAAI,yBAAyB,CAAC,YAAY,CAAC;AAC7I;AAEA;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,sBAAsB,CAAC,uBAAuB,CAAC,IAAI,yBAAyB,CAAC,eAAe,CAAC,IAAI,yBAAyB,CAAC,cAAc,CAAC;AACnJ;AAEA;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG,MAAc;AAC9C,IAAA,MAAM,WAAW,GACf,sBAAsB,CAAC,8BAA8B,CAAC;QACtD,yBAAyB,CAAC,wBAAwB,CAAC;QACnD,yBAAyB,CAAC,sBAAsB,CAAC;AACnD,IAAA,OAAO,WAAW,EAAE,QAAQ,EAAE,KAAK,MAAM;AAC3C;AAEA;;;;;;AAMG;AACH;AACO,MAAM,aAAa,GAAG,CAAC,eAA0B,KAAK,IAAI,CAAC,MAAM,eAAe,CAAC,eAAe,CAAC;;"}
+{"version":3,"file":"index.js","sources":["../../../src/utilities/renderUtils/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;AAMG;AACI,MAAM,sBAAsB,GAAG,CAAC,GAAW,KAAY;;AAE5D,IAAA,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;AACzF,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAW;IACnC;;;;;;AAMA,IAAA,MAAM,OAAO,GAAI,MAAM,CAAC,IAAkE,CAAC,GAAG;AAC9F,IAAA,OAAO,OAAO,GAAG,GAAG,CAAC,IAAI,EAAE;AAC7B;AAEA;;;;;;;;AAQG;AACI,MAAM,iBAAiB,GAAG,MAAc;AAC7C,IAAA,IAAI;AACF,QAAA,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,QAAQ;AAAE,YAAA,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;IAC5F;AAAE,IAAA,MAAM;;IAER;AACA,IAAA,MAAM,OAAO,GAAI,MAAM,CAAC,IAAiE,CAAC,GAAG;IAC7F,OAAO,OAAO,EAAE,IAAI,KAAK,IAAI,IAAI,OAAO,EAAE,IAAI,KAAK,YAAY;AACjE;AAEA;AACA,MAAM,mCAAmC,GAAG,yBAAyB;AAIrE,IAAI,sBAAsB,GAA2B,IAAI;AAEzD;;;;;;;;;AASG;AACI,MAAM,yBAAyB,GAAG,CAAC,SAAiC,KAAU;IACnF,sBAAsB,GAAG,SAAS;AACpC;AAEA;;;;;AAKG;AACI,MAAM,yBAAyB,GAAG,MAAyB;AAChE,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;AACnC,QAAA,OAAO,IAAI;IACb;AACA,IAAA,MAAM,UAAU,GAAG,OAAO,sBAAsB,KAAK,UAAU,GAAG,sBAAsB,EAAE,GAAG,sBAAsB;;AAEnH,IAAA,OAAO,UAAU,EAAE,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,mCAAmC,CAAC;AAC5G;AAEA;;;;;;AAMG;AACI,MAAM,yBAAyB,GAAG,CAAC,GAAW,KAAY;IAC/D,OAAO,yBAAyB,EAAE,EAAE,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE;AAC7D;AAEA;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,MAAa;AACnC,IAAA,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,IAAI,yBAAyB,CAAC,aAAa,CAAC,IAAI,yBAAyB,CAAC,YAAY,CAAC;AAC7I;AAEA;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,MAAa;AACnC,IAAA,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,IAAI,yBAAyB,CAAC,aAAa,CAAC,IAAI,yBAAyB,CAAC,YAAY,CAAC;AAC7I;AAEA;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,MAAa;AACrC,IAAA,OAAO,sBAAsB,CAAC,uBAAuB,CAAC,IAAI,yBAAyB,CAAC,eAAe,CAAC,IAAI,yBAAyB,CAAC,cAAc,CAAC;AACnJ;AAEA;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG,MAAc;AAC9C,IAAA,MAAM,WAAW,GACf,sBAAsB,CAAC,8BAA8B,CAAC;QACtD,yBAAyB,CAAC,wBAAwB,CAAC;QACnD,yBAAyB,CAAC,sBAAsB,CAAC;AACnD,IAAA,OAAO,WAAW,EAAE,QAAQ,EAAE,KAAK,MAAM;AAC3C;AAEA;;;;;;AAMG;AACH;AACO,MAAM,aAAa,GAAG,CAAC,eAA0B,KAAK,IAAI,CAAC,MAAM,eAAe,CAAC,eAAe,CAAC;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.38.0",
+  "version": "0.39.1",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "imports": {
@@ -90,7 +90,7 @@
     }
   },
   "dependencies": {
-    "@flipdish/ui-icons": "^0.6.0",
+    "@flipdish/ui-icons": "^0.7.0",
     "@floating-ui/dom": "^1.7.6",
     "@internationalized/date": "^3.12.2",
     "@react-aria/focus": "^3.22.1",