@digdir/designsystemet-web 1.13.2 → 1.14.0

package/dist/index.js

@@ -1,1069 +1,985 @@
-// ../../node_modules/.pnpm/invokers-polyfill@1.0.2_patch_hash=d5677be15320f04cdc552d82cb4a79242bd1cf8b26bcbb0a13e1153e7bed3b5a/node_modules/invokers-polyfill/invoker.js
+import "@u-elements/u-details/polyfill";
+import { autoUpdate, computePosition, flip, limitShift, offset, shift, size } from "@floating-ui/dom";
+import { UHTMLComboboxElement } from "@u-elements/u-combobox";
+import * as UTabs from "@u-elements/u-tabs";
+export * from "@u-elements/u-datalist";
+//#region ../../node_modules/.pnpm/invokers-polyfill@1.0.3/node_modules/invokers-polyfill/invoker.js
 function isSupported() {
-  return typeof HTMLButtonElement !== "undefined" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
+	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 });
+	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);
+						if (getRootNode(this) === 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 attr = source.hasAttribute("command") ? "command" : "commandfor";
+			const missing = source.hasAttribute("command") ? "commandfor" : "command";
+			throw new Error(`Element with ${attr} 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 };
-var isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
-var isWindows = () => isBrowser() && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
-/^Win/i.test(navigator.userAgentData?.platform || navigator.platform);
-var DSElement = typeof HTMLElement === "undefined" ? class {
-} : HTMLElement;
+//#endregion
+//#region src/utils/utils.ts
+const QUICK_EVENT = {
+	passive: true,
+	capture: true
+};
+const isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
+const isWindows = () => isBrowser() && /^Win/i.test(navigator.userAgentData?.platform || navigator.platform);
+const DSElement = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
 function debounce(callback, delay) {
-  let timer;
-  return function(...args) {
-    clearTimeout(timer);
-    timer = setTimeout(() => callback.apply(this, args), delay);
-  };
+	let timer;
+	return function(...args) {
+		clearTimeout(timer);
+		timer = setTimeout(() => callback.apply(this, args), delay);
+	};
 }
-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 getCSSProp = (el, prop) => getComputedStyle(el).getPropertyValue(prop).trim();
-var STRIP_QUOTES = /^["']|["']$/g;
-var attrOrCSS = (el, name) => {
-  let value = attr(el, name);
-  if (!value)
-    value = getCSSProp(el, `--_ds-${name}`).replace(STRIP_QUOTES, "").trim();
-  if (!value) warn(`Missing ${name} on:`, el);
-  return value || null;
-};
-var on = (el, ...rest) => {
-  const [types, ...options] = rest;
-  for (const type of types.split(" ")) el.addEventListener(type, ...options);
-  return () => off(el, ...rest);
-};
-var off = (el, ...rest) => {
-  const [types, ...options] = rest;
-  for (const type of types.split(" ")) el.removeEventListener(type, ...options);
-};
-var onHotReload = (key, setup) => {
-  if (!isBrowser()) return;
-  if (!window._dsHotReloadCleanup) window._dsHotReloadCleanup = /* @__PURE__ */ new Map();
-  window._dsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup());
-  window._dsHotReloadCleanup?.set(key, setup());
-};
-var onMutation = (el, callback, options) => {
-  const cleanup = () => observer.disconnect();
-  const observer = new MutationObserver((records) => {
-    if (!isBrowser() || !el.isConnected) return cleanup();
-    callback(el, records);
-  });
-  callback(el);
-  observer.observe(el, options);
-  return cleanup;
-};
-var tag = (tagName, attrs) => {
-  const el = document.createElement(tagName);
-  if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);
-  return el;
-};
-var customElements = {
-  define: (name, instance) => !isBrowser() || window.customElements.get(name) || window.customElements.define(name, instance)
-};
-var id = 0;
+const warn = (message, ...args) => !isBrowser() || window.dsWarnings === false || console.log(`\x1B[1mDesignsystemet:\x1B[m ${message}`, ...args);
+/**
+* attr
+* @description Utility to quickly get, set and remove attributes
+* @param el The Element to read/write attributes from
+* @param name The attribute name to get, set or remove, or a object to set multiple attributes
+* @param value A valid attribute value or null to remove attribute
+*/
+const 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;
+};
+/**
+* getCSSProp
+* @description Retrieves and CSS property value and trims it
+* @param el The Element to read attributes/CSS from
+* @param name Attribute or CSS property to get
+* @return string CSS property value
+*/
+const getCSSProp = (el, prop) => getComputedStyle(el).getPropertyValue(prop).trim();
+const STRIP_QUOTES = /^["']|["']$/g;
+/**
+* attrOrCSS
+* @description Retrieves and updates attribute based on attribute or CSS property value
+* @param el The Element to read attributes/CSS from
+* @param name Attribute or CSS property to get
+* @return string attribute or CSS property value
+*/
+const attrOrCSS = (el, name) => {
+	let value = attr(el, name);
+	if (!value) value = getCSSProp(el, `--_ds-${name}`).replace(STRIP_QUOTES, "").trim();
+	if (!value) warn(`Missing ${name} on:`, el);
+	return value || null;
+};
+/**
+* on
+* @param el The Element to use as EventTarget
+* @param types A space separated string of event types
+* @param listener An event listener function or listener object
+*/
+const on = (el, ...rest) => {
+	const [types, ...options] = rest;
+	for (const type of types.split(" ")) el.addEventListener(type, ...options);
+	return () => off(el, ...rest);
+};
+/**
+* off
+* @param el The Element to use as EventTarget
+* @param types A space separated string of event types
+* @param listener An event listener function or listener object
+*/
+const off = (el, ...rest) => {
+	const [types, ...options] = rest;
+	for (const type of types.split(" ")) el.removeEventListener(type, ...options);
+};
+/**
+* onHotReload
+* @description Runs a callback when window is loaded in browser, and ensures cleanup when hot-reloading
+* @param key The key to identify setup and corresponding cleanup
+* @param callback The callback to run when the page is ready
+*/
+const onHotReload = (key, setup) => {
+	if (!isBrowser()) return;
+	if (!window._dsHotReloadCleanup) window._dsHotReloadCleanup = /* @__PURE__ */ new Map();
+	window._dsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup());
+	window._dsHotReloadCleanup?.set(key, setup());
+};
+/**
+* MutationObserver wrapper with automatic cleanup
+* @return new MutaionObserver
+*/
+const onMutation = (el, callback, options) => {
+	const cleanup = () => observer.disconnect();
+	const observer = new MutationObserver((records) => {
+		if (!isBrowser() || !el.isConnected) return cleanup();
+		callback(el, records);
+	});
+	callback(el);
+	observer.observe(el, options);
+	return cleanup;
+};
+/**
+* tag
+* @description creates element and assigns properties
+* @param tagName The tagname of element to create
+* @param attrs Optional attributes to add to the element
+* @param text Optional text content to add to the element
+* @return HTMLElement with props
+*/
+const tag = (tagName, attrs) => {
+	const el = document.createElement(tagName);
+	if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);
+	return el;
+};
+/**
+* customElements.define
+* @description Defines a customElement if running in browser and if not already registered
+* Scoped/named "customElements.define" so @custom-elements-manifest/analyzer can find tag names
+*/
+const customElements = { define: (name, instance) => !isBrowser() || window.customElements.get(name) || window.customElements.define(name, instance) };
+let id = 0;
 function useId(el) {
-  if (!isBrowser()) return `:ds:${++id}`;
-  if (!window.dsUseId) window.dsUseId = 0;
-  if (el && !el.id) el.id = `:ds:${++window.dsUseId}`;
-  return el?.id || "";
+	if (!isBrowser()) return `:ds:${++id}`;
+	if (!window.dsUseId) window.dsUseId = 0;
+	if (el && !el.id) el.id = `:ds:${++window.dsUseId}`;
+	return el?.id || "";
 }
-var LIVE_EL;
-var LIVE_FIX = 0;
-var LIVE_CLEAR = 0;
-var announce = (text) => {
-  clearTimeout(LIVE_CLEAR);
-  if (LIVE_EL) LIVE_EL.textContent = `${text}${LIVE_FIX++ % 2 ? "\xA0" : ""}`;
-  if (text) LIVE_CLEAR = setTimeout(announce, 2e3, "");
-};
-var announceMount = () => {
-  if (document.readyState !== "complete") return;
-  if (!LIVE_EL) {
-    LIVE_EL = tag("div", { "aria-live": "assertive" });
-    LIVE_EL.style.overflow = "hidden";
-    LIVE_EL.style.position = "fixed";
-    LIVE_EL.style.whiteSpace = "nowrap";
-    LIVE_EL.style.width = "1px";
-  }
-  if (!LIVE_EL.isConnected) document.body.appendChild(LIVE_EL);
-};
-onHotReload("announce", () => [
-  on(document, "focus mouseover", announceMount, QUICK_EVENT)
-]);
-
-// src/index.ts
-import "@u-elements/u-details/polyfill";
-
-// src/clickdelegatefor/clickdelegatefor.ts
-var CLASS_HOVER = ":click-delegate-hover";
-var ATTR_CLICKDELEGATEFOR = "data-clickdelegatefor";
-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 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);
-  event.stopImmediatePropagation();
-  delegateTarget.click();
-};
-var HOVER;
-var handleMouseOver = (event) => {
-  const delegateTarget = getDelegateTarget(event);
-  if (HOVER === delegateTarget) return;
-  if (HOVER) HOVER.classList.remove(CLASS_HOVER);
-  if (delegateTarget) delegateTarget.classList.add(CLASS_HOVER);
-  HOVER = delegateTarget;
-};
-var getDelegateTarget = ({ target: el }) => {
-  const scope = el instanceof Element ? el.closest(SELECTOR_CLICKDELEGATEFOR) : null;
-  const id2 = scope?.getAttribute(ATTR_CLICKDELEGATEFOR);
-  const target = id2 && document.getElementById(id2) || void 0;
-  const skip = target && el.closest(SELECTOR_SKIP);
-  return (!skip || skip === target) && !target?.disabled ? target : void 0;
-};
-onHotReload("clickdelegatefor", () => [
-  on(window, "click auxclick", handleClickDelegateFor, true),
-  // Use capture to ensure we run before other click listeners
-  on(document, "mouseover", handleMouseOver, QUICK_EVENT)
-  // Use passive for better performance
-]);
-
-// src/dialog/dialog.ts
-var DOWN_INSIDE = false;
-var handleClosedbyAny = ({
-  type,
-  target: el,
-  clientX: x = 0,
-  clientY: y = 0
-}) => {
-  if (type === "pointerdown") {
-    const r = el?.closest?.("dialog")?.getBoundingClientRect();
-    const isInside = r && r.top <= y && y <= r.bottom && r.left <= x && x <= r.right;
-    DOWN_INSIDE = !!isInside;
-  } else {
-    const isDialog = el instanceof HTMLDialogElement;
-    const isClose = isDialog && !DOWN_INSIDE && attr(el, "closedby") === "any";
-    DOWN_INSIDE = false;
-    if (isClose) requestAnimationFrame(() => el.open && el.close());
-  }
-};
-var BUTTONS = isBrowser() ? document.getElementsByTagName("button") : [];
-var handleAriaAttributes = () => {
-  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();
+/**
+* @description Based off speak function from [U-elements](https://github.com/u-elements/u-elements/blob/main/packages/utils.ts#L210)
+* @param text The text to announce
+*/
+let LIVE_EL;
+let LIVE_FIX = 0;
+let LIVE_CLEAR = 0;
+const announce = (text) => {
+	clearTimeout(LIVE_CLEAR);
+	if (LIVE_EL) LIVE_EL.textContent = `${text}${LIVE_FIX++ % 2 ? "\xA0" : ""}`;
+	if (text) LIVE_CLEAR = setTimeout(announce, 2e3, "");
+};
+const announceMount = () => {
+	if (document.readyState !== "complete") return;
+	if (!LIVE_EL) {
+		LIVE_EL = tag("div", { "aria-live": "assertive" });
+		LIVE_EL.style.overflow = "hidden";
+		LIVE_EL.style.position = "fixed";
+		LIVE_EL.style.whiteSpace = "nowrap";
+		LIVE_EL.style.width = "1px";
+	}
+	if (!LIVE_EL.isConnected) document.body.appendChild(LIVE_EL);
+};
+onHotReload("announce", () => [on(document, "focus mouseover", announceMount, QUICK_EVENT)]);
+//#endregion
+//#region src/clickdelegatefor/clickdelegatefor.ts
+const CLASS_HOVER = ":click-delegate-hover";
+const ATTR_CLICKDELEGATEFOR = "data-clickdelegatefor";
+const SELECTOR_CLICKDELEGATEFOR = `[${ATTR_CLICKDELEGATEFOR}]`;
+const SELECTOR_SKIP = "a,button,label,input,select,textarea,details,dialog,[role=\"button\"],[popover],[contenteditable]";
+const handleClickDelegateFor = (event) => {
+	const isNewTab = event.button === 1 || event.metaKey || event.ctrlKey;
+	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);
+	event.stopImmediatePropagation();
+	delegateTarget.click();
+};
+let HOVER;
+const handleMouseOver = (event) => {
+	const delegateTarget = getDelegateTarget(event);
+	if (HOVER === delegateTarget) return;
+	if (HOVER) HOVER.classList.remove(CLASS_HOVER);
+	if (delegateTarget) delegateTarget.classList.add(CLASS_HOVER);
+	HOVER = delegateTarget;
+};
+const getDelegateTarget = ({ target: el }) => {
+	const id = (el instanceof Element ? el.closest(SELECTOR_CLICKDELEGATEFOR) : null)?.getAttribute(ATTR_CLICKDELEGATEFOR);
+	const target = id && document.getElementById(id) || void 0;
+	const skip = target && el.closest(SELECTOR_SKIP);
+	return (!skip || skip === target) && !target?.disabled ? target : void 0;
+};
+onHotReload("clickdelegatefor", () => [on(window, "click auxclick", handleClickDelegateFor, true), on(document, "mouseover", handleMouseOver, QUICK_EVENT)]);
+//#endregion
+//#region src/dialog/dialog.ts
+let DOWN_INSIDE = false;
+const handleClosedbyAny = ({ type, target: el, clientX: x = 0, clientY: y = 0 }) => {
+	if (type === "pointerdown") {
+		const r = el?.closest?.("dialog")?.getBoundingClientRect();
+		DOWN_INSIDE = !!(r && r.top <= y && y <= r.bottom && r.left <= x && x <= r.right);
+	} else {
+		const isClose = el instanceof HTMLDialogElement && !DOWN_INSIDE && attr(el, "closedby") === "any";
+		DOWN_INSIDE = false;
+		if (isClose) requestAnimationFrame(() => el.open && el.close());
+	}
+};
+const BUTTONS = isBrowser() ? document.getElementsByTagName("button") : [];
+const handleAriaAttributes$2 = () => {
+	for (const btn of BUTTONS) if (btn.getAttribute("command")?.endsWith("-modal")) btn.setAttribute("aria-haspopup", "dialog");
+};
+const handleCommand = ({ command, target }) => command === "--show-non-modal" && target instanceof HTMLDialogElement && target.show();
 onHotReload("dialog", () => [
-  on(document, "command", handleCommand, QUICK_EVENT),
-  on(document, "pointerdown pointerup", handleClosedbyAny, QUICK_EVENT),
-  onMutation(document, handleAriaAttributes, {
-    attributeFilter: ["command"],
-    attributes: true,
-    childList: true,
-    subtree: true
-  })
-]);
-
-// 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
-  })
+	on(document, "command", handleCommand, QUICK_EVENT),
+	on(document, "pointerdown pointerup", handleClosedbyAny, QUICK_EVENT),
+	onMutation(document, handleAriaAttributes$2, {
+		attributeFilter: ["command"],
+		attributes: true,
+		childList: true,
+		subtree: true
+	})
 ]);
-
-// src/popover/popover.ts
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  limitShift,
-  offset,
-  shift,
-  size
-} from "@floating-ui/dom";
-var ATTR_PLACE = "data-placement";
-var ATTR_AUTO = "data-autoplacement";
-var POPOVERS = /* @__PURE__ */ new Map();
+//#endregion
+//#region src/fieldset/fieldset.ts
+const FIELDSETS = isBrowser() ? document.getElementsByTagName("fieldset") : [];
+const handleFieldsetMutations = () => {
+	for (const el of FIELDSETS) {
+		if (el.hasAttribute("aria-labelledby")) continue;
+		attr(el, "aria-labelledby", `${useId(el.querySelector("legend"))} ${useId(el.querySelector(":scope > :is([data-field=\"description\"],legend + p)"))}`.trim() || null);
+	}
+};
+onHotReload("fieldset", () => [onMutation(document, handleFieldsetMutations, {
+	childList: true,
+	subtree: true
+})]);
+//#endregion
+//#region src/popover/popover.ts
+const ATTR_PLACE = "data-placement";
+const ATTR_AUTO = "data-autoplacement";
+const POPOVERS = /* @__PURE__ */ new Map();
 function handleToggle(event) {
-  let { newState, oldState, target: el, source = event.detail } = event;
-  const isPopover = el instanceof HTMLElement && attr(el, "popover") !== null;
-  const float = isPopover && getCSSProp(el, "--_ds-floating");
-  if (!float) return;
-  if (newState === "closed") return POPOVERS.get(el)?.();
-  if (!source) {
-    const root = el.getRootNode();
-    const css = `[popovertarget="${el.id}"],[commandfor="${el.id}"]`;
-    source = el.id && root?.querySelector?.(css) || void 0;
-  }
-  if (!source || source === el || oldState && oldState === newState) return;
-  const padding = 10;
-  const overscroll = getCSSProp(el, "--_ds-floating-overscroll");
-  const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;
-  const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);
-  const arrowSize = parseFloat(getComputedStyle(el, "::before").height) || 0;
-  const shiftProp = placement.match(/left|right/gi) ? "Height" : "Width";
-  const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;
-  if (placement === "none") return;
-  const options = {
-    strategy: "absolute",
-    placement,
-    middleware: [
-      offset(arrowSize || 0),
-      // Add space for arrow or default to 8px
-      shift({
-        padding,
-        limiter: limitShift({ offset: { mainAxis: shiftLimit } })
-        // Prevent from shifing away from source
-      }),
-      arrowPseudo(),
-      ...auto !== "false" ? [flip({ padding, crossAxis: false })] : [],
-      ...overscroll ? [
-        size({
-          apply({ availableHeight }) {
-            if (overscroll === "fit")
-              el.style.width = `${source.clientWidth}px`;
-            el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
-          }
-        })
-      ] : []
-    ]
-  };
-  const unfloat = autoUpdate(source, el, async () => {
-    if (!source?.isConnected) return POPOVERS.get(el)?.();
-    const { x, y } = await computePosition(source, el, options);
-    el.style.translate = `${x}px ${y}px`;
-  });
-  POPOVERS.set(el, () => POPOVERS.delete(el) && unfloat());
+	let { newState, oldState, target: el, source = event.detail } = event;
+	const float = el instanceof HTMLElement && attr(el, "popover") !== null && getCSSProp(el, "--_ds-floating");
+	if (!float) return;
+	if (newState === "closed") return POPOVERS.get(el)?.();
+	if (!source) {
+		const root = el.getRootNode();
+		const css = `[popovertarget="${el.id}"],[commandfor="${el.id}"]`;
+		source = el.id && root?.querySelector?.(css) || void 0;
+	}
+	if (!source || source === el || oldState && oldState === newState) return;
+	const padding = 10;
+	const overscroll = getCSSProp(el, "--_ds-floating-overscroll");
+	const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;
+	const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);
+	const arrowSize = parseFloat(getComputedStyle(el, "::before").height) || 0;
+	const shiftProp = placement.match(/left|right/gi) ? "Height" : "Width";
+	const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;
+	if (placement === "none") return;
+	const options = {
+		strategy: "absolute",
+		placement,
+		middleware: [
+			offset(arrowSize || 0),
+			shift({
+				padding,
+				limiter: limitShift({ offset: { mainAxis: shiftLimit } })
+			}),
+			arrowPseudo(),
+			...auto !== "false" ? [flip({
+				padding,
+				crossAxis: false
+			})] : [],
+			...overscroll ? [size({ apply({ availableHeight }) {
+				if (overscroll === "fit") el.style.width = `${source.clientWidth}px`;
+				el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
+			} })] : []
+		]
+	};
+	const unfloat = autoUpdate(source, el, async () => {
+		if (!source?.isConnected) return POPOVERS.get(el)?.();
+		const { x, y } = await computePosition(source, el, options);
+		el.style.translate = `${x}px ${y}px`;
+	});
+	POPOVERS.set(el, () => POPOVERS.delete(el) && unfloat());
 }
-var IS_SCROLL;
-var handleScrollbar = ({ type }) => {
-  if (type === "mousedown") IS_SCROLL = false;
-  if (type === "scroll" && IS_SCROLL === false) IS_SCROLL = true;
-  if (type === "mouseup" && IS_SCROLL)
-    for (const [popover] of POPOVERS) popover.showPopover();
-};
-onHotReload("popover", () => [
-  on(document, "mousedown scroll mouseup", handleScrollbar, true),
-  on(document, "toggle ds-toggle-source", handleToggle, QUICK_EVENT)
-  // Use capture since the toggle event does not bubble
-]);
-var arrowPseudo = () => ({
-  name: "arrowPseudo",
-  fn(data) {
-    const target = data.elements.floating;
-    const source = data.rects.reference;
-    const x = `${Math.round(source.width / 2 + source.x - data.x)}px`;
-    const y = `${Math.round(source.height / 2 + source.y - data.y)}px`;
-    target.style.setProperty("--_ds-floating-arrow-x", x);
-    target.style.setProperty("--_ds-floating-arrow-y", y);
-    attr(target, "data-floating", data.placement);
-    return data;
-  }
+let IS_SCROLL;
+const handleScrollbar = ({ type }) => {
+	if (type === "mousedown") IS_SCROLL = false;
+	if (type === "scroll" && IS_SCROLL === false) IS_SCROLL = true;
+	if (type === "mouseup" && IS_SCROLL) for (const [popover] of POPOVERS) popover.showPopover();
+};
+onHotReload("popover", () => [on(document, "mousedown scroll mouseup", handleScrollbar, true), on(document, "toggle ds-toggle-source", handleToggle, QUICK_EVENT)]);
+const arrowPseudo = () => ({
+	name: "arrowPseudo",
+	fn(data) {
+		const target = data.elements.floating;
+		const source = data.rects.reference;
+		const x = `${Math.round(source.width / 2 + source.x - data.x)}px`;
+		const y = `${Math.round(source.height / 2 + source.y - data.y)}px`;
+		target.style.setProperty("--_ds-floating-arrow-x", x);
+		target.style.setProperty("--_ds-floating-arrow-y", y);
+		attr(target, "data-floating", data.placement);
+		return data;
+	}
 });
-
-// src/readonly/readonly.ts
-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)) {
-    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;
-      all[next % all.length]?.focus();
-    }
-  }
-};
-var handleClick = (e) => {
-  const input = e.target?.closest?.("label")?.control || e.target;
-  if (isReadOnly(input)) {
-    e.preventDefault();
-    input.focus();
-  }
-};
-var handleMouseDown = (e) => {
-  if (e.target instanceof HTMLSelectElement && isReadOnly(e.target))
-    e.preventDefault();
+//#endregion
+//#region src/readonly/readonly.ts
+const isReadOnly = (el) => (el instanceof HTMLSelectElement || el instanceof HTMLInputElement) && (el.hasAttribute("readonly") || attr(el, "aria-readonly") === "true");
+const handleKeyDown = (e) => {
+	if (e.key !== "Tab" && isReadOnly(e.target)) {
+		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;
+			all[(all.length + [...all].indexOf(e.target) + move) % all.length]?.focus();
+		}
+	}
+};
+const handleClick = (e) => {
+	const input = e.target?.closest?.("label")?.control || e.target;
+	if (isReadOnly(input)) {
+		e.preventDefault();
+		input.focus();
+	}
+};
+const handleMouseDown = (e) => {
+	if (e.target instanceof HTMLSelectElement && isReadOnly(e.target)) e.preventDefault();
 };
 onHotReload("readonly", () => [
-  on(document, "keydown", handleKeyDown),
-  on(document, "click", handleClick),
-  // click needed for <label> and <input>
-  on(document, "mousedown", handleMouseDown)
-  // mousedown needed for <select>
+	on(document, "keydown", handleKeyDown),
+	on(document, "click", handleClick),
+	on(document, "mousedown", handleMouseDown)
 ]);
-
-// 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 = () => {
-  for (const group of document.querySelectorAll(SELECTOR_TOGGLEGROUP))
-    attr(group, "aria-label", attrOrCSS(group, ATTR_TOGGLEGROUP));
-};
-var handleKeydown = (event) => {
-  const { key, target: el } = event;
-  const group = el instanceof HTMLInputElement && el.closest(SELECTOR_TOGGLEGROUP);
-  if (!group) return;
-  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(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;
-      if (!inputs[nextIndex]?.disabled) {
-        inputs[nextIndex]?.focus();
-        break;
-      }
-    }
-  }
-};
-onHotReload("toggle-group", () => [
-  on(document, "keydown", handleKeydown),
-  onMutation(document, handleAriaAttributes2, {
-    attributeFilter: [ATTR_TOGGLEGROUP],
-    attributes: true,
-    childList: true,
-    subtree: true
-  })
-]);
-
-// 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_LABEL2 = "aria-label";
-var ARIA_DESC = "aria-description";
-var SELECTOR_COLOR = `[${ATTR_COLOR}]`;
-var SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;
-var ATTR_SCHEME = "data-color-scheme";
-var SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;
-var SELECTOR_INTERACTIVE = "a,button,input,label,select,textarea,[tabindex]";
-var DELAY_HOVER = 300;
-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 = () => {
-  for (const el of document.querySelectorAll(SELECTOR_TOOLTIP)) {
-    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_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?.offsetHeight && TIP?.offsetWidth;
-    const isChanged = isCurrent && text && TIP?.textContent !== text;
-    if (isCurrent && isChanged) {
-      if (TIP) TIP.textContent = text;
-      if (document.activeElement === el) announce(text);
-    }
-  }
-};
-var handleInterest = ({ type, target }) => {
-  clearTimeout(HOVER_TIMER);
-  if (target === TIP) return;
-  if (type === "mouseover" && !IS_HOVERING && !IS_IOS) {
-    HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target });
-    return;
-  }
-  const source = target?.closest?.(`[${ATTR_TOOLTIP}]`);
-  if (source === SOURCE) return;
-  if (!source) return hideTooltip();
-  if (!TIP) TIP = tag("div", { class: "ds-tooltip" });
-  if (!TIP.isConnected) document.body.appendChild(TIP);
-  const color = source.closest(SELECTOR_COLOR);
-  const scheme = source.closest(SELECTOR_SCHEME);
-  const isReset = color !== scheme && color?.contains(scheme);
-  clearTimeout(SKIP_TIMER);
-  attr(TIP, "popover", "manual");
-  attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null);
-  attr(TIP, ATTR_COLOR, isReset && color?.getAttribute(ATTR_COLOR) || null);
-  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) IS_HOVERING = false;
-  else if (event.target === TIP && event.newState === "closed") {
-    SOURCE = void 0;
-    SKIP_TIMER = setTimeout(handleClose, DELAY_SKIP);
-  }
+//#endregion
+//#region src/toggle-group/toggle-group.ts
+const ARIA_LABELLEDBY = "aria-labelledby";
+const ARIA_LABEL$1 = "aria-label";
+const ATTR_TOGGLEGROUP = "data-toggle-group";
+const SELECTOR_TOGGLEGROUP = `[${ATTR_TOGGLEGROUP}]`;
+const handleAriaAttributes$1 = () => {
+	for (const group of document.querySelectorAll(SELECTOR_TOGGLEGROUP)) attr(group, "aria-label", attrOrCSS(group, ATTR_TOGGLEGROUP));
+};
+const handleKeydown = (event) => {
+	const { key, target: el } = event;
+	const group = el instanceof HTMLInputElement && el.closest(SELECTOR_TOGGLEGROUP);
+	if (!group) return;
+	if (!attr(group, ARIA_LABEL$1) && !attr(group, ARIA_LABELLEDBY)) attr(group, ARIA_LABEL$1, attrOrCSS(group, ATTR_TOGGLEGROUP));
+	if (key === "Enter") el.click();
+	if (key?.startsWith("Arrow")) {
+		event.preventDefault?.();
+		const inputs = [...group.getElementsByTagName("input")];
+		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;
+			if (!inputs[nextIndex]?.disabled) {
+				inputs[nextIndex]?.focus();
+				break;
+			}
+		}
+	}
+};
+onHotReload("toggle-group", () => [on(document, "keydown", handleKeydown), onMutation(document, handleAriaAttributes$1, {
+	attributeFilter: [ATTR_TOGGLEGROUP],
+	attributes: true,
+	childList: true,
+	subtree: true
+})]);
+//#endregion
+//#region src/tooltip/tooltip.ts
+let TIP;
+let SOURCE;
+let IS_HOVERING = false;
+let HOVER_TIMER = 0;
+let SKIP_TIMER = 0;
+const IS_IOS = isBrowser() && /iPad|iPhone|iPod/.test(navigator.userAgent);
+const ATTR_TOOLTIP = "data-tooltip";
+const ATTR_COLOR = "data-color";
+const ARIA_LABEL = "aria-label";
+const ARIA_DESC = "aria-description";
+const SELECTOR_COLOR = `[${ATTR_COLOR}]`;
+const SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;
+const ATTR_SCHEME = "data-color-scheme";
+const SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;
+const SELECTOR_INTERACTIVE = "a,button,input,label,select,textarea,[tabindex]";
+const DELAY_HOVER = 300;
+const DELAY_SKIP = 300;
+/**
+* setTooltipElement
+* @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.
+* @param el The HTMLElement to use as tooltip
+*/
+const 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;
+};
+const handleAriaAttributes = () => {
+	for (const el of document.querySelectorAll(SELECTOR_TOOLTIP)) {
+		const text = attrOrCSS(el, ATTR_TOOLTIP);
+		if (!text) return;
+		if (text !== (el.getAttribute(ARIA_LABEL) || 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_DESC, hasText ? text : null);
+			if (!el.matches(SELECTOR_INTERACTIVE)) warn("Missing tabindex=\"0\" attribute on: ", el);
+		}
+		const isCurrent = el === SOURCE && TIP?.offsetHeight && TIP?.offsetWidth;
+		const isChanged = isCurrent && text && TIP?.textContent !== text;
+		if (isCurrent && isChanged) {
+			if (TIP) TIP.textContent = text;
+			if (document.activeElement === el) announce(text);
+		}
+	}
+};
+const handleInterest = ({ type, target }) => {
+	clearTimeout(HOVER_TIMER);
+	if (target === TIP) return;
+	if (type === "mouseover" && !IS_HOVERING && !IS_IOS) {
+		HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target });
+		return;
+	}
+	const source = target?.closest?.(`[${ATTR_TOOLTIP}]`);
+	if (source === SOURCE) return;
+	if (!source) return hideTooltip();
+	if (!TIP) TIP = tag("div", { class: "ds-tooltip" });
+	if (!TIP.isConnected) document.body.appendChild(TIP);
+	const color = source.closest(SELECTOR_COLOR);
+	const scheme = source.closest(SELECTOR_SCHEME);
+	const isReset = color !== scheme && color?.contains(scheme);
+	clearTimeout(SKIP_TIMER);
+	attr(TIP, "popover", "manual");
+	attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null);
+	attr(TIP, ATTR_COLOR, isReset && color?.getAttribute(ATTR_COLOR) || null);
+	TIP.textContent = attr(source, ATTR_TOOLTIP);
+	TIP.showPopover();
+	TIP.dispatchEvent(new CustomEvent("ds-toggle-source", { detail: source }));
+	IS_HOVERING = true;
+	SOURCE = source;
+};
+const hideTooltip = () => TIP?.isConnected && TIP.popover && TIP.hidePopover();
+const handleClose = (event) => {
+	if (event?.type === "keydown") return event?.key === "Escape" && hideTooltip();
+	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),
-  on(document, "toggle keydown", handleClose, QUICK_EVENT),
-  onMutation(document, handleAriaAttributes3, {
-    attributeFilter: [ATTR_TOOLTIP],
-    attributes: true,
-    childList: true,
-    subtree: true
-  })
+	on(document, "blur focus mouseover", handleInterest, QUICK_EVENT),
+	on(document, "toggle keydown", handleClose, QUICK_EVENT),
+	onMutation(document, handleAriaAttributes, {
+		attributeFilter: [ATTR_TOOLTIP],
+		attributes: true,
+		childList: true,
+		subtree: true
+	})
 ]);
-
-// src/index.ts
-export * from "@u-elements/u-datalist";
-
-// src/breadcrumbs/breadcrumbs.ts
-var ATTR_LABEL = "aria-label";
+//#endregion
+//#region src/breadcrumbs/breadcrumbs.ts
+const ATTR_LABEL$1 = "aria-label";
 var DSBreadcrumbsElement = class extends DSElement {
-  _items;
-  // Using underscore instead of private fields for backwards compatibility
-  _label = null;
-  _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._unresize = on(window, "resize", resize);
-    this._unmutate = onMutation(this, render, {
-      childList: true,
-      subtree: true
-    });
-  }
-  attributeChangedCallback(_name, _prev, next) {
-    if (!this._unmutate || !next) return;
-    this._label = next;
-    render(this);
-  }
-  disconnectedCallback() {
-    this._unresize?.();
-    this._unmutate?.();
-    this._unresize = this._unmutate = this._items = void 0;
-  }
-};
-var render = (self) => {
-  const lastItem = self._items?.[self._items.length - 1];
-  const lastItemInList = lastItem?.parentElement === self ? null : lastItem;
-  const isListHidden = !lastItemInList?.offsetHeight;
-  attr(self, "role", isListHidden ? null : "navigation");
-  attr(self, ATTR_LABEL, isListHidden ? null : self._label);
-  for (const item of self._items || [])
-    attr(item, "aria-current", item === lastItemInList ? "page" : null);
+	_items;
+	_label = null;
+	_unresize;
+	_unmutate;
+	static get observedAttributes() {
+		return [ATTR_LABEL$1];
+	}
+	connectedCallback() {
+		const resize = debounce(() => render$3(this), 100);
+		this._label = attrOrCSS(this, ATTR_LABEL$1);
+		this._items = this.getElementsByTagName("a");
+		this._unresize = on(window, "resize", resize);
+		this._unmutate = onMutation(this, render$3, {
+			childList: true,
+			subtree: true
+		});
+	}
+	attributeChangedCallback(_name, _prev, next) {
+		if (!this._unmutate || !next) return;
+		this._label = next;
+		render$3(this);
+	}
+	disconnectedCallback() {
+		this._unresize?.();
+		this._unmutate?.();
+		this._unresize = this._unmutate = this._items = void 0;
+	}
+};
+const render$3 = (self) => {
+	const lastItem = self._items?.[self._items.length - 1];
+	const lastItemInList = lastItem?.parentElement === self ? null : lastItem;
+	const isListHidden = !lastItemInList?.offsetHeight;
+	attr(self, "role", isListHidden ? null : "navigation");
+	attr(self, ATTR_LABEL$1, isListHidden ? null : self._label);
+	for (const item of self._items || []) attr(item, "aria-current", item === lastItemInList ? "page" : null);
 };
 customElements.define("ds-breadcrumbs", DSBreadcrumbsElement);
-
-// src/error-summary/error-summary.ts
+//#endregion
+//#region 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);
-    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));
+	_unmutate;
+	connectedCallback() {
+		on(this, "animationend", this, QUICK_EVENT);
+		attr(this, "tabindex", "-1");
+		this._unmutate = onMutation(this, render$2, {
+			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;
+	}
+};
+const render$2 = (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 ATTR_DESCRIBEDBY = "aria-describedby";
-var ATTR_INDETERMINATE = "data-indeterminate";
-var COUNTER_DEBOUNCE = isWindows() ? 800 : 200;
-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);
-  }
-};
-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(el);
-      } else if (type) nextDescs.push(useId(el));
-    }
-  }
-  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}`) || 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 (input instanceof HTMLTextAreaElement) {
-    input.style.setProperty("--_ds-field-sizing", "auto");
-    input.style.setProperty("--_ds-field-sizing", `${input.scrollHeight}px`);
-  }
-};
-var debouncedCounterLiveRegion = debounce((input, text) => {
-  if (document.activeElement === input) announce(text);
+//#endregion
+//#region src/field/field.ts
+const ATTR_INVALID = "aria-invalid";
+const ATTR_DESCRIBEDBY = "aria-describedby";
+const ATTR_INDETERMINATE = "data-indeterminate";
+const COUNTER_DEBOUNCE = isWindows() ? 800 : 200;
+const COUNTS = /* @__PURE__ */ new WeakMap();
+const FIELDS = /* @__PURE__ */ new Map();
+const VALIDATIONS = /* @__PURE__ */ new WeakSet();
+const WARNING_MULTIPLE_INPUTS = `Fields should only have one input element. Use <fieldset> to group multiple fields:`;
+const 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);
+	}
+};
+const 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(el);
+			} else if (type) nextDescs.push(useId(el));
+		}
+	}
+	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";
+	if (input.type === "radio" || input.type === "checkbox") attr(field, "data-clickdelegatefor", useId(input));
+	const keep = (attr(input, ATTR_DESCRIBEDBY)?.trim().split(/\s+/))?.filter((id) => !prevDescs.includes(id)) || [];
+	attr(input, ATTR_DESCRIBEDBY, [...nextDescs, ...keep].join(" ") || null);
+	FIELDS.set(field, nextDescs);
+	const hadValidation = VALIDATIONS.has(input);
+	if (hasValidation && !hadValidation && !input.hasAttribute(ATTR_INVALID)) {
+		attr(input, ATTR_INVALID, "true");
+		VALIDATIONS.add(input);
+	} else if (!hasValidation && hadValidation) {
+		attr(input, ATTR_INVALID, null);
+		VALIDATIONS.delete(input);
+	}
+	handleFieldInput(input);
+};
+const TEXTS = {
+	over: "%d tegn for mye",
+	under: "%d tegn igjen"
+};
+const handleFieldInput = (e) => {
+	const input = e.target || e;
+	const counter = COUNTS.get(input);
+	if (counter?.isConnected) {
+		const count = (Number(attr(counter, "data-limit")) || 0) - input.value.length;
+		const state = count < 0 ? "over" : "under";
+		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 (input instanceof HTMLTextAreaElement) {
+		input.style.setProperty("--_ds-field-sizing", "auto");
+		input.style.setProperty("--_ds-field-sizing", `${input.scrollHeight}px`);
+	}
+};
+const debouncedCounterLiveRegion = debounce((input, text) => {
+	if (document.activeElement === input) announce(text);
 }, COUNTER_DEBOUNCE);
-var isInvalid = (el) => el.getAttribute("data-color") !== "success";
-var isInputLike = (el) => el instanceof HTMLElement && "validity" in el && // Adds support for custom elements implemeted with attachInternals()
-!(el instanceof HTMLButtonElement) && // But skip <button> elements
-el.type !== "hidden";
+const isInvalid = (el) => el.getAttribute("data-color") !== "success";
+const isInputLike = (el) => el instanceof HTMLElement && "validity" in el && !(el instanceof HTMLButtonElement) && el.type !== "hidden";
 var DSFieldElement = class extends DSElement {
-  connectedCallback() {
-    FIELDS.set(this, []);
-    handleFieldMutation(this);
-  }
-  disconnectedCallback() {
-    FIELDS.delete(this);
-  }
+	connectedCallback() {
+		FIELDS.set(this, []);
+		handleFieldMutation(this);
+	}
+	disconnectedCallback() {
+		FIELDS.delete(this);
+	}
 };
 customElements.define("ds-field", DSFieldElement);
-onHotReload("field", () => [
-  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",
-      // Needed to detect changes in controlled React inputs as they do not trigger input events
-      ATTR_INDETERMINATE
-    ],
-    attributes: true,
-    childList: true,
-    subtree: true
-  })
-]);
-
-// src/pagination/pagination.ts
-var ATTR_LABEL2 = "aria-label";
-var ATTR_CURRENT = "data-current";
-var ATTR_TOTAL = "data-total";
-var ATTR_HREF = "data-href";
-var pagination = ({ current = 1, total = 10, show = 7 }) => ({
-  prev: current > 1 ? current - 1 : 0,
-  next: current < total ? current + 1 : 0,
-  pages: getSteps(current, total, show).map((page, index) => ({
-    current: page === current && "page",
-    key: `key-${page}-${index}`,
-    page
-  }))
+onHotReload("field", () => [on(document, "input", handleFieldInput, QUICK_EVENT), onMutation(document, handleFieldMutations, {
+	attributeFilter: [
+		"data-field",
+		"data-limit",
+		"hidden",
+		"id",
+		"value",
+		ATTR_INDETERMINATE
+	],
+	attributes: true,
+	childList: true,
+	subtree: true
+})]);
+//#endregion
+//#region src/pagination/pagination.ts
+const ATTR_LABEL = "aria-label";
+const ATTR_CURRENT = "data-current";
+const ATTR_TOTAL = "data-total";
+const ATTR_HREF = "data-href";
+const pagination = ({ current = 1, total = 10, show = 7 }) => ({
+	prev: current > 1 ? current - 1 : 0,
+	next: current < total ? current + 1 : 0,
+	pages: getSteps(current, total, show).map((page, index) => ({
+		current: page === current && "page",
+		key: `key-${page}-${index}`,
+		page
+	}))
 });
 var DSPaginationElement = class extends DSElement {
-  _unmutate;
-  // Using underscore instead of private fields for backwards compatibility
-  _render;
-  static get observedAttributes() {
-    return [ATTR_LABEL2, ATTR_CURRENT, ATTR_TOTAL, ATTR_HREF];
-  }
-  connectedCallback() {
-    const total = attr(this, ATTR_TOTAL);
-    const current = attr(this, ATTR_CURRENT);
-    if (current && !total) warn(`Missing ${ATTR_TOTAL} attribute on:`, this);
-    if (total && !current) warn(`Missing ${ATTR_CURRENT} attribute on:`, this);
-    attr(this, ATTR_LABEL2, attrOrCSS(this, ATTR_LABEL2));
-    attr(this, "role", "navigation");
-    this._unmutate = onMutation(this, render3, {
-      childList: true,
-      subtree: true
-    });
-  }
-  attributeChangedCallback() {
-    if (this._unmutate) render3(this);
-  }
-  disconnectedCallback() {
-    this._unmutate?.();
-    this._unmutate = this._render = void 0;
-  }
-};
-var render3 = (self) => {
-  const current = Number(attr(self, ATTR_CURRENT));
-  const total = Number(attr(self, ATTR_TOTAL));
-  if (current && total) {
-    const items = self.querySelectorAll("button,a");
-    const show = items.length - 2;
-    const href = attr(self, ATTR_HREF);
-    const { next, prev, pages } = pagination({ current, total, show });
-    items.forEach((item, i) => {
-      const page = i ? items[i + 1] ? pages[i - 1]?.page : next : prev;
-      attr(item, "aria-current", pages[i - 1]?.current ? "true" : null);
-      attr(item, "aria-label", `${page ?? "hidden"}`);
-      attr(item, "role", page ? null : "none");
-      attr(item, "tabindex", page ? null : "-1");
-      if (item instanceof HTMLButtonElement) attr(item, "value", `${page}`);
-      if (href && item instanceof HTMLAnchorElement)
-        attr(item, "href", href.replace("%d", `${page}`));
-    });
-  }
-};
-var getSteps = (now, max, show = Number.POSITIVE_INFINITY) => {
-  const offset2 = (show - 1) / 2;
-  const start = Math.max(Math.min(now - Math.floor(offset2), max - show + 1), 1);
-  const end = Math.min(Math.max(now + Math.ceil(offset2), show), max);
-  const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
-  if (show > 4 && start > 1) pages.splice(0, 2, 1, 0);
-  if (show > 3 && end < max) pages.splice(-2, 2, 0, max);
-  return pages;
+	_unmutate;
+	_render;
+	static get observedAttributes() {
+		return [
+			ATTR_LABEL,
+			ATTR_CURRENT,
+			ATTR_TOTAL,
+			ATTR_HREF
+		];
+	}
+	connectedCallback() {
+		const total = attr(this, ATTR_TOTAL);
+		const current = attr(this, ATTR_CURRENT);
+		if (current && !total) warn(`Missing ${ATTR_TOTAL} attribute on:`, this);
+		if (total && !current) warn(`Missing ${ATTR_CURRENT} attribute on:`, this);
+		attr(this, ATTR_LABEL, attrOrCSS(this, ATTR_LABEL));
+		attr(this, "role", "navigation");
+		this._unmutate = onMutation(this, render$1, {
+			childList: true,
+			subtree: true
+		});
+	}
+	attributeChangedCallback() {
+		if (this._unmutate) render$1(this);
+	}
+	disconnectedCallback() {
+		this._unmutate?.();
+		this._unmutate = this._render = void 0;
+	}
+};
+const render$1 = (self) => {
+	const current = Number(attr(self, ATTR_CURRENT));
+	const total = Number(attr(self, ATTR_TOTAL));
+	if (current && total) {
+		const items = self.querySelectorAll("button,a");
+		const show = items.length - 2;
+		const href = attr(self, ATTR_HREF);
+		const { next, prev, pages } = pagination({
+			current,
+			total,
+			show
+		});
+		items.forEach((item, i) => {
+			const page = i ? items[i + 1] ? pages[i - 1]?.page : next : prev;
+			attr(item, "aria-current", pages[i - 1]?.current ? "true" : null);
+			attr(item, "aria-label", `${page ?? "hidden"}`);
+			attr(item, "role", page ? null : "none");
+			attr(item, "tabindex", page ? null : "-1");
+			if (item instanceof HTMLButtonElement) attr(item, "value", `${page}`);
+			if (href && item instanceof HTMLAnchorElement) attr(item, "href", href.replace("%d", `${page}`));
+		});
+	}
+};
+const getSteps = (now, max, show = Number.POSITIVE_INFINITY) => {
+	const offset = (show - 1) / 2;
+	const start = Math.max(Math.min(now - Math.floor(offset), max - show + 1), 1);
+	const end = Math.min(Math.max(now + Math.ceil(offset), show), max);
+	const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
+	if (show > 4 && start > 1) pages.splice(0, 2, 1, 0);
+	if (show > 3 && end < max) pages.splice(-2, 2, 0, max);
+	return pages;
 };
 customElements.define("ds-pagination", DSPaginationElement);
-
-// src/suggestion/suggestion.ts
-import { UHTMLComboboxElement } from "@u-elements/u-combobox";
+//#endregion
+//#region src/suggestion/suggestion.ts
 var DSSuggestionElement = class extends UHTMLComboboxElement {
-  _render;
-  _unmutate;
-  // Using underscore instead of private fields for backwards compatibility
-  connectedCallback() {
-    super.connectedCallback();
-    this._unmutate = onMutation(this, render4, { childList: true });
-    on(this, "toggle", polyfillToggleSource, QUICK_EVENT);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unmutate?.();
-    this._unmutate = this._render = void 0;
-    off(this, "toggle", polyfillToggleSource, QUICK_EVENT);
-  }
-};
-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");
-};
-var polyfillToggleSource = (event) => {
-  const self = event.currentTarget;
-  const detail = event.newState === "open" && self.control;
-  if (detail)
-    self.list?.dispatchEvent(new CustomEvent("ds-toggle-source", { detail }));
+	_unmutate;
+	connectedCallback() {
+		super.connectedCallback();
+		this._unmutate = onMutation(this, render, { childList: true });
+		on(this, "toggle", polyfillToggleSource, QUICK_EVENT);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._unmutate?.();
+		this._unmutate = void 0;
+		off(this, "toggle", polyfillToggleSource, QUICK_EVENT);
+	}
+};
+const render = ({ control, list }) => {
+	if (control && !control.placeholder) attr(control, "placeholder", " ");
+	if (control) attr(control, "popovertarget", useId(list) || null);
+	if (list) attr(list, "popover", "manual");
+	if (list) attr(list, "data-is-floating", "true");
+};
+const polyfillToggleSource = (event) => {
+	const self = event.currentTarget;
+	const detail = event.newState === "open" && self.control;
+	if (detail) self.list?.dispatchEvent(new CustomEvent("ds-toggle-source", { detail }));
 };
 customElements.define("ds-suggestion", DSSuggestionElement);
-
-// src/tabs/tabs.ts
-import * as UTabs from "@u-elements/u-tabs";
-var DSTabsElement = class extends UTabs.UHTMLTabsElement {
-};
-var DSTabListElement = class extends UTabs.UHTMLTabListElement {
-};
-var DSTabElement = class extends UTabs.UHTMLTabElement {
-};
-var DSTabPanelElement = class extends UTabs.UHTMLTabPanelElement {
-};
+//#endregion
+//#region src/tabs/tabs.ts
+var DSTabsElement = class extends UTabs.UHTMLTabsElement {};
+var DSTabListElement = class extends UTabs.UHTMLTabListElement {};
+var DSTabElement = class extends UTabs.UHTMLTabElement {};
+var DSTabPanelElement = class extends UTabs.UHTMLTabPanelElement {};
 customElements.define("ds-tabs", DSTabsElement);
 customElements.define("ds-tablist", DSTabListElement);
 customElements.define("ds-tab", DSTabElement);
 customElements.define("ds-tabpanel", DSTabPanelElement);
-
-// src/index.ts
+//#endregion
+//#region src/index.ts
 if (isBrowser() && !isSupported()) apply();
-export {
-  DSBreadcrumbsElement,
-  DSErrorSummaryElement,
-  DSFieldElement,
-  DSPaginationElement,
-  DSSuggestionElement,
-  DSTabElement,
-  DSTabListElement,
-  DSTabPanelElement,
-  DSTabsElement,
-  pagination,
-  setTooltipElement
-};
+//#endregion
+export { DSBreadcrumbsElement, DSErrorSummaryElement, DSFieldElement, DSPaginationElement, DSSuggestionElement, DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement, pagination, setTooltipElement };
+
+//# sourceMappingURL=index.js.map