@mattilsynet/design 2.2.10 → 2.2.13

package/mtds/styles.json

@@ -1,43 +1,43 @@
 {
-  "alert": "_alert_3aj69_1 _ds-alert_14b25_3",
+  "alert": "_alert_3aj69_1 _ds-alert_pxycd_3",
   "app": "_app_3aj69_1",
   "sticky": "_sticky_3aj69_1",
-  "avatar": "_avatar_3aj69_1 _ds-avatar_14b25_1",
+  "avatar": "_avatar_3aj69_1 _ds-avatar_pxycd_1",
   "badge": "_badge_3aj69_1",
-  "breadcrumbs": "_breadcrumbs_3aj69_1 _ds-breadcrumbs_14b25_5",
-  "button": "_button_3aj69_1 _ds-button_14b25_1",
+  "breadcrumbs": "_breadcrumbs_3aj69_1 _ds-breadcrumbs_pxycd_5",
+  "button": "_button_3aj69_1 _ds-button_pxycd_1",
   "card": "_card_3aj69_1",
   "group": "_group_3aj69_1",
-  "chip": "_chip_3aj69_1 _ds-chip_14b25_5",
-  "details": "_details_3aj69_1 _ds-details_14b25_3",
-  "dialog": "_dialog_3aj69_1 _ds-dialog_14b25_5",
+  "chip": "_chip_3aj69_1 _ds-chip_pxycd_5",
+  "details": "_details_3aj69_1 _ds-details_pxycd_3",
+  "dialog": "_dialog_3aj69_1 _ds-dialog_pxycd_5",
   "divider": "_divider_3aj69_1",
-  "errorsummary": "_errorsummary_3aj69_1 _ds-error-summary_14b25_5",
-  "field": "_field_3aj69_1 _ds-field_14b25_1",
-  "affixes": "_affixes_3aj69_1 _ds-field-affixes_14b25_3",
-  "fieldset": "_fieldset_3aj69_1 _ds-fieldset_14b25_3",
-  "helptext": "_helptext_3aj69_1 _ds-focus_14b25_1",
-  "input": "_input_3aj69_1 _ds-input_14b25_1",
+  "errorsummary": "_errorsummary_3aj69_1 _ds-error-summary_pxycd_5",
+  "field": "_field_3aj69_1 _ds-field_pxycd_1",
+  "affixes": "_affixes_3aj69_1 _ds-field-affixes_pxycd_3",
+  "fieldset": "_fieldset_3aj69_1 _ds-fieldset_pxycd_3",
+  "helptext": "_helptext_3aj69_1 _ds-focus_pxycd_1",
+  "input": "_input_3aj69_1 _ds-input_pxycd_1",
   "grid": "_grid_3aj69_1",
   "flex": "_flex_3aj69_1",
   "link": "_link_3aj69_1",
   "logo": "_logo_3aj69_1",
-  "pagination": "_pagination_3aj69_1 _ds-pagination_14b25_5",
+  "pagination": "_pagination_3aj69_1 _ds-pagination_pxycd_5",
   "popover": "_popover_3aj69_1",
   "progress": "_progress_3aj69_1",
-  "skeleton": "_skeleton_3aj69_1 _ds-skeleton_14b25_5",
+  "skeleton": "_skeleton_3aj69_1 _ds-skeleton_pxycd_5",
   "spinner": "_spinner_3aj69_1",
   "steps": "_steps_3aj69_1",
-  "table": "_table_3aj69_1 _ds-table_14b25_5",
-  "tabs": "_tabs_3aj69_1 _ds-tabs_14b25_5",
-  "tag": "_tag_3aj69_1 _ds-tag_14b25_5",
+  "table": "_table_3aj69_1 _ds-table_pxycd_5",
+  "tabs": "_tabs_3aj69_1 _ds-tabs_pxycd_5",
+  "tag": "_tag_3aj69_1 _ds-tag_pxycd_5",
   "toast": "_toast_3aj69_1",
   "togglegroup": "_togglegroup_3aj69_1",
-  "heading": "_heading_3aj69_1 _ds-heading_14b25_1",
+  "heading": "_heading_3aj69_1 _ds-heading_pxycd_1",
   "ingress": "_ingress_3aj69_1",
   "muted": "_muted_3aj69_1",
   "info": "_info_3aj69_1",
   "prose": "_prose_3aj69_1",
-  "validation": "_validation_3aj69_1 _ds-validation-message_14b25_1",
+  "validation": "_validation_3aj69_1 _ds-validation-message_pxycd_1",
   "body": "_body_3aj69_173"
 }

package/mtds/styles.module.css.js

@@ -1,4 +1,4 @@
-const _ = "_alert_3aj69_1 _ds-alert_14b25_3", t = "_app_3aj69_1", s = "_sticky_3aj69_1", a = "_avatar_3aj69_1 _ds-avatar_14b25_1", o = "_badge_3aj69_1", e = "_breadcrumbs_3aj69_1 _ds-breadcrumbs_14b25_5", n = "_button_3aj69_1 _ds-button_14b25_1", r = "_card_3aj69_1", i = "_group_3aj69_1", d = "_chip_3aj69_1 _ds-chip_14b25_5", c = "_details_3aj69_1 _ds-details_14b25_3", l = "_dialog_3aj69_1 _ds-dialog_14b25_5", j = "__drawer_3aj69_1", p = "_divider_3aj69_1", b = "_errorsummary_3aj69_1 _ds-error-summary_14b25_5", g = "__errorsummary_3aj69_1", u = "_field_3aj69_1 _ds-field_14b25_1", m = "__datalist_3aj69_1", f = "_affixes_3aj69_1 _ds-field-affixes_14b25_3", k = "_fieldset_3aj69_1 _ds-fieldset_14b25_3", h = "_helptext_3aj69_1 _ds-focus_14b25_1", v = "_input_3aj69_1 _ds-input_14b25_1", y = "_grid_3aj69_1", x = "_flex_3aj69_1", w = "_link_3aj69_1", C = "_logo_3aj69_1", M = "_pagination_3aj69_1 _ds-pagination_14b25_5", O = "_popover_3aj69_1", S = "_progress_3aj69_1", T = "__indeterminate_3aj69_1", q = "_skeleton_3aj69_1 _ds-skeleton_14b25_5", z = "__skeleton_3aj69_1", A = "_spinner_3aj69_1", B = "_steps_3aj69_1", D = "_table_3aj69_1 _ds-table_14b25_5", E = "__scrollShadow_3aj69_1", F = "_tabs_3aj69_1 _ds-tabs_14b25_5", G = "__scrollMask_3aj69_1", H = "_tag_3aj69_1 _ds-tag_14b25_5", I = "_toast_3aj69_1", J = "__toastClose_3aj69_1", K = "__toastOpen_3aj69_1", L = "__toastTimeout_3aj69_1", N = "_togglegroup_3aj69_1", P = "__tooltip_3aj69_1", Q = "_heading_3aj69_1 _ds-heading_14b25_1", R = "_ingress_3aj69_1", U = "_muted_3aj69_1", V = "_info_3aj69_1", W = "_prose_3aj69_1", X = "_validation_3aj69_1 _ds-validation-message_14b25_1", Y = "_body_3aj69_173", Z = "__checked_3aj69_1", $ = {
+const _ = "_alert_3aj69_1 _ds-alert_pxycd_3", t = "_app_3aj69_1", s = "_sticky_3aj69_1", a = "_avatar_3aj69_1 _ds-avatar_pxycd_1", o = "_badge_3aj69_1", e = "_breadcrumbs_3aj69_1 _ds-breadcrumbs_pxycd_5", n = "_button_3aj69_1 _ds-button_pxycd_1", d = "_card_3aj69_1", c = "_group_3aj69_1", r = "_chip_3aj69_1 _ds-chip_pxycd_5", i = "_details_3aj69_1 _ds-details_pxycd_3", l = "_dialog_3aj69_1 _ds-dialog_pxycd_5", p = "__drawer_3aj69_1", j = "_divider_3aj69_1", g = "_errorsummary_3aj69_1 _ds-error-summary_pxycd_5", y = "__errorsummary_3aj69_1", u = "_field_3aj69_1 _ds-field_pxycd_1", x = "__datalist_3aj69_1", m = "_affixes_3aj69_1 _ds-field-affixes_pxycd_3", b = "_fieldset_3aj69_1 _ds-fieldset_pxycd_3", f = "_helptext_3aj69_1 _ds-focus_pxycd_1", k = "_input_3aj69_1 _ds-input_pxycd_1", h = "_grid_3aj69_1", v = "_flex_3aj69_1", w = "_link_3aj69_1", C = "_logo_3aj69_1", M = "_pagination_3aj69_1 _ds-pagination_pxycd_5", O = "_popover_3aj69_1", S = "_progress_3aj69_1", T = "__indeterminate_3aj69_1", q = "_skeleton_3aj69_1 _ds-skeleton_pxycd_5", z = "__skeleton_3aj69_1", A = "_spinner_3aj69_1", B = "_steps_3aj69_1", D = "_table_3aj69_1 _ds-table_pxycd_5", E = "__scrollShadow_3aj69_1", F = "_tabs_3aj69_1 _ds-tabs_pxycd_5", G = "__scrollMask_3aj69_1", H = "_tag_3aj69_1 _ds-tag_pxycd_5", I = "_toast_3aj69_1", J = "__toastClose_3aj69_1", K = "__toastOpen_3aj69_1", L = "__toastTimeout_3aj69_1", N = "_togglegroup_3aj69_1", P = "__tooltip_3aj69_1", Q = "_heading_3aj69_1 _ds-heading_pxycd_1", R = "_ingress_3aj69_1", U = "_muted_3aj69_1", V = "_info_3aj69_1", W = "_prose_3aj69_1", X = "_validation_3aj69_1 _ds-validation-message_pxycd_1", Y = "_body_3aj69_173", Z = "__checked_3aj69_1", $ = {
   alert: _,
   app: t,
   sticky: s,
@@ -6,23 +6,23 @@ const _ = "_alert_3aj69_1 _ds-alert_14b25_3", t = "_app_3aj69_1", s = "_sticky_3
   badge: o,
   breadcrumbs: e,
   button: n,
-  card: r,
-  group: i,
-  chip: d,
-  details: c,
+  card: d,
+  group: c,
+  chip: r,
+  details: i,
   dialog: l,
-  _drawer: j,
-  divider: p,
-  errorsummary: b,
-  _errorsummary: g,
+  _drawer: p,
+  divider: j,
+  errorsummary: g,
+  _errorsummary: y,
   field: u,
-  _datalist: m,
-  affixes: f,
-  fieldset: k,
-  helptext: h,
-  input: v,
-  grid: y,
-  flex: x,
+  _datalist: x,
+  affixes: m,
+  fieldset: b,
+  helptext: f,
+  input: k,
+  grid: h,
+  flex: v,
   link: w,
   logo: C,
   pagination: M,
@@ -55,9 +55,9 @@ const _ = "_alert_3aj69_1 _ds-alert_14b25_3", t = "_app_3aj69_1", s = "_sticky_3
 };
 export {
   Z as _checked,
-  m as _datalist,
-  j as _drawer,
-  g as _errorsummary,
+  x as _datalist,
+  p as _drawer,
+  y as _errorsummary,
   T as _indeterminate,
   G as _scrollMask,
   E as _scrollShadow,
@@ -66,7 +66,7 @@ export {
   K as _toastOpen,
   L as _toastTimeout,
   P as _tooltip,
-  f as affixes,
+  m as affixes,
   _ as alert,
   t as app,
   a as avatar,
@@ -74,23 +74,23 @@ export {
   Y as body,
   e as breadcrumbs,
   n as button,
-  r as card,
-  d as chip,
+  d as card,
+  r as chip,
   $ as default,
-  c as details,
+  i as details,
   l as dialog,
-  p as divider,
-  b as errorsummary,
+  j as divider,
+  g as errorsummary,
   u as field,
-  k as fieldset,
-  x as flex,
-  y as grid,
-  i as group,
+  b as fieldset,
+  v as flex,
+  h as grid,
+  c as group,
   Q as heading,
-  h as helptext,
+  f as helptext,
   V as info,
   R as ingress,
-  v as input,
+  k as input,
   w as link,
   C as logo,
   U as muted,

package/mtds/table/table-observer.js

@@ -1,24 +1,25 @@
-import l from "../styles.module.css.js";
-import { onLoaded as a, onMutation as s, on as i, attr as f } from "../utils.js";
-const d = l.table.split(" ")[0], m = 'a,button,label,input,select,textarea,[role="button"]';
-function u(t) {
-  for (const e of t) {
-    const o = Array.from(
-      e.tHead?.rows[0]?.cells || [],
-      (n) => n.innerText.trim()
+import s from "../styles.module.css.js";
+import { IS_BROWSER as l, onLoaded as r, on as a, onMutation as i, attr as f } from "../utils.js";
+const m = s.table.split(" ")[0], d = 'a,button,label,input,select,textarea,[role="button"]', u = l ? document.getElementsByClassName(m) : [];
+function b() {
+  for (const t of u) {
+    const e = Array.from(
+      t.tHead?.rows[0]?.cells || [],
+      (o) => o.innerText.trim()
     );
-    for (const n of e.tBodies)
-      for (const r of n.rows)
-        for (const c of r.cells)
-          f(c, "data-th", o[c.cellIndex] || ":empty");
+    for (const o of t.tBodies)
+      for (const c of o.rows)
+        for (const n of c.cells)
+          f(n, "data-th", e[n.cellIndex] || ":empty");
   }
 }
-function b({ target: t }) {
+function E({ target: t }) {
   if (!(t instanceof Element)) return;
   const o = t.closest("tr")?.querySelector('[data-command="row"]');
-  o && !t.closest(m) && o.click?.();
+  o && !t.closest(d) && o.click?.();
 }
-a(() => {
-  s(document.documentElement, d, u), i(document, "click", b);
-});
+r(() => [
+  a(document, "click", E),
+  i(b, "class")
+]);
 //# sourceMappingURL=table-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-observer.js","sources":["../../designsystem/table/table-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, on, onLoaded, onMutation } from \"../utils\";\n\nconst CSS_TABLE = styles.table.split(\" \")[0];\nconst INTERACTIVE = 'a,button,label,input,select,textarea,[role=\"button\"]';\n\nfunction handleTableMutation(tables: HTMLCollectionOf<HTMLTableElement>) {\n\tfor (const table of tables) {\n\t\tconst ths = Array.from(table.tHead?.rows[0]?.cells || [], (th) =>\n\t\t\tth.innerText.trim(),\n\t\t);\n\n\t\tfor (const tbody of table.tBodies)\n\t\t\tfor (const row of tbody.rows)\n\t\t\t\tfor (const cell of row.cells)\n\t\t\t\t\tattr(cell, \"data-th\", ths[cell.cellIndex] || \":empty\");\n\t}\n}\n\nfunction handleTableClick({ target: el }: Event) {\n\tif (!(el instanceof Element)) return;\n\tconst row = el.closest(\"tr\");\n\tconst action = row?.querySelector<HTMLInputElement>('[data-command=\"row\"]');\n\tif (action && !el.closest(INTERACTIVE)) action.click?.(); // Forward click to data-command=\"row\" element\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_TABLE, handleTableMutation);\n\ton(document, \"click\", handleTableClick);\n});\n"],"names":["CSS_TABLE","styles","INTERACTIVE","handleTableMutation","tables","table","ths","th","tbody","row","cell","attr","handleTableClick","el","action","onLoaded","onMutation","on"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAc;AAEpB,SAASC,EAAoBC,GAA4C;AACxE,aAAWC,KAASD,GAAQ;AAC3B,UAAME,IAAM,MAAM;AAAA,MAAKD,EAAM,OAAO,KAAK,CAAC,GAAG,SAAS,CAAA;AAAA,MAAI,CAACE,MAC1DA,EAAG,UAAU,KAAA;AAAA,IAAK;AAGnB,eAAWC,KAASH,EAAM;AACzB,iBAAWI,KAAOD,EAAM;AACvB,mBAAWE,KAAQD,EAAI;AACtB,UAAAE,EAAKD,GAAM,WAAWJ,EAAII,EAAK,SAAS,KAAK,QAAQ;AAAA,EACzD;AACD;AAEA,SAASE,EAAiB,EAAE,QAAQC,KAAa;AAChD,MAAI,EAAEA,aAAc,SAAU;AAE9B,QAAMC,IADMD,EAAG,QAAQ,IAAI,GACP,cAAgC,sBAAsB;AAC1E,EAAIC,KAAU,CAACD,EAAG,QAAQX,CAAW,OAAU,QAAA;AAChD;AAEAa,EAAS,MAAM;AACd,EAAAC,EAAW,SAAS,iBAAiBhB,GAAWG,CAAmB,GACnEc,EAAG,UAAU,SAASL,CAAgB;AACvC,CAAC;"}
+{"version":3,"file":"table-observer.js","sources":["../../designsystem/table/table-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, IS_BROWSER, on, onLoaded, onMutation } from \"../utils\";\n\nconst CSS_TABLE = styles.table.split(\" \")[0];\nconst INTERACTIVE = 'a,button,label,input,select,textarea,[role=\"button\"]';\nconst TABLES = IS_BROWSER ? document.getElementsByClassName(CSS_TABLE) : [];\n\nfunction handleTableMutation() {\n\tfor (const table of TABLES as HTMLCollectionOf<HTMLTableElement>) {\n\t\tconst ths = Array.from(table.tHead?.rows[0]?.cells || [], (th) =>\n\t\t\tth.innerText.trim(),\n\t\t);\n\n\t\tfor (const tbody of table.tBodies)\n\t\t\tfor (const row of tbody.rows)\n\t\t\t\tfor (const cell of row.cells)\n\t\t\t\t\tattr(cell, \"data-th\", ths[cell.cellIndex] || \":empty\");\n\t}\n}\n\nfunction handleTableClick({ target: el }: Event) {\n\tif (!(el instanceof Element)) return;\n\tconst row = el.closest(\"tr\");\n\tconst action = row?.querySelector<HTMLInputElement>('[data-command=\"row\"]');\n\tif (action && !el.closest(INTERACTIVE)) action.click?.(); // Forward click to data-command=\"row\" element\n}\n\nonLoaded(() => [\n\ton(document, \"click\", handleTableClick),\n\tonMutation(handleTableMutation, \"class\"),\n]);\n"],"names":["CSS_TABLE","styles","INTERACTIVE","TABLES","IS_BROWSER","handleTableMutation","table","ths","th","tbody","row","cell","attr","handleTableClick","el","action","onLoaded","on","onMutation"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAc,wDACdC,IAASC,IAAa,SAAS,uBAAuBJ,CAAS,IAAI,CAAA;AAEzE,SAASK,IAAsB;AAC9B,aAAWC,KAASH,GAA8C;AACjE,UAAMI,IAAM,MAAM;AAAA,MAAKD,EAAM,OAAO,KAAK,CAAC,GAAG,SAAS,CAAA;AAAA,MAAI,CAACE,MAC1DA,EAAG,UAAU,KAAA;AAAA,IAAK;AAGnB,eAAWC,KAASH,EAAM;AACzB,iBAAWI,KAAOD,EAAM;AACvB,mBAAWE,KAAQD,EAAI;AACtB,UAAAE,EAAKD,GAAM,WAAWJ,EAAII,EAAK,SAAS,KAAK,QAAQ;AAAA,EACzD;AACD;AAEA,SAASE,EAAiB,EAAE,QAAQC,KAAa;AAChD,MAAI,EAAEA,aAAc,SAAU;AAE9B,QAAMC,IADMD,EAAG,QAAQ,IAAI,GACP,cAAgC,sBAAsB;AAC1E,EAAIC,KAAU,CAACD,EAAG,QAAQZ,CAAW,OAAU,QAAA;AAChD;AAEAc,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,SAASJ,CAAgB;AAAA,EACtCK,EAAWb,GAAqB,OAAO;AACxC,CAAC;"}

package/mtds/toast/toast-observer.js

@@ -13,7 +13,8 @@ function T({ target: t, clientX: i, clientY: o }) {
     a <= o && o <= p && f <= i && i <= d && t.close();
   }
 }
-b(() => {
-  u(document, "animationstart", h), u(document, "click", T);
-});
+b(() => [
+  u(document, "animationstart", h),
+  u(document, "click", T)
+]);
 //# sourceMappingURL=toast-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toast-observer.js","sources":["../../designsystem/toast/toast-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, on, onLoaded } from \"../utils\";\n\nconst CSS_TOAST = styles.toast.split(\" \")[0];\nconst ATTR_SORT = \"data-sort\";\n\nfunction handleToastState({ animationName, target }: Partial<AnimationEvent>) {\n\tconst dialog = target as HTMLDialogElement;\n\tif (animationName === styles._toastTimeout) dialog.close();\n\tif (animationName !== styles._toastOpen) return;\n\n\tconst ms = Number(attr(dialog, \"data-timeout\"));\n\tdialog.style.setProperty(\"--mtdsc-toast-timeout\", ms ? `${ms}ms` : null);\n\tdialog.hasAttribute(ATTR_SORT) || attr(dialog, ATTR_SORT, `${Date.now()}`);\n\tattr(dialog, \"tabindex\", \"0\"); // Make focusable\n\n\t// Setup layout\n\t[...document.querySelectorAll<HTMLDialogElement>(`.${CSS_TOAST}[open]`)]\n\t\t.sort((a, b) => Number(attr(b, ATTR_SORT)) - Number(attr(a, ATTR_SORT)))\n\t\t.reduce((top, toast) => {\n\t\t\ttoast.style.translate = `0 ${toast === target ? 0 : top}px`;\n\t\t\treturn top + toast.offsetHeight + 5;\n\t\t}, 0);\n}\n\nfunction handleToastClick({ target, clientX: x, clientY: y }: MouseEvent) {\n\tif (\n\t\ttarget instanceof HTMLDialogElement &&\n\t\ttarget.classList.contains(CSS_TOAST) &&\n\t\tattr(target, \"data-closedby\") !== \"none\"\n\t) {\n\t\tconst rect = target.getBoundingClientRect();\n\t\tconst toast = window.getComputedStyle(target);\n\t\tconst close = window.getComputedStyle(target, \"::after\");\n\t\tconst top = rect.top + Number.parseInt(toast.paddingTop, 10);\n\t\tconst bottom = top + Number.parseInt(close.height, 10);\n\t\tconst right = rect.right - Number.parseInt(toast.paddingRight, 10);\n\t\tconst left = right - Number.parseInt(close.width, 10);\n\t\tconst isClose = top <= y && y <= bottom && left <= x && x <= right;\n\n\t\tif (isClose) target.close(); // Click is on ::after element\n\t}\n}\n\nonLoaded(() => {\n\ton(document, \"animationstart\", handleToastState);\n\ton(document, \"click\", handleToastClick as EventListener);\n});\n"],"names":["CSS_TOAST","styles","ATTR_SORT","handleToastState","animationName","target","dialog","ms","attr","a","b","top","toast","handleToastClick","x","y","rect","close","bottom","right","left","onLoaded","on"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAY;AAElB,SAASC,EAAiB,EAAE,eAAAC,GAAe,QAAAC,KAAmC;AAC7E,QAAMC,IAASD;AAEf,MADID,MAAkBH,EAAO,iBAAeK,EAAO,MAAA,GAC/CF,MAAkBH,EAAO,WAAY;AAEzC,QAAMM,IAAK,OAAOC,EAAKF,GAAQ,cAAc,CAAC;AAC9C,EAAAA,EAAO,MAAM,YAAY,yBAAyBC,IAAK,GAAGA,CAAE,OAAO,IAAI,GACvED,EAAO,aAAaJ,CAAS,KAAKM,EAAKF,GAAQJ,GAAW,GAAG,KAAK,IAAA,CAAK,EAAE,GACzEM,EAAKF,GAAQ,YAAY,GAAG,GAG5B,CAAC,GAAG,SAAS,iBAAoC,IAAIN,CAAS,QAAQ,CAAC,EACrE,KAAK,CAACS,GAAGC,MAAM,OAAOF,EAAKE,GAAGR,CAAS,CAAC,IAAI,OAAOM,EAAKC,GAAGP,CAAS,CAAC,CAAC,EACtE,OAAO,CAACS,GAAKC,OACbA,EAAM,MAAM,YAAY,KAAKA,MAAUP,IAAS,IAAIM,CAAG,MAChDA,IAAMC,EAAM,eAAe,IAChC,CAAC;AACN;AAEA,SAASC,EAAiB,EAAE,QAAAR,GAAQ,SAASS,GAAG,SAASC,KAAiB;AACzE,MACCV,aAAkB,qBAClBA,EAAO,UAAU,SAASL,CAAS,KACnCQ,EAAKH,GAAQ,eAAe,MAAM,QACjC;AACD,UAAMW,IAAOX,EAAO,sBAAA,GACdO,IAAQ,OAAO,iBAAiBP,CAAM,GACtCY,IAAQ,OAAO,iBAAiBZ,GAAQ,SAAS,GACjDM,IAAMK,EAAK,MAAM,OAAO,SAASJ,EAAM,YAAY,EAAE,GACrDM,IAASP,IAAM,OAAO,SAASM,EAAM,QAAQ,EAAE,GAC/CE,IAAQH,EAAK,QAAQ,OAAO,SAASJ,EAAM,cAAc,EAAE,GAC3DQ,IAAOD,IAAQ,OAAO,SAASF,EAAM,OAAO,EAAE;AAGpD,IAFgBN,KAAOI,KAAKA,KAAKG,KAAUE,KAAQN,KAAKA,KAAKK,OAEzC,MAAA;AAAA,EACrB;AACD;AAEAE,EAAS,MAAM;AACd,EAAAC,EAAG,UAAU,kBAAkBnB,CAAgB,GAC/CmB,EAAG,UAAU,SAAST,CAAiC;AACxD,CAAC;"}
+{"version":3,"file":"toast-observer.js","sources":["../../designsystem/toast/toast-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, on, onLoaded } from \"../utils\";\n\nconst CSS_TOAST = styles.toast.split(\" \")[0];\nconst ATTR_SORT = \"data-sort\";\n\nfunction handleToastState({ animationName, target }: Partial<AnimationEvent>) {\n\tconst dialog = target as HTMLDialogElement;\n\tif (animationName === styles._toastTimeout) dialog.close();\n\tif (animationName !== styles._toastOpen) return;\n\n\tconst ms = Number(attr(dialog, \"data-timeout\"));\n\tdialog.style.setProperty(\"--mtdsc-toast-timeout\", ms ? `${ms}ms` : null);\n\tdialog.hasAttribute(ATTR_SORT) || attr(dialog, ATTR_SORT, `${Date.now()}`);\n\tattr(dialog, \"tabindex\", \"0\"); // Make focusable\n\n\t// Setup layout\n\t[...document.querySelectorAll<HTMLDialogElement>(`.${CSS_TOAST}[open]`)]\n\t\t.sort((a, b) => Number(attr(b, ATTR_SORT)) - Number(attr(a, ATTR_SORT)))\n\t\t.reduce((top, toast) => {\n\t\t\ttoast.style.translate = `0 ${toast === target ? 0 : top}px`;\n\t\t\treturn top + toast.offsetHeight + 5;\n\t\t}, 0);\n}\n\nfunction handleToastClick({ target, clientX: x, clientY: y }: MouseEvent) {\n\tif (\n\t\ttarget instanceof HTMLDialogElement &&\n\t\ttarget.classList.contains(CSS_TOAST) &&\n\t\tattr(target, \"data-closedby\") !== \"none\"\n\t) {\n\t\tconst rect = target.getBoundingClientRect();\n\t\tconst toast = window.getComputedStyle(target);\n\t\tconst close = window.getComputedStyle(target, \"::after\");\n\t\tconst top = rect.top + Number.parseInt(toast.paddingTop, 10);\n\t\tconst bottom = top + Number.parseInt(close.height, 10);\n\t\tconst right = rect.right - Number.parseInt(toast.paddingRight, 10);\n\t\tconst left = right - Number.parseInt(close.width, 10);\n\t\tconst isClose = top <= y && y <= bottom && left <= x && x <= right;\n\n\t\tif (isClose) target.close(); // Click is on ::after element\n\t}\n}\n\nonLoaded(() => [\n\ton(document, \"animationstart\", handleToastState),\n\ton(document, \"click\", handleToastClick as EventListener),\n]);\n"],"names":["CSS_TOAST","styles","ATTR_SORT","handleToastState","animationName","target","dialog","ms","attr","a","b","top","toast","handleToastClick","x","y","rect","close","bottom","right","left","onLoaded","on"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAY;AAElB,SAASC,EAAiB,EAAE,eAAAC,GAAe,QAAAC,KAAmC;AAC7E,QAAMC,IAASD;AAEf,MADID,MAAkBH,EAAO,iBAAeK,EAAO,MAAA,GAC/CF,MAAkBH,EAAO,WAAY;AAEzC,QAAMM,IAAK,OAAOC,EAAKF,GAAQ,cAAc,CAAC;AAC9C,EAAAA,EAAO,MAAM,YAAY,yBAAyBC,IAAK,GAAGA,CAAE,OAAO,IAAI,GACvED,EAAO,aAAaJ,CAAS,KAAKM,EAAKF,GAAQJ,GAAW,GAAG,KAAK,IAAA,CAAK,EAAE,GACzEM,EAAKF,GAAQ,YAAY,GAAG,GAG5B,CAAC,GAAG,SAAS,iBAAoC,IAAIN,CAAS,QAAQ,CAAC,EACrE,KAAK,CAACS,GAAGC,MAAM,OAAOF,EAAKE,GAAGR,CAAS,CAAC,IAAI,OAAOM,EAAKC,GAAGP,CAAS,CAAC,CAAC,EACtE,OAAO,CAACS,GAAKC,OACbA,EAAM,MAAM,YAAY,KAAKA,MAAUP,IAAS,IAAIM,CAAG,MAChDA,IAAMC,EAAM,eAAe,IAChC,CAAC;AACN;AAEA,SAASC,EAAiB,EAAE,QAAAR,GAAQ,SAASS,GAAG,SAASC,KAAiB;AACzE,MACCV,aAAkB,qBAClBA,EAAO,UAAU,SAASL,CAAS,KACnCQ,EAAKH,GAAQ,eAAe,MAAM,QACjC;AACD,UAAMW,IAAOX,EAAO,sBAAA,GACdO,IAAQ,OAAO,iBAAiBP,CAAM,GACtCY,IAAQ,OAAO,iBAAiBZ,GAAQ,SAAS,GACjDM,IAAMK,EAAK,MAAM,OAAO,SAASJ,EAAM,YAAY,EAAE,GACrDM,IAASP,IAAM,OAAO,SAASM,EAAM,QAAQ,EAAE,GAC/CE,IAAQH,EAAK,QAAQ,OAAO,SAASJ,EAAM,cAAc,EAAE,GAC3DQ,IAAOD,IAAQ,OAAO,SAASF,EAAM,OAAO,EAAE;AAGpD,IAFgBN,KAAOI,KAAKA,KAAKG,KAAUE,KAAQN,KAAKA,KAAKK,OAEzC,MAAA;AAAA,EACrB;AACD;AAEAE,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,kBAAkBnB,CAAgB;AAAA,EAC/CmB,EAAG,UAAU,SAAST,CAAiC;AACxD,CAAC;"}

package/mtds/togglegroup/togglegroup-observer.js

@@ -9,5 +9,5 @@ function f(e) {
     o[(o.length + s + i) % o.length]?.focus();
   }
 }
-g(() => l(document, "keydown", f));
+g(() => [l(document, "keydown", f)]);
 //# sourceMappingURL=togglegroup-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"togglegroup-observer.js","sources":["../../designsystem/togglegroup/togglegroup-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { on, onLoaded } from \"../utils\";\n\nconst CSS_TOGGLEGROUP = `.${styles.togglegroup.split(\" \")[0]}`;\n\n// Prevent browsers from showing default validation bubbles\nfunction handleTogglegroupKeydown(event: Event & Partial<KeyboardEvent>) {\n\tconst { key, target: el } = event;\n\tconst group = el instanceof HTMLInputElement && el.closest(CSS_TOGGLEGROUP);\n\n\tif (!group) return;\n\tif (key === \"Enter\") el.click();\n\tif (key?.startsWith(\"Arrow\")) {\n\t\tevent.preventDefault();\n\t\tconst inputs = group.getElementsByTagName(\"input\");\n\t\tconst index = [...inputs].indexOf(el);\n\t\tconst move = key.match(/Arrow(Right|Down)/) ? 1 : -1;\n\t\tinputs[(inputs.length + index + move) % inputs.length]?.focus();\n\t}\n}\n\nonLoaded(() => on(document, \"keydown\", handleTogglegroupKeydown));\n"],"names":["CSS_TOGGLEGROUP","styles","handleTogglegroupKeydown","event","key","el","group","inputs","index","move","onLoaded","on"],"mappings":";;AAGA,MAAMA,IAAkB,IAAIC,EAAO,YAAY,MAAM,GAAG,EAAE,CAAC,CAAC;AAG5D,SAASC,EAAyBC,GAAuC;AACxE,QAAM,EAAE,KAAAC,GAAK,QAAQC,EAAA,IAAOF,GACtBG,IAAQD,aAAc,oBAAoBA,EAAG,QAAQL,CAAe;AAE1E,MAAKM,MACDF,MAAQ,WAASC,EAAG,MAAA,GACpBD,GAAK,WAAW,OAAO,IAAG;AAC7B,IAAAD,EAAM,eAAA;AACN,UAAMI,IAASD,EAAM,qBAAqB,OAAO,GAC3CE,IAAQ,CAAC,GAAGD,CAAM,EAAE,QAAQF,CAAE,GAC9BI,IAAOL,EAAI,MAAM,mBAAmB,IAAI,IAAI;AAClD,IAAAG,GAAQA,EAAO,SAASC,IAAQC,KAAQF,EAAO,MAAM,GAAG,MAAA;AAAA,EACzD;AACD;AAEAG,EAAS,MAAMC,EAAG,UAAU,WAAWT,CAAwB,CAAC;"}
+{"version":3,"file":"togglegroup-observer.js","sources":["../../designsystem/togglegroup/togglegroup-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { on, onLoaded } from \"../utils\";\n\nconst CSS_TOGGLEGROUP = `.${styles.togglegroup.split(\" \")[0]}`;\n\n// Prevent browsers from showing default validation bubbles\nfunction handleTogglegroupKeydown(event: Event & Partial<KeyboardEvent>) {\n\tconst { key, target: el } = event;\n\tconst group = el instanceof HTMLInputElement && el.closest(CSS_TOGGLEGROUP);\n\n\tif (!group) return;\n\tif (key === \"Enter\") el.click();\n\tif (key?.startsWith(\"Arrow\")) {\n\t\tevent.preventDefault();\n\t\tconst inputs = group.getElementsByTagName(\"input\");\n\t\tconst index = [...inputs].indexOf(el);\n\t\tconst move = key.match(/Arrow(Right|Down)/) ? 1 : -1;\n\t\tinputs[(inputs.length + index + move) % inputs.length]?.focus();\n\t}\n}\n\nonLoaded(() => [on(document, \"keydown\", handleTogglegroupKeydown)]);\n"],"names":["CSS_TOGGLEGROUP","styles","handleTogglegroupKeydown","event","key","el","group","inputs","index","move","onLoaded","on"],"mappings":";;AAGA,MAAMA,IAAkB,IAAIC,EAAO,YAAY,MAAM,GAAG,EAAE,CAAC,CAAC;AAG5D,SAASC,EAAyBC,GAAuC;AACxE,QAAM,EAAE,KAAAC,GAAK,QAAQC,EAAA,IAAOF,GACtBG,IAAQD,aAAc,oBAAoBA,EAAG,QAAQL,CAAe;AAE1E,MAAKM,MACDF,MAAQ,WAASC,EAAG,MAAA,GACpBD,GAAK,WAAW,OAAO,IAAG;AAC7B,IAAAD,EAAM,eAAA;AACN,UAAMI,IAASD,EAAM,qBAAqB,OAAO,GAC3CE,IAAQ,CAAC,GAAGD,CAAM,EAAE,QAAQF,CAAE,GAC9BI,IAAOL,EAAI,MAAM,mBAAmB,IAAI,IAAI;AAClD,IAAAG,GAAQA,EAAO,SAASC,IAAQC,KAAQF,EAAO,MAAM,GAAG,MAAA;AAAA,EACzD;AACD;AAEAG,EAAS,MAAM,CAACC,EAAG,UAAU,WAAWT,CAAwB,CAAC,CAAC;"}

package/mtds/tooltip/tooltip-observer.js

@@ -1,35 +1,43 @@
-import { flip as I, shift as h } from "@floating-ui/dom";
-import w from "../styles.module.css.js";
-import { IS_BROWSER as C, tag as O, onLoaded as y, on as s, QUICK_EVENT as r, attr as a, anchorPosition as u } from "../utils.js";
-const m = "aria-describedby", p = "Escape", d = "aria-labelledby", A = "--mtds-tooltip-position", P = 300, T = "mtds-tooltip", o = C ? document.getElementById(T) || O("div", {
-  class: w._tooltip,
-  id: T,
+import { flip as T, shift as w } from "@floating-ui/dom";
+import E from "../styles.module.css.js";
+import { IS_BROWSER as h, tag as y, onLoaded as I, on as a, onMutation as L, QUICK_EVENT as d, attr as l, anchorPosition as r } from "../utils.js";
+const p = "Escape", g = 300, u = "mtds-tooltip", e = h ? document.getElementById(u) || y("div", {
+  class: E._tooltip,
+  id: u,
   popover: "manual"
 }) : null;
-let e = null, E = Number.NEGATIVE_INFINITY, f = 0;
-function c({ target: i, type: t, key: n }) {
-  if (t === "keydown" && n !== p) return;
-  const l = E + P - Date.now();
-  clearTimeout(f), f = setTimeout(
-    S,
-    Math.max(l, 0),
-    n === p ? null : i
+let c = null, f = Number.NEGATIVE_INFINITY, m = 0;
+function s({ target: n, type: t, key: o }) {
+  if (t === "keydown" && o !== p) return;
+  const i = f + g - Date.now();
+  clearTimeout(m), m = setTimeout(
+    C,
+    Math.max(i, 0),
+    o === p ? null : n
   );
 }
-function S(i) {
-  if (E = Date.now(), !o || i === o) return;
-  o?.isConnected || document.body.append(o);
-  let t = i?.closest?.("[data-tooltip]") || null;
-  if (t === e) return;
-  const n = t && a(t, "data-tooltip") || "", l = t && a(t, "data-tooltip-position") || window.getComputedStyle(t || document.body).getPropertyValue(A)?.trim() || "top";
-  (!n || n === "false" || n === "true" || l === "none") && (t = null), t && (o.textContent = n);
-  const b = e && a(e, d) === o?.id, L = (t instanceof HTMLElement ? t.innerText : t?.textContent)?.trim() || t?.hasAttribute(d) || t?.hasAttribute("aria-label");
-  e?.removeAttribute(b ? d : m), u(o, !1), e = t, e && a(e, L ? m : d, o?.id), e?.isConnected && o.hidePopover(), o.togglePopover(!!t), u(o, t || !1, {
-    placement: l,
-    middleware: [I(), h({ padding: 10 })]
+function C(n) {
+  if (f = Date.now(), !e || n === e) return;
+  e?.isConnected || document.body.append(e);
+  let t = n?.closest?.("[data-tooltip]") || null;
+  if (t === c) return;
+  const o = t && l(t, "data-tooltip") || "", i = t && l(t, "data-tooltip-position") || window.getComputedStyle(t || document.body).getPropertyValue("--mtds-tooltip-position")?.trim() || "top";
+  (!o || o === "false" || o === "true" || i === "none") && (t = null), t && (e.textContent = o), r(e, !1), c = t, e.hidePopover(), e.togglePopover(!!t), r(e, t || !1, {
+    strategy: "fixed",
+    placement: i,
+    middleware: [T(), w({ padding: 10 })]
   });
 }
-y(() => {
-  s(document, "blur,focus,mouseout,mouseover", c, r), s(window, "keydown", c, r), s(window, "blur", c, r);
-});
+function O() {
+  document.querySelectorAll("[data-tooltip]").forEach((n) => {
+    const t = !n?.textContent?.trim(), o = l(n, "data-tooltip");
+    l(n, `aria-${t ? "label" : "description"}`, o);
+  });
+}
+I(() => [
+  a(document, "blur,focus,mouseout,mouseover", s, d),
+  a(window, "keydown", s, d),
+  a(window, "blur", s, d),
+  L(O, "data-tooltip")
+]);
 //# sourceMappingURL=tooltip-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import { flip, type Placement, shift } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tIS_BROWSER,\n\ton,\n\tonLoaded,\n\tQUICK_EVENT,\n\ttag,\n} from \"../utils\";\n\nconst DESCRIBEDBY = \"aria-describedby\";\nconst ESC = \"Escape\";\nconst LABELLEDBY = \"aria-labelledby\";\nconst POSITION_CSS_PROPERTY = \"--mtds-tooltip-position\";\nconst THROTTLE_DELAY = 300;\nconst TOOLTIP_ID = \"mtds-tooltip\";\nconst TOOLTIP = IS_BROWSER\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\tclass: styles._tooltip,\n\t\t\tid: TOOLTIP_ID,\n\t\t\tpopover: \"manual\",\n\t\t})\n\t: null;\n\nlet ANCHOR: Element | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\n\nfunction handleTooltipMove({ target, type, key }: Event & { key?: string }) {\n\tif (type === \"keydown\" && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n\tconst wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n\tclearTimeout(THROTTLE);\n\tTHROTTLE = setTimeout(\n\t\thandleTooltipMoveThrottled,\n\t\tMath.max(wait, 0),\n\t\tkey === ESC ? null : target,\n\t);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleTooltipMoveThrottled(target: Element | null) {\n\tLAST_CALL = Date.now();\n\n\t// Build and append tooltip if not existing\n\tif (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\tlet anchor = target?.closest?.<Element>(\"[data-tooltip]\") || null;\n\n\t// No need to update\n\tif (anchor === ANCHOR) return;\n\n\tconst content = (anchor && attr(anchor, \"data-tooltip\")) || \"\";\n\tconst position =\n\t\t(anchor && attr(anchor, \"data-tooltip-position\")) ||\n\t\twindow\n\t\t\t.getComputedStyle(anchor || document.body)\n\t\t\t.getPropertyValue(POSITION_CSS_PROPERTY)\n\t\t\t?.trim() ||\n\t\t\"top\";\n\n\tconst isHidden =\n\t\t!content ||\n\t\tcontent === \"false\" ||\n\t\tcontent === \"true\" ||\n\t\tposition === \"none\";\n\n\tif (isHidden) anchor = null; // Do not show tooltip if boolish value\n\tif (anchor) TOOLTIP.textContent = content; // Only update content if new anchor\n\n\tconst hadLabel = ANCHOR && attr(ANCHOR, LABELLEDBY) === TOOLTIP?.id;\n\tconst hasLabel =\n\t\t(anchor instanceof HTMLElement\n\t\t\t? anchor.innerText\n\t\t\t: anchor?.textContent\n\t\t)?.trim() ||\n\t\tanchor?.hasAttribute(LABELLEDBY) ||\n\t\tanchor?.hasAttribute(\"aria-label\");\n\n\tANCHOR?.removeAttribute(hadLabel ? LABELLEDBY : DESCRIBEDBY); // Unlink previous anchor\n\tanchorPosition(TOOLTIP, false); // Reset anchor position\n\n\tANCHOR = anchor; // Store new anchor - might be null if no new anchor\n\tif (ANCHOR) attr(ANCHOR, hasLabel ? DESCRIBEDBY : LABELLEDBY, TOOLTIP?.id); // Use tooltip as description if allready has label\n\tif (ANCHOR?.isConnected) TOOLTIP.hidePopover(); // Hide tooltip so it can be placed on top-layer on next show\n\tTOOLTIP.togglePopover(!!anchor);\n\tanchorPosition(TOOLTIP, anchor || false, {\n\t\tplacement: position as Placement,\n\t\tmiddleware: [flip(), shift({ padding: 10 })],\n\t});\n}\n\nonLoaded(() => {\n\ton(document, \"blur,focus,mouseout,mouseover\", handleTooltipMove, QUICK_EVENT);\n\ton(window, \"keydown\", handleTooltipMove, QUICK_EVENT);\n\ton(window, \"blur\", handleTooltipMove, QUICK_EVENT);\n});\n"],"names":["DESCRIBEDBY","ESC","LABELLEDBY","POSITION_CSS_PROPERTY","THROTTLE_DELAY","TOOLTIP_ID","TOOLTIP","IS_BROWSER","tag","styles","ANCHOR","LAST_CALL","THROTTLE","handleTooltipMove","target","type","key","wait","handleTooltipMoveThrottled","anchor","content","attr","position","hadLabel","hasLabel","anchorPosition","flip","shift","onLoaded","on","QUICK_EVENT"],"mappings":";;;AAYA,MAAMA,IAAc,oBACdC,IAAM,UACNC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAa,gBACbC,IAAUC,IACb,SAAS,eAAeF,CAAU,KACnCG,EAAI,OAAO;AAAA,EACV,OAAOC,EAAO;AAAA,EACd,IAAIJ;AAAA,EACJ,SAAS;AACV,CAAC,IACA;AAEH,IAAIK,IAAyB,MACzBC,IAAY,OAAO,mBACnBC,IAAmD;AAEvD,SAASC,EAAkB,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AAC3E,MAAID,MAAS,aAAaC,MAAQf,EAAK;AACvC,QAAMgB,IAAON,IAAYP,IAAiB,KAAK,IAAA;AAC/C,eAAaQ,CAAQ,GACrBA,IAAW;AAAA,IACVM;AAAA,IACA,KAAK,IAAID,GAAM,CAAC;AAAA,IAChBD,MAAQf,IAAM,OAAOa;AAAA,EAAA;AAEvB;AAGA,SAASI,EAA2BJ,GAAwB;AAI3D,MAHAH,IAAY,KAAK,IAAA,GAGb,CAACL,KAAWQ,MAAWR,EAAS;AACpC,EAAKA,GAAS,eAAa,SAAS,KAAK,OAAOA,CAAO;AACvD,MAAIa,IAASL,GAAQ,UAAmB,gBAAgB,KAAK;AAG7D,MAAIK,MAAWT,EAAQ;AAEvB,QAAMU,IAAWD,KAAUE,EAAKF,GAAQ,cAAc,KAAM,IACtDG,IACJH,KAAUE,EAAKF,GAAQ,uBAAuB,KAC/C,OACE,iBAAiBA,KAAU,SAAS,IAAI,EACxC,iBAAiBhB,CAAqB,GACrC,UACH;AAQD,GALC,CAACiB,KACDA,MAAY,WACZA,MAAY,UACZE,MAAa,YAEAH,IAAS,OACnBA,QAAgB,cAAcC;AAElC,QAAMG,IAAWb,KAAUW,EAAKX,GAAQR,CAAU,MAAMI,GAAS,IAC3DkB,KACJL,aAAkB,cAChBA,EAAO,YACPA,GAAQ,cACR,KAAA,KACHA,GAAQ,aAAajB,CAAU,KAC/BiB,GAAQ,aAAa,YAAY;AAElC,EAAAT,GAAQ,gBAAgBa,IAAWrB,IAAaF,CAAW,GAC3DyB,EAAenB,GAAS,EAAK,GAE7BI,IAASS,GACLT,KAAQW,EAAKX,GAAQc,IAAWxB,IAAcE,GAAYI,GAAS,EAAE,GACrEI,GAAQ,eAAaJ,EAAQ,YAAA,GACjCA,EAAQ,cAAc,CAAC,CAACa,CAAM,GAC9BM,EAAenB,GAASa,KAAU,IAAO;AAAA,IACxC,WAAWG;AAAA,IACX,YAAY,CAACI,EAAA,GAAQC,EAAM,EAAE,SAAS,IAAI,CAAC;AAAA,EAAA,CAC3C;AACF;AAEAC,EAAS,MAAM;AACd,EAAAC,EAAG,UAAU,iCAAiChB,GAAmBiB,CAAW,GAC5ED,EAAG,QAAQ,WAAWhB,GAAmBiB,CAAW,GACpDD,EAAG,QAAQ,QAAQhB,GAAmBiB,CAAW;AAClD,CAAC;"}
+{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import { flip, type Placement, shift } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tIS_BROWSER,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\ttag,\n} from \"../utils\";\n\nconst ESC = \"Escape\";\nconst THROTTLE_DELAY = 300;\nconst TOOLTIP_ID = \"mtds-tooltip\";\nconst TOOLTIP = IS_BROWSER\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\tclass: styles._tooltip,\n\t\t\tid: TOOLTIP_ID,\n\t\t\tpopover: \"manual\",\n\t\t})\n\t: null;\n\nlet ANCHOR: Element | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\n\nfunction handleTipToggle({ target, type, key }: Event & { key?: string }) {\n\tif (type === \"keydown\" && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n\tconst wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n\tclearTimeout(THROTTLE);\n\tTHROTTLE = setTimeout(\n\t\thandleMoveThrottled,\n\t\tMath.max(wait, 0),\n\t\tkey === ESC ? null : target,\n\t);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n\tLAST_CALL = Date.now();\n\n\t// Build and append tooltip if not existing\n\tif (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\tlet anchor = target?.closest?.<Element>(\"[data-tooltip]\") || null;\n\n\t// No need to update\n\tif (anchor === ANCHOR) return;\n\n\tconst text = (anchor && attr(anchor, \"data-tooltip\")) || \"\";\n\tconst position =\n\t\t(anchor && attr(anchor, \"data-tooltip-position\")) ||\n\t\twindow\n\t\t\t.getComputedStyle(anchor || document.body)\n\t\t\t.getPropertyValue(\"--mtds-tooltip-position\")\n\t\t\t?.trim() ||\n\t\t\"top\"; // Position can both be set by attribute or CSS custom property\n\n\tconst isHidden =\n\t\t!text || text === \"false\" || text === \"true\" || position === \"none\";\n\n\tif (isHidden) anchor = null; // Do not show tooltip if boolish value\n\tif (anchor) TOOLTIP.textContent = text; // Only update content if new anchor\n\n\tanchorPosition(TOOLTIP, false); // Reset anchor position\n\n\tANCHOR = anchor; // Store new anchor - might be null if no new anchor\n\tTOOLTIP.hidePopover(); // Hide tooltip so it can be placed on top-layer on next show\n\tTOOLTIP.togglePopover(!!anchor);\n\tanchorPosition(TOOLTIP, anchor || false, {\n\t\tstrategy: \"fixed\",\n\t\tplacement: position as Placement,\n\t\tmiddleware: [flip(), shift({ padding: 10 })],\n\t});\n}\n\nfunction handleTipLabels() {\n\tdocument.querySelectorAll(\"[data-tooltip]\").forEach((el) => {\n\t\tconst empty = !el?.textContent?.trim();\n\t\tconst text = attr(el, \"data-tooltip\");\n\t\tattr(el, `aria-${empty ? \"label\" : \"description\"}`, text);\n\t});\n}\n\nonLoaded(() => [\n\ton(document, \"blur,focus,mouseout,mouseover\", handleTipToggle, QUICK_EVENT),\n\ton(window, \"keydown\", handleTipToggle, QUICK_EVENT),\n\ton(window, \"blur\", handleTipToggle, QUICK_EVENT),\n\tonMutation(handleTipLabels, \"data-tooltip\"),\n]);\n"],"names":["ESC","THROTTLE_DELAY","TOOLTIP_ID","TOOLTIP","IS_BROWSER","tag","styles","ANCHOR","LAST_CALL","THROTTLE","handleTipToggle","target","type","key","wait","handleMoveThrottled","anchor","text","attr","position","anchorPosition","flip","shift","handleTipLabels","el","empty","onLoaded","on","QUICK_EVENT","onMutation"],"mappings":";;;AAaA,MAAMA,IAAM,UACNC,IAAiB,KACjBC,IAAa,gBACbC,IAAUC,IACb,SAAS,eAAeF,CAAU,KACnCG,EAAI,OAAO;AAAA,EACV,OAAOC,EAAO;AAAA,EACd,IAAIJ;AAAA,EACJ,SAAS;AACV,CAAC,IACA;AAEH,IAAIK,IAAyB,MACzBC,IAAY,OAAO,mBACnBC,IAAmD;AAEvD,SAASC,EAAgB,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AACzE,MAAID,MAAS,aAAaC,MAAQb,EAAK;AACvC,QAAMc,IAAON,IAAYP,IAAiB,KAAK,IAAA;AAC/C,eAAaQ,CAAQ,GACrBA,IAAW;AAAA,IACVM;AAAA,IACA,KAAK,IAAID,GAAM,CAAC;AAAA,IAChBD,MAAQb,IAAM,OAAOW;AAAA,EAAA;AAEvB;AAGA,SAASI,EAAoBJ,GAAwB;AAIpD,MAHAH,IAAY,KAAK,IAAA,GAGb,CAACL,KAAWQ,MAAWR,EAAS;AACpC,EAAKA,GAAS,eAAa,SAAS,KAAK,OAAOA,CAAO;AACvD,MAAIa,IAASL,GAAQ,UAAmB,gBAAgB,KAAK;AAG7D,MAAIK,MAAWT,EAAQ;AAEvB,QAAMU,IAAQD,KAAUE,EAAKF,GAAQ,cAAc,KAAM,IACnDG,IACJH,KAAUE,EAAKF,GAAQ,uBAAuB,KAC/C,OACE,iBAAiBA,KAAU,SAAS,IAAI,EACxC,iBAAiB,yBAAyB,GACzC,UACH;AAKD,GAFC,CAACC,KAAQA,MAAS,WAAWA,MAAS,UAAUE,MAAa,YAEhDH,IAAS,OACnBA,QAAgB,cAAcC,IAElCG,EAAejB,GAAS,EAAK,GAE7BI,IAASS,GACTb,EAAQ,YAAA,GACRA,EAAQ,cAAc,CAAC,CAACa,CAAM,GAC9BI,EAAejB,GAASa,KAAU,IAAO;AAAA,IACxC,UAAU;AAAA,IACV,WAAWG;AAAA,IACX,YAAY,CAACE,EAAA,GAAQC,EAAM,EAAE,SAAS,IAAI,CAAC;AAAA,EAAA,CAC3C;AACF;AAEA,SAASC,IAAkB;AAC1B,WAAS,iBAAiB,gBAAgB,EAAE,QAAQ,CAACC,MAAO;AAC3D,UAAMC,IAAQ,CAACD,GAAI,aAAa,KAAA,GAC1BP,IAAOC,EAAKM,GAAI,cAAc;AACpC,IAAAN,EAAKM,GAAI,QAAQC,IAAQ,UAAU,aAAa,IAAIR,CAAI;AAAA,EACzD,CAAC;AACF;AAEAS,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,iCAAiCjB,GAAiBkB,CAAW;AAAA,EAC1ED,EAAG,QAAQ,WAAWjB,GAAiBkB,CAAW;AAAA,EAClDD,EAAG,QAAQ,QAAQjB,GAAiBkB,CAAW;AAAA,EAC/CC,EAAWN,GAAiB,cAAc;AAC3C,CAAC;"}

package/mtds/utils.d.ts

@@ -21,7 +21,7 @@ export declare function useId(el: Element): string;
  * @param types A comma separated string of event types
  * @param listener An event listener function or listener object
  */
-export declare const on: (element: Node | Window, ...rest: Parameters<typeof Element.prototype.addEventListener>) => void;
+export declare const on: (element: Node | Window, ...rest: Parameters<typeof Element.prototype.addEventListener>) => (() => void);
 /**
  * off
  * @param element The Element to use as EventTarget
@@ -31,10 +31,15 @@ export declare const on: (element: Node | Window, ...rest: Parameters<typeof Ele
 export declare const off: (element: Node | Window, ...rest: Parameters<typeof Element.prototype.removeEventListener>) => void;
 declare global {
     interface Window {
-        _mtdsUnbindEvents?: Map<string, Array<() => void>>;
+        _mtdsCleanups?: Map<string, Array<() => void>>;
     }
 }
-export declare const onLoaded: (callback: () => void) => void;
+/**
+ * onLoaded
+ * @description Runs a callback when window is loaded in browser, and ensures events are unbound if hot reloading
+ * @param callback The callback to run when the page is ready
+ */
+export declare const onLoaded: (setup: () => Array<() => void>) => void;
 type AnchorOptions = Parameters<typeof computePosition>[2] & {
     contain?: SizeOptions["apply"] | false;
 };
@@ -43,8 +48,7 @@ export declare function anchorPosition(target: HTMLElement, anchor: false | Elem
  * Speed up MutationObserver by debouncing and only running when page is visible
  * @return new MutaionObserver
  */
-export declare function createOptimizedMutationObserver(callback: MutationCallback): MutationObserver;
-export declare const onMutation: <T extends Element>(el: Element, className: string, callback: (elems: HTMLCollectionOf<T>) => void) => void;
+export declare function onMutation(callback: MutationCallback, ...attrs: string[]): () => void;
 /**
  * isInputLike
  * @description Check if element is an input like element

package/mtds/utils.js

@@ -1,105 +1,91 @@
-import { autoUpdate as v, computePosition as M, flip as T, shift as h, size as A } from "@floating-ui/dom";
+import { autoUpdate as b, computePosition as E, flip as y, shift as C, size as T } from "@floating-ui/dom";
 import L from "clsx";
-import S from "./styles.module.css.js";
-const k = { capture: !0, passive: !0 }, p = typeof window < "u" && typeof document < "u";
-function N(t, e) {
+import M from "./styles.module.css.js";
+const O = { capture: !0, passive: !0 }, v = typeof window < "u" && typeof document < "u";
+function k(t, e) {
   let n;
   return (...o) => {
     clearTimeout(n), n = setTimeout(() => t(...o), e);
   };
 }
-function l(t, e, n) {
+function d(t, e, n) {
   return n === void 0 ? t.getAttribute(e) ?? null : (n === null ? t.removeAttribute(e) : t.getAttribute(e) !== n && t.setAttribute(e, n), null);
 }
-let U = 0;
-const C = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
-function R(t) {
-  return t.id || (t.id = `${C}${++U}`), t.id;
+let A = 0;
+const S = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+function x(t) {
+  return t.id || (t.id = `${S}${++A}`), t.id;
 }
-const w = (t, e, [...n]) => {
+const l = (t, e, [...n]) => {
   for (const o of n[0].split(","))
     n[0] = o, e[`${t}EventListener`](...n);
-}, $ = (t, ...e) => {
-  r && (t === window || t === document) && r.push(() => O(t, ...e)), w("add", t, e);
-}, O = (t, ...e) => w("remove", t, e);
-let r = null;
-const x = (t) => {
-  if (!p || !window.requestAnimationFrame) return;
-  window._mtdsUnbindEvents || (window._mtdsUnbindEvents = /* @__PURE__ */ new Map());
+}, $ = (t, ...e) => (l("add", t, e), () => H(t, ...e)), H = (t, ...e) => l("remove", t, e), R = (t) => {
+  if (!v || !window.requestAnimationFrame) return;
+  window._mtdsCleanups || (window._mtdsCleanups = /* @__PURE__ */ new Map());
   const e = () => requestAnimationFrame(() => {
     const n = String(t).replace(/(\n|\s)/g, "");
-    window._mtdsUnbindEvents?.get(n)?.map((o) => o()), r = [], t(), window._mtdsUnbindEvents?.set(n, r?.slice(0)), r = null;
+    window._mtdsCleanups?.get(n)?.map((o) => o()), window._mtdsCleanups?.set(n, t());
   });
   document.readyState === "complete" ? e() : $(window, "load", e);
-}, u = /* @__PURE__ */ new WeakMap(), D = `.${S.dialog.split(" ")[0]}`;
-function H(t, e, { contain: n, middleware: o, placement: i, ...d } = {}) {
-  if (u.get(t)?.(), u.delete(t), e) {
-    const c = t.closest(D)?.querySelector(":scope > footer"), s = Number(l(t, "data-inset")) || 20, a = { bottom: (c?.clientHeight || 0) + s, left: s, right: s, top: s }, b = l(t, "data-position") ?? "bottom";
-    u.set(
+}, r = /* @__PURE__ */ new WeakMap(), h = `.${M.dialog.split(" ")[0]}`;
+function D(t, e, { contain: n, middleware: o, placement: i, ...s } = {}) {
+  if (r.get(t)?.(), r.delete(t), e) {
+    const m = t.closest(h)?.querySelector(":scope > footer"), u = Number(d(t, "data-inset")) || 20, f = { bottom: (m?.clientHeight || 0) + u, left: u, right: u, top: u }, p = d(t, "data-position") ?? "bottom";
+    r.set(
       t,
-      v(e, t, () => {
+      b(e, t, () => {
         if (!t.isConnected || !e.isConnected || t.hidden)
-          return H(t, !1);
-        M(e, t, {
-          ...d,
-          placement: i || b,
+          return D(t, !1);
+        E(e, t, {
+          ...s,
+          placement: i || p,
           middleware: [
-            T({ padding: a }),
-            h(),
-            ...n ? [A({ padding: a, apply: n })] : [],
+            y({ padding: f }),
+            C(),
+            ...n ? [T({ padding: f, apply: n })] : [],
             ...o || []
           ]
-        }).then(({ x: E, y }) => {
-          t.style.left = `${E}px`, t.style.top = `${y}px`;
+        }).then(({ x: a, y: w }) => {
+          t.style.left = `${a}px`, t.style.top = `${w}px`;
         });
       })
     );
   }
 }
-function I(t) {
-  let e = 0;
-  const n = () => setTimeout(o, 200), o = () => {
-    t([], i), i.takeRecords(), e = 0;
-  }, i = new MutationObserver(() => {
-    e || (e = requestAnimationFrame(n));
+function U(t, ...e) {
+  let n = 0;
+  const o = () => setTimeout(i, 200), i = () => {
+    t([], s), s.takeRecords(), n = 0;
+  }, s = new MutationObserver(() => {
+    n || (n = requestAnimationFrame(o));
   });
-  return i;
-}
-const f = /* @__PURE__ */ new WeakMap(), B = (t, e, n) => {
-  if (!p || !window.requestAnimationFrame) return;
-  const o = t.getElementsByClassName(e), i = f.get(t) || [];
-  i.length || (f.set(t, i), I((d, c) => {
-    if (t.isConnected && i?.length)
-      for (const s of i) s();
-    else
-      c?.disconnect(), f.delete(t);
-  }).observe(t, {
-    attributeFilter: ["class", "hidden"],
+  return s.observe(document.documentElement, {
+    attributeFilter: e,
     attributes: !0,
     childList: !0,
     subtree: !0
-  })), i.push(() => n(o));
-}, W = (t) => t instanceof HTMLElement && "validity" in t && !(t instanceof HTMLButtonElement), m = "aria-selected", P = ({ className: t, hidden: e, open: n, ...o }, i) => (o.suppressHydrationWarning = !0, o[m] !== void 0 && (o[m] = `${(o[m] || "false") !== "false"}`), (t || i) && (o.class = L(i, t)), e && (o.hidden = !0), n && (o.open = !0), o), z = (t, e, n) => {
+  }), () => s.disconnect();
+}
+const P = (t) => t instanceof HTMLElement && "validity" in t && !(t instanceof HTMLButtonElement), c = "aria-selected", W = ({ className: t, hidden: e, open: n, ...o }, i) => (o.suppressHydrationWarning = !0, o[c] !== void 0 && (o[c] = `${(o[c] || "false") !== "false"}`), (t || i) && (o.class = L(i, t)), e && (o.hidden = !0), n && (o.open = !0), o), g = (t, e, n) => {
   const o = document.createElement(t);
-  if (n && (o.textContent = n), e) for (const [i, d] of Object.entries(e)) l(o, i, d);
+  if (n && (o.textContent = n), e) for (const [i, s] of Object.entries(e)) d(o, i, s);
   return o;
-}, j = typeof HTMLElement > "u" ? class {
+}, B = typeof HTMLElement > "u" ? class {
 } : HTMLElement;
 export {
-  p as IS_BROWSER,
-  j as MTDSElement,
-  k as QUICK_EVENT,
-  H as anchorPosition,
-  l as attr,
-  I as createOptimizedMutationObserver,
-  N as debounce,
-  W as isInputLike,
-  O as off,
+  v as IS_BROWSER,
+  B as MTDSElement,
+  O as QUICK_EVENT,
+  D as anchorPosition,
+  d as attr,
+  k as debounce,
+  P as isInputLike,
+  H as off,
   $ as on,
-  x as onLoaded,
-  B as onMutation,
-  z as tag,
-  P as toCustomElementProps,
-  R as useId
+  R as onLoaded,
+  U as onMutation,
+  g as tag,
+  W as toCustomElementProps,
+  x as useId
 };
 //# sourceMappingURL=utils.js.map