@mattilsynet/design 2.2.27 → 2.2.28

package/mtds/app/app-observer.js

@@ -1,6 +1,6 @@
 import styles from "../styles.module.css.js";
 import { isBrowser, onLoaded, on, QUICK_EVENT, debounce } from "../utils.js";
-import "./app-toggle2.js";
+import "./app-toggle.js";
 const CSS_APP = styles.app.split(" ")[0];
 const CSS_STICKY = styles.sticky.split(" ")[0];
 const CSS_TOGGLE = '[data-command="toggle-app-expanded"]';

package/mtds/app/app-toggle.js

@@ -1,5 +1,17 @@
-const script = 'if (\n	typeof window !== "undefined" &&\n	window.CSSStyleSheet &&\n	document.adoptedStyleSheets\n)\n	(() => {\n		const key = "--mtds-app-expanded";\n		const sheet = new CSSStyleSheet();\n		const prev = () => !window.localStorage.getItem(key)?.includes("false");\n\n		document.adoptedStyleSheets.push(sheet);\n		window.mtdsToggleAppExpanded = (force) => {\n			try {\n				const next = force ?? !prev();\n				sheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n				window.localStorage.setItem(key, next);\n			} catch (_err) {} // localStorage is full or replaceSync is not supported\n		};\n\n		// Set and store initial state\n		window.mtdsToggleAppExpanded(prev());\n	})();\n';
-export {
-  script as default
-};
+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) {
+      }
+    };
+    window.mtdsToggleAppExpanded(prev());
+  })();
 //# 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?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":[],"mappings":"AAAA,MAAA,SAAe;"}
+{"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":[],"mappings":"AAAA,IACC,OAAO,WAAW,eAClB,OAAO,iBACP,SAAS;AAET,GAAC,MAAM;AACN,UAAM,MAAM;AACZ,UAAM,QAAQ,IAAI,cAAa;AAC/B,UAAM,OAAO,MAAM,CAAC,OAAO,aAAa,QAAQ,GAAG,GAAG,SAAS,OAAO;AAEtE,aAAS,mBAAmB,KAAK,KAAK;AACtC,WAAO,wBAAwB,CAAC,UAAU;AACzC,UAAI;AACH,cAAM,OAAO,SAAS,CAAC,KAAI;AAC3B,cAAM,cAAc,WAAW,GAAG,SAAS,GAAG,KAAK,IAAI,IAAI;AAC3D,eAAO,aAAa,QAAQ,KAAK,IAAI;AAAA,MACtC,SAAS,MAAM;AAAA,MAAC;AAAA,IACjB;AAGA,WAAO,sBAAsB,MAAM;AAAA,EACpC,GAAC;"}

package/mtds/app/app-toggle2.js

@@ -1,17 +1,5 @@
-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) {
-      }
-    };
-    window.mtdsToggleAppExpanded(prev());
-  })();
+const script = 'if (\n	typeof window !== "undefined" &&\n	window.CSSStyleSheet &&\n	document.adoptedStyleSheets\n)\n	(() => {\n		const key = "--mtds-app-expanded";\n		const sheet = new CSSStyleSheet();\n		const prev = () => !window.localStorage.getItem(key)?.includes("false");\n\n		document.adoptedStyleSheets.push(sheet);\n		window.mtdsToggleAppExpanded = (force) => {\n			try {\n				const next = force ?? !prev();\n				sheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n				window.localStorage.setItem(key, next);\n			} catch (_err) {} // localStorage is full or replaceSync is not supported\n		};\n\n		// Set and store initial state\n		window.mtdsToggleAppExpanded(prev());\n	})();\n';
+export {
+  script as default
+};
 //# 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"],"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":[],"mappings":"AAAA,IACC,OAAO,WAAW,eAClB,OAAO,iBACP,SAAS;AAET,GAAC,MAAM;AACN,UAAM,MAAM;AACZ,UAAM,QAAQ,IAAI,cAAa;AAC/B,UAAM,OAAO,MAAM,CAAC,OAAO,aAAa,QAAQ,GAAG,GAAG,SAAS,OAAO;AAEtE,aAAS,mBAAmB,KAAK,KAAK;AACtC,WAAO,wBAAwB,CAAC,UAAU;AACzC,UAAI;AACH,cAAM,OAAO,SAAS,CAAC,KAAI;AAC3B,cAAM,cAAc,WAAW,GAAG,SAAS,GAAG,KAAK,IAAI,IAAI;AAC3D,eAAO,aAAa,QAAQ,KAAK,IAAI;AAAA,MACtC,SAAS,MAAM;AAAA,MAAC;AAAA,IACjB;AAGA,WAAO,sBAAsB,MAAM;AAAA,EACpC,GAAC;"}
