@mattilsynet/design 2.1.3 → 2.1.5

package/mtds/layout/layout.d.ts

@@ -1,14 +1,13 @@
 import { JSX } from 'react';
-import { PolymorphicComponentPropWithRef } from '../react-types';
+import { PolymorphicComponentPropWithRef, Sizes } from '../react-types';
 type GapOld = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-type Gap = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "18" | "22" | "26" | "30" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 22 | 26 | 30;
 type SharedProps = {
     "data-align"?: "normal" | "stretch" | "start" | "center" | "end";
     "data-align-content"?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
     "data-center"?: "sm" | "md" | "lg" | "xl" | "2xl";
-    "data-gap"?: Gap | GapOld;
-    "data-row-gap"?: Gap;
-    "data-column-gap"?: Gap;
+    "data-gap"?: Sizes | GapOld;
+    "data-row-gap"?: Sizes;
+    "data-column-gap"?: Sizes;
     "data-nowrap"?: boolean;
     "data-justify"?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
     "data-fixed"?: boolean;

package/mtds/layout/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sources":["../../designsystem/layout/layout.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype GapOld = \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype Gap =\n\t| \"0\"\n\t| \"1\"\n\t| \"2\"\n\t| \"3\"\n\t| \"4\"\n\t| \"5\"\n\t| \"6\"\n\t| \"7\"\n\t| \"8\"\n\t| \"9\"\n\t| \"10\"\n\t| \"11\"\n\t| \"12\"\n\t| \"13\"\n\t| \"14\"\n\t| \"15\"\n\t| \"18\"\n\t| \"22\"\n\t| \"26\"\n\t| \"30\"\n\t| 0\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| 7\n\t| 8\n\t| 9\n\t| 10\n\t| 11\n\t| 12\n\t| 13\n\t| 14\n\t| 15\n\t| 18\n\t| 22\n\t| 26\n\t| 30;\n\ntype SharedProps = {\n\t\"data-align\"?: \"normal\" | \"stretch\" | \"start\" | \"center\" | \"end\";\n\t\"data-align-content\"?:\n\t\t| \"start\"\n\t\t| \"center\"\n\t\t| \"end\"\n\t\t| \"space-between\"\n\t\t| \"space-around\"\n\t\t| \"space-evenly\";\n\t\"data-center\"?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\t\"data-gap\"?: Gap | GapOld;\n\t\"data-row-gap\"?: Gap;\n\t\"data-column-gap\"?: Gap;\n\t\"data-nowrap\"?: boolean;\n\t\"data-justify\"?:\n\t\t| \"start\"\n\t\t| \"center\"\n\t\t| \"end\"\n\t\t| \"space-between\"\n\t\t| \"space-around\"\n\t\t| \"space-evenly\";\n\t\"data-fixed\"?: boolean;\n\t\"data-items\"?:\n\t\t| \"auto\"\n\t\t| \"full\"\n\t\t| \"50\"\n\t\t| \"100\"\n\t\t| \"150\"\n\t\t| \"200\"\n\t\t| \"250\"\n\t\t| \"300\"\n\t\t| \"350\"\n\t\t| \"400\"\n\t\t| \"450\"\n\t\t| \"500\"\n\t\t| 50\n\t\t| 100\n\t\t| 150\n\t\t| 200\n\t\t| 250\n\t\t| 300\n\t\t| 350\n\t\t| 400\n\t\t| 450\n\t\t| 500;\n};\n\n/**\n * Flex\n */\nexport type FlexProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, SharedProps>;\n\ntype FlexComponent = <As extends React.ElementType = \"div\">(\n\tprops: FlexProps<As>,\n) => JSX.Element;\n\nexport const Flex: FlexComponent = forwardRef<null>(function Flex<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: FlexProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.flex, className)} ref={ref} {...rest} />;\n}) as FlexComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n/**\n * Grid\n */\nexport type GridProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, SharedProps>;\n\ntype GridComponent = <As extends React.ElementType = \"div\">(\n\tprops: GridProps<As>,\n) => JSX.Element;\n\nexport const Grid: GridComponent = forwardRef<null>(function Grid<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GridProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.grid, className)} ref={ref} {...rest} />;\n}) as GridComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n/**\n * Prose\n */\nexport type ProseProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype ProseComponent = <As extends React.ElementType = \"div\">(\n\tprops: ProseProps<As>,\n) => JSX.Element;\n\nexport const Prose: ProseComponent = forwardRef<null>(function Prose<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: ProseProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.prose, className)} ref={ref} {...rest} />;\n}) as ProseComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Flex","forwardRef","as","className","rest","ref","jsx","clsx","styles","Grid","Prose"],"mappings":";;;;AA4GO,MAAMA,IAAsBC,EAAiB,SAElD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAuBC,GAA0B;AAGtE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GAYYK,IAAsBR,EAAiB,SAElD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAuBC,GAA0B;AAGtE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GAYYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AAGvE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}
+{"version":3,"file":"layout.js","sources":["../../designsystem/layout/layout.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tSizes,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype GapOld = \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\ntype SharedProps = {\n\t\"data-align\"?: \"normal\" | \"stretch\" | \"start\" | \"center\" | \"end\";\n\t\"data-align-content\"?:\n\t\t| \"start\"\n\t\t| \"center\"\n\t\t| \"end\"\n\t\t| \"space-between\"\n\t\t| \"space-around\"\n\t\t| \"space-evenly\";\n\t\"data-center\"?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\t\"data-gap\"?: Sizes | GapOld;\n\t\"data-row-gap\"?: Sizes;\n\t\"data-column-gap\"?: Sizes;\n\t\"data-nowrap\"?: boolean;\n\t\"data-justify\"?:\n\t\t| \"start\"\n\t\t| \"center\"\n\t\t| \"end\"\n\t\t| \"space-between\"\n\t\t| \"space-around\"\n\t\t| \"space-evenly\";\n\t\"data-fixed\"?: boolean;\n\t\"data-items\"?:\n\t\t| \"auto\"\n\t\t| \"full\"\n\t\t| \"50\"\n\t\t| \"100\"\n\t\t| \"150\"\n\t\t| \"200\"\n\t\t| \"250\"\n\t\t| \"300\"\n\t\t| \"350\"\n\t\t| \"400\"\n\t\t| \"450\"\n\t\t| \"500\"\n\t\t| 50\n\t\t| 100\n\t\t| 150\n\t\t| 200\n\t\t| 250\n\t\t| 300\n\t\t| 350\n\t\t| 400\n\t\t| 450\n\t\t| 500;\n};\n\n/**\n * Flex\n */\nexport type FlexProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, SharedProps>;\n\ntype FlexComponent = <As extends React.ElementType = \"div\">(\n\tprops: FlexProps<As>,\n) => JSX.Element;\n\nexport const Flex: FlexComponent = forwardRef<null>(function Flex<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: FlexProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.flex, className)} ref={ref} {...rest} />;\n}) as FlexComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n/**\n * Grid\n */\nexport type GridProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, SharedProps>;\n\ntype GridComponent = <As extends React.ElementType = \"div\">(\n\tprops: GridProps<As>,\n) => JSX.Element;\n\nexport const Grid: GridComponent = forwardRef<null>(function Grid<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GridProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.grid, className)} ref={ref} {...rest} />;\n}) as GridComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n/**\n * Prose\n */\nexport type ProseProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype ProseComponent = <As extends React.ElementType = \"div\">(\n\tprops: ProseProps<As>,\n) => JSX.Element;\n\nexport const Prose: ProseComponent = forwardRef<null>(function Prose<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: ProseProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.prose, className)} ref={ref} {...rest} />;\n}) as ProseComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Flex","forwardRef","as","className","rest","ref","jsx","clsx","styles","Grid","Prose"],"mappings":";;;;AAoEO,MAAMA,IAAsBC,EAAiB,SAElD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAuBC,GAA0B;AAGtE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GAYYK,IAAsBR,EAAiB,SAElD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAuBC,GAA0B;AAGtE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GAYYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AAGvE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}

package/mtds/package.json.js

@@ -1,4 +1,4 @@
-const o = "2.1.3";
+const o = "2.1.5";
 export {
   o as version
 };

package/mtds/popover/popover-observer.js

@@ -1,30 +1,37 @@
-import { flip as g, shift as l } from "../external/@floating-ui/dom/dist/floating-ui.dom.js";
-import d from "../styles.module.css.js";
-import { onLoaded as f, on as c, QUICK_EVENT as m, anchorPosition as r, attr as s } from "../utils.js";
-const a = d.popover.split(" ")[0];
-let p = 0;
-function v({
+import { flip as l, shift as d, size as m } from "../external/@floating-ui/dom/dist/floating-ui.dom.js";
+import f from "../styles.module.css.js";
+import { onLoaded as v, on as c, QUICK_EVENT as P, attr as i, anchorPosition as r } from "../utils.js";
+const p = f.popover.split(" ")[0];
+let g = 0;
+function h({
   target: o,
   newState: t
 }) {
-  if (o instanceof HTMLElement && o.classList.contains(a)) {
-    const e = t === "closed", n = o.getRootNode()?.querySelector(
+  if (o instanceof HTMLElement && o.classList.contains(p)) {
+    const e = t === "closed", a = i(o, "data-overscroll") === "contain", s = o.getRootNode()?.querySelector(
       `[popovertarget="${o.id}"]`
     );
-    p += e ? -1 : 1, e ? r(o, !1) : n && r(o, n, {
-      placement: s(o, "data-position") || "bottom",
-      middleware: [g(), l({ padding: 10 })]
+    g += e ? -1 : 1, e ? r(o, !1) : s && r(o, s, {
+      placement: i(o, "data-position") || "bottom",
+      middleware: [l(), d({ padding: 10 })].concat(
+        a ? m({
+          padding: 10,
+          apply({ availableHeight: n }) {
+            o.style.maxHeight = `${Math.max(50, n)}px`;
+          }
+        }) : []
+      )
     });
   }
 }
-function P({ target: o }) {
-  const t = p && o?.closest?.("a,[popovertargetaction]");
+function E({ target: o }) {
+  const t = g && o?.closest?.("a,[popovertargetaction]");
   if (t) {
-    const e = s(t, "popovertargetaction") || "toggle", n = e === "show" || (e === "hide" ? !1 : void 0), i = (document.getElementById(s(t, "popovertarget") || "") || t).closest(`.${a}`);
-    i?.isConnected && i?.togglePopover && i.togglePopover(n);
+    const e = i(t, "popovertargetaction") || "toggle", a = e === "show" || (e === "hide" ? !1 : void 0), n = (document.getElementById(i(t, "popovertarget") || "") || t).closest(`.${p}`);
+    n?.isConnected && n?.togglePopover && n.togglePopover(a);
   }
 }
-f(() => {
-  c(document, "toggle", v, m), c(document, "click", P);
+v(() => {
+  c(document, "toggle", h, P), c(document, "click", E);
 });
 //# sourceMappingURL=popover-observer.js.map

package/mtds/popover/popover-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-observer.js","sources":["../../designsystem/popover/popover-observer.ts"],"sourcesContent":["import { flip, type Placement, shift } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport { anchorPosition, attr, on, onLoaded, QUICK_EVENT } from \"../utils\";\n\nconst CSS_POPOVER = styles.popover.split(\" \")[0];\nlet OPEN_POPOVERS = 0; // Speed up by only checking clicks if we have open popovers\n\nfunction handlePopoverToggle({\n\ttarget: el,\n\tnewState,\n}: Event & { newState?: string }) {\n\tif (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n\t\tconst isClosing = newState === \"closed\";\n\t\tconst anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tOPEN_POPOVERS += isClosing ? -1 : 1;\n\t\tif (isClosing) anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tplacement: (attr(el, \"data-position\") || \"bottom\") as Placement,\n\t\t\t\tmiddleware: [flip(), shift({ padding: 10 })],\n\t\t\t});\n\t}\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handlePopoverLinkClick({ target }: Event) {\n\tconst close =\n\t\tOPEN_POPOVERS && (target as Element)?.closest?.(\"a,[popovertargetaction]\");\n\n\tif (close) {\n\t\tconst action = attr(close, \"popovertargetaction\") || \"toggle\";\n\t\tconst open = action === \"show\" || (action === \"hide\" ? false : undefined);\n\t\tconst target = document.getElementById(attr(close, \"popovertarget\") || \"\");\n\t\tconst popover = (target || close).closest<HTMLElement>(`.${CSS_POPOVER}`);\n\n\t\t// Popover can be disconneted by click handler deeper down in the DOM three before reaching document\n\t\tif (popover?.isConnected && popover?.togglePopover)\n\t\t\tpopover.togglePopover(open);\n\t}\n}\n\nonLoaded(() => {\n\ton(document, \"toggle\", handlePopoverToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n\ton(document, \"click\", handlePopoverLinkClick); // Allow `<a>` to use `popovertarget` as well\n});\n"],"names":["CSS_POPOVER","styles","OPEN_POPOVERS","handlePopoverToggle","el","newState","isClosing","anchor","anchorPosition","attr","flip","shift","handlePopoverLinkClick","target","close","action","open","popover","onLoaded","on","QUICK_EVENT"],"mappings":";;;AAIA,MAAMA,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC;AAC/C,IAAIC,IAAgB;AAEpB,SAASC,EAAoB;AAAA,EAC5B,QAAQC;AAAA,EACR,UAAAC;AACD,GAAkC;AACjC,MAAID,aAAc,eAAeA,EAAG,UAAU,SAASJ,CAAW,GAAG;AACpE,UAAMM,IAAYD,MAAa,UACzBE,IAAUH,EAAG,YAAA,GAA8B;AAAA,MAChD,mBAAmBA,EAAG,EAAE;AAAA,IAAA;AAGzB,IAAAF,KAAiBI,IAAY,KAAK,GAC9BA,IAAWE,EAAeJ,GAAI,EAAK,IAC9BG,KACRC,EAAeJ,GAAIG,GAAQ;AAAA,MAC1B,WAAYE,EAAKL,GAAI,eAAe,KAAK;AAAA,MACzC,YAAY,CAACM,EAAA,GAAQC,EAAM,EAAE,SAAS,IAAI,CAAC;AAAA,IAAA,CAC3C;AAAA,EACH;AACD;AAKA,SAASC,EAAuB,EAAE,QAAAC,KAAiB;AAClD,QAAMC,IACLZ,KAAkBW,GAAoB,UAAU,yBAAyB;AAE1E,MAAIC,GAAO;AACV,UAAMC,IAASN,EAAKK,GAAO,qBAAqB,KAAK,UAC/CE,IAAOD,MAAW,WAAWA,MAAW,SAAS,KAAQ,SAEzDE,KADS,SAAS,eAAeR,EAAKK,GAAO,eAAe,KAAK,EAAE,KAC9CA,GAAO,QAAqB,IAAId,CAAW,EAAE;AAGxE,IAAIiB,GAAS,eAAeA,GAAS,iBACpCA,EAAQ,cAAcD,CAAI;AAAA,EAC5B;AACD;AAEAE,EAAS,MAAM;AACd,EAAAC,EAAG,UAAU,UAAUhB,GAAqBiB,CAAW,GACvDD,EAAG,UAAU,SAASP,CAAsB;AAC7C,CAAC;"}
+{"version":3,"file":"popover-observer.js","sources":["../../designsystem/popover/popover-observer.ts"],"sourcesContent":["import { flip, type Placement, shift, size } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport { anchorPosition, attr, on, onLoaded, QUICK_EVENT } from \"../utils\";\n\nconst CSS_POPOVER = styles.popover.split(\" \")[0];\nlet OPEN_POPOVERS = 0; // Speed up by only checking clicks if we have open popovers\n\nfunction handlePopoverToggle({\n\ttarget: el,\n\tnewState,\n}: Event & { newState?: string }) {\n\tif (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n\t\tconst isClosing = newState === \"closed\";\n\t\tconst isContain = attr(el, \"data-overscroll\") === \"contain\";\n\t\tconst anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tOPEN_POPOVERS += isClosing ? -1 : 1;\n\t\tif (isClosing) anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tplacement: (attr(el, \"data-position\") || \"bottom\") as Placement,\n\t\t\t\tmiddleware: [flip(), shift({ padding: 10 })].concat(\n\t\t\t\t\tisContain\n\t\t\t\t\t\t? size({\n\t\t\t\t\t\t\t\tpadding: 10,\n\t\t\t\t\t\t\t\tapply({ availableHeight }) {\n\t\t\t\t\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t: [],\n\t\t\t\t),\n\t\t\t});\n\t}\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handlePopoverLinkClick({ target }: Event) {\n\tconst close =\n\t\tOPEN_POPOVERS && (target as Element)?.closest?.(\"a,[popovertargetaction]\");\n\n\tif (close) {\n\t\tconst action = attr(close, \"popovertargetaction\") || \"toggle\";\n\t\tconst open = action === \"show\" || (action === \"hide\" ? false : undefined);\n\t\tconst target = document.getElementById(attr(close, \"popovertarget\") || \"\");\n\t\tconst popover = (target || close).closest<HTMLElement>(`.${CSS_POPOVER}`);\n\n\t\t// Popover can be disconneted by click handler deeper down in the DOM three before reaching document\n\t\tif (popover?.isConnected && popover?.togglePopover)\n\t\t\tpopover.togglePopover(open);\n\t}\n}\n\nonLoaded(() => {\n\ton(document, \"toggle\", handlePopoverToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n\ton(document, \"click\", handlePopoverLinkClick); // Allow `<a>` to use `popovertarget` as well\n});\n"],"names":["CSS_POPOVER","styles","OPEN_POPOVERS","handlePopoverToggle","el","newState","isClosing","isContain","attr","anchor","anchorPosition","flip","shift","size","availableHeight","handlePopoverLinkClick","target","close","action","open","popover","onLoaded","on","QUICK_EVENT"],"mappings":";;;AAIA,MAAMA,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC;AAC/C,IAAIC,IAAgB;AAEpB,SAASC,EAAoB;AAAA,EAC5B,QAAQC;AAAA,EACR,UAAAC;AACD,GAAkC;AACjC,MAAID,aAAc,eAAeA,EAAG,UAAU,SAASJ,CAAW,GAAG;AACpE,UAAMM,IAAYD,MAAa,UACzBE,IAAYC,EAAKJ,GAAI,iBAAiB,MAAM,WAC5CK,IAAUL,EAAG,YAAA,GAA8B;AAAA,MAChD,mBAAmBA,EAAG,EAAE;AAAA,IAAA;AAGzB,IAAAF,KAAiBI,IAAY,KAAK,GAC9BA,IAAWI,EAAeN,GAAI,EAAK,IAC9BK,KACRC,EAAeN,GAAIK,GAAQ;AAAA,MAC1B,WAAYD,EAAKJ,GAAI,eAAe,KAAK;AAAA,MACzC,YAAY,CAACO,EAAA,GAAQC,EAAM,EAAE,SAAS,GAAA,CAAI,CAAC,EAAE;AAAA,QAC5CL,IACGM,EAAK;AAAA,UACL,SAAS;AAAA,UACT,MAAM,EAAE,iBAAAC,KAAmB;AAC1B,YAAAV,EAAG,MAAM,YAAY,GAAG,KAAK,IAAI,IAAIU,CAAe,CAAC;AAAA,UACtD;AAAA,QAAA,CACA,IACA,CAAA;AAAA,MAAC;AAAA,IACL,CACA;AAAA,EACH;AACD;AAKA,SAASC,EAAuB,EAAE,QAAAC,KAAiB;AAClD,QAAMC,IACLf,KAAkBc,GAAoB,UAAU,yBAAyB;AAE1E,MAAIC,GAAO;AACV,UAAMC,IAASV,EAAKS,GAAO,qBAAqB,KAAK,UAC/CE,IAAOD,MAAW,WAAWA,MAAW,SAAS,KAAQ,SAEzDE,KADS,SAAS,eAAeZ,EAAKS,GAAO,eAAe,KAAK,EAAE,KAC9CA,GAAO,QAAqB,IAAIjB,CAAW,EAAE;AAGxE,IAAIoB,GAAS,eAAeA,GAAS,iBACpCA,EAAQ,cAAcD,CAAI;AAAA,EAC5B;AACD;AAEAE,EAAS,MAAM;AACd,EAAAC,EAAG,UAAU,UAAUnB,GAAqBoB,CAAW,GACvDD,EAAG,UAAU,SAASP,CAAsB;AAC7C,CAAC;"}

package/mtds/popover/popover.d.ts

@@ -3,6 +3,7 @@ import { JSX } from 'react';
 import { PolymorphicComponentPropWithRef, PopoverValues } from '../react-types';
 export type PopoverProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As, {
     "data-position"?: Placement;
+    "data-overscroll"?: "contain";
     popover?: PopoverValues;
 }>;
 type PopoverComponent = <As extends React.ElementType = "div">(props: PopoverProps<As>) => JSX.Element;

package/mtds/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.tsx"],"sourcesContent":["import type { Placement } from \"@floating-ui/dom\";\nimport clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tPopoverValues,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type PopoverProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-position\"?: Placement;\n\t\t\tpopover?: PopoverValues;\n\t\t}\n\t>;\n\ntype PopoverComponent = <As extends React.ElementType = \"div\">(\n\tprops: PopoverProps<As>,\n) => JSX.Element;\n\nexport const Popover: PopoverComponent = forwardRef<null>(function Popover<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: PopoverProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn (\n\t\t<Tag\n\t\t\tpopover=\"auto\"\n\t\t\tclassName={clsx(styles.popover, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as PopoverComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Popover","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAuBO,MAAMA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,GAA0B;AAGzE,SACC,gBAAAC;AAAA,IAHWJ,KAAM;AAAA,IAGhB;AAAA,MACA,SAAQ;AAAA,MACR,WAAWK,EAAKC,EAAO,SAASL,CAAS;AAAA,MACzC,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.tsx"],"sourcesContent":["import type { Placement } from \"@floating-ui/dom\";\nimport clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tPopoverValues,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type PopoverProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-position\"?: Placement;\n\t\t\t\"data-overscroll\"?: \"contain\";\n\t\t\tpopover?: PopoverValues;\n\t\t}\n\t>;\n\ntype PopoverComponent = <As extends React.ElementType = \"div\">(\n\tprops: PopoverProps<As>,\n) => JSX.Element;\n\nexport const Popover: PopoverComponent = forwardRef<null>(function Popover<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: PopoverProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn (\n\t\t<Tag\n\t\t\tpopover=\"auto\"\n\t\t\tclassName={clsx(styles.popover, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as PopoverComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Popover","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAwBO,MAAMA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,GAA0B;AAGzE,SACC,gBAAAC;AAAA,IAHWJ,KAAM;AAAA,IAGhB;AAAA,MACA,SAAQ;AAAA,MACR,WAAWK,EAAKC,EAAO,SAASL,CAAS;AAAA,MACzC,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/mtds/popover/popover.stories.d.ts

@@ -13,3 +13,4 @@ export declare const WithTextInline: Story;
 export declare const WithArrow: Story;
 export declare const WithIcon: Story;
 export declare const WithDivider: Story;
+export declare const WithOverscroll: Story;

package/mtds/react-types.d.ts

@@ -8,6 +8,7 @@ export type PolymorphicComponentPropWithRef<As extends React.ElementType, Props
 };
 export type PolymorphicRef<As extends React.ElementType> = React.ComponentPropsWithRef<As>["ref"];
 export type PopoverValues = "" | "auto" | "manual" | undefined;
+export type Sizes = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "18" | "22" | "26" | "30" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 22 | 26 | 30;
 declare global {
     namespace React {
         interface HTMLAttributes<T> {