@digdir/designsystemet-web 1.14.0 → 1.16.0

package/dist/index.js

@@ -3,11 +3,230 @@ 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 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);
+	};
+}
+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 || "";
+}
+/**
+* @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$2, {
+		attributeFilter: ["command"],
+		attributes: true,
+		childList: true,
+		subtree: true
+	})
+]);
+//#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 ../../node_modules/.pnpm/invokers-polyfill@1.0.3/node_modules/invokers-polyfill/invoker.js
-function isSupported() {
+function isSupported$1() {
 	return typeof HTMLButtonElement !== "undefined" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
 }
-function apply() {
+function apply$1() {
 	document.addEventListener("invoke", (e) => {
 		if (e.type == "invoke" && e.isTrusted) {
 			e.stopImmediatePropagation();
@@ -215,239 +434,609 @@ function apply() {
 		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 });
-}
-//#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);
-	};
-}
-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);
+			return internals;
+		};
+	}
+	applyInvokerMixin(HTMLButtonElement);
+	observeShadowRoots(HTMLElement, (shadow) => {
+		setupInvokeListeners(shadow);
+		oncommandObserver.observe(shadow, { attributeFilter: ["oncommand"] });
+		applyOnCommandHandler(shadow.querySelectorAll("[oncommand]"));
 	});
-	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 || "";
+	setupInvokeListeners(document);
+	Object.assign(globalThis, { CommandEvent });
 }
-/**
-* @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)]);
+//#region src/invokers/invokers.ts
+if (isBrowser() && !isSupported$1()) apply$1();
 //#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());
+//#region ../../node_modules/.pnpm/@oddbird+popover-polyfill@0.6.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 || "");
 	}
 };
-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$2, {
-		attributeFilter: ["command"],
-		attributes: true,
-		childList: true,
-		subtree: true
-	})
-]);
-//#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);
+var popoverToggleTaskQueue = /* @__PURE__ */ new WeakMap();
+function queuePopoverToggleEventTask(element, oldState, newState) {
+	popoverToggleTaskQueue.set(element, setTimeout(() => {
+		if (!popoverToggleTaskQueue.has(element)) return;
+		element.dispatchEvent(new ToggleEvent("toggle", {
+			cancelable: false,
+			oldState,
+			newState
+		}));
+	}, 0));
+}
+var ShadowRoot$1 = globalThis.ShadowRoot || function() {};
+var HTMLDialogElement$1 = globalThis.HTMLDialogElement || function() {};
+var topLayerElements = /* @__PURE__ */ new WeakMap();
+var autoPopoverList = /* @__PURE__ */ new WeakMap();
+var hintPopoverList = /* @__PURE__ */ new WeakMap();
+var visibilityState = /* @__PURE__ */ new WeakMap();
+function getPopoverVisibilityState(popover) {
+	return visibilityState.get(popover) || "hidden";
+}
+var popoverInvoker = /* @__PURE__ */ new WeakMap();
+function lastSetElement(set) {
+	return [...set].pop();
+}
+function popoverTargetAttributeActivationBehavior(element) {
+	const popover = element.popoverTargetElement;
+	if (!(popover instanceof HTMLElement)) return;
+	const visibility = getPopoverVisibilityState(popover);
+	if (element.popoverTargetAction === "show" && visibility === "showing") return;
+	if (element.popoverTargetAction === "hide" && visibility === "hidden") return;
+	if (visibility === "showing") hidePopover(popover, true, true);
+	else if (checkPopoverValidity(popover, false)) {
+		popoverInvoker.set(popover, element);
+		showPopover(popover);
 	}
-};
-onHotReload("fieldset", () => [onMutation(document, handleFieldsetMutations, {
-	childList: true,
-	subtree: true
-})]);
+}
+function checkPopoverValidity(element, expectedToBeShowing) {
+	if (element.popover !== "auto" && element.popover !== "manual" && element.popover !== "hint") return false;
+	if (!element.isConnected) return false;
+	if (expectedToBeShowing && getPopoverVisibilityState(element) !== "showing") return false;
+	if (!expectedToBeShowing && getPopoverVisibilityState(element) !== "hidden") return false;
+	if (element instanceof HTMLDialogElement$1 && element.hasAttribute("open")) return false;
+	if (document.fullscreenElement === element) return false;
+	return true;
+}
+function getStackPosition(popover) {
+	if (!popover) return 0;
+	const autoPopovers = autoPopoverList.get(document) || /* @__PURE__ */ new Set();
+	const hintPopovers = hintPopoverList.get(document) || /* @__PURE__ */ new Set();
+	if (hintPopovers.has(popover)) return [...hintPopovers].indexOf(popover) + autoPopovers.size + 1;
+	if (autoPopovers.has(popover)) return [...autoPopovers].indexOf(popover) + 1;
+	return 0;
+}
+function topMostClickedPopover(target) {
+	const clickedPopover = nearestInclusiveOpenPopover(target);
+	const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);
+	if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) return clickedPopover;
+	return invokerPopover;
+}
+function topmostAutoOrHintPopover(document2) {
+	let topmostPopover;
+	const hintPopovers = hintPopoverList.get(document2) || /* @__PURE__ */ new Set();
+	const autoPopovers = autoPopoverList.get(document2) || /* @__PURE__ */ new Set();
+	const usedStack = hintPopovers.size > 0 ? hintPopovers : autoPopovers.size > 0 ? autoPopovers : null;
+	if (usedStack) {
+		topmostPopover = lastSetElement(usedStack);
+		if (!topmostPopover.isConnected) {
+			usedStack.delete(topmostPopover);
+			return topmostAutoOrHintPopover(document2);
+		}
+		return topmostPopover;
+	}
+	return null;
+}
+function topMostPopoverInList(list) {
+	for (const popover of list || []) if (!popover.isConnected) list.delete(popover);
+	else return popover;
+	return null;
+}
+function getRootNode(node) {
+	if (typeof node.getRootNode === "function") return node.getRootNode();
+	if (node.parentNode) return getRootNode(node.parentNode);
+	return node;
+}
+function nearestInclusiveOpenPopover(node) {
+	while (node) {
+		if (node instanceof HTMLElement && node.popover === "auto" && visibilityState.get(node) === "showing") return node;
+		node = node instanceof Element && node.assignedSlot || node.parentElement || getRootNode(node);
+		if (node instanceof ShadowRoot$1) node = node.host;
+		if (node instanceof Document) return;
+	}
+}
+function nearestInclusiveTargetPopoverForInvoker(node) {
+	while (node) {
+		const nodePopover = node.popoverTargetElement;
+		if (nodePopover instanceof HTMLElement) return nodePopover;
+		node = node.parentElement || getRootNode(node);
+		if (node instanceof ShadowRoot$1) node = node.host;
+		if (node instanceof Document) return;
+	}
+}
+function topMostPopoverAncestor(newPopover, list) {
+	const popoverPositions = /* @__PURE__ */ new Map();
+	let i = 0;
+	for (const popover of list || []) {
+		popoverPositions.set(popover, i);
+		i += 1;
+	}
+	popoverPositions.set(newPopover, i);
+	i += 1;
+	let topMostPopoverAncestor2 = null;
+	function checkAncestor(candidate) {
+		if (!candidate) return;
+		let okNesting = false;
+		let candidateAncestor = null;
+		let candidatePosition = null;
+		while (!okNesting) {
+			candidateAncestor = nearestInclusiveOpenPopover(candidate) || null;
+			if (candidateAncestor === null) return;
+			if (!popoverPositions.has(candidateAncestor)) return;
+			if (newPopover.popover === "hint" || candidateAncestor.popover === "auto") okNesting = true;
+			if (!okNesting) candidate = candidateAncestor.parentElement;
+		}
+		candidatePosition = popoverPositions.get(candidateAncestor);
+		if (topMostPopoverAncestor2 === null || popoverPositions.get(topMostPopoverAncestor2) < candidatePosition) topMostPopoverAncestor2 = candidateAncestor;
+	}
+	checkAncestor(newPopover.parentElement || getRootNode(newPopover));
+	return topMostPopoverAncestor2;
+}
+function isFocusable(focusTarget) {
+	if (focusTarget.hidden || focusTarget instanceof ShadowRoot$1) return false;
+	if (focusTarget instanceof HTMLButtonElement || focusTarget instanceof HTMLInputElement || focusTarget instanceof HTMLSelectElement || focusTarget instanceof HTMLTextAreaElement || focusTarget instanceof HTMLOptGroupElement || focusTarget instanceof HTMLOptionElement || focusTarget instanceof HTMLFieldSetElement) {
+		if (focusTarget.disabled) return false;
+	}
+	if (focusTarget instanceof HTMLInputElement && focusTarget.type === "hidden") return false;
+	if (focusTarget instanceof HTMLAnchorElement && focusTarget.href === "") return false;
+	return typeof focusTarget.tabIndex === "number" && focusTarget.tabIndex !== -1;
+}
+function focusDelegate(focusTarget) {
+	if (focusTarget.shadowRoot && focusTarget.shadowRoot.delegatesFocus !== true) return null;
+	let whereToLook = focusTarget;
+	if (whereToLook.shadowRoot) whereToLook = whereToLook.shadowRoot;
+	let autoFocusDelegate = whereToLook.querySelector("[autofocus]");
+	if (autoFocusDelegate) return autoFocusDelegate;
+	else {
+		const slots = whereToLook.querySelectorAll("slot");
+		for (const slot of slots) {
+			const assignedElements = slot.assignedElements({ flatten: true });
+			for (const el of assignedElements) if (el.hasAttribute("autofocus")) return el;
+			else {
+				autoFocusDelegate = el.querySelector("[autofocus]");
+				if (autoFocusDelegate) return autoFocusDelegate;
+			}
+		}
+	}
+	const walker = focusTarget.ownerDocument.createTreeWalker(whereToLook, NodeFilter.SHOW_ELEMENT);
+	let descendant = walker.currentNode;
+	while (descendant) {
+		if (isFocusable(descendant)) return descendant;
+		descendant = walker.nextNode();
+	}
+}
+function popoverFocusingSteps(subject) {
+	var _a;
+	(_a = focusDelegate(subject)) == null || _a.focus();
+}
+var previouslyFocusedElements = /* @__PURE__ */ new WeakMap();
+function showPopover(element) {
+	if (!checkPopoverValidity(element, false)) return;
+	const document2 = element.ownerDocument;
+	if (!element.dispatchEvent(new ToggleEvent("beforetoggle", {
+		cancelable: true,
+		oldState: "closed",
+		newState: "open"
+	}))) return;
+	if (!checkPopoverValidity(element, false)) return;
+	let shouldRestoreFocus = false;
+	const originalType = element.popover;
+	let stackToAppendTo = null;
+	const autoAncestor = topMostPopoverAncestor(element, autoPopoverList.get(document2) || /* @__PURE__ */ new Set());
+	const hintAncestor = topMostPopoverAncestor(element, hintPopoverList.get(document2) || /* @__PURE__ */ new Set());
+	if (originalType === "auto") {
+		closeAllOpenPopoversInList(hintPopoverList.get(document2) || /* @__PURE__ */ new Set(), shouldRestoreFocus, true);
+		hideAllPopoversUntil(autoAncestor || document2, shouldRestoreFocus, true);
+		stackToAppendTo = "auto";
+	}
+	if (originalType === "hint") if (hintAncestor) {
+		hideAllPopoversUntil(hintAncestor, shouldRestoreFocus, true);
+		stackToAppendTo = "hint";
+	} else {
+		closeAllOpenPopoversInList(hintPopoverList.get(document2) || /* @__PURE__ */ new Set(), shouldRestoreFocus, true);
+		if (autoAncestor) {
+			hideAllPopoversUntil(autoAncestor, shouldRestoreFocus, true);
+			stackToAppendTo = "auto";
+		} else stackToAppendTo = "hint";
+	}
+	if (originalType === "auto" || originalType === "hint") {
+		if (originalType !== element.popover || !checkPopoverValidity(element, false)) return;
+		if (!topmostAutoOrHintPopover(document2)) shouldRestoreFocus = true;
+		if (stackToAppendTo === "auto") {
+			if (!autoPopoverList.has(document2)) autoPopoverList.set(document2, /* @__PURE__ */ new Set());
+			autoPopoverList.get(document2).add(element);
+		} else if (stackToAppendTo === "hint") {
+			if (!hintPopoverList.has(document2)) hintPopoverList.set(document2, /* @__PURE__ */ new Set());
+			hintPopoverList.get(document2).add(element);
+		}
+	}
+	previouslyFocusedElements.delete(element);
+	const originallyFocusedElement = document2.activeElement;
+	element.classList.add(":popover-open");
+	visibilityState.set(element, "showing");
+	if (!topLayerElements.has(document2)) topLayerElements.set(document2, /* @__PURE__ */ new Set());
+	topLayerElements.get(document2).add(element);
+	setInvokerAriaExpanded(popoverInvoker.get(element), true);
+	popoverFocusingSteps(element);
+	if (shouldRestoreFocus && originallyFocusedElement && element.popover === "auto") previouslyFocusedElements.set(element, originallyFocusedElement);
+	queuePopoverToggleEventTask(element, "closed", "open");
+}
+function hidePopover(element, focusPreviousElement = false, fireEvents = false) {
+	var _a, _b;
+	if (!checkPopoverValidity(element, true)) return;
+	const document2 = element.ownerDocument;
+	if (["auto", "hint"].includes(element.popover)) {
+		hideAllPopoversUntil(element, focusPreviousElement, fireEvents);
+		if (!checkPopoverValidity(element, true)) return;
+	}
+	const autoList = autoPopoverList.get(document2) || /* @__PURE__ */ new Set();
+	const autoPopoverListContainsElement = autoList.has(element) && lastSetElement(autoList) === element;
+	setInvokerAriaExpanded(popoverInvoker.get(element), false);
+	popoverInvoker.delete(element);
+	if (fireEvents) {
+		element.dispatchEvent(new ToggleEvent("beforetoggle", {
+			oldState: "open",
+			newState: "closed"
+		}));
+		if (autoPopoverListContainsElement && lastSetElement(autoList) !== element) hideAllPopoversUntil(element, focusPreviousElement, fireEvents);
+		if (!checkPopoverValidity(element, true)) return;
+	}
+	(_a = topLayerElements.get(document2)) == null || _a.delete(element);
+	autoList.delete(element);
+	(_b = hintPopoverList.get(document2)) == null || _b.delete(element);
+	element.classList.remove(":popover-open");
+	visibilityState.set(element, "hidden");
+	if (fireEvents) queuePopoverToggleEventTask(element, "open", "closed");
+	const previouslyFocusedElement = previouslyFocusedElements.get(element);
+	if (previouslyFocusedElement) {
+		previouslyFocusedElements.delete(element);
+		if (focusPreviousElement) previouslyFocusedElement.focus();
+	}
+}
+function closeAllOpenPopovers(document2, focusPreviousElement = false, fireEvents = false) {
+	let popover = topmostAutoOrHintPopover(document2);
+	while (popover) {
+		hidePopover(popover, focusPreviousElement, fireEvents);
+		popover = topmostAutoOrHintPopover(document2);
+	}
+}
+function closeAllOpenPopoversInList(list, focusPreviousElement = false, fireEvents = false) {
+	let popover = topMostPopoverInList(list);
+	while (popover) {
+		hidePopover(popover, focusPreviousElement, fireEvents);
+		popover = topMostPopoverInList(list);
+	}
+}
+function hidePopoverStackUntil(endpoint, set, focusPreviousElement, fireEvents) {
+	let repeatingHide = false;
+	let hasRunOnce = false;
+	while (repeatingHide || !hasRunOnce) {
+		hasRunOnce = true;
+		let lastToHide = null;
+		let foundEndpoint = false;
+		for (const popover of set) if (popover === endpoint) foundEndpoint = true;
+		else if (foundEndpoint) {
+			lastToHide = popover;
+			break;
+		}
+		if (!lastToHide) return;
+		while (getPopoverVisibilityState(lastToHide) === "showing" && set.size) hidePopover(lastSetElement(set), focusPreviousElement, fireEvents);
+		if (set.has(endpoint) && lastSetElement(set) !== endpoint) repeatingHide = true;
+		if (repeatingHide) fireEvents = false;
+	}
+}
+function hideAllPopoversUntil(endpoint, focusPreviousElement, fireEvents) {
+	var _a, _b;
+	const document2 = endpoint.ownerDocument || endpoint;
+	if (endpoint instanceof Document) return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
+	if ((_a = hintPopoverList.get(document2)) == null ? void 0 : _a.has(endpoint)) {
+		hidePopoverStackUntil(endpoint, hintPopoverList.get(document2), focusPreviousElement, fireEvents);
+		return;
+	}
+	closeAllOpenPopoversInList(hintPopoverList.get(document2) || /* @__PURE__ */ new Set(), focusPreviousElement, fireEvents);
+	if (!((_b = autoPopoverList.get(document2)) == null ? void 0 : _b.has(endpoint))) return;
+	hidePopoverStackUntil(endpoint, autoPopoverList.get(document2), focusPreviousElement, fireEvents);
+}
+var popoverPointerDownTargets = /* @__PURE__ */ new WeakMap();
+function lightDismissOpenPopovers(event) {
+	if (!event.isTrusted) return;
+	const target = event.composedPath()[0];
+	if (!target) return;
+	const document2 = target.ownerDocument;
+	if (!topmostAutoOrHintPopover(document2)) return;
+	const ancestor = topMostClickedPopover(target);
+	if (ancestor && event.type === "pointerdown") popoverPointerDownTargets.set(document2, ancestor);
+	else if (event.type === "pointerup") {
+		const sameTarget = popoverPointerDownTargets.get(document2) === ancestor;
+		popoverPointerDownTargets.delete(document2);
+		if (sameTarget) hideAllPopoversUntil(ancestor || document2, false, true);
+	}
+}
+var initialAriaExpandedValue = /* @__PURE__ */ new WeakMap();
+function setInvokerAriaExpanded(el, force = false) {
+	if (!el) return;
+	if (!initialAriaExpandedValue.has(el)) initialAriaExpandedValue.set(el, el.getAttribute("aria-expanded"));
+	const popover = el.popoverTargetElement;
+	if (popover instanceof HTMLElement && popover.popover === "auto") el.setAttribute("aria-expanded", String(force));
+	else {
+		const initialValue = initialAriaExpandedValue.get(el);
+		if (!initialValue) el.removeAttribute("aria-expanded");
+		else el.setAttribute("aria-expanded", initialValue);
+	}
+}
+var ShadowRoot2 = globalThis.ShadowRoot || function() {};
+function isSupported() {
+	return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype;
+}
+function patchSelectorFn(object, name, mapper) {
+	const original = object[name];
+	Object.defineProperty(object, name, { value(selector) {
+		return original.call(this, mapper(selector));
+	} });
+}
+var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
+function hasLayerSupport() {
+	return typeof globalThis.CSSLayerBlockRule === "function";
+}
+function getStyles() {
+	const useLayer = hasLayerSupport();
+	return `
+${useLayer ? "@layer popover-polyfill {" : ""}
+  :where([popover]) {
+    position: fixed;
+    z-index: 2147483647;
+    inset: 0;
+    padding: 0.25em;
+    width: fit-content;
+    height: fit-content;
+    border-width: initial;
+    border-color: initial;
+    border-image: initial;
+    border-style: solid;
+    background-color: canvas;
+    color: canvastext;
+    overflow: auto;
+    margin: auto;
+  }
+
+  :where([popover]:not(.\\:popover-open)) {
+    display: none;
+  }
+
+  :where(dialog[popover].\\:popover-open) {
+    display: block;
+  }
+
+  :where(dialog[popover][open]) {
+    display: revert;
+  }
+
+  :where([anchor].\\:popover-open) {
+    inset: auto;
+  }
+
+  :where([anchor]:popover-open) {
+    inset: auto;
+  }
+
+  @supports not (background-color: canvas) {
+    :where([popover]) {
+      background-color: white;
+      color: black;
+    }
+  }
+
+  @supports (width: -moz-fit-content) {
+    :where([popover]) {
+      width: -moz-fit-content;
+      height: -moz-fit-content;
+    }
+  }
+
+  @supports not (inset: 0) {
+    :where([popover]) {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+${useLayer ? "}" : ""}
+`;
+}
+var popoverStyleSheet = null;
+function injectStyles(root) {
+	const styles = getStyles();
+	if (popoverStyleSheet === null) try {
+		popoverStyleSheet = new CSSStyleSheet();
+		popoverStyleSheet.replaceSync(styles);
+	} catch {
+		popoverStyleSheet = false;
+	}
+	if (popoverStyleSheet === false) {
+		const sheet = document.createElement("style");
+		sheet.textContent = styles;
+		if (root instanceof Document) root.head.prepend(sheet);
+		else root.prepend(sheet);
+	} else root.adoptedStyleSheets = [popoverStyleSheet, ...root.adoptedStyleSheets];
+}
+function apply() {
+	if (typeof window === "undefined") return;
+	window.ToggleEvent = window.ToggleEvent || ToggleEvent;
+	function rewriteSelector(selector) {
+		if (selector == null ? void 0 : selector.includes(":popover-open")) selector = selector.replace(nonEscapedPopoverSelector, "$1.\\:popover-open");
+		return selector;
+	}
+	patchSelectorFn(Document.prototype, "querySelector", rewriteSelector);
+	patchSelectorFn(Document.prototype, "querySelectorAll", rewriteSelector);
+	patchSelectorFn(Element.prototype, "querySelector", rewriteSelector);
+	patchSelectorFn(Element.prototype, "querySelectorAll", rewriteSelector);
+	patchSelectorFn(Element.prototype, "matches", rewriteSelector);
+	patchSelectorFn(Element.prototype, "closest", rewriteSelector);
+	patchSelectorFn(DocumentFragment.prototype, "querySelectorAll", rewriteSelector);
+	Object.defineProperties(HTMLElement.prototype, {
+		popover: {
+			enumerable: true,
+			configurable: true,
+			get() {
+				if (!this.hasAttribute("popover")) return null;
+				const value = (this.getAttribute("popover") || "").toLowerCase();
+				if (value === "" || value == "auto") return "auto";
+				if (value == "hint") return "hint";
+				return "manual";
+			},
+			set(value) {
+				if (value === null) this.removeAttribute("popover");
+				else this.setAttribute("popover", value);
+			}
+		},
+		showPopover: {
+			enumerable: true,
+			configurable: true,
+			value(options = {}) {
+				showPopover(this);
+			}
+		},
+		hidePopover: {
+			enumerable: true,
+			configurable: true,
+			value() {
+				hidePopover(this, true, true);
+			}
+		},
+		togglePopover: {
+			enumerable: true,
+			configurable: true,
+			value(options = {}) {
+				if (typeof options === "boolean") options = { force: options };
+				if (visibilityState.get(this) === "showing" && options.force === void 0 || options.force === false) hidePopover(this, true, true);
+				else if (options.force === void 0 || options.force === true) showPopover(this);
+				return visibilityState.get(this) === "showing";
+			}
+		}
+	});
+	const originalAttachShadow = Element.prototype.attachShadow;
+	if (originalAttachShadow) Object.defineProperties(Element.prototype, { attachShadow: {
+		enumerable: true,
+		configurable: true,
+		writable: true,
+		value(options) {
+			const shadowRoot = originalAttachShadow.call(this, options);
+			injectStyles(shadowRoot);
+			return shadowRoot;
+		}
+	} });
+	const originalAttachInternals = HTMLElement.prototype.attachInternals;
+	if (originalAttachInternals) Object.defineProperties(HTMLElement.prototype, { attachInternals: {
+		enumerable: true,
+		configurable: true,
+		writable: true,
+		value() {
+			const internals = originalAttachInternals.call(this);
+			if (internals.shadowRoot) injectStyles(internals.shadowRoot);
+			return internals;
+		}
+	} });
+	const popoverTargetAssociatedElements = /* @__PURE__ */ new WeakMap();
+	function applyPopoverInvokerElementMixin(ElementClass) {
+		Object.defineProperties(ElementClass.prototype, {
+			popoverTargetElement: {
+				enumerable: true,
+				configurable: true,
+				set(targetElement) {
+					if (targetElement === null) {
+						this.removeAttribute("popovertarget");
+						popoverTargetAssociatedElements.delete(this);
+					} else if (!(targetElement instanceof Element)) throw new TypeError(`popoverTargetElement must be an element or null`);
+					else {
+						this.setAttribute("popovertarget", "");
+						popoverTargetAssociatedElements.set(this, targetElement);
+					}
+				},
+				get() {
+					if (this.localName !== "button" && this.localName !== "input") return null;
+					if (this.localName === "input" && this.type !== "reset" && this.type !== "image" && this.type !== "button") return null;
+					if (this.disabled) return null;
+					if (this.form && this.type === "submit") return null;
+					const targetElement = popoverTargetAssociatedElements.get(this);
+					if (targetElement && targetElement.isConnected) return targetElement;
+					else if (targetElement && !targetElement.isConnected) {
+						popoverTargetAssociatedElements.delete(this);
+						return null;
+					}
+					const root = getRootNode(this);
+					const idref = this.getAttribute("popovertarget");
+					if ((root instanceof Document || root instanceof ShadowRoot2) && idref) return root.getElementById(idref) || null;
+					return null;
+				}
+			},
+			popoverTargetAction: {
+				enumerable: true,
+				configurable: true,
+				get() {
+					const value = (this.getAttribute("popovertargetaction") || "").toLowerCase();
+					if (value === "show" || value === "hide") return value;
+					return "toggle";
+				},
+				set(value) {
+					this.setAttribute("popovertargetaction", value);
+				}
+			}
+		});
+	}
+	applyPopoverInvokerElementMixin(HTMLButtonElement);
+	applyPopoverInvokerElementMixin(HTMLInputElement);
+	const handleInvokerActivation = (event) => {
+		if (event.defaultPrevented) return;
+		const composedPath = event.composedPath();
+		const target = composedPath[0];
+		if (!(target instanceof Element) || (target == null ? void 0 : target.shadowRoot)) return;
+		const root = getRootNode(target);
+		if (!(root instanceof ShadowRoot2 || root instanceof Document)) return;
+		const invoker = composedPath.find((el) => {
+			var _a;
+			return (_a = el.matches) == null ? void 0 : _a.call(el, "[popovertargetaction],[popovertarget]");
+		});
+		if (invoker) {
+			popoverTargetAttributeActivationBehavior(invoker);
+			event.preventDefault();
+			return;
+		}
+	};
+	const onKeydown = (event) => {
+		const key = event.key;
+		const target = event.target;
+		if (!event.defaultPrevented && target && (key === "Escape" || key === "Esc")) hideAllPopoversUntil(target.ownerDocument, true, true);
+	};
+	const addEventListeners = (root) => {
+		root.addEventListener("click", handleInvokerActivation);
+		root.addEventListener("keydown", onKeydown);
+		root.addEventListener("pointerdown", lightDismissOpenPopovers);
+		root.addEventListener("pointerup", lightDismissOpenPopovers);
+	};
+	addEventListeners(document);
+	injectStyles(document);
+}
 //#endregion
 //#region src/popover/popover.ts
+if (isBrowser() && !isSupported()) apply();
 const ATTR_PLACE = "data-placement";
 const ATTR_AUTO = "data-autoplacement";
 const POPOVERS = /* @__PURE__ */ new Map();
@@ -462,11 +1051,12 @@ function handleToggle(event) {
 		source = el.id && root?.querySelector?.(css) || void 0;
 	}
 	if (!source || source === el || oldState && oldState === newState) return;
+	el.style.scrollMarginBottom = `var(--_ds-floating-arrow-size)`;
 	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 arrowSize = parseFloat(getCSSProp(el, "scroll-margin-bottom")) || 0;
 	const shiftProp = placement.match(/left|right/gi) ? "Height" : "Width";
 	const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;
 	if (placement === "none") return;
@@ -474,7 +1064,7 @@ function handleToggle(event) {
 		strategy: "absolute",
 		placement,
 		middleware: [
-			offset(arrowSize || 0),
+			offset(arrowSize),
 			shift({
 				padding,
 				limiter: limitShift({ offset: { mainAxis: shiftLimit } })
@@ -485,7 +1075,7 @@ function handleToggle(event) {
 				crossAxis: false
 			})] : [],
 			...overscroll ? [size({ apply({ availableHeight }) {
-				if (overscroll === "fit") el.style.width = `${source.clientWidth}px`;
+				if (overscroll === "fit") el.style.width = `${source.offsetWidth}px`;
 				el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
 			} })] : []
 		]
@@ -725,6 +1315,7 @@ var DSErrorSummaryElement = class extends DSElement {
 	_unmutate;
 	connectedCallback() {
 		on(this, "animationend", this, QUICK_EVENT);
+		attr(this, "role", "group");
 		attr(this, "tabindex", "-1");
 		this._unmutate = onMutation(this, render$2, {
 			childList: true,
@@ -742,8 +1333,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 heading = self.querySelector("h2,h3,h4,h5,h6");
-	if (heading) attr(self, "aria-labelledby", useId(heading));
+	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
@@ -954,11 +1548,13 @@ var DSSuggestionElement = class extends UHTMLComboboxElement {
 		off(this, "toggle", polyfillToggleSource, QUICK_EVENT);
 	}
 };
-const render = ({ control, list }) => {
+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 (list) attr(list, "popover", "manual");
-	if (list) attr(list, "data-is-floating", "true");
+	if (datalist) attr(datalist, "popover", "manual");
+	if (datalist) attr(datalist, "data-is-floating", "true");
 };
 const polyfillToggleSource = (event) => {
 	const self = event.currentTarget;
@@ -977,9 +1573,6 @@ customElements.define("ds-tablist", DSTabListElement);
 customElements.define("ds-tab", DSTabElement);
 customElements.define("ds-tabpanel", DSTabPanelElement);
 //#endregion
-//#region src/index.ts
-if (isBrowser() && !isSupported()) apply();
-//#endregion
 export { DSBreadcrumbsElement, DSErrorSummaryElement, DSFieldElement, DSPaginationElement, DSSuggestionElement, DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement, pagination, setTooltipElement };
 
 //# sourceMappingURL=index.js.map