@mattilsynet/design 2.2.2 → 2.2.4

package/mtds/styles.json

@@ -1,43 +1,43 @@
 {
-  "alert": "_alert_c4739_1 _ds-alert_nwz76_3",
-  "app": "_app_c4739_1",
-  "sticky": "_sticky_c4739_1",
-  "avatar": "_avatar_c4739_1 _ds-avatar_nwz76_1",
-  "badge": "_badge_c4739_1",
-  "breadcrumbs": "_breadcrumbs_c4739_1 _ds-breadcrumbs_nwz76_5",
-  "button": "_button_c4739_1 _ds-button_nwz76_1",
-  "card": "_card_c4739_1",
-  "group": "_group_c4739_1",
-  "chip": "_chip_c4739_1 _ds-chip_nwz76_5",
-  "details": "_details_c4739_1 _ds-details_nwz76_3",
-  "dialog": "_dialog_c4739_1 _ds-dialog_nwz76_5",
-  "divider": "_divider_c4739_1",
-  "errorsummary": "_errorsummary_c4739_1 _ds-error-summary_nwz76_5",
-  "field": "_field_c4739_1 _ds-field_nwz76_1",
-  "affixes": "_affixes_c4739_1 _ds-field-affixes_nwz76_3",
-  "fieldset": "_fieldset_c4739_1 _ds-fieldset_nwz76_3",
-  "helptext": "_helptext_c4739_1 _ds-focus_nwz76_1",
-  "input": "_input_c4739_1 _ds-input_nwz76_1",
-  "grid": "_grid_c4739_1",
-  "flex": "_flex_c4739_1",
-  "link": "_link_c4739_1",
-  "logo": "_logo_c4739_1",
-  "pagination": "_pagination_c4739_1 _ds-pagination_nwz76_5",
-  "popover": "_popover_c4739_1",
-  "progress": "_progress_c4739_1",
-  "skeleton": "_skeleton_c4739_1 _ds-skeleton_nwz76_5",
-  "spinner": "_spinner_c4739_1",
-  "steps": "_steps_c4739_1",
-  "table": "_table_c4739_1 _ds-table_nwz76_5",
-  "tabs": "_tabs_c4739_1 _ds-tabs_nwz76_5",
-  "tag": "_tag_c4739_1 _ds-tag_nwz76_5",
-  "toast": "_toast_c4739_1",
-  "togglegroup": "_togglegroup_c4739_1",
-  "heading": "_heading_c4739_1 _ds-heading_nwz76_1",
-  "ingress": "_ingress_c4739_1",
-  "muted": "_muted_c4739_1",
-  "info": "_info_c4739_1",
-  "prose": "_prose_c4739_1",
-  "validation": "_validation_c4739_1 _ds-validation-message_nwz76_1",
-  "body": "_body_c4739_168"
+  "alert": "_alert_1nshl_1 _ds-alert_nwz76_3",
+  "app": "_app_1nshl_1",
+  "sticky": "_sticky_1nshl_1",
+  "avatar": "_avatar_1nshl_1 _ds-avatar_nwz76_1",
+  "badge": "_badge_1nshl_1",
+  "breadcrumbs": "_breadcrumbs_1nshl_1 _ds-breadcrumbs_nwz76_5",
+  "button": "_button_1nshl_1 _ds-button_nwz76_1",
+  "card": "_card_1nshl_1",
+  "group": "_group_1nshl_1",
+  "chip": "_chip_1nshl_1 _ds-chip_nwz76_5",
+  "details": "_details_1nshl_1 _ds-details_nwz76_3",
+  "dialog": "_dialog_1nshl_1 _ds-dialog_nwz76_5",
+  "divider": "_divider_1nshl_1",
+  "errorsummary": "_errorsummary_1nshl_1 _ds-error-summary_nwz76_5",
+  "field": "_field_1nshl_1 _ds-field_nwz76_1",
+  "affixes": "_affixes_1nshl_1 _ds-field-affixes_nwz76_3",
+  "fieldset": "_fieldset_1nshl_1 _ds-fieldset_nwz76_3",
+  "helptext": "_helptext_1nshl_1 _ds-focus_nwz76_1",
+  "input": "_input_1nshl_1 _ds-input_nwz76_1",
+  "grid": "_grid_1nshl_1",
+  "flex": "_flex_1nshl_1",
+  "link": "_link_1nshl_1",
+  "logo": "_logo_1nshl_1",
+  "pagination": "_pagination_1nshl_1 _ds-pagination_nwz76_5",
+  "popover": "_popover_1nshl_1",
+  "progress": "_progress_1nshl_1",
+  "skeleton": "_skeleton_1nshl_1 _ds-skeleton_nwz76_5",
+  "spinner": "_spinner_1nshl_1",
+  "steps": "_steps_1nshl_1",
+  "table": "_table_1nshl_1 _ds-table_nwz76_5",
+  "tabs": "_tabs_1nshl_1 _ds-tabs_nwz76_5",
+  "tag": "_tag_1nshl_1 _ds-tag_nwz76_5",
+  "toast": "_toast_1nshl_1",
+  "togglegroup": "_togglegroup_1nshl_1",
+  "heading": "_heading_1nshl_1 _ds-heading_nwz76_1",
+  "ingress": "_ingress_1nshl_1",
+  "muted": "_muted_1nshl_1",
+  "info": "_info_1nshl_1",
+  "prose": "_prose_1nshl_1",
+  "validation": "_validation_1nshl_1 _ds-validation-message_nwz76_1",
+  "body": "_body_1nshl_172"
 }

package/mtds/styles.module.css.js

