@flipdish/ui-library 0.37.0 → 0.39.0

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/__internal__/selectionControl/selectionControl.styles.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+const selectionControlSizes = cx.sortCx({
+    sm: {
+        root: 'gap-2',
+        textWrapper: '',
+        label: 'text-sm font-medium',
+        hint: 'text-sm',
+    },
+    md: {
+        root: 'gap-3',
+        textWrapper: 'gap-0.5',
+        label: 'text-md font-medium',
+        hint: 'text-md',
+    },
+});
+
+exports.selectionControlSizes = selectionControlSizes;
+//# sourceMappingURL=selectionControl.styles.cjs.map

package/dist/components/__internal__/selectionControl/selectionControl.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.cjs","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"sourcesContent":[null],"names":["sortCx"],"mappings":";;;;AAIA;AACO,MAAM,qBAAqB,GAAGA,SAAM,CAAC;AAC1C,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACgG,CAAA;;"}

package/dist/components/__internal__/selectionControl/selectionControl.styles.d.ts

@@ -0,0 +1,17 @@
+export type SelectionControlSize = 'sm' | 'md';
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+export declare const selectionControlSizes: {
+    sm: {
+        root: string;
+        textWrapper: string;
+        label: string;
+        hint: string;
+    };
+    md: {
+        root: string;
+        textWrapper: string;
+        label: string;
+        hint: string;
+    };
+};
+//# sourceMappingURL=selectionControl.styles.d.ts.map

package/dist/components/__internal__/selectionControl/selectionControl.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,mHAAmH;AACnH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAakE,CAAC"}

package/dist/components/__internal__/selectionControl/selectionControl.styles.js

@@ -0,0 +1,20 @@
+import { sortCx } from '@flipdish/ui-library/utilities/cx';
+
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+const selectionControlSizes = sortCx({
+    sm: {
+        root: 'gap-2',
+        textWrapper: '',
+        label: 'text-sm font-medium',
+        hint: 'text-sm',
+    },
+    md: {
+        root: 'gap-3',
+        textWrapper: 'gap-0.5',
+        label: 'text-md font-medium',
+        hint: 'text-md',
+    },
+});
+
+export { selectionControlSizes };
+//# sourceMappingURL=selectionControl.styles.js.map

package/dist/components/__internal__/selectionControl/selectionControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.js","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;AACO,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAC1C,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACgG,CAAA;;"}

package/dist/components/__internal__/selectionControl/selectionControl.utils.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+/**
+ * Accessible name for a native selection control, since RN's `accessibilityLabel` takes only a string.
+ *
+ * @param ariaLabel Explicit name from the web-style `aria-label` prop; always wins when set.
+ * @param label The visible label, used only when it is plain text.
+ * @returns The name to announce, or `undefined` when neither gives a string.
+ */
+export declare const getAccessibleName: (ariaLabel: string | undefined, label: ReactNode) => string | undefined;
+/**
+ * Screen-reader hint for a native selection control, since RN's `accessibilityHint` takes only a string.
+ *
+ * @param hint The visible hint, announced after the name only when it is plain text.
+ * @returns The hint to announce, or `undefined` for a non-string or missing hint.
+ */
+export declare const getAccessibleHint: (hint: ReactNode) => string | undefined;
+export declare const SELECTION_CONTROL_HIT_SLOP: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+//# sourceMappingURL=selectionControl.utils.d.ts.map

package/dist/components/__internal__/selectionControl/selectionControl.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,GAAG,SAAS,EAAE,OAAO,SAAS,KAAG,MAAM,GAAG,SAC/B,CAAC;AAE/D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,SAA0D,CAAC;AAGxH,eAAO,MAAM,0BAA0B;;;;;CAA6C,CAAC"}

package/dist/components/atoms/Checkbox/index.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var reactAriaComponents = require('react-aria-components');
+var selectionControl_styles = require('../../__internal__/selectionControl/selectionControl.styles.cjs');
 
 /** Visual-only checkbox square with no input behaviour, for building custom selectable controls; `Checkbox` renders it inside a react-aria `Checkbox`. */
 const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = 'sm', isFocusVisible = false }) => {
@@ -18,24 +19,10 @@ CheckboxBase.displayName = 'CheckboxBase';
  */
 const Checkbox = ({ label, hint, size = 'sm', className, 'data-testid': dataTestId, ...ariaCheckboxProps }) => {
     const checkboxTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'checkbox', rootName: 'checkbox' });
