@digdir/designsystemet-web 1.13.1 → 1.13.2

package/dist/index.js

@@ -1,5 +1,294 @@
-// src/index.ts
-import { isSupported, apply as polyfillInvokers } from "invokers-polyfill/fn";
+// ../../node_modules/.pnpm/invokers-polyfill@1.0.2_patch_hash=d5677be15320f04cdc552d82cb4a79242bd1cf8b26bcbb0a13e1153e7bed3b5a/node_modules/invokers-polyfill/invoker.js
+function isSupported() {
+  return typeof HTMLButtonElement !== "undefined" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
+}
+function apply() {
+  document.addEventListener(
+    "invoke",
+    (e) => {
+      if (e.type == "invoke" && e.isTrusted) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
+      }
+    },
+    true
+  );
+  document.addEventListener(
+    "command",
+    (e) => {
+      if (e.type == "command" && e.isTrusted) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
+      }
+    },
+    true
+  );
+  function enumerate(obj, key, enumerable = true) {
+    Object.defineProperty(obj, key, {
+      ...Object.getOwnPropertyDescriptor(obj, key),
+      enumerable
+    });
+  }
+  function getRootNode(node) {
+    if (node && typeof node.getRootNode === "function") {
+      return node.getRootNode();
+    }
+    if (node && node.parentNode) return getRootNode(node.parentNode);
+    return node;
+  }
+  const commandEventSourceElements = /* @__PURE__ */ new WeakMap();
+  const commandEventActions = /* @__PURE__ */ new WeakMap();
+  class CommandEvent extends Event {
+    constructor(type, invokeEventInit = {}) {
+      super(type, invokeEventInit);
+      const { source, command } = invokeEventInit;
+      if (source != null && !(source instanceof Element)) {
+        throw new TypeError(`source must be an element`);
+      }
+      commandEventSourceElements.set(this, source || null);
+      commandEventActions.set(
+        this,
+        command !== void 0 ? String(command) : ""
+      );
+    }
+    get [Symbol.toStringTag]() {
+      return "CommandEvent";
+    }
+    get source() {
+      if (!commandEventSourceElements.has(this)) {
+        throw new TypeError("illegal invocation");
+      }
+      const source = commandEventSourceElements.get(this);
+      if (!(source instanceof Element)) return null;
+      const invokerRoot = getRootNode(source);
+      if (invokerRoot !== getRootNode(this.target || document)) {
+        return invokerRoot.host;
+      }
+      return source;
+    }
+    get command() {
+      if (!commandEventActions.has(this)) {
+        throw new TypeError("illegal invocation");
+      }
+      return commandEventActions.get(this);
+    }
+  }
+  enumerate(CommandEvent.prototype, "source");
+  enumerate(CommandEvent.prototype, "command");
+  const invokerAssociatedElements = /* @__PURE__ */ new WeakMap();
+  function applyInvokerMixin(ElementClass) {
+    Object.defineProperties(ElementClass.prototype, {
+      commandForElement: {
+        enumerable: true,
+        configurable: true,
+        set(targetElement) {
+          if (targetElement === null) {
+            this.removeAttribute("commandfor");
+            invokerAssociatedElements.delete(this);
+          } else if (!(targetElement instanceof Element)) {
+            throw new TypeError(`commandForElement must be an element or null`);
+          } else {
+            this.setAttribute("commandfor", "");
+            const targetRootNode = getRootNode(targetElement);
+            const thisRootNode = getRootNode(this);
+            if (thisRootNode === targetRootNode || targetRootNode === this.ownerDocument) {
+              invokerAssociatedElements.set(this, targetElement);
+            } else {
+              invokerAssociatedElements.delete(this);
+            }
+          }
+        },
+        get() {
+          if (this.localName !== "button") {
+            return null;
+          }
+          if (this.disabled) {
+            return null;
+          }
+          if (this.form && this.getAttribute("type") !== "button") {
+            console.warn(
+              "Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work"
+            );
+            return null;
+          }
+          const targetElement = invokerAssociatedElements.get(this);
+          if (targetElement) {
+            if (targetElement.isConnected) {
+              return targetElement;
+            } else {
+              invokerAssociatedElements.delete(this);
+              return null;
+            }
+          }
+          const root = getRootNode(this);
+          const idref = this.getAttribute("commandfor");
+          if ((root instanceof Document || root instanceof ShadowRoot) && idref) {
+            return root.getElementById(idref) || null;
+          }
+          return null;
+        }
+      },
+      command: {
+        enumerable: true,
+        configurable: true,
+        get() {
+          const value = this.getAttribute("command") || "";
+          if (value.startsWith("--")) return value;
+          const valueLower = value.toLowerCase();
+          switch (valueLower) {
+            case "show-modal":
+            case "request-close":
+            case "close":
+            case "toggle-popover":
+            case "hide-popover":
+            case "show-popover":
+              return valueLower;
+          }
+          return "";
+        },
+        set(value) {
+          this.setAttribute("command", value);
+        }
+      }
+    });
+  }
+  const onHandlers = /* @__PURE__ */ new WeakMap();
+  Object.defineProperties(HTMLElement.prototype, {
+    oncommand: {
+      enumerable: true,
+      configurable: true,
+      get() {
+        oncommandObserver.takeRecords();
+        return onHandlers.get(this) || null;
+      },
+      set(handler) {
+        const existing = onHandlers.get(this) || null;
+        if (existing) {
+          this.removeEventListener("command", existing);
+        }
+        onHandlers.set(
+          this,
+          typeof handler === "object" || typeof handler === "function" ? handler : null
+        );
+        if (typeof handler == "function") {
+          this.addEventListener("command", handler);
+        }
+      }
+    }
+  });
+  function applyOnCommandHandler(els) {
+    for (const el of els) {
+      el.oncommand = new Function("event", el.getAttribute("oncommand"));
+    }
+  }
+  const oncommandObserver = new MutationObserver((records) => {
+    for (const record of records) {
+      const { target } = record;
+      if (record.type === "childList") {
+        applyOnCommandHandler(target.querySelectorAll("[oncommand]"));
+      } else {
+        applyOnCommandHandler([target]);
+      }
+    }
+  });
+  oncommandObserver.observe(document, {
+    subtree: true,
+    childList: true,
+    attributeFilter: ["oncommand"]
+  });
+  applyOnCommandHandler(document.querySelectorAll("[oncommand]"));
+  const processedEvents = /* @__PURE__ */ new WeakSet();
+  function handleInvokerActivation(event) {
+    if (processedEvents.has(event)) return;
+    processedEvents.add(event);
+    if (event.defaultPrevented) return;
+    if (event.type !== "click") return;
+    const source = event.composedPath().find((el) => el.matches?.("button[commandfor], button[command]"));
+    if (!source) return;
+    if (source.form && source.getAttribute("type") !== "button") {
+      event.preventDefault();
+      throw new Error(
+        "Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work. In order for it to act as a Submit button, it must not have command or commandfor attributes"
+      );
+    }
+    if (source.hasAttribute("command") !== source.hasAttribute("commandfor")) {
+      const attr2 = source.hasAttribute("command") ? "command" : "commandfor";
+      const missing = source.hasAttribute("command") ? "commandfor" : "command";
+      throw new Error(
+        `Element with ${attr2} attribute must also have a ${missing} attribute to function.`
+      );
+    }
+    if (source.command !== "show-popover" && source.command !== "hide-popover" && source.command !== "toggle-popover" && source.command !== "show-modal" && source.command !== "request-close" && source.command !== "close" && !source.command.startsWith("--")) {
+      console.warn(
+        `"${source.command}" is not a valid command value. Custom commands must begin with --`
+      );
+      return;
+    }
+    const invokee = source.commandForElement;
+    if (!invokee) return;
+    const invokeEvent = new CommandEvent("command", {
+      command: source.command,
+      source,
+      cancelable: true
+    });
+    invokee.dispatchEvent(invokeEvent);
+    if (invokeEvent.defaultPrevented) return;
+    const command = invokeEvent.command.toLowerCase();
+    if (invokee.popover) {
+      const canShow = !invokee.matches(":popover-open");
+      const shouldShow = canShow && (command === "toggle-popover" || command === "show-popover");
+      const shouldHide = !canShow && command === "hide-popover";
+      if (shouldShow) {
+        invokee.showPopover({ source });
+      } else if (shouldHide) {
+        invokee.hidePopover();
+      }
+    } else if (invokee.localName === "dialog") {
+      const canShow = !invokee.hasAttribute("open");
+      if (canShow && command == "show-modal") {
+        invokee.showModal();
+      } else if (!canShow && command == "close") {
+        invokee.close(source.value ? source.value : void 0);
+      } else if (!canShow && command == "request-close") {
+        if (!HTMLDialogElement.prototype.requestClose) {
+          HTMLDialogElement.prototype.requestClose = function() {
+            const cancelEvent = new Event("cancel", { cancelable: true });
+            this.dispatchEvent(cancelEvent);
+            if (!cancelEvent.defaultPrevented) {
+              this.close();
+            }
+          };
+        }
+        invokee.requestClose(source.value ? source.value : void 0);
+      }
+    }
+  }
+  function setupInvokeListeners(target) {
+    target.addEventListener("click", handleInvokerActivation, true);
+  }
+  function observeShadowRoots(ElementClass, callback) {
+    const attachShadow = ElementClass.prototype.attachShadow;
+    ElementClass.prototype.attachShadow = function(init) {
+      const shadow = attachShadow.call(this, init);
+      callback(shadow);
+      return shadow;
+    };
+    const attachInternals = ElementClass.prototype.attachInternals;
+    ElementClass.prototype.attachInternals = function() {
+      const internals = attachInternals.call(this);
+      if (internals.shadowRoot) callback(internals.shadowRoot);
+      return internals;
+    };
+  }
+  applyInvokerMixin(HTMLButtonElement);
+  observeShadowRoots(HTMLElement, (shadow) => {
+    setupInvokeListeners(shadow);
+    oncommandObserver.observe(shadow, { attributeFilter: ["oncommand"] });
+    applyOnCommandHandler(shadow.querySelectorAll("[oncommand]"));
+  });
+  setupInvokeListeners(document);
+  Object.assign(globalThis, { CommandEvent });
+}
 
 // src/utils/utils.ts
 var QUICK_EVENT = { passive: true, capture: true };