@@ -1,26 +1,26 @@
-const _ = "_alert_c4739_1 _ds-alert_nwz76_3", t = "_app_c4739_1", s = "_sticky_c4739_1", o = "_avatar_c4739_1 _ds-avatar_nwz76_1", c = "_badge_c4739_1", e = "_breadcrumbs_c4739_1 _ds-breadcrumbs_nwz76_5", n = "_button_c4739_1 _ds-button_nwz76_1", a = "_card_c4739_1", r = "_group_c4739_1", i = "_chip_c4739_1 _ds-chip_nwz76_5", d = "_details_c4739_1 _ds-details_nwz76_3", l = "_dialog_c4739_1 _ds-dialog_nwz76_5", p = "__drawer_c4739_1", g = "_divider_c4739_1", u = "_errorsummary_c4739_1 _ds-error-summary_nwz76_5", m = "__errorsummary_c4739_1", b = "_field_c4739_1 _ds-field_nwz76_1", w = "__datalist_c4739_1", f = "_affixes_c4739_1 _ds-field-affixes_nwz76_3", z = "_fieldset_c4739_1 _ds-fieldset_nwz76_3", k = "_helptext_c4739_1 _ds-focus_nwz76_1", h = "_input_c4739_1 _ds-input_nwz76_1", v = "_grid_c4739_1", y = "_flex_c4739_1", x = "_link_c4739_1", C = "_logo_c4739_1", M = "_pagination_c4739_1 _ds-pagination_nwz76_5", O = "_popover_c4739_1", S = "_progress_c4739_1", T = "__indeterminate_c4739_1", j = "_skeleton_c4739_1 _ds-skeleton_nwz76_5", q = "__skeleton_c4739_1", A = "_spinner_c4739_1", B = "_steps_c4739_1", D = "_table_c4739_1 _ds-table_nwz76_5", E = "__scrollShadow_c4739_1", F = "_tabs_c4739_1 _ds-tabs_nwz76_5", G = "__scrollMask_c4739_1", H = "_tag_c4739_1 _ds-tag_nwz76_5", I = "_toast_c4739_1", J = "__toastClose_c4739_1", K = "__toastOpen_c4739_1", L = "__toastTimeout_c4739_1", N = "_togglegroup_c4739_1", P = "__tooltip_c4739_1", Q = "_heading_c4739_1 _ds-heading_nwz76_1", R = "_ingress_c4739_1", U = "_muted_c4739_1", V = "_info_c4739_1", W = "_prose_c4739_1", X = "_validation_c4739_1 _ds-validation-message_nwz76_1", Y = "_body_c4739_168", Z = "__checked_c4739_1", $ = {
+const _ = "_alert_1nshl_1 _ds-alert_nwz76_3", s = "_app_1nshl_1", n = "_sticky_1nshl_1", t = "_avatar_1nshl_1 _ds-avatar_nwz76_1", o = "_badge_1nshl_1", e = "_breadcrumbs_1nshl_1 _ds-breadcrumbs_nwz76_5", l = "_button_1nshl_1 _ds-button_nwz76_1", a = "_card_1nshl_1", r = "_group_1nshl_1", i = "_chip_1nshl_1 _ds-chip_nwz76_5", d = "_details_1nshl_1 _ds-details_nwz76_3", c = "_dialog_1nshl_1 _ds-dialog_nwz76_5", h = "__drawer_1nshl_1", p = "_divider_1nshl_1", g = "_errorsummary_1nshl_1 _ds-error-summary_nwz76_5", u = "__errorsummary_1nshl_1", m = "_field_1nshl_1 _ds-field_nwz76_1", b = "__datalist_1nshl_1", w = "_affixes_1nshl_1 _ds-field-affixes_nwz76_3", f = "_fieldset_1nshl_1 _ds-fieldset_nwz76_3", z = "_helptext_1nshl_1 _ds-focus_nwz76_1", k = "_input_1nshl_1 _ds-input_nwz76_1", v = "_grid_1nshl_1", y = "_flex_1nshl_1", x = "_link_1nshl_1", C = "_logo_1nshl_1", M = "_pagination_1nshl_1 _ds-pagination_nwz76_5", O = "_popover_1nshl_1", S = "_progress_1nshl_1", T = "__indeterminate_1nshl_1", j = "_skeleton_1nshl_1 _ds-skeleton_nwz76_5", q = "__skeleton_1nshl_1", A = "_spinner_1nshl_1", B = "_steps_1nshl_1", D = "_table_1nshl_1 _ds-table_nwz76_5", E = "__scrollShadow_1nshl_1", F = "_tabs_1nshl_1 _ds-tabs_nwz76_5", G = "__scrollMask_1nshl_1", H = "_tag_1nshl_1 _ds-tag_nwz76_5", I = "_toast_1nshl_1", J = "__toastClose_1nshl_1", K = "__toastOpen_1nshl_1", L = "__toastTimeout_1nshl_1", N = "_togglegroup_1nshl_1", P = "__tooltip_1nshl_1", Q = "_heading_1nshl_1 _ds-heading_nwz76_1", R = "_ingress_1nshl_1", U = "_muted_1nshl_1", V = "_info_1nshl_1", W = "_prose_1nshl_1", X = "_validation_1nshl_1 _ds-validation-message_nwz76_1", Y = "_body_1nshl_172", Z = "__checked_1nshl_1", $ = {
   alert: _,
-  app: t,
-  sticky: s,
-  avatar: o,
-  badge: c,
+  app: s,
+  sticky: n,
+  avatar: t,
+  badge: o,
   breadcrumbs: e,
-  button: n,
+  button: l,
   card: a,
   group: r,
   chip: i,
   details: d,
-  dialog: l,
-  _drawer: p,
-  divider: g,
-  errorsummary: u,
-  _errorsummary: m,
-  field: b,
-  _datalist: w,
-  affixes: f,
-  fieldset: z,
-  helptext: k,
-  input: h,
+  dialog: c,
+  _drawer: h,
+  divider: p,
+  errorsummary: g,
+  _errorsummary: u,
+  field: m,
+  _datalist: b,
+  affixes: w,
+  fieldset: f,
+  helptext: z,
+  input: k,
   grid: v,
   flex: y,
   link: x,
@@ -55,9 +55,9 @@ const _ = "_alert_c4739_1 _ds-alert_nwz76_3", t = "_app_c4739_1", s = "_sticky_c
 };
 export {
   Z as _checked,
-  w as _datalist,
-  p as _drawer,
-  m as _errorsummary,
+  b as _datalist,
+  h as _drawer,
+  u as _errorsummary,
   T as _indeterminate,
   G as _scrollMask,
   E as _scrollShadow,
@@ -66,31 +66,31 @@ export {
   K as _toastOpen,
   L as _toastTimeout,
   P as _tooltip,
-  f as affixes,
+  w as affixes,
   _ as alert,
-  t as app,
-  o as avatar,
-  c as badge,
+  s as app,
+  t as avatar,
+  o as badge,
   Y as body,
   e as breadcrumbs,
-  n as button,
+  l as button,
   a as card,
   i as chip,
   $ as default,
   d as details,
-  l as dialog,
-  g as divider,
-  u as errorsummary,
-  b as field,
-  z as fieldset,
+  c as dialog,
+  p as divider,
+  g as errorsummary,
+  m as field,
+  f as fieldset,
   y as flex,
   v as grid,
   r as group,
   Q as heading,
-  k as helptext,
+  z as helptext,
   V as info,
   R as ingress,
-  h as input,
+  k as input,
   x as link,
   C as logo,
   U as muted,
@@ -101,7 +101,7 @@ export {
   j as skeleton,
   A as spinner,
   B as steps,
-  s as sticky,
+  n as sticky,
   D as table,
   F as tabs,
   H as tag,

package/mtds/tailwind.css

@@ -72,6 +72,7 @@
 	--color-info-text-default: var(--mtds-color-info-text-default);
 	--color-info-text-subtle: var(--mtds-color-info-text-subtle);
 	--color-inverted-background-default: var(--mtds-color-inverted-background-default);
+	--color-inverted-background-default : var(--mtds-color-inverted-background-default );
 	--color-inverted-background-tinted: var(--mtds-color-inverted-background-tinted);
 	--color-inverted-base-active: var(--mtds-color-inverted-base-active);
 	--color-inverted-base-contrast-default: var(--mtds-color-inverted-base-contrast-default);

package/mtds/toast/toast-helper.d.ts

@@ -9,3 +9,15 @@ export type ToastOptions = {
     id?: string;
 };
 export declare function toast(content: string, opt?: ToastOptions): string;
+export declare namespace toast {
+    var success: (content: string, opt?: ToastOptions) => string;
+    var danger: (content: string, opt?: ToastOptions) => string;
+    var info: (content: string, opt: ToastOptions) => string;
+    var warning: (content: string, opt?: ToastOptions) => string;
+    var neutral: (content: string, opt?: ToastOptions) => string;
+    var promise: <T>(action: () => Promise<T>, props: ToastOptions & {
+        loading: string;
+        success: string;
+        error: string;
+    }) => Promise<T>;
+}

package/mtds/toast/toast-helper.js

@@ -1,14 +1,28 @@
-import { clsx as a } from "../external/clsx/dist/clsx.js";
+import { clsx as m } from "../external/clsx/dist/clsx.js";
 import l from "../styles.module.css.js";
-import { attr as t } from "../utils.js";
-function u(o, n = {}) {
-  const e = document.getElementById(n.id || "") || document.createElement("dialog");
-  return t(e, "aria-busy", n.busy ? "true" : null), t(e, "class", a(l.toast, n.className)), t(e, "data-closedby", n.closedby || null), t(e, "data-color", n.color || null), t(e, "data-icon", `${n.icon ?? ""}` || null), t(e, "data-timeout", `${n.timeout ?? ""}` || null), t(e, "id", n.id || `${Date.now()}`), t(e, "open", n.open === !1 ? null : ""), e.innerHTML = o, e.addEventListener("animationend", d, { once: !0 }), document.body.appendChild(e), e.id;
+import { tag as f, attr as s } from "../utils.js";
+function r(e, o = {}) {
+  const n = document.getElementById(o.id || "") || f("dialog");
+  return s(n, "aria-busy", o.busy ? "true" : null), s(n, "class", m(l.toast, o.className)), s(n, "data-closedby", o.closedby || null), s(n, "data-color", o.color || null), s(n, "data-icon", `${o.icon ?? ""}` || null), s(n, "data-timeout", `${o.timeout ?? ""}` || null), s(n, "id", o.id || `${Date.now()}`), s(n, "open", o.open === !1 ? null : ""), n.innerHTML = e, n.addEventListener("animationend", y, { once: !0 }), document.body.appendChild(n), n.id;
 }
-function d({ animationName: o, target: n }) {
-  o === l._toastClose && n.remove();
+function y({ animationName: e, target: o }) {
+  e === l._toastClose && o.remove();
 }
+r.success = (e, o) => r(e, { color: "success", ...o });
+r.danger = (e, o) => r(e, { color: "danger", ...o });
+r.info = (e, o) => r(e, { color: "info", ...o });
+r.warning = (e, o) => r(e, { color: "warning", ...o });
+r.neutral = (e, o) => r(e, { color: "neutral", ...o });
+r.promise = async function(o, n) {
+  const { loading: c, success: i, error: u, ...d } = n, a = r(c, { busy: !0, ...d });
+  try {
+    const t = await o();
+    return r.success(i, { id: a, busy: !1 }), t;
+  } catch (t) {
+    throw r.danger(u, { id: a, busy: !1 }), t;
+  }
+};
 export {
-  u as toast
+  r as toast
 };
 //# sourceMappingURL=toast-helper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toast-helper.js","sources":["../../designsystem/toast/toast-helper.ts"],"sourcesContent":["import clsx from \"clsx\";\nimport styles from \"../styles.module.css\";\nimport { attr } from \"../utils\";\n\nexport type ToastOptions = {\n\tclassName?: string;\n\tclosedby?: \"none\";\n\tcolor?: \"main\" | \"neutral\" | \"success\" | \"danger\" | \"info\" | \"warning\";\n\ticon?: boolean | \"none\";\n\ttimeout?: number | false;\n\tbusy?: boolean;\n\topen?: boolean;\n\tid?: string;\n};\n\nexport function toast(content: string, opt: ToastOptions = {}) {\n\tconst dialog =\n\t\tdocument.getElementById(opt.id || \"\") || document.createElement(\"dialog\");\n\n\tattr(dialog, \"aria-busy\", opt.busy ? \"true\" : null);\n\tattr(dialog, \"class\", clsx(styles.toast, opt.className));\n\tattr(dialog, \"data-closedby\", opt.closedby || null);\n\tattr(dialog, \"data-color\", opt.color || null);\n\tattr(dialog, \"data-icon\", `${opt.icon ?? \"\"}` || null);\n\tattr(dialog, \"data-timeout\", `${opt.timeout ?? \"\"}` || null);\n\tattr(dialog, \"id\", opt.id || `${Date.now()}`);\n\tattr(dialog, \"open\", opt.open === false ? null : \"\");\n\n\tdialog.innerHTML = content;\n\tdialog.addEventListener(\"animationend\", handleToastClose, { once: true });\n\tdocument.body.appendChild(dialog);\n\treturn dialog.id;\n}\n\nfunction handleToastClose({ animationName, target }: Partial<AnimationEvent>) {\n\tif (animationName === styles._toastClose)\n\t\t(target as HTMLDialogElement).remove();\n}\n"],"names":["toast","content","opt","dialog","attr","clsx","styles","handleToastClose","animationName","target"],"mappings":";;;AAeO,SAASA,EAAMC,GAAiBC,IAAoB,IAAI;AAC9D,QAAMC,IACL,SAAS,eAAeD,EAAI,MAAM,EAAE,KAAK,SAAS,cAAc,QAAQ;AAEzE,SAAAE,EAAKD,GAAQ,aAAaD,EAAI,OAAO,SAAS,IAAI,GAClDE,EAAKD,GAAQ,SAASE,EAAKC,EAAO,OAAOJ,EAAI,SAAS,CAAC,GACvDE,EAAKD,GAAQ,iBAAiBD,EAAI,YAAY,IAAI,GAClDE,EAAKD,GAAQ,cAAcD,EAAI,SAAS,IAAI,GAC5CE,EAAKD,GAAQ,aAAa,GAAGD,EAAI,QAAQ,EAAE,MAAM,IAAI,GACrDE,EAAKD,GAAQ,gBAAgB,GAAGD,EAAI,WAAW,EAAE,MAAM,IAAI,GAC3DE,EAAKD,GAAQ,MAAMD,EAAI,MAAM,GAAG,KAAK,IAAA,CAAK,EAAE,GAC5CE,EAAKD,GAAQ,QAAQD,EAAI,SAAS,KAAQ,OAAO,EAAE,GAEnDC,EAAO,YAAYF,GACnBE,EAAO,iBAAiB,gBAAgBI,GAAkB,EAAE,MAAM,IAAM,GACxE,SAAS,KAAK,YAAYJ,CAAM,GACzBA,EAAO;AACf;AAEA,SAASI,EAAiB,EAAE,eAAAC,GAAe,QAAAC,KAAmC;AAC7E,EAAID,MAAkBF,EAAO,eAC3BG,EAA6B,OAAA;AAChC;"}
+{"version":3,"file":"toast-helper.js","sources":["../../designsystem/toast/toast-helper.ts"],"sourcesContent":["import clsx from \"clsx\";\nimport styles from \"../styles.module.css\";\nimport { attr, tag } from \"../utils\";\n\nexport type ToastOptions = {\n\tclassName?: string;\n\tclosedby?: \"none\";\n\tcolor?: \"main\" | \"neutral\" | \"success\" | \"danger\" | \"info\" | \"warning\";\n\ticon?: boolean | \"none\";\n\ttimeout?: number | false;\n\tbusy?: boolean;\n\topen?: boolean;\n\tid?: string;\n};\n\nexport function toast(content: string, opt: ToastOptions = {}) {\n\tconst dialog = document.getElementById(opt.id || \"\") || tag(\"dialog\");\n\n\tattr(dialog, \"aria-busy\", opt.busy ? \"true\" : null);\n\tattr(dialog, \"class\", clsx(styles.toast, opt.className));\n\tattr(dialog, \"data-closedby\", opt.closedby || null);\n\tattr(dialog, \"data-color\", opt.color || null);\n\tattr(dialog, \"data-icon\", `${opt.icon ?? \"\"}` || null);\n\tattr(dialog, \"data-timeout\", `${opt.timeout ?? \"\"}` || null);\n\tattr(dialog, \"id\", opt.id || `${Date.now()}`);\n\tattr(dialog, \"open\", opt.open === false ? null : \"\");\n\n\tdialog.innerHTML = content;\n\tdialog.addEventListener(\"animationend\", handleToastClose, { once: true });\n\tdocument.body.appendChild(dialog);\n\treturn dialog.id;\n}\n\nfunction handleToastClose({ animationName, target }: Partial<AnimationEvent>) {\n\tif (animationName === styles._toastClose)\n\t\t(target as HTMLDialogElement).remove();\n}\n\n// Expose toast.danger, toast.info, toast.success etc.\ntoast.success = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"success\", ...opt });\ntoast.danger = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"danger\", ...opt });\ntoast.info = (content: string, opt: ToastOptions) =>\n\ttoast(content, { color: \"info\", ...opt });\ntoast.warning = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"warning\", ...opt });\ntoast.neutral = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"neutral\", ...opt });\ntoast.promise = async function promise<T>(\n\taction: () => Promise<T>,\n\tprops: ToastOptions & {\n\t\tloading: string;\n\t\tsuccess: string;\n\t\terror: string;\n\t},\n): Promise<T> {\n\tconst { loading, success, error, ...opt } = props;\n\tconst id = toast(loading, { busy: true, ...opt });\n\ttry {\n\t\tconst result = await action();\n\t\ttoast.success(success, { id, busy: false });\n\t\treturn result;\n\t} catch (_error) {\n\t\ttoast.danger(error, { id, busy: false });\n\t\tthrow _error;\n\t}\n};\n"],"names":["toast","content","opt","dialog","tag","attr","clsx","styles","handleToastClose","animationName","target","action","props","loading","success","error","id","result","_error"],"mappings":";;;AAeO,SAASA,EAAMC,GAAiBC,IAAoB,IAAI;AAC9D,QAAMC,IAAS,SAAS,eAAeD,EAAI,MAAM,EAAE,KAAKE,EAAI,QAAQ;AAEpE,SAAAC,EAAKF,GAAQ,aAAaD,EAAI,OAAO,SAAS,IAAI,GAClDG,EAAKF,GAAQ,SAASG,EAAKC,EAAO,OAAOL,EAAI,SAAS,CAAC,GACvDG,EAAKF,GAAQ,iBAAiBD,EAAI,YAAY,IAAI,GAClDG,EAAKF,GAAQ,cAAcD,EAAI,SAAS,IAAI,GAC5CG,EAAKF,GAAQ,aAAa,GAAGD,EAAI,QAAQ,EAAE,MAAM,IAAI,GACrDG,EAAKF,GAAQ,gBAAgB,GAAGD,EAAI,WAAW,EAAE,MAAM,IAAI,GAC3DG,EAAKF,GAAQ,MAAMD,EAAI,MAAM,GAAG,KAAK,IAAA,CAAK,EAAE,GAC5CG,EAAKF,GAAQ,QAAQD,EAAI,SAAS,KAAQ,OAAO,EAAE,GAEnDC,EAAO,YAAYF,GACnBE,EAAO,iBAAiB,gBAAgBK,GAAkB,EAAE,MAAM,IAAM,GACxE,SAAS,KAAK,YAAYL,CAAM,GACzBA,EAAO;AACf;AAEA,SAASK,EAAiB,EAAE,eAAAC,GAAe,QAAAC,KAAmC;AAC7E,EAAID,MAAkBF,EAAO,eAC3BG,EAA6B,OAAA;AAChC;AAGAV,EAAM,UAAU,CAACC,GAAiBC,MACjCF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,SAAS,CAACC,GAAiBC,MAChCF,EAAMC,GAAS,EAAE,OAAO,UAAU,GAAGC,GAAK;AAC3CF,EAAM,OAAO,CAACC,GAAiBC,MAC9BF,EAAMC,GAAS,EAAE,OAAO,QAAQ,GAAGC,GAAK;AACzCF,EAAM,UAAU,CAACC,GAAiBC,MACjCF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,UAAU,CAACC,GAAiBC,MACjCF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,UAAU,eACfW,GACAC,GAKa;AACb,QAAM,EAAE,SAAAC,GAAS,SAAAC,GAAS,OAAAC,GAAO,GAAGb,MAAQU,GACtCI,IAAKhB,EAAMa,GAAS,EAAE,MAAM,IAAM,GAAGX,GAAK;AAChD,MAAI;AACH,UAAMe,IAAS,MAAMN,EAAA;AACrB,WAAAX,EAAM,QAAQc,GAAS,EAAE,IAAAE,GAAI,MAAM,IAAO,GACnCC;AAAA,EACR,SAASC,GAAQ;AAChB,UAAAlB,EAAM,OAAOe,GAAO,EAAE,IAAAC,GAAI,MAAM,IAAO,GACjCE;AAAA,EACP;AACD;"}

package/mtds/toast/toast.d.ts

@@ -8,3 +8,15 @@ declare global {
     }
 }
 export declare function toast(content: React.ReactNode, opt?: ToastOptions): string;
+export declare namespace toast {
+    var success: (content: React.ReactNode, opt?: ToastOptions) => string;
+    var danger: (content: React.ReactNode, opt?: ToastOptions) => string;
+    var info: (content: React.ReactNode, opt?: ToastOptions) => string;
+    var warning: (content: React.ReactNode, opt?: ToastOptions) => string;
+    var neutral: (content: React.ReactNode, opt?: ToastOptions) => string;
+    var promise: <T>(action: () => Promise<T>, props: ToastOptions & {
+        loading: React.ReactNode;
+        success: React.ReactNode;
+        error: React.ReactNode;
+    }) => Promise<T>;
+}

package/mtds/toast/toast.js

@@ -1,39 +1,53 @@
-import { jsx as n } from "react/jsx-runtime";
-import { clsx as i } from "../external/clsx/dist/clsx.js";
-import { c } from "../_virtual/client.js";
-import r from "../styles.module.css.js";
-import { IS_BROWSER as m } from "../utils.js";
-if (m && !window._mtdsReactToasts) {
-  const o = document.body.appendChild(document.createElement("div")), t = c.createRoot(o), e = /* @__PURE__ */ new Map(), d = () => t.render(Array.from(e.values() || []));
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as u } from "../external/clsx/dist/clsx.js";
+import { c as f } from "../_virtual/client.js";
+import i from "../styles.module.css.js";
+import { IS_BROWSER as w, tag as y } from "../utils.js";
+if (w && !window._mtdsReactToasts) {
+  const t = f.createRoot(document.body.appendChild(y("div"))), o = /* @__PURE__ */ new Map(), e = () => t.render(Array.from(o.values() || []));
   window._mtdsReactToasts = {
-    set: (s, a) => e.set(s, a) && d(),
-    delete: ({ animationName: s, currentTarget: a }) => {
-      s === r._toastClose && (e.delete(a.id), d());
+    set: (r, a) => o.set(r, a) && e(),
+    delete: ({ animationName: r, currentTarget: a }) => {
+      r === i._toastClose && (o.delete(a.id), e());
     }
   };
 }
-function R(o, t = {}) {
-  const e = t.id || `${Date.now()}`;
+function s(t, o = {}) {
+  const e = o.id || `${Date.now()}`;
   return window._mtdsReactToasts?.set(
     e,
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ m(
       "dialog",
       {
-        "aria-busy": t.busy,
-        className: i(r.toast, t.className),
-        "data-closedby": t.closedby,
-        "data-color": t.color,
-        "data-timeout": t.timeout,
+        "aria-busy": o.busy,
+        className: u(i.toast, o.className),
+        "data-closedby": o.closedby,
+        "data-color": o.color,
+        "data-timeout": o.timeout,
         id: e,
         onAnimationEnd: window._mtdsReactToasts.delete,
-        open: t.open ?? !0,
-        children: o
+        open: o.open ?? !0,
+        children: t
       },
       e
     )
   ), e;
 }
+s.success = (t, o) => s(t, { color: "success", ...o });
+s.danger = (t, o) => s(t, { color: "danger", ...o });
+s.info = (t, o) => s(t, { color: "info", ...o });
+s.warning = (t, o) => s(t, { color: "warning", ...o });
+s.neutral = (t, o) => s(t, { color: "neutral", ...o });
+s.promise = async function(o, e) {
+  const { loading: r, success: a, error: d, ...l } = e, c = s(r, { busy: !0, ...l });
+  try {
+    const n = await o();
+    return s.success(a, { id: c, busy: !1 }), n;
+  } catch (n) {
+    throw s.danger(d, { id: c, busy: !1 }), n;
+  }
+};
 export {
-  R as toast
+  s as toast
 };
 //# sourceMappingURL=toast.js.map

package/mtds/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../designsystem/toast/toast.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createRoot } from \"react-dom/client\";\nimport styles from \"../styles.module.css\";\nimport { IS_BROWSER } from \"../utils\";\nimport type { ToastOptions } from \"./toast-helper\";\n\ndeclare global {\n\tinterface Window {\n\t\t_mtdsReactToasts?: {\n\t\t\tset: (id: string, jsx: React.ReactNode) => void;\n\t\t\tdelete: (event: React.AnimationEvent<HTMLDialogElement>) => void;\n\t\t};\n\t}\n}\n\n// Ensure only a single toast master is created\nif (IS_BROWSER && !window._mtdsReactToasts) {\n\tconst node = document.body.appendChild(document.createElement(\"div\"));\n\tconst root = createRoot(node);\n\tconst toasts = new Map<string, React.ReactNode>();\n\tconst render = () => root.render(Array.from(toasts.values() || []));\n\n\twindow._mtdsReactToasts = {\n\t\tset: (id, jsx) => toasts.set(id, jsx) && render(),\n\t\tdelete: ({ animationName, currentTarget }) => {\n\t\t\tif (animationName !== styles._toastClose) return;\n\t\t\ttoasts.delete(currentTarget.id);\n\t\t\trender();\n\t\t},\n\t};\n}\n\nexport function toast(content: React.ReactNode, opt: ToastOptions = {}) {\n\tconst id = opt.id || `${Date.now()}`;\n\twindow._mtdsReactToasts?.set(\n\t\tid,\n\t\t<dialog\n\t\t\taria-busy={opt.busy}\n\t\t\tclassName={clsx(styles.toast, opt.className)}\n\t\t\tdata-closedby={opt.closedby}\n\t\t\tdata-color={opt.color}\n\t\t\tdata-timeout={opt.timeout}\n\t\t\tid={id}\n\t\t\tkey={id}\n\t\t\tonAnimationEnd={window._mtdsReactToasts.delete}\n\t\t\topen={opt.open ?? true}\n\t\t>\n\t\t\t{content}\n\t\t</dialog>,\n\t);\n\n\treturn id;\n}\n"],"names":["IS_BROWSER","node","root","createRoot","toasts","render","id","jsx","animationName","currentTarget","styles","toast","content","opt","clsx"],"mappings":";;;;;AAgBA,IAAIA,KAAc,CAAC,OAAO,kBAAkB;AAC3C,QAAMC,IAAO,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC,GAC9DC,IAAOC,EAAAA,WAAWF,CAAI,GACtBG,wBAAa,IAAA,GACbC,IAAS,MAAMH,EAAK,OAAO,MAAM,KAAKE,EAAO,YAAY,CAAA,CAAE,CAAC;AAElE,SAAO,mBAAmB;AAAA,IACzB,KAAK,CAACE,GAAIC,MAAQH,EAAO,IAAIE,GAAIC,CAAG,KAAKF,EAAA;AAAA,IACzC,QAAQ,CAAC,EAAE,eAAAG,GAAe,eAAAC,QAAoB;AAC7C,MAAID,MAAkBE,EAAO,gBAC7BN,EAAO,OAAOK,EAAc,EAAE,GAC9BJ,EAAA;AAAA,IACD;AAAA,EAAA;AAEF;AAEO,SAASM,EAAMC,GAA0BC,IAAoB,IAAI;AACvE,QAAMP,IAAKO,EAAI,MAAM,GAAG,KAAK,KAAK;AAClC,gBAAO,kBAAkB;AAAA,IACxBP;AAAA,IACA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,aAAWM,EAAI;AAAA,QACf,WAAWC,EAAKJ,EAAO,OAAOG,EAAI,SAAS;AAAA,QAC3C,iBAAeA,EAAI;AAAA,QACnB,cAAYA,EAAI;AAAA,QAChB,gBAAcA,EAAI;AAAA,QAClB,IAAAP;AAAA,QAEA,gBAAgB,OAAO,iBAAiB;AAAA,QACxC,MAAMO,EAAI,QAAQ;AAAA,QAEjB,UAAAD;AAAA,MAAA;AAAA,MAJIN;AAAA,IAAA;AAAA,EAKN,GAGMA;AACR;"}
+{"version":3,"file":"toast.js","sources":["../../designsystem/toast/toast.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createRoot } from \"react-dom/client\";\nimport styles from \"../styles.module.css\";\nimport { IS_BROWSER, tag } from \"../utils\";\nimport type { ToastOptions } from \"./toast-helper\";\n\ndeclare global {\n\tinterface Window {\n\t\t_mtdsReactToasts?: {\n\t\t\tset: (id: string, jsx: React.ReactNode) => void;\n\t\t\tdelete: (event: React.AnimationEvent<HTMLDialogElement>) => void;\n\t\t};\n\t}\n}\n\n// Ensure only a single toast master is created\nif (IS_BROWSER && !window._mtdsReactToasts) {\n\tconst root = createRoot(document.body.appendChild(tag(\"div\")));\n\tconst toasts = new Map<string, React.ReactNode>();\n\tconst render = () => root.render(Array.from(toasts.values() || []));\n\n\t// Expose methods to add/remove toasts from the root container\n\twindow._mtdsReactToasts = {\n\t\tset: (id, jsx) => toasts.set(id, jsx) && render(),\n\t\tdelete: ({ animationName, currentTarget }) => {\n\t\t\tif (animationName !== styles._toastClose) return;\n\t\t\ttoasts.delete(currentTarget.id);\n\t\t\trender();\n\t\t},\n\t};\n}\n\nexport function toast(content: React.ReactNode, opt: ToastOptions = {}) {\n\tconst id = opt.id || `${Date.now()}`;\n\twindow._mtdsReactToasts?.set(\n\t\tid,\n\t\t<dialog\n\t\t\taria-busy={opt.busy}\n\t\t\tclassName={clsx(styles.toast, opt.className)}\n\t\t\tdata-closedby={opt.closedby}\n\t\t\tdata-color={opt.color}\n\t\t\tdata-timeout={opt.timeout}\n\t\t\tid={id}\n\t\t\tkey={id}\n\t\t\tonAnimationEnd={window._mtdsReactToasts.delete}\n\t\t\topen={opt.open ?? true}\n\t\t>\n\t\t\t{content}\n\t\t</dialog>,\n\t);\n\n\treturn id;\n}\n\n// Expose toast.danger, toast.info, toast.success etc.\ntoast.success = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"success\", ...opt });\ntoast.danger = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"danger\", ...opt });\ntoast.info = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"info\", ...opt });\ntoast.warning = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"warning\", ...opt });\ntoast.neutral = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"neutral\", ...opt });\ntoast.promise = async function promise<T>(\n\taction: () => Promise<T>,\n\tprops: ToastOptions & {\n\t\tloading: React.ReactNode;\n\t\tsuccess: React.ReactNode;\n\t\terror: React.ReactNode;\n\t},\n): Promise<T> {\n\tconst { loading, success, error, ...opt } = props;\n\tconst id = toast(loading, { busy: true, ...opt });\n\ttry {\n\t\tconst result = await action();\n\t\ttoast.success(success, { id, busy: false });\n\t\treturn result;\n\t} catch (_error) {\n\t\ttoast.danger(error, { id, busy: false });\n\t\tthrow _error;\n\t}\n};\n"],"names":["IS_BROWSER","root","createRoot","tag","toasts","render","id","jsx","animationName","currentTarget","styles","toast","content","opt","clsx","action","props","loading","success","error","result","_error"],"mappings":";;;;;AAgBA,IAAIA,KAAc,CAAC,OAAO,kBAAkB;AAC3C,QAAMC,IAAOC,EAAAA,WAAW,SAAS,KAAK,YAAYC,EAAI,KAAK,CAAC,CAAC,GACvDC,wBAAa,IAAA,GACbC,IAAS,MAAMJ,EAAK,OAAO,MAAM,KAAKG,EAAO,YAAY,CAAA,CAAE,CAAC;AAGlE,SAAO,mBAAmB;AAAA,IACzB,KAAK,CAACE,GAAIC,MAAQH,EAAO,IAAIE,GAAIC,CAAG,KAAKF,EAAA;AAAA,IACzC,QAAQ,CAAC,EAAE,eAAAG,GAAe,eAAAC,QAAoB;AAC7C,MAAID,MAAkBE,EAAO,gBAC7BN,EAAO,OAAOK,EAAc,EAAE,GAC9BJ,EAAA;AAAA,IACD;AAAA,EAAA;AAEF;AAEO,SAASM,EAAMC,GAA0BC,IAAoB,IAAI;AACvE,QAAMP,IAAKO,EAAI,MAAM,GAAG,KAAK,KAAK;AAClC,gBAAO,kBAAkB;AAAA,IACxBP;AAAA,IACA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,aAAWM,EAAI;AAAA,QACf,WAAWC,EAAKJ,EAAO,OAAOG,EAAI,SAAS;AAAA,QAC3C,iBAAeA,EAAI;AAAA,QACnB,cAAYA,EAAI;AAAA,QAChB,gBAAcA,EAAI;AAAA,QAClB,IAAAP;AAAA,QAEA,gBAAgB,OAAO,iBAAiB;AAAA,QACxC,MAAMO,EAAI,QAAQ;AAAA,QAEjB,UAAAD;AAAA,MAAA;AAAA,MAJIN;AAAA,IAAA;AAAA,EAKN,GAGMA;AACR;AAGAK,EAAM,UAAU,CAACC,GAA0BC,MAC1CF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,SAAS,CAACC,GAA0BC,MACzCF,EAAMC,GAAS,EAAE,OAAO,UAAU,GAAGC,GAAK;AAC3CF,EAAM,OAAO,CAACC,GAA0BC,MACvCF,EAAMC,GAAS,EAAE,OAAO,QAAQ,GAAGC,GAAK;AACzCF,EAAM,UAAU,CAACC,GAA0BC,MAC1CF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,UAAU,CAACC,GAA0BC,MAC1CF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,UAAU,eACfI,GACAC,GAKa;AACb,QAAM,EAAE,SAAAC,GAAS,SAAAC,GAAS,OAAAC,GAAO,GAAGN,MAAQG,GACtCV,IAAKK,EAAMM,GAAS,EAAE,MAAM,IAAM,GAAGJ,GAAK;AAChD,MAAI;AACH,UAAMO,IAAS,MAAML,EAAA;AACrB,WAAAJ,EAAM,QAAQO,GAAS,EAAE,IAAAZ,GAAI,MAAM,IAAO,GACnCc;AAAA,EACR,SAASC,GAAQ;AAChB,UAAAV,EAAM,OAAOQ,GAAO,EAAE,IAAAb,GAAI,MAAM,IAAO,GACjCe;AAAA,EACP;AACD;"}

package/mtds/toast/toast.stories.d.ts

@@ -14,6 +14,7 @@ export declare const Default: Story;
 export declare const React: Story;
 export declare const Colors: Story;
 export declare const WithLoading: Story;
+export declare const WithPromise: Story;
 export declare const WithNoTimeout: Story;
 export declare const WithCustomClose: Story;
 export declare const HTML: Story;

package/mtds/tooltip/tooltip-observer.js

@@ -1,35 +1,35 @@
-import { flip as L, shift as h } from "../external/@floating-ui/dom/dist/floating-ui.dom.js";
+import { flip as I, shift as h } from "../external/@floating-ui/dom/dist/floating-ui.dom.js";
 import w from "../styles.module.css.js";
-import { IS_BROWSER as C, onLoaded as I, on as s, QUICK_EVENT as r, attr as a, anchorPosition as m } from "../utils.js";
-const u = "aria-describedby", p = "Escape", d = "aria-labelledby", O = "--mtds-tooltip-position", y = 300, o = C ? document.getElementById("mtds-tooltip") || Object.assign(document.createElement("div"), {
-  className: w._tooltip,
-  id: "mtds-tooltip",
+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,
   popover: "manual"
 }) : null;
-let e = null, f = Number.NEGATIVE_INFINITY, T = 0;
+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 = f + y - Date.now();
-  clearTimeout(T), T = setTimeout(
-    A,
+  const l = E + P - Date.now();
+  clearTimeout(f), f = setTimeout(
+    S,
     Math.max(l, 0),
     n === p ? null : i
   );
 }
-function A(i) {
-  if (f = Date.now(), !o || i === o) return;
+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(O)?.trim() || "top";
+  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 E = e && a(e, d) === o?.id, b = (t instanceof HTMLElement ? t.innerText : t?.textContent)?.trim() || t?.hasAttribute(d) || t?.hasAttribute("aria-label");
-  e?.removeAttribute(E ? d : u), m(o, !1), e = t, e && a(e, b ? u : d, o?.id), e?.isConnected && o.hidePopover(), o.togglePopover(!!t), m(o, t || !1, {
+  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: [L(), h({ padding: 10 })]
+    middleware: [I(), h({ padding: 10 })]
   });
 }
-I(() => {
+y(() => {
   s(document, "blur,focus,mouseout,mouseover", c, r), s(window, "keydown", c, r), s(window, "blur", c, r);
 });
 //# 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} 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 = IS_BROWSER\n\t? document.getElementById(\"mtds-tooltip\") ||\n\t\tObject.assign(document.createElement(\"div\"), {\n\t\t\tclassName: styles._tooltip,\n\t\t\tid: \"mtds-tooltip\",\n\t\t\tpopover: \"manual\",\n\t\t})\n\t: null; // Create a dummy element to avoid null checks\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","IS_BROWSER","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":";;;AAWA,MAAMA,IAAc,oBACdC,IAAM,UACNC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAUC,IACb,SAAS,eAAe,cAAc,KACvC,OAAO,OAAO,SAAS,cAAc,KAAK,GAAG;AAAA,EAC5C,WAAWC,EAAO;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AACV,CAAC,IACA;AAEH,IAAIC,IAAyB,MACzBC,IAAY,OAAO,mBACnBC,IAAmD;AAEvD,SAASC,EAAkB,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AAC3E,MAAID,MAAS,aAAaC,MAAQb,EAAK;AACvC,QAAMc,IAAON,IAAYL,IAAiB,KAAK,IAAA;AAC/C,eAAaM,CAAQ,GACrBA,IAAW;AAAA,IACVM;AAAA,IACA,KAAK,IAAID,GAAM,CAAC;AAAA,IAChBD,MAAQb,IAAM,OAAOW;AAAA,EAAA;AAEvB;AAGA,SAASI,EAA2BJ,GAAwB;AAI3D,MAHAH,IAAY,KAAK,IAAA,GAGb,CAACJ,KAAWO,MAAWP,EAAS;AACpC,EAAKA,GAAS,eAAa,SAAS,KAAK,OAAOA,CAAO;AACvD,MAAIY,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,iBAAiBd,CAAqB,GACrC,UACH;AAQD,GALC,CAACe,KACDA,MAAY,WACZA,MAAY,UACZE,MAAa,YAEAH,IAAS,OACnBA,QAAgB,cAAcC;AAElC,QAAMG,IAAWb,KAAUW,EAAKX,GAAQN,CAAU,MAAMG,GAAS,IAC3DiB,KACJL,aAAkB,cAChBA,EAAO,YACPA,GAAQ,cACR,KAAA,KACHA,GAAQ,aAAaf,CAAU,KAC/Be,GAAQ,aAAa,YAAY;AAElC,EAAAT,GAAQ,gBAAgBa,IAAWnB,IAAaF,CAAW,GAC3DuB,EAAelB,GAAS,EAAK,GAE7BG,IAASS,GACLT,KAAQW,EAAKX,GAAQc,IAAWtB,IAAcE,GAAYG,GAAS,EAAE,GACrEG,GAAQ,eAAaH,EAAQ,YAAA,GACjCA,EAAQ,cAAc,CAAC,CAACY,CAAM,GAC9BM,EAAelB,GAASY,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\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;"}

package/mtds/utils.d.ts

@@ -52,3 +52,16 @@ export declare const isInputLike: (el: unknown) => el is HTMLInputElement;
 export declare const toCustomElementProps: ({ className, hidden, open, ...rest }: Record<string, unknown>, klass?: string) => {
     [x: string]: unknown;
 };
+/**
+ * tag
+ * @description creates element and assigns properties
+ * @param tagName The tagname of element to create
+ * @param attrs Optional attributes to add to the element
+ * @param text Optional text content to add to the element
+ * @return HTMLElement with props
+ */
+export declare const tag: <TagName extends keyof HTMLElementTagNameMap>(tagName: TagName, attrs?: Record<string, string | null>, text?: string | null) => HTMLElementTagNameMap[TagName];
+export declare const MTDSElement: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};