-    const sizes = {
-        sm: {
-            root: 'gap-2',
-            textWrapper: '',
-            label: 'text-sm font-medium',
-            hint: 'text-sm',
-        },
-        md: {
-            root: 'gap-3',
-            textWrapper: 'gap-0.5',
-            label: 'text-md font-medium',
-            hint: 'text-md',
-        },
-    };
-    return (jsxRuntime.jsx(reactAriaComponents.Checkbox, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx.cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
+    return (jsxRuntime.jsx(reactAriaComponents.Checkbox, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx.cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', selectionControl_styles.selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('inline-flex flex-col', selectionControl_styles.selectionControlSizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', selectionControl_styles.selectionControlSizes[size].label), children: label }), hint && (
                         // biome-ignore lint/a11y/noStaticElementInteractions: not independently interactive — only stops the click reaching outer React handlers, see below
                         // biome-ignore lint/a11y/useKeyWithClickEvents: same as above, no keyboard equivalent needed
-                        jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', sizes[size].hint), onClick: (event) => {
+                        jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', selectionControl_styles.selectionControlSizes[size].hint), onClick: (event) => {
                                 // Deliberately stopPropagation only, no preventDefault (matches the
                                 // Untitled UI reference). The native <label>->control click-forwarding
                                 // that toggles the checkbox happens during the real DOM bubble phase,

package/dist/components/atoms/Checkbox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","useResolvedTestId","AriaCheckbox","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","useResolvedTestId","AriaCheckbox","selectionControlSizes","_Fragment"],"mappings":"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"}

package/dist/components/atoms/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAA4B,KAAK,aAAa,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1G,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qGAAqG;IACrG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,0JAA0J;AAC1J,eAAO,MAAM,YAAY;mFAAiG,iBAAiB;;CAwC1I,CAAC;AAGF,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ;wFAA8F,aAAa;;CAsE/H,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAA4B,KAAK,aAAa,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1G,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qGAAqG;IACrG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,0JAA0J;AAC1J,eAAO,MAAM,YAAY;mFAAiG,iBAAiB;;CAwC1I,CAAC;AAGF,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ;wFAA8F,aAAa;;CAuD/H,CAAC"}

package/dist/components/atoms/Checkbox/index.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 import { Checkbox as Checkbox$1 } from 'react-aria-components';
+import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
 
 /** Visual-only checkbox square with no input behaviour, for building custom selectable controls; `Checkbox` renders it inside a react-aria `Checkbox`. */
 const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = 'sm', isFocusVisible = false }) => {
@@ -16,24 +17,10 @@ CheckboxBase.displayName = 'CheckboxBase';
  */
 const Checkbox = ({ label, hint, size = 'sm', className, 'data-testid': dataTestId, ...ariaCheckboxProps }) => {
     const checkboxTestId = useResolvedTestId({ testId: dataTestId, segment: 'checkbox', rootName: 'checkbox' });
-    const sizes = {
-        sm: {
-            root: 'gap-2',
-            textWrapper: '',
-            label: 'text-sm font-medium',
-            hint: 'text-sm',
-        },
-        md: {
-            root: 'gap-3',
-            textWrapper: 'gap-0.5',
-            label: 'text-md font-medium',
-            hint: 'text-md',
-        },
-    };
-    return (jsx(Checkbox$1, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
+    return (jsx(Checkbox$1, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('inline-flex flex-col', selectionControlSizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', selectionControlSizes[size].label), children: label }), hint && (
                         // biome-ignore lint/a11y/noStaticElementInteractions: not independently interactive — only stops the click reaching outer React handlers, see below
                         // biome-ignore lint/a11y/useKeyWithClickEvents: same as above, no keyboard equivalent needed
-                        jsx("span", { className: cx('text-tertiary', sizes[size].hint), onClick: (event) => {
+                        jsx("span", { className: cx('text-tertiary', selectionControlSizes[size].hint), onClick: (event) => {
                                 // Deliberately stopPropagation only, no preventDefault (matches the
                                 // Untitled UI reference). The native <label>->control click-forwarding
                                 // that toggles the checkbox happens during the real DOM bubble phase,

package/dist/components/atoms/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaCheckbox","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaCheckbox","_Fragment"],"mappings":"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"}

package/dist/components/atoms/Toggle/Toggle.styles.cjs

@@ -21,20 +21,6 @@ const styles = cx.sortCx({
         sm: 'translate-x-4',
         md: 'translate-x-5',
     },
-    sizes: {
-        sm: {
-            root: 'gap-2',
-            textWrapper: '',
-            label: 'text-sm font-medium',
-            hint: 'text-sm',
-        },
-        md: {
-            root: 'gap-3',
-            textWrapper: 'gap-0.5',
-            label: 'text-md font-medium',
-            hint: 'text-md',
-        },
-    },
 });
 
 exports.styles = styles;

package/dist/components/atoms/Toggle/Toggle.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.styles.cjs","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":["sortCx"],"mappings":";;;;AAGO,MAAM,MAAM,GAAGA,SAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACtC,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,KAAK,EAAE,qBAAqB;AAC5B,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,WAAW,EAAE,SAAS;AACtB,YAAA,KAAK,EAAE,qBAAqB;AAC5B,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACsF,KAAA;AAC1F,CAAA;;"}
+{"version":3,"file":"Toggle.styles.cjs","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":["sortCx"],"mappings":";;;;AAGO,MAAM,MAAM,GAAGA,SAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACvC,CAAA;;"}

package/dist/components/atoms/Toggle/Toggle.styles.d.ts

@@ -17,19 +17,5 @@ export declare const styles: {
         sm: string;
         md: string;
     };
-    sizes: {
-        sm: {
-            root: string;
-            textWrapper: string;
-            label: string;
-            hint: string;
-        };
-        md: {
-            root: string;
-            textWrapper: string;
-            label: string;
-            hint: string;
-        };
-    };
 };
 //# sourceMappingURL=Toggle.styles.d.ts.map

package/dist/components/atoms/Toggle/Toggle.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCjB,CAAC"}
+{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAmBjB,CAAC"}

package/dist/components/atoms/Toggle/Toggle.styles.js

@@ -19,20 +19,6 @@ const styles = sortCx({
         sm: 'translate-x-4',
         md: 'translate-x-5',
     },
-    sizes: {
-        sm: {
-            root: 'gap-2',
-            textWrapper: '',
-            label: 'text-sm font-medium',
-            hint: 'text-sm',
-        },
-        md: {
-            root: 'gap-3',
-            textWrapper: 'gap-0.5',
-            label: 'text-md font-medium',
-            hint: 'text-md',
-        },
-    },
 });
 
 export { styles };

package/dist/components/atoms/Toggle/Toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.styles.js","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACtC,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,KAAK,EAAE,qBAAqB;AAC5B,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,WAAW,EAAE,SAAS;AACtB,YAAA,KAAK,EAAE,qBAAqB;AAC5B,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACsF,KAAA;AAC1F,CAAA;;"}
+{"version":3,"file":"Toggle.styles.js","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACvC,CAAA;;"}

package/dist/components/atoms/Toggle/index.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var reactAriaComponents = require('react-aria-components');
+var selectionControl_styles = require('../../__internal__/selectionControl/selectionControl.styles.cjs');
 var Toggle_styles = require('./Toggle.styles.cjs');
 
 /** Visual-only switch track and knob with no input behaviour, for building custom controls; `Toggle` renders it inside a react-aria `Switch`. */
@@ -19,10 +20,10 @@ const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelect
  */
 const Toggle = ({ label, hint, className, size = 'sm', slim, 'data-testid': dataTestId, ...ariaSwitchProps }) => {
     const toggleTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'toggle', rootName: 'toggle' });
-    return (jsxRuntime.jsx(reactAriaComponents.Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx.cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', Toggle_styles.styles.sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col', Toggle_styles.styles.sizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', Toggle_styles.styles.sizes[size].label), children: label }), hint && (
+    return (jsxRuntime.jsx(reactAriaComponents.Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx.cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', selectionControl_styles.selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col', selectionControl_styles.selectionControlSizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', selectionControl_styles.selectionControlSizes[size].label), children: label }), hint && (
                         // biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
                         // biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
-                        jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', Toggle_styles.styles.sizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
+                        jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', selectionControl_styles.selectionControlSizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
 };
 
 exports.Toggle = Toggle;

package/dist/components/atoms/Toggle/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","cx","styles","useResolvedTestId","AriaSwitch","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","cx","styles","useResolvedTestId","AriaSwitch","selectionControlSizes","_jsxs","_Fragment"],"mappings":"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"}

package/dist/components/atoms/Toggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iJAAiJ;AACjJ,eAAO,MAAM,UAAU,GAAI,8EAAqF,eAAe,gCAkC9H,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,uFAA8F,WAAW,gCA4C/H,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iJAAiJ;AACjJ,eAAO,MAAM,UAAU,GAAI,8EAAqF,eAAe,gCAkC9H,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,uFAA8F,WAAW,gCA4C/H,CAAC"}

package/dist/components/atoms/Toggle/index.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 import { Switch } from 'react-aria-components';
+import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
 import { styles } from './Toggle.styles.js';
 
 /** Visual-only switch track and knob with no input behaviour, for building custom controls; `Toggle` renders it inside a react-aria `Switch`. */
@@ -17,10 +18,10 @@ const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelect
  */
 const Toggle = ({ label, hint, className, size = 'sm', slim, 'data-testid': dataTestId, ...ariaSwitchProps }) => {
     const toggleTestId = useResolvedTestId({ testId: dataTestId, segment: 'toggle', rootName: 'toggle' });
-    return (jsx(Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', styles.sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxs(Fragment, { children: [jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('flex flex-col', styles.sizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', styles.sizes[size].label), children: label }), hint && (
+    return (jsx(Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxs(Fragment, { children: [jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('flex flex-col', selectionControlSizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', selectionControlSizes[size].label), children: label }), hint && (
                         // biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
                         // biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
-                        jsx("span", { className: cx('text-tertiary', styles.sizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
+                        jsx("span", { className: cx('text-tertiary', selectionControlSizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
 };
 
 export { Toggle, ToggleBase };

package/dist/components/atoms/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaSwitch","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaSwitch","_jsxs","_Fragment"],"mappings":"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"}

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;;"}