@digdir/designsystemet-web 1.13.1 → 1.13.2

package/dist/esm/toggle-group/toggle-group.js

@@ -1,2 +1,2 @@
-import{attr as e,attrOrCSS as t,debounce as n,on as r,onHotReload as i,onMutation as a}from"../utils/utils.js";const o=`data-toggle-group`,s=`[${o}]`,c=n(()=>{for(let n of document.querySelectorAll(s))e(n,`aria-label`,t(n,o))},0),l=e=>{let t=e.target instanceof HTMLInputElement&&e.target.closest(s);if(t&&(e.key===`Enter`&&e.target.click(),e.key?.startsWith(`Arrow`))){e.preventDefault?.();let n=[...t.getElementsByTagName(`input`)],r=n.indexOf(e.target),i=e.key.match(/Arrow(Right|Down)/)?1:-1,a=r;for(let e=0;e<n.length;e++)if(a=(n.length+a+i)%n.length,!n[a]?.disabled){n[a]?.focus();break}}};i(`toggle-group`,()=>[r(document,`keydown`,l),a(document,c,{attributeFilter:[o],attributes:!0,childList:!0,subtree:!0})]);
+import{attr as e,attrOrCSS as t,on as n,onHotReload as r,onMutation as i}from"../utils/utils.js";const a=`aria-label`,o=`data-toggle-group`,s=`[${o}]`,c=()=>{for(let n of document.querySelectorAll(s))e(n,`aria-label`,t(n,o))},l=n=>{let{key:r,target:i}=n,c=i instanceof HTMLInputElement&&i.closest(s);if(c&&(!e(c,a)&&!e(c,`aria-labelledby`)&&e(c,a,t(c,o)),r===`Enter`&&i.click(),r?.startsWith(`Arrow`))){n.preventDefault?.();let e=[...c.getElementsByTagName(`input`)],t=e.indexOf(i),a=r.match(/Arrow(Right|Down)/)?1:-1,o=t;for(let t=0;t<e.length;t++)if(o=(e.length+o+a)%e.length,!e[o]?.disabled){e[o]?.focus();break}}};r(`toggle-group`,()=>[n(document,`keydown`,l),i(document,c,{attributeFilter:[o],attributes:!0,childList:!0,subtree:!0})]);
 //# sourceMappingURL=toggle-group.js.map

