@mattilsynet/design 0.2.21 → 0.3.1

package/mtds/styles.json

@@ -1,32 +1,35 @@
 {
-  "tooltip": "_tooltip_ipkht_1",
-  "alert": "_alert_ipkht_1 _ds-alert_1w6ss_1",
-  "avatar": "_avatar_ipkht_1 _ds-avatar_1w6ss_1",
-  "badge": "_badge_ipkht_1",
-  "breadcrumbs": "_breadcrumbs_ipkht_1 _ds-breadcrumbs_1w6ss_1",
-  "button": "_button_ipkht_1 _ds-button_1w6ss_1",
-  "card": "_card_ipkht_1",
-  "chip": "_chip_ipkht_1 _ds-chip_1w6ss_1",
-  "details": "_details_ipkht_1 _ds-details_1w6ss_1",
-  "errorsummary": "_errorsummary_ipkht_1 _ds-error-summary_1w6ss_1",
-  "field": "_field_ipkht_1 _ds-field_1w6ss_1",
-  "affixes": "_affixes_ipkht_1 _ds-field-affixes_1w6ss_1",
-  "count": "_count_ipkht_1",
-  "fieldset": "_fieldset_ipkht_1 _ds-fieldset_1w6ss_1",
-  "heading": "_heading_ipkht_1 _ds-heading_1w6ss_1",
-  "input": "_input_ipkht_1 _ds-input_1w6ss_1",
-  "grid": "_grid_ipkht_1",
-  "flex": "_flex_ipkht_1",
-  "link": "_link_ipkht_1",
-  "logo": "_logo_ipkht_1 _ds-focus_1w6ss_1",
-  "modal": "_modal_ipkht_1 _ds-modal_1w6ss_1",
-  "pagination": "_pagination_ipkht_1 _ds-pagination_1w6ss_1",
-  "popover": "_popover_ipkht_1",
-  "skeleton": "_skeleton_ipkht_1 _ds-skeleton_1w6ss_1",
-  "table": "_table_ipkht_1 _ds-table_1w6ss_1",
-  "scrollShadow": "_scrollShadow_ipkht_1",
-  "tabs": "_tabs_ipkht_1 _ds-tabs_1w6ss_1",
-  "tag": "_tag_ipkht_1 _ds-tag_1w6ss_1",
-  "validation": "_validation_ipkht_1 _ds-validation-message_1w6ss_1",
-  "body": "_body_ipkht_115"
+  "tooltip": "_tooltip_wob7g_1",
+  "alert": "_alert_wob7g_1 _ds-alert_1w6ss_1",
+  "avatar": "_avatar_wob7g_1 _ds-avatar_1w6ss_1",
+  "badge": "_badge_wob7g_1",
+  "breadcrumbs": "_breadcrumbs_wob7g_1 _ds-breadcrumbs_1w6ss_1",
+  "button": "_button_wob7g_1 _ds-button_1w6ss_1",
+  "card": "_card_wob7g_1",
+  "chip": "_chip_wob7g_1 _ds-chip_1w6ss_1",
+  "details": "_details_wob7g_1 _ds-details_1w6ss_1",
+  "dialog": "_dialog_wob7g_1 _ds-modal_1w6ss_1",
+  "divider": "_divider_wob7g_1",
+  "errorsummary": "_errorsummary_wob7g_1 _ds-error-summary_1w6ss_1",
+  "field": "_field_wob7g_1 _ds-field_1w6ss_1",
+  "affixes": "_affixes_wob7g_1 _ds-field-affixes_1w6ss_1",
+  "count": "_count_wob7g_1",
+  "fieldset": "_fieldset_wob7g_1 _ds-fieldset_1w6ss_1",
+  "heading": "_heading_wob7g_1 _ds-heading_1w6ss_1",
+  "input": "_input_wob7g_1 _ds-input_1w6ss_1",
+  "grid": "_grid_wob7g_1",
+  "flex": "_flex_wob7g_1",
+  "link": "_link_wob7g_1",
+  "logo": "_logo_wob7g_1 _ds-focus_1w6ss_1",
+  "pagination": "_pagination_wob7g_1 _ds-pagination_1w6ss_1",
+  "popover": "_popover_wob7g_1",
+  "skeleton": "_skeleton_wob7g_1 _ds-skeleton_1w6ss_1",
+  "spinner": "_spinner_wob7g_1",
+  "table": "_table_wob7g_1 _ds-table_1w6ss_1",
+  "scrollShadow": "_scrollShadow_wob7g_1",
+  "tabs": "_tabs_wob7g_1 _ds-tabs_1w6ss_1",
+  "tag": "_tag_wob7g_1 _ds-tag_1w6ss_1",
+  "togglegroup": "_togglegroup_wob7g_1",
+  "validation": "_validation_wob7g_1 _ds-validation-message_1w6ss_1",
+  "body": "_body_wob7g_120"
 }

