@flipdish/ui-library 0.6.0 → 0.7.0

package/README.md

@@ -77,6 +77,61 @@ Import the library's shared runtime from your CSS entry **in this exact layer or
 @import "tailwindcss/utilities.css" layer(utilities);
 ```
 
+## 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.
+
+`@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.
+
+Install the companion plugin (an optional peer):
+
+```bash
+pnpm add -D postcss-prefix-selector
+```
+
+Then add it to your PostCSS config:
+
+```js
+// postcss.config.mjs
+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
+
+export default {
+  plugins: [
+    prefixSelector({
+      prefix: SCOPE,
+      transform: createScopedPrefixTransform(SCOPE),
+    }),
+  ],
+};
+```
+
+Tailwind's output becomes plain `#flipdish-micro-frontend .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">`).            |
+
+```js
+createScopedPrefixTransform("[data-tailwind]", {
+  shouldScope: (file) => !file || !file.includes("node_modules"),
+  scopeBody: true,
+  matchRootElement: true,
+});
+```
+
+> **Why PostCSS and not Tailwind's `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.
+
+Micro-frontends are one use case; the same transform applies to widgets, embeds, Storybook, and multi-tenant UIs.
+
 ## Documentation
 
 Full component docs, interactive examples, and design guidance live in the [Storybook](https://flipdishbytes.github.io/flipdish-design-system/).

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs

@@ -28,13 +28,17 @@ const baseStyles = {
     },
 };
 const BreadcrumbBase = ({ href, children, icon: Icon, type = 'text', current, className, ...otherProps }) => {
-    return (jsxRuntime.jsxs(reactAriaComponents.Link, { ...otherProps, href: href, className: (state) => cx.cx('group inline-flex items-center justify-center gap-1 rounded-md outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 in-current:max-w-full', baseStyles[type].root, current && baseStyles[type].current.root, (href || otherProps.onClick) && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: [isReactComponent.isReactComponent(Icon) && (jsxRuntime.jsx(Icon, { className: cx.cx('size-5 transition-inherit-all', baseStyles[type].icon, current && baseStyles[type].current.icon) })), React.isValidElement(Icon) && Icon, children && (jsxRuntime.jsx("span", { className: cx.cx('text-sm font-semibold whitespace-nowrap transition-inherit-all in-current:truncate', baseStyles[type].label, current && baseStyles[type].current.label), children: children }))] }));
+    return (jsxRuntime.jsxs(reactAriaComponents.Link, { ...otherProps, 
+        // Guard against an empty-string href: react-aria renders `<a>` only for a truthy
+        // href (a falsy value renders a non-navigable `<span role="link">`), so coerce
+        // `''`/undefined to undefined to keep href-less/current items non-interactive.
+        href: href || undefined, className: (state) => cx.cx('group inline-flex items-center justify-center gap-1 rounded-md outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 in-current:max-w-full', baseStyles[type].root, current && baseStyles[type].current.root, (href || otherProps.onClick) && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: [isReactComponent.isReactComponent(Icon) && (jsxRuntime.jsx(Icon, { className: cx.cx('size-5 transition-inherit-all', baseStyles[type].icon, current && baseStyles[type].current.icon) })), React.isValidElement(Icon) && Icon, children && (jsxRuntime.jsx("span", { className: cx.cx('text-sm font-semibold whitespace-nowrap transition-inherit-all in-current:truncate', baseStyles[type].label, current && baseStyles[type].current.label), children: children }))] }));
 };
 const BreadcrumbItem = ({ href, icon, divider, type, isEllipsis, children, onClick, avatarSrc, className, ...otherProps }) => {
     const context = React.useContext(index.BreadcrumbsContext);
     type = context.type || 'text';
     divider = context.divider || 'chevron';
-    return (jsxRuntime.jsx(reactAriaComponents.Breadcrumb, { ...otherProps, className: cx.cx('flex items-center current:overflow-hidden', avatarSrc ? 'gap-1.5 md:gap-2' : type === 'text' || type === 'text-line' ? 'gap-1.5 md:gap-2' : 'gap-0.5 md:gap-1', className), children: ({ isCurrent }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [avatarSrc ? (jsxRuntime.jsxs(reactAriaComponents.Link, { href: href, className: ({ isPressed, isFocusVisible }) => cx.cx('flex cursor-pointer items-center gap-1.5 rounded-lg outline-0 outline-offset-2 outline-focus-ring', (isPressed || isFocusVisible) && 'outline-2'), children: [jsxRuntime.jsx("div", { className: "flex rounded-lg bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsxRuntime.jsx(Avatar.Avatar, { size: "xs", src: avatarSrc, className: "shadow-md", contentClassName: "rounded-md before:hidden" }) }), children && jsxRuntime.jsx("span", { className: "text-sm font-semibold text-primary", children: children })] })) : isEllipsis ? (jsxRuntime.jsx(BreadcrumbBase
+    return (jsxRuntime.jsx(reactAriaComponents.Breadcrumb, { ...otherProps, className: cx.cx('flex items-center current:overflow-hidden', avatarSrc ? 'gap-1.5 md:gap-2' : type === 'text' || type === 'text-line' ? 'gap-1.5 md:gap-2' : 'gap-0.5 md:gap-1', className), children: ({ isCurrent }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [avatarSrc ? (jsxRuntime.jsxs(reactAriaComponents.Link, { href: href || undefined, className: ({ isPressed, isFocusVisible }) => cx.cx('flex cursor-pointer items-center gap-1.5 rounded-lg outline-0 outline-offset-2 outline-focus-ring', (isPressed || isFocusVisible) && 'outline-2'), children: [jsxRuntime.jsx("div", { className: "flex rounded-lg bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsxRuntime.jsx(Avatar.Avatar, { size: "xs", src: avatarSrc, className: "shadow-md", contentClassName: "rounded-md before:hidden" }) }), children && jsxRuntime.jsx("span", { className: "text-sm font-semibold text-primary", children: children })] })) : isEllipsis ? (jsxRuntime.jsx(BreadcrumbBase
                 // The label for screen readers.
                 , { "aria-label": "See all breadcrumb items", type: type === 'text-line' ? 'text' : type, onClick: onClick, children: "..." })) : (jsxRuntime.jsx(BreadcrumbBase, { href: href, icon: icon, current: isCurrent, type: type === 'text-line' ? 'text' : type, onClick: onClick, children: children })), !isCurrent &&
                     (divider === 'slash' ? (jsxRuntime.jsx(uiIcons.SlashDivider, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })) : (jsxRuntime.jsx(uiIcons.ChevronRight, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })))] })) }));

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-item.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaLink","cx","isReactComponent","_jsx","isValidElement","useContext","BreadcrumbsContext","AriaBreadcrumb","_Fragment","Avatar","SlashDivider","ChevronRight"],"mappings":"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"}
+{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-item.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaLink","cx","isReactComponent","_jsx","isValidElement","useContext","BreadcrumbsContext","AriaBreadcrumb","_Fragment","Avatar","SlashDivider","ChevronRight"],"mappings":"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"}

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-item.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,EAAE,EAAkB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAC5E,OAAO,EAEL,KAAK,eAAe,IAAI,mBAAmB,EAG5C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AA+DnE,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IAC9C,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,GAAI,mGAW5B,mBAAmB,gCA0DrB,CAAC"}
+{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-item.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,EAAE,EAAkB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAC5E,OAAO,EAEL,KAAK,eAAe,IAAI,mBAAmB,EAG5C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAkEnE,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IAC9C,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,GAAI,mGAW5B,mBAAmB,gCA0DrB,CAAC"}

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js

@@ -26,13 +26,17 @@ const baseStyles = {
     },
 };
 const BreadcrumbBase = ({ href, children, icon: Icon, type = 'text', current, className, ...otherProps }) => {
-    return (jsxs(Link, { ...otherProps, href: href, className: (state) => cx('group inline-flex items-center justify-center gap-1 rounded-md outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 in-current:max-w-full', baseStyles[type].root, current && baseStyles[type].current.root, (href || otherProps.onClick) && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: [isReactComponent(Icon) && (jsx(Icon, { className: cx('size-5 transition-inherit-all', baseStyles[type].icon, current && baseStyles[type].current.icon) })), isValidElement(Icon) && Icon, children && (jsx("span", { className: cx('text-sm font-semibold whitespace-nowrap transition-inherit-all in-current:truncate', baseStyles[type].label, current && baseStyles[type].current.label), children: children }))] }));
+    return (jsxs(Link, { ...otherProps, 
+        // Guard against an empty-string href: react-aria renders `<a>` only for a truthy
+        // href (a falsy value renders a non-navigable `<span role="link">`), so coerce
+        // `''`/undefined to undefined to keep href-less/current items non-interactive.
+        href: href || undefined, className: (state) => cx('group inline-flex items-center justify-center gap-1 rounded-md outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 in-current:max-w-full', baseStyles[type].root, current && baseStyles[type].current.root, (href || otherProps.onClick) && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: [isReactComponent(Icon) && (jsx(Icon, { className: cx('size-5 transition-inherit-all', baseStyles[type].icon, current && baseStyles[type].current.icon) })), isValidElement(Icon) && Icon, children && (jsx("span", { className: cx('text-sm font-semibold whitespace-nowrap transition-inherit-all in-current:truncate', baseStyles[type].label, current && baseStyles[type].current.label), children: children }))] }));
 };
 const BreadcrumbItem = ({ href, icon, divider, type, isEllipsis, children, onClick, avatarSrc, className, ...otherProps }) => {
     const context = useContext(BreadcrumbsContext);
     type = context.type || 'text';
     divider = context.divider || 'chevron';
-    return (jsx(Breadcrumb, { ...otherProps, className: cx('flex items-center current:overflow-hidden', avatarSrc ? 'gap-1.5 md:gap-2' : type === 'text' || type === 'text-line' ? 'gap-1.5 md:gap-2' : 'gap-0.5 md:gap-1', className), children: ({ isCurrent }) => (jsxs(Fragment, { children: [avatarSrc ? (jsxs(Link, { href: href, className: ({ isPressed, isFocusVisible }) => cx('flex cursor-pointer items-center gap-1.5 rounded-lg outline-0 outline-offset-2 outline-focus-ring', (isPressed || isFocusVisible) && 'outline-2'), children: [jsx("div", { className: "flex rounded-lg bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsx(Avatar, { size: "xs", src: avatarSrc, className: "shadow-md", contentClassName: "rounded-md before:hidden" }) }), children && jsx("span", { className: "text-sm font-semibold text-primary", children: children })] })) : isEllipsis ? (jsx(BreadcrumbBase
+    return (jsx(Breadcrumb, { ...otherProps, className: cx('flex items-center current:overflow-hidden', avatarSrc ? 'gap-1.5 md:gap-2' : type === 'text' || type === 'text-line' ? 'gap-1.5 md:gap-2' : 'gap-0.5 md:gap-1', className), children: ({ isCurrent }) => (jsxs(Fragment, { children: [avatarSrc ? (jsxs(Link, { href: href || undefined, className: ({ isPressed, isFocusVisible }) => cx('flex cursor-pointer items-center gap-1.5 rounded-lg outline-0 outline-offset-2 outline-focus-ring', (isPressed || isFocusVisible) && 'outline-2'), children: [jsx("div", { className: "flex rounded-lg bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsx(Avatar, { size: "xs", src: avatarSrc, className: "shadow-md", contentClassName: "rounded-md before:hidden" }) }), children && jsx("span", { className: "text-sm font-semibold text-primary", children: children })] })) : isEllipsis ? (jsx(BreadcrumbBase
                 // The label for screen readers.
                 , { "aria-label": "See all breadcrumb items", type: type === 'text-line' ? 'text' : type, onClick: onClick, children: "..." })) : (jsx(BreadcrumbBase, { href: href, icon: icon, current: isCurrent, type: type === 'text-line' ? 'text' : type, onClick: onClick, children: children })), !isCurrent &&
                     (divider === 'slash' ? (jsx(SlashDivider, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })) : (jsx(ChevronRight, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })))] })) }));

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.js","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-item.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaLink","_jsx","AriaBreadcrumb","_Fragment"],"mappings":"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"}
+{"version":3,"file":"breadcrumb-item.js","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-item.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaLink","_jsx","AriaBreadcrumb","_Fragment"],"mappings":"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"}

package/dist/components/organisms/PageHeader/components/page-header-simple.cjs

@@ -7,7 +7,7 @@ var Input = require('@flipdish/ui-library/components/atoms/Input');
 var cx = require('@flipdish/ui-library/utilities/cx');
 
 const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, }) => {
-    return (jsxRuntime.jsxs("div", { className: cx.cx('relative flex flex-col gap-4 bg-primary', className), children: [breadcrumbs && jsxRuntime.jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsxRuntime.jsx("div", { className: "flex lg:hidden", children: jsxRuntime.jsx(Button.Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: uiIcons.ArrowLeft, children: backLabel }) })), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input.Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg }), jsxRuntime.jsx(Input.Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg })] }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cx.cx('relative flex w-full max-w-container flex-col gap-4 bg-primary px-md lg:px-2xl', className), children: [breadcrumbs && jsxRuntime.jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsxRuntime.jsx("div", { className: "flex lg:hidden", children: jsxRuntime.jsx(Button.Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: uiIcons.ArrowLeft, children: backLabel }) })), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input.Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg }), jsxRuntime.jsx(Input.Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg })] }))] })] }));
 };
 
 exports.PageHeaderSimple = PageHeaderSimple;

package/dist/components/organisms/PageHeader/components/page-header-simple.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-simple.cjs","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","Button","ArrowLeft","Input","SearchLg"],"mappings":";;;;;;;;AA4BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,GACa,KAAI;AAC1B,IAAA,QACEA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACrE,WAAW,IAAIC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,wBAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,eAACC,aAAM,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAEC,iBAAS,EAAA,QAAA,EACvE,SAAS,GACH,EAAA,CACL,CACP,EAEDJ,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,aACpGD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,aAC1C,KAAK,IAAIE,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,IAClE,EAEL,OAAO,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,QAAA,EAAE,OAAO,GAAO,EAElE,UAAU,KACTF,kDAEEE,cAAA,CAACG,WAAK,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAC,IAAI,EAAC,IAAI,EAAA,YAAA,EAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAEC,gBAAQ,EAAA,CAAI,EAGzGJ,cAAA,CAACG,WAAK,IAAC,QAAQ,EAAA,IAAA,EAAC,SAAS,EAAC,+BAA+B,EAAC,IAAI,EAAC,IAAI,gBAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAEC,gBAAQ,GAAI,CAAA,EAAA,CAC9H,CACJ,CAAA,EAAA,CACG,CAAA,EAAA,CACF;AAEV;;;;"}
+{"version":3,"file":"page-header-simple.cjs","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","Button","ArrowLeft","Input","SearchLg"],"mappings":";;;;;;;;AA4BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,GACa,KAAI;AAC1B,IAAA,QACEA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,gFAAgF,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC5G,WAAW,IAAIC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,wBAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,eAACC,aAAM,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAEC,iBAAS,EAAA,QAAA,EACvE,SAAS,GACH,EAAA,CACL,CACP,EAEDJ,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,aACpGD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,aAC1C,KAAK,IAAIE,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,IAClE,EAEL,OAAO,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,QAAA,EAAE,OAAO,GAAO,EAElE,UAAU,KACTF,kDAEEE,cAAA,CAACG,WAAK,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAC,IAAI,EAAC,IAAI,EAAA,YAAA,EAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAEC,gBAAQ,EAAA,CAAI,EAGzGJ,cAAA,CAACG,WAAK,IAAC,QAAQ,EAAA,IAAA,EAAC,SAAS,EAAC,+BAA+B,EAAC,IAAI,EAAC,IAAI,gBAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAEC,gBAAQ,GAAI,CAAA,EAAA,CAC9H,CACJ,CAAA,EAAA,CACG,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/components/organisms/PageHeader/components/page-header-simple.js

@@ -5,7 +5,7 @@ import { Input } from '@flipdish/ui-library/components/atoms/Input';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 
 const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, }) => {
-    return (jsxs("div", { className: cx('relative flex flex-col gap-4 bg-primary', className), children: [breadcrumbs && jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsx("div", { className: "flex lg:hidden", children: jsx(Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: ArrowLeft, children: backLabel }) })), jsxs("div", { className: cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxs(Fragment, { children: [jsx(Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: SearchLg }), jsx(Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: SearchLg })] }))] })] }));
+    return (jsxs("div", { className: cx('relative flex w-full max-w-container flex-col gap-4 bg-primary px-md lg:px-2xl', className), children: [breadcrumbs && jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsx("div", { className: "flex lg:hidden", children: jsx(Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: ArrowLeft, children: backLabel }) })), jsxs("div", { className: cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxs(Fragment, { children: [jsx(Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: SearchLg }), jsx(Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: SearchLg })] }))] })] }));
 };
 
 export { PageHeaderSimple };