package/dist/esm/toggle-group/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","names":[],"sources":["../../../src/toggle-group/toggle-group.ts"],"sourcesContent":["import {\n  attr,\n  attrOrCSS,\n  debounce,\n  on,\n  onHotReload,\n  onMutation,\n} from '../utils/utils';\n\nconst ATTR_TOGGLEGROUP = 'data-toggle-group';\nconst SELECTOR_TOGGLEGROUP = `[${ATTR_TOGGLEGROUP}]`;\n\nconst handleAriaAttributes = debounce(() => {\n  for (const group of document.querySelectorAll(SELECTOR_TOGGLEGROUP))\n    attr(group, 'aria-label', attrOrCSS(group, ATTR_TOGGLEGROUP));\n}, 0); // Debounce to merge multiple mutations\n\nconst handleKeydown = (event: Partial<KeyboardEvent>) => {\n  const group =\n    event.target instanceof HTMLInputElement &&\n    event.target.closest(SELECTOR_TOGGLEGROUP);\n\n  if (!group) return;\n  if (event.key === 'Enter') event.target.click(); // Forward Enter, but no need to listen for space key, as this is handled by the browser\n  if (event.key?.startsWith('Arrow')) {\n    event.preventDefault?.();\n    const inputs = [...group.getElementsByTagName('input')];\n    const index = inputs.indexOf(event.target);\n    const move = event.key.match(/Arrow(Right|Down)/) ? 1 : -1;\n    let nextIndex = index;\n\n    for (let i = 0; i < inputs.length; i++) {\n      nextIndex = (inputs.length + nextIndex + move) % inputs.length;\n      if (!inputs[nextIndex]?.disabled) {\n        inputs[nextIndex]?.focus();\n        break;\n      }\n    }\n  }\n};\n\nonHotReload('toggle-group', () => [\n  on(document, 'keydown', handleKeydown),\n  onMutation(document, handleAriaAttributes, {\n    attributeFilter: [ATTR_TOGGLEGROUP],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"+GASA,MAAM,EAAmB,oBACnB,EAAuB,IAAI,EAAiB,GAE5C,EAAuB,MAAe,CAC1C,IAAK,IAAM,KAAS,SAAS,iBAAiB,EAAqB,CACjE,EAAK,EAAO,aAAc,EAAU,EAAO,EAAiB,CAAC,EAC9D,EAAE,CAEC,EAAiB,GAAkC,CACvD,IAAM,EACJ,EAAM,kBAAkB,kBACxB,EAAM,OAAO,QAAQ,EAAqB,CAEvC,OACD,EAAM,MAAQ,SAAS,EAAM,OAAO,OAAO,CAC3C,EAAM,KAAK,WAAW,QAAQ,EAAE,CAClC,EAAM,kBAAkB,CACxB,IAAM,EAAS,CAAC,GAAG,EAAM,qBAAqB,QAAQ,CAAC,CACjD,EAAQ,EAAO,QAAQ,EAAM,OAAO,CACpC,EAAO,EAAM,IAAI,MAAM,oBAAoB,CAAG,EAAI,GACpD,EAAY,EAEhB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAO,OAAQ,IAEjC,GADA,GAAa,EAAO,OAAS,EAAY,GAAQ,EAAO,OACpD,CAAC,EAAO,IAAY,SAAU,CAChC,EAAO,IAAY,OAAO,CAC1B,SAMR,EAAY,mBAAsB,CAChC,EAAG,SAAU,UAAW,EAAc,CACtC,EAAW,SAAU,EAAsB,CACzC,gBAAiB,CAAC,EAAiB,CACnC,WAAY,GACZ,UAAW,GACX,QAAS,GACV,CAAC,CACH,CAAC"}
+{"version":3,"file":"toggle-group.js","names":[],"sources":["../../../src/toggle-group/toggle-group.ts"],"sourcesContent":["import { attr, attrOrCSS, on, onHotReload, onMutation } from '../utils/utils';\n\nconst ARIA_LABELLEDBY = 'aria-labelledby';\nconst ARIA_LABEL = 'aria-label';\nconst ATTR_TOGGLEGROUP = 'data-toggle-group';\nconst SELECTOR_TOGGLEGROUP = `[${ATTR_TOGGLEGROUP}]`;\n\nconst handleAriaAttributes = () => {\n  for (const group of document.querySelectorAll(SELECTOR_TOGGLEGROUP))\n    attr(group, 'aria-label', attrOrCSS(group, ATTR_TOGGLEGROUP));\n};\n\nconst handleKeydown = (event: Partial<KeyboardEvent>) => {\n  const { key, target: el } = event;\n  const group =\n    el instanceof HTMLInputElement && el.closest(SELECTOR_TOGGLEGROUP);\n\n  if (!group) return;\n  if (!attr(group, ARIA_LABEL) && !attr(group, ARIA_LABELLEDBY))\n    attr(group, ARIA_LABEL, attrOrCSS(group, ATTR_TOGGLEGROUP));\n  if (key === 'Enter') el.click(); // Forward Enter, but no need to listen for space key, as this is handled by the browser\n  if (key?.startsWith('Arrow')) {\n    event.preventDefault?.();\n    const inputs = [...group.getElementsByTagName('input')];\n    const index = inputs.indexOf(el);\n    const move = key.match(/Arrow(Right|Down)/) ? 1 : -1;\n    let nextIndex = index;\n\n    for (let i = 0; i < inputs.length; i++) {\n      nextIndex = (inputs.length + nextIndex + move) % inputs.length;\n      if (!inputs[nextIndex]?.disabled) {\n        inputs[nextIndex]?.focus();\n        break;\n      }\n    }\n  }\n};\n\nonHotReload('toggle-group', () => [\n  on(document, 'keydown', handleKeydown),\n  onMutation(document, handleAriaAttributes, {\n    attributeFilter: [ATTR_TOGGLEGROUP],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"iGAEA,MACM,EAAa,aACb,EAAmB,oBACnB,EAAuB,IAAI,EAAiB,GAE5C,MAA6B,CACjC,IAAK,IAAM,KAAS,SAAS,iBAAiB,EAAqB,CACjE,EAAK,EAAO,aAAc,EAAU,EAAO,EAAiB,CAAC,EAG3D,EAAiB,GAAkC,CACvD,GAAM,CAAE,MAAK,OAAQ,GAAO,EACtB,EACJ,aAAc,kBAAoB,EAAG,QAAQ,EAAqB,CAE/D,OACD,CAAC,EAAK,EAAO,EAAW,EAAI,CAAC,EAAK,EAAO,kBAAgB,EAC3D,EAAK,EAAO,EAAY,EAAU,EAAO,EAAiB,CAAC,CACzD,IAAQ,SAAS,EAAG,OAAO,CAC3B,GAAK,WAAW,QAAQ,EAAE,CAC5B,EAAM,kBAAkB,CACxB,IAAM,EAAS,CAAC,GAAG,EAAM,qBAAqB,QAAQ,CAAC,CACjD,EAAQ,EAAO,QAAQ,EAAG,CAC1B,EAAO,EAAI,MAAM,oBAAoB,CAAG,EAAI,GAC9C,EAAY,EAEhB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAO,OAAQ,IAEjC,GADA,GAAa,EAAO,OAAS,EAAY,GAAQ,EAAO,OACpD,CAAC,EAAO,IAAY,SAAU,CAChC,EAAO,IAAY,OAAO,CAC1B,SAMR,EAAY,mBAAsB,CAChC,EAAG,SAAU,UAAW,EAAc,CACtC,EAAW,SAAU,EAAsB,CACzC,gBAAiB,CAAC,EAAiB,CACnC,WAAY,GACZ,UAAW,GACX,QAAS,GACV,CAAC,CACH,CAAC"}

package/dist/esm/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-import{QUICK_EVENT as e,announce as t,attr as n,attrOrCSS as r,debounce as i,isBrowser as a,on as o,onHotReload as s,onMutation as c,setTextWithoutMutation as l,tag as u,warn as d}from"../utils/utils.js";let f,p,m=0,h=0;const g=a()&&/iPad|iPhone|iPod/.test(navigator.userAgent),_=`data-tooltip`,v=`data-color`,y=`aria-label`,b=`aria-description`,x=`[${v}]`,S=`[${_}]`,C=`data-color-scheme`,w=`[${C}]`,T=e=>{e&&!(e instanceof HTMLElement)&&d(`setTooltipElement expects an HTMLElement, got: `,e),f=e||void 0},E=i(()=>{for(let e of document.querySelectorAll(S)){let i=e.getAttribute(y)||e.getAttribute(b),a=e.getAttribute(_)||r(e,_);if(i!==a){let t=n(e,`role`)!==`img`&&e.textContent?.trim();n(e,_,a),n(e,y,t?null:a),n(e,b,t?a:null),e.matches(`a,button,input,label,select,textarea,[tabindex]`)||d(`Missing tabindex="0" attribute on: `,e)}let o=e===p&&f?.matches(`:popover-open`),s=o&&a&&f?.textContent!==a;o&&s&&(f&&l(f,a),document.activeElement===e&&t(a))}},0),D=({type:e,target:t})=>{if(clearTimeout(m),t===f)return;if(e===`mouseover`&&!p&&!g){m=setTimeout(D,300,{target:t});return}let r=t?.closest?.(`[${_}]`);if(r===p)return;if(!r)return O();f||=u(`div`,{class:`ds-tooltip`}),f.isConnected||document.body.appendChild(f);let i=r.closest(x),a=r.closest(w),o=i!==a&&i?.contains(a);clearTimeout(h),n(f,`popover`,`manual`),n(f,C,a?.getAttribute(C)||null),n(f,v,o&&i?.getAttribute(v)||null),l(f,n(r,_)),f.showPopover(),f.dispatchEvent(new CustomEvent(`ds-toggle-source`,{detail:r})),p=r},O=()=>f?.isConnected&&f.popover&&f.hidePopover(),k=e=>{if(e?.type===`keydown`)return e?.key===`Escape`&&O();e?e.target===f&&e.newState===`closed`&&(h=setTimeout(k,300)):p=void 0};s(`tooltip`,()=>[o(document,`blur focus mouseover`,D,e),o(document,`toggle keydown`,k,e),c(document,E,{attributeFilter:[_],attributes:!0,childList:!0,subtree:!0})]);export{T as setTooltipElement};
+import{QUICK_EVENT as e,announce as t,attr as n,attrOrCSS as r,isBrowser as i,on as a,onHotReload as o,onMutation as s,tag as c,warn as l}from"../utils/utils.js";let u,d,f=!1,p=0,m=0;const h=i()&&/iPad|iPhone|iPod/.test(navigator.userAgent),g=`data-tooltip`,_=`data-color`,v=`aria-label`,y=`aria-description`,b=`[${_}]`,x=`[${g}]`,S=`data-color-scheme`,C=`[${S}]`,w=e=>{e&&!(e instanceof HTMLElement)&&l(`setTooltipElement expects an HTMLElement, got: `,e),clearTimeout(m),clearTimeout(p),d=void 0,f=!1,u=e||void 0},T=()=>{for(let e of document.querySelectorAll(x)){let i=r(e,g);if(!i)return;if(i!==(e.getAttribute(v)||e.getAttribute(y))){let t=n(e,`role`)!==`img`&&e.textContent?.trim();n(e,g,i),n(e,v,t?null:i),n(e,y,t?i:null),e.matches(`a,button,input,label,select,textarea,[tabindex]`)||l(`Missing tabindex="0" attribute on: `,e)}let a=e===d&&u?.offsetHeight&&u?.offsetWidth,o=a&&i&&u?.textContent!==i;a&&o&&(u&&(u.textContent=i),document.activeElement===e&&t(i))}},E=({type:e,target:t})=>{if(clearTimeout(p),t===u)return;if(e===`mouseover`&&!f&&!h){p=setTimeout(E,300,{target:t});return}let r=t?.closest?.(`[${g}]`);if(r===d)return;if(!r)return D();u||=c(`div`,{class:`ds-tooltip`}),u.isConnected||document.body.appendChild(u);let i=r.closest(b),a=r.closest(C),o=i!==a&&i?.contains(a);clearTimeout(m),n(u,`popover`,`manual`),n(u,S,a?.getAttribute(S)||null),n(u,_,o&&i?.getAttribute(_)||null),u.textContent=n(r,g),u.showPopover(),u.dispatchEvent(new CustomEvent(`ds-toggle-source`,{detail:r})),f=!0,d=r},D=()=>u?.isConnected&&u.popover&&u.hidePopover(),O=e=>{if(e?.type===`keydown`)return e?.key===`Escape`&&D();e?e.target===u&&e.newState===`closed`&&(d=void 0,m=setTimeout(O,300)):f=!1};o(`tooltip`,()=>[a(document,`blur focus mouseover`,E,e),a(document,`toggle keydown`,O,e),s(document,T,{attributeFilter:[g],attributes:!0,childList:!0,subtree:!0})]);export{w as setTooltipElement};
 //# sourceMappingURL=tooltip.js.map

package/dist/esm/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/tooltip/tooltip.ts"],"sourcesContent":["import {\n  announce,\n  attr,\n  attrOrCSS,\n  debounce,\n  isBrowser,\n  on,\n  onHotReload,\n  onMutation,\n  QUICK_EVENT,\n  setTextWithoutMutation,\n  tag,\n  warn,\n} from '../utils/utils';\n\nlet TIP: HTMLElement | undefined;\nlet SOURCE: Element | undefined;\nlet HOVER_TIMER: number | ReturnType<typeof setTimeout> = 0;\nlet SKIP_TIMER: number | ReturnType<typeof setTimeout> = 0;\n/*needed to omit DELAY_HOVER on iOS that otherwise causes interaction delay \n(iOS triggers mouseover before click when an element is tapped)*/\nconst IS_IOS = isBrowser() && /iPad|iPhone|iPod/.test(navigator.userAgent);\nconst ATTR_TOOLTIP = 'data-tooltip';\nconst ATTR_COLOR = 'data-color';\nconst ARIA_LABEL = 'aria-label';\nconst ARIA_DESC = 'aria-description';\nconst SELECTOR_COLOR = `[${ATTR_COLOR}]`;\nconst SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;\nconst ATTR_SCHEME = 'data-color-scheme';\nconst SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;\nconst SELECTOR_INTERACTIVE = 'a,button,input,label,select,textarea,[tabindex]';\nconst DELAY_HOVER = 300;\nconst DELAY_SKIP = 300;\n\n/**\n * setTooltipElement\n * @description Allows setting a custom tooltip element. It does not need to, and should not, be injected to document.body, as we inject on hover to ensure React hydration works as expected.\n * @param el The HTMLElement to use as tooltip\n */\nexport const setTooltipElement = (el?: HTMLElement | null) => {\n  if (el && !(el instanceof HTMLElement))\n    warn('setTooltipElement expects an HTMLElement, got: ', el);\n  TIP = el || undefined;\n};\n\nconst handleAriaAttributes = debounce(() => {\n  for (const el of document.querySelectorAll(SELECTOR_TOOLTIP)) {\n    const aria = el.getAttribute(ARIA_LABEL) || el.getAttribute(ARIA_DESC); // Using getAttribute for best performance\n    const text = el.getAttribute(ATTR_TOOLTIP) || attrOrCSS(el, ATTR_TOOLTIP); // Only parse CSS if attribute is empty for better performance\n\n    if (aria !== text) {\n      const hasText = attr(el, 'role') !== 'img' && el.textContent?.trim(); // If role=\"img\", ignore text\n      attr(el, ATTR_TOOLTIP, text); // Set data-tooltip attribute to speed up future mutations\n      attr(el, ARIA_LABEL, hasText ? null : text); // Set aria-label if element does not have text\n      attr(el, ARIA_DESC, hasText ? text : null); // Set aria-description if element has text\n      if (!el.matches(SELECTOR_INTERACTIVE))\n        warn('Missing tabindex=\"0\" attribute on: ', el);\n    }\n\n    // If an existing tooltip has changed programmatically, update tooltip text and announce change\n    const isCurrent = el === SOURCE && TIP?.matches(':popover-open');\n    const isChanged = isCurrent && text && TIP?.textContent !== text; // Only update if mutation is on source element and tooltip is open to avoid unnecessary updates\n    if (isCurrent && isChanged) {\n      if (TIP) setTextWithoutMutation(TIP, text);\n      if (document.activeElement === el) announce(text); // Only announce if focus is on the button\n    }\n  }\n}, 0); // Debounce to merge multiple mutations\n\nconst handleInterest = ({ type, target }: Event) => {\n  clearTimeout(HOVER_TIMER);\n\n  if (target === TIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n  if (type === 'mouseover' && !SOURCE && !IS_IOS) {\n    HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target }); // Delay mouse showing tooltip if not already shown\n    return;\n  }\n\n  const source = (target as Element)?.closest?.(`[${ATTR_TOOLTIP}]`);\n  if (source === SOURCE) return; // No need to update\n  if (!source) return hideTooltip(); // If no new anchor, cleanup previous autoUpdate\n  if (!TIP) TIP = tag('div', { class: 'ds-tooltip' });\n  if (!TIP.isConnected) document.body.appendChild(TIP); // Ensure connected\n\n  const color = source.closest(SELECTOR_COLOR); // Match source color of source element\n  const scheme = source.closest(SELECTOR_SCHEME); // Match source color-scheme of source element\n  const isReset = color !== scheme && color?.contains(scheme as Node); // If data-scheme is closer to target, it will reset data-color\n  clearTimeout(SKIP_TIMER);\n  attr(TIP, 'popover', 'manual'); // Ensure popover behavior\n  attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null); // Fallback to null to reset if not scheme found\n  attr(TIP, ATTR_COLOR, (isReset && color?.getAttribute(ATTR_COLOR)) || null); // Fallback to null to reset if not scheme found\n  setTextWithoutMutation(TIP, attr(source, ATTR_TOOLTIP));\n  TIP.showPopover();\n  TIP.dispatchEvent(new CustomEvent('ds-toggle-source', { detail: source })); // Since showPopover({ source }) is not supported in all browsers yet\n  SOURCE = source;\n};\n\nconst hideTooltip = () => TIP?.isConnected && TIP.popover && TIP.hidePopover(); // Only hide if connected and activated\n\nconst handleClose = (event?: Partial<ToggleEvent & KeyboardEvent>) => {\n  if (event?.type === 'keydown')\n    return event?.key === 'Escape' && hideTooltip();\n  if (!event) SOURCE = undefined;\n  else if (event.target === TIP && event.newState === 'closed')\n    SKIP_TIMER = setTimeout(handleClose, DELAY_SKIP);\n};\n\nonHotReload('tooltip', () => [\n  on(document, 'blur focus mouseover', handleInterest, QUICK_EVENT),\n  on(document, 'toggle keydown', handleClose, QUICK_EVENT),\n  onMutation(document, handleAriaAttributes, {\n    attributeFilter: [ATTR_TOOLTIP],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"4MAeA,IAAI,EACA,EACA,EAAsD,EACtD,EAAqD,EAGzD,MAAM,EAAS,GAAW,EAAI,mBAAmB,KAAK,UAAU,UAAU,CACpE,EAAe,eACf,EAAa,aACb,EAAa,aACb,EAAY,mBACZ,EAAiB,IAAI,EAAW,GAChC,EAAmB,IAAI,EAAa,GACpC,EAAc,oBACd,EAAkB,IAAI,EAAY,GAU3B,EAAqB,GAA4B,CACxD,GAAM,EAAE,aAAc,cACxB,EAAK,kDAAmD,EAAG,CAC7D,EAAM,GAAM,IAAA,IAGR,EAAuB,MAAe,CAC1C,IAAK,IAAM,KAAM,SAAS,iBAAiB,EAAiB,CAAE,CAC5D,IAAM,EAAO,EAAG,aAAa,EAAW,EAAI,EAAG,aAAa,EAAU,CAChE,EAAO,EAAG,aAAa,EAAa,EAAI,EAAU,EAAI,EAAa,CAEzE,GAAI,IAAS,EAAM,CACjB,IAAM,EAAU,EAAK,EAAI,OAAO,GAAK,OAAS,EAAG,aAAa,MAAM,CACpE,EAAK,EAAI,EAAc,EAAK,CAC5B,EAAK,EAAI,EAAY,EAAU,KAAO,EAAK,CAC3C,EAAK,EAAI,EAAW,EAAU,EAAO,KAAK,CACrC,EAAG,QAAQ,kDAAqB,EACnC,EAAK,sCAAuC,EAAG,CAInD,IAAM,EAAY,IAAO,GAAU,GAAK,QAAQ,gBAAgB,CAC1D,EAAY,GAAa,GAAQ,GAAK,cAAgB,EACxD,GAAa,IACX,GAAK,EAAuB,EAAK,EAAK,CACtC,SAAS,gBAAkB,GAAI,EAAS,EAAK,IAGpD,EAAE,CAEC,GAAkB,CAAE,OAAM,YAAoB,CAGlD,GAFA,aAAa,EAAY,CAErB,IAAW,EAAK,OACpB,GAAI,IAAS,aAAe,CAAC,GAAU,CAAC,EAAQ,CAC9C,EAAc,WAAW,EAAgB,IAAa,CAAE,SAAQ,CAAC,CACjE,OAGF,IAAM,EAAU,GAAoB,UAAU,IAAI,EAAa,GAAG,CAClE,GAAI,IAAW,EAAQ,OACvB,GAAI,CAAC,EAAQ,OAAO,GAAa,CACjC,AAAU,IAAM,EAAI,MAAO,CAAE,MAAO,aAAc,CAAC,CAC9C,EAAI,aAAa,SAAS,KAAK,YAAY,EAAI,CAEpD,IAAM,EAAQ,EAAO,QAAQ,EAAe,CACtC,EAAS,EAAO,QAAQ,EAAgB,CACxC,EAAU,IAAU,GAAU,GAAO,SAAS,EAAe,CACnE,aAAa,EAAW,CACxB,EAAK,EAAK,UAAW,SAAS,CAC9B,EAAK,EAAK,EAAa,GAAQ,aAAa,EAAY,EAAI,KAAK,CACjE,EAAK,EAAK,EAAa,GAAW,GAAO,aAAa,EAAW,EAAK,KAAK,CAC3E,EAAuB,EAAK,EAAK,EAAQ,EAAa,CAAC,CACvD,EAAI,aAAa,CACjB,EAAI,cAAc,IAAI,YAAY,mBAAoB,CAAE,OAAQ,EAAQ,CAAC,CAAC,CAC1E,EAAS,GAGL,MAAoB,GAAK,aAAe,EAAI,SAAW,EAAI,aAAa,CAExE,EAAe,GAAiD,CACpE,GAAI,GAAO,OAAS,UAClB,OAAO,GAAO,MAAQ,UAAY,GAAa,CAC5C,EACI,EAAM,SAAW,GAAO,EAAM,WAAa,WAClD,EAAa,WAAW,EAAa,IAAW,EAFtC,EAAS,IAAA,IAKvB,EAAY,cAAiB,CAC3B,EAAG,SAAU,uBAAwB,EAAgB,EAAY,CACjE,EAAG,SAAU,iBAAkB,EAAa,EAAY,CACxD,EAAW,SAAU,EAAsB,CACzC,gBAAiB,CAAC,EAAa,CAC/B,WAAY,GACZ,UAAW,GACX,QAAS,GACV,CAAC,CACH,CAAC"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/tooltip/tooltip.ts"],"sourcesContent":["import {\n  announce,\n  attr,\n  attrOrCSS,\n  isBrowser,\n  on,\n  onHotReload,\n  onMutation,\n  QUICK_EVENT,\n  tag,\n  warn,\n} from '../utils/utils';\n\nlet TIP: HTMLElement | undefined;\nlet SOURCE: Element | undefined;\nlet IS_HOVERING = false;\nlet HOVER_TIMER: number | ReturnType<typeof setTimeout> = 0;\nlet SKIP_TIMER: number | ReturnType<typeof setTimeout> = 0;\nconst IS_IOS = isBrowser() && /iPad|iPhone|iPod/.test(navigator.userAgent); // Needed to omit DELAY_HOVER since iOS triggers mouseover before click\nconst ATTR_TOOLTIP = 'data-tooltip';\nconst ATTR_COLOR = 'data-color';\nconst ARIA_LABEL = 'aria-label';\nconst ARIA_DESC = 'aria-description';\nconst SELECTOR_COLOR = `[${ATTR_COLOR}]`;\nconst SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;\nconst ATTR_SCHEME = 'data-color-scheme';\nconst SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;\nconst SELECTOR_INTERACTIVE = 'a,button,input,label,select,textarea,[tabindex]';\nconst DELAY_HOVER = 300;\nconst DELAY_SKIP = 300;\n\n/**\n * setTooltipElement\n * @description Allows setting a custom tooltip element. It does not need to, and should not, be injected to document.body, as we inject on hover to ensure React hydration works as expected.\n * @param el The HTMLElement to use as tooltip\n */\nexport const setTooltipElement = (el?: HTMLElement | null) => {\n  if (el && !(el instanceof HTMLElement))\n    warn('setTooltipElement expects an HTMLElement, got: ', el);\n  clearTimeout(SKIP_TIMER); // Reset when changing source\n  clearTimeout(HOVER_TIMER);\n  SOURCE = undefined;\n  IS_HOVERING = false;\n  TIP = el || undefined;\n};\n\nconst handleAriaAttributes = () => {\n  for (const el of document.querySelectorAll(SELECTOR_TOOLTIP)) {\n    const text = attrOrCSS(el, ATTR_TOOLTIP);\n\n    if (!text) return; // Early return if no tooltip text\n    if (text !== (el.getAttribute(ARIA_LABEL) || el.getAttribute(ARIA_DESC))) {\n      const hasText = attr(el, 'role') !== 'img' && el.textContent?.trim(); // If role=\"img\", ignore text\n      attr(el, ATTR_TOOLTIP, text); // Set data-tooltip attribute to speed up future mutations\n      attr(el, ARIA_LABEL, hasText ? null : text); // Set aria-label if element does not have text\n      attr(el, ARIA_DESC, hasText ? text : null); // Set aria-description if element has text\n      if (!el.matches(SELECTOR_INTERACTIVE))\n        warn('Missing tabindex=\"0\" attribute on: ', el);\n    }\n\n    // If an existing tooltip has changed programmatically, update tooltip text and announce change\n    const isCurrent = el === SOURCE && TIP?.offsetHeight && TIP?.offsetWidth; // Using offsetHeight+Width to check visibility as :popover-open is not well supported by JSDOM\n    const isChanged = isCurrent && text && TIP?.textContent !== text; // Only update if mutation is on source element and tooltip is open to avoid unnecessary updates\n    if (isCurrent && isChanged) {\n      if (TIP) TIP.textContent = text;\n      if (document.activeElement === el) announce(text); // Only announce if focus is on the button\n    }\n  }\n};\n\nconst handleInterest = ({ type, target }: Event) => {\n  clearTimeout(HOVER_TIMER);\n\n  if (target === TIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n  if (type === 'mouseover' && !IS_HOVERING && !IS_IOS) {\n    HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target }); // Delay mouse showing tooltip if not already shown\n    return;\n  }\n\n  const source = (target as Element)?.closest?.(`[${ATTR_TOOLTIP}]`);\n  if (source === SOURCE) return; // No need to update\n  if (!source) return hideTooltip(); // If no new anchor, cleanup previous autoUpdate\n  if (!TIP) TIP = tag('div', { class: 'ds-tooltip' });\n  if (!TIP.isConnected) document.body.appendChild(TIP); // Ensure connected\n\n  const color = source.closest(SELECTOR_COLOR); // Match source color of source element\n  const scheme = source.closest(SELECTOR_SCHEME); // Match source color-scheme of source element\n  const isReset = color !== scheme && color?.contains(scheme as Node); // If data-scheme is closer to target, it will reset data-color\n\n  clearTimeout(SKIP_TIMER);\n  attr(TIP, 'popover', 'manual'); // Ensure popover behavior\n  attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null); // Fallback to null to reset if not scheme found\n  attr(TIP, ATTR_COLOR, (isReset && color?.getAttribute(ATTR_COLOR)) || null); // Fallback to null to reset if not scheme found\n  TIP.textContent = attr(source, ATTR_TOOLTIP);\n  TIP.showPopover();\n  TIP.dispatchEvent(new CustomEvent('ds-toggle-source', { detail: source })); // Since showPopover({ source }) is not supported in all browsers yet\n  IS_HOVERING = true;\n  SOURCE = source;\n};\n\nconst hideTooltip = () => TIP?.isConnected && TIP.popover && TIP.hidePopover(); // Only hide if connected and activated\n\nconst handleClose = (event?: Partial<ToggleEvent & KeyboardEvent>) => {\n  if (event?.type === 'keydown')\n    return event?.key === 'Escape' && hideTooltip();\n  if (!event) IS_HOVERING = false;\n  else if (event.target === TIP && event.newState === 'closed') {\n    SOURCE = undefined;\n    SKIP_TIMER = setTimeout(handleClose, DELAY_SKIP);\n  }\n};\n\nonHotReload('tooltip', () => [\n  on(document, 'blur focus mouseover', handleInterest, QUICK_EVENT),\n  on(document, 'toggle keydown', handleClose, QUICK_EVENT),\n  onMutation(document, handleAriaAttributes, {\n    attributeFilter: [ATTR_TOOLTIP],\n    attributes: true,\n    childList: true,\n    subtree: true,\n  }),\n]);\n"],"mappings":"kKAaA,IAAI,EACA,EACA,EAAc,GACd,EAAsD,EACtD,EAAqD,EACzD,MAAM,EAAS,GAAW,EAAI,mBAAmB,KAAK,UAAU,UAAU,CACpE,EAAe,eACf,EAAa,aACb,EAAa,aACb,EAAY,mBACZ,EAAiB,IAAI,EAAW,GAChC,EAAmB,IAAI,EAAa,GACpC,EAAc,oBACd,EAAkB,IAAI,EAAY,GAU3B,EAAqB,GAA4B,CACxD,GAAM,EAAE,aAAc,cACxB,EAAK,kDAAmD,EAAG,CAC7D,aAAa,EAAW,CACxB,aAAa,EAAY,CACzB,EAAS,IAAA,GACT,EAAc,GACd,EAAM,GAAM,IAAA,IAGR,MAA6B,CACjC,IAAK,IAAM,KAAM,SAAS,iBAAiB,EAAiB,CAAE,CAC5D,IAAM,EAAO,EAAU,EAAI,EAAa,CAExC,GAAI,CAAC,EAAM,OACX,GAAI,KAAU,EAAG,aAAa,EAAW,EAAI,EAAG,aAAa,EAAU,EAAG,CACxE,IAAM,EAAU,EAAK,EAAI,OAAO,GAAK,OAAS,EAAG,aAAa,MAAM,CACpE,EAAK,EAAI,EAAc,EAAK,CAC5B,EAAK,EAAI,EAAY,EAAU,KAAO,EAAK,CAC3C,EAAK,EAAI,EAAW,EAAU,EAAO,KAAK,CACrC,EAAG,QAAQ,kDAAqB,EACnC,EAAK,sCAAuC,EAAG,CAInD,IAAM,EAAY,IAAO,GAAU,GAAK,cAAgB,GAAK,YACvD,EAAY,GAAa,GAAQ,GAAK,cAAgB,EACxD,GAAa,IACX,IAAK,EAAI,YAAc,GACvB,SAAS,gBAAkB,GAAI,EAAS,EAAK,IAKjD,GAAkB,CAAE,OAAM,YAAoB,CAGlD,GAFA,aAAa,EAAY,CAErB,IAAW,EAAK,OACpB,GAAI,IAAS,aAAe,CAAC,GAAe,CAAC,EAAQ,CACnD,EAAc,WAAW,EAAgB,IAAa,CAAE,SAAQ,CAAC,CACjE,OAGF,IAAM,EAAU,GAAoB,UAAU,IAAI,EAAa,GAAG,CAClE,GAAI,IAAW,EAAQ,OACvB,GAAI,CAAC,EAAQ,OAAO,GAAa,CACjC,AAAU,IAAM,EAAI,MAAO,CAAE,MAAO,aAAc,CAAC,CAC9C,EAAI,aAAa,SAAS,KAAK,YAAY,EAAI,CAEpD,IAAM,EAAQ,EAAO,QAAQ,EAAe,CACtC,EAAS,EAAO,QAAQ,EAAgB,CACxC,EAAU,IAAU,GAAU,GAAO,SAAS,EAAe,CAEnE,aAAa,EAAW,CACxB,EAAK,EAAK,UAAW,SAAS,CAC9B,EAAK,EAAK,EAAa,GAAQ,aAAa,EAAY,EAAI,KAAK,CACjE,EAAK,EAAK,EAAa,GAAW,GAAO,aAAa,EAAW,EAAK,KAAK,CAC3E,EAAI,YAAc,EAAK,EAAQ,EAAa,CAC5C,EAAI,aAAa,CACjB,EAAI,cAAc,IAAI,YAAY,mBAAoB,CAAE,OAAQ,EAAQ,CAAC,CAAC,CAC1E,EAAc,GACd,EAAS,GAGL,MAAoB,GAAK,aAAe,EAAI,SAAW,EAAI,aAAa,CAExE,EAAe,GAAiD,CACpE,GAAI,GAAO,OAAS,UAClB,OAAO,GAAO,MAAQ,UAAY,GAAa,CAC5C,EACI,EAAM,SAAW,GAAO,EAAM,WAAa,WAClD,EAAS,IAAA,GACT,EAAa,WAAW,EAAa,IAAW,EAHtC,EAAc,IAO5B,EAAY,cAAiB,CAC3B,EAAG,SAAU,uBAAwB,EAAgB,EAAY,CACjE,EAAG,SAAU,iBAAkB,EAAa,EAAY,CACxD,EAAW,SAAU,EAAsB,CACzC,gBAAiB,CAAC,EAAa,CAC/B,WAAY,GACZ,UAAW,GACX,QAAS,GACV,CAAC,CACH,CAAC"}

package/dist/esm/utils/utils.js

@@ -1,2 +1,2 @@
-const e={passive:!0,capture:!0},t=()=>typeof window<`u`&&typeof document<`u`,n=()=>t()&&/^Win/i.test(navigator.userAgentData?.platform||navigator.platform),r=typeof HTMLElement>`u`?class{}:HTMLElement;function i(e,t){let n;return function(...r){clearTimeout(n),n=setTimeout(()=>e.apply(this,r),t)}}const a=(e,...n)=>!t()||window.dsWarnings===!1||console.warn(`Designsystemet: ${e}`,...n),o=(e,t,n)=>n===void 0?e.getAttribute(t)??null:(n===null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n),null),s=/^["']|["']$/g,c=(e,t)=>{let n=o(e,t);return n||=getComputedStyle(e).getPropertyValue(`--_ds-${t}`).replace(s,``).trim()||null,n||a(`Missing ${t} on:`,e),n},l=(e,...t)=>{let[n,...r]=t;for(let t of n.split(` `))e.addEventListener(t,...r);return()=>u(e,...t)},u=(e,...t)=>{let[n,...r]=t;for(let t of n.split(` `))e.removeEventListener(t,...r)},d=(e,n)=>{t()&&(window._dsHotReloadCleanup||(window._dsHotReloadCleanup=new Map),window._dsHotReloadCleanup?.get(e)?.map(e=>e()),window._dsHotReloadCleanup?.set(e,n()))};let f=!1;const p=(e,t,n)=>{let r=0,i=()=>{if(!e.isConnected)return a();t(o),o.takeRecords(),r=0},a=()=>o?.disconnect?.(),o=new MutationObserver(()=>{!f&&!r&&(r=requestAnimationFrame(i))});return o.observe(e,n),requestAnimationFrame(i),a},m=(e,t)=>{f=!0,e.textContent=t,requestAnimationFrame(h)},h=()=>{f=!1},g=(e,t)=>{let n=document.createElement(e);if(t)for(let[e,r]of Object.entries(t))o(n,e,r);return n},_={define:(e,n)=>!t()||window.customElements.get(e)||window.customElements.define(e,n)};let v=0;function y(e){return t()?(window.dsUseId||(window.dsUseId=0),e&&!e.id&&(e.id=`:ds:${++window.dsUseId}`),e?.id||``):`:ds:${++v}`}let b,x=0,S=0;const C=e=>{clearTimeout(S),b&&m(b,`${e}${x++%2?`\xA0`:``}`),e&&(S=setTimeout(C,2e3,``))},w=()=>{document.readyState===`complete`&&(b||(b=g(`div`,{"aria-live":`assertive`}),b.style.overflow=`hidden`,b.style.position=`fixed`,b.style.whiteSpace=`nowrap`,b.style.width=`1px`),b.isConnected||document.body.appendChild(b))};d(`announce`,()=>[l(document,`focus mouseover`,w,e)]);export{r as DSElement,e as QUICK_EVENT,C as announce,o as attr,c as attrOrCSS,_ as customElements,i as debounce,t as isBrowser,n as isWindows,u as off,l as on,d as onHotReload,p as onMutation,m as setTextWithoutMutation,g as tag,y as useId,a as warn};
+const e={passive:!0,capture:!0},t=()=>typeof window<`u`&&typeof document<`u`,n=()=>t()&&/^Win/i.test(navigator.userAgentData?.platform||navigator.platform),r=typeof HTMLElement>`u`?class{}:HTMLElement;function i(e,t){let n;return function(...r){clearTimeout(n),n=setTimeout(()=>e.apply(this,r),t)}}const a=(e,...n)=>!t()||window.dsWarnings===!1||console.log(`\x1B[1mDesignsystemet:\x1B[m ${e}`,...n),o=(e,t,n)=>n===void 0?e.getAttribute(t)??null:(n===null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n),null),s=(e,t)=>getComputedStyle(e).getPropertyValue(t).trim(),c=/^["']|["']$/g,l=(e,t)=>{let n=o(e,t);return n||=s(e,`--_ds-${t}`).replace(c,``).trim(),n||a(`Missing ${t} on:`,e),n||null},u=(e,...t)=>{let[n,...r]=t;for(let t of n.split(` `))e.addEventListener(t,...r);return()=>d(e,...t)},d=(e,...t)=>{let[n,...r]=t;for(let t of n.split(` `))e.removeEventListener(t,...r)},f=(e,n)=>{t()&&(window._dsHotReloadCleanup||(window._dsHotReloadCleanup=new Map),window._dsHotReloadCleanup?.get(e)?.map(e=>e()),window._dsHotReloadCleanup?.set(e,n()))},p=(e,n,r)=>{let i=()=>a.disconnect(),a=new MutationObserver(r=>{if(!t()||!e.isConnected)return i();n(e,r)});return n(e),a.observe(e,r),i},m=(e,t)=>{let n=document.createElement(e);if(t)for(let[e,r]of Object.entries(t))o(n,e,r);return n},h={define:(e,n)=>!t()||window.customElements.get(e)||window.customElements.define(e,n)};let g=0;function _(e){return t()?(window.dsUseId||(window.dsUseId=0),e&&!e.id&&(e.id=`:ds:${++window.dsUseId}`),e?.id||``):`:ds:${++g}`}let v,y=0,b=0;const x=e=>{clearTimeout(b),v&&(v.textContent=`${e}${y++%2?`\xA0`:``}`),e&&(b=setTimeout(x,2e3,``))},S=()=>{document.readyState===`complete`&&(v||(v=m(`div`,{"aria-live":`assertive`}),v.style.overflow=`hidden`,v.style.position=`fixed`,v.style.whiteSpace=`nowrap`,v.style.width=`1px`),v.isConnected||document.body.appendChild(v))};f(`announce`,()=>[u(document,`focus mouseover`,S,e)]);export{r as DSElement,e as QUICK_EVENT,x as announce,o as attr,l as attrOrCSS,h as customElements,i as debounce,s as getCSSProp,t as isBrowser,n as isWindows,d as off,u as on,f as onHotReload,p as onMutation,m as tag,_ as useId,a as warn};
 //# sourceMappingURL=utils.js.map

package/dist/esm/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/utils/utils.ts"],"sourcesContent":["export const QUICK_EVENT = { passive: true, capture: true };\n\n// Using function instead of constant to support evnironments where DOM can be unloaded (like Vitest with jsdom)\nexport const isBrowser = () =>\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\nexport const isWindows = () =>\n  isBrowser() &&\n  // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474\n  /^Win/i.test(navigator.userAgentData?.platform || navigator.platform);\n\n// Make sure we have a HTMLElement to extend (for server side rendering)\nexport const DSElement =\n  typeof HTMLElement === 'undefined'\n    ? (class {} as typeof HTMLElement)\n    : HTMLElement;\n\nexport function debounce<T extends unknown[]>(\n  callback: (...args: T) => void,\n  delay: number,\n) {\n  let timer: ReturnType<typeof setTimeout>;\n\n  return function (this: unknown, ...args: T) {\n    clearTimeout(timer);\n    timer = setTimeout(() => callback.apply(this, args), delay);\n  };\n}\n\n/**\n * warn\n * @description Utility to console.warn, but can be silenced in production with window.dsWarnings = false;\n */\ndeclare global {\n  interface Window {\n    dsWarnings?: boolean;\n  }\n}\nexport const warn = (\n  message: string,\n  ...args: Parameters<typeof console.warn>\n) =>\n  !isBrowser() ||\n  window.dsWarnings === false ||\n  console.warn(`Designsystemet: ${message}`, ...args);\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to read/write attributes from\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport const attr = (\n  el: Element,\n  name: string,\n  value?: string | null,\n): string | null => {\n  if (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n  if (value === null) el.removeAttribute(name);\n  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n  return null;\n};\n\nconst STRIP_SURROUNDING_QUOTES = /^[\"']|[\"']$/g; // Matches surrounding single or double quotes\n/**\n * attrOrCSS\n * @description Retrieves and updates attribute based on attribute or CSS property value\n * @param el The Element to read attributes/CSS from\n * @param name Attribute or CSS property to get\n * @return string attribute or CSS property value\n */\nexport const attrOrCSS = (el: Element, name: string) => {\n  let value = attr(el, name);\n  if (!value) {\n    const prop = getComputedStyle(el).getPropertyValue(`--_ds-${name}`);\n    value = prop.replace(STRIP_SURROUNDING_QUOTES, '').trim() || null;\n  }\n  if (!value) warn(`Missing ${name} on:`, el);\n  return value;\n};\n\n/**\n * on\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n  el: Node | Window | ShadowRoot,\n  ...rest: Parameters<typeof Element.prototype.addEventListener>\n): (() => void) => {\n  const [types, ...options] = rest;\n  for (const type of types.split(' ')) el.addEventListener(type, ...options);\n  return () => off(el, ...rest);\n};\n\n/**\n * off\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n  el: Node | Window | ShadowRoot,\n  ...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => {\n  const [types, ...options] = rest;\n  for (const type of types.split(' ')) el.removeEventListener(type, ...options);\n};\n\n// Used to store cleanup functions for hot-reloading\ndeclare global {\n  interface Window {\n    _dsHotReloadCleanup?: Map<string, Array<() => void>>;\n  }\n}\n\n/**\n * onHotReload\n * @description Runs a callback when window is loaded in browser, and ensures cleanup when hot-reloading\n * @param key The key to identify setup and corresponding cleanup\n * @param callback The callback to run when the page is ready\n */\nexport const onHotReload = (key: string, setup: () => Array<() => void>) => {\n  if (!isBrowser()) return; // Skip if not in modern browser environment, but on each call as Vitest might have unloaded jsdom between tests\n  if (!window._dsHotReloadCleanup) window._dsHotReloadCleanup = new Map(); // Hot reload cleanup support supporting all build tools\n\n  window._dsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup()); // Run previous cleanup\n  window._dsHotReloadCleanup?.set(key, setup()); // Store new cleanup\n};\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nlet SKIP_MUTATIONS = false;\nexport const onMutation = (\n  el: Node,\n  callback: (observer: MutationObserver) => void,\n  options: MutationObserverInit,\n) => {\n  let queue = 0;\n  const onFrame = () => {\n    if (!el.isConnected) return cleanup(); // Stop observing if element is removed from DOM\n    callback(observer);\n    observer.takeRecords(); // Clear records in case mutations happened during callback\n    queue = 0;\n  };\n  const cleanup = () => observer?.disconnect?.();\n  const observer = new MutationObserver(() => {\n    if (!SKIP_MUTATIONS && !queue) queue = requestAnimationFrame(onFrame); // requestAnimationFrame only runs when page is visible\n  });\n\n  observer.observe(el, options);\n  requestAnimationFrame(onFrame); // Initial run when page is visible and children has mounted\n  return cleanup;\n};\n\n/**\n * Many mutation observers need to watch childNodes, thus running on all `textContent` changes\n * This utility allows skipping mutation observers while updating textContent\n */\nexport const setTextWithoutMutation = (el: Element, text: string | null) => {\n  SKIP_MUTATIONS = true;\n  el.textContent = text;\n  requestAnimationFrame(enableMutations); // Let all mutationobservers run before enabling again\n};\nconst enableMutations = () => {\n  SKIP_MUTATIONS = false;\n};\n\n/**\n * tag\n * @description creates element and assigns properties\n * @param tagName The tagname of element to create\n * @param attrs Optional attributes to add to the element\n * @param text Optional text content to add to the element\n * @return HTMLElement with props\n */\nexport const tag = <TagName extends keyof HTMLElementTagNameMap>(\n  tagName: TagName,\n  attrs?: Record<string, string | null> | null,\n): HTMLElementTagNameMap[TagName] => {\n  const el = document.createElement(tagName);\n  if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n  return el;\n};\n\n/**\n * customElements.define\n * @description Defines a customElement if running in browser and if not already registered\n * Scoped/named \"customElements.define\" so @custom-elements-manifest/analyzer can find tag names\n */\nexport const customElements = {\n  define: (name: string, instance: CustomElementConstructor) =>\n    !isBrowser() ||\n    window.customElements.get(name) ||\n    window.customElements.define(name, instance),\n};\n\n/**\n * useId\n * @return A generated unique ID\n */\ndeclare global {\n  interface Window {\n    dsUseId?: number; // Use a global counter to ensure this works even when loading designsystemet multiple times\n  }\n}\nlet id = 0;\nexport function useId(el?: Element | null) {\n  if (!isBrowser()) return `:ds:${++id}`; // Emulate browser environment if window not available\n  if (!window.dsUseId) window.dsUseId = 0; // Make sure we have a global to support multiple instances of designsystemet in same page\n  if (el && !el.id) el.id = `:ds:${++window.dsUseId}`;\n  return el?.id || '';\n}\n\n/**\n * @description Based off speak function from [U-elements](https://github.com/u-elements/u-elements/blob/main/packages/utils.ts#L210)\n * @param text The text to announce\n */\nlet LIVE_EL: HTMLElement | undefined;\nlet LIVE_FIX = 0;\nlet LIVE_CLEAR: ReturnType<typeof setTimeout> | number = 0;\nexport const announce = (text: string) => {\n  clearTimeout(LIVE_CLEAR);\n  if (LIVE_EL)\n    setTextWithoutMutation(LIVE_EL, `${text}${LIVE_FIX++ % 2 ? '\\u00A0' : ''}`); // Non-breaking space to ensure screen reader announces\n  if (text) LIVE_CLEAR = setTimeout(announce, 2000, ''); // Clear prevent old announcements being found by screen readers, with 2 seconds brace period to avoid cutting of Android Talkback\n};\n\n// Mount live region on first focus so its ready to be used\nconst announceMount = () => {\n  if (document.readyState !== 'complete') return; // Ensure page is loaded trying to avoid issues with React hydration\n  if (!LIVE_EL) {\n    LIVE_EL = tag('div', { 'aria-live': 'assertive' });\n    LIVE_EL.style.overflow = 'hidden'; // Settings styles individually to prevent issues with CSP\n    LIVE_EL.style.position = 'fixed';\n    LIVE_EL.style.whiteSpace = 'nowrap';\n    LIVE_EL.style.width = '1px';\n  }\n  if (!LIVE_EL.isConnected) document.body.appendChild(LIVE_EL);\n};\nonHotReload('announce', () => [\n  on(document, 'focus mouseover', announceMount, QUICK_EVENT),\n]);\n"],"mappings":"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"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/utils/utils.ts"],"sourcesContent":["export const QUICK_EVENT = { passive: true, capture: true };\n\n// Using function instead of constant to support evnironments where DOM can be unloaded (like Vitest with jsdom)\nexport const isBrowser = () =>\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\nexport const isWindows = () =>\n  isBrowser() &&\n  // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474\n  /^Win/i.test(navigator.userAgentData?.platform || navigator.platform);\n\n// Make sure we have a HTMLElement to extend (for server side rendering)\nexport const DSElement =\n  typeof HTMLElement === 'undefined'\n    ? (class {} as typeof HTMLElement)\n    : HTMLElement;\n\nexport function debounce<T extends unknown[]>(\n  callback: (...args: T) => void,\n  delay: number,\n) {\n  let timer: ReturnType<typeof setTimeout>;\n\n  return function (this: unknown, ...args: T) {\n    clearTimeout(timer);\n    timer = setTimeout(() => callback.apply(this, args), delay);\n  };\n}\n\n/**\n * warn\n * @description Utility to console.log, but can be silenced in production with window.dsWarnings = false;\n */\ndeclare global {\n  interface Window {\n    dsWarnings?: boolean;\n  }\n}\nexport const warn = (\n  message: string,\n  ...args: Parameters<typeof console.log> // Using console.log, not console.warn, to prevent stopping test runners such as Jest\n) =>\n  !isBrowser() ||\n  window.dsWarnings === false ||\n  console.log(`\\x1B[1mDesignsystemet:\\x1B[m ${message}`, ...args);\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to read/write attributes from\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport const attr = (\n  el: Element,\n  name: string,\n  value?: string | null,\n): string | null => {\n  if (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n  if (value === null) el.removeAttribute(name);\n  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n  return null;\n};\n\n/**\n * getCSSProp\n * @description Retrieves and CSS property value and trims it\n * @param el The Element to read attributes/CSS from\n * @param name Attribute or CSS property to get\n * @return string CSS property value\n */\nexport const getCSSProp = (el: Element, prop: string) =>\n  getComputedStyle(el).getPropertyValue(prop).trim();\n\nconst STRIP_QUOTES = /^[\"']|[\"']$/g; // Matches surrounding single or double quotes\n/**\n * attrOrCSS\n * @description Retrieves and updates attribute based on attribute or CSS property value\n * @param el The Element to read attributes/CSS from\n * @param name Attribute or CSS property to get\n * @return string attribute or CSS property value\n */\nexport const attrOrCSS = (el: Element, name: string) => {\n  let value = attr(el, name);\n  if (!value)\n    value = getCSSProp(el, `--_ds-${name}`).replace(STRIP_QUOTES, '').trim();\n  if (!value) warn(`Missing ${name} on:`, el);\n  return value || null;\n};\n\n/**\n * on\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n  el: Node | Window | ShadowRoot,\n  ...rest: Parameters<typeof Element.prototype.addEventListener>\n): (() => void) => {\n  const [types, ...options] = rest;\n  for (const type of types.split(' ')) el.addEventListener(type, ...options);\n  return () => off(el, ...rest);\n};\n\n/**\n * off\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n  el: Node | Window | ShadowRoot,\n  ...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => {\n  const [types, ...options] = rest;\n  for (const type of types.split(' ')) el.removeEventListener(type, ...options);\n};\n\n// Used to store cleanup functions for hot-reloading\ndeclare global {\n  interface Window {\n    _dsHotReloadCleanup?: Map<string, Array<() => void>>;\n  }\n}\n\n/**\n * onHotReload\n * @description Runs a callback when window is loaded in browser, and ensures cleanup when hot-reloading\n * @param key The key to identify setup and corresponding cleanup\n * @param callback The callback to run when the page is ready\n */\nexport const onHotReload = (key: string, setup: () => Array<() => void>) => {\n  if (!isBrowser()) return; // Skip if not in modern browser environment, but on each call as Vitest might have unloaded jsdom between tests\n  if (!window._dsHotReloadCleanup) window._dsHotReloadCleanup = new Map(); // Hot reload cleanup support supporting all build tools\n\n  window._dsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup()); // Run previous cleanup\n  window._dsHotReloadCleanup?.set(key, setup()); // Store new cleanup\n};\n\n/**\n * MutationObserver wrapper with automatic cleanup\n * @return new MutaionObserver\n */\nexport const onMutation = <T extends Node>(\n  el: T,\n  callback: (el: T, records?: MutationRecord[]) => void,\n  options: MutationObserverInit,\n) => {\n  const cleanup = () => observer.disconnect();\n  const observer = new MutationObserver((records) => {\n    if (!isBrowser() || !el.isConnected) return cleanup(); // Stop observing if element is removed from DOM or document is removed by jdsom tests\n    callback(el, records);\n  });\n\n  callback(el); // Initial is run instantly to make test markup predictable\n  observer.observe(el, options);\n  return cleanup;\n};\n\n/**\n * tag\n * @description creates element and assigns properties\n * @param tagName The tagname of element to create\n * @param attrs Optional attributes to add to the element\n * @param text Optional text content to add to the element\n * @return HTMLElement with props\n */\nexport const tag = <TagName extends keyof HTMLElementTagNameMap>(\n  tagName: TagName,\n  attrs?: Record<string, string | null> | null,\n): HTMLElementTagNameMap[TagName] => {\n  const el = document.createElement(tagName);\n  if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n  return el;\n};\n\n/**\n * customElements.define\n * @description Defines a customElement if running in browser and if not already registered\n * Scoped/named \"customElements.define\" so @custom-elements-manifest/analyzer can find tag names\n */\nexport const customElements = {\n  define: (name: string, instance: CustomElementConstructor) =>\n    !isBrowser() ||\n    window.customElements.get(name) ||\n    window.customElements.define(name, instance),\n};\n\n/**\n * useId\n * @return A generated unique ID\n */\ndeclare global {\n  interface Window {\n    dsUseId?: number; // Use a global counter to ensure this works even when loading designsystemet multiple times\n  }\n}\nlet id = 0;\nexport function useId(el?: Element | null) {\n  if (!isBrowser()) return `:ds:${++id}`; // Emulate browser environment if window not available\n  if (!window.dsUseId) window.dsUseId = 0; // Make sure we have a global to support multiple instances of designsystemet in same page\n  if (el && !el.id) el.id = `:ds:${++window.dsUseId}`;\n  return el?.id || '';\n}\n\n/**\n * @description Based off speak function from [U-elements](https://github.com/u-elements/u-elements/blob/main/packages/utils.ts#L210)\n * @param text The text to announce\n */\nlet LIVE_EL: HTMLElement | undefined;\nlet LIVE_FIX = 0;\nlet LIVE_CLEAR: ReturnType<typeof setTimeout> | number = 0;\nexport const announce = (text: string) => {\n  clearTimeout(LIVE_CLEAR);\n  if (LIVE_EL) LIVE_EL.textContent = `${text}${LIVE_FIX++ % 2 ? '\\u00A0' : ''}`; // Non-breaking space to ensure screen reader announces\n  if (text) LIVE_CLEAR = setTimeout(announce, 2000, ''); // Clear prevent old announcements being found by screen readers, with 2 seconds brace period to avoid cutting of Android Talkback\n};\n\n// Mount live region on first focus so its ready to be used\nconst announceMount = () => {\n  if (document.readyState !== 'complete') return; // Ensure page is loaded trying to avoid issues with React hydration\n  if (!LIVE_EL) {\n    LIVE_EL = tag('div', { 'aria-live': 'assertive' });\n    LIVE_EL.style.overflow = 'hidden'; // Settings styles individually to prevent issues with CSP\n    LIVE_EL.style.position = 'fixed';\n    LIVE_EL.style.whiteSpace = 'nowrap';\n    LIVE_EL.style.width = '1px';\n  }\n  if (!LIVE_EL.isConnected) document.body.appendChild(LIVE_EL);\n};\nonHotReload('announce', () => [\n  on(document, 'focus mouseover', announceMount, QUICK_EVENT),\n]);\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -21,7 +21,7 @@ declare const DSElement: {
 };
 /**
  * warn
- * @description Utility to console.warn, but can be silenced in production with window.dsWarnings = false;
+ * @description Utility to console.log, but can be silenced in production with window.dsWarnings = false;
  */
 declare global {
     interface Window {
@@ -33,7 +33,11 @@ declare global {
         _dsHotReloadCleanup?: Map<string, Array<() => void>>;
     }
 }
-declare const onMutation: (el: Node, callback: (observer: MutationObserver) => void, options: MutationObserverInit) => () => void;
+/**
+ * MutationObserver wrapper with automatic cleanup
+ * @return new MutaionObserver
+ */
+declare const onMutation: <T extends Node>(el: T, callback: (el: T, records?: MutationRecord[]) => void, options: MutationObserverInit) => () => void;
 /**
  * useId
  * @return A generated unique ID
@@ -52,7 +56,6 @@ declare global {
 declare class DSBreadcrumbsElement extends DSElement {
     _items?: HTMLCollectionOf<HTMLAnchorElement>;
     _label: string | null;
-    _render?: () => void;
     _unresize?: () => void;
     _unmutate?: () => void;
     static get observedAttributes(): string[];
@@ -67,8 +70,9 @@ declare global {
     }
 }
 declare class DSErrorSummaryElement extends DSElement {
+    _unmutate?: () => void;
     connectedCallback(): void;
-    handleEvent({ target }: Partial<Event>): void;
+    handleEvent({ target }: Event): void;
     disconnectedCallback(): void;
 }
 
@@ -115,8 +119,8 @@ declare global {
     }
 }
 declare class DSSuggestionElement extends UHTMLComboboxElement {
-    _unmutate?: ReturnType<typeof onMutation>;
     _render?: () => void;
+    _unmutate?: ReturnType<typeof onMutation>;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }