@mattilsynet/design 1.3.2 → 1.3.3

package/mtds/app/app-observer.js

@@ -1,17 +1,17 @@
 import m from "../styles.module.css.js";
-import { onLoaded as C, onMutation as T, on as r, QUICK_EVENT as p, debounce as P } from "../utils.js";
+import { onLoaded as C, onMutation as T, on as p, QUICK_EVENT as c, debounce as P } from "../utils.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) => (
   // @ts-expect-error window.mtdsAppToggle comes from app-toggle.js
   S(() => {
-    var o;
-    return (o = window.mtdsToggleAppExpanded) == null ? void 0 : o.call(window, t);
+    var i;
+    return (i = window.mtdsToggleAppExpanded) == null ? void 0 : i.call(window, t);
   })
 );
-function x({ target: t }) {
-  if (!(!(t instanceof HTMLButtonElement) || !t.matches(h))) {
+function x({ target: t, defaultPrevented: i }) {
+  if (!(i || !(t instanceof HTMLButtonElement) || !t.matches(h))) {
     if (getComputedStyle(t).position === "sticky") return E();
     S(() => {
       const o = document.querySelector(g);
@@ -23,18 +23,18 @@ function I() {
   var t;
   (t = document.querySelector(g)) == null || t.close();
 }
-let c = 0, s, n = 0, e, d = 0, l = 0, a = !1, u = 0, i = 0;
+let d = 0, l, n = 0, e, a = 0, r = 0, u = !1, y = 0, s = 0;
 function H([t]) {
   e = t, w();
 }
 function w() {
-  var y;
+  var o;
   if (!(e != null && e.isConnected)) return;
-  const t = window.scrollY, o = t < i;
-  i = t, o !== s && (c = (((y = e.parentElement) == null ? void 0 : y.getBoundingClientRect().top) || 0) + i, s = o, d = e.offsetHeight, l = e.getBoundingClientRect().top + i, a = e.offsetHeight <= window.innerHeight, u = window.innerHeight), !(n === -1 && a) && (n !== -1 && (a || s && i <= l) ? (e.style.setProperty("--pos", "sticky"), e.style.setProperty("--top", "0px"), n = -1) : n === -1 && !s ? (e.style.setProperty("--pos", "relative"), e.style.setProperty("--top", `${Math.max(0, i - c)}px`), n = 0) : n !== 1 && !s && i + u >= l + d ? (e.style.setProperty("--pos", "sticky"), e.style.setProperty("--top", `${u - d}px`), n = 1) : n === 1 && s && (e.style.setProperty("--pos", "relative"), e.style.setProperty("--top", `${l - c}px`), n = 0));
+  const t = window.scrollY, i = t < s;
+  s = t, i !== l && (d = (((o = e.parentElement) == null ? void 0 : o.getBoundingClientRect().top) || 0) + s, l = i, a = e.offsetHeight, r = e.getBoundingClientRect().top + s, u = e.offsetHeight <= window.innerHeight, y = window.innerHeight), !(n === -1 && u) && (n !== -1 && (u || l && s <= r) ? (e.style.setProperty("--pos", "sticky"), e.style.setProperty("--top", "0px"), n = -1) : n === -1 && !l ? (e.style.setProperty("--pos", "relative"), e.style.setProperty("--top", `${Math.max(0, s - d)}px`), n = 0) : n !== 1 && !l && s + y >= r + a ? (e.style.setProperty("--pos", "sticky"), e.style.setProperty("--top", `${y - a}px`), n = 1) : n === 1 && l && (e.style.setProperty("--pos", "relative"), e.style.setProperty("--top", `${r - d}px`), n = 0));
 }
 C(() => {
-  T(document.documentElement, _, H), r(document, "click", x, p), r(window, "resize", P(I, 100), p), r(window, "scroll", w, p);
+  T(document.documentElement, _, H), p(document, "click", x, c), p(window, "resize", P(I, 100), c), p(window, "scroll", w, c);
 });
 export {
   E as toggleAppExpanded

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

@@ -1 +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\nexport const toggleAppExpanded = (force?: boolean) =>\n\t// @ts-expect-error window.mtdsAppToggle comes from app-toggle.js\n\tuseTransition(() => window.mtdsToggleAppExpanded?.(force));\n\nfunction handleToggleClick({ target: el }: Event) {\n\tif (!(el instanceof HTMLButtonElement) || !el.matches(CSS_TOGGLE)) return;\n\tif (getComputedStyle(el).position === \"sticky\") return toggleAppExpanded();\n\tuseTransition(() => {\n\t\tconst sidebar = document.querySelector<HTMLDialogElement>(CSS_SIDEBAR);\n\t\tsidebar?.setAttribute(\"data-closedby\", \"any\"); // Allow closing by clicking outside\n\t\tsidebar?.showModal();\n\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","toggleAppExpanded","force","_a","handleToggleClick","el","sidebar","handleResize","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,GAEaC,IAAoB,CAACC;AAAA;AAAA,EAEjCH,EAAc,MAAM;;AAAA,YAAAI,IAAA,OAAO,0BAAP,gBAAAA,EAAA,aAA+BD;AAAA,GAAM;AAAA;AAE1D,SAASE,EAAkB,EAAE,QAAQC,KAAa;AACjD,MAAI,IAAEA,aAAc,sBAAsB,CAACA,EAAG,QAAQR,CAAU,IAChE;AAAA,QAAI,iBAAiBQ,CAAE,EAAE,aAAa,iBAAiBJ,EAAkB;AACzE,IAAAF,EAAc,MAAM;AACb,YAAAO,IAAU,SAAS,cAAiCR,CAAW;AAC5D,MAAAQ,KAAA,QAAAA,EAAA,aAAa,iBAAiB,QACvCA,KAAA,QAAAA,EAAS;AAAA,IAAU,CACnB;AAAA;AACF;AAEA,SAASC,IAAe;;AACd,GAAAJ,IAAA,SAAA,cAAiCL,CAAW,MAA5C,QAAAK,EAA+C;AACzD;AAGA,IAAIK,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,OAASL,IAAAQ,EAAS,kBAAT,gBAAAR,EAAwB,wBAAwB,QAAO,KAAKa,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,iBAAiB3B,GAAYqB,CAAc,GAC5DO,EAAA,UAAU,SAASpB,GAAmBqB,CAAW,GACpDD,EAAG,QAAQ,UAAUE,EAASnB,GAAc,GAAG,GAAGkB,CAAW,GAC1DD,EAAA,QAAQ,UAAUL,GAAcM,CAAW;AAC/C,CAAC;"}
+{"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\nexport const toggleAppExpanded = (force?: boolean) =>\n\t// @ts-expect-error window.mtdsAppToggle comes from app-toggle.js\n\tuseTransition(() => window.mtdsToggleAppExpanded?.(force));\n\nfunction handleToggleClick({ target: el, defaultPrevented: stop }: Event) {\n\tif (stop || !(el instanceof HTMLButtonElement) || !el.matches(CSS_TOGGLE))\n\t\treturn;\n\tif (getComputedStyle(el).position === \"sticky\") return toggleAppExpanded();\n\tuseTransition(() => {\n\t\tconst sidebar = document.querySelector<HTMLDialogElement>(CSS_SIDEBAR);\n\t\tsidebar?.setAttribute(\"data-closedby\", \"any\"); // Allow closing by clicking outside\n\t\tsidebar?.showModal();\n\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","toggleAppExpanded","force","_a","handleToggleClick","el","stop","sidebar","handleResize","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,GAEaC,IAAoB,CAACC;AAAA;AAAA,EAEjCH,EAAc,MAAM;;AAAA,YAAAI,IAAA,OAAO,0BAAP,gBAAAA,EAAA,aAA+BD;AAAA,GAAM;AAAA;AAE1D,SAASE,EAAkB,EAAE,QAAQC,GAAI,kBAAkBC,KAAe;AACzE,MAAI,EAAAA,KAAQ,EAAED,aAAc,sBAAsB,CAACA,EAAG,QAAQR,CAAU,IAExE;AAAA,QAAI,iBAAiBQ,CAAE,EAAE,aAAa,iBAAiBJ,EAAkB;AACzE,IAAAF,EAAc,MAAM;AACb,YAAAQ,IAAU,SAAS,cAAiCT,CAAW;AAC5D,MAAAS,KAAA,QAAAA,EAAA,aAAa,iBAAiB,QACvCA,KAAA,QAAAA,EAAS;AAAA,IAAU,CACnB;AAAA;AACF;AAEA,SAASC,IAAe;;AACd,GAAAL,IAAA,SAAA,cAAiCL,CAAW,MAA5C,QAAAK,EAA+C;AACzD;AAGA,IAAIM,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,OAASN,IAAAS,EAAS,kBAAT,gBAAAT,EAAwB,wBAAwB,QAAO,KAAKc,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,iBAAiB5B,GAAYsB,CAAc,GAC5DO,EAAA,UAAU,SAASrB,GAAmBsB,CAAW,GACpDD,EAAG,QAAQ,UAAUE,EAASnB,GAAc,GAAG,GAAGkB,CAAW,GAC1DD,EAAA,QAAQ,UAAUL,GAAcM,CAAW;AAC/C,CAAC;"}

package/mtds/app/app.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
+import { ButtonProps } from '../react';
 import { PolymorphicComponentPropWithRef } from '../react-types';
 export type AppHeaderProps = React.ComponentPropsWithoutRef<"header">;
 export type AppSidebarProps = React.ComponentPropsWithoutRef<"dialog">;
@@ -11,6 +12,7 @@ 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;
+    Toggle: React.ForwardRefExoticComponent<Omit<ButtonProps<"button">, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     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;

package/mtds/app/app.js

@@ -1,36 +1,80 @@
 import { jsx as o } from "react/jsx-runtime";
-import { clsx as a } from "../external/clsx/dist/clsx.js";
+import { clsx as e } from "../external/clsx/dist/clsx.js";
 import { forwardRef as p } from "react";
-import c from "../styles.module.css.js";
-import m from "./app-toggle.js";
-const f = p(function({ as: r, className: t, ...n }, e) {
-  return /* @__PURE__ */ o(r || "div", { className: a(c.app, t), ref: e, ...n });
-}), d = p(function({ as: r, className: t, ...n }, e) {
-  return /* @__PURE__ */ o(r || "div", { className: a(c.sticky, t), ref: e, ...n });
-}), y = Object.assign(f, {
+import "../alert/alert.js";
+import "../avatar/avatar.js";
+import "../badge/badge.js";
+import "../breadcrumbs/breadcrumbs.js";
+import { Button as s } from "../button/button.js";
+import "../card/card.js";
+import "../chip/chip.js";
+import "../details/details.js";
+import "../dialog/dialog.js";
+import "../divider/divider.js";
+import "../errorsummary/errorsummary.js";
+import "../field/field.js";
+import "../fieldset/fieldset.js";
+import "../helptext/helptext.js";
+import "../input/input.js";
+import "../layout/layout.js";
+import "../link/link.js";
+import "../logo/logo.js";
+import "../pagination/pagination.js";
+import "../popover/popover.js";
+import "../progress/progress.js";
+import "../skeleton/skeleton.js";
+import "../spinner/spinner.js";
+import "../steps/steps.js";
+import "../table/table.js";
+import "../tabs/tabs.js";
+import "../tag/tag.js";
+import "../togglegroup/togglegroup.js";
+import "../typography/typography.js";
+import "../validation/validation.js";
+import a from "../styles.module.css.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) {
+  return /* @__PURE__ */ o(t || "div", { className: e(a.sticky, r), ref: n, ...m });
+}), X = Object.assign(f, {
   Header: p(
-    function(r, t) {
-      return /* @__PURE__ */ o("header", { ref: t, ...r });
+    function(t, r) {
+      return /* @__PURE__ */ o("header", { ref: r, ...t });
     }
   ),
   Sidebar: p(
-    function(r, t) {
-      return /* @__PURE__ */ o("dialog", { role: "navigation", ref: t, ...r });
+    function(t, r) {
+      return /* @__PURE__ */ o("dialog", { role: "navigation", ref: r, ...t });
     }
   ),
-  Sticky: d,
-  Main: p(function(r, t) {
-    return /* @__PURE__ */ o("main", { ref: t, ...r });
+  Sticky: u,
+  Toggle: p(
+    function({ children: t, ...r }, m) {
+      return /* @__PURE__ */ o(
+        s,
+        {
+          "data-command": "toggle-app-expanded",
+          "data-tooltip": "Vis meny",
+          ref: m,
+          ...r,
+          children: t ?? "Skjul meny"
+        }
+      );
+    }
+  ),
+  Main: p(function(t, r) {
+    return /* @__PURE__ */ o("main", { ref: r, ...t });
   }),
   Footer: p(
-    function(r, t) {
-      return /* @__PURE__ */ o("footer", { ref: t, ...r });
+    function(t, r) {
+      return /* @__PURE__ */ o("footer", { ref: r, ...t });
     }
   ),
   // Needed to avoid flash of unstyled content and still be Next.js hydration compatible
-  Script: () => /* @__PURE__ */ o("script", { id: "mtds-app-script", children: m })
+  Script: () => /* @__PURE__ */ o("script", { id: "mtds-app-script", children: d })
 });
 export {
-  y as App
+  X as App
 };
 //# sourceMappingURL=app.js.map

package/mtds/app/app.js.map

@@ -1 +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;"}
+{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport { Button, type ButtonProps } 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\tToggle: forwardRef<HTMLButtonElement, ButtonProps<\"button\">>(\n\t\tfunction AppToggle({ children, ...rest }: ButtonProps<\"button\">, ref) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdata-command=\"toggle-app-expanded\"\n\t\t\t\t\tdata-tooltip=\"Vis meny\"\n\t\t\t\t\tref={ref as React.Ref<HTMLAnchorElement>}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{children ?? \"Skjul meny\"}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t},\n\t),\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","children","Button","script"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,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,QAAQR;AAAA,IACP,SAAmB,EAAE,UAAAU,GAAU,GAAGP,EAAA,GAA+BC,GAAK;AAEpE,aAAA,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,gBAAa;AAAA,UACb,gBAAa;AAAA,UACb,KAAAP;AAAA,UACC,GAAGD;AAAA,UAEH,UAAYO,KAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAGH;AAAA,EACA,MAAMV,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,UAAOO,EAAA,CAAA;AACpD,CAAC;"}

package/mtds/external/@u-elements/u-combobox/dist/u-combobox.js

@@ -1,53 +1,53 @@
-var U = Object.defineProperty, L = Object.getOwnPropertySymbols, X = Object.prototype.hasOwnProperty, W = Object.prototype.propertyIsEnumerable, M = (t, e, o) => e in t ? U(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, Y = (t, e) => {
+var X = Object.defineProperty, D = Object.getOwnPropertySymbols, W = Object.prototype.hasOwnProperty, Y = Object.prototype.propertyIsEnumerable, N = (t, e, o) => e in t ? X(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, z = (t, e) => {
   for (var o in e || (e = {}))
-    X.call(e, o) && M(t, o, e[o]);
-  if (L)
-    for (var o of L(e))
-      W.call(e, o) && M(t, o, e[o]);
+    W.call(e, o) && N(t, o, e[o]);
+  if (D)
+    for (var o of D(e))
+      Y.call(e, o) && N(t, o, e[o]);
   return t;
-}, E = typeof window < "u" && typeof window.document < "u" && typeof window.navigator < "u", R = E && /android/i.test(navigator.userAgent), z = E && /firefox/i.test(navigator.userAgent), G = E && /iPad|iPhone|iPod/.test(navigator.userAgent), D;
-E && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
-/^Mac/i.test(((D = navigator.userAgentData) == null ? void 0 : D.platform) || navigator.platform);
-var J = "outline: 1px dotted; outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color", Q = typeof HTMLElement > "u" ? class {
+}, w = typeof window < "u" && typeof window.document < "u" && typeof window.navigator < "u", H = w && /android/i.test(navigator.userAgent), G = w && /firefox/i.test(navigator.userAgent), J = w && /iPad|iPhone|iPod/.test(navigator.userAgent), R;
+w && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
+/^Mac/i.test(((R = navigator.userAgentData) == null ? void 0 : R.platform) || navigator.platform);
+var Q = "outline: 1px dotted; outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color", Z = typeof HTMLElement > "u" ? class {
 } : HTMLElement;
-function l(t, e, o) {
+function u(t, e, o) {
   return o === void 0 ? t.getAttribute(e) : (o === null ? t.removeAttribute(e) : t.getAttribute(e) !== o && t.setAttribute(e, o), null);
 }
-var H = (t, e, o) => {
-  for (const a of o[0].split(","))
-    o[0] = a, Element.prototype[`${t}EventListener`].apply(e, o);
-}, O = (t, ...e) => H("add", t, e), Z = (t, ...e) => H("remove", t, e), w = /* @__PURE__ */ new WeakMap(), N = (t, e) => {
-  if (e === void 0) return w.get(t);
+var B = (t, e, o) => {
+  for (const n of o[0].split(","))
+    o[0] = n, Element.prototype[`${t}EventListener`].apply(e, o);
+}, A = (t, ...e) => B("add", t, e), tt = (t, ...e) => B("remove", t, e), x = /* @__PURE__ */ new WeakMap(), O = (t, e) => {
+  if (e === void 0) return x.get(t);
   try {
-    w.get(t).disconnect(), w.delete(t);
+    x.get(t).disconnect(), x.delete(t);
   } catch {
   }
   if (e) {
     const o = new MutationObserver(
-      (a) => t.handleEvent({ type: "mutation", detail: a })
+      (n) => t.handleEvent({ type: "mutation", detail: n })
     );
-    o.observe(t, e), w.set(t, o);
+    o.observe(t, e), x.set(t, o);
   }
-}, tt = (t) => {
+}, et = (t) => {
   const e = "key" in t && (t.key === " " || t.key === "Enter");
   return e && t.preventDefault(), e && t.target instanceof HTMLElement && t.target.click(), e;
-}, et = (t) => {
+}, ot = (t) => {
   var e;
   const o = ((e = t.getRootNode) == null ? void 0 : e.call(t)) || t.ownerDocument;
   return o instanceof Document || o instanceof ShadowRoot ? o : document;
-}, ot = 0, it = (t) => t ? (t.id || (t.id = `:${t.nodeName.toLowerCase()}${(++ot).toString(32)}`), t.id) : "", C = (t, e, o) => {
-  const a = document.createElement(t);
-  if (e && (a.textContent = e), o) for (const [i, r] of Object.entries(o)) l(a, i, r);
-  return a;
-}, nt = {
-  define: (t, e) => !E || window.customElements.get(t) || window.customElements.define(t, e)
-}, b, at = 0, $ = (t) => {
-  b || (b = C("div"), b.style.cssText = "position:fixed;overflow:hidden;width:1px;white-space:nowrap", l(b, "aria-live", "assertive")), b.isConnected || document.body.append(b), t && (b.textContent = `${t}${at++ % 2 ? " " : ""}`);
-}, B = (t, e, o = "") => {
-  var a, i;
-  const r = { bubbles: !0, composed: !0, data: e, inputType: o }, n = HTMLInputElement.prototype;
-  t.dispatchEvent(new InputEvent("beforeinput", r)), (i = (a = Object.getOwnPropertyDescriptor(n, "value")) == null ? void 0 : a.set) == null || i.call(t, e), t.dispatchEvent(new InputEvent("input", r)), t.dispatchEvent(new Event("change", { bubbles: !0 }));
-}, S = !1, P = "beforeinput,blur,focus,click,input,keydown,mousedown,mouseup", F = { once: !0, passive: !0 }, rt = z && !R, lt = R || G, x = "false", st = "insertReplacementText", k = {
+}, it = 0, nt = (t) => t ? (t.id || (t.id = `:${t.nodeName.toLowerCase()}${(++it).toString(32)}`), t.id) : "", I = (t, e, o) => {
+  const n = document.createElement(t);
+  if (e && (n.textContent = e), o) for (const [i, a] of Object.entries(o)) u(n, i, a);
+  return n;
+}, at = {
+  define: (t, e) => !w || window.customElements.get(t) || window.customElements.define(t, e)
+}, b, rt = 0, L = (t) => {
+  b || (b = I("div"), b.style.cssText = "position:fixed;overflow:hidden;width:1px;white-space:nowrap", u(b, "aria-live", "assertive")), b.isConnected || document.body.append(b), t && (b.textContent = `${t}${rt++ % 2 ? " " : ""}`);
+}, F = (t, e, o = "") => {
+  var n, i;
+  const a = { bubbles: !0, composed: !0, data: e, inputType: o }, r = HTMLInputElement.prototype;
+  t.dispatchEvent(new InputEvent("beforeinput", a)), (i = (n = Object.getOwnPropertyDescriptor(r, "value")) == null ? void 0 : n.set) == null || i.call(t, e), t.dispatchEvent(new InputEvent("input", a)), t.dispatchEvent(new Event("change", { bubbles: !0 }));
+}, $ = !1, P = "beforeinput,blur,focus,click,input,keydown,mousedown,mouseup", V = { once: !0, passive: !0 }, lt = G && !H, st = H || J, k = "false", ut = "insertReplacementText", C = {
   added: "Added",
   empty: "No selected",
   found: "Navigate left to find %d selected",
@@ -55,12 +55,12 @@ var H = (t, e, o) => {
   of: "of",
   remove: "Press to remove",
   removed: "Removed"
-}, ut = class extends Q {
+}, ct = class extends Z {
   constructor() {
-    super(), this._speak = "", this._texts = Y({}, k), this._value = "", this.attachShadow({ mode: "open" }).append(
-      C("slot"),
+    super(), this._speak = "", this._texts = z({}, C), this._value = "", this.attachShadow({ mode: "open" }).append(
+      I("slot"),
       // Content slot
-      C(
+      I(
         "style",
         `:host(:not([hidden])) { display: block; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } /* Must be display block in Safari to allow focus inside */
 				:host(:not([data-multiple])) ::slotted(data),
@@ -69,42 +69,42 @@ var H = (t, e, o) => {
 				::slotted(del) { text-decoration: none }
 				::slotted(data:not([hidden])) { display: inline-block; pointer-events: none }
         ::slotted(data)::after { content: '\\00D7'; content: '\\00D7' / ''; padding-inline: .5ch; pointer-events: auto }
-        ::slotted(data:focus) { ${J} }`
+        ::slotted(data:focus) { ${Q} }`
       )
     );
   }
   // Locally store value to store value before input-click
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
-    return Object.keys(k).map((t) => `data-sr-${t}`);
+    return Object.keys(C).map((t) => `data-sr-${t}`);
   }
   connectedCallback() {
-    this._root = et(this), O(this, P, this, !0), N(this, { childList: !0 }), setTimeout(I, 0, this), setTimeout(A, 0, this);
+    this._root = ot(this), A(this, P, this, !0), O(this, { childList: !0, subtree: !0 }), setTimeout(T, 0, this), setTimeout(M, 0, this);
   }
   attributeChangedCallback(t, e, o) {
-    const a = t.split("data-sr-")[1];
-    k[a] && (this._texts[a] = o || k[a]);
+    const n = t.split("data-sr-")[1];
+    C[n] && (this._texts[n] = o || C[n]);
   }
   disconnectedCallback() {
-    N(this, !1), Z(this, P, this, !0), this._items = this._clear = this._focus = this._control = void 0, this._list = this._options = this._root = void 0;
+    O(this, !1), tt(this, P, this, !0), this._items = this._clear = this._focus = this._control = void 0, this._list = this._options = this._root = void 0;
   }
   handleEvent(t) {
     const e = t.target;
-    t.type === "beforeinput" && (this._value = (e == null ? void 0 : e.value) || ""), t.type === "blur" && dt(this), t.type === "click" && vt(this, t), t.type === "focus" && ct(this, t), t.type === "input" && ft(this, t), t.type === "keydown" && mt(this, t), t.type === "mousedown" && (S = this.contains(e)), t.type === "mouseup" && (S = !1), t.type === "mutation" && I(this, t);
+    t.type === "beforeinput" && (this._value = (e == null ? void 0 : e.value) || ""), t.type === "blur" && pt(this), t.type === "click" && ft(this, t), t.type === "focus" && dt(this, t), t.type === "input" && mt(this, t), t.type === "keydown" && ht(this, t), t.type === "mousedown" && ($ = this.contains(e)), t.type === "mouseup" && ($ = !1), t.type === "mutation" && T(this, t);
   }
   get multiple() {
     var t;
-    return ((t = l(this, "data-multiple")) != null ? t : x) !== x;
+    return ((t = u(this, "data-multiple")) != null ? t : k) !== k;
   }
   set multiple(t) {
-    l(this, "data-multiple", t ? "" : null);
+    u(this, "data-multiple", t ? "" : null);
   }
   get creatable() {
     var t;
-    return ((t = l(this, "data-creatable")) != null ? t : x) !== x;
+    return ((t = u(this, "data-creatable")) != null ? t : k) !== k;
   }
   set creatable(t) {
-    l(this, "data-creatable", t ? "" : null);
+    u(this, "data-creatable", t ? "" : null);
   }
   get control() {
     var t;
@@ -132,111 +132,111 @@ var H = (t, e, o) => {
   get values() {
     return [...this.items].map(({ value: t }) => t);
   }
-}, g = (t) => {
+}, y = (t) => {
   var e;
   return ((e = t == null ? void 0 : t.textContent) == null ? void 0 : e.trim()) || "";
-}, T = (t) => t instanceof HTMLDataElement, I = (t, e) => {
-  var o;
-  const { _focus: a, _texts: i, items: r, control: n, list: d, multiple: s } = t;
-  let c = `${g((o = n == null ? void 0 : n.labels) == null ? void 0 : o[0])}, ${s ? r.length ? i.found.replace("%d", `${r.length}`) : i.empty : ""}`;
-  const p = [];
-  for (const { addedNodes: f, removedNodes: h } of (e == null ? void 0 : e.detail) || []) {
-    for (const m of f) T(m) && p.unshift(m);
-    for (const m of h) T(m) && p.push(m);
-  }
-  const u = s ? p.length === 1 : p[0] === a;
-  if (a && n && u) {
-    const f = l(n, "inputmode"), h = T(a) ? n : a;
-    t._speak = `${i[p[0].isConnected ? "added" : "removed"]} ${g(p[0])}, `, (lt || a === n) && $(t._speak), n !== h && (l(n, "aria-expanded", null), l(n, "inputmode", "none"), c = " ", n.focus()), setTimeout(() => {
-      var m;
-      l(n, "aria-expanded", "true"), l(n, "inputmode", f), (m = h == null ? void 0 : h.focus) == null || m.call(h), t._speak = "", rt ? O(t, "blur", () => I(t), F) : setTimeout(I, 100, t);
+}, S = (t) => t instanceof HTMLDataElement, T = (t, e) => {
+  var o, n;
+  const { _focus: i, _texts: a, items: r, control: l, list: d, multiple: c } = t;
+  let v = `${y((o = l == null ? void 0 : l.labels) == null ? void 0 : o[0])}, ${c ? r.length ? a.found.replace("%d", `${r.length}`) : a.empty : ""}`;
+  const s = [];
+  for (const { addedNodes: p, removedNodes: h } of (e == null ? void 0 : e.detail) || []) {
+    for (const f of p) S(f) && s.unshift(f);
+    for (const f of h) S(f) && s.push(f);
+  }
+  const _ = c ? s.length === 1 : s[0] === i;
+  if (i && l && _) {
+    const p = u(l, "inputmode"), h = S(i) ? l : i;
+    t._speak = `${a[s[0].isConnected ? "added" : "removed"]} ${y(s[0])}, `, (st || i === l) && L(t._speak), l !== h && (u(l, "aria-expanded", null), u(l, "inputmode", "none"), v = " ", l.focus()), setTimeout(() => {
+      var f;
+      u(l, "aria-expanded", "true"), u(l, "inputmode", p), (f = h == null ? void 0 : h.focus) == null || f.call(h), t._speak = "", lt ? A(t, "blur", () => T(t), V) : setTimeout(T, 100, t);
     }, 100);
   }
-  let _ = 0;
-  for (const f of r) {
-    const h = g(f), m = f.value || h, K = `${t._speak}${h}, ${i.remove}, ${++_} ${i.of} ${r.length}`;
-    l(f, "role", "button"), l(f, "value", m), l(f, "tabindex", "-1"), l(f, "aria-label", K);
+  let m = 0;
+  for (const p of r) {
+    const h = y(p), f = p.value || h, U = `${t._speak}${h}, ${a.remove}, ${++m} ${a.of} ${r.length}`;
+    u(p, "role", "button"), u(p, "value", f), u(p, "tabindex", "-1"), u(p, "aria-label", U);
   }
-  !s && _ > 1 && console.warn("u-combobox: Multiple <data> found in single mode."), d && l(d, "aria-multiselectable", `${s}`), n && l(n, "list", it(d)), n && l(n, "aria-label", `${t._speak}${c}`);
-  const v = t.querySelector("select");
-  v && (v.multiple = s), v && (v.textContent = ""), v == null || v.append(...t.values.map((f) => new Option(f, f, !0, !0))), V(t), j(t);
-}, V = (t) => {
-  var e;
-  t.clear && l(t.clear, "role", "button"), t.clear && (t.clear.hidden = !((e = t.control) != null && e.value));
+  !c && m > 1 && console.warn("u-combobox: Multiple <data> found in single mode."), d && u(d, "aria-multiselectable", `${c}`), l && u(l, "list", nt(d)), l && u(l, "aria-label", `${t._speak}${v}`);
+  const g = t.querySelector("select");
+  g && (g.multiple = c), g && (g.textContent = ""), g == null || g.append(...t.values.map((p) => new Option(p, p, !0, !0))), j(t), q(t), (n = O(t)) == null || n.takeRecords();
 }, j = (t) => {
   var e;
-  const { _speak: o, options: a = [], values: i } = t;
-  for (const r of a) {
-    const n = (e = l(r, "value")) != null ? e : g(r);
-    l(r, "aria-label", o ? `${o}${g(r)}` : null), l(r, "selected", i.includes(n) ? "" : null);
-  }
-}, A = (t) => {
-  const { multiple: e, control: o, items: a } = t, i = g(a[0]);
-  !e && o && i !== o.value && B(o, i, "insertText");
-}, q = (t, e = !0) => {
+  t.clear && u(t.clear, "role", "button"), t.clear && (t.clear.hidden = !((e = t.control) != null && e.value));
+}, q = (t) => {
+  var e;
+  const { _speak: o, options: n = [], values: i } = t;
+  for (const a of n) {
+    const r = (e = u(a, "value")) != null ? e : y(a);
+    u(a, "aria-label", o ? `${o}${y(a)}` : null), u(a, "selected", i.includes(r) ? "" : null);
+  }
+}, M = (t) => {
+  const { multiple: e, control: o, items: n } = t, i = y(n[0]);
+  !e && o && i !== o.value && F(o, i, "insertText");
+}, K = (t, e = !0) => {
   var o;
-  const { _texts: a, options: i = [], creatable: r, control: n, items: d, multiple: s } = t, c = ((o = n == null ? void 0 : n.value) == null ? void 0 : o.trim()) || "", p = c.toLowerCase() || null;
-  let u = [...i].find((v) => v.label.trim().toLowerCase() === p);
-  const _ = { bubbles: !0, cancelable: !0, detail: u };
+  const { _texts: n, options: i = [], creatable: a, control: r, items: l, multiple: d } = t, c = ((o = r == null ? void 0 : r.value) == null ? void 0 : o.trim()) || "", v = c.toLowerCase() || null;
+  let s = [...i].find((m) => m.label.trim().toLowerCase() === v);
+  const _ = { bubbles: !0, cancelable: !0, detail: s };
   if (t.dispatchEvent(new CustomEvent("beforematch", _)))
-    for (const v of i) v.selected = v === u;
-  if (u = [...i].find((v) => v.selected), j(t), u) return y(t, u, !1, !!e);
-  if (r && c) return y(t, { value: c }, !1);
-  !s && d[0] && y(t, d[0], !0, !1), e && $(a.invalid);
-}, y = (t, e, o = !0, a = !0) => {
-  const { control: i, items: r, multiple: n } = t, d = C("data", e.label || e.value, {
+    for (const m of i) m.selected = m === s;
+  if (s = [...i].find((m) => m.selected), q(t), s) return E(t, s, !1, !!e);
+  if (a && c) return E(t, { value: c }, !1);
+  !d && l[0] && E(t, l[0], !0, !1), e && L(n.invalid);
+}, E = (t, e, o = !0, n = !0) => {
+  const { control: i, items: a, multiple: r } = t, l = I("data", e.label || e.value, {
     value: e.value
-  }), s = [...r].find((u) => u.value === e.value), c = { bubbles: !0, cancelable: !0, detail: s || d };
-  if (!(s && !o) && t.dispatchEvent(new CustomEvent("beforechange", c))) {
-    if (!n) for (const u of [...r]) u.remove();
-    s ? s.remove() : i == null || i.insertAdjacentElement("beforebegin", d), t.dispatchEvent(new CustomEvent("afterchange", c));
-  }
-  a && setTimeout(A, 10, t);
-}, ct = (t, { target: e }) => {
-  e instanceof HTMLElement && (t._focus = e), $();
-}, dt = (t) => S || setTimeout(pt, 0, t), pt = (t) => {
+  }), d = [...a].find((s) => s.value === e.value), c = { bubbles: !0, cancelable: !0, detail: d || l };
+  if (!(d && !o) && t.dispatchEvent(new CustomEvent("beforechange", c))) {
+    if (!r) for (const s of [...a]) s.remove();
+    d ? d.remove() : i == null || i.insertAdjacentElement("beforebegin", l), t.dispatchEvent(new CustomEvent("afterchange", c));
+  }
+  n && setTimeout(M, 10, t);
+}, dt = (t, { target: e }) => {
+  e instanceof HTMLElement && (t._focus = e), L();
+}, pt = (t) => $ || setTimeout(vt, 0, t), vt = (t) => {
   var e;
-  !t._focus || t.contains((e = t._root) == null ? void 0 : e.activeElement) || A(t);
-}, vt = (t, e) => {
-  const { clientX: o, clientY: a, target: i } = e, { clear: r, control: n, items: d } = t;
-  if (r != null && r.contains(i))
-    return n && B(n, "", "deleteContentBackward"), n == null ? void 0 : n.focus();
-  for (const s of d) {
-    const { top: c, right: p, bottom: u, left: _ } = s.getBoundingClientRect();
-    if (s.contains(i)) return y(t, s);
-    if (a >= c && a <= u && o >= _ && o <= p) return s.focus();
-  }
-  i === t && (n == null || n.focus());
+  !t._focus || t.contains((e = t._root) == null ? void 0 : e.activeElement) || M(t);
 }, ft = (t, e) => {
+  const { clientX: o, clientY: n, target: i } = e, { clear: a, control: r, items: l } = t;
+  if (a != null && a.contains(i))
+    return r && F(r, "", "deleteContentBackward"), r == null ? void 0 : r.focus();
+  for (const d of l) {
+    const { top: c, right: v, bottom: s, left: _ } = d.getBoundingClientRect();
+    if (d.contains(i)) return E(t, d);
+    if (n >= c && n <= s && o >= _ && o <= v) return d.focus();
+  }
+  i === t && (r == null || r.focus());
+}, mt = (t, e) => {
   var o;
-  const { options: a = [], control: i, multiple: r } = t, n = ((o = i == null ? void 0 : i.value) == null ? void 0 : o.trim()) || "";
-  if (e instanceof InputEvent ? !e.inputType || e.inputType === st : !!n) {
+  const { options: n = [], control: i, multiple: a } = t, r = ((o = i == null ? void 0 : i.value) == null ? void 0 : o.trim()) || "";
+  if (e instanceof InputEvent ? !e.inputType || e.inputType === ut : !!r) {
     e.stopImmediatePropagation(), i && (i.value = t._value);
-    for (const s of a)
-      if (s.value && s.value === n)
-        return y(t, s, r);
-  } else r || q(t, !1);
-  V(t);
-}, mt = (t, e) => {
+    for (const d of n)
+      if (d.value && d.value === r)
+        return E(t, d, a);
+  } else a || K(t, !1);
+  j(t);
+}, ht = (t, e) => {
   var o;
   if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-  const { clear: a, control: i, items: r } = t, { key: n, repeat: d, target: s } = e, c = i && i === s, p = c && (i == null ? void 0 : i.selectionEnd);
-  let u = c ? r.length : [...r].indexOf(s);
-  if (c && n === "Tab" && a && !a.hidden && (e.preventDefault(), a.tabIndex = -1, a.focus(), O(a, "blur", () => l(a, "tabindex", null), F)), !(!c && tt(e) || u === -1)) {
-    if (n === "ArrowRight" && !c) u += 1;
-    else if (n === "ArrowLeft" && !p) u -= 1;
-    else if (n === "Enter" && c) {
-      const _ = l(i, "form");
-      return l(i, "form", "#"), requestAnimationFrame(() => l(i, "form", _)), q(t);
-    } else if ((n === "Backspace" || n === "Delete") && !p) {
-      if (e.preventDefault(), !d && r[u]) return y(t, r[u]);
-      c && (u -= 1);
+  const { clear: n, control: i, items: a } = t, { key: r, repeat: l, target: d } = e, c = i && i === d, v = c && (i == null ? void 0 : i.selectionEnd);
+  let s = c ? a.length : [...a].indexOf(d);
+  if (c && r === "Tab" && n && !n.hidden && (e.preventDefault(), n.tabIndex = -1, n.focus(), A(n, "blur", () => u(n, "tabindex", null), V)), !(!c && et(e) || s === -1)) {
+    if (r === "ArrowRight" && !c) s += 1;
+    else if (r === "ArrowLeft" && !v) s -= 1;
+    else if (r === "Enter" && c) {
+      const _ = u(i, "form");
+      return u(i, "form", "#"), requestAnimationFrame(() => u(i, "form", _)), K(t);
+    } else if ((r === "Backspace" || r === "Delete") && !v) {
+      if (e.preventDefault(), !l && a[s]) return E(t, a[s]);
+      c && (s -= 1);
     } else return c || (i == null ? void 0 : i.focus());
-    e.preventDefault(), (o = r[Math.max(0, u)] || i) == null || o.focus();
+    e.preventDefault(), (o = a[Math.max(0, s)] || i) == null || o.focus();
   }
 };
-nt.define("u-combobox", ut);
+at.define("u-combobox", ct);
 export {
-  ut as UHTMLComboboxElement
+  ct as UHTMLComboboxElement
 };
 //# sourceMappingURL=u-combobox.js.map