@@ -15,22 +304,21 @@ function debounce(callback, delay) {
     timer = setTimeout(() => callback.apply(this, args), delay);
   };
 }
-var warn = (message, ...args) => !isBrowser() || window.dsWarnings === false || console.warn(`Designsystemet: ${message}`, ...args);
+var warn = (message, ...args) => !isBrowser() || window.dsWarnings === false || console.log(`\x1B[1mDesignsystemet:\x1B[m ${message}`, ...args);
 var attr = (el, name, value) => {
   if (value === void 0) return el.getAttribute(name) ?? null;
   if (value === null) el.removeAttribute(name);
   else if (el.getAttribute(name) !== value) el.setAttribute(name, value);
   return null;
 };
-var STRIP_SURROUNDING_QUOTES = /^["']|["']$/g;
+var getCSSProp = (el, prop) => getComputedStyle(el).getPropertyValue(prop).trim();
+var STRIP_QUOTES = /^["']|["']$/g;
 var attrOrCSS = (el, name) => {
   let value = attr(el, name);
-  if (!value) {
-    const prop = getComputedStyle(el).getPropertyValue(`--_ds-${name}`);
-    value = prop.replace(STRIP_SURROUNDING_QUOTES, "").trim() || null;
-  }
+  if (!value)
+    value = getCSSProp(el, `--_ds-${name}`).replace(STRIP_QUOTES, "").trim();
   if (!value) warn(`Missing ${name} on:`, el);
-  return value;
+  return value || null;
 };
 var on = (el, ...rest) => {
   const [types, ...options] = rest;
@@ -47,31 +335,16 @@ var onHotReload = (key, setup) => {
   window._dsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup());
   window._dsHotReloadCleanup?.set(key, setup());
 };
-var SKIP_MUTATIONS = false;
 var onMutation = (el, callback, options) => {
-  let queue = 0;
-  const onFrame = () => {
-    if (!el.isConnected) return cleanup();
-    callback(observer);
-    observer.takeRecords();
-    queue = 0;
-  };
-  const cleanup = () => observer?.disconnect?.();
-  const observer = new MutationObserver(() => {
-    if (!SKIP_MUTATIONS && !queue) queue = requestAnimationFrame(onFrame);
+  const cleanup = () => observer.disconnect();
+  const observer = new MutationObserver((records) => {
+    if (!isBrowser() || !el.isConnected) return cleanup();
+    callback(el, records);
   });
+  callback(el);
   observer.observe(el, options);
-  requestAnimationFrame(onFrame);
   return cleanup;
 };
-var setTextWithoutMutation = (el, text) => {
-  SKIP_MUTATIONS = true;
-  el.textContent = text;
-  requestAnimationFrame(enableMutations);
-};
-var enableMutations = () => {
-  SKIP_MUTATIONS = false;
-};
 var tag = (tagName, attrs) => {
   const el = document.createElement(tagName);
   if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);
@@ -92,8 +365,7 @@ var LIVE_FIX = 0;
 var LIVE_CLEAR = 0;
 var announce = (text) => {
   clearTimeout(LIVE_CLEAR);
-  if (LIVE_EL)
-    setTextWithoutMutation(LIVE_EL, `${text}${LIVE_FIX++ % 2 ? "\xA0" : ""}`);
+  if (LIVE_EL) LIVE_EL.textContent = `${text}${LIVE_FIX++ % 2 ? "\xA0" : ""}`;
   if (text) LIVE_CLEAR = setTimeout(announce, 2e3, "");
 };
 var announceMount = () => {
@@ -121,8 +393,7 @@ var SELECTOR_CLICKDELEGATEFOR = `[${ATTR_CLICKDELEGATEFOR}]`;
 var SELECTOR_SKIP = 'a,button,label,input,select,textarea,details,dialog,[role="button"],[popover],[contenteditable]';
 var handleClickDelegateFor = (event) => {
   const isNewTab = event.button === 1 || event.metaKey || event.ctrlKey;
-  const isUserLeftOrMiddleClick = event.isTrusted && event.button < 2;
-  const delegateTarget = isUserLeftOrMiddleClick && getDelegateTarget(event);
+  const delegateTarget = event.button < 2 && getDelegateTarget(event);
   if (!delegateTarget || delegateTarget.contains(event.target)) return;
   if (isNewTab && delegateTarget instanceof HTMLAnchorElement)
     return window.open(delegateTarget.href, void 0, delegateTarget.rel);
@@ -170,9 +441,11 @@ var handleClosedbyAny = ({
     if (isClose) requestAnimationFrame(() => el.open && el.close());
   }
 };
+var BUTTONS = isBrowser() ? document.getElementsByTagName("button") : [];
 var handleAriaAttributes = () => {
-  for (const btn of document.querySelectorAll('button[command="show-modal"]'))
-    attr(btn, "aria-haspopup", "dialog");
+  for (const btn of BUTTONS)
+    if (btn.getAttribute("command")?.endsWith("-modal"))
+      btn.setAttribute("aria-haspopup", "dialog");
 };
 var handleCommand = ({ command, target }) => command === "--show-non-modal" && target instanceof HTMLDialogElement && target.show();
 onHotReload("dialog", () => [
@@ -186,6 +459,22 @@ onHotReload("dialog", () => [
   })
 ]);
 
+// src/fieldset/fieldset.ts
+var FIELDSETS = isBrowser() ? document.getElementsByTagName("fieldset") : [];
+var handleFieldsetMutations = () => {
+  for (const el of FIELDSETS) {
+    if (el.hasAttribute("aria-labelledby")) continue;
+    const labelledby = `${useId(el.querySelector("legend"))} ${useId(el.querySelector(':scope > :is([data-field="description"],legend + p)'))}`;
+    attr(el, "aria-labelledby", labelledby.trim() || null);
+  }
+};
+onHotReload("fieldset", () => [
+  onMutation(document, handleFieldsetMutations, {
+    childList: true,
+    subtree: true
+  })
+]);
+
 // src/popover/popover.ts
 import {
   autoUpdate,
@@ -262,7 +551,6 @@ onHotReload("popover", () => [
   on(document, "toggle ds-toggle-source", handleToggle, QUICK_EVENT)
   // Use capture since the toggle event does not bubble
 ]);
-var getCSSProp = (el, prop) => getComputedStyle(el).getPropertyValue(prop).trim();
 var arrowPseudo = () => ({
   name: "arrowPseudo",
   fn(data) {
@@ -281,8 +569,10 @@ var arrowPseudo = () => ({
 var isReadOnly = (el) => (el instanceof HTMLSelectElement || el instanceof HTMLInputElement) && (el.hasAttribute("readonly") || attr(el, "aria-readonly") === "true");
 var handleKeyDown = (e) => {
   if (e.key !== "Tab" && isReadOnly(e.target)) {
-    e.preventDefault();
-    if (e.key?.startsWith("Arrow") && attr(e.target, "type") === "radio") {
+    const isArrow = e.key?.startsWith("Arrow");
+    const isModifier = e.altKey || e.ctrlKey || e.metaKey;
+    if (isArrow || !isModifier) e.preventDefault();
+    if (isArrow && attr(e.target, "type") === "radio") {
       const all = document.querySelectorAll(`input[name="${e.target.name}"]`);
       const move = e.key?.match(/Arrow(Right|Down)/) ? 1 : -1;
       const next = all.length + [...all].indexOf(e.target) + move;
@@ -310,21 +600,26 @@ onHotReload("readonly", () => [
 ]);
 
 // src/toggle-group/toggle-group.ts
+var ARIA_LABELLEDBY = "aria-labelledby";
+var ARIA_LABEL = "aria-label";
 var ATTR_TOGGLEGROUP = "data-toggle-group";
 var SELECTOR_TOGGLEGROUP = `[${ATTR_TOGGLEGROUP}]`;
-var handleAriaAttributes2 = debounce(() => {
+var handleAriaAttributes2 = () => {
   for (const group of document.querySelectorAll(SELECTOR_TOGGLEGROUP))
     attr(group, "aria-label", attrOrCSS(group, ATTR_TOGGLEGROUP));
-}, 0);
+};
 var handleKeydown = (event) => {
-  const group = event.target instanceof HTMLInputElement && event.target.closest(SELECTOR_TOGGLEGROUP);
+  const { key, target: el } = event;
+  const group = el instanceof HTMLInputElement && el.closest(SELECTOR_TOGGLEGROUP);
   if (!group) return;
-  if (event.key === "Enter") event.target.click();
-  if (event.key?.startsWith("Arrow")) {
+  if (!attr(group, ARIA_LABEL) && !attr(group, ARIA_LABELLEDBY))
+    attr(group, ARIA_LABEL, attrOrCSS(group, ATTR_TOGGLEGROUP));
+  if (key === "Enter") el.click();
+  if (key?.startsWith("Arrow")) {
     event.preventDefault?.();
     const inputs = [...group.getElementsByTagName("input")];
-    const index = inputs.indexOf(event.target);
-    const move = event.key.match(/Arrow(Right|Down)/) ? 1 : -1;
+    const index = inputs.indexOf(el);
+    const move = key.match(/Arrow(Right|Down)/) ? 1 : -1;
     let nextIndex = index;
     for (let i = 0; i < inputs.length; i++) {
       nextIndex = (inputs.length + nextIndex + move) % inputs.length;
@@ -348,12 +643,13 @@ onHotReload("toggle-group", () => [
 // src/tooltip/tooltip.ts
 var TIP;
 var SOURCE;
+var IS_HOVERING = false;
 var HOVER_TIMER = 0;
 var SKIP_TIMER = 0;
 var IS_IOS = isBrowser() && /iPad|iPhone|iPod/.test(navigator.userAgent);
 var ATTR_TOOLTIP = "data-tooltip";
 var ATTR_COLOR = "data-color";
-var ARIA_LABEL = "aria-label";
+var ARIA_LABEL2 = "aria-label";
 var ARIA_DESC = "aria-description";
 var SELECTOR_COLOR = `[${ATTR_COLOR}]`;
 var SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;
@@ -365,32 +661,36 @@ var DELAY_SKIP = 300;
 var setTooltipElement = (el) => {
   if (el && !(el instanceof HTMLElement))
     warn("setTooltipElement expects an HTMLElement, got: ", el);
+  clearTimeout(SKIP_TIMER);
+  clearTimeout(HOVER_TIMER);
+  SOURCE = void 0;
+  IS_HOVERING = false;
   TIP = el || void 0;
 };
-var handleAriaAttributes3 = debounce(() => {
+var handleAriaAttributes3 = () => {
   for (const el of document.querySelectorAll(SELECTOR_TOOLTIP)) {
-    const aria = el.getAttribute(ARIA_LABEL) || el.getAttribute(ARIA_DESC);
-    const text = el.getAttribute(ATTR_TOOLTIP) || attrOrCSS(el, ATTR_TOOLTIP);
-    if (aria !== text) {
+    const text = attrOrCSS(el, ATTR_TOOLTIP);
+    if (!text) return;
+    if (text !== (el.getAttribute(ARIA_LABEL2) || el.getAttribute(ARIA_DESC))) {
       const hasText = attr(el, "role") !== "img" && el.textContent?.trim();
       attr(el, ATTR_TOOLTIP, text);
-      attr(el, ARIA_LABEL, hasText ? null : text);
+      attr(el, ARIA_LABEL2, hasText ? null : text);
       attr(el, ARIA_DESC, hasText ? text : null);
       if (!el.matches(SELECTOR_INTERACTIVE))
         warn('Missing tabindex="0" attribute on: ', el);
     }
-    const isCurrent = el === SOURCE && TIP?.matches(":popover-open");
+    const isCurrent = el === SOURCE && TIP?.offsetHeight && TIP?.offsetWidth;
     const isChanged = isCurrent && text && TIP?.textContent !== text;
     if (isCurrent && isChanged) {
-      if (TIP) setTextWithoutMutation(TIP, text);
+      if (TIP) TIP.textContent = text;
       if (document.activeElement === el) announce(text);
     }
   }
-}, 0);
+};
 var handleInterest = ({ type, target }) => {
   clearTimeout(HOVER_TIMER);
   if (target === TIP) return;
-  if (type === "mouseover" && !SOURCE && !IS_IOS) {
+  if (type === "mouseover" && !IS_HOVERING && !IS_IOS) {
     HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target });
     return;
   }
@@ -406,18 +706,21 @@ var handleInterest = ({ type, target }) => {
   attr(TIP, "popover", "manual");
   attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null);
   attr(TIP, ATTR_COLOR, isReset && color?.getAttribute(ATTR_COLOR) || null);
-  setTextWithoutMutation(TIP, attr(source, ATTR_TOOLTIP));
+  TIP.textContent = attr(source, ATTR_TOOLTIP);
   TIP.showPopover();
   TIP.dispatchEvent(new CustomEvent("ds-toggle-source", { detail: source }));
+  IS_HOVERING = true;
   SOURCE = source;
 };
 var hideTooltip = () => TIP?.isConnected && TIP.popover && TIP.hidePopover();
 var handleClose = (event) => {
   if (event?.type === "keydown")
     return event?.key === "Escape" && hideTooltip();
-  if (!event) SOURCE = void 0;
-  else if (event.target === TIP && event.newState === "closed")
+  if (!event) IS_HOVERING = false;
+  else if (event.target === TIP && event.newState === "closed") {
+    SOURCE = void 0;
     SKIP_TIMER = setTimeout(handleClose, DELAY_SKIP);
+  }
 };
 onHotReload("tooltip", () => [
   on(document, "blur focus mouseover", handleInterest, QUICK_EVENT),
@@ -439,30 +742,30 @@ var DSBreadcrumbsElement = class extends DSElement {
   _items;
   // Using underscore instead of private fields for backwards compatibility
   _label = null;
-  _render;
   _unresize;
   _unmutate;
   static get observedAttributes() {
     return [ATTR_LABEL];
   }
   connectedCallback() {
+    const resize = debounce(() => render(this), 100);
     this._label = attrOrCSS(this, ATTR_LABEL);
     this._items = this.getElementsByTagName("a");
-    this._render = debounce(() => render(this), 100);
-    this._unresize = on(window, "resize", this._render);
-    this._unmutate = onMutation(this, this._render, {
+    this._unresize = on(window, "resize", resize);
+    this._unmutate = onMutation(this, render, {
       childList: true,
       subtree: true
     });
   }
   attributeChangedCallback(_name, _prev, next) {
-    if (next) this._label = next;
-    this._render?.();
+    if (!this._unmutate || !next) return;
+    this._label = next;
+    render(this);
   }
   disconnectedCallback() {
     this._unresize?.();
     this._unmutate?.();
-    this._unresize = this._unmutate = this._render = this._items = void 0;
+    this._unresize = this._unmutate = this._items = void 0;
   }
 };
 var render = (self) => {
@@ -478,104 +781,118 @@ customElements.define("ds-breadcrumbs", DSBreadcrumbsElement);
 
 // src/error-summary/error-summary.ts
 var DSErrorSummaryElement = class extends DSElement {
+  _unmutate;
+  // Using underscore instead of private fields for backwards compatibility
   connectedCallback() {
     on(this, "animationend", this, QUICK_EVENT);
-    requestAnimationFrame(() => this.handleEvent({ target: this }));
-  }
-  handleEvent({ target }) {
-    if (target !== this) return;
-    const heading = this.querySelector("h2,h3,h4,h5,h6");
-    if (heading) attr(this, "aria-labelledby", useId(heading));
     attr(this, "tabindex", "-1");
+    this._unmutate = onMutation(this, render2, {
+      childList: true,
+      subtree: true
+    });
     this.focus();
   }
+  handleEvent({ target }) {
+    if (target === this) this.focus();
+  }
   disconnectedCallback() {
     off(this, "animationend", this, QUICK_EVENT);
+    this._unmutate?.();
+    this._unmutate = void 0;
   }
 };
+var render2 = (self) => {
+  const heading = self.querySelector("h2,h3,h4,h5,h6");
+  if (heading) attr(self, "aria-labelledby", useId(heading));
+};
 customElements.define("ds-error-summary", DSErrorSummaryElement);
 
 // src/field/field.ts
-var INDETERMINATE = "data-indeterminate";
-var FIELDS = /* @__PURE__ */ new Set();
-var COUNTS = /* @__PURE__ */ new WeakMap();
-var FIELDSETS = isBrowser() ? document.getElementsByTagName("fieldset") : [];
-var HAS_FIELD_SIZING = isBrowser() && CSS.supports("field-sizing", "content");
+var ATTR_DESCRIBEDBY = "aria-describedby";
+var ATTR_INDETERMINATE = "data-indeterminate";
 var COUNTER_DEBOUNCE = isWindows() ? 800 : 200;
-var HAS_VALIDATION = /* @__PURE__ */ new WeakSet();
-var handleMutations = debounce(() => {
-  for (const el of FIELDSETS) {
-    const labelledby = `${useId(el.querySelector("legend"))} ${useId(el.querySelector(':scope > :is([data-field="description"],legend + p)'))}`;
-    attr(el, "aria-labelledby", labelledby.trim() || null);
+var COUNTS = /* @__PURE__ */ new WeakMap();
+var FIELDS = /* @__PURE__ */ new Map();
+var VALIDATIONS = /* @__PURE__ */ new WeakMap();
+var WARNING_MULTIPLE_INPUTS = `Fields should only have one input element. Use <fieldset> to group multiple fields:`;
+var handleFieldMutations = (_doc, records = []) => {
+  for (const { target } of records) {
+    const isFieldset = target instanceof HTMLFieldSetElement;
+    for (const [field] of FIELDS)
+      if (isFieldset ? target.contains(field) : field.contains(target))
+        handleFieldMutation(field);
   }
-  for (const field of FIELDS) {
-    const descs = [];
-    const labels = [];
-    let input;
-    let counter;
-    let hasValidation = false;
-    let invalid = false;
-    for (const el of field.getElementsByTagName("*")) {
-      if (el instanceof HTMLLabelElement) labels.push(el);
-      if (el.hidden) continue;
-      if (isInputLike(el)) {
-        if (input)
-          warn(
-            `Fields should only have one input element. Use <fieldset> to group multiple fields:`,
-            field
-          );
-        else input = el;
-      } else {
-        const type = el.getAttribute("data-field");
-        if (type === "counter") counter = el;
-        if (type === "validation") {
-          descs.unshift(el);
-          hasValidation = true;
-          invalid = invalid || isInvalid(el);
-        } else if (type) descs.push(el);
-      }
-    }
-    if (!input) warn(`Field is missing input element:`, field);
-    else {
-      if (counter) COUNTS.set(input, counter);
-      for (const label of labels) attr(label, "for", useId(input));
-      const isBoolish = input.type === "radio" || input.type === "checkbox";
-      const fieldsetValidation = field.closest("fieldset")?.querySelector(':scope > [data-field="validation"]');
-      if (fieldsetValidation && !fieldsetValidation?.hidden) {
+};
+var handleFieldMutation = (field) => {
+  const labels = [];
+  const nextDescs = [];
+  const prevDescs = FIELDS.get(field) || [];
+  let input;
+  let counter;
+  let hasValidation = false;
+  let invalid = false;
+  for (const el of field.getElementsByTagName("*")) {
+    if (el instanceof HTMLLabelElement) labels.push(el);
+    if (el.hidden) continue;
+    if (isInputLike(el)) {
+      if (input) warn(WARNING_MULTIPLE_INPUTS, field);
+      else input = el;
+    } else {
+      const type = el.getAttribute("data-field");
+      if (type === "counter") counter = el;
+      if (type === "validation") {
+        nextDescs.unshift(useId(el));
         hasValidation = true;
-        invalid = invalid || isInvalid(fieldsetValidation);
-        descs.unshift(fieldsetValidation);
-      }
-      const indeterminate = attr(input, INDETERMINATE);
-      if (indeterminate) input.indeterminate = indeterminate === "true";
-      attr(field, "data-clickdelegatefor", isBoolish ? useId(input) : null);
-      attr(input, "aria-describedby", descs.map(useId).join(" ") || null);
-      if (hasValidation || HAS_VALIDATION.has(input)) {
-        HAS_VALIDATION[hasValidation ? "add" : "delete"](input);
-        attr(input, "aria-invalid", `${invalid}`);
-      }
-      updateField(input);
+        invalid = invalid || isInvalid(el);
+      } else if (type) nextDescs.push(useId(el));
     }
   }
-}, 0);
-var updateField = (e) => {
+  if (!input) return;
+  if (counter) COUNTS.set(input, counter);
+  for (const label of labels) attr(label, "for", useId(input));
+  const fieldsetValidation = field.closest("fieldset")?.querySelector(':scope > [data-field="validation"]');
+  if (fieldsetValidation && !fieldsetValidation?.hidden) {
+    hasValidation = true;
+    invalid = invalid || isInvalid(fieldsetValidation);
+    nextDescs.unshift(useId(fieldsetValidation));
+  }
+  const indeterminate = attr(input, ATTR_INDETERMINATE);
+  if (indeterminate) input.indeterminate = indeterminate === "true";
+  const isBoolish = input.type === "radio" || input.type === "checkbox";
+  if (isBoolish) attr(field, "data-clickdelegatefor", useId(input));
+  const describedby = attr(input, ATTR_DESCRIBEDBY)?.trim().split(/\s+/);
+  const keep = describedby?.filter((id2) => !prevDescs.includes(id2)) || [];
+  attr(input, ATTR_DESCRIBEDBY, [...nextDescs, ...keep].join(" ") || null);
+  FIELDS.set(field, nextDescs);
+  const hadValidation = VALIDATIONS.has(input);
+  if (hasValidation && !hadValidation) {
+    VALIDATIONS.set(input, attr(input, "aria-invalid"));
+    attr(input, "aria-invalid", "true");
+  } else if (!hasValidation && hadValidation) {
+    attr(input, "aria-invalid", VALIDATIONS.get(input));
+    VALIDATIONS.delete(input);
+  }
+  handleFieldInput(input);
+};
+var TEXTS = {
+  over: "%d tegn for mye",
+  under: "%d tegn igjen"
+};
+var handleFieldInput = (e) => {
   const input = e.target || e;
   const counter = COUNTS.get(input);
   if (counter?.isConnected) {
     const limit = Number(attr(counter, "data-limit")) || 0;
     const count = limit - input.value.length;
     const state = count < 0 ? "over" : "under";
-    const label = attrOrCSS(counter, `data-${state}`)?.replace(
-      "%d",
-      `${Math.abs(count)}`
-    );
+    const label = (attrOrCSS(counter, `data-${state}`) || TEXTS[state])?.replace("%d", `${Math.abs(count)}`);
     attr(counter, "data-label", label);
     attr(counter, "data-state", state);
     attr(counter, "data-color", count < 0 ? "danger" : null);
     if (e.type === "input" && label)
       debouncedCounterLiveRegion(input, label);
   }
-  if (!HAS_FIELD_SIZING && input instanceof HTMLTextAreaElement) {
+  if (input instanceof HTMLTextAreaElement) {
     input.style.setProperty("--_ds-field-sizing", "auto");
     input.style.setProperty("--_ds-field-sizing", `${input.scrollHeight}px`);
   }
@@ -589,8 +906,8 @@ var isInputLike = (el) => el instanceof HTMLElement && "validity" in el && // Ad
 el.type !== "hidden";
 var DSFieldElement = class extends DSElement {
   connectedCallback() {
-    FIELDS.add(this);
-    handleMutations();
+    FIELDS.set(this, []);
+    handleFieldMutation(this);
   }
   disconnectedCallback() {
     FIELDS.delete(this);
@@ -598,14 +915,18 @@ var DSFieldElement = class extends DSElement {
 };
 customElements.define("ds-field", DSFieldElement);
 onHotReload("field", () => [
-  on(document, "input", updateField, QUICK_EVENT),
-  onMutation(document, handleMutations, {
+  on(document, "input", handleFieldInput, QUICK_EVENT),
+  onMutation(document, handleFieldMutations, {
     attributeFilter: [
       "data-field",
       "data-limit",
       "hidden",
+      // Needed to check validation visibility
+      "id",
+      // Needed to sync label "for" when ID of input/selec/textarea changes
       "value",
-      INDETERMINATE
+      // Needed to detect changes in controlled React inputs as they do not trigger input events
+      ATTR_INDETERMINATE
     ],
     attributes: true,
     childList: true,
@@ -641,21 +962,20 @@ var DSPaginationElement = class extends DSElement {
     if (total && !current) warn(`Missing ${ATTR_CURRENT} attribute on:`, this);
     attr(this, ATTR_LABEL2, attrOrCSS(this, ATTR_LABEL2));
     attr(this, "role", "navigation");
-    this._render = debounce(() => render2(this), 0);
-    this._unmutate = onMutation(this, this._render, {
+    this._unmutate = onMutation(this, render3, {
       childList: true,
       subtree: true
     });
   }
   attributeChangedCallback() {
-    this._render?.();
+    if (this._unmutate) render3(this);
   }
   disconnectedCallback() {
     this._unmutate?.();
     this._unmutate = this._render = void 0;
   }
 };
-var render2 = (self) => {
+var render3 = (self) => {
   const current = Number(attr(self, ATTR_CURRENT));
   const total = Number(attr(self, ATTR_TOTAL));
   if (current && total) {
@@ -689,13 +1009,12 @@ customElements.define("ds-pagination", DSPaginationElement);
 // src/suggestion/suggestion.ts
 import { UHTMLComboboxElement } from "@u-elements/u-combobox";
 var DSSuggestionElement = class extends UHTMLComboboxElement {
+  _render;
   _unmutate;
   // Using underscore instead of private fields for backwards compatibility
-  _render;
   connectedCallback() {
     super.connectedCallback();
-    this._render = () => render3(this);
-    this._unmutate = onMutation(this, this._render, { childList: true });
+    this._unmutate = onMutation(this, render4, { childList: true });
     on(this, "toggle", polyfillToggleSource, QUICK_EVENT);
   }
   disconnectedCallback() {
@@ -705,7 +1024,7 @@ var DSSuggestionElement = class extends UHTMLComboboxElement {
     off(this, "toggle", polyfillToggleSource, QUICK_EVENT);
   }
 };
-var render3 = ({ control, list }) => {
+var render4 = ({ control, list }) => {
   if (control && !control.placeholder) attr(control, "placeholder", " ");
   if (control) attr(control, "popovertarget", useId(list) || null);
   if (list) attr(list, "popover", "manual");
@@ -734,7 +1053,7 @@ customElements.define("ds-tab", DSTabElement);
 customElements.define("ds-tabpanel", DSTabPanelElement);
 
 // src/index.ts
-if (isBrowser() && !isSupported()) polyfillInvokers();
+if (isBrowser() && !isSupported()) apply();
 export {
   DSBreadcrumbsElement,
   DSErrorSummaryElement,