@digdir/designsystemet-web 1.18.0 → 1.19.0

package/dist/index.js

@@ -3,7 +3,13 @@ import { autoUpdate, computePosition, flip, limitShift, offset, shift, size } fr
 import { UHTMLComboboxElement } from "@u-elements/u-combobox";
 import * as UTabs from "@u-elements/u-tabs";
 export * from "@u-elements/u-datalist";
+//#region package.json
+var version = "1.19.0";
+//#endregion
 //#region src/utils/utils.ts
+const ARIA_DESC = "aria-description";
+const ARIA_LABEL = "aria-label";
+const ARIA_LABELLEDBY = "aria-labelledby";
 const QUICK_EVENT = {
 	passive: true,
 	capture: true
@@ -27,7 +33,7 @@ const warn = (message, ...args) => !isBrowser() || window.dsWarnings === false |
 * @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 === void 0) return el.getAttribute(name);
 	if (value === null) el.removeAttribute(name);
 	else if (el.getAttribute(name) !== value) el.setAttribute(name, value);
 	return null;
@@ -51,10 +57,45 @@ const STRIP_QUOTES = /^["']|["']$/g;
 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;
 };
 /**
+* getRoot
+* @description Helper for better compatibility
+* @param node The target node
+* @return The shadow root or document
+*/
+const getRoot = (node) => {
+	const root = node?.getRootNode?.() || node?.ownerDocument;
+	if (root instanceof Document || root instanceof ShadowRoot) return root;
+	return node?.ownerDocument || document;
+};
+/**
+* getComposedTarget
+* @description Helper to get the composed target of an event, supporting ShadowDOM rendering
+* @param event The event
+* @return The target Element
+*/
+const getComposedTarget = (e) => {
+	const el = e.target?.shadowRoot && e.composedPath()[0] || e.target;
+	return el?.nodeType === 1 ? el : null;
+};
+/**
+* getComposedPath
+* @description Helper to get the full composed path even if listener is bound to a ShadowRoot (unlike event.composedPath())
+* @param el The element to start traversing from
+* @return Set of nodes in the path
+*/
+const getComposedPath = (el) => {
+	const path = /* @__PURE__ */ new Set();
+	while (el) {
+		path.add(el);
+		if (el.nodeType === 11) el = el.host;
+		else el = el.assignedSlot || el.parentNode;
+	}
+	return path;
+};
+/**
 * on
 * @param el The Element to use as EventTarget
 * @param types A space separated string of event types
@@ -75,6 +116,7 @@ const off = (el, ...rest) => {
 	const [types, ...options] = rest;
 	for (const type of types.split(" ")) el.removeEventListener(type, ...options);
 };
+const HOT_RELOAD_KEY = `_dsHotReloadCleanup${version}`;
 /**
 * onHotReload
 * @description Runs a callback when window is loaded in browser, and ensures cleanup when hot-reloading
@@ -83,9 +125,9 @@ const off = (el, ...rest) => {
 */
 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());
+	if (!window[HOT_RELOAD_KEY]) window[HOT_RELOAD_KEY] = /* @__PURE__ */ new Map();
+	for (const cleanup of window[HOT_RELOAD_KEY]?.get(key) || []) cleanup();
+	window[HOT_RELOAD_KEY]?.set(key, setup());
 };
 /**
 * MutationObserver wrapper with automatic cleanup
@@ -153,60 +195,86 @@ const announceMount = () => {
 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 CLASS_HOVER = ":click-delegate-hover";
+const SKIP = /* @__PURE__ */ new Set([
+	"A",
+	"BUTTON",
+	"DETAILS",
+	"DIALOG",
+	"INPUT",
+	"LABEL",
+	"SELECT",
+	"TEXTAREA"
+]);
 const handleClickDelegateFor = (event) => {
 	const isNewTab = event.button === 1 || event.metaKey || event.ctrlKey;
+	const target = getComposedTarget(event);
 	const delegateTarget = event.button < 2 && getDelegateTarget(event);
-	if (!delegateTarget || delegateTarget.contains(event.target)) return;
+	if (!delegateTarget || delegateTarget.contains(target)) return;
 	if (isNewTab && delegateTarget instanceof HTMLAnchorElement) return window.open(delegateTarget.href, void 0, delegateTarget.rel);
 	event.stopImmediatePropagation();
-	delegateTarget.click();
+	if (delegateTarget.nodeName !== "LABEL") delegateTarget.click();
 };
 let HOVER;
