@mattilsynet/design 1.1.1 → 1.1.3

package/mtds/app/app-observer.js

@@ -0,0 +1,34 @@
+import m from "../styles.module.css.js";
+import { onLoaded as w, onMutation as C, on as c, QUICK_EVENT as p, debounce as T } from "../utils.js";
+import "./app-toggle2.js";
+const f = m.app.split(" ")[0], P = m.sticky.split(" ")[0], _ = '[data-command="toggle-app-expanded"]', g = `.${f} > dialog,.${f} dialog ~ main`, h = (e) => {
+  document.startViewTransition ? document.startViewTransition(e) : e();
+};
+function E({ target: e }) {
+  e instanceof HTMLButtonElement && e.matches(_) && h(() => {
+    var l;
+    if (getComputedStyle(e).position === "sticky") (l = window.mtdsAppToggle) == null || l.call(window);
+    else {
+      const o = document.querySelector(g);
+      o == null || o.setAttribute("data-closedby", "any"), o == null || o.showModal();
+    }
+  });
+}
+function I() {
+  var e;
+  (e = document.querySelector(g)) == null || e.close();
+}
+let d = 0, s, n = 0, t, a = 0, r = 0, y = !1, u = 0, i = 0;
+function H([e]) {
+  t = e, S();
+}
+function S() {
+  var o;
+  if (!(t != null && t.isConnected)) return;
+  const e = window.scrollY, l = e < i;
+  i = e, l !== s && (d = (((o = t.parentElement) == null ? void 0 : o.getBoundingClientRect().top) || 0) + i, s = l, a = t.offsetHeight, r = t.getBoundingClientRect().top + i, y = t.offsetHeight <= window.innerHeight, u = window.innerHeight), !(n === -1 && y) && (n !== -1 && (y || s && i <= r) ? (t.style.setProperty("--pos", "sticky"), t.style.setProperty("--top", "0px"), n = -1) : n === -1 && !s ? (t.style.setProperty("--pos", "relative"), t.style.setProperty("--top", `${Math.max(0, i - d)}px`), n = 0) : n !== 1 && !s && i + u >= r + a ? (t.style.setProperty("--pos", "sticky"), t.style.setProperty("--top", `${u - a}px`), n = 1) : n === 1 && s && (t.style.setProperty("--pos", "relative"), t.style.setProperty("--top", `${r - d}px`), n = 0));
+}
+w(() => {
+  C(document.documentElement, P, H), c(document, "click", E, p), c(window, "resize", T(I, 100), p), c(window, "scroll", S, p);
+});
+//# sourceMappingURL=app-observer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-observer.js","sources":["../../designsystem/app/app-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { QUICK_EVENT, debounce, on, onLoaded, onMutation } from \"../utils\";\nimport \"./app-toggle\";\n\nconst CSS_APP = styles.app.split(\" \")[0];\nconst CSS_STICKY = styles.sticky.split(\" \")[0];\nconst CSS_TOGGLE = '[data-command=\"toggle-app-expanded\"]';\nconst CSS_SIDEBAR = `.${CSS_APP} > dialog,.${CSS_APP} dialog ~ main`;\n\nconst useTransition = (callback: () => void) => {\n\tif (!document.startViewTransition) callback();\n\telse document.startViewTransition(callback);\n};\n\nfunction handleToggleClick({ target: el }: Event) {\n\tif (el instanceof HTMLButtonElement && el.matches(CSS_TOGGLE))\n\t\tuseTransition(() => {\n\t\t\t// @ts-expect-error window.mtdsAppToggle comes from app-toggle.js\n\t\t\tif (getComputedStyle(el).position === \"sticky\") window.mtdsAppToggle?.();\n\t\t\telse {\n\t\t\t\tconst sidebar = document.querySelector<HTMLDialogElement>(CSS_SIDEBAR);\n\t\t\t\tsidebar?.setAttribute(\"data-closedby\", \"any\"); // Allow closing by clicking outside\n\t\t\t\tsidebar?.showModal();\n\t\t\t}\n\t\t});\n}\n\nfunction handleResize() {\n\tdocument.querySelector<HTMLDialogElement>(CSS_SIDEBAR)?.close();\n}\n\n// Scroll state\nlet MIN_Y = 0; // Offset to avoid scroll jump when sticky is set to relative\nlet SCROLL_UP: boolean;\nlet STICK = 0; // -1 = stick top, 0 = relative, 1 = stick bottom\nlet STICK_EL: HTMLElement;\nlet STICK_H = 0;\nlet STICK_Y = 0;\nlet STUCK = false; // Used to figure if nav is larger than viewport\nlet WIN_H = 0;\nlet WIN_Y = 0;\n\nfunction handleMutation([sticky]: HTMLCollectionOf<HTMLElement>) {\n\tSTICK_EL = sticky;\n\thandleScroll(); // Run on connect\n}\n\nfunction handleScroll() {\n\tif (!STICK_EL?.isConnected) return;\n\tconst NEXT_Y = window.scrollY;\n\tconst NEXT_UP = NEXT_Y < WIN_Y;\n\tWIN_Y = NEXT_Y;\n\n\t// Only calculate if scroll direction has changed\n\tif (NEXT_UP !== SCROLL_UP) {\n\t\tMIN_Y = (STICK_EL.parentElement?.getBoundingClientRect().top || 0) + WIN_Y;\n\t\tSCROLL_UP = NEXT_UP;\n\t\tSTICK_H = STICK_EL.offsetHeight;\n\t\tSTICK_Y = STICK_EL.getBoundingClientRect().top + WIN_Y;\n\t\tSTUCK = STICK_EL.offsetHeight <= window.innerHeight;\n\t\tWIN_H = window.innerHeight;\n\t}\n\n\tif (STICK === -1 && STUCK) return; // Allways sticky when sidebar is smaller than viewport\n\tif (STICK !== -1 && (STUCK || (SCROLL_UP && WIN_Y <= STICK_Y))) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"sticky\");\n\t\tSTICK_EL.style.setProperty(\"--top\", \"0px\");\n\t\tSTICK = -1; // Not sticking to top and sidebar is smaller than viewport or scrolling up\n\t} else if (STICK === -1 && !SCROLL_UP) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"relative\");\n\t\tSTICK_EL.style.setProperty(\"--top\", `${Math.max(0, WIN_Y - MIN_Y)}px`);\n\t\tSTICK = 0; // Sticking to top and scrolling down\n\t} else if (STICK !== 1 && !SCROLL_UP && WIN_Y + WIN_H >= STICK_Y + STICK_H) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"sticky\");\n\t\tSTICK_EL.style.setProperty(\"--top\", `${WIN_H - STICK_H}px`);\n\t\tSTICK = 1; // Not sticking to bottom and scrolling down\n\t} else if (STICK === 1 && SCROLL_UP) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"relative\");\n\t\tSTICK_EL.style.setProperty(\"--top\", `${STICK_Y - MIN_Y}px`);\n\t\tSTICK = 0; // Sticking to bottom and scrolling up\n\t}\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_STICKY, handleMutation);\n\ton(document, \"click\", handleToggleClick, QUICK_EVENT);\n\ton(window, \"resize\", debounce(handleResize, 100), QUICK_EVENT);\n\ton(window, \"scroll\", handleScroll, QUICK_EVENT);\n});\n"],"names":["CSS_APP","styles","CSS_STICKY","CSS_TOGGLE","CSS_SIDEBAR","useTransition","callback","handleToggleClick","el","sidebar","handleResize","_a","MIN_Y","SCROLL_UP","STICK","STICK_EL","STICK_H","STICK_Y","STUCK","WIN_H","WIN_Y","handleMutation","sticky","handleScroll","NEXT_Y","NEXT_UP","onLoaded","onMutation","on","QUICK_EVENT","debounce"],"mappings":";;;AAIA,MAAMA,IAAUC,EAAO,IAAI,MAAM,GAAG,EAAE,CAAC,GACjCC,IAAaD,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCE,IAAa,wCACbC,IAAc,IAAIJ,CAAO,cAAcA,CAAO,kBAE9CK,IAAgB,CAACC,MAAyB;AAC3C,EAAC,SAAS,sBACT,SAAS,oBAAoBA,CAAQ,IADEA,EAAA;AAE7C;AAEA,SAASC,EAAkB,EAAE,QAAQC,KAAa;AACjD,EAAIA,aAAc,qBAAqBA,EAAG,QAAQL,CAAU,KAC3DE,EAAc,MAAM;;AAEnB,QAAI,iBAAiBG,CAAE,EAAE,aAAa,sBAAiB;SAClD;AACE,YAAAC,IAAU,SAAS,cAAiCL,CAAW;AAC5D,MAAAK,KAAA,QAAAA,EAAA,aAAa,iBAAiB,QACvCA,KAAA,QAAAA,EAAS;AAAA,IAAU;AAAA,EACpB,CACA;AACH;AAEA,SAASC,IAAe;;AACd,GAAAC,IAAA,SAAA,cAAiCP,CAAW,MAA5C,QAAAO,EAA+C;AACzD;AAGA,IAAIC,IAAQ,GACRC,GACAC,IAAQ,GACRC,GACAC,IAAU,GACVC,IAAU,GACVC,IAAQ,IACRC,IAAQ,GACRC,IAAQ;AAEZ,SAASC,EAAe,CAACC,CAAM,GAAkC;AACrD,EAAAP,IAAAO,GACEC,EAAA;AACd;AAEA,SAASA,IAAe;;AACnB,MAAA,EAACR,KAAA,QAAAA,EAAU,aAAa;AAC5B,QAAMS,IAAS,OAAO,SAChBC,IAAUD,IAASJ;AAarB,EAZIA,IAAAI,GAGJC,MAAYZ,MACfD,OAASD,IAAAI,EAAS,kBAAT,gBAAAJ,EAAwB,wBAAwB,QAAO,KAAKS,GACzDP,IAAAY,GACZT,IAAUD,EAAS,cACTE,IAAAF,EAAS,sBAAsB,EAAE,MAAMK,GACzCF,IAAAH,EAAS,gBAAgB,OAAO,aACxCI,IAAQ,OAAO,cAGZ,EAAAL,MAAU,MAAMI,OAChBJ,MAAU,OAAOI,KAAUL,KAAaO,KAASH,MAC3CF,EAAA,MAAM,YAAY,SAAS,QAAQ,GACnCA,EAAA,MAAM,YAAY,SAAS,KAAK,GACjCD,IAAA,MACEA,MAAU,MAAM,CAACD,KAClBE,EAAA,MAAM,YAAY,SAAS,UAAU,GACrCA,EAAA,MAAM,YAAY,SAAS,GAAG,KAAK,IAAI,GAAGK,IAAQR,CAAK,CAAC,IAAI,GAC7DE,IAAA,KACEA,MAAU,KAAK,CAACD,KAAaO,IAAQD,KAASF,IAAUD,KACzDD,EAAA,MAAM,YAAY,SAAS,QAAQ,GAC5CA,EAAS,MAAM,YAAY,SAAS,GAAGI,IAAQH,CAAO,IAAI,GAClDF,IAAA,KACEA,MAAU,KAAKD,MAChBE,EAAA,MAAM,YAAY,SAAS,UAAU,GAC9CA,EAAS,MAAM,YAAY,SAAS,GAAGE,IAAUL,CAAK,IAAI,GAClDE,IAAA;AAEV;AAEAY,EAAS,MAAM;AACH,EAAAC,EAAA,SAAS,iBAAiBzB,GAAYmB,CAAc,GAC5DO,EAAA,UAAU,SAASrB,GAAmBsB,CAAW,GACpDD,EAAG,QAAQ,UAAUE,EAASpB,GAAc,GAAG,GAAGmB,CAAW,GAC1DD,EAAA,QAAQ,UAAUL,GAAcM,CAAW;AAC/C,CAAC;"}

