@flipdish/ui-library 0.6.1 → 0.7.1

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":";;;;;;;;;;;AAeA,MAAM,UAAU,GAAG;AACjB,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,IAAI,EAAE,yDAAyD;AAC/D,QAAA,KAAK,EAAE,iDAAiD;AACxD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,IAAI,EAAE,yDAAyD;AAC/D,YAAA,KAAK,EAAE,uDAAuD;AAC/D,SAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,4BAA4B;AAClC,QAAA,IAAI,EAAE,yDAAyD;AAC/D,QAAA,KAAK,EAAE,sDAAsD;AAC7D,QAAA,OAAO,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,wBAAwB,EAAE;AACzG,KAAA;CACF;AASD,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAA2B,KAAI;AACnI,IAAA,QACEA,eAAA,CAACC,wBAAQ,EAAA,EAAA,GACH,UAAU,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAC,KAAK,KACfC,KAAE,CACA,oMAAoM,EACpM,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,EACrB,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,EACxC,CAAC,IAAI,IAAI,UAAU,CAAC,OAAO,KAAK,gBAAgB,EAChD,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAC/D,EAAA,QAAA,EAAA,CAGFC,iCAAgB,CAAC,IAAI,CAAC,KACrBC,cAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAEF,KAAE,CAAC,+BAA+B,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAA,CAAI,CAC1H,EACAG,oBAAc,CAAC,IAAI,CAAC,IAAI,IAAI,EAE5B,QAAQ,KACPD,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEF,KAAE,CACX,oFAAoF,EACpF,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,EACtB,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAC1C,YAEA,QAAQ,EAAA,CACJ,CACR,CAAA,EAAA,CACQ;AAEf,CAAC;AAeM,MAAM,cAAc,GAAG,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,EACT,GAAG,UAAU,EACO,KAAI;AACxB,IAAA,MAAM,OAAO,GAAGI,gBAAU,CAACC,wBAAkB,CAAC;AAE9C,IAAA,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM;AAC7B,IAAA,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,SAAS;AAEtC,IAAA,QACEH,cAAA,CAACI,8BAAc,EAAA,EAAA,GACT,UAAU,EACd,SAAS,EAAEN,KAAE,CACX,2CAA2C,EAC3C,SAAS,GAAG,kBAAkB,GAAG,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,EAClH,SAAS,CACV,EAAA,QAAA,EAEA,CAAC,EAAE,SAAS,EAAE,MACbF,eAAA,CAAAS,mBAAA,EAAA,EAAA,QAAA,EAAA,CACG,SAAS,IACRT,eAAA,CAACC,wBAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,KACvCC,KAAE,CACA,mGAAmG,EACnG,CAAC,SAAS,IAAI,cAAc,KAAK,WAAW,CAC7C,EAAA,QAAA,EAAA,CAGHE,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yEAAyE,EAAA,QAAA,EACtFA,cAAA,CAACM,aAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,WAAW,EAAC,gBAAgB,EAAC,0BAA0B,EAAA,CAAG,EAAA,CAClG,EACL,QAAQ,IAAIN,yBAAM,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAQ,CAAA,EAAA,CAC1E,IACT,UAAU,IACZA,eAAC;;AAEY,kBAAA,EAAA,YAAA,EAAA,0BAA0B,EACrC,IAAI,EAAE,IAAI,KAAK,WAAW,GAAG,MAAM,GAAG,IAAI,EAC1C,OAAO,EAAE,OAAO,EAAA,QAAA,EAAA,KAAA,EAAA,CAGD,KAEjBA,cAAA,CAAC,cAAc,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,KAAK,WAAW,GAAG,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EACrH,QAAQ,EAAA,CACM,CAClB,EAGA,CAAC,SAAS;AACT,qBAAC,OAAO,KAAK,OAAO,IAClBA,cAAA,CAACO,oBAAY,EAAA,EAAC,SAAS,EAAC,0DAA0D,GAAG,KAErFP,cAAA,CAACQ,oBAAY,EAAA,EAAC,SAAS,EAAC,0DAA0D,EAAA,CAAG,CACtF,CAAC,CAAA,EAAA,CACH,CACJ,EAAA,CACc;AAErB;;;;"}
+{"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/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.1",
+  "version": "0.7.1",
   "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",