+{"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":[],"mappings":"AAAA,MAAA,SAAe;"}

package/mtds/app/app.js

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { Button } from "../button/button.js";
 import styles from "../styles.module.css.js";
-import script from "./app-toggle.js";
+import script from "./app-toggle2.js";
 const AppComp = forwardRef(function App2({ as, className, ...rest }, ref) {
   const Tag = as || "div";
   return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.app, className), ref, ...rest });

package/mtds/atlas/atlas-element.js

@@ -26,7 +26,7 @@ class MTDSAtlasElement extends MTDSElement {
         "style",
         null,
         `@layer leaflet{${LeafletCSS}}
-@layer mt.v2-2-27design{${css}`
+@layer mt.v2-2-28design{${css}`
       ),
       tag("figure")
     );

package/mtds/field/field-observer.js

@@ -12,7 +12,6 @@ function handleFieldMutation(validate) {
     if (field.isConnected) {
       const labels = [];
       const descriptions = [];
-      const validationMsg = [];
       let combobox = null;
       let input = null;
       let valid = true;
@@ -23,19 +22,22 @@ function handleFieldMutation(validate) {
         else if (el.hasAttribute("data-description")) descriptions.push(el);
         else if (el.classList.contains(CSS_VALIDATION)) {
           valid = attr(el, "data-color") === "success" || !el.clientHeight;
-          validationMsg.push(el);
           descriptions.unshift(el);
         } else if (el instanceof HTMLParagraphElement)
           descriptions.some((desc) => desc.contains(el)) || descriptions.push(el);
       }
       if (input) {
         const comboboxInput = combobox?.control;
-        const shouldValidate = validate || comboboxInput?.validity.customError;
-        if (shouldValidate && attr(field, "data-validation") === "form") {
+        const validateEl = (validate || comboboxInput?.validity.customError) && // Live re-evaluate combobox if invalid to correct validity before form sumbit
+        input.closest('[data-validation="form"]');
+        if (validateEl) {
           valid = comboboxInput?.getAttribute("aria-required") === "true" ? !!combobox?.items.length : input.validity.valid;
           if (!firstInvalid && !valid) firstInvalid = input;
-          for (const el of validationMsg) attr(el, "hidden", valid ? "" : null);
           comboboxInput?.setCustomValidity(valid ? "" : "Invalid");
+          const validateElValid = !validateEl.querySelector(":invalid");
+          validateEl.querySelectorAll(`:scope > .${CSS_VALIDATION}`).forEach((el) => {
+            attr(el, "hidden", validateElValid ? "" : null);
+          });
         }
         for (const label of labels) label.htmlFor = useId(input);
         renderCombobox(combobox);

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\tanchorPosition,\n\tattr,\n\tisBrowser,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\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];\nconst FIELDS = isBrowser() ? document.getElementsByClassName(CSS_FIELD) : [];\n\nfunction handleFieldMutation(validate?: boolean) {\n\tlet firstInvalid: HTMLInputElement | null = null;\n\tfor (const field of FIELDS)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descriptions: Element[] = [];\n\t\t\tconst validationMsg: 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) && !el.hidden) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descriptions.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\tvalidationMsg.push(el);\n\t\t\t\t\tdescriptions.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescriptions.some((desc) => desc.contains(el)) ||\n\t\t\t\t\t\tdescriptions.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tconst comboboxInput = combobox?.control;\n\t\t\t\tconst shouldValidate = validate || comboboxInput?.validity.customError; // Live re-evaluate combobox if invalid to correct validity before form sumbit\n\n\t\t\t\tif (shouldValidate && attr(field, \"data-validation\") === \"form\") {\n\t\t\t\t\tvalid =\n\t\t\t\t\t\tcomboboxInput?.getAttribute(\"aria-required\") === \"true\"\n\t\t\t\t\t\t\t? !!combobox?.items.length\n\t\t\t\t\t\t\t: input.validity.valid;\n\n\t\t\t\t\tif (!firstInvalid && !valid) firstInvalid = input;\n\t\t\t\t\tfor (const el of validationMsg) attr(el, \"hidden\", valid ? \"\" : null);\n\t\t\t\t\tcomboboxInput?.setCustomValidity(valid ? \"\" : \"Invalid\"); // Combobox does not have native validation\n\t\t\t\t}\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\", descriptions.map(useId).join(\" \"));\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n\tif (validate) firstInvalid?.focus(); // Only move focus to first invalid field if validate was true\n\treturn firstInvalid;\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\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tconst { control, list } = el || {};\n\n\tif (el && list && !el.hasAttribute(\"data-sr-added\")) {\n\t\tconst style = window.getComputedStyle(el);\n\t\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\t\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\t\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\t\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\t\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\t\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\t\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\t\tattr(list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\t\tattr(list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\t}\n\tif (list && control && !list.hasAttribute(\"popover\")) {\n\t\tattr(list, \"popover\", \"manual\");\n\t\tattr(control, \"popovertarget\", useId(list));\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 = 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 handleFieldToggle({ target: el, newState }: Partial<ToggleEvent>) {\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\tanchorPosition(el, anchor, {\n\t\t\t\tcontain({ availableHeight }) {\n\t\t\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t},\n\t\t\t});\n\t}\n}\n// Update when typing\nfunction handleFieldInput(event: Event) {\n\tif (isInputLike(event.target)) {\n\t\trenderCounter(event.target);\n\t\trenderTextareaSize(event.target);\n\t}\n}\n\nfunction handleFieldValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\tif (handleFieldMutation(true)) event.preventDefault(); // Prevent submit if invalid fields found\n}\n\nonLoaded(() => [\n\tonMutation(() => handleFieldMutation(), \"class\"),\n\ton(document, \"input\", handleFieldInput, QUICK_EVENT),\n\ton(document, \"toggle\", handleFieldToggle, QUICK_EVENT), // Use capture since toggle does not bubble\n\ton(document, \"invalid,submit\", handleFieldValdiation, true), // Use capture as invalid and submit does not bubble\n]);\n"],"names":[],"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\tanchorPosition,\n\tattr,\n\tisBrowser,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\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];\nconst FIELDS = isBrowser() ? document.getElementsByClassName(CSS_FIELD) : [];\n\nfunction handleFieldMutation(validate?: boolean) {\n\tlet firstInvalid: HTMLInputElement | null = null;\n\tfor (const field of FIELDS)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descriptions: Element[] = [];\n\t\t\tconst validationMsg: 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) && !el.hidden) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descriptions.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\tvalidationMsg.push(el);\n\t\t\t\t\tdescriptions.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescriptions.some((desc) => desc.contains(el)) ||\n\t\t\t\t\t\tdescriptions.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tconst comboboxInput = combobox?.control;\n\t\t\t\tconst validateEl =\n\t\t\t\t\t(validate || comboboxInput?.validity.customError) && // Live re-evaluate combobox if invalid to correct validity before form sumbit\n\t\t\t\t\tinput.closest('[data-validation=\"form\"]');\n\n\t\t\t\tif (validateEl) {\n\t\t\t\t\tvalid =\n\t\t\t\t\t\tcomboboxInput?.getAttribute(\"aria-required\") === \"true\"\n\t\t\t\t\t\t\t? !!combobox?.items.length\n\t\t\t\t\t\t\t: input.validity.valid; // If checkbox, only one needs to be vaild when same name\n\n\t\t\t\t\tif (!firstInvalid && !valid) firstInvalid = input;\n\t\t\t\t\tcomboboxInput?.setCustomValidity(valid ? \"\" : \"Invalid\"); // Combobox does not have native validation\n\t\t\t\t\tconst validateElValid = !validateEl.querySelector(\":invalid\"); // Check if any invalid inputs inside field or fieldset\n\t\t\t\t\tvalidateEl\n\t\t\t\t\t\t.querySelectorAll(`:scope > .${CSS_VALIDATION}`)\n\t\t\t\t\t\t.forEach((el) => {\n\t\t\t\t\t\t\tattr(el, \"hidden\", validateElValid ? \"\" : null);\n\t\t\t\t\t\t});\n\t\t\t\t}\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\", descriptions.map(useId).join(\" \"));\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n\tif (validate) firstInvalid?.focus(); // Only move focus to first invalid field if validate was true\n\treturn firstInvalid;\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\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tconst { control, list } = el || {};\n\n\tif (el && list && !el.hasAttribute(\"data-sr-added\")) {\n\t\tconst style = window.getComputedStyle(el);\n\t\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\t\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\t\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\t\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\t\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\t\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\t\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\t\tattr(list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\t\tattr(list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\t}\n\tif (list && control && !list.hasAttribute(\"popover\")) {\n\t\tattr(list, \"popover\", \"manual\");\n\t\tattr(control, \"popovertarget\", useId(list));\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 = 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 handleFieldToggle({ target: el, newState }: Partial<ToggleEvent>) {\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\tanchorPosition(el, anchor, {\n\t\t\t\tcontain({ availableHeight }) {\n\t\t\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t},\n\t\t\t});\n\t}\n}\n// Update when typing\nfunction handleFieldInput(event: Event) {\n\tif (isInputLike(event.target)) {\n\t\trenderCounter(event.target);\n\t\trenderTextareaSize(event.target);\n\t}\n}\n\nfunction handleFieldValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\tif (handleFieldMutation(true)) event.preventDefault(); // Prevent submit if invalid fields found\n}\n\nonLoaded(() => [\n\tonMutation(() => handleFieldMutation(), \"class\"),\n\ton(document, \"input\", handleFieldInput, QUICK_EVENT),\n\ton(document, \"toggle\", handleFieldToggle, QUICK_EVENT), // Use capture since toggle does not bubble\n\ton(document, \"invalid,submit\", handleFieldValdiation, true), // Use capture as invalid and submit does not bubble\n]);\n"],"names":[],"mappings":"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"}

package/mtds/fieldset/fieldset.d.ts

@@ -1,8 +1,14 @@
-export type FieldsetProps = React.ComponentPropsWithoutRef<"fieldset">;
-export declare const FieldsetComp: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('react').RefAttributes<HTMLFieldSetElement>>;
+export type FieldsetProps = React.ComponentPropsWithoutRef<"fieldset"> & {
+    "data-validation"?: "form";
+};
+export declare const FieldsetComp: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & {
+    "data-validation"?: "form";
+} & import('react').RefAttributes<HTMLFieldSetElement>>;
 export type FieldsetLegendProps = React.ComponentPropsWithoutRef<"legend">;
 export type FieldsetDescriptionProps = React.ComponentPropsWithoutRef<"p">;
-export declare const Fieldset: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('react').RefAttributes<HTMLFieldSetElement>> & {
+export declare const Fieldset: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & {
+    "data-validation"?: "form";
+} & import('react').RefAttributes<HTMLFieldSetElement>> & {
     Legend: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "ref"> & import('react').RefAttributes<HTMLLegendElement>>;
     Description: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
 };

package/mtds/fieldset/fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset.js","sources":["../../designsystem/fieldset/fieldset.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type FieldsetProps = React.ComponentPropsWithoutRef<\"fieldset\">;\n\nexport const FieldsetComp = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n\tfunction Fieldset({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tclassName={clsx(styles.fieldset, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type FieldsetLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\nconst FieldsetLegend = forwardRef<HTMLLegendElement, FieldsetLegendProps>(\n\tfunction FieldsetLegend(rest, ref) {\n\t\treturn <legend suppressHydrationWarning ref={ref} {...rest} />;\n\t},\n);\n\nexport type FieldsetDescriptionProps = React.ComponentPropsWithoutRef<\"p\">;\nconst FieldsetDescription = forwardRef<\n\tHTMLParagraphElement,\n\tFieldsetDescriptionProps\n>(function FieldsetDescription(rest, ref) {\n\treturn <p suppressHydrationWarning ref={ref} {...rest} />;\n});\n\nexport const Fieldset = Object.assign(FieldsetComp, {\n\tLegend: FieldsetLegend,\n\tDescription: FieldsetDescription,\n});\n"],"names":["Fieldset","FieldsetLegend","FieldsetDescription"],"mappings":";;;;AAMO,MAAM,eAAe;AAAA,EAC3B,SAASA,UAAS,EAAE,WAAW,GAAG,KAAA,GAAQ,KAAK;AAC9C,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAW,KAAK,OAAO,UAAU,SAAS;AAAA,QAC1C;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;AAGA,MAAM,iBAAiB;AAAA,EACtB,SAASC,gBAAe,MAAM,KAAK;AAClC,+BAAQ,UAAA,EAAO,0BAAwB,MAAC,KAAW,GAAG,MAAM;AAAA,EAC7D;AACD;AAGA,MAAM,sBAAsB,WAG1B,SAASC,qBAAoB,MAAM,KAAK;AACzC,6BAAQ,KAAA,EAAE,0BAAwB,MAAC,KAAW,GAAG,MAAM;AACxD,CAAC;AAEM,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EACnD,QAAQ;AAAA,EACR,aAAa;AACd,CAAC;"}
+{"version":3,"file":"fieldset.js","sources":["../../designsystem/fieldset/fieldset.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type FieldsetProps = React.ComponentPropsWithoutRef<\"fieldset\"> & {\n\t\"data-validation\"?: \"form\";\n};\n\nexport const FieldsetComp = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n\tfunction Fieldset({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tclassName={clsx(styles.fieldset, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type FieldsetLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\nconst FieldsetLegend = forwardRef<HTMLLegendElement, FieldsetLegendProps>(\n\tfunction FieldsetLegend(rest, ref) {\n\t\treturn <legend suppressHydrationWarning ref={ref} {...rest} />;\n\t},\n);\n\nexport type FieldsetDescriptionProps = React.ComponentPropsWithoutRef<\"p\">;\nconst FieldsetDescription = forwardRef<\n\tHTMLParagraphElement,\n\tFieldsetDescriptionProps\n>(function FieldsetDescription(rest, ref) {\n\treturn <p suppressHydrationWarning ref={ref} {...rest} />;\n});\n\nexport const Fieldset = Object.assign(FieldsetComp, {\n\tLegend: FieldsetLegend,\n\tDescription: FieldsetDescription,\n});\n"],"names":["Fieldset","FieldsetLegend","FieldsetDescription"],"mappings":";;;;AAQO,MAAM,eAAe;AAAA,EAC3B,SAASA,UAAS,EAAE,WAAW,GAAG,KAAA,GAAQ,KAAK;AAC9C,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAW,KAAK,OAAO,UAAU,SAAS;AAAA,QAC1C;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;AAGA,MAAM,iBAAiB;AAAA,EACtB,SAASC,gBAAe,MAAM,KAAK;AAClC,+BAAQ,UAAA,EAAO,0BAAwB,MAAC,KAAW,GAAG,MAAM;AAAA,EAC7D;AACD;AAGA,MAAM,sBAAsB,WAG1B,SAASC,qBAAoB,MAAM,KAAK;AACzC,6BAAQ,KAAA,EAAE,0BAAwB,MAAC,KAAW,GAAG,MAAM;AACxD,CAAC;AAEM,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EACnD,QAAQ;AAAA,EACR,aAAa;AACd,CAAC;"}

package/mtds/fieldset/fieldset.stories.d.ts

@@ -11,4 +11,5 @@ export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Horizontal: Story;
 export declare const WithValidation: Story;
+export declare const WithValidationForm: Story;
 export declare const WithTexts: Story;