package/mtds/app/app-toggle.js

@@ -0,0 +1,24 @@
+const t = `if (
+	typeof window !== "undefined" &&
+	window.CSSStyleSheet &&
+	document.adoptedStyleSheets
+)
+	(() => {
+		const key = "--mtds-app-expanded";
+		const sheet = new CSSStyleSheet();
+
+		document.adoptedStyleSheets.push(sheet);
+		window.mtdsAppToggle = (toggle = true) => {
+			const prev = !window.localStorage.getItem(key)?.includes("false");
+			const next = toggle ? !prev : prev;
+
+			sheet.replaceSync(\`:root { \${key}: var(\${key}--\${next})}\`);
+			window.localStorage.setItem(key, next);
+		};
+		window.mtdsAppToggle(false); // Set and store initial state
+	})();
+`;
+export {
+  t as default
+};
+//# sourceMappingURL=app-toggle.js.map

package/mtds/app/app-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsAppToggle = (toggle = true) => {\\n\\t\\t\\tconst prev = !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\t\\t\\tconst next = toggle ? !prev : prev;\\n\\n\\t\\t\\tsheet.replaceSync(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t};\\n\\t\\twindow.mtdsAppToggle(false); // Set and store initial state\\n\\t})();\\n\""],"names":["script"],"mappings":"AAAA,MAAeA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/mtds/app/app-toggle2.js

@@ -0,0 +1,9 @@
+typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
+  const e = "--mtds-app-expanded", t = new CSSStyleSheet();
+  document.adoptedStyleSheets.push(t), window.mtdsAppToggle = (s = !0) => {
+    var n;
+    const o = !((n = window.localStorage.getItem(e)) != null && n.includes("false")), d = s ? !o : o;
+    t.replaceSync(`:root { ${e}: var(${e}--${d})}`), window.localStorage.setItem(e, d);
+  }, window.mtdsAppToggle(!1);
+})();
+//# sourceMappingURL=app-toggle2.js.map