package/dist/components/organisms/PageHeader/components/page-header-simple.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-simple.js","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;AA4BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,GACa,KAAI;AAC1B,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACrE,WAAW,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,aAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,IAAC,MAAM,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAE,SAAS,EAAA,QAAA,EACvE,SAAS,GACH,EAAA,CACL,CACP,EAEDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,aACpGA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,aAC1C,KAAK,IAAIC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,IAClE,EAEL,OAAO,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,QAAA,EAAE,OAAO,GAAO,EAElE,UAAU,KACTD,4BAEEC,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAC,IAAI,EAAC,IAAI,EAAA,YAAA,EAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAE,QAAQ,EAAA,CAAI,EAGzGA,GAAA,CAAC,KAAK,IAAC,QAAQ,EAAA,IAAA,EAAC,SAAS,EAAC,+BAA+B,EAAC,IAAI,EAAC,IAAI,gBAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAE,QAAQ,GAAI,CAAA,EAAA,CAC9H,CACJ,CAAA,EAAA,CACG,CAAA,EAAA,CACF;AAEV;;;;"}
+{"version":3,"file":"page-header-simple.js","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;AA4BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,GACa,KAAI;AAC1B,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,gFAAgF,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC5G,WAAW,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,aAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,IAAC,MAAM,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAE,SAAS,EAAA,QAAA,EACvE,SAAS,GACH,EAAA,CACL,CACP,EAEDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,aACpGA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,aAC1C,KAAK,IAAIC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,IAClE,EAEL,OAAO,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,QAAA,EAAE,OAAO,GAAO,EAElE,UAAU,KACTD,4BAEEC,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAC,IAAI,EAAC,IAAI,EAAA,YAAA,EAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAE,QAAQ,EAAA,CAAI,EAGzGA,GAAA,CAAC,KAAK,IAAC,QAAQ,EAAA,IAAA,EAAC,SAAS,EAAC,+BAA+B,EAAC,IAAI,EAAC,IAAI,gBAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAE,QAAQ,GAAI,CAAA,EAAA,CAC9H,CACJ,CAAA,EAAA,CACG,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/components/organisms/PageHeader/index.cjs

@@ -4,5 +4,5 @@ var pageHeaderSimple = require('./components/page-header-simple.cjs');
 
 
 
-exports.Simple = pageHeaderSimple.PageHeaderSimple;
+exports.PageHeaderSimple = pageHeaderSimple.PageHeaderSimple;
 //# sourceMappingURL=index.cjs.map

package/dist/components/organisms/PageHeader/index.d.ts

@@ -3,5 +3,5 @@
  *
  * @summary page header with title and optional actions
  */
-export { PageHeaderSimple as Simple } from './components/page-header-simple';
+export { PageHeaderSimple } from './components/page-header-simple';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/PageHeader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/components/organisms/PageHeader/index.js

@@ -1,2 +1,2 @@
-export { PageHeaderSimple as Simple } from './components/page-header-simple.js';
+export { PageHeaderSimple } from './components/page-header-simple.js';
 //# sourceMappingURL=index.js.map

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

@@ -12,8 +12,10 @@ var jsxRuntime = require('react/jsx-runtime');
  * Doubles as the Tailwind v4 + Option A CSS-isolation smoke test for the property-service MFE —
  * if these utility classes render correctly inside `#flipdish-micro-frontend` without polluting
  * Portal chrome, the scoping pipeline works end-to-end.
+ *
+ * @summary full-page 404 fallback for unmatched routes
  */
-const NotFoundPage = ({ title = '404', description = 'The page you were looking for could not be found.', }) => (jsxRuntime.jsxs("main", { className: "flex min-h-[50vh] flex-col items-center justify-center gap-3 p-8 text-center", children: [jsxRuntime.jsx("h1", { className: "text-4xl font-semibold text-gray-900", children: title }), jsxRuntime.jsx("p", { className: "text-base text-gray-600", children: description })] }));
+const NotFoundPage = ({ title = '404', description = 'The page you were looking for could not be found.', }) => (jsxRuntime.jsxs("main", { className: "flex min-h-[50vh] flex-col items-center justify-center gap-3 p-8 text-center", children: [jsxRuntime.jsx("h1", { className: "text-4xl font-semibold text-primary", children: title }), jsxRuntime.jsx("p", { className: "text-base text-tertiary", children: description })] }));
 
 exports.NotFoundPage = NotFoundPage;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/NotFoundPage/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAcA;;;;;;;;;;AAUG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,KAAK,EACb,WAAW,GAAG,mDAAmD,GAC/C,MAClBA,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8EAA8E,aAC5FC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACjEA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,CAAA,EAAA,CACnD;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/NotFoundPage/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAcA;;;;;;;;;;;;AAYG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,KAAK,EACb,WAAW,GAAG,mDAAmD,GAC/C,MAClBA,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8EAA8E,aAC5FC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,qCAAqC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EAChEA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,CAAA,EAAA,CACnD;;;;"}

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

@@ -20,6 +20,8 @@ export interface NotFoundPageProps {
  * Doubles as the Tailwind v4 + Option A CSS-isolation smoke test for the property-service MFE —
  * if these utility classes render correctly inside `#flipdish-micro-frontend` without polluting
  * Portal chrome, the scoping pipeline works end-to-end.
+ *
+ * @summary full-page 404 fallback for unmatched routes
  */
 export declare const NotFoundPage: ({ title, description, }: NotFoundPageProps) => ReactElement;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/NotFoundPage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,sGAAsG;IACtG,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,GAAI,yBAG1B,iBAAiB,KAAG,YAKtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/NotFoundPage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,sGAAsG;IACtG,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,GAAI,yBAG1B,iBAAiB,KAAG,YAKtB,CAAC"}

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

@@ -10,8 +10,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * Doubles as the Tailwind v4 + Option A CSS-isolation smoke test for the property-service MFE —
  * if these utility classes render correctly inside `#flipdish-micro-frontend` without polluting
  * Portal chrome, the scoping pipeline works end-to-end.
+ *
+ * @summary full-page 404 fallback for unmatched routes
  */
-const NotFoundPage = ({ title = '404', description = 'The page you were looking for could not be found.', }) => (jsxs("main", { className: "flex min-h-[50vh] flex-col items-center justify-center gap-3 p-8 text-center", children: [jsx("h1", { className: "text-4xl font-semibold text-gray-900", children: title }), jsx("p", { className: "text-base text-gray-600", children: description })] }));
+const NotFoundPage = ({ title = '404', description = 'The page you were looking for could not be found.', }) => (jsxs("main", { className: "flex min-h-[50vh] flex-col items-center justify-center gap-3 p-8 text-center", children: [jsx("h1", { className: "text-4xl font-semibold text-primary", children: title }), jsx("p", { className: "text-base text-tertiary", children: description })] }));
 
 export { NotFoundPage };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/templates/NotFoundPage/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;AAcA;;;;;;;;;;AAUG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,KAAK,EACb,WAAW,GAAG,mDAAmD,GAC/C,MAClBA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8EAA8E,aAC5FC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACjEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,CAAA,EAAA,CACnD;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/templates/NotFoundPage/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;AAcA;;;;;;;;;;;;AAYG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,KAAK,EACb,WAAW,GAAG,mDAAmD,GAC/C,MAClBA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8EAA8E,aAC5FC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,qCAAqC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EAChEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,CAAA,EAAA,CACnD;;;;"}

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

@@ -21,6 +21,8 @@ const DefaultPageError = () => (jsxRuntime.jsxs("div", { role: "alert", classNam
  * fails — strictly better than blanking the whole page. A header throw (rare, since
  * it's static chrome) isn't caught here, but the app-level ErrorBoundary higher up the
  * tree still catches it; nothing goes unhandled.
+ *
+ * @summary app-shell page template with a page-scoped error boundary
  */
 const PageLayout = ({ pageName, header, children, renderError, onError, className }) => {
     return (jsxRuntime.jsxs("main", { className: cx.cx('flex w-full flex-col items-center gap-xl py-2xl lg:gap-2xl lg:pb-3xl', className), children: [header, jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsxRuntime.jsx(DefaultPageError, {}), children: children })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","cx","ErrorBoundary"],"mappings":";;;;;;AAgCA;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,OACvBA,eAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CACtHC,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,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;AAWG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAmB,KAAe;IACxH,QACED,0BAAM,SAAS,EAAEE,KAAE,CAAC,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACnG,MAAM,EAEPD,cAAA,CAACE,2BAAa,EAAA,EAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIF,cAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,YACzI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","cx","ErrorBoundary"],"mappings":";;;;;;AAgCA;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,OACvBA,eAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CACtHC,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,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;AAaG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAmB,KAAe;IACxH,QACED,0BAAM,SAAS,EAAEE,KAAE,CAAC,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACnG,MAAM,EAEPD,cAAA,CAACE,2BAAa,EAAA,EAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIF,cAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,YACzI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}

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

@@ -7,7 +7,7 @@ export interface PageLayoutProps {
      */
     pageName: string;
     /**
-     * Header region. Compose `<PageHeader.Simple>` (or a feature wrapper around it)
+     * Header region. Compose `<PageHeaderSimple>` (or a feature wrapper around it)
      * here. Rendered OUTSIDE the error boundary so page chrome (breadcrumbs, back link)
      * stays usable when the content below throws.
      */
@@ -38,6 +38,8 @@ export interface PageLayoutProps {
  * fails — strictly better than blanking the whole page. A header throw (rare, since
  * it's static chrome) isn't caught here, but the app-level ErrorBoundary higher up the
  * tree still catches it; nothing goes unhandled.
+ *
+ * @summary app-shell page template with a page-scoped error boundary
  */
 export declare const PageLayout: ({ pageName, header, children, renderError, onError, className }: PageLayoutProps) => ReactNode;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IACvE,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,GAAI,iEAAiE,eAAe,KAAG,SAU7G,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IACvE,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,GAAI,iEAAiE,eAAe,KAAG,SAU7G,CAAC"}

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

@@ -19,6 +19,8 @@ const DefaultPageError = () => (jsxs("div", { role: "alert", className: "flex w-
  * fails — strictly better than blanking the whole page. A header throw (rare, since
  * it's static chrome) isn't caught here, but the app-level ErrorBoundary higher up the
  * tree still catches it; nothing goes unhandled.
+ *
+ * @summary app-shell page template with a page-scoped error boundary
  */
 const PageLayout = ({ pageName, header, children, renderError, onError, className }) => {
     return (jsxs("main", { className: cx('flex w-full flex-col items-center gap-xl py-2xl lg:gap-2xl lg:pb-3xl', className), children: [header, jsx(ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsx(DefaultPageError, {}), children: children })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAgCA;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,OACvBA,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CACtHC,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,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;AAWG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAmB,KAAe;IACxH,QACED,eAAM,SAAS,EAAE,EAAE,CAAC,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACnG,MAAM,EAEPC,GAAA,CAAC,aAAa,EAAA,EAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,YACzI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAgCA;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,OACvBA,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CACtHC,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,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;AAaG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAmB,KAAe;IACxH,QACED,eAAM,SAAS,EAAE,EAAE,CAAC,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACnG,MAAM,EAEPC,GAAA,CAAC,aAAa,EAAA,EAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,YACzI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}

package/dist/utilities/cssScopeUtils/index.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+/**
+ * Reusable PostCSS scoping transform for Tailwind v4 output.
+ *
+ * Any app that ships Tailwind v4 CSS into a page it doesn't fully own — a widget, an
+ * embed, a Storybook preview, a multi-tenant host, or a micro-frontend — needs to scope
+ * its emitted selectors under a single DOM subtree so its utilities and Preflight resets
+ * don't leak into (or get clobbered by) the surrounding CSS.
+ *
+ * `createScopedPrefixTransform` produces the `transform` callback for
+ * [`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.
+ *
+ * This is a pure function with no Node or DOM dependency, so it runs cleanly inside a
+ * `postcss.config.mjs`.
+ *
+ * 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.
+ *
+ * @example
+ * ```js
+ * // postcss.config.mjs
+ * import prefixSelector from 'postcss-prefix-selector';
+ * import { createScopedPrefixTransform } from '@flipdish/ui-library/utilities/cssScopeUtils';
+ *
+ * const SCOPE = '#flipdish-micro-frontend';
+ *
+ * export default {
+ *   plugins: [
+ *     prefixSelector({
+ *       prefix: SCOPE,
+ *       transform: createScopedPrefixTransform(SCOPE),
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+/** `@keyframes` step selectors (`from`, `to`, `0%`, `50%`, `33.33%`) — never prefixed. */
+const KEYFRAME_STEP = /^(from|to|\d+(\.\d+)?%)$/;
+/** Escape a string for safe use as a literal inside a `RegExp`. */
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/**
+ * Build the `transform` callback for `postcss-prefix-selector` that scopes Tailwind v4 output
+ * under `scopeSelector`.
+ *
+ * @param scopeSelector The selector every rule is scoped under (e.g. `'#flipdish-micro-frontend'`
+ *   or `'[data-tailwind]'`). Must match the `prefix` passed to `postcss-prefix-selector`.
+ * @param options Behavioural toggles — see {@link ScopedPrefixTransformOptions}.
+ * @returns A `(prefix, selector, prefixedSelector, filePath?) => string` transform.
+ */
+function createScopedPrefixTransform(scopeSelector, options = {}) {
+    const { shouldScope, scopeBody = false, matchRootElement = false } = options;
+    const normalisedScopeSelector = scopeSelector.trim();
+    if (!normalisedScopeSelector) {
+        throw new Error('createScopedPrefixTransform: `scopeSelector` must be a non-empty selector.');
+    }
+    // Detects a selector that is already scoped, so it isn't double-prefixed. Anchored at the
+    // start (our scoped output always begins with the scope root) and followed by a real
+    // selector boundary — so a longer sibling like `#app2` / `.scope-inner`, or the scope
+    // string appearing inside an attribute value, is NOT mistaken for the scope `#app` / `.scope`.
+    const alreadyScoped = new RegExp(`^${escapeRegExp(normalisedScopeSelector)}(?=$|[\\s>+~.,:\\[#])`);
+    return (prefix, selector, prefixedSelector, filePath) => {
+        // File guard: leave non-scoped files (e.g. third-party CSS) entirely untouched.
+        if (shouldScope && !shouldScope(filePath)) {
+            return selector;
+        }
+        // Never double-prefix a selector that is already scoped (root-anchored — see above).
+        if (alreadyScoped.test(selector.trimStart())) {
+            return selector;
+        }
+        // `:root` / `html` both target the page root. Rewrite them to the scope selector so
+        // `@theme` tokens and Preflight base typography cascade only within the scoped subtree
+        // (multi-tenant-safe — sibling scopes don't clobber each other's tokens).
+        if (selector === ':root' || selector === 'html') {
+            return prefix;
+        }
+        // Shadow-host rules are already a tight scope — leave them alone.
+        if (selector === ':host') {
+            return selector;
+        }
+        // `body` resets: scope them only when opted in; otherwise leave `body` global so the
+        // host page keeps its own reset.
+        if (selector === 'body') {
+            return scopeBody ? prefix : selector;
+        }
+        // `@keyframes` step selectors (`from`, `to`, `50%`) must never be prefixed.
+        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('.')) {
+            return `${prefix}${selector}, ${prefixedSelector}`;
+        }
+        // Everything else (`*`, `::before`, `::after`, `[hidden]`, element selectors, …) gets the
+        // standard descendant-scoped selector.
+        return prefixedSelector;
+    };
+}
+
+exports.createScopedPrefixTransform = createScopedPrefixTransform;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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;;;;;;;;AAQG;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;;;;"}

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

@@ -0,0 +1,76 @@
+/**
+ * Reusable PostCSS scoping transform for Tailwind v4 output.
+ *
+ * Any app that ships Tailwind v4 CSS into a page it doesn't fully own — a widget, an
+ * embed, a Storybook preview, a multi-tenant host, or a micro-frontend — needs to scope
+ * its emitted selectors under a single DOM subtree so its utilities and Preflight resets
+ * don't leak into (or get clobbered by) the surrounding CSS.
+ *
+ * `createScopedPrefixTransform` produces the `transform` callback for
+ * [`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.
+ *
+ * This is a pure function with no Node or DOM dependency, so it runs cleanly inside a
+ * `postcss.config.mjs`.
+ *
+ * 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.
+ *
+ * @example
+ * ```js
+ * // postcss.config.mjs
+ * import prefixSelector from 'postcss-prefix-selector';
+ * import { createScopedPrefixTransform } from '@flipdish/ui-library/utilities/cssScopeUtils';
+ *
+ * const SCOPE = '#flipdish-micro-frontend';
+ *
+ * export default {
+ *   plugins: [
+ *     prefixSelector({
+ *       prefix: SCOPE,
+ *       transform: createScopedPrefixTransform(SCOPE),
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+export interface ScopedPrefixTransformOptions {
+    /**
+     * Predicate deciding which files get scoped. Return `false` to leave a file's selectors
+     * untouched (e.g. third-party CSS that already ships its own scoping). The transform is
+     * called once per selector with the source file path, so this lets you skip whole files.
+     *
+     * @default () => true (scope everything through the pipeline)
+     */
+    shouldScope?: (filePath: string | undefined) => boolean;
+    /**
+     * Scope Preflight `body` resets to the mount selector instead of leaving `body` global.
+     * Enable this when the surrounding page must not inherit Tailwind's `body` reset.
+     *
+     * @default false
+     */
+    scopeBody?: boolean;
+    /**
+     * Also emit a compound selector so the scope root element itself matches class selectors
+     * (e.g. `<div data-scope class="flex-1">` — where the utility must apply to the mount node,
+     * not just its descendants).
+     *
+     * @default false
+     */
+    matchRootElement?: boolean;
+}
+/**
+ * Build the `transform` callback for `postcss-prefix-selector` that scopes Tailwind v4 output
+ * under `scopeSelector`.
+ *
+ * @param scopeSelector The selector every rule is scoped under (e.g. `'#flipdish-micro-frontend'`
+ *   or `'[data-tailwind]'`). Must match the `prefix` passed to `postcss-prefix-selector`.
+ * @param options Behavioural toggles — see {@link ScopedPrefixTransformOptions}.
+ * @returns A `(prefix, selector, prefixedSelector, filePath?) => string` transform.
+ */
+export declare function createScopedPrefixTransform(scopeSelector: string, options?: ScopedPrefixTransformOptions): (prefix: string, selector: string, prefixedSelector: string, filePath?: string) => string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/cssScopeUtils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,MAAM,WAAW,4BAA4B;IAC3C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,CAAC;IACxD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAQD;;;;;;;;GAQG;AACH,wBAAgB,2BAA2B,CACzC,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,4BAAiC,GACzC,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CA0D3F"}

package/dist/utilities/cssScopeUtils/index.js

@@ -0,0 +1,105 @@
+/**
+ * Reusable PostCSS scoping transform for Tailwind v4 output.
+ *
+ * Any app that ships Tailwind v4 CSS into a page it doesn't fully own — a widget, an
+ * embed, a Storybook preview, a multi-tenant host, or a micro-frontend — needs to scope
+ * its emitted selectors under a single DOM subtree so its utilities and Preflight resets
+ * don't leak into (or get clobbered by) the surrounding CSS.
+ *
+ * `createScopedPrefixTransform` produces the `transform` callback for
+ * [`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.
+ *
+ * This is a pure function with no Node or DOM dependency, so it runs cleanly inside a
+ * `postcss.config.mjs`.
+ *
+ * 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.
+ *
+ * @example
+ * ```js
+ * // postcss.config.mjs
+ * import prefixSelector from 'postcss-prefix-selector';
+ * import { createScopedPrefixTransform } from '@flipdish/ui-library/utilities/cssScopeUtils';
+ *
+ * const SCOPE = '#flipdish-micro-frontend';
+ *
+ * export default {
+ *   plugins: [
+ *     prefixSelector({
+ *       prefix: SCOPE,
+ *       transform: createScopedPrefixTransform(SCOPE),
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+/** `@keyframes` step selectors (`from`, `to`, `0%`, `50%`, `33.33%`) — never prefixed. */
+const KEYFRAME_STEP = /^(from|to|\d+(\.\d+)?%)$/;
+/** Escape a string for safe use as a literal inside a `RegExp`. */
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/**
+ * Build the `transform` callback for `postcss-prefix-selector` that scopes Tailwind v4 output
+ * under `scopeSelector`.
+ *
+ * @param scopeSelector The selector every rule is scoped under (e.g. `'#flipdish-micro-frontend'`
+ *   or `'[data-tailwind]'`). Must match the `prefix` passed to `postcss-prefix-selector`.
+ * @param options Behavioural toggles — see {@link ScopedPrefixTransformOptions}.
+ * @returns A `(prefix, selector, prefixedSelector, filePath?) => string` transform.
+ */
+function createScopedPrefixTransform(scopeSelector, options = {}) {
+    const { shouldScope, scopeBody = false, matchRootElement = false } = options;
+    const normalisedScopeSelector = scopeSelector.trim();
+    if (!normalisedScopeSelector) {
+        throw new Error('createScopedPrefixTransform: `scopeSelector` must be a non-empty selector.');
+    }
+    // Detects a selector that is already scoped, so it isn't double-prefixed. Anchored at the
+    // start (our scoped output always begins with the scope root) and followed by a real
+    // selector boundary — so a longer sibling like `#app2` / `.scope-inner`, or the scope
+    // string appearing inside an attribute value, is NOT mistaken for the scope `#app` / `.scope`.
+    const alreadyScoped = new RegExp(`^${escapeRegExp(normalisedScopeSelector)}(?=$|[\\s>+~.,:\\[#])`);
+    return (prefix, selector, prefixedSelector, filePath) => {
+        // File guard: leave non-scoped files (e.g. third-party CSS) entirely untouched.
+        if (shouldScope && !shouldScope(filePath)) {
+            return selector;
+        }
+        // Never double-prefix a selector that is already scoped (root-anchored — see above).
+        if (alreadyScoped.test(selector.trimStart())) {
+            return selector;
+        }
+        // `:root` / `html` both target the page root. Rewrite them to the scope selector so
+        // `@theme` tokens and Preflight base typography cascade only within the scoped subtree
+        // (multi-tenant-safe — sibling scopes don't clobber each other's tokens).
+        if (selector === ':root' || selector === 'html') {
+            return prefix;
+        }
+        // Shadow-host rules are already a tight scope — leave them alone.
+        if (selector === ':host') {
+            return selector;
+        }
+        // `body` resets: scope them only when opted in; otherwise leave `body` global so the
+        // host page keeps its own reset.
+        if (selector === 'body') {
+            return scopeBody ? prefix : selector;
+        }
+        // `@keyframes` step selectors (`from`, `to`, `50%`) must never be prefixed.
+        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('.')) {
+            return `${prefix}${selector}, ${prefixedSelector}`;
+        }
+        // Everything else (`*`, `::before`, `::after`, `[hidden]`, element selectors, …) gets the
+        // standard descendant-scoped selector.
+        return prefixedSelector;
+    };
+}
+
+export { createScopedPrefixTransform };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;;;;;;;;AAQG;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;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "sideEffects": [
@@ -85,6 +85,7 @@
     "input-otp": "^1.4.2",
     "motion": "^12.40.0",
     "nativewind": "^4.1.0",
+    "postcss-prefix-selector": "^2.1.1",
     "qr-code-styling": "^1.9.2",
     "react": "^19.0.0",
     "react-aria-components": "^1.18.0",
@@ -143,6 +144,9 @@
     "nativewind": {
       "optional": true
     },
+    "postcss-prefix-selector": {
+      "optional": true
+    },
     "qr-code-styling": {
       "optional": true
     },
@@ -172,6 +176,7 @@
     "@figma/code-connect": "^1.4.8",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-mcp": "^0.6.0",
     "@storybook/react-vite": "^10.4.6",
     "@tailwindcss/vite": "^4.3.1",
     "@tiptap/core": "^3.27.1",
@@ -209,7 +214,7 @@
   "scripts": {
     "build": "rollup -c && tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
-    "test": "echo 'No tests yet'",
+    "test": "node --test \"src/**/*.test.ts\"",
     "typecheck:native": "tsc --noEmit -p tsconfig.native.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",