@mattilsynet/design 1.1.2 → 1.1.4

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-toggle.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,12 @@
+typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
+  const e = "--mtds-app-expanded", t = new CSSStyleSheet();
+  document.adoptedStyleSheets.push(t), window.mtdsAppToggle = (l = !0) => {
+    var d, n;
+    try {
+      const o = !((d = window.localStorage.getItem(e)) != null && d.includes("false")), S = l ? !o : o;
+      (n = t.replaceSync) == null || n.call(t, `:root { ${e}: var(${e}--${S})}`), window.localStorage.setItem(e, S);
+    } catch {
+    }
+  }, window.mtdsAppToggle(!1);
+})();
+//# 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"],"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\ttry {\n\t\t\t\tconst prev = !window.localStorage.getItem(key)?.includes(\"false\");\n\t\t\t\tconst next = toggle ? !prev : prev;\n\n\t\t\t\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n\t\t\t\twindow.localStorage.setItem(key, next);\n\t\t\t} catch (err) {} // LocalStorage is full or replaceSync is not supported\n\t\t};\n\t\twindow.mtdsAppToggle(false); // Set and store initial state\n\t})();\n"],"names":["key","sheet","toggle","_a","_b","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,GAAAC;AAWG,QAAI;AACH,YAAMC,IAAO,GAACF,IAAA,OAAO,aAAa,QAAQH,CAAG,MAA/B,QAAAG,EAAkC,SAAS,WACnDG,IAAOJ,IAAS,CAACG,IAAOA;AAE9B,OAAAD,IAAAH,EAAM,gBAAN,QAAAG,EAAA,KAAAH,GAAoB,WAAWD,CAAG,SAASA,CAAG,KAAKM,CAAI,OACvD,OAAO,aAAa,QAAQN,GAAKM,CAAI;AAAA,IACzC,QAAiB;AAAA,IAAE;AAAA,EAChB,GACD,OAAO,cAAc,EAAK;AAC5B,GAAK;"}

package/mtds/app/app-toggle2.js

@@ -0,0 +1,26 @@
+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) => {
+			try {
+				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);
+			} catch (err) {} // LocalStorage is full or replaceSync is not supported
+		};
+		window.mtdsAppToggle(false); // Set and store initial state
+	})();
+`;
+export {
+  t as default
+};
+//# 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?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\\ttry {\\n\\t\\t\\t\\tconst prev = !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\t\\t\\t\\tconst next = toggle ? !prev : prev;\\n\\n\\t\\t\\t\\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t\\t} catch (err) {} // LocalStorage is full or replaceSync is not supported\\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;AAAA;AAAA;"}

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-toggle2.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

@@ -5,8 +5,8 @@ type CardBaseProps<Href> = {
 };
 export type CardProps<Href, As extends React.ElementType = Href extends string ? "a" : "div"> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;
 type CardComponent = <Href, As extends React.ElementType = Href extends string ? "a" : "div">(props: CardProps<Href, As>) => JSX.Element;
+export declare const Card: CardComponent;
 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 declare const Card: CardComponent;
 export {};

package/mtds/card/card.js

@@ -2,14 +2,14 @@ import { jsx as c } from "react/jsx-runtime";
 import { clsx as m } from "../external/clsx/dist/clsx.js";
 import { forwardRef as n } from "react";
 import f from "../styles.module.css.js";
-const i = n(function({ as: o, className: t, ...r }, a) {
+const g = 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 {
-  C as Card,
+  g 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\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;"}
+{"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\nexport const Card: 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"],"names":["Card","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group"],"mappings":";;;;AAwBa,MAAAA,IAAsBC,EAAiB,SAGlD,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;"}

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,17 +1,17 @@
 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 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];
+import { onLoaded as I, onMutation as T, on as f, QUICK_EVENT as C, isInputLike as m, attr as a, useId as c } from "../utils.js";
+const g = u.field.split(" ")[0], b = "--mtds-text-count-over", P = "--mtds-text-count-under", p = u.validation.split(" "), x = p[0];
 function _(t) {
   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}`);
+      const i = [], n = [];
+      let o = null, l = null, r = !0;
+      for (const s of e.getElementsByTagName("*"))
+        s instanceof HTMLLabelElement ? i.push(s) : s instanceof L ? o = s : m(s) ? l = s : s.hasAttribute("data-description") ? n.push(s) : s.classList.contains(x) ? (r = a(s, "data-color") === "success" || !s.clientWidth || !s.clientHeight, n.unshift(s)) : s instanceof HTMLParagraphElement && (n.some((d) => d.contains(s)) || n.push(s));
+      if (l) {
+        for (const s of i) s.htmlFor = c(l);
+        A(l, o), v(l), h(l), a(l, "aria-describedby", n.map(c).join(" ") || null), a(l, "aria-invalid", `${!r}`);
       }
     }
 }
@@ -21,35 +21,35 @@ function h(t) {
     `${t.scrollHeight}px`
   ));
 }
-function D(t, e) {
-  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 A(t, e) {
+  if (a(t, "list", e ? c(e) : null), !e) return;
+  t.hasAttribute("placeholder") || a(t, "placeholder", "");
+  const i = window.getComputedStyle(e), n = t.closest("u-tags"), o = (l) => i.getPropertyValue(`--mtds-text-${l}`);
+  a(e, "data-sr-plural", o("datalist-plural")), a(e, "data-sr-singular", o("datalist-singular")), n && (a(n, "data-sr-added", o("tags-added")), a(n, "data-sr-empty", o("tags-empty")), a(n, "data-sr-found", o("tags-found")), a(n, "data-sr-of", o("tags-of")), a(n, "data-sr-remove", o("tags-remove")), a(n, "data-sr-removed", o("tags-removed")));
 }
 function v(t) {
-  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, 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");
+  var n, o;
+  const e = t == null ? void 0 : t.nextElementSibling, i = e && a(e, "data-count");
+  if (e && i) {
+    const l = Number(i) - t.value.length, r = l < 0, s = a(e, "aria-live") === "polite", d = window.getComputedStyle(e || t), y = ((n = d.getPropertyValue(b)) == null ? void 0 : n.slice(1, -1)) || "", S = ((o = d.getPropertyValue(P)) == null ? void 0 : o.slice(1, -1)) || "";
+    if (s !== r) {
+      a(e, "aria-live", r ? "polite" : "off");
       for (const E of p) e.classList.toggle(E, r);
     }
     e.textContent = (r ? y : S).replace(
       "%d",
-      `${Math.abs(i)}`
+      `${Math.abs(l)}`
     );
   }
 }
-function M({ target: t }) {
+function D({ target: t }) {
   m(t) && (v(t), h(t));
 }
-function V(t) {
-  var e, l;
-  (l = (e = t.target) == null ? void 0 : e.closest) != null && l.call(e, `.${g}`) && t.preventDefault();
+function M(t) {
+  var e, i;
+  (i = (e = t.target) == null ? void 0 : e.closest) != null && i.call(e, `.${g}`) && t.preventDefault();
 }
 I(() => {
-  T(document.documentElement, g, _), f(document, "input", M, C), f(document, "invalid", V, !0);
+  T(document.documentElement, g, _), f(document, "input", D, C), f(document, "invalid", M, !0);
 });
 //# sourceMappingURL=field-observer.js.map

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\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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"}
+{"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: Element[] = [];\n\t\t\tlet datalist: UHTMLDataListElement | null = null;\n\t\t\tlet input: HTMLInputElement | 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.hasAttribute(\"data-description\")) descs.push(el);\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\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(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescs.some((desc) => desc.contains(el)) || descs.push(el); // Only add if not already inside description\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.map(useId).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","datalist","input","valid","el","UHTMLDataListElement","isInputLike","attr","desc","label","useId","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,7 @@ type FieldBaseProps = InputProps & {
         value: string;
     }>;
     prefix?: string;
-    style?: InputProps["style"];
+    readOnly?: boolean;
     suffix?: string;
     validation?: React.ReactNode;
 };

package/mtds/field/field.js

@@ -1,7 +1,8 @@
-import { jsx as i, Fragment as w, jsxs as O } from "react/jsx-runtime";
+import { jsx as i, Fragment as C, jsxs as O } from "react/jsx-runtime";
 import { clsx as j } from "../external/clsx/dist/clsx.js";
-import { forwardRef as n } from "react";
+import { forwardRef as a } from "react";
 import "../alert/alert.js";
+import "../app/app.js";
 import "../avatar/avatar.js";
 import "../badge/badge.js";
 import "../breadcrumbs/breadcrumbs.js";
@@ -14,7 +15,7 @@ import "../divider/divider.js";
 import "../errorsummary/errorsummary.js";
 import "../fieldset/fieldset.js";
 import "../heading/heading.js";
-import { HelpText as E } from "../helptext/helptext.js";
+import { HelpText as W } from "../helptext/helptext.js";
 import "../input/input.js";
 import "../layout/layout.js";
 import "../link/link.js";
@@ -30,66 +31,74 @@ import "../tag/tag.js";
 import "../validation/validation.js";
 import e from "../styles.module.css.js";
 import { toCustomElementProps as f } from "../utils.js";
-const H = n(function({
+const w = a(function({
   "data-size": r,
   as: t,
-  className: l,
+  className: p,
   count: u,
   description: h,
-  error: A,
+  error: T,
   helpText: F,
-  helpTextLabel: D,
+  helpTextLabel: A,
   label: g,
-  options: p,
+  options: l,
   prefix: s,
-  style: y,
+  style: D,
   suffix: d,
-  validation: z,
-  ...m
+  validation: H,
+  ...n
 }, c) {
-  const v = t || "div", C = !!d || !!s, b = z || A, x = {
+  const v = t || "div", z = !!d || !!s, b = H || T, x = {
     "data-size": r,
-    className: j(e.field, l),
-    style: y
+    className: j(e.field, p),
+    style: D
   };
-  return t === "select" && !m.children && Object.assign(m, {
-    children: /* @__PURE__ */ i(w, { children: p == null ? void 0 : p.map((o) => typeof o == "string" ? { label: o, value: o } : o).map(({ label: o, value: N }) => /* @__PURE__ */ i("option", { value: N, children: o }, N)) })
+  return t === "select" && !n.children && Object.assign(n, {
+    children: /* @__PURE__ */ i(C, { children: l == null ? void 0 : l.map((o) => typeof o == "string" ? { label: o, value: o } : o).map(({ label: o, value: N }) => /* @__PURE__ */ i("option", { value: N, children: o }, N)) })
   }), t ? /* @__PURE__ */ O("div", { ...x, children: [
-    !!g && /* @__PURE__ */ i("label", { children: g }),
-    !!F && /* @__PURE__ */ i(E, { "aria-label": D, children: F }),
+    !!g && /* @__PURE__ */ i("label", { suppressHydrationWarning: !0, children: g }),
+    !!F && /* @__PURE__ */ i(W, { "aria-label": A, children: F }),
     !!h && /* @__PURE__ */ i("p", { children: h }),
-    C ? /* @__PURE__ */ O(T, { children: [
+    z ? /* @__PURE__ */ O(y, { children: [
       !!s && /* @__PURE__ */ i("span", { children: s }),
-      /* @__PURE__ */ i(v, { className: e.input, ref: c, ...m }),
+      /* @__PURE__ */ i(v, { className: e.input, ref: c, ...n }),
       !!d && /* @__PURE__ */ i("span", { children: d })
-    ] }) : /* @__PURE__ */ i(v, { className: e.input, ref: c, ...m }),
+    ] }) : /* @__PURE__ */ i(
+      v,
+      {
+        className: e.input,
+        suppressHydrationWarning: !0,
+        ref: c,
+        ...n
+      }
+    ),
     !!b && /* @__PURE__ */ i("div", { className: e.validation, children: b }),
     !!u && /* @__PURE__ */ i("p", { "data-count": u })
-  ] }) : /* @__PURE__ */ i("div", { ref: c, ...x, ...m });
-}), T = n(
-  function({ className: r, ...t }, l) {
-    return /* @__PURE__ */ i("div", { className: j(e.affixes, r), ref: l, ...t });
+  ] }) : /* @__PURE__ */ i("div", { ref: c, ...x, ...n });
+}), y = a(
+  function({ className: r, ...t }, p) {
+    return /* @__PURE__ */ i("div", { className: j(e.affixes, r), ref: p, ...t });
   }
-), P = n(
+), E = a(
   function(r, t) {
     return /* @__PURE__ */ i("u-datalist", { ref: t, ...f(r) });
   }
-), R = n(
+), P = a(
   function(r, t) {
     return /* @__PURE__ */ i("u-option", { ref: t, ...f(r) });
   }
-), k = n(
+), R = a(
   function(r, t) {
     return /* @__PURE__ */ i("u-tags", { ref: t, ...f(r) });
   }
-), ui = Object.assign(H, {
-  Affixes: T,
-  Datalist: P,
-  Tags: k,
-  Option: R
+), hi = Object.assign(w, {
+  Affixes: y,
+  Datalist: E,
+  Tags: R,
+  Option: P
 });
 export {
-  ui as Field,
-  H as FieldComp
+  hi as Field,
+  w as FieldComp
 };
 //# sourceMappingURL=field.js.map

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type { ReactUtags, UHTMLTagsElement } from \"@u-elements/u-tags\";\nimport clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type { InputProps } from \"../input/input\";\nimport { HelpText } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = InputProps & {\n\tclassName?: InputProps[\"className\"];\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: Array<string | { label: string; value: string }>;\n\tprefix?: string;\n\tstyle?: InputProps[\"style\"];\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\toptions,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t)}\n\t\t\t{!!valid && <div className={styles.validation}>{valid}</div>}\n\t\t\t{!!count && <p data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\">;\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(props, ref) {\n\t\treturn <u-datalist ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\n\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldTagsProps = ReactUtags;\n\nconst FieldTags = forwardRef<UHTMLTagsElement, FieldTagsProps>(\n\tfunction FieldTags(props, ref) {\n\t\treturn <u-tags ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tDatalist: FieldDatalist,\n\tTags: FieldTags,\n\tOption: FieldOption,\n});\n"],"names":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldTags","Field"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type { ReactUtags, UHTMLTagsElement } from \"@u-elements/u-tags\";\nimport clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport { HelpText } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: Array<string | { label: string; value: string }>;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\toptions,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!valid && <div className={styles.validation}>{valid}</div>}\n\t\t\t{!!count && <p data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\">;\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(props, ref) {\n\t\treturn <u-datalist ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\n\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldTagsProps = ReactUtags;\n\nconst FieldTags = forwardRef<UHTMLTagsElement, FieldTagsProps>(\n\tfunction FieldTags(props, ref) {\n\t\treturn <u-tags ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tDatalist: FieldDatalist,\n\tTags: FieldTags,\n\tOption: FieldOption,\n});\n"],"names":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldTags","Field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCa,MAAAA,IAA4BC,EAAiB,SAGzD;AAAA,EACC,aAAaC;AAAA,EACb,IAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACJ,GACAC,GACC;AACD,QAAMC,IAAMf,KAAM,OACZgB,IAAU,CAAC,CAACL,KAAU,CAAC,CAACF,GACxBQ,IAAQL,KAAcR,GACtBc,IAAS;AAAA,IACd,aAAanB;AAAA,IACb,WAAWoB,EAAKC,EAAO,OAAOnB,CAAS;AAAA,IACvC,OAAAS;AAAA,EACD;AAGI,SAAAV,MAAO,YAAY,CAACa,EAAK,YAC5B,OAAO,OAAOA,GAAM;AAAA,IACnB,UACC,gBAAAQ,EAAAC,GAAA,EACE,UACEd,KAAA,gBAAAA,EAAA,IAAI,CAAC,MAAO,OAAO,KAAM,WAAW,EAAE,OAAO,GAAG,OAAO,EAAE,IAAI,GAC9D,IAAI,CAAC,EAAE,OAAAD,GAAO,OAAAgB,EAAM,MACnB,gBAAAF,EAAA,UAAA,EAAmB,OAAAE,GAClB,UAAAhB,EADW,GAAAgB,CAEb,GAEH,CAAA;AAAA,EAAA,CAED,GAGKvB,IACN,gBAAAwB,EAAC,OAAK,EAAA,GAAGN,GACP,UAAA;AAAA,IAAA,CAAC,CAACX,KAAS,gBAAAc,EAAC,SAAM,EAAA,0BAAwB,IAAE,UAAMd,GAAA;AAAA,IAClD,CAAC,CAACF,uBAAaoB,GAAS,EAAA,cAAYnB,GAAgB,UAASD,GAAA;AAAA,IAC7D,CAAC,CAACF,KAAe,gBAAAkB,EAAC,OAAG,UAAYlB,GAAA;AAAA,IACjCa,sBACCU,GACC,EAAA,UAAA;AAAA,MAAA,CAAC,CAACjB,KAAW,gBAAAY,EAAA,QAAA,EAAM,UAAOZ,GAAA;AAAA,wBAC1BM,GAAI,EAAA,WAAWK,EAAO,OAAO,KAAAN,GAAW,GAAGD,GAAM;AAAA,MACjD,CAAC,CAACF,KAAU,gBAAAU,EAAC,UAAM,UAAOV,EAAA,CAAA;AAAA,IAAA,EAAA,CAC5B,IAEA,gBAAAU;AAAA,MAACN;AAAA,MAAA;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,0BAAwB;AAAA,QACxB,KAAAN;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IACL;AAAA,IAEA,CAAC,CAACI,KAAS,gBAAAI,EAAC,SAAI,WAAWD,EAAO,YAAa,UAAMH,GAAA;AAAA,IACrD,CAAC,CAACf,KAAU,gBAAAmB,EAAA,KAAA,EAAE,cAAYnB,EAAO,CAAA;AAAA,EAAA,GACnC,IAEC,gBAAAmB,EAAA,OAAA,EAAI,KAAAP,GAAW,GAAGI,GAAS,GAAGL,GAAM;AAEvC,CAAC,GAEKa,IAAe5B;AAAA,EACpB,SAAsB,EAAE,WAAAG,GAAW,GAAGY,EAAA,GAAQC,GAAK;AAEjD,WAAA,gBAAAO,EAAC,OAAI,EAAA,WAAWF,EAAKC,EAAO,SAASnB,CAAS,GAAG,KAAAa,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGxE,GAIMc,IAAgB7B;AAAA,EACrB,SAAuB8B,GAAOd,GAAK;AAClC,6BAAQ,cAAW,EAAA,KAAAA,GAAW,GAAGe,EAAqBD,CAAK,GAAG;AAAA,EAAA;AAEhE,GAIME,IAAchC;AAAA,EACnB,SAAqB8B,GAAOd,GAAK;AAChC,6BAAQ,YAAS,EAAA,KAAAA,GAAW,GAAGe,EAAqBD,CAAK,GAAG;AAAA,EAAA;AAE9D,GAIMG,IAAYjC;AAAA,EACjB,SAAmB8B,GAAOd,GAAK;AAC9B,6BAAQ,UAAO,EAAA,KAAAA,GAAW,GAAGe,EAAqBD,CAAK,GAAG;AAAA,EAAA;AAE5D,GAEaI,KAAQ,OAAO,OAAOnC,GAAW;AAAA,EAC7C,SAAS6B;AAAA,EACT,UAAUC;AAAA,EACV,MAAMI;AAAA,EACN,QAAQD;AACT,CAAC;"}

package/mtds/field/field.stories.d.ts

@@ -159,6 +159,7 @@ export declare const Toggles: Story;
 export declare const WithValidation: Story;
 export declare const WithAffixes: Story;
 export declare const WithCharacterCount: Story;
+export declare const WithCustomDescriptionTag: Story;
 export declare const WithDatalist: Story;
 export declare const WithTags: Story;
 export declare const ReactWithDatalist: Story;