package/mtds/app/app-toggle2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsAppToggle = (toggle = true) => {\n\t\t\tconst prev = !window.localStorage.getItem(key)?.includes(\"false\");\n\t\t\tconst next = toggle ? !prev : prev;\n\n\t\t\tsheet.replaceSync(`:root { ${key}: var(${key}--${next})}`);\n\t\t\twindow.localStorage.setItem(key, next);\n\t\t};\n\t\twindow.mtdsAppToggle(false); // Set and store initial state\n\t})();\n"],"names":["key","sheet","toggle","_a","prev","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAe;AAEjC,WAAS,mBAAmB,KAAKA,CAAK,GACtC,OAAO,gBAAgB,CAACC,IAAS,OAAS;AAV5C,QAAAC;AAWG,UAAMC,IAAO,GAACD,IAAA,OAAO,aAAa,QAAQH,CAAG,MAA/B,QAAAG,EAAkC,SAAS,WACnDE,IAAOH,IAAS,CAACE,IAAOA;AAE9B,IAAAH,EAAM,YAAY,WAAWD,CAAG,SAASA,CAAG,KAAKK,CAAI,IAAI,GACzD,OAAO,aAAa,QAAQL,GAAKK,CAAI;AAAA,EACrC,GACD,OAAO,cAAc,EAAK;AAC5B,GAAK;"}

package/mtds/app/app.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react';
+import { PolymorphicComponentPropWithRef } from '../react-types';
+export type AppHeaderProps = React.ComponentPropsWithoutRef<"header">;
+export type AppSidebarProps = React.ComponentPropsWithoutRef<"dialog">;
+export type AppStickyProps = React.ComponentPropsWithoutRef<"div">;
+export type AppMainProps = React.ComponentPropsWithoutRef<"main">;
+export type AppFooterProps = React.ComponentPropsWithoutRef<"footer">;
+export type AppProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As>;
+type AppComponent = <As extends React.ElementType = "div">(props: AppProps<As>) => JSX.Element;
+export declare const App: AppComponent & {
+    Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Sidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+    Sticky: AppComponent;
+    Main: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Script: () => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/mtds/app/app.js

@@ -0,0 +1,36 @@
+import { jsx as o } from "react/jsx-runtime";
+import { clsx as a } from "../external/clsx/dist/clsx.js";
+import { forwardRef as p } from "react";
+import c from "../styles.module.css.js";
+import m from "./app-toggle.js";
+const f = p(function({ as: r, className: t, ...n }, e) {
+  return /* @__PURE__ */ o(r || "div", { className: a(c.app, t), ref: e, ...n });
+}), d = p(function({ as: r, className: t, ...n }, e) {
+  return /* @__PURE__ */ o(r || "div", { className: a(c.sticky, t), ref: e, ...n });
+}), y = Object.assign(f, {
+  Header: p(
+    function(r, t) {
+      return /* @__PURE__ */ o("header", { ref: t, ...r });
+    }
+  ),
+  Sidebar: p(
+    function(r, t) {
+      return /* @__PURE__ */ o("dialog", { role: "navigation", ref: t, ...r });
+    }
+  ),
+  Sticky: d,
+  Main: p(function(r, t) {
+    return /* @__PURE__ */ o("main", { ref: t, ...r });
+  }),
+  Footer: p(
+    function(r, t) {
+      return /* @__PURE__ */ o("footer", { ref: t, ...r });
+    }
+  ),
+  // Needed to avoid flash of unstyled content and still be Next.js hydration compatible
+  Script: () => /* @__PURE__ */ o("script", { id: "mtds-app-script", children: m })
+});
+export {
+  y as App
+};
+//# sourceMappingURL=app.js.map

package/mtds/app/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["AppComp","forwardRef","as","className","rest","ref","jsx","clsx","styles","AppSticky","App","script"],"mappings":";;;;;AAqBA,MAAMA,IAAUC,EAAiB,SAE/B,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAiBC,GAA0B;AAG9D,SAAA,gBAAAC,EAFKJ,KAAM,OAEN,EAAA,WAAWK,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AACzE,CAAC,GAEKK,IAAYR,EAAiB,SAEjC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAiBC,GAA0B;AAG9D,SAAA,gBAAAC,EAFKJ,KAAM,OAEN,EAAA,WAAWK,EAAKC,EAAO,QAAQL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC5E,CAAC,GAEYM,IAAM,OAAO,OAAOV,GAAS;AAAA,EACzC,QAAQC;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAQ,gBAAAC,EAAA,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAM,CAAA;AAAA,IAAA;AAAA,EAErC;AAAA,EACA,SAASH;AAAA,IACR,SAAoBG,GAAMC,GAAK;AAC9B,+BAAQ,UAAO,EAAA,MAAK,cAAa,KAAAA,GAAW,GAAGD,GAAM;AAAA,IAAA;AAAA,EAEvD;AAAA,EACA,QAAQK;AAAA,EACR,MAAMR,EAAsC,SAAiBG,GAAMC,GAAK;AACvE,WAAQ,gBAAAC,EAAA,QAAA,EAAK,KAAAD,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA,CACjC;AAAA,EACD,QAAQH;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAQ,gBAAAC,EAAA,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAM,CAAA;AAAA,IAAA;AAAA,EAErC;AAAA;AAAA,EAEA,QAAQ,MAAM,gBAAAE,EAAC,UAAO,EAAA,IAAG,mBAAmB,UAAOK,EAAA,CAAA;AACpD,CAAC;"}

package/mtds/app/app.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        [x: string]: any;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const React: Story;
+export declare const WithFooter: Story;
+export declare const WithComplexContent: Story;

package/mtds/card/card.d.ts

@@ -8,10 +8,5 @@ type CardComponent = <Href, As extends React.ElementType = Href extends string ?
 export type GroupProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As>;
 type GroupComponent = <As extends React.ElementType = "div">(props: GroupProps<As>) => JSX.Element;
 export declare const Group: GroupComponent;
-export type CardDetailsProps = React.ComponentPropsWithoutRef<"details">;
-export type CardSummaryProps = React.ComponentPropsWithoutRef<"summary">;
-export declare const Card: CardComponent & {
-    Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
-    Summary: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-};
+export declare const Card: CardComponent;
 export {};

package/mtds/card/card.js

@@ -1,26 +1,15 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { clsx as m } from "../external/clsx/dist/clsx.js";
-import { forwardRef as t } from "react";
-import u from "../styles.module.css.js";
-const e = t(function({ as: a, className: o, ...r }, c) {
-  const i = a || (r.href ? "a" : "div");
-  return /* @__PURE__ */ s(i, { className: m(u.card, o), ref: c, ...r });
-}), y = t(function({ as: a, className: o, ...r }, c) {
-  return /* @__PURE__ */ s(a || "div", { className: m(u.group, o), ref: c, ...r });
-}), d = t(
-  function({ className: a, ...o }, r) {
-    return /* @__PURE__ */ s("u-details", { class: m(u.card, a), ref: r, ...o });
-  }
-), f = t(
-  function({ className: a, ...o }, r) {
-    return /* @__PURE__ */ s("u-summary", { class: a, ref: r, ...o });
-  }
-), x = Object.assign(e, {
-  Details: d,
-  Summary: f
-});
+import { forwardRef as n } from "react";
+import f from "../styles.module.css.js";
+const i = n(function({ as: o, className: t, ...r }, a) {
+  const s = o || (r.href ? "a" : "div");
+  return /* @__PURE__ */ c(s, { className: m(f.card, t), ref: a, ...r });
+}), l = n(function({ as: o, className: t, ...r }, a) {
+  return /* @__PURE__ */ c(o || "div", { className: m(f.group, t), ref: a, ...r });
+}), C = i;
 export {
-  x as Card,
-  y as Group
+  C as Card,
+  l as Group
 };
 //# sourceMappingURL=card.js.map

package/mtds/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nconst CardComp: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type CardDetailsProps = React.ComponentPropsWithoutRef<\"details\">;\nconst CardDetails = forwardRef<HTMLDetailsElement, CardDetailsProps>(\n\tfunction CardDetails({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-details class={clsx(styles.card, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type CardSummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\nconst CardSummary = forwardRef<HTMLElement, CardSummaryProps>(\n\tfunction CardSummary({ className, ...rest }, ref) {\n\t\treturn <u-summary class={className} ref={ref} {...rest} />;\n\t},\n);\n\nexport const Card = Object.assign(CardComp, {\n\tDetails: CardDetails,\n\tSummary: CardSummary,\n});\n"],"names":["CardComp","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group","CardDetails","CardSummary","Card"],"mappings":";;;;AAwBA,MAAMA,IAA0BC,EAAiB,SAG/C,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAwBC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AAGhE,SAAA,gBAAAE,EAFKL,KAAM,OAEN,EAAA,WAAWM,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC,GAGKO,IAAcV;AAAA,EACnB,SAAqB,EAAE,WAAAE,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAEhD,WAAA,gBAAAE,EAAC,aAAU,EAAA,OAAOC,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGvE,GAGMQ,IAAcX;AAAA,EACnB,SAAqB,EAAE,WAAAE,GAAW,GAAGC,EAAA,GAAQC,GAAK;AACjD,6BAAQ,aAAU,EAAA,OAAOF,GAAW,KAAAE,GAAW,GAAGD,GAAM;AAAA,EAAA;AAE1D,GAEaS,IAAO,OAAO,OAAOb,GAAU;AAAA,EAC3C,SAASW;AAAA,EACT,SAASC;AACV,CAAC;"}
+{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nconst CardComp: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n// export type CardDetailsProps = React.ComponentPropsWithoutRef<\"details\">;\n// const CardDetails = forwardRef<HTMLDetailsElement, CardDetailsProps>(\n// \tfunction CardDetails({ className, ...rest }, ref) {\n// \t\treturn (\n// \t\t\t<u-details class={clsx(styles.card, className)} ref={ref} {...rest} />\n// \t\t);\n// \t},\n// );\n\n// export type CardSummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\n// const CardSummary = forwardRef<HTMLElement, CardSummaryProps>(\n// \tfunction CardSummary({ className, ...rest }, ref) {\n// \t\treturn <u-summary class={className} ref={ref} {...rest} />;\n// \t},\n// );\n\nexport const Card = CardComp;\n"],"names":["CardComp","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group","Card"],"mappings":";;;;AAwBA,MAAMA,IAA0BC,EAAiB,SAG/C,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAwBC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AAGhE,SAAA,gBAAAE,EAFKL,KAAM,OAEN,EAAA,WAAWM,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC,GAkBYO,IAAOX;"}

package/mtds/details/details.js

@@ -1,25 +1,17 @@
-import { jsx as o } from "react/jsx-runtime";
-import { clsx as e } from "../external/clsx/dist/clsx.js";
-import { forwardRef as m } from "react";
-import l from "../styles.module.css.js";
-const n = m(
-  function({ className: s, open: t, ...r }, i) {
-    return /* @__PURE__ */ o(
-      "u-details",
-      {
-        class: e(l.details, s),
-        open: !!t || void 0,
-        ref: i,
-        ...r
-      }
-    );
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import i from "../styles.module.css.js";
+import { toCustomElementProps as s } from "../utils.js";
+const a = o(
+  function(t, r) {
+    return /* @__PURE__ */ m("u-details", { ref: r, ...s(t, i.details) });
   }
-), u = m(
-  function({ className: s, ...t }, r) {
-    return /* @__PURE__ */ o("u-summary", { class: s, ref: r, ...t });
+), n = o(
+  function(t, r) {
+    return /* @__PURE__ */ m("u-summary", { ref: r, ...s(t) });
   }
-), D = Object.assign(n, { Summary: u });
+), c = Object.assign(a, { Summary: n });
 export {
-  D as Details
+  c as Details
 };
 //# sourceMappingURL=details.js.map

package/mtds/details/details.js.map

@@ -1 +1 @@
-{"version":3,"file":"details.js","sources":["../../designsystem/details/details.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type DetailsProps = React.ComponentPropsWithoutRef<\"details\">;\nconst DetailsComp = forwardRef<HTMLDetailsElement, DetailsProps>(\n\tfunction Details({ className, open, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-details\n\t\t\t\tclass={clsx(styles.details, className)}\n\t\t\t\topen={!!open || undefined} // Fallback to undefined so open={false} does not print boolean attribute\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type SummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\nconst DetailsSummary = forwardRef<HTMLElement, SummaryProps>(\n\tfunction DetailsSummary({ className, ...rest }, ref) {\n\t\treturn <u-summary class={className} ref={ref} {...rest} />;\n\t},\n);\n\nexport const Details = Object.assign(DetailsComp, { Summary: DetailsSummary });\n"],"names":["DetailsComp","forwardRef","className","open","rest","ref","jsx","clsx","styles","DetailsSummary","Details"],"mappings":";;;;AAKA,MAAMA,IAAcC;AAAA,EACnB,SAAiB,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,KAAQC,GAAK;AAElD,WAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OAAOC,EAAKC,EAAO,SAASN,CAAS;AAAA,QACrC,MAAM,CAAC,CAACC,KAAQ;AAAA,QAChB,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH,GAGMK,IAAiBR;AAAA,EACtB,SAAwB,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAAQC,GAAK;AACpD,6BAAQ,aAAU,EAAA,OAAOH,GAAW,KAAAG,GAAW,GAAGD,GAAM;AAAA,EAAA;AAE1D,GAEaM,IAAU,OAAO,OAAOV,GAAa,EAAE,SAASS,EAAgB,CAAA;"}
+{"version":3,"file":"details.js","sources":["../../designsystem/details/details.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\nexport type DetailsProps = React.ComponentPropsWithoutRef<\"details\">;\nconst DetailsComp = forwardRef<HTMLDetailsElement, DetailsProps>(\n\tfunction Details(props, ref) {\n\t\treturn (\n\t\t\t<u-details ref={ref} {...toCustomElementProps(props, styles.details)} />\n\t\t);\n\t},\n);\n\nexport type SummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\nconst DetailsSummary = forwardRef<HTMLElement, SummaryProps>(\n\tfunction DetailsSummary(props, ref) {\n\t\treturn <u-summary ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Details = Object.assign(DetailsComp, { Summary: DetailsSummary });\n"],"names":["DetailsComp","forwardRef","props","ref","jsx","toCustomElementProps","styles","DetailsSummary","Details"],"mappings":";;;;AAKA,MAAMA,IAAcC;AAAA,EACnB,SAAiBC,GAAOC,GAAK;AAE3B,WAAA,gBAAAC,EAAC,eAAU,KAAAD,GAAW,GAAGE,EAAqBH,GAAOI,EAAO,OAAO,GAAG;AAAA,EAAA;AAGzE,GAGMC,IAAiBN;AAAA,EACtB,SAAwBC,GAAOC,GAAK;AACnC,6BAAQ,aAAU,EAAA,KAAAA,GAAW,GAAGE,EAAqBH,CAAK,GAAG;AAAA,EAAA;AAE/D,GAEaM,IAAU,OAAO,OAAOR,GAAa,EAAE,SAASO,EAAgB,CAAA;"}

package/mtds/dialog/dialog-observer.js

@@ -1,19 +1,19 @@
 import d from "../styles.module.css.js";
-import { IS_BROWSER as m, onLoaded as r, on as u, QUICK_EVENT as f, createOptimizedMutationObserver as p, attr as e } from "../utils.js";
+import { IS_BROWSER as m, onLoaded as r, on as f, QUICK_EVENT as u, createOptimizedMutationObserver as p, attr as e } from "../utils.js";
 const g = d.dialog.split(" ")[0], b = m ? document.getElementsByClassName(
   g
 ) : [], h = () => {
   for (const t of b)
-    t.matches('[open]:not([data-modal="false"]):not(:modal)') ? (e(t, "open", null), t.showModal()) : t.matches(":modal:not([open])") && (e(t, "open", ""), t.close());
+    t.isConnected && t.showModal && t.close && (t.matches('[open]:not([data-modal="false"]):not(:modal)') ? (e(t, "open", null), t.showModal()) : t.matches(":modal:not([open])") && (e(t, "open", ""), t.close()));
 }, E = ({ clientX: t, clientY: n, target: o }) => {
   var s;
   if (o instanceof HTMLDialogElement && e(o, "data-closedby") === "any") {
-    const { top: a, right: i, bottom: c, left: l } = o.getBoundingClientRect();
-    a <= n && n <= c && l <= t && t <= i || o.close();
+    const { top: i, right: a, bottom: c, left: l } = o.getBoundingClientRect();
+    i <= n && n <= c && l <= t && t <= a || o.close();
   } else o instanceof Element && o.closest('button[data-command="close"]') && ((s = o == null ? void 0 : o.closest("dialog")) == null || s.close());
 };
 r(() => {
-  u(document, "click", E, f), p(h).observe(
+  f(document, "click", E, u), p(h).observe(
     document.documentElement,
     {
       attributeFilter: ["open"],

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-observer.js","sources":["../../designsystem/dialog/dialog-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tIS_BROWSER,\n\tQUICK_EVENT,\n\tattr,\n\tcreateOptimizedMutationObserver,\n\ton,\n\tonLoaded,\n} from \"../utils\";\n\nconst CSS_DIALOG = styles.dialog.split(\" \")[0];\nconst DIALOGS = IS_BROWSER\n\t? (document.getElementsByClassName(\n\t\t\tCSS_DIALOG,\n\t\t) as HTMLCollectionOf<HTMLDialogElement>)\n\t: [];\n\nconst handleModal = () => {\n\tfor (const dialog of DIALOGS) {\n\t\tif (dialog.matches('[open]:not([data-modal=\"false\"]):not(:modal)')) {\n\t\t\tattr(dialog, \"open\", null); // Using attribute instead of .close to avoid `close` event\n\t\t\tdialog.showModal();\n\t\t} else if (dialog.matches(\":modal:not([open])\")) {\n\t\t\tattr(dialog, \"open\", \"\"); // Set as open\n\t\t\tdialog.close(); // So we correclty can call .close, removing <dialog> from #top-layer\n\t\t}\n\t}\n};\n\nconst handleClick = ({ clientX: x, clientY: y, target: el }: MouseEvent) => {\n\tif (el instanceof HTMLDialogElement && attr(el, \"data-closedby\") === \"any\") {\n\t\tconst { top, right, bottom, left } = el.getBoundingClientRect();\n\t\tconst isInside = top <= y && y <= bottom && left <= x && x <= right;\n\n\t\tif (!isInside) el.close();\n\t} else if (\n\t\tel instanceof Element &&\n\t\tel.closest('button[data-command=\"close\"]')\n\t) {\n\t\tel?.closest(\"dialog\")?.close();\n\t}\n};\n\nonLoaded(() => {\n\ton(document, \"click\", handleClick as EventListener, QUICK_EVENT);\n\tcreateOptimizedMutationObserver(handleModal).observe(\n\t\tdocument.documentElement,\n\t\t{\n\t\t\tattributeFilter: [\"open\"],\n\t\t\tattributes: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t},\n\t);\n});\n"],"names":["CSS_DIALOG","styles","DIALOGS","IS_BROWSER","handleModal","dialog","attr","handleClick","x","y","el","top","right","bottom","left","_a","onLoaded","on","QUICK_EVENT","createOptimizedMutationObserver"],"mappings":";;AAUA,MAAMA,IAAaC,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCC,IAAUC,IACZ,SAAS;AAAA,EACVH;AACD,IACC,CAAC,GAEEI,IAAc,MAAM;AACzB,aAAWC,KAAUH;AAChB,IAAAG,EAAO,QAAQ,8CAA8C,KAC3DC,EAAAD,GAAQ,QAAQ,IAAI,GACzBA,EAAO,UAAU,KACPA,EAAO,QAAQ,oBAAoB,MACxCC,EAAAD,GAAQ,QAAQ,EAAE,GACvBA,EAAO,MAAM;AAGhB,GAEME,IAAc,CAAC,EAAE,SAASC,GAAG,SAASC,GAAG,QAAQC,QAAqB;;AAC3E,MAAIA,aAAc,qBAAqBJ,EAAKI,GAAI,eAAe,MAAM,OAAO;AAC3E,UAAM,EAAE,KAAAC,GAAK,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,EAAK,IAAIJ,EAAG,sBAAsB;AAG1D,IAFaC,KAAOF,KAAKA,KAAKI,KAAUC,KAAQN,KAAKA,KAAKI,KAE/CF,EAAG,MAAM;AAAA,EAAA,OAExBA,aAAc,WACdA,EAAG,QAAQ,8BAA8B,OAErCK,IAAAL,KAAA,gBAAAA,EAAA,QAAQ,cAAR,QAAAK,EAAmB;AAEzB;AAEAC,EAAS,MAAM;AACX,EAAAC,EAAA,UAAU,SAASV,GAA8BW,CAAW,GAC/DC,EAAgCf,CAAW,EAAE;AAAA,IAC5C,SAAS;AAAA,IACT;AAAA,MACC,iBAAiB,CAAC,MAAM;AAAA,MACxB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEX;AACD,CAAC;"}
+{"version":3,"file":"dialog-observer.js","sources":["../../designsystem/dialog/dialog-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tIS_BROWSER,\n\tQUICK_EVENT,\n\tattr,\n\tcreateOptimizedMutationObserver,\n\ton,\n\tonLoaded,\n} from \"../utils\";\n\nconst CSS_DIALOG = styles.dialog.split(\" \")[0];\nconst DIALOGS = IS_BROWSER\n\t? (document.getElementsByClassName(\n\t\t\tCSS_DIALOG,\n\t\t) as HTMLCollectionOf<HTMLDialogElement>)\n\t: [];\n\nconst handleModal = () => {\n\tfor (const dialog of DIALOGS)\n\t\tif (dialog.isConnected && dialog.showModal && dialog.close) {\n\t\t\tif (dialog.matches('[open]:not([data-modal=\"false\"]):not(:modal)')) {\n\t\t\t\tattr(dialog, \"open\", null); // Using attribute instead of .close to avoid `close` event\n\t\t\t\tdialog.showModal();\n\t\t\t} else if (dialog.matches(\":modal:not([open])\")) {\n\t\t\t\tattr(dialog, \"open\", \"\"); // Set as open\n\t\t\t\tdialog.close(); // So we correclty can call .close, removing <dialog> from #top-layer\n\t\t\t}\n\t\t}\n};\n\nconst handleClick = ({ clientX: x, clientY: y, target: el }: MouseEvent) => {\n\tif (el instanceof HTMLDialogElement && attr(el, \"data-closedby\") === \"any\") {\n\t\tconst { top, right, bottom, left } = el.getBoundingClientRect();\n\t\tconst isInside = top <= y && y <= bottom && left <= x && x <= right;\n\n\t\tif (!isInside) el.close();\n\t} else if (\n\t\tel instanceof Element &&\n\t\tel.closest('button[data-command=\"close\"]')\n\t) {\n\t\tel?.closest(\"dialog\")?.close();\n\t}\n};\n\nonLoaded(() => {\n\ton(document, \"click\", handleClick as EventListener, QUICK_EVENT);\n\tcreateOptimizedMutationObserver(handleModal).observe(\n\t\tdocument.documentElement,\n\t\t{\n\t\t\tattributeFilter: [\"open\"],\n\t\t\tattributes: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t},\n\t);\n});\n"],"names":["CSS_DIALOG","styles","DIALOGS","IS_BROWSER","handleModal","dialog","attr","handleClick","x","y","el","top","right","bottom","left","_a","onLoaded","on","QUICK_EVENT","createOptimizedMutationObserver"],"mappings":";;AAUA,MAAMA,IAAaC,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCC,IAAUC,IACZ,SAAS;AAAA,EACVH;AACD,IACC,CAAC,GAEEI,IAAc,MAAM;AACzB,aAAWC,KAAUH;AACpB,IAAIG,EAAO,eAAeA,EAAO,aAAaA,EAAO,UAChDA,EAAO,QAAQ,8CAA8C,KAC3DC,EAAAD,GAAQ,QAAQ,IAAI,GACzBA,EAAO,UAAU,KACPA,EAAO,QAAQ,oBAAoB,MACxCC,EAAAD,GAAQ,QAAQ,EAAE,GACvBA,EAAO,MAAM;AAGjB,GAEME,IAAc,CAAC,EAAE,SAASC,GAAG,SAASC,GAAG,QAAQC,QAAqB;;AAC3E,MAAIA,aAAc,qBAAqBJ,EAAKI,GAAI,eAAe,MAAM,OAAO;AAC3E,UAAM,EAAE,KAAAC,GAAK,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,EAAK,IAAIJ,EAAG,sBAAsB;AAG1D,IAFaC,KAAOF,KAAKA,KAAKI,KAAUC,KAAQN,KAAKA,KAAKI,KAE/CF,EAAG,MAAM;AAAA,EAAA,OAExBA,aAAc,WACdA,EAAG,QAAQ,8BAA8B,OAErCK,IAAAL,KAAA,gBAAAA,EAAA,QAAQ,cAAR,QAAAK,EAAmB;AAEzB;AAEAC,EAAS,MAAM;AACX,EAAAC,EAAA,UAAU,SAASV,GAA8BW,CAAW,GAC/DC,EAAgCf,CAAW,EAAE;AAAA,IAC5C,SAAS;AAAA,IACT;AAAA,MACC,iBAAiB,CAAC,MAAM;AAAA,MACxB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEX;AACD,CAAC;"}

package/mtds/divider/divider.d.ts

@@ -1,6 +1,6 @@
 export type DividerProps = React.ComponentPropsWithoutRef<"hr"> & {
-    "data-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 | "none" | "sm" | "md" | "lg" | "xl";
+    "data-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 | "none" | "xs" | "sm" | "md" | "lg" | "xl";
 };
 export declare const Divider: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
-    "data-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 | "none" | "sm" | "md" | "lg" | "xl";
+    "data-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 | "none" | "xs" | "sm" | "md" | "lg" | "xl";
 } & React.RefAttributes<HTMLHRElement>>;

package/mtds/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../designsystem/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type DividerProps = React.ComponentPropsWithoutRef<\"hr\"> & {\n\t\"data-gap\"?:\n\t\t| \"0\"\n\t\t| \"1\"\n\t\t| \"2\"\n\t\t| \"3\"\n\t\t| \"4\"\n\t\t| \"5\"\n\t\t| \"6\"\n\t\t| \"7\"\n\t\t| \"8\"\n\t\t| \"9\"\n\t\t| \"10\"\n\t\t| \"11\"\n\t\t| \"12\"\n\t\t| \"13\"\n\t\t| \"14\"\n\t\t| \"15\"\n\t\t| \"18\"\n\t\t| \"22\"\n\t\t| \"26\"\n\t\t| \"30\"\n\t\t| 0\n\t\t| 1\n\t\t| 2\n\t\t| 3\n\t\t| 4\n\t\t| 5\n\t\t| 6\n\t\t| 7\n\t\t| 8\n\t\t| 9\n\t\t| 10\n\t\t| 11\n\t\t| 12\n\t\t| 13\n\t\t| 14\n\t\t| 15\n\t\t| 18\n\t\t| 22\n\t\t| 26\n\t\t| 30\n\t\t// Backwards compatibility:\n\t\t| \"none\"\n\t\t| \"sm\"\n\t\t| \"md\"\n\t\t| \"lg\"\n\t\t| \"xl\";\n};\n\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(function Divider(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn (\n\t\t// biome-ignore lint/a11y/noAriaHiddenOnFocusable: This is a decorative element\n\t\t<hr\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={clsx(styles.divider, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n"],"names":["Divider","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAsDa,MAAAA,IAAUC,EAAwC,SAC9D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACD;AAAA;AAAA,IAEC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,EAAKC,EAAO,SAASL,CAAS;AAAA,QACzC,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP,CAAC;"}
+{"version":3,"file":"divider.js","sources":["../../designsystem/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type DividerProps = React.ComponentPropsWithoutRef<\"hr\"> & {\n\t\"data-gap\"?:\n\t\t| \"0\"\n\t\t| \"1\"\n\t\t| \"2\"\n\t\t| \"3\"\n\t\t| \"4\"\n\t\t| \"5\"\n\t\t| \"6\"\n\t\t| \"7\"\n\t\t| \"8\"\n\t\t| \"9\"\n\t\t| \"10\"\n\t\t| \"11\"\n\t\t| \"12\"\n\t\t| \"13\"\n\t\t| \"14\"\n\t\t| \"15\"\n\t\t| \"18\"\n\t\t| \"22\"\n\t\t| \"26\"\n\t\t| \"30\"\n\t\t| 0\n\t\t| 1\n\t\t| 2\n\t\t| 3\n\t\t| 4\n\t\t| 5\n\t\t| 6\n\t\t| 7\n\t\t| 8\n\t\t| 9\n\t\t| 10\n\t\t| 11\n\t\t| 12\n\t\t| 13\n\t\t| 14\n\t\t| 15\n\t\t| 18\n\t\t| 22\n\t\t| 26\n\t\t| 30\n\t\t// Backwards compatibility:\n\t\t| \"none\"\n\t\t| \"xs\"\n\t\t| \"sm\"\n\t\t| \"md\"\n\t\t| \"lg\"\n\t\t| \"xl\";\n};\n\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(function Divider(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn (\n\t\t// biome-ignore lint/a11y/noAriaHiddenOnFocusable: This is a decorative element\n\t\t<hr\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={clsx(styles.divider, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n"],"names":["Divider","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAuDa,MAAAA,IAAUC,EAAwC,SAC9D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACD;AAAA;AAAA,IAEC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,EAAKC,EAAO,SAASL,CAAS;AAAA,QACzC,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP,CAAC;"}

package/mtds/field/field-observer.js

@@ -1,18 +1,19 @@
 import { UHTMLDataListElement as L } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
 import u from "../styles.module.css.js";
-import { onLoaded as I, onMutation as T, on as f, QUICK_EVENT as C, isInputLike as m, attr as n, useId as d } from "../utils.js";
+import { onLoaded as I, onMutation as T, on as f, QUICK_EVENT as C, isInputLike as m, attr as s, useId as d } from "../utils.js";
 const g = u.field.split(" ")[0], P = "--mtds-text-count-over", b = "--mtds-text-count-under", p = u.validation.split(" "), x = p[0];
 function _(t) {
-  for (const e of t) {
-    const l = [], s = [];
-    let o = null, i = null, r = !0;
-    for (const a of e.getElementsByTagName("*"))
-      a instanceof HTMLLabelElement ? l.push(a) : a instanceof L ? i = a : m(a) ? o = a : a.classList.contains(x) ? (r = n(a, "data-color") === "success" || !a.clientWidth || !a.clientHeight, s.unshift(d(a))) : a instanceof HTMLParagraphElement && s.push(d(a));
-    if (o) {
-      for (const a of l) a.htmlFor = d(o);
-      D(o, i), v(o), h(o), n(o, "aria-describedby", s.join(" ")), n(o, "aria-invalid", `${!r}`);
+  for (const e of t)
+    if (e.isConnected) {
+      const l = [], a = [];
+      let n = null, i = null, r = !0;
+      for (const o of e.getElementsByTagName("*"))
+        o instanceof HTMLLabelElement ? l.push(o) : o instanceof L ? i = o : m(o) ? n = o : o.classList.contains(x) ? (r = s(o, "data-color") === "success" || !o.clientWidth || !o.clientHeight, a.unshift(d(o))) : o instanceof HTMLParagraphElement && a.push(d(o));
+      if (n) {
+        for (const o of l) o.htmlFor = d(n);
+        D(n, i), v(n), h(n), s(n, "aria-describedby", a.join(" ") || null), s(n, "aria-invalid", `${!r}`);
+      }
     }
-  }
 }
 function h(t) {
   t instanceof HTMLTextAreaElement && (t.style.setProperty("--mtds-textarea-height", "auto"), t.style.setProperty(
@@ -21,18 +22,18 @@ function h(t) {
   ));
 }
 function D(t, e) {
-  if (n(t, "list", e ? d(e) : null), !e) return;
-  t.hasAttribute("placeholder") || n(t, "placeholder", "");
-  const l = window.getComputedStyle(e), s = t.closest("u-tags"), o = (i) => l.getPropertyValue(`--mtds-text-${i}`);
-  n(e, "data-sr-plural", o("datalist-plural")), n(e, "data-sr-singular", o("datalist-singular")), s && (n(s, "data-sr-added", o("tags-added")), n(s, "data-sr-empty", o("tags-empty")), n(s, "data-sr-found", o("tags-found")), n(s, "data-sr-of", o("tags-of")), n(s, "data-sr-remove", o("tags-remove")), n(s, "data-sr-removed", o("tags-removed")));
+  if (s(t, "list", e ? d(e) : null), !e) return;
+  t.hasAttribute("placeholder") || s(t, "placeholder", "");
+  const l = window.getComputedStyle(e), a = t.closest("u-tags"), n = (i) => l.getPropertyValue(`--mtds-text-${i}`);
+  s(e, "data-sr-plural", n("datalist-plural")), s(e, "data-sr-singular", n("datalist-singular")), a && (s(a, "data-sr-added", n("tags-added")), s(a, "data-sr-empty", n("tags-empty")), s(a, "data-sr-found", n("tags-found")), s(a, "data-sr-of", n("tags-of")), s(a, "data-sr-remove", n("tags-remove")), s(a, "data-sr-removed", n("tags-removed")));
 }
 function v(t) {
-  var s, o;
-  const e = t == null ? void 0 : t.nextElementSibling, l = e && n(e, "data-count");
+  var a, n;
+  const e = t == null ? void 0 : t.nextElementSibling, l = e && s(e, "data-count");
   if (e && l) {
-    const i = Number(l) - t.value.length, r = i < 0, a = n(e, "aria-live") === "polite", c = window.getComputedStyle(e || t), y = ((s = c.getPropertyValue(P)) == null ? void 0 : s.slice(1, -1)) || "", S = ((o = c.getPropertyValue(b)) == null ? void 0 : o.slice(1, -1)) || "";
-    if (a !== r) {
-      n(e, "aria-live", r ? "polite" : "off");
+    const i = Number(l) - t.value.length, r = i < 0, o = s(e, "aria-live") === "polite", c = window.getComputedStyle(e || t), y = ((a = c.getPropertyValue(P)) == null ? void 0 : a.slice(1, -1)) || "", S = ((n = c.getPropertyValue(b)) == null ? void 0 : n.slice(1, -1)) || "";
+    if (o !== r) {
+      s(e, "aria-live", r ? "polite" : "off");
       for (const E of p) e.classList.toggle(E, r);
     }
     e.textContent = (r ? y : S).replace(

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

@@ -1 +1 @@
-{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tQUICK_EVENT,\n\tattr,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_PROPERTY_OVER = \"--mtds-text-count-over\";\nconst CSS_PROPERTY_UNDER = \"--mtds-text-count-under\";\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>) {\n\tfor (const field of fields) {\n\t\tconst labels: HTMLLabelElement[] = [];\n\t\tconst descs: string[] = [];\n\t\tlet input: HTMLInputElement | null = null;\n\t\tlet datalist: UHTMLDataListElement | null = null;\n\t\tlet valid = true;\n\n\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\telse if (el instanceof UHTMLDataListElement) datalist = el;\n\t\t\telse if (isInputLike(el)) input = el;\n\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t// Must be before instanceof HTMLParagraphElement since validation can also be a <p>\n\t\t\t\tvalid =\n\t\t\t\t\tattr(el, \"data-color\") === \"success\" ||\n\t\t\t\t\t!el.clientWidth ||\n\t\t\t\t\t!el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\tdescs.unshift(useId(el));\n\t\t\t} else if (el instanceof HTMLParagraphElement) descs.push(useId(el));\n\t\t}\n\n\t\tif (input) {\n\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\trenderDatalist(input, datalist);\n\t\t\trenderCounter(input);\n\t\t\trenderTextareaSize(input);\n\t\t\tattr(input, \"aria-describedby\", descs.join(\" \"));\n\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t}\n\t}\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\nfunction renderDatalist(\n\tinput: HTMLInputElement,\n\tlist?: UHTMLDataListElement | null,\n) {\n\tattr(input, \"list\", list ? useId(list) : null);\n\n\tif (!list) return;\n\tif (!input.hasAttribute(\"placeholder\")) attr(input, \"placeholder\", \"\"); // Needed to render dropdown chevron when <datalist> is present\n\n\t// Setup translations from CSS custom properties\n\tconst style = window.getComputedStyle(list);\n\tconst tags = input.closest(\"u-tags\");\n\tconst i11n = (key: string) => style.getPropertyValue(`--mtds-text-${key}`);\n\n\tattr(list, \"data-sr-plural\", i11n(\"datalist-plural\"));\n\tattr(list, \"data-sr-singular\", i11n(\"datalist-singular\"));\n\n\tif (tags) {\n\t\tattr(tags, \"data-sr-added\", i11n(\"tags-added\"));\n\t\tattr(tags, \"data-sr-empty\", i11n(\"tags-empty\"));\n\t\tattr(tags, \"data-sr-found\", i11n(\"tags-found\"));\n\t\tattr(tags, \"data-sr-of\", i11n(\"tags-of\"));\n\t\tattr(tags, \"data-sr-remove\", i11n(\"tags-remove\"));\n\t\tattr(tags, \"data-sr-removed\", i11n(\"tags-removed\"));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = style.getPropertyValue(CSS_PROPERTY_OVER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\t\tconst under =\n\t\t\tstyle.getPropertyValue(CSS_PROPERTY_UNDER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\n\t\t// const input = event.target;\n\t\t// const list = input.list;\n\t\t// if (list) {\n\t\t//   console.log('etterpå');\n\t\t//   if (isDatalistClick(event)) return; // User clicked option element\n\t\t//   if (attr(list, 'data-filter') === 'false') syncDatalistState(input); // Allow custom filtering\n\t\t// }\n\t}\n}\n\n// Prevent browsers from showing default validation bubbles\nfunction handleInvalid(event: Event) {\n\tif ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n\t\tevent.preventDefault();\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid\", handleInvalid, true); // Use capture as invalid does noe buttle\n});\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","handleMutation","fields","field","labels","descs","input","datalist","valid","el","UHTMLDataListElement","isInputLike","attr","useId","label","renderDatalist","renderCounter","renderTextareaSize","textarea","list","style","tags","i11n","key","limit","remainder","nextInvalid","prevInvalid","over","_a","under","_b","css","handleInput","target","handleInvalid","event","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}
+{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tQUICK_EVENT,\n\tattr,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_PROPERTY_OVER = \"--mtds-text-count-over\";\nconst CSS_PROPERTY_UNDER = \"--mtds-text-count-under\";\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>) {\n\tfor (const field of fields)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descs: string[] = [];\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet datalist: UHTMLDataListElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLDataListElement) datalist = el;\n\t\t\t\telse if (isInputLike(el)) input = el;\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\t// Must be before instanceof HTMLParagraphElement since validation can also be a <p>\n\t\t\t\t\tvalid =\n\t\t\t\t\t\tattr(el, \"data-color\") === \"success\" ||\n\t\t\t\t\t\t!el.clientWidth ||\n\t\t\t\t\t\t!el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tdescs.unshift(useId(el));\n\t\t\t\t} else if (el instanceof HTMLParagraphElement) descs.push(useId(el));\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\trenderDatalist(input, datalist);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descs.join(\" \") || null); // Remove if empty\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\nfunction renderDatalist(\n\tinput: HTMLInputElement,\n\tlist?: UHTMLDataListElement | null,\n) {\n\tattr(input, \"list\", list ? useId(list) : null);\n\n\tif (!list) return;\n\tif (!input.hasAttribute(\"placeholder\")) attr(input, \"placeholder\", \"\"); // Needed to render dropdown chevron when <datalist> is present\n\n\t// Setup translations from CSS custom properties\n\tconst style = window.getComputedStyle(list);\n\tconst tags = input.closest(\"u-tags\");\n\tconst i11n = (key: string) => style.getPropertyValue(`--mtds-text-${key}`);\n\n\tattr(list, \"data-sr-plural\", i11n(\"datalist-plural\"));\n\tattr(list, \"data-sr-singular\", i11n(\"datalist-singular\"));\n\n\tif (tags) {\n\t\tattr(tags, \"data-sr-added\", i11n(\"tags-added\"));\n\t\tattr(tags, \"data-sr-empty\", i11n(\"tags-empty\"));\n\t\tattr(tags, \"data-sr-found\", i11n(\"tags-found\"));\n\t\tattr(tags, \"data-sr-of\", i11n(\"tags-of\"));\n\t\tattr(tags, \"data-sr-remove\", i11n(\"tags-remove\"));\n\t\tattr(tags, \"data-sr-removed\", i11n(\"tags-removed\"));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = style.getPropertyValue(CSS_PROPERTY_OVER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\t\tconst under =\n\t\t\tstyle.getPropertyValue(CSS_PROPERTY_UNDER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\n\t\t// const input = event.target;\n\t\t// const list = input.list;\n\t\t// if (list) {\n\t\t//   console.log('etterpå');\n\t\t//   if (isDatalistClick(event)) return; // User clicked option element\n\t\t//   if (attr(list, 'data-filter') === 'false') syncDatalistState(input); // Allow custom filtering\n\t\t// }\n\t}\n}\n\n// Prevent browsers from showing default validation bubbles\nfunction handleInvalid(event: Event) {\n\tif ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n\t\tevent.preventDefault();\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid\", handleInvalid, true); // Use capture as invalid does noe buttle\n});\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","handleMutation","fields","field","labels","descs","input","datalist","valid","el","UHTMLDataListElement","isInputLike","attr","useId","label","renderDatalist","renderCounter","renderTextareaSize","textarea","list","style","tags","i11n","key","limit","remainder","nextInvalid","prevInvalid","over","_a","under","_b","css","handleInput","target","handleInvalid","event","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

package/mtds/field/field.d.ts

@@ -1,9 +1,7 @@
 import { ReactUtags, UHTMLTagsElement } from '@u-elements/u-tags';
 import { JSX } from 'react';
-import { InputProps } from '../input/input';
 import { PolymorphicComponentPropWithRef } from '../react-types';
-type FieldBaseProps = InputProps & {
-    className?: InputProps["className"];
+type FieldBaseProps = {
     count?: number;
     description?: React.ReactNode;
     error?: React.ReactNode;
@@ -15,7 +13,6 @@ type FieldBaseProps = InputProps & {
         value: string;
     }>;
     prefix?: string;
-    style?: InputProps["style"];
     suffix?: string;
     validation?: React.ReactNode;
 };