@mattilsynet/design 1.3.5 → 1.3.6

package/mtds/analytics/analytics.d.ts

@@ -2,6 +2,7 @@ type Matomo = (string | number | boolean)[];
 declare global {
     interface Window {
         _paq?: Matomo[];
+        _mtm?: Record<string, string | number>[];
     }
 }
 export type AnalyticsActions = {

package/mtds/analytics/analytics.js

@@ -1,25 +1,25 @@
-import { IS_BROWSER as r } from "../utils.js";
-const a = "mattilsynet.matomo.cloud";
-let s = !0;
+import { IS_BROWSER as l } from "../utils.js";
+const s = "mattilsynet.matomo.cloud";
+let a = !0;
 function d(o, n = {}) {
-  if (r) {
-    if (window._paq || (window._paq = [], window._paq.push(["HeatmapSessionRecording::disable"]), window._paq.push(["enableLinkTracking"]), window._paq.push(["setTrackerUrl", `https://${a}/matomo.php`]), document.querySelector('script[src*="matomo.js"]') || document.documentElement.append(
+  if (l) {
+    if (window._paq || (window._paq = [], window._paq.push(["HeatmapSessionRecording::disable"]), window._paq.push(["enableLinkTracking"]), window._paq.push(["setTrackerUrl", `https://${s}/matomo.php`]), document.querySelector('script[src*="matomo.js"]') || document.head.append(
       Object.assign(document.createElement("script"), {
         async: !0,
-        src: `https://cdn.matomo.cloud/${a}/matomo.js`
+        src: `https://cdn.matomo.cloud/${s}/matomo.js`
       })
     )), o === "init") {
       const { matomoId: e, enabled: t = !0 } = n;
-      s = t, window._paq.push(["setSiteId", e]);
+      a = t, window._paq.push(["setSiteId", e]);
     }
-    if (s === "debug") return console.info(`Analytics: "${o}"`, n);
-    if (!(s === !1 || window.location.hostname === "localhost"))
+    if (a === "debug") return console.info(`Analytics: "${o}"`, n);
+    if (!(a === !1 || window.location.hostname === "localhost"))
       if (o === "pageview") {
         const { url: e, title: t } = n;
         window._paq.push(["setCustomUrl", e || location.href]), window._paq.push(["setDocumentTitle", t || document.title]), window._paq.push(["trackPageView"]);
       } else if (o === "event") {
         const { category: e, action: t, name: i, value: c } = n, p = ["trackEvent", e, t, i, c];
-        window._paq.push(p.filter((l) => l !== void 0));
+        window._paq.push(p.filter((r) => r !== void 0));
       } else if (o === "search") {
         const {
           query: e,

package/mtds/analytics/analytics.js.map

@@ -1 +1 @@
-{"version":3,"file":"analytics.js","sources":["../../designsystem/analytics/analytics.ts"],"sourcesContent":["import { IS_BROWSER } from \"../utils\";\n\nconst MATOMO = \"mattilsynet.matomo.cloud\";\nlet ENABLED: AnalyticsActions[\"init\"][\"enabled\"] = true;\n\ntype Matomo = (string | number | boolean)[];\ndeclare global {\n\tinterface Window {\n\t\t_paq?: Matomo[];\n\t}\n}\n\nexport type AnalyticsActions = {\n\tinit: {\n\t\tmatomoId: number | string;\n\t\tenabled?: boolean | \"debug\";\n\t};\n\tpageview: {\n\t\turl?: string;\n\t\ttitle?: string;\n\t};\n\tevent: {\n\t\tcategory: string;\n\t\taction: string;\n\t\tname?: string;\n\t\tvalue?: number;\n\t};\n\tsearch: {\n\t\tquery: string;\n\t\tcategory?: string;\n\t\tresults?: number;\n\t};\n\tmatomo: Matomo;\n};\n\nexport function analytics<Action extends keyof AnalyticsActions>(\n\taction: Action,\n\targs = {} as AnalyticsActions[Action],\n) {\n\tif (!IS_BROWSER) return;\n\tif (!window._paq) {\n\t\twindow._paq = [];\n\t\twindow._paq.push([\"HeatmapSessionRecording::disable\"]); // Disable heatmaps by default as this require cookies\n\t\twindow._paq.push([\"enableLinkTracking\"]);\n\t\twindow._paq.push([\"setTrackerUrl\", `https://${MATOMO}/matomo.php`]);\n\t\tdocument.querySelector('script[src*=\"matomo.js\"]') ||\n\t\t\tdocument.documentElement.append(\n\t\t\t\tObject.assign(document.createElement(\"script\"), {\n\t\t\t\t\tasync: true,\n\t\t\t\t\tsrc: `https://cdn.matomo.cloud/${MATOMO}/matomo.js`,\n\t\t\t\t}),\n\t\t\t);\n\t}\n\tif (action === \"init\") {\n\t\tconst { matomoId, enabled = true } = args as AnalyticsActions[\"init\"];\n\t\tENABLED = enabled;\n\t\twindow._paq.push([\"setSiteId\", matomoId]);\n\t}\n\n\tif (ENABLED === \"debug\") return console.info(`Analytics: \"${action}\"`, args);\n\tif (ENABLED === false || window.location.hostname === \"localhost\") return;\n\n\tif (action === \"pageview\") {\n\t\tconst { url, title } = args as AnalyticsActions[\"pageview\"];\n\t\twindow._paq.push([\"setCustomUrl\", url || location.href]);\n\t\twindow._paq.push([\"setDocumentTitle\", title || document.title]);\n\t\twindow._paq.push([\"trackPageView\"]);\n\t} else if (action === \"event\") {\n\t\tconst { category, action, name, value } = args as AnalyticsActions[\"event\"];\n\t\tconst event = [\"trackEvent\", category, action, name, value];\n\t\twindow._paq.push(event.filter((v) => v !== undefined));\n\t} else if (action === \"search\") {\n\t\tconst {\n\t\t\tquery,\n\t\t\tcategory = false,\n\t\t\tresults = false,\n\t\t} = args as AnalyticsActions[\"search\"];\n\t\twindow._paq.push([\"trackSiteSearch\", query, category, results]);\n\t} else if (action === \"matomo\") {\n\t\twindow._paq.push(args as AnalyticsActions[\"matomo\"]);\n\t}\n}\n"],"names":["MATOMO","ENABLED","analytics","action","args","IS_BROWSER","matomoId","enabled","url","title","category","name","value","event","v","query","results"],"mappings":";AAEA,MAAMA,IAAS;AACf,IAAIC,IAA+C;AAgC5C,SAASC,EACfC,GACAC,IAAO,IACN;AACD,MAAKC,GAcL;AAAA,QAbK,OAAO,SACX,OAAO,OAAO,CAAC,GACf,OAAO,KAAK,KAAK,CAAC,kCAAkC,CAAC,GACrD,OAAO,KAAK,KAAK,CAAC,oBAAoB,CAAC,GACvC,OAAO,KAAK,KAAK,CAAC,iBAAiB,WAAWL,CAAM,aAAa,CAAC,GAClE,SAAS,cAAc,0BAA0B,KAChD,SAAS,gBAAgB;AAAA,MACxB,OAAO,OAAO,SAAS,cAAc,QAAQ,GAAG;AAAA,QAC/C,OAAO;AAAA,QACP,KAAK,4BAA4BA,CAAM;AAAA,MACvC,CAAA;AAAA,IACF,IAEEG,MAAW,QAAQ;AACtB,YAAM,EAAE,UAAAG,GAAU,SAAAC,IAAU,GAAS,IAAAH;AAC3B,MAAAH,IAAAM,GACV,OAAO,KAAK,KAAK,CAAC,aAAaD,CAAQ,CAAC;AAAA,IAAA;AAGrC,QAAAL,MAAY,QAAgB,QAAA,QAAQ,KAAK,eAAeE,CAAM,KAAKC,CAAI;AAC3E,QAAI,EAAAH,MAAY,MAAS,OAAO,SAAS,aAAa;AAEtD,UAAIE,MAAW,YAAY;AACpB,cAAA,EAAE,KAAAK,GAAK,OAAAC,EAAA,IAAUL;AACvB,eAAO,KAAK,KAAK,CAAC,gBAAgBI,KAAO,SAAS,IAAI,CAAC,GACvD,OAAO,KAAK,KAAK,CAAC,oBAAoBC,KAAS,SAAS,KAAK,CAAC,GAC9D,OAAO,KAAK,KAAK,CAAC,eAAe,CAAC;AAAA,MAAA,WACxBN,MAAW,SAAS;AAC9B,cAAM,EAAE,UAAAO,GAAU,QAAAP,GAAQ,MAAAQ,GAAM,OAAAC,MAAUR,GACpCS,IAAQ,CAAC,cAAcH,GAAUP,GAAQQ,GAAMC,CAAK;AACnD,eAAA,KAAK,KAAKC,EAAM,OAAO,CAACC,MAAMA,MAAM,MAAS,CAAC;AAAA,MAAA,WAC3CX,MAAW,UAAU;AACzB,cAAA;AAAA,UACL,OAAAY;AAAA,UACA,UAAAL,IAAW;AAAA,UACX,SAAAM,IAAU;AAAA,QAAA,IACPZ;AACJ,eAAO,KAAK,KAAK,CAAC,mBAAmBW,GAAOL,GAAUM,CAAO,CAAC;AAAA,MAAA,MAC/D,CAAWb,MAAW,YACd,OAAA,KAAK,KAAKC,CAAkC;AAAA;AAErD;"}
+{"version":3,"file":"analytics.js","sources":["../../designsystem/analytics/analytics.ts"],"sourcesContent":["import { IS_BROWSER } from \"../utils\";\n\nconst MATOMO = \"mattilsynet.matomo.cloud\";\nlet ENABLED: AnalyticsActions[\"init\"][\"enabled\"] = true;\n\ntype Matomo = (string | number | boolean)[];\ndeclare global {\n\tinterface Window {\n\t\t_paq?: Matomo[];\n\t\t_mtm?: Record<string, string | number>[];\n\t}\n}\n\n// window._paq = window._paq || [];\n// window._mtm = window._mtm || [];\n\n// window._paq.push([\"setCustomUrl\", `${document.location.href}&eirik`]);\n// window._paq.push([\"setDocumentTitle\", \"Eirik 3\"]);\n// window._mtm.push({\n// \tevent: \"mtm.Start\",\n// \t\"mtm.startTime\": new Date().getTime(),\n// \tcustomTitle: \"Eirik 1\",\n// \tcustomUrl: `${document.location.href}&eirik`,\n// });\n\n// window._mtm.push({\n// \tevent: \"mtm.PageView\",\n// \tcustomTitle: \"Eirik 2\",\n// \tcustomUrl: `${document.location.href}&eirik`,\n// });\n\n// const containerId = \"A9utKk3O\";\n\n// document.head.append(\n// \tObject.assign(document.createElement(\"script\"), {\n// \t\tsrc: `https://cdn.matomo.cloud/mattilsynet.matomo.cloud/container_${containerId}.js`,\n// \t\tasync: true,\n// \t\tonload: () => console.log(window._paq),\n// \t}),\n// );\n\nexport type AnalyticsActions = {\n\tinit: {\n\t\tmatomoId: number | string;\n\t\tenabled?: boolean | \"debug\";\n\t};\n\tpageview: {\n\t\turl?: string;\n\t\ttitle?: string;\n\t};\n\tevent: {\n\t\tcategory: string;\n\t\taction: string;\n\t\tname?: string;\n\t\tvalue?: number;\n\t};\n\tsearch: {\n\t\tquery: string;\n\t\tcategory?: string;\n\t\tresults?: number;\n\t};\n\tmatomo: Matomo;\n};\n\nexport function analytics<Action extends keyof AnalyticsActions>(\n\taction: Action,\n\targs = {} as AnalyticsActions[Action],\n) {\n\tif (!IS_BROWSER) return;\n\tif (!window._paq) {\n\t\twindow._paq = [];\n\t\twindow._paq.push([\"HeatmapSessionRecording::disable\"]); // Disable heatmaps by default as this require cookies\n\t\twindow._paq.push([\"enableLinkTracking\"]);\n\t\twindow._paq.push([\"setTrackerUrl\", `https://${MATOMO}/matomo.php`]);\n\t\tdocument.querySelector('script[src*=\"matomo.js\"]') ||\n\t\t\tdocument.head.append(\n\t\t\t\tObject.assign(document.createElement(\"script\"), {\n\t\t\t\t\tasync: true,\n\t\t\t\t\tsrc: `https://cdn.matomo.cloud/${MATOMO}/matomo.js`,\n\t\t\t\t}),\n\t\t\t);\n\t}\n\tif (action === \"init\") {\n\t\tconst { matomoId, enabled = true } = args as AnalyticsActions[\"init\"];\n\t\tENABLED = enabled;\n\t\twindow._paq.push([\"setSiteId\", matomoId]);\n\t}\n\n\tif (ENABLED === \"debug\") return console.info(`Analytics: \"${action}\"`, args);\n\tif (ENABLED === false || window.location.hostname === \"localhost\") return;\n\n\tif (action === \"pageview\") {\n\t\tconst { url, title } = args as AnalyticsActions[\"pageview\"];\n\t\twindow._paq.push([\"setCustomUrl\", url || location.href]);\n\t\twindow._paq.push([\"setDocumentTitle\", title || document.title]);\n\t\twindow._paq.push([\"trackPageView\"]);\n\t} else if (action === \"event\") {\n\t\tconst { category, action, name, value } = args as AnalyticsActions[\"event\"];\n\t\tconst event = [\"trackEvent\", category, action, name, value];\n\t\twindow._paq.push(event.filter((v) => v !== undefined));\n\t} else if (action === \"search\") {\n\t\tconst {\n\t\t\tquery,\n\t\t\tcategory = false,\n\t\t\tresults = false,\n\t\t} = args as AnalyticsActions[\"search\"];\n\t\twindow._paq.push([\"trackSiteSearch\", query, category, results]);\n\t} else if (action === \"matomo\") {\n\t\twindow._paq.push(args as AnalyticsActions[\"matomo\"]);\n\t}\n}\n"],"names":["MATOMO","ENABLED","analytics","action","args","IS_BROWSER","matomoId","enabled","url","title","category","name","value","event","v","query","results"],"mappings":";AAEA,MAAMA,IAAS;AACf,IAAIC,IAA+C;AA6D5C,SAASC,EACfC,GACAC,IAAO,IACN;AACD,MAAKC,GAcL;AAAA,QAbK,OAAO,SACX,OAAO,OAAO,CAAC,GACf,OAAO,KAAK,KAAK,CAAC,kCAAkC,CAAC,GACrD,OAAO,KAAK,KAAK,CAAC,oBAAoB,CAAC,GACvC,OAAO,KAAK,KAAK,CAAC,iBAAiB,WAAWL,CAAM,aAAa,CAAC,GAClE,SAAS,cAAc,0BAA0B,KAChD,SAAS,KAAK;AAAA,MACb,OAAO,OAAO,SAAS,cAAc,QAAQ,GAAG;AAAA,QAC/C,OAAO;AAAA,QACP,KAAK,4BAA4BA,CAAM;AAAA,MACvC,CAAA;AAAA,IACF,IAEEG,MAAW,QAAQ;AACtB,YAAM,EAAE,UAAAG,GAAU,SAAAC,IAAU,GAAS,IAAAH;AAC3B,MAAAH,IAAAM,GACV,OAAO,KAAK,KAAK,CAAC,aAAaD,CAAQ,CAAC;AAAA,IAAA;AAGrC,QAAAL,MAAY,QAAgB,QAAA,QAAQ,KAAK,eAAeE,CAAM,KAAKC,CAAI;AAC3E,QAAI,EAAAH,MAAY,MAAS,OAAO,SAAS,aAAa;AAEtD,UAAIE,MAAW,YAAY;AACpB,cAAA,EAAE,KAAAK,GAAK,OAAAC,EAAA,IAAUL;AACvB,eAAO,KAAK,KAAK,CAAC,gBAAgBI,KAAO,SAAS,IAAI,CAAC,GACvD,OAAO,KAAK,KAAK,CAAC,oBAAoBC,KAAS,SAAS,KAAK,CAAC,GAC9D,OAAO,KAAK,KAAK,CAAC,eAAe,CAAC;AAAA,MAAA,WACxBN,MAAW,SAAS;AAC9B,cAAM,EAAE,UAAAO,GAAU,QAAAP,GAAQ,MAAAQ,GAAM,OAAAC,MAAUR,GACpCS,IAAQ,CAAC,cAAcH,GAAUP,GAAQQ,GAAMC,CAAK;AACnD,eAAA,KAAK,KAAKC,EAAM,OAAO,CAACC,MAAMA,MAAM,MAAS,CAAC;AAAA,MAAA,WAC3CX,MAAW,UAAU;AACzB,cAAA;AAAA,UACL,OAAAY;AAAA,UACA,UAAAL,IAAW;AAAA,UACX,SAAAM,IAAU;AAAA,QAAA,IACPZ;AACJ,eAAO,KAAK,KAAK,CAAC,mBAAmBW,GAAOL,GAAUM,CAAO,CAAC;AAAA,MAAA,MAC/D,CAAWb,MAAW,YACd,OAAA,KAAK,KAAKC,CAAkC;AAAA;AAErD;"}

package/mtds/app/app-observer.js

@@ -1,6 +1,6 @@
 import m from "../styles.module.css.js";
 import { onLoaded as C, onMutation as T, on as p, QUICK_EVENT as c, debounce as P } from "../utils.js";
-import "./app-toggle.js";
+import "./app-toggle2.js";
 const f = m.app.split(" ")[0], _ = m.sticky.split(" ")[0], h = '[data-command="toggle-app-expanded"]', g = `.${f} > dialog,.${f} dialog ~ main`, S = (t) => {
   document.startViewTransition ? document.startViewTransition(t) : t();
 }, E = (t) => (

package/mtds/app/app-toggle.js

@@ -1,15 +1,27 @@
-typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
-  const e = "--mtds-app-expanded", t = new CSSStyleSheet(), n = () => {
-    var d;
-    return !((d = window.localStorage.getItem(e)) != null && d.includes("false"));
-  };
-  document.adoptedStyleSheets.push(t), window.mtdsToggleAppExpanded = (d) => {
-    var p;
-    try {
-      const o = d ?? !n();
-      (p = t.replaceSync) == null || p.call(t, `:root { ${e}: var(${e}--${o})}`), window.localStorage.setItem(e, o);
-    } catch {
-    }
-  }, window.mtdsToggleAppExpanded(n());
-})();
+const t = `if (
+	typeof window !== "undefined" &&
+	window.CSSStyleSheet &&
+	document.adoptedStyleSheets
+)
+	(() => {
+		const key = "--mtds-app-expanded";
+		const sheet = new CSSStyleSheet();
+		const prev = () => !window.localStorage.getItem(key)?.includes("false");
+
+		document.adoptedStyleSheets.push(sheet);
+		window.mtdsToggleAppExpanded = (force) => {
+			try {
+				const next = force ?? !prev();
+				sheet.replaceSync?.(\`:root { \${key}: var(\${key}--\${next})}\`);
+				window.localStorage.setItem(key, next);
+			} catch (err) {} // localStorage is full or replaceSync is not supported
+		};
+
+		// Set and store initial state
+		window.mtdsToggleAppExpanded(prev());
+	})();
+`;
+export {
+  t as default
+};
 //# sourceMappingURL=app-toggle.js.map

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

@@ -1 +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\t\tconst prev = () => !window.localStorage.getItem(key)?.includes(\"false\");\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsToggleAppExpanded = (force) => {\n\t\t\ttry {\n\t\t\t\tconst next = force ?? !prev();\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\n\t\t// Set and store initial state\n\t\twindow.mtdsToggleAppExpanded(prev());\n\t})();\n"],"names":["key","sheet","prev","_a","force","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAe,GAC3BC,IAAO,MAAM;AARrB,QAAAC;AAQqB,cAACA,IAAA,OAAO,aAAa,QAAQH,CAAG,MAA/B,QAAAG,EAAkC,SAAS;AAAA;AAE/D,WAAS,mBAAmB,KAAKF,CAAK,GACtC,OAAO,wBAAwB,CAACG,MAAU;AAX5C,QAAAD;AAYG,QAAI;AACH,YAAME,IAAOD,KAAS,CAACF,EAAM;AAC7B,OAAAC,IAAAF,EAAM,gBAAN,QAAAE,EAAA,KAAAF,GAAoB,WAAWD,CAAG,SAASA,CAAG,KAAKK,CAAI,OACvD,OAAO,aAAa,QAAQL,GAAKK,CAAI;AAAA,IACzC,QAAiB;AAAA,IAAE;AAAA,EAChB,GAGD,OAAO,sBAAsBH,GAAM;AACrC,GAAK;"}
+{"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\\t\\tconst prev = () => !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsToggleAppExpanded = (force) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst next = force ?? !prev();\\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\\n\\t\\t// Set and store initial state\\n\\t\\twindow.mtdsToggleAppExpanded(prev());\\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;AAAA;"}

package/mtds/app/app-toggle2.js

@@ -1,27 +1,15 @@
-const t = `if (
-	typeof window !== "undefined" &&
-	window.CSSStyleSheet &&
-	document.adoptedStyleSheets
-)
-	(() => {
-		const key = "--mtds-app-expanded";
-		const sheet = new CSSStyleSheet();
-		const prev = () => !window.localStorage.getItem(key)?.includes("false");
-
-		document.adoptedStyleSheets.push(sheet);
-		window.mtdsToggleAppExpanded = (force) => {
-			try {
-				const next = force ?? !prev();
-				sheet.replaceSync?.(\`:root { \${key}: var(\${key}--\${next})}\`);
-				window.localStorage.setItem(key, next);
-			} catch (err) {} // localStorage is full or replaceSync is not supported
-		};
-
-		// Set and store initial state
-		window.mtdsToggleAppExpanded(prev());
-	})();
-`;
-export {
-  t as default
-};
+typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
+  const e = "--mtds-app-expanded", t = new CSSStyleSheet(), n = () => {
+    var d;
+    return !((d = window.localStorage.getItem(e)) != null && d.includes("false"));
+  };
+  document.adoptedStyleSheets.push(t), window.mtdsToggleAppExpanded = (d) => {
+    var p;
+    try {
+      const o = d ?? !n();
+      (p = t.replaceSync) == null || p.call(t, `:root { ${e}: var(${e}--${o})}`), window.localStorage.setItem(e, o);
+    } catch {
+    }
+  }, window.mtdsToggleAppExpanded(n());
+})();
 //# sourceMappingURL=app-toggle2.js.map

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

@@ -1 +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\\t\\tconst prev = () => !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsToggleAppExpanded = (force) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst next = force ?? !prev();\\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\\n\\t\\t// Set and store initial state\\n\\t\\twindow.mtdsToggleAppExpanded(prev());\\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;AAAA;"}
+{"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\t\tconst prev = () => !window.localStorage.getItem(key)?.includes(\"false\");\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsToggleAppExpanded = (force) => {\n\t\t\ttry {\n\t\t\t\tconst next = force ?? !prev();\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\n\t\t// Set and store initial state\n\t\twindow.mtdsToggleAppExpanded(prev());\n\t})();\n"],"names":["key","sheet","prev","_a","force","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAe,GAC3BC,IAAO,MAAM;AARrB,QAAAC;AAQqB,cAACA,IAAA,OAAO,aAAa,QAAQH,CAAG,MAA/B,QAAAG,EAAkC,SAAS;AAAA;AAE/D,WAAS,mBAAmB,KAAKF,CAAK,GACtC,OAAO,wBAAwB,CAACG,MAAU;AAX5C,QAAAD;AAYG,QAAI;AACH,YAAME,IAAOD,KAAS,CAACF,EAAM;AAC7B,OAAAC,IAAAF,EAAM,gBAAN,QAAAE,EAAA,KAAAF,GAAoB,WAAWD,CAAG,SAASA,CAAG,KAAKK,CAAI,OACvD,OAAO,aAAa,QAAQL,GAAKK,CAAI;AAAA,IACzC,QAAiB;AAAA,IAAE;AAAA,EAChB,GAGD,OAAO,sBAAsBH,GAAM;AACrC,GAAK;"}

package/mtds/app/app.js

@@ -32,7 +32,7 @@ import "../togglegroup/togglegroup.js";
 import "../typography/typography.js";
 import "../validation/validation.js";
 import a from "../styles.module.css.js";
-import d from "./app-toggle2.js";
+import d from "./app-toggle.js";
 const f = p(function({ as: t, className: r, ...m }, n) {
   return /* @__PURE__ */ o(t || "div", { className: e(a.app, r), ref: n, ...m });
 }), u = p(function({ as: t, className: r, ...m }, n) {

package/mtds/field/field-observer.js

@@ -1,70 +1,75 @@
-import { UHTMLComboboxElement as p } from "../external/@u-elements/u-combobox/dist/u-combobox.js";
-import { UHTMLDataListElement as C } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
-import h from "../styles.module.css.js";
-import { onLoaded as I, onMutation as S, on as l, QUICK_EVENT as m, isInputLike as g, attr as i, useId as b, anchorPosition as u } from "../utils.js";
-const v = h.field.split(" ")[0], x = h.validation.split(" "), E = x[0], a = (t, o) => {
+import { UHTMLComboboxElement as g } from "../external/@u-elements/u-combobox/dist/u-combobox.js";
+import { UHTMLDataListElement as S } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
+import v from "../styles.module.css.js";
+import { onLoaded as I, onMutation as M, on as m, QUICK_EVENT as u, isInputLike as x, attr as i, useId as h, anchorPosition as p } from "../utils.js";
+const b = v.field.split(" ")[0], y = v.validation.split(" "), A = y[0], a = (t, o) => {
   var n;
   return ((n = t.getPropertyValue(`--mtds-text-${o}`)) == null ? void 0 : n.slice(1, -1)) || "";
 };
-function M(t) {
-  for (const o of t)
-    if (o.isConnected) {
-      const n = [], s = [];
-      let c = null, r = null, d = !0;
-      for (const e of o.getElementsByTagName("*"))
-        e instanceof HTMLLabelElement ? n.push(e) : e instanceof p ? c = e : g(e) ? r = e : e.hasAttribute("data-description") ? s.push(e) : e.classList.contains(E) ? (d = i(e, "data-color") === "success" || !e.clientWidth || !e.clientHeight, s.unshift(e)) : e instanceof HTMLParagraphElement && (s.some((f) => f.contains(e)) || s.push(e));
-      if (r) {
-        for (const e of n) e.htmlFor = b(r);
-        A(c), L(r), y(r), i(r, "aria-describedby", s.map(b).join(" ") || null), i(r, "aria-invalid", `${!d}`);
+function L(t, o) {
+  for (const n of t)
+    if (n.isConnected) {
+      const s = [], r = [], f = [];
+      let c = null, d = null, l = !0;
+      for (const e of n.getElementsByTagName("*"))
+        e instanceof HTMLLabelElement ? s.push(e) : e instanceof g ? c = e : x(e) ? d = e : e.hasAttribute("data-description") ? r.push(e) : e.classList.contains(A) ? (l = i(e, "data-color") === "success" || !e.clientHeight, f.push(e), r.unshift(e)) : e instanceof HTMLParagraphElement && (r.some((E) => E.contains(e)) || r.push(e));
+      if (d) {
+        for (const e of s) e.htmlFor = h(d);
+        if (o && i(n, "data-validation") === "form") {
+          l = d.matches(":valid");
+          for (const e of f) i(e, "hidden", l ? "" : null);
+        }
+        H(c), C(d), T(d), i(d, "aria-describedby", r.map(h).join(" ") || null), i(d, "aria-invalid", `${!l}`);
       }
     }
 }
-function y(t) {
+function T(t) {
   t instanceof HTMLTextAreaElement && (t.style.setProperty("--mtds-textarea-height", "auto"), t.style.setProperty(
     "--mtds-textarea-height",
     `${t.scrollHeight}px`
   ));
 }
-function A(t) {
+function H(t) {
   var n;
   if (!(t != null && t.list) || (n = t.list) != null && n.hasAttribute("popover")) return;
   const o = window.getComputedStyle(t);
   i(t, "data-sr-added", a(o, "combobox-added")), i(t, "data-sr-empty", a(o, "combobox-empty")), i(t, "data-sr-found", a(o, "combobox-found")), i(t, "data-sr-invalid", a(o, "combobox-invalid")), i(t, "data-sr-of", a(o, "combobox-of")), i(t, "data-sr-remove", a(o, "combobox-remove")), i(t, "data-sr-removed", a(o, "combobox-removed")), i(t.list, "data-sr-plural", a(o, "datalist-plural")), i(t.list, "data-sr-singular", a(o, "datalist-singular")), i(t.list, "popover", "manual");
 }
-function L(t) {
+function C(t) {
   const o = t == null ? void 0 : t.nextElementSibling, n = o && i(o, "data-count");
   if (o && n) {
-    const s = Number(n) - t.value.length, c = s < 0, r = i(o, "aria-live") === "polite", d = window.getComputedStyle(o || t), e = a(d, "count-over"), f = a(d, "count-under");
-    if (r !== c) {
-      i(o, "aria-live", c ? "polite" : "off");
-      for (const T of x) o.classList.toggle(T, c);
+    const s = Number(n) - t.value.length, r = s < 0, f = i(o, "aria-live") === "polite", c = window.getComputedStyle(o || t), d = a(c, "count-over"), l = a(c, "count-under");
+    if (f !== r) {
+      i(o, "aria-live", r ? "polite" : "off");
+      for (const e of y) o.classList.toggle(e, r);
     }
-    o.textContent = (c ? e : f).replace(
+    o.textContent = (r ? d : l).replace(
       "%d",
       `${Math.abs(s)}`
     );
   }
 }
-function H({ target: t, newState: o }) {
-  if (t instanceof C) {
+function N({ target: t, newState: o }) {
+  if (t instanceof S) {
     const n = t.getRootNode(), s = n == null ? void 0 : n.querySelector(
       `[popovertarget="${t.id}"]`
     );
-    o === "closed" ? u(t, !1) : s && (t.style.width = `${s.clientWidth}px`, u(t, s, "bottom", !0));
+    o === "closed" ? p(t, !1) : s && (t.style.width = `${s.clientWidth}px`, p(t, s, "bottom", !0));
   }
 }
 function $({ target: t }) {
-  g(t) && (L(t), y(t));
+  x(t) && (C(t), T(t));
 }
-function N(t) {
-  var o, n;
-  (n = (o = t.target) == null ? void 0 : o.closest) != null && n.call(o, `.${v}`) && t.preventDefault();
+function w(t) {
+  var n, s;
+  const o = (s = (n = t.target) == null ? void 0 : n.closest) == null ? void 0 : s.call(n, `.${b}`);
+  t.type === "invalid" && o && t.preventDefault(), L(document.getElementsByClassName(b), !0);
 }
-function w({ target: t }) {
-  const o = t instanceof p && t.list;
-  o && !(o != null && o.hidden) && setTimeout(() => u(o, t, 2, !0), 10);
+function D({ target: t }) {
+  const o = t instanceof g && t.list;
+  o && !(o != null && o.hidden) && setTimeout(() => p(o, t, 2, !0), 10);
 }
 I(() => {
-  S(document.documentElement, v, M), l(document, "beforechange", w, m), l(document, "input", $, m), l(document, "invalid", N, !0), l(document, "toggle", H, m);
+  M(document.documentElement, b, L), m(document, "beforechange", D, u), m(document, "input", $, u), m(document, "invalid,submit", w, !0), m(document, "toggle", N, u);
 });
 //# 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 { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tQUICK_EVENT,\n\tanchorPosition,\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_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\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 combobox: UHTMLComboboxElement | 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 UHTMLComboboxElement) combobox = 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\trenderCombobox(combobox);\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\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tif (!el?.list || el.list?.hasAttribute(\"popover\")) return;\n\tconst style = window.getComputedStyle(el);\n\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\tattr(el.list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\tattr(el.list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\tattr(el.list, \"popover\", \"manual\");\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 = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\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\nfunction handleToggle({ target: el, newState }: Event & { newState?: string }) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor) {\n\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\tanchorPosition(el, anchor, \"bottom\", true);\n\t\t}\n\t}\n}\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\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\n// Position combobox when changing content\nfunction handleBeforeChange({ target: el }: Event) {\n\tconst list = el instanceof UHTMLComboboxElement && el.list;\n\tif (list && !list?.hidden)\n\t\tsetTimeout(() => anchorPosition(list, el, 2, true), 10); // Reposition list if not hidden\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"beforechange\", handleBeforeChange, QUICK_EVENT);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid\", handleInvalid, true); // Use capture as invalid does noe bubble\n\ton(document, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","getText","style","key","_a","handleMutation","fields","field","labels","descs","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleToggle","newState","UHTMLDataListElement","root","anchor","anchorPosition","handleInput","target","handleInvalid","event","_b","handleBeforeChange","list","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}
+{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tQUICK_EVENT,\n\tanchorPosition,\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_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>, validate?: boolean) {\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\tconst valids: Element[] = [];\n\t\t\tlet combobox: UHTMLComboboxElement | 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 UHTMLComboboxElement) combobox = 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 = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tvalids.push(el);\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\tif (validate && attr(field, \"data-validation\") === \"form\") {\n\t\t\t\t\tvalid = input.matches(\":valid\");\n\t\t\t\t\tfor (const el of valids) attr(el, \"hidden\", valid ? \"\" : null);\n\t\t\t\t}\n\t\t\t\trenderCombobox(combobox);\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\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tif (!el?.list || el.list?.hasAttribute(\"popover\")) return;\n\tconst style = window.getComputedStyle(el);\n\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\tattr(el.list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\tattr(el.list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\tattr(el.list, \"popover\", \"manual\");\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 = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\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\nfunction handleToggle({ target: el, newState }: Event & { newState?: string }) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor) {\n\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\tanchorPosition(el, anchor, \"bottom\", true);\n\t\t}\n\t}\n}\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\t}\n}\n\nfunction handleValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\thandleMutation(document.getElementsByClassName(CSS_FIELD), true); // Update state\n}\n\n// Position combobox when changing content\nfunction handleBeforeChange({ target: el }: Event) {\n\tconst list = el instanceof UHTMLComboboxElement && el.list;\n\tif (list && !list?.hidden)\n\t\tsetTimeout(() => anchorPosition(list, el, 2, true), 10); // Reposition list if not hidden\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"beforechange\", handleBeforeChange, QUICK_EVENT);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid,submit\", handleValdiation, true); // Use capture as invalid and submit does not bubble\n\ton(document, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","getText","style","key","_a","handleMutation","fields","validate","field","labels","descs","valids","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleToggle","newState","UHTMLDataListElement","root","anchor","anchorPosition","handleInput","target","handleValdiation","event","_b","handleBeforeChange","list","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

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

@@ -158,6 +158,7 @@ export declare const Required: Story;
 export declare const Indeterminate: Story;
 export declare const Toggles: Story;
 export declare const WithValidation: Story;
+export declare const WithValidationForm: Story;
 export declare const WithAffixes: Story;
 export declare const WithCharacterCount: Story;
 export declare const WithCustomDescriptionTag: Story;