package/mtds/styles.module.css.js

@@ -1,66 +1,72 @@
-const _ = "_alert_ipkht_1 _ds-alert_1w6ss_1", s = "_avatar_ipkht_1 _ds-avatar_1w6ss_1", t = "_badge_ipkht_1", o = "_breadcrumbs_ipkht_1 _ds-breadcrumbs_1w6ss_1", i = "_button_ipkht_1 _ds-button_1w6ss_1", a = "_card_ipkht_1", d = "_chip_ipkht_1 _ds-chip_1w6ss_1", n = "_details_ipkht_1 _ds-details_1w6ss_1", e = "_errorsummary_ipkht_1 _ds-error-summary_1w6ss_1", l = "_field_ipkht_1 _ds-field_1w6ss_1", p = "_affixes_ipkht_1 _ds-field-affixes_1w6ss_1", c = "_count_ipkht_1", r = "_fieldset_ipkht_1 _ds-fieldset_1w6ss_1", h = "_heading_ipkht_1 _ds-heading_1w6ss_1", k = "_input_ipkht_1 _ds-input_1w6ss_1", b = "_grid_ipkht_1", w = "_flex_ipkht_1", f = "_link_ipkht_1", g = "_logo_ipkht_1 _ds-focus_1w6ss_1", u = "_modal_ipkht_1 _ds-modal_1w6ss_1", m = "_pagination_ipkht_1 _ds-pagination_1w6ss_1", v = "_popover_ipkht_1", x = "_skeleton_ipkht_1 _ds-skeleton_1w6ss_1", y = "_table_ipkht_1 _ds-table_1w6ss_1", S = "_scrollShadow_ipkht_1", j = "_tabs_ipkht_1 _ds-tabs_1w6ss_1", q = "_tag_ipkht_1 _ds-tag_1w6ss_1", z = "_tooltip_ipkht_1", A = "_validation_ipkht_1 _ds-validation-message_1w6ss_1", B = "_body_ipkht_115", C = {
+const _ = "_alert_wob7g_1 _ds-alert_1w6ss_1", s = "_avatar_wob7g_1 _ds-avatar_1w6ss_1", o = "_badge_wob7g_1", t = "_breadcrumbs_wob7g_1 _ds-breadcrumbs_1w6ss_1", a = "_button_wob7g_1 _ds-button_1w6ss_1", n = "_card_wob7g_1", e = "_chip_wob7g_1 _ds-chip_1w6ss_1", d = "_details_wob7g_1 _ds-details_1w6ss_1", g = "_dialog_wob7g_1 _ds-modal_1w6ss_1", i = "_divider_wob7g_1", b = "_errorsummary_wob7g_1 _ds-error-summary_1w6ss_1", l = "_field_wob7g_1 _ds-field_1w6ss_1", w = "_affixes_wob7g_1 _ds-field-affixes_1w6ss_1", r = "_count_wob7g_1", c = "_fieldset_wob7g_1 _ds-fieldset_1w6ss_1", p = "_heading_wob7g_1 _ds-heading_1w6ss_1", u = "_input_wob7g_1 _ds-input_1w6ss_1", f = "_grid_wob7g_1", m = "_flex_wob7g_1", v = "_link_wob7g_1", h = "_logo_wob7g_1 _ds-focus_1w6ss_1", x = "_pagination_wob7g_1 _ds-pagination_1w6ss_1", y = "_popover_wob7g_1", k = "_skeleton_wob7g_1 _ds-skeleton_1w6ss_1", S = "_spinner_wob7g_1", j = "_table_wob7g_1 _ds-table_1w6ss_1", q = "_scrollShadow_wob7g_1", z = "_tabs_wob7g_1 _ds-tabs_1w6ss_1", A = "_tag_wob7g_1 _ds-tag_1w6ss_1", B = "_togglegroup_wob7g_1", C = "_tooltip_wob7g_1", D = "_validation_wob7g_1 _ds-validation-message_1w6ss_1", E = "_body_wob7g_120", F = {
   alert: _,
   avatar: s,
-  badge: t,
-  breadcrumbs: o,
-  button: i,
-  card: a,
-  chip: d,
-  details: n,
-  errorsummary: e,
+  badge: o,
+  breadcrumbs: t,
+  button: a,
+  card: n,
+  chip: e,
+  details: d,
+  dialog: g,
+  divider: i,
+  errorsummary: b,
   field: l,
-  affixes: p,
-  count: c,
-  fieldset: r,
-  heading: h,
-  input: k,
-  grid: b,
-  flex: w,
-  link: f,
-  logo: g,
-  modal: u,
-  pagination: m,
-  popover: v,
-  skeleton: x,
-  table: y,
-  scrollShadow: S,
-  tabs: j,
-  tag: q,
-  tooltip: z,
-  validation: A,
-  body: B
+  affixes: w,
+  count: r,
+  fieldset: c,
+  heading: p,
+  input: u,
+  grid: f,
+  flex: m,
+  link: v,
+  logo: h,
+  pagination: x,
+  popover: y,
+  skeleton: k,
+  spinner: S,
+  table: j,
+  scrollShadow: q,
+  tabs: z,
+  tag: A,
+  togglegroup: B,
+  tooltip: C,
+  validation: D,
+  body: E
 };
 export {
-  p as affixes,
+  w as affixes,
   _ as alert,
   s as avatar,
-  t as badge,
-  B as body,
-  o as breadcrumbs,
-  i as button,
-  a as card,
-  d as chip,
-  c as count,
-  C as default,
-  n as details,
-  e as errorsummary,
+  o as badge,
+  E as body,
+  t as breadcrumbs,
+  a as button,
+  n as card,
+  e as chip,
+  r as count,
+  F as default,
+  d as details,
+  g as dialog,
+  i as divider,
+  b as errorsummary,
   l as field,
-  r as fieldset,
-  w as flex,
-  b as grid,
-  h as heading,
-  k as input,
-  f as link,
-  g as logo,
-  u as modal,
-  m as pagination,
-  v as popover,
-  S as scrollShadow,
-  x as skeleton,
-  y as table,
-  j as tabs,
-  q as tag,
-  z as tooltip,
-  A as validation
+  c as fieldset,
+  m as flex,
+  f as grid,
+  p as heading,
+  u as input,
+  v as link,
+  h as logo,
+  x as pagination,
+  y as popover,
+  q as scrollShadow,
+  k as skeleton,
+  S as spinner,
+  j as table,
+  z as tabs,
+  A as tag,
+  B as togglegroup,
+  C as tooltip,
+  D as validation
 };
 //# sourceMappingURL=styles.module.css.js.map

package/mtds/styles.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/mtds/togglegroup/togglegroup.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/mtds/tooltip/tooltip.js

@@ -1,18 +1,19 @@
-import { IS_BROWSER as I, attr as L, on as m, QUICK_EVENT as a, anchorPosition as p } from "../utils.js";
-import f from "./tooltip.module.css.js";
-const T = "aria-describedby", n = "aria-labelledby", A = "--mtds-tooltip-position", y = 100, s = "mtds-tooltip";
-let o = null, c = Number.NEGATIVE_INFINITY, b = 0, e = null;
-function r({ target: i }) {
-  const t = c + y - Date.now();
-  clearTimeout(b), b = setTimeout(P, Math.max(t, 0), i);
+import { IS_BROWSER as I, attr as L, on as d, QUICK_EVENT as m, anchorPosition as r } from "../utils.js";
+import w from "./tooltip.module.css.js";
+const T = "aria-describedby", s = "aria-labelledby", y = "--mtds-tooltip-position", A = 100, u = "mtds-tooltip", b = "Escape";
+let o = null, E = Number.NEGATIVE_INFINITY, c = 0, e = null;
+function a({ target: i, type: t, key: l }) {
+  if (t === "keydown" && l !== b) return;
+  const n = E + A - Date.now();
+  clearTimeout(c), c = setTimeout(S, Math.max(n, 0), l === b ? null : i);
 }
-function P(i) {
-  var d;
-  if (c = Date.now(), !e || i === e) return;
-  let t = ((d = i == null ? void 0 : i.closest) == null ? void 0 : d.call(i, "[data-tooltip]")) || null;
+function S(i) {
+  var p;
+  if (E = Date.now(), !e || i === e) return;
+  let t = ((p = i == null ? void 0 : i.closest) == null ? void 0 : p.call(i, "[data-tooltip]")) || null;
   if (t === o) return;
-  const l = (t == null ? void 0 : t.getAttribute("data-tooltip")) || "", u = (t == null ? void 0 : t.getAttribute("data-tooltip-position")) || window.getComputedStyle(t || document.body).getPropertyValue(A) || "top", E = !!(t != null && t.innerText.trim()) || (t == null ? void 0 : t.hasAttribute(n)) || (t == null ? void 0 : t.hasAttribute("aria-label"));
-  (!l || l === "false" || l === "true" || u === "none") && (t = null), t && (e.textContent = l), o == null || o.removeAttribute(o.getAttribute(n) === s ? n : T), p(e, !1), o = t, o == null || o.setAttribute(E ? T : n, s), e.togglePopover(!!t), p(e, t, u);
+  const l = (t == null ? void 0 : t.getAttribute("data-tooltip")) || "", n = (t == null ? void 0 : t.getAttribute("data-tooltip-position")) || window.getComputedStyle(t || document.body).getPropertyValue(y) || "top", f = !!(t != null && t.innerText.trim()) || (t == null ? void 0 : t.hasAttribute(s)) || (t == null ? void 0 : t.hasAttribute("aria-label"));
+  (!l || l === "false" || l === "true" || n === "none") && (t = null), t && (e.textContent = l), o == null || o.removeAttribute(o.getAttribute(s) === u ? s : T), r(e, !1), o = t, o == null || o.setAttribute(f ? T : s, u), e.togglePopover(!!t), r(e, t, n);
 }
-I && !document.getElementById(s) && (e = document.body.appendChild(document.createElement("div")), e.classList.add(...f.tooltip.split(" ")), e.id = s, L(e, "popover", "manual"), m(document, "blur,focus,mouseout,mouseover", r, a), m(window, "blur", r, a));
+I && !document.getElementById(u) && (e = document.body.appendChild(document.createElement("div")), e.classList.add(...w.tooltip.split(" ")), e.id = u, L(e, "popover", "manual"), d(document, "blur,focus,mouseout,mouseover", a, m), d(window, "keydown", a, m), d(window, "blur", a, m));
 //# sourceMappingURL=tooltip.js.map

package/mtds/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../designsystem/tooltip/tooltip.ts"],"sourcesContent":["import { IS_BROWSER, QUICK_EVENT, anchorPosition, attr, on } from \"../utils\";\nimport styles from './tooltip.module.css';\n\nconst DESCRIBEDBY = 'aria-describedby';\nconst LABELLEDBY = 'aria-labelledby';\nconst POSITION_CSS_PROPERTY = '--mtds-tooltip-position';\nconst THROTTLE_DELAY = 100;\nconst TOOLTIP_ID = 'mtds-tooltip';\n\nlet ANCHOR: HTMLElement | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\nlet TOOLTIP: HTMLElement | null = null;\n\nfunction handleMove({ target }: Event) {\n  const wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n  clearTimeout(THROTTLE);\n  THROTTLE = setTimeout(handleMoveThrottled, Math.max(wait, 0), target);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n  LAST_CALL = Date.now();\n\n  if (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n  let anchor = target?.closest?.<HTMLElement>('[data-tooltip]') || null;\n  \n  // No need to update\n  if (anchor === ANCHOR) return;\n\n  const content = anchor?.getAttribute('data-tooltip') || '';\n  const position = anchor?.getAttribute('data-tooltip-position') || window.getComputedStyle(anchor || document.body).getPropertyValue(POSITION_CSS_PROPERTY) || 'top';\n  const hasLabel = Boolean(anchor?.innerText.trim()) || anchor?.hasAttribute(LABELLEDBY) || anchor?.hasAttribute('aria-label');\n\n  if (!content || content === 'false' || content === 'true' || position === 'none') anchor = null; // Do not show tooltip if boolish value\n  if (anchor) TOOLTIP.textContent = content; // Only update content if new anchor\n\n  ANCHOR?.removeAttribute(ANCHOR.getAttribute(LABELLEDBY) === TOOLTIP_ID ? LABELLEDBY : DESCRIBEDBY); // Unlink previous anchor\n  anchorPosition(TOOLTIP, false); // Reset anchor position\n\n  ANCHOR = anchor; // Store new anchor - might be null if no new anchor\n  ANCHOR?.setAttribute(hasLabel ? DESCRIBEDBY : LABELLEDBY, TOOLTIP_ID); // Use tooltip as description if allready has label\n  TOOLTIP.togglePopover(!!anchor);\n  anchorPosition(TOOLTIP, anchor, position);\n}\n\n// Initialize if in browser and not already initialized\nif (IS_BROWSER && !document.getElementById(TOOLTIP_ID)) {\n  TOOLTIP = document.body.appendChild(document.createElement('div'));\n  TOOLTIP.classList.add(...styles.tooltip.split(' '));\n  TOOLTIP.id = TOOLTIP_ID;\n  attr(TOOLTIP, 'popover', 'manual');\n  on(document, 'blur,focus,mouseout,mouseover', handleMove, QUICK_EVENT);\n  on(window, 'blur', handleMove, QUICK_EVENT);\n}"],"names":["DESCRIBEDBY","LABELLEDBY","POSITION_CSS_PROPERTY","THROTTLE_DELAY","TOOLTIP_ID","ANCHOR","LAST_CALL","THROTTLE","TOOLTIP","handleMove","target","wait","handleMoveThrottled","anchor","_a","content","position","hasLabel","anchorPosition","IS_BROWSER","styles","attr","on","QUICK_EVENT"],"mappings":";;AAGA,MAAMA,IAAc,oBACdC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAa;AAEnB,IAAIC,IAA6B,MAC7BC,IAAY,OAAO,mBACnBC,IAAmD,GACnDC,IAA8B;AAElC,SAASC,EAAW,EAAE,QAAAC,KAAiB;AACrC,QAAMC,IAAOL,IAAYH,IAAiB,KAAK,IAAI;AACnD,eAAaI,CAAQ,GACrBA,IAAW,WAAWK,GAAqB,KAAK,IAAID,GAAM,CAAC,GAAGD,CAAM;AACtE;AAGA,SAASE,EAAoBF,GAAwB;;AAG/C,MAFJJ,IAAY,KAAK,IAAI,GAEjB,CAACE,KAAWE,MAAWF,EAAS;AACpC,MAAIK,MAASC,IAAAJ,KAAA,gBAAAA,EAAQ,YAAR,gBAAAI,EAAA,KAAAJ,GAA+B,sBAAqB;AAGjE,MAAIG,MAAWR,EAAQ;AAEvB,QAAMU,KAAUF,KAAA,gBAAAA,EAAQ,aAAa,oBAAmB,IAClDG,KAAWH,KAAA,gBAAAA,EAAQ,aAAa,6BAA4B,OAAO,iBAAiBA,KAAU,SAAS,IAAI,EAAE,iBAAiBX,CAAqB,KAAK,OACxJe,IAAW,GAAQJ,KAAA,QAAAA,EAAQ,UAAU,YAAWA,KAAA,gBAAAA,EAAQ,aAAaZ,QAAeY,KAAA,gBAAAA,EAAQ,aAAa;AAE3G,GAAA,CAACE,KAAWA,MAAY,WAAWA,MAAY,UAAUC,MAAa,YAAiBH,IAAA,OACvFA,QAAgB,cAAcE,IAElCV,KAAA,QAAAA,EAAQ,gBAAgBA,EAAO,aAAaJ,CAAU,MAAMG,IAAaH,IAAaD,IACtFkB,EAAeV,GAAS,EAAK,GAEpBH,IAAAQ,GACTR,KAAA,QAAAA,EAAQ,aAAaY,IAAWjB,IAAcC,GAAYG,IAClDI,EAAA,cAAc,CAAC,CAACK,CAAM,GACfK,EAAAV,GAASK,GAAQG,CAAQ;AAC1C;AAGIG,KAAc,CAAC,SAAS,eAAef,CAAU,MACnDI,IAAU,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC,GACjEA,EAAQ,UAAU,IAAI,GAAGY,EAAO,QAAQ,MAAM,GAAG,CAAC,GAClDZ,EAAQ,KAAKJ,GACRiB,EAAAb,GAAS,WAAW,QAAQ,GAC9Bc,EAAA,UAAU,iCAAiCb,GAAYc,CAAW,GAClED,EAAA,QAAQ,QAAQb,GAAYc,CAAW;"}
+{"version":3,"file":"tooltip.js","sources":["../../designsystem/tooltip/tooltip.ts"],"sourcesContent":["import { IS_BROWSER, QUICK_EVENT, anchorPosition, attr, on } from \"../utils\";\nimport styles from './tooltip.module.css';\n\nconst DESCRIBEDBY = 'aria-describedby';\nconst LABELLEDBY = 'aria-labelledby';\nconst POSITION_CSS_PROPERTY = '--mtds-tooltip-position';\nconst THROTTLE_DELAY = 100;\nconst TOOLTIP_ID = 'mtds-tooltip';\nconst ESC = 'Escape';\n\nlet ANCHOR: HTMLElement | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\nlet TOOLTIP: HTMLElement | null = null;\n\nfunction handleMove({ target, type, key }: Event & { key?: string }) {\n  if (type === 'keydown' && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n  const wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n  clearTimeout(THROTTLE);\n  THROTTLE = setTimeout(handleMoveThrottled, Math.max(wait, 0), key === ESC ? null : target);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n  LAST_CALL = Date.now();\n\n  if (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n  let anchor = target?.closest?.<HTMLElement>('[data-tooltip]') || null;\n  \n  // No need to update\n  if (anchor === ANCHOR) return;\n\n  const content = anchor?.getAttribute('data-tooltip') || '';\n  const position = anchor?.getAttribute('data-tooltip-position') || window.getComputedStyle(anchor || document.body).getPropertyValue(POSITION_CSS_PROPERTY) || 'top';\n  const hasLabel = Boolean(anchor?.innerText.trim()) || anchor?.hasAttribute(LABELLEDBY) || anchor?.hasAttribute('aria-label');\n\n  if (!content || content === 'false' || content === 'true' || position === 'none') anchor = null; // Do not show tooltip if boolish value\n  if (anchor) TOOLTIP.textContent = content; // Only update content if new anchor\n\n  ANCHOR?.removeAttribute(ANCHOR.getAttribute(LABELLEDBY) === TOOLTIP_ID ? LABELLEDBY : DESCRIBEDBY); // Unlink previous anchor\n  anchorPosition(TOOLTIP, false); // Reset anchor position\n\n  ANCHOR = anchor; // Store new anchor - might be null if no new anchor\n  ANCHOR?.setAttribute(hasLabel ? DESCRIBEDBY : LABELLEDBY, TOOLTIP_ID); // Use tooltip as description if allready has label\n  TOOLTIP.togglePopover(!!anchor);\n  anchorPosition(TOOLTIP, anchor, position);\n}\n\n// Initialize if in browser and not already initialized\nif (IS_BROWSER && !document.getElementById(TOOLTIP_ID)) {\n  TOOLTIP = document.body.appendChild(document.createElement('div'));\n  TOOLTIP.classList.add(...styles.tooltip.split(' '));\n  TOOLTIP.id = TOOLTIP_ID;\n  attr(TOOLTIP, 'popover', 'manual');\n  on(document, 'blur,focus,mouseout,mouseover', handleMove, QUICK_EVENT);\n  on(window, 'keydown', handleMove, QUICK_EVENT);\n  on(window, 'blur', handleMove, QUICK_EVENT);\n}"],"names":["DESCRIBEDBY","LABELLEDBY","POSITION_CSS_PROPERTY","THROTTLE_DELAY","TOOLTIP_ID","ESC","ANCHOR","LAST_CALL","THROTTLE","TOOLTIP","handleMove","target","type","key","wait","handleMoveThrottled","anchor","_a","content","position","hasLabel","anchorPosition","IS_BROWSER","styles","attr","on","QUICK_EVENT"],"mappings":";;AAGA,MAAMA,IAAc,oBACdC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAa,gBACbC,IAAM;AAEZ,IAAIC,IAA6B,MAC7BC,IAAY,OAAO,mBACnBC,IAAmD,GACnDC,IAA8B;AAElC,SAASC,EAAW,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AAC/D,MAAAD,MAAS,aAAaC,MAAQR,EAAK;AACvC,QAAMS,IAAOP,IAAYJ,IAAiB,KAAK,IAAI;AACnD,eAAaK,CAAQ,GACVA,IAAA,WAAWO,GAAqB,KAAK,IAAID,GAAM,CAAC,GAAGD,MAAQR,IAAM,OAAOM,CAAM;AAC3F;AAGA,SAASI,EAAoBJ,GAAwB;;AAG/C,MAFJJ,IAAY,KAAK,IAAI,GAEjB,CAACE,KAAWE,MAAWF,EAAS;AACpC,MAAIO,MAASC,IAAAN,KAAA,gBAAAA,EAAQ,YAAR,gBAAAM,EAAA,KAAAN,GAA+B,sBAAqB;AAGjE,MAAIK,MAAWV,EAAQ;AAEvB,QAAMY,KAAUF,KAAA,gBAAAA,EAAQ,aAAa,oBAAmB,IAClDG,KAAWH,KAAA,gBAAAA,EAAQ,aAAa,6BAA4B,OAAO,iBAAiBA,KAAU,SAAS,IAAI,EAAE,iBAAiBd,CAAqB,KAAK,OACxJkB,IAAW,GAAQJ,KAAA,QAAAA,EAAQ,UAAU,YAAWA,KAAA,gBAAAA,EAAQ,aAAaf,QAAee,KAAA,gBAAAA,EAAQ,aAAa;AAE3G,GAAA,CAACE,KAAWA,MAAY,WAAWA,MAAY,UAAUC,MAAa,YAAiBH,IAAA,OACvFA,QAAgB,cAAcE,IAElCZ,KAAA,QAAAA,EAAQ,gBAAgBA,EAAO,aAAaL,CAAU,MAAMG,IAAaH,IAAaD,IACtFqB,EAAeZ,GAAS,EAAK,GAEpBH,IAAAU,GACTV,KAAA,QAAAA,EAAQ,aAAac,IAAWpB,IAAcC,GAAYG,IAClDK,EAAA,cAAc,CAAC,CAACO,CAAM,GACfK,EAAAZ,GAASO,GAAQG,CAAQ;AAC1C;AAGIG,KAAc,CAAC,SAAS,eAAelB,CAAU,MACnDK,IAAU,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC,GACjEA,EAAQ,UAAU,IAAI,GAAGc,EAAO,QAAQ,MAAM,GAAG,CAAC,GAClDd,EAAQ,KAAKL,GACRoB,EAAAf,GAAS,WAAW,QAAQ,GAC9BgB,EAAA,UAAU,iCAAiCf,GAAYgB,CAAW,GAClED,EAAA,QAAQ,WAAWf,GAAYgB,CAAW,GAC1CD,EAAA,QAAQ,QAAQf,GAAYgB,CAAW;"}

package/mtds/utils.js

@@ -1,50 +1,50 @@
 const w = typeof window < "u" && typeof document < "u", U = { capture: !0, passive: !0 };
-function C(t, e, o) {
-  return o === void 0 ? t.getAttribute(e) ?? null : (o === null ? t.removeAttribute(e) : t.getAttribute(e) !== o && t.setAttribute(e, o), null);
+function C(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 E = 0;
 const O = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
 function X(t) {
   return t.id || (t.id = `${O}${++E}`), t.id;
 }
-const b = (t, e, o) => {
-  for (const i of o[0].split(","))
-    o[0] = i, e[`${t}EventListener`](...o);
+const b = (t, e, n) => {
+  for (const i of n[0].split(","))
+    n[0] = i, e[`${t}EventListener`](...n);
 }, B = (t, ...e) => b("add", t, e), Y = (t, ...e) => b("remove", t, e), a = /* @__PURE__ */ new Map(), s = w ? document.createElement("div") : null;
 s && C(s, "style", "position:absolute;padding:1px;top:0;left:0px");
 w && B(window, "load,resize,scroll", () => {
   for (const [t, e] of a) e();
 }, U);
 const d = { top: 0, right: 1, bottom: 2, left: 3 };
-function _(t, e, o) {
+function _(t, e, n) {
   var p;
   if (!e || !e.isConnected || !t.isConnected) return a.delete(t);
   if (s != null && s.isConnected || document.body.append(s || ""), !a.has(t)) {
-    const I = d[o] ?? d.bottom;
+    const I = d[n] ?? d.bottom;
     return (p = a.set(t, () => _(t, e, I)).get(t)) == null ? void 0 : p();
   }
-  const { offsetWidth: i, offsetHeight: n } = t, { offsetWidth: c, offsetHeight: u } = e, { width: M, height: m, left: g, top: v } = e.getBoundingClientRect(), f = Math.round(g - (c - M) / 2), r = Math.round(v - (u - m) / 2), T = f - i > 0, y = c + c + i < window.innerWidth, A = r - n > 0, S = r + u + n < window.innerHeight, $ = o === d.bottom && y || !T, x = o === d.bottom && S || !A, H = Math.min(Math.max(10, f - (i - c) / 2), window.innerWidth - i - 10), W = Math.min(Math.max(10, r - (n - u) / 2), window.innerHeight - n - 10), h = o === d.top || o === d.bottom;
-  t.style.left = `${Math.round(h ? H : $ ? f + c : f - i)}px`, t.style.top = `${Math.round(h ? x ? r + u : r - n : W)}px`, s == null || s.style.setProperty("translate", `${Math.round(window.scrollX + f + c + i + 30)} ${Math.round(window.scrollY + r + u + n + 30)}px`);
+  const { offsetWidth: i, offsetHeight: o } = t, { offsetWidth: c, offsetHeight: u } = e, { width: M, height: m, left: g, top: v } = e.getBoundingClientRect(), f = Math.round(g - (c - M) / 2), r = Math.round(v - (u - m) / 2), T = f - i > 0, y = c + c + i < window.innerWidth, A = r - o > 0, S = r + u + o < window.innerHeight, $ = n === d.bottom && y || !T, x = n === d.bottom && S || !A, H = Math.min(Math.max(10, f - (i - c) / 2), window.innerWidth - i - 10), W = Math.min(Math.max(10, r - (o - u) / 2), window.innerHeight - o - 10), h = n === d.top || n === d.bottom;
+  t.style.left = `${Math.round(h ? H : $ ? f + c : f - i)}px`, t.style.top = `${Math.round(h ? x ? r + u : r - o : W)}px`, s == null || s.style.setProperty("translate", `${Math.round(window.scrollX + f + c + i + 30)} ${Math.round(window.scrollY + r + u + o + 30)}px`);
 }
 function F(t) {
   let e = 0;
-  const o = () => setTimeout(i, 200), i = () => {
-    t([], n), e = 0;
-  }, n = new MutationObserver(() => {
-    e || (e = requestAnimationFrame(o));
+  const n = () => setTimeout(i, 200), i = () => {
+    t([], o), e = 0;
+  }, o = new MutationObserver(() => {
+    e || (e = requestAnimationFrame(n));
   });
-  return n;
+  return o;
 }
 const l = /* @__PURE__ */ new WeakMap(), P = (t) => {
-  var o;
+  var n;
   const e = l.get(t);
   if (!e || !t.isConnected)
-    (o = e == null ? void 0 : e.observer) == null || o.disconnect(), l.delete(t);
+    (n = e == null ? void 0 : e.observer) == null || n.disconnect(), l.delete(t);
   else for (const [, i] of e.collections) i();
-}, k = (t, e, o) => {
+}, k = (t, e, n) => {
   const i = t.getElementsByClassName(e);
-  let n = l.get(t);
-  n || (n = { collections: /* @__PURE__ */ new Map(), observer: F(() => P(t)) }, n.observer.observe(t, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["class"] }), l.set(t, n)), o ? n.collections.set(e, () => o(i)) : n.collections.delete(e);
+  let o = l.get(t);
+  o || (o = { collections: /* @__PURE__ */ new Map(), observer: F(() => P(t)) }, o.observer.observe(t, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["class"] }), l.set(t, o)), n ? o.collections.set(e, () => n(i)) : o.collections.delete(e);
 }, q = (t) => t instanceof HTMLElement && "validity" in t && !(t instanceof HTMLButtonElement);
 export {
   w as IS_BROWSER,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "0.2.21",
+	"version": "0.3.1",
 	"type": "module",
 	"main": "./mtds/index.js",
 	"types": "./mtds/index.d.ts",
@@ -44,7 +44,7 @@
 		"@storybook/react-vite": "^8.5.3",
 		"@storybook/theming": "^8.5.3",
 		"@tanstack/react-table": "^8.20.6",
-		"@types/node": "^22.13.0",
+		"@types/node": "^22.13.1",
 		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
 		"@u-elements/u-datalist": "0.1.2",
@@ -59,7 +59,7 @@
 		"react-dom": "^19.0.0",
 		"storybook": "^8.4.7",
 		"typescript": "^5.7.3",
-		"vite": "^6.0.11",
+		"vite": "^6.1.0",
 		"vite-plugin-dts": "^4.5.0"
 	},
 	"dependencies": {