-const handleMouseOver = (event) => {
+let TARGET$1;
+const handleMouseMove = (event) => {
+	const target = getComposedTarget(event);
+	if (!target || target === TARGET$1) return;
+	TARGET$1 = target;
 	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;
+const getDelegateTarget = (event) => {
+	let interactive;
+	for (let el of event.composedPath()) {
+		if (el.nodeType !== 1) continue;
+		if (el.nodeName === "LABEL") el = el.control || el;
+		const id = el.getAttribute(ATTR_CLICKDELEGATEFOR);
+		if (id) {
+			const to = getRoot(el).getElementById(id);
+			return to && !(interactive && interactive !== to) && !to.disabled && !to.readOnly ? to : void 0;
+		}
+		if (!interactive && isInteractive(el)) interactive = el;
+	}
 };
-onHotReload("clickdelegatefor", () => [on(window, "click auxclick", handleClickDelegateFor, true), on(document, "mouseover", handleMouseOver, QUICK_EVENT)]);
+const isInteractive = (el) => el.isContentEditable || el.popover || SKIP.has(el.nodeName) || attr(el, "role") === "button";
+onHotReload("clickdelegatefor", () => [on(window, "click auxclick", handleClickDelegateFor, true), on(document, "mousemove", handleMouseMove, 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";
+const handleClosedbyAny = (event) => {
+	const { type, clientX: x = 0, clientY: y = 0 } = event;
+	const el = getComposedTarget(event);
+	if (el && type === "pointerdown") for (const dialog of getComposedPath(el)) {
+		if (dialog.nodeName !== "DIALOG") continue;
+		const r = dialog.getBoundingClientRect();
+		DOWN_INSIDE = r.top <= y && y <= r.bottom && r.left <= x && x <= r.right;
+		return;
+	}
+	else {
+		const isClose = el?.nodeName === "DIALOG" && !DOWN_INSIDE && attr(el, "closedby") === "any";
 		DOWN_INSIDE = false;
-		if (isClose) requestAnimationFrame(() => el.open && el.close());
+		if (isClose) setTimeout(close, 0, el);
 	}
 };
-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 close = (dialog) => dialog.open && dialog.close();
+const MODAL = "show-modal";
+const NON_MODAL = "--show-non-modal";
+const handleAriaAttributes = (event) => {
+	for (const el of event.composedPath()) {
+		const command = el.nodeType === 1 && attr(el, "command");
+		if (command === MODAL || command === NON_MODAL) return attr(el, "aria-haspopup", "dialog");
+	}
 };
-const handleCommand = ({ command, target }) => command === "--show-non-modal" && target instanceof HTMLDialogElement && target.show();
+const handleCommand = ({ command, target }) => command === 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$2, {
-		attributeFilter: ["command"],
-		attributes: true,
-		childList: true,
-		subtree: true
-	})
+	on(document, "focus", handleAriaAttributes, QUICK_EVENT),
+	on(document, "pointerdown pointerup", handleClosedbyAny, QUICK_EVENT)
 ]);
 //#endregion
 //#region src/fieldset/fieldset.ts
@@ -214,7 +282,7 @@ 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);
+		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, {
@@ -222,6 +290,187 @@ onHotReload("fieldset", () => [onMutation(document, handleFieldsetMutations, {
 	subtree: true
 })]);
 //#endregion
+//#region src/focusgroup/focusgroup.ts
+const ATTR_GROUP = "focusgroup";
+const PROP_GROUP = "focusGroup";
+const ATTR_START = `${ATTR_GROUP}start`;
+const GROUPS = /* @__PURE__ */ new WeakMap();
+const ROOTS$1 = /* @__PURE__ */ new Map();
+const ROLES = {
+	listbox: {
+		block: true,
+		wrap: false,
+		items: "option"
+	},
+	menu: {
+		block: true,
+		wrap: true,
+		items: "menuitem"
+	},
+	menubar: {
+		block: false,
+		wrap: true,
+		items: "menuitem"
+	},
+	radiogroup: {
+		block: null,
+		wrap: true,
+		items: "radio"
+	},
+	tablist: {
+		block: false,
+		wrap: true,
+		items: "tab"
+	},
+	toolbar: {
+		block: false,
+		wrap: false,
+		items: null
+	}
+};
+let IS_TAB = false;
+const IS_CONFLICT = /* @__PURE__ */ new Set([
+	"AUDIO",
+	"VIDEO",
+	"TEXTAREA",
+	"SELECT",
+	"date",
+	"datetime-local",
+	"email",
+	"month",
+	"number",
+	"password",
+	"range",
+	"search",
+	"tel",
+	"text",
+	"time",
+	"url",
+	"week"
+]);
+const IS_SUPPORTED = isBrowser() && (ATTR_GROUP in HTMLElement.prototype || PROP_GROUP in HTMLElement.prototype);
+const setIsTab = (state) => IS_TAB = state;
+const handleKeydown$2 = (e) => {
+	if (e.defaultPrevented || e.altKey || e.metaKey || e.ctrlKey) return;
+	const isTab = e.key === "Tab";
+	const isBlock = e.key === "ArrowUp" || e.key === "ArrowDown";
+	const isArrow = isBlock || e.key === "ArrowLeft" || e.key === "ArrowRight";
+	if (!isTab && !isArrow && e.key !== "Home" && e.key !== "End") return;
+	if (isTab) {
+		setIsTab(true);
+		setTimeout(setIsTab, 100, false);
+	}
+	const target = getComposedTarget(e);
+	if (!target || isConflict(target)) return;
+	let group = getGroup(getComposedPath(target));
+	if (group?.role && group?.el === target) group = getGroup(getComposedPath(group.el.parentNode));
+	if (!group?.role) return;
+	const items = getItems(group.el, target);
+	let next = 0;
+	if (isTab) return setTimeout(setTab, 0, items, setTab(items));
+	if (e.key === "Home") next = 0;
+	else if (e.key === "End") next = items.length - 1;
+	else {
+		const { direction: dir, writingMode: mode } = getComputedStyle(target);
+		const isFlipped = mode.startsWith("vertical");
+		const isReverse = isFlipped ? mode === "vertical-rl" : dir === "rtl";
+		const isForward = e.key === "ArrowDown" || e.key === "ArrowRight";
+		const moveBlock = isBlock !== isFlipped;
+		const moveForward = isForward !== (!isBlock && isReverse);
+		if ((group.block ?? moveBlock) !== moveBlock) return;
+		next = items.indexOf(target) + (moveForward ? 1 : -1);
+		if (group.wrap) next = (items.length + next) % items.length;
+		else next = Math.max(0, Math.min(next, items.length - 1));
+	}
+	if (items[next] !== target) e.preventDefault();
+	items[next]?.focus?.();
+};
+const handleFocus = (e) => {
+	const target = getComposedTarget(e);
+	const path = getComposedPath(target);
+	for (const [el, off] of ROOTS$1) if (!path.has(el) && ROOTS$1.delete(el)) off();
+	for (const el of path) if (el.nodeType === 11 && !ROOTS$1.has(el)) ROOTS$1.set(el, on(el, "focus", handleFocus, QUICK_EVENT));
+	if (e.target?.shadowRoot) return;
+	const group = getGroup(path);
+	if (!group?.role) return;
+	if (IS_TAB && !isConflict(group.focus)) {
+		const segment = getSegment(getItems(group.el, null), target);
+		const start = group.memory && segment.includes(group.focus) && group.focus || segment.find((el) => el?.hasAttribute(ATTR_START)) || segment[0];
+		if (start !== target) return start?.focus?.();
+	}
+	group.focus = target;
+};
+const getGroup = (path) => {
+	for (const el of path) {
+		if (el.nodeType !== Node.ELEMENT_NODE) continue;
+		const key = el.getAttribute(ATTR_GROUP);
+		if (key !== null) {
+			let group = GROUPS.get(el);
+			if (group?.key === key) return group;
+			group = parseGroup(el, key);
+			GROUPS.set(el, group);
+			for (const item of getItems(el)) if (item && !item.hasAttribute("role")) attr(item, "role", group.items);
+			if (!el.hasAttribute("role")) attr(el, "role", group.role);
+			return group;
+		}
+		if (isTopLayer(el)) return;
+	}
+};
+const parseGroup = (el, key) => {
+	const opts = new Set(key.toLowerCase().split(" "));
+	const role = [...opts].find((t) => t in ROLES);
+	const base = ROLES[role];
+	const x = opts.has("inline");
+	const y = opts.has("block");
+	return {
+		key,
+		el,
+		role,
+		block: x && y ? null : y || (x ? false : base?.block),
+		focus: null,
+		items: base?.items,
+		memory: !opts.has("nomemory"),
+		wrap: opts.has("wrap") || (opts.has("nowrap") ? false : base?.wrap)
+	};
+};
+const getItems = (root, keep, items = [], isNested = false) => {
+	const children = root?.nodeName === "SLOT" ? root.assignedElements({ flatten: true }) : (root?.shadowRoot || root)?.children;
+	for (let i = 0, l = children?.length || i; children && i < l; i++) {
+		const el = children[i];
+		if (el.nodeName === "SLOT") getItems(el, keep, items, isNested);
+		else if (isKeyboardReachable(el) && !isTopLayer(el) && isVisible(el)) {
+			const group = el.getAttribute(ATTR_GROUP);
+			if (el === keep || !isNested && group !== "none" && isFocusable$1(el)) items.push(el);
+			else if (group !== null && keep === null) items.push(null);
+			else getItems(el, keep, items, isNested || group !== null);
+		}
+	}
+	return items;
+};
+const getSegment = (acc, item) => {
+	const at = acc.indexOf(item);
+	const to = acc.indexOf(null, at);
+	return acc.slice(acc.lastIndexOf(null, at) + 1, to === -1 ? void 0 : to);
+};
+const isKeyboardReachable = (el) => !el.inert && !el.hidden && !el.disabled;
+const isTopLayer = (el) => el?.nodeName === "DIALOG" || el?.hasAttribute("popover");
+const isVisible = isBrowser() && typeof Element.prototype.checkVisibility === "function" ? (el) => el.checkVisibility() : (el) => el.offsetParent !== null;
+const isFocusable$1 = (el) => el.isContentEditable || el.tabIndex >= 0 && !el.disabled;
+const isConflict = (el) => el?.isContentEditable || IS_CONFLICT.has(el?.nodeName) || el?.nodeName === "INPUT" && IS_CONFLICT.has(el.type);
+const setTab = (items, prevs) => Array.from(items, (item, index) => {
+	const prev = item?.getAttribute("tabindex");
+	if (item) attr(item, "tabindex", prevs ? prevs[index] : "-1");
+	return prev;
+});
+if (!IS_SUPPORTED) onHotReload(ATTR_GROUP, () => [
+	on(document, "keydown", handleKeydown$2),
+	on(document, "focus", handleFocus, QUICK_EVENT),
+	() => {
+		for (const [, off] of ROOTS$1) off();
+		ROOTS$1.clear();
+	}
+]);
+//#endregion
 //#region ../../node_modules/.pnpm/invokers-polyfill@1.0.3/node_modules/invokers-polyfill/invoker.js
 function isSupported$1() {
 	return typeof HTMLButtonElement !== "undefined" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
@@ -450,14 +699,17 @@ function apply$1() {
 //#region src/invokers/invokers.ts
 if (isBrowser() && !isSupported$1()) apply$1();
 //#endregion
-//#region ../../node_modules/.pnpm/@oddbird+popover-polyfill@0.6.1/node_modules/@oddbird/popover-polyfill/dist/popover-fn.js
+//#region ../../node_modules/.pnpm/@oddbird+popover-polyfill@0.7.1/node_modules/@oddbird/popover-polyfill/dist/popover-fn.js
 var ToggleEvent = class extends Event {
 	oldState;
 	newState;
-	constructor(type, { oldState = "", newState = "", ...init } = {}) {
-		super(type, init);
-		this.oldState = String(oldState || "");
-		this.newState = String(newState || "");
+	constructor(type, init = {}) {
+		const eventInit = Object.assign({}, init);
+		delete eventInit.oldState;
+		delete eventInit.newState;
+		super(type, eventInit);
+		this.oldState = String(init.oldState || "");
+		this.newState = String(init.newState || "");
 	}
 };
 var popoverToggleTaskQueue = /* @__PURE__ */ new WeakMap();
@@ -575,7 +827,6 @@ function topMostPopoverAncestor(newPopover, list) {
 		if (!candidate) return;
 		let okNesting = false;
 		let candidateAncestor = null;
-		let candidatePosition = null;
 		while (!okNesting) {
 			candidateAncestor = nearestInclusiveOpenPopover(candidate) || null;
 			if (candidateAncestor === null) return;
@@ -583,7 +834,7 @@ function topMostPopoverAncestor(newPopover, list) {
 			if (newPopover.popover === "hint" || candidateAncestor.popover === "auto") okNesting = true;
 			if (!okNesting) candidate = candidateAncestor.parentElement;
 		}
-		candidatePosition = popoverPositions.get(candidateAncestor);
+		const candidatePosition = popoverPositions.get(candidateAncestor) ?? null;
 		if (topMostPopoverAncestor2 === null || popoverPositions.get(topMostPopoverAncestor2) < candidatePosition) topMostPopoverAncestor2 = candidateAncestor;
 	}
 	checkAncestor(newPopover.parentElement || getRootNode(newPopover));
@@ -782,9 +1033,14 @@ function setInvokerAriaExpanded(el, force = false) {
 	}
 }
 var ShadowRoot2 = globalThis.ShadowRoot || function() {};
+var DEFAULT_LAYER_NAME = "popover-polyfill";
 function isSupported() {
 	return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype;
 }
+function isPolyfilled() {
+	var _a;
+	return Boolean(((_a = document.body) == null ? void 0 : _a.showPopover) && !/native code/i.test(document.body.showPopover.toString()));
+}
 function patchSelectorFn(object, name, mapper) {
 	const original = object[name];
 	Object.defineProperty(object, name, { value(selector) {
@@ -795,10 +1051,12 @@ var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
 function hasLayerSupport() {
 	return typeof globalThis.CSSLayerBlockRule === "function";
 }
-function getStyles() {
+function getStyles(layerName) {
+	var _a;
 	const useLayer = hasLayerSupport();
+	const layerNameEscaped = (layerName ?? ((_a = window.POPOVER_POLYFILL_OPTIONS) == null ? void 0 : _a.layerName) ?? DEFAULT_LAYER_NAME).split(".").map(CSS.escape).join(".");
 	return `
-${useLayer ? "@layer popover-polyfill {" : ""}
+${useLayer ? `@layer ${layerNameEscaped} {` : ""}
   :where([popover]) {
     position: fixed;
     z-index: 2147483647;
@@ -862,8 +1120,8 @@ ${useLayer ? "}" : ""}
 `;
 }
 var popoverStyleSheet = null;
-function injectStyles(root) {
-	const styles = getStyles();
+function injectStyles(root, layerName) {
+	const styles = getStyles(layerName);
 	if (popoverStyleSheet === null) try {
 		popoverStyleSheet = new CSSStyleSheet();
 		popoverStyleSheet.replaceSync(styles);
@@ -877,8 +1135,9 @@ function injectStyles(root) {
 		else root.prepend(sheet);
 	} else root.adoptedStyleSheets = [popoverStyleSheet, ...root.adoptedStyleSheets];
 }
-function apply() {
+function apply(opts) {
 	if (typeof window === "undefined") return;
+	const layerName = opts == null ? void 0 : opts.layerName;
 	window.ToggleEvent = window.ToggleEvent || ToggleEvent;
 	function rewriteSelector(selector) {
 		if (selector == null ? void 0 : selector.includes(":popover-open")) selector = selector.replace(nonEscapedPopoverSelector, "$1.\\:popover-open");
@@ -939,7 +1198,7 @@ function apply() {
 		writable: true,
 		value(options) {
 			const shadowRoot = originalAttachShadow.call(this, options);
-			injectStyles(shadowRoot);
+			injectStyles(shadowRoot, layerName);
 			return shadowRoot;
 		}
 	} });
@@ -950,7 +1209,7 @@ function apply() {
 		writable: true,
 		value() {
 			const internals = originalAttachInternals.call(this);
-			if (internals.shadowRoot) injectStyles(internals.shadowRoot);
+			if (internals.shadowRoot) injectStyles(internals.shadowRoot, layerName);
 			return internals;
 		}
 	} });
@@ -1032,23 +1291,25 @@ function apply() {
 		root.addEventListener("pointerup", lightDismissOpenPopovers);
 	};
 	addEventListeners(document);
-	injectStyles(document);
+	injectStyles(document, layerName);
 }
 //#endregion
 //#region src/popover/popover.ts
-if (isBrowser() && !isSupported()) apply();
+if (isBrowser() && !isSupported() && !isPolyfilled()) apply({ layerName: "ds.base" });
+const ROOTS = /* @__PURE__ */ new Map();
 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 handleToggle = (e) => toggle(getComposedTarget(e), e.newState, e.oldState, e.source || e.detail);
+function toggle(el, newState, oldState, source) {
 	const float = el instanceof HTMLElement && attr(el, "popover") !== null && getCSSProp(el, "--_ds-floating");
-	if (!float) return;
-	if (newState === "closed") return POPOVERS.get(el)?.();
+	const prev = POPOVERS.get(el);
+	if (newState === "open" && prev && prev.source === source) return;
+	prev?.cleanup();
+	if (newState === "closed" || !float) return;
 	if (!source) {
-		const root = el.getRootNode();
-		const css = `[popovertarget="${el.id}"],[commandfor="${el.id}"]`;
-		source = el.id && root?.querySelector?.(css) || void 0;
+		const css = el.id && `[popovertarget="${el.id}"],[commandfor="${el.id}"]`;
+		source = css && getRoot(el).querySelector(css) || void 0;
 	}
 	if (!source || source === el || oldState && oldState === newState) return;
 	el.style.scrollMarginBottom = `var(--_ds-floating-arrow-size)`;
@@ -1081,19 +1342,66 @@ function handleToggle(event) {
 		]
 	};
 	const unfloat = autoUpdate(source, el, async () => {
-		if (!source?.isConnected) return POPOVERS.get(el)?.();
+		if (!source?.isConnected) return POPOVERS.get(el)?.cleanup();
 		const { x, y } = await computePosition(source, el, options);
 		el.style.translate = `${x}px ${y}px`;
 	});
-	POPOVERS.set(el, () => POPOVERS.delete(el) && unfloat());
+	POPOVERS.set(el, {
+		source,
+		cleanup: () => POPOVERS.delete(el) && unfloat()
+	});
 }
 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();
+const handleScrollbar = (e) => {
+	if (e.type === "pointerdown") IS_SCROLL = false;
+	if (e.type === "scroll" && IS_SCROLL === false) IS_SCROLL = true;
+	if (e.type === "pointerup" && IS_SCROLL) for (const [popover] of POPOVERS) popover.showPopover();
+};
+const handleClick$1 = (e) => {
+	for (const [root, off] of ROOTS) if (!root.host?.isConnected && ROOTS.delete(root)) off();
+	const root = getRoot(getComposedTarget(e));
+	if (root instanceof ShadowRoot && !ROOTS.has(root)) ROOTS.set(root, on(root, "toggle", handleToggle, QUICK_EVENT));
 };
-onHotReload("popover", () => [on(document, "mousedown scroll mouseup", handleScrollbar, true), on(document, "toggle ds-toggle-source", handleToggle, QUICK_EVENT)]);
+onHotReload("popover", () => {
+	const isFunction = (fn) => typeof fn === "function";
+	const togglePopover = HTMLElement.prototype.togglePopover;
+	const showPopover = HTMLElement.prototype.showPopover;
+	const hidePopover = HTMLElement.prototype.hidePopover;
+	if (isFunction(togglePopover)) HTMLElement.prototype.togglePopover = function(opt) {
+		const isOpen = this.matches(":popover-open");
+		const isBool = typeof opt === "boolean";
+		const prev = isOpen ? "open" : "closed";
+		const next = (isBool ? opt : opt?.force ?? !isOpen) ? "open" : "closed";
+		const source = isBool ? void 0 : opt?.source;
+		const result = togglePopover.call(this, opt);
+		toggle(this, next, prev, source);
+		return result;
+	};
+	if (isFunction(showPopover)) HTMLElement.prototype.showPopover = function(opt) {
+		const prev = this.matches(":popover-open") ? "open" : "closed";
+		const result = showPopover.call(this, opt);
+		toggle(this, "open", prev, opt?.source);
+		return result;
+	};
+	if (isFunction(hidePopover)) HTMLElement.prototype.hidePopover = function() {
+		const prev = this.matches(":popover-open") ? "open" : "closed";
+		const result = hidePopover.call(this);
+		toggle(this, "closed", prev);
+		return result;
+	};
+	return [
+		on(document, "click", handleClick$1, QUICK_EVENT),
+		on(document, "pointerdown pointerup scroll", handleScrollbar, QUICK_EVENT),
+		on(document, "toggle ds-toggle-source", handleToggle, QUICK_EVENT),
+		() => {
+			HTMLElement.prototype.togglePopover = togglePopover;
+			HTMLElement.prototype.showPopover = showPopover;
+			HTMLElement.prototype.hidePopover = hidePopover;
+			for (const [, off] of ROOTS) off();
+			ROOTS.clear();
+		}
+	];
+});
 const arrowPseudo = () => ({
 	name: "arrowPseudo",
 	fn(data) {
@@ -1109,89 +1417,104 @@ const arrowPseudo = () => ({
 });
 //#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 isReadOnly = (el) => attr(el, "readonly") !== null || attr(el, "aria-readonly") === "true";
+const handleKeydown$1 = (e) => {
+	if (!(e.key === "Tab" || e.altKey || e.ctrlKey || e.metaKey) || e.key?.startsWith("Arrow")) handleSelect(e);
+};
+const handleSelect = (e) => {
+	const el = getComposedTarget(e);
+	if (el?.nodeName === "SELECT" && isReadOnly(el)) e.preventDefault();
 };
 const handleClick = (e) => {
-	const input = e.target?.closest?.("label")?.control || e.target;
-	if (isReadOnly(input)) {
-		e.preventDefault();
-		input.focus();
+	for (let el of e.composedPath()) {
+		if (el?.nodeName === "LABEL") el = el.control;
+		if (el?.nodeName === "INPUT" || el?.nodeName === "SELECT") {
+			if (isReadOnly(el)) {
+				e.stopImmediatePropagation();
+				e.preventDefault();
+				el[el.nodeName === "SELECT" ? "blur" : "focus"]();
+				requestAnimationFrame(() => el.isConnected && el.focus());
+			}
+			return;
+		}
 	}
 };
-const handleMouseDown = (e) => {
-	if (e.target instanceof HTMLSelectElement && isReadOnly(e.target)) e.preventDefault();
-};
 onHotReload("readonly", () => [
-	on(document, "keydown", handleKeyDown),
-	on(document, "click", handleClick),
-	on(document, "mousedown", handleMouseDown)
+	on(document, "keydown", handleKeydown$1),
+	on(document, "click", handleClick, true),
+	on(document, "mousedown", handleSelect, true)
 ]);
 //#endregion
 //#region src/toggle-group/toggle-group.ts
-const ARIA_LABELLEDBY = "aria-labelledby";
-const ARIA_LABEL$1 = "aria-label";
+const ATTR_FOCUSGROUP = "focusgroup";
 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));
+let IS_ARROW;
+const handleMutations$1 = (root, records) => {
+	for (const r of records || [null]) if (r?.attributeName === ATTR_TOGGLEGROUP) deprecate(r.target);
+	else if (!r || r.addedNodes.length) {
+		const scope = r?.target || root;
+		for (const el of scope.querySelectorAll(SELECTOR_TOGGLEGROUP)) deprecate(el);
+	}
 };
-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;
-			}
-		}
+const handleRadioClick = (e) => {
+	if (IS_ARROW && getRadioInFocusGroup(e)) {
+		e.preventDefault();
+		e.stopImmediatePropagation();
 	}
 };
-onHotReload("toggle-group", () => [on(document, "keydown", handleKeydown), onMutation(document, handleAriaAttributes$1, {
-	attributeFilter: [ATTR_TOGGLEGROUP],
-	attributes: true,
-	childList: true,
-	subtree: true
-})]);
+const resetIsArrow = () => IS_ARROW = false;
+const handleKeydown = (e) => {
+	IS_ARROW = e.key?.startsWith("Arrow");
+	if (e.key === "Enter") getRadioInFocusGroup(e)?.click();
+	if (IS_ARROW) setTimeout(resetIsArrow, 0);
+};
+const getRadioInFocusGroup = (e) => {
+	const el = getComposedTarget(e);
+	if (el?.nodeName !== "INPUT" || el.type !== "radio" || !el.name) return;
+	for (const group of getComposedPath(el)) {
+		if (group.nodeType !== 1 || !group.hasAttribute(ATTR_FOCUSGROUP)) continue;
+		if (!attr(group, ATTR_FOCUSGROUP)?.includes("radiogroup")) return;
+		return el;
+	}
+};
+const deprecate = (el) => {
+	if (el.hasAttribute(ATTR_FOCUSGROUP)) return;
+	const label = attrOrCSS(el, ATTR_TOGGLEGROUP);
+	const labelledby = attr(el, ARIA_LABELLEDBY)?.trim();
+	const message = `Please use ${ATTR_FOCUSGROUP}="radiogroup" and ${labelledby ? ARIA_LABELLEDBY : ARIA_LABEL}="${labelledby || label}" instead of deprecated ${ATTR_TOGGLEGROUP} on:`;
+	attr(el, ARIA_LABEL, labelledby ? null : label);
+	attr(el, ATTR_FOCUSGROUP, "radiogroup");
+	warn(message, el);
+};
+onHotReload("toggle-group", () => [
+	on(document, "click", handleRadioClick, true),
+	on(document, "keydown", handleKeydown),
+	onMutation(document, handleMutations$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";
+let TIMER;
+let TARGET;
+let OPEN;
+let LAST_HIDE = 0;
 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 ATTR_SIZE = "data-size";
+const ATTR_TOOLTIP = "data-tooltip";
 const DELAY_HOVER = 300;
 const DELAY_SKIP = 300;
+const IS_IOS = isBrowser() && /iPad|iPhone|iPod/.test(navigator.userAgent);
+const SELECTOR_COLOR = `[${ATTR_COLOR}]`;
+const SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;
+const SELECTOR_SIZE = `[${ATTR_SIZE}]`;
+const SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;
 /**
 * 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.
@@ -1199,75 +1522,83 @@ const DELAY_SKIP = 300;
 */
 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;
+	hide();
+	LAST_HIDE = 0;
 	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 initTooltips = (scope = document) => {
+	for (const el of scope?.querySelectorAll(SELECTOR_TOOLTIP) || []) setupText(el);
+};
+const handleMutations = (_, records) => {
+	if (!records) return initTooltips();
+	for (const r of records) {
+		if (r.target === TIP) continue;
+		if (r.attributeName === ATTR_TOOLTIP) setupText(r.target);
+		else for (const el of r.addedNodes) {
+			if (el.nodeType !== 1) continue;
+			if (el.hasAttribute(ATTR_TOOLTIP)) setupText(el);
+			else initTooltips(el);
 		}
 	}
 };
-const handleInterest = (event) => {
-	const { type, target } = event;
-	clearTimeout(HOVER_TIMER);
-	if (target === TIP) return;
-	const source = target?.closest?.(SELECTOR_TOOLTIP);
-	if (type === "blur") {
-		const next = event.relatedTarget;
-		if (source === SOURCE && !next?.closest?.(SELECTOR_TOOLTIP)) hideTooltip();
-		return;
-	}
-	if (type === "mouseover" && !IS_HOVERING && !IS_IOS) {
-		HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target });
-		return;
+const setupText = (el, canAnnounce = true) => {
+	let text = attrOrCSS(el, ATTR_TOOLTIP) || "";
+	if (text[0] === "#") text = getRoot(el).getElementById(text.slice(1))?.textContent?.trim() || "";
+	if (text !== (el.getAttribute("aria-label") || el.getAttribute("aria-description"))) {
+		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.tabIndex === -1) warn("Missing tabindex=\"0\" attribute on: ", el);
+	}
+	if (el === OPEN && TIP?.textContent !== text) {
+		if (TIP) TIP.textContent = text;
+		if (text && canAnnounce && document.activeElement === el) announce(text);
 	}
-	if (source === SOURCE) return;
-	if (!source) return hideTooltip();
+};
+const handleInterest = (e) => {
+	const target = getComposedTarget(e);
+	if (!target || TARGET === target || TIP?.contains(target)) return;
+	TARGET = target;
+	const source = TARGET?.closest?.(SELECTOR_TOOLTIP) || void 0;
+	if (OPEN === source) return;
+	if (OPEN) hide();
+	OPEN = source;
+	if (!source) return;
+	if (e.type === "focus" || IS_IOS || DELAY_SKIP > Date.now() - LAST_HIDE) return show();
+	if (e.type === "mousemove") TIMER = setTimeout(show, DELAY_HOVER);
+};
+const show = () => {
+	if (!OPEN) return hide();
 	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 color = OPEN.closest(SELECTOR_COLOR);
+	const scheme = OPEN.closest(SELECTOR_SCHEME);
+	const size = OPEN.closest(SELECTOR_SIZE);
 	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);
+	attr(TIP, ATTR_SIZE, size?.getAttribute(ATTR_SIZE) || null);
+	setupText(OPEN, false);
 	TIP.showPopover();
-	TIP.dispatchEvent(new CustomEvent("ds-toggle-source", { detail: source }));
-	IS_HOVERING = true;
-	SOURCE = source;
+	TIP.dispatchEvent(new CustomEvent("ds-toggle-source", {
+		bubbles: true,
+		composed: true,
+		detail: OPEN
+	}));
 };
-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);
-	}
+const hide = (event) => {
+	if (event?.type === "keydown" && event?.key !== "Escape") return;
+	if (OPEN && TIP?.isConnected && TIP.popover) TIP.hidePopover();
+	if (!event) LAST_HIDE = Date.now();
+	clearTimeout(TIMER);
+	OPEN = void 0;
 };
 onHotReload("tooltip", () => [
-	on(document, "blur focus mouseover", handleInterest, QUICK_EVENT),
-	on(document, "toggle keydown", handleClose, QUICK_EVENT),
-	onMutation(document, handleAriaAttributes, {
+	on(document, "focus mousemove", handleInterest, QUICK_EVENT),
+	on(document, "keydown", hide, QUICK_EVENT),
+	onMutation(document, handleMutations, {
 		attributeFilter: [ATTR_TOOLTIP],
 		attributes: true,
 		childList: true,
@@ -1276,18 +1607,19 @@ onHotReload("tooltip", () => [
 ]);
 //#endregion
 //#region src/breadcrumbs/breadcrumbs.ts
-const ATTR_LABEL$1 = "aria-label";
 var DSBreadcrumbsElement = class extends DSElement {
 	_items;
-	_label = null;
+	_label = {
+		key: ARIA_LABEL,
+		value: null
+	};
 	_unresize;
 	_unmutate;
 	static get observedAttributes() {
-		return [ATTR_LABEL$1];
+		return [ARIA_LABEL, ARIA_LABELLEDBY];
 	}
 	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, {
@@ -1295,10 +1627,8 @@ var DSBreadcrumbsElement = class extends DSElement {
 			subtree: true
 		});
 	}
-	attributeChangedCallback(_name, _prev, next) {
-		if (!this._unmutate || !next) return;
-		this._label = next;
-		render$3(this);
+	attributeChangedCallback() {
+		if (this._unmutate) render$3(this);
 	}
 	disconnectedCallback() {
 		this._unresize?.();
@@ -1311,8 +1641,18 @@ const render$3 = (self) => {
 	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);
+	const label = attrOrCSS(self, ARIA_LABEL)?.trim();
+	const labelledby = attr(self, ARIA_LABELLEDBY)?.trim();
+	const prevLabel = label || labelledby;
+	if (prevLabel) self._label.value = prevLabel;
+	if (prevLabel) self._label.key = labelledby ? ARIA_LABELLEDBY : ARIA_LABEL;
+	const nextLabel = isListHidden ? null : self._label.value;
+	if (prevLabel !== nextLabel) {
+		attr(self, ARIA_LABELLEDBY, null);
+		attr(self, ARIA_LABEL, null);
+		attr(self, self._label.key, nextLabel);
+	}
 };
 customElements.define("ds-breadcrumbs", DSBreadcrumbsElement);
 //#endregion
@@ -1339,11 +1679,11 @@ var DSErrorSummaryElement = class extends DSElement {
 	}
 };
 const render$2 = (self) => {
-	const label = attr(self, "aria-label")?.trim();
-	const labelledBy = attr(self, "aria-labelledby")?.trim();
+	const label = attr(self, ARIA_LABEL)?.trim();
+	const labelledBy = attr(self, ARIA_LABELLEDBY)?.trim();
 	const heading = self.querySelector("h2,h3,h4,h5,h6");
-	if (heading && !label && !labelledBy) attr(self, "aria-labelledby", useId(heading));
-	if (!heading && !label && !labelledBy) warn("Missing accessible name on:", self, "\nAdd a heading (h2–h6), or set aria-label or aria-labelledby to provide an accessible name for screen readers.");
+	if (heading && !label && !labelledBy) attr(self, ARIA_LABELLEDBY, useId(heading));
+	if (!heading && !label && !labelledBy) warn("Missing accessible name on:", self, `\nAdd a heading (h2–h6), or set ${ARIA_LABEL} or ${ARIA_LABELLEDBY} to provide an accessible name for screen readers.`);
 };
 customElements.define("ds-error-summary", DSErrorSummaryElement);
 //#endregion
@@ -1352,32 +1692,22 @@ 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;
+	const prevDescs = field._descs || [];
 	let hasValidation = false;
 	let invalid = false;
+	if (field._input?.hidden) field._input = void 0;
 	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;
+		if (isInputLike(el)) if (field._input?.isConnected && field._input !== el) warn(WARNING_MULTIPLE_INPUTS, field);
+		else field._input = el;
 		else {
 			const type = el.getAttribute("data-field");
-			if (type === "counter") counter = el;
+			if (type === "counter") field._counter = el;
 			if (type === "validation") {
 				nextDescs.unshift(useId(el));
 				hasValidation = true;
@@ -1385,9 +1715,9 @@ const handleFieldMutation = (field) => {
 			} 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));
+	if (!field._input?.isConnected) return;
+	const input = field._input;
+	for (const label of labels) attr(label, "for", useId(input) || null);
 	const fieldsetValidation = field.closest("fieldset")?.querySelector(":scope > [data-field=\"validation\"]");
 	if (fieldsetValidation && !fieldsetValidation?.hidden) {
 		hasValidation = true;
@@ -1399,69 +1729,76 @@ const handleFieldMutation = (field) => {
 	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);
+	field._descs = nextDescs;
+	const hadValidation = field._validation;
 	if (hasValidation && !hadValidation && !input.hasAttribute(ATTR_INVALID)) {
 		attr(input, ATTR_INVALID, "true");
-		VALIDATIONS.add(input);
+		field._validation = true;
 	} else if (!hasValidation && hadValidation) {
 		attr(input, ATTR_INVALID, null);
-		VALIDATIONS.delete(input);
+		field._validation = void 0;
 	}
-	handleFieldInput(input);
+	field.handleEvent();
 };
 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);
 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 {
+	_counter;
+	_descs;
+	_input;
+	_validation;
+	_unevents;
+	_unmutate;
 	connectedCallback() {
-		FIELDS.set(this, []);
-		handleFieldMutation(this);
+		this._unevents = on(this, "input", this, QUICK_EVENT);
+		this._unmutate = onMutation(this, () => handleFieldMutation(this), {
+			attributeFilter: [
+				"data-field",
+				"data-limit",
+				"hidden",
+				"id",
+				"value",
+				ATTR_INDETERMINATE
+			],
+			attributes: true,
+			childList: true,
+			subtree: true
+		});
+	}
+	handleEvent(event) {
+		const { _counter, _input } = this;
+		if (_counter?.isConnected && _input) {
+			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)}`);
+			if (!label) warn(`Missing data-${state} on:`, _counter);
+			attr(_counter, "data-label", label);
+			attr(_counter, "data-state", state);
+			attr(_counter, "data-color", count < 0 ? "danger" : null);
+			if (event?.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`);
+		}
 	}
 	disconnectedCallback() {
-		FIELDS.delete(this);
+		this._unevents?.();
+		this._unmutate?.();
+		this._unevents = this._unmutate = void 0;
+		this._input = this._counter = this._descs = this._validation = void 0;
 	}
 };
 customElements.define("ds-field", DSFieldElement);
-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";
@@ -1479,7 +1816,8 @@ var DSPaginationElement = class extends DSElement {
 	_render;
 	static get observedAttributes() {
 		return [
-			ATTR_LABEL,
+			ARIA_LABEL,
+			ARIA_LABELLEDBY,
 			ATTR_CURRENT,
 			ATTR_TOTAL,
 			ATTR_HREF
@@ -1490,7 +1828,10 @@ var DSPaginationElement = class extends DSElement {
 		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));
+		const label = attrOrCSS(this, ARIA_LABEL);
+		const labelledby = attr(this, ARIA_LABELLEDBY)?.trim();
+		if (label || labelledby) attr(this, ARIA_LABEL, labelledby ? null : label);
+		else warn(`Missing ${ARIA_LABEL} on:`, this);
 		attr(this, "role", "navigation");
 		this._unmutate = onMutation(this, render$1, {
 			childList: true,
@@ -1520,7 +1861,7 @@ const render$1 = (self) => {
 		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, ARIA_LABEL, `${page ?? "hidden"}`);
 			attr(item, "role", page ? null : "none");
 			attr(item, "tabindex", page ? null : "-1");
 			if (item instanceof HTMLButtonElement) attr(item, "value", `${page}`);
@@ -1540,32 +1881,66 @@ const getSteps = (now, max, show = Number.POSITIVE_INFINITY) => {
 customElements.define("ds-pagination", DSPaginationElement);
 //#endregion
 //#region src/suggestion/suggestion.ts
+const ATTR_EMPTY = "data-empty";
+const ATTR_CREATE = "data-create";
 var DSSuggestionElement = class extends UHTMLComboboxElement {
 	_unmutate;
 	connectedCallback() {
 		super.connectedCallback();
 		this._unmutate = onMutation(this, render, { childList: true });
+		on(this, "comboboxafterselect input", handleEmpty, QUICK_EVENT);
 		on(this, "toggle", polyfillToggleSource, QUICK_EVENT);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this._unmutate?.();
 		this._unmutate = void 0;
+		off(this, "comboboxafterselect input", handleEmpty, QUICK_EVENT);
 		off(this, "toggle", polyfillToggleSource, QUICK_EVENT);
 	}
 };
 const render = (self) => {
 	const { control, list } = self;
 	const datalist = list || self.querySelector("u-datalist");
-	if (control && !control.placeholder) attr(control, "placeholder", " ");
-	if (control) attr(control, "popovertarget", useId(list) || null);
-	if (datalist) attr(datalist, "popover", "manual");
-	if (datalist) attr(datalist, "data-is-floating", "true");
+	if (control) {
+		attr(control, "popovertarget", list ? useId(list) : null);
+		if (!control.placeholder) attr(control, "placeholder", " ");
+	}
+	if (datalist) {
+		attr(datalist, "popover", "manual");
+		attr(datalist, "data-is-floating", "true");
+	}
+};
+const handleEmpty = ({ currentTarget: self }) => {
+	const { creatable, control, options } = self;
+	if (!options) return;
+	const value = control?.value.trim() || "";
+	const query = value.toLowerCase();
+	let empty;
+	let exists = !value;
+	for (const opt of options) {
+		if (!empty && opt.hasAttribute(ATTR_EMPTY)) empty = opt;
+		else if (!exists && opt.label?.toLowerCase() === query) exists = true;
+		if (exists && empty) break;
+	}
+	if (!empty) return;
+	empty.hidden = exists;
+	empty.label = value;
+	empty.value = creatable ? value : "";
+	if (!creatable || empty.textContent) return;
+	const text = attrOrCSS(empty, ATTR_EMPTY);
+	if (!text) warn(`Missing ${ATTR_EMPTY} value on:`, empty);
+	else attr(empty, ATTR_EMPTY, text);
+	attr(empty, ATTR_CREATE, text?.replace("{value}", value));
 };
 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 }));
+	if (detail) self.list?.dispatchEvent(new CustomEvent("ds-toggle-source", {
+		bubbles: true,
+		composed: true,
+		detail
+	}));
 };
 customElements.define("ds-suggestion", DSSuggestionElement);
 //#endregion
@@ -1579,6 +1954,4 @@ customElements.define("ds-tablist", DSTabListElement);
 customElements.define("ds-tab", DSTabElement);
 customElements.define("ds-tabpanel", DSTabPanelElement);
 //#endregion
-export { DSBreadcrumbsElement, DSErrorSummaryElement, DSFieldElement, DSPaginationElement, DSSuggestionElement, DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement, pagination, setTooltipElement };
-
-//# sourceMappingURL=index.js.map
+export { DSBreadcrumbsElement, DSErrorSummaryElement, DSFieldElement, DSPaginationElement, DSSuggestionElement, DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement, initTooltips, pagination, setTooltipElement };