@digdir/designsystemet-web 0.0.0-chore-remove-cli-tsx-20260701060359

package/dist/index.js

@@ -0,0 +1,1584 @@
+import "@u-elements/u-details/polyfill";
+import { autoUpdate, computePosition, flip, limitShift, offset, shift, size } from "@floating-ui/dom";
+import { UHTMLComboboxElement } from "@u-elements/u-combobox";
+import * as UTabs from "@u-elements/u-tabs";
+export * from "@u-elements/u-datalist";
+//#region 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$1() {
+	return typeof HTMLButtonElement !== "undefined" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
+}
+function apply$1() {
+	document.addEventListener("invoke", (e) => {
+		if (e.type == "invoke" && e.isTrusted) {
+			e.stopImmediatePropagation();
+			e.preventDefault();
+		}
+	}, true);
+	document.addEventListener("command", (e) => {
+		if (e.type == "command" && e.isTrusted) {
+			e.stopImmediatePropagation();
+			e.preventDefault();
+		}
+	}, true);
+	function enumerate(obj, key, enumerable = true) {
+		Object.defineProperty(obj, key, {
+			...Object.getOwnPropertyDescriptor(obj, key),
+			enumerable
+		});
+	}
+	function getRootNode(node) {
+		if (node && typeof node.getRootNode === "function") return node.getRootNode();
+		if (node && node.parentNode) return getRootNode(node.parentNode);
+		return node;
+	}
+	const commandEventSourceElements = /* @__PURE__ */ new WeakMap();
+	const commandEventActions = /* @__PURE__ */ new WeakMap();
+	class CommandEvent extends Event {
+		constructor(type, invokeEventInit = {}) {
+			super(type, invokeEventInit);
+			const { source, command } = invokeEventInit;
+			if (source != null && !(source instanceof Element)) throw new TypeError(`source must be an element`);
+			commandEventSourceElements.set(this, source || null);
+			commandEventActions.set(this, command !== void 0 ? String(command) : "");
+		}
+		get [Symbol.toStringTag]() {
+			return "CommandEvent";
+		}
+		get source() {
+			if (!commandEventSourceElements.has(this)) throw new TypeError("illegal invocation");
+			const source = commandEventSourceElements.get(this);
+			if (!(source instanceof Element)) return null;
+			const invokerRoot = getRootNode(source);
+			if (invokerRoot !== getRootNode(this.target || document)) return invokerRoot.host;
+			return source;
+		}
+		get command() {
+			if (!commandEventActions.has(this)) throw new TypeError("illegal invocation");
+			return commandEventActions.get(this);
+		}
+	}
+	enumerate(CommandEvent.prototype, "source");
+	enumerate(CommandEvent.prototype, "command");
+	const invokerAssociatedElements = /* @__PURE__ */ new WeakMap();
+	function applyInvokerMixin(ElementClass) {
+		Object.defineProperties(ElementClass.prototype, {
+			commandForElement: {
+				enumerable: true,
+				configurable: true,
+				set(targetElement) {
+					if (targetElement === null) {
+						this.removeAttribute("commandfor");
+						invokerAssociatedElements.delete(this);
+					} else if (!(targetElement instanceof Element)) throw new TypeError(`commandForElement must be an element or null`);
+					else {
+						this.setAttribute("commandfor", "");
+						const targetRootNode = getRootNode(targetElement);
+						if (getRootNode(this) === targetRootNode || targetRootNode === this.ownerDocument) invokerAssociatedElements.set(this, targetElement);
+						else invokerAssociatedElements.delete(this);
+					}
+				},
+				get() {
+					if (this.localName !== "button") return null;
+					if (this.disabled) return null;
+					if (this.form && this.getAttribute("type") !== "button") {
+						console.warn("Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work");
+						return null;
+					}
+					const targetElement = invokerAssociatedElements.get(this);
+					if (targetElement) if (targetElement.isConnected) return targetElement;
+					else {
+						invokerAssociatedElements.delete(this);
+						return null;
+					}
+					const root = getRootNode(this);
+					const idref = this.getAttribute("commandfor");
+					if ((root instanceof Document || root instanceof ShadowRoot) && idref) return root.getElementById(idref) || null;
+					return null;
+				}
+			},
+			command: {
+				enumerable: true,
+				configurable: true,
+				get() {
+					const value = this.getAttribute("command") || "";
+					if (value.startsWith("--")) return value;
+					const valueLower = value.toLowerCase();
+					switch (valueLower) {
+						case "show-modal":
+						case "request-close":
+						case "close":
+						case "toggle-popover":
+						case "hide-popover":
+						case "show-popover": return valueLower;
+					}
+					return "";
+				},
+				set(value) {
+					this.setAttribute("command", value);
+				}
+			}
+		});
+	}
+	const onHandlers = /* @__PURE__ */ new WeakMap();
+	Object.defineProperties(HTMLElement.prototype, { oncommand: {
+		enumerable: true,
+		configurable: true,
+		get() {
+			oncommandObserver.takeRecords();
+			return onHandlers.get(this) || null;
+		},
+		set(handler) {
+			const existing = onHandlers.get(this) || null;
+			if (existing) this.removeEventListener("command", existing);
+			onHandlers.set(this, typeof handler === "object" || typeof handler === "function" ? handler : null);
+			if (typeof handler == "function") this.addEventListener("command", handler);
+		}
+	} });
+	function applyOnCommandHandler(els) {
+		for (const el of els) el.oncommand = new Function("event", el.getAttribute("oncommand"));
+	}
+	const oncommandObserver = new MutationObserver((records) => {
+		for (const record of records) {
+			const { target } = record;
+			if (record.type === "childList") applyOnCommandHandler(target.querySelectorAll("[oncommand]"));
+			else applyOnCommandHandler([target]);
+		}
+	});
+	oncommandObserver.observe(document, {
+		subtree: true,
+		childList: true,
+		attributeFilter: ["oncommand"]
+	});
+	applyOnCommandHandler(document.querySelectorAll("[oncommand]"));
+	const processedEvents = /* @__PURE__ */ new WeakSet();
+	function handleInvokerActivation(event) {
+		if (processedEvents.has(event)) return;
+		processedEvents.add(event);
+		if (event.defaultPrevented) return;
+		if (event.type !== "click") return;
+		const source = event.composedPath().find((el) => el.matches?.("button[commandfor], button[command]"));
+		if (!source) return;
+		if (source.form && source.getAttribute("type") !== "button") {
+			event.preventDefault();
+			throw new Error("Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work. In order for it to act as a Submit button, it must not have command or commandfor attributes");
+		}
+		if (source.hasAttribute("command") !== source.hasAttribute("commandfor")) {
+			const attr = source.hasAttribute("command") ? "command" : "commandfor";
+			const missing = source.hasAttribute("command") ? "commandfor" : "command";
+			throw new Error(`Element with ${attr} attribute must also have a ${missing} attribute to function.`);
+		}
+		if (source.command !== "show-popover" && source.command !== "hide-popover" && source.command !== "toggle-popover" && source.command !== "show-modal" && source.command !== "request-close" && source.command !== "close" && !source.command.startsWith("--")) {
+			console.warn(`"${source.command}" is not a valid command value. Custom commands must begin with --`);
+			return;
+		}
+		const invokee = source.commandForElement;
+		if (!invokee) return;
+		const invokeEvent = new CommandEvent("command", {
+			command: source.command,
+			source,
+			cancelable: true
+		});
+		invokee.dispatchEvent(invokeEvent);
+		if (invokeEvent.defaultPrevented) return;
+		const command = invokeEvent.command.toLowerCase();
+		if (invokee.popover) {
+			const canShow = !invokee.matches(":popover-open");
+			const shouldShow = canShow && (command === "toggle-popover" || command === "show-popover");
+			const shouldHide = !canShow && command === "hide-popover";
+			if (shouldShow) invokee.showPopover({ source });
+			else if (shouldHide) invokee.hidePopover();
+		} else if (invokee.localName === "dialog") {
+			const canShow = !invokee.hasAttribute("open");
+			if (canShow && command == "show-modal") invokee.showModal();
+			else if (!canShow && command == "close") invokee.close(source.value ? source.value : void 0);
+			else if (!canShow && command == "request-close") {
+				if (!HTMLDialogElement.prototype.requestClose) HTMLDialogElement.prototype.requestClose = function() {
+					const cancelEvent = new Event("cancel", { cancelable: true });
+					this.dispatchEvent(cancelEvent);
+					if (!cancelEvent.defaultPrevented) this.close();
+				};
+				invokee.requestClose(source.value ? source.value : void 0);
+			}
+		}
+	}
+	function setupInvokeListeners(target) {
+		target.addEventListener("click", handleInvokerActivation, true);
+	}
+	function observeShadowRoots(ElementClass, callback) {
+		const attachShadow = ElementClass.prototype.attachShadow;
+		ElementClass.prototype.attachShadow = function(init) {
+			const shadow = attachShadow.call(this, init);
+			callback(shadow);
+			return shadow;
+		};
+		const attachInternals = ElementClass.prototype.attachInternals;
+		ElementClass.prototype.attachInternals = function() {
+			const internals = attachInternals.call(this);
+			if (internals.shadowRoot) callback(internals.shadowRoot);
+			return internals;
+		};
+	}
+	applyInvokerMixin(HTMLButtonElement);
+	observeShadowRoots(HTMLElement, (shadow) => {
+		setupInvokeListeners(shadow);
+		oncommandObserver.observe(shadow, { attributeFilter: ["oncommand"] });
+		applyOnCommandHandler(shadow.querySelectorAll("[oncommand]"));
+	});
+	setupInvokeListeners(document);
+	Object.assign(globalThis, { CommandEvent });
+}
+//#endregion
+//#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
+var ToggleEvent = class extends Event {
+	oldState;
+	newState;
+	constructor(type, { oldState = "", newState = "", ...init } = {}) {
+		super(type, init);
+		this.oldState = String(oldState || "");
+		this.newState = String(newState || "");
+	}
+};
+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);
+	}
+}
+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();
+function handleToggle(event) {
+	let { newState, oldState, target: el, source = event.detail } = event;
+	const float = el instanceof HTMLElement && attr(el, "popover") !== null && getCSSProp(el, "--_ds-floating");
+	if (!float) return;
+	if (newState === "closed") return POPOVERS.get(el)?.();
+	if (!source) {
+		const root = el.getRootNode();
+		const css = `[popovertarget="${el.id}"],[commandfor="${el.id}"]`;
+		source = el.id && root?.querySelector?.(css) || void 0;
+	}
+	if (!source || source === el || oldState && oldState === newState) return;
+	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(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;
+	const options = {
+		strategy: "absolute",
+		placement,
+		middleware: [
+			offset(arrowSize),
+			shift({
+				padding,
+				limiter: limitShift({ offset: { mainAxis: shiftLimit } })
+			}),
+			arrowPseudo(),
+			...auto !== "false" ? [flip({
+				padding,
+				crossAxis: false
+			})] : [],
+			...overscroll ? [size({ apply({ availableHeight }) {
+				if (overscroll === "fit") el.style.width = `${source.offsetWidth}px`;
+				el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
+			} })] : []
+		]
+	};
+	const unfloat = autoUpdate(source, el, async () => {
+		if (!source?.isConnected) return POPOVERS.get(el)?.();
+		const { x, y } = await computePosition(source, el, options);
+		el.style.translate = `${x}px ${y}px`;
+	});
+	POPOVERS.set(el, () => POPOVERS.delete(el) && unfloat());
+}
+let IS_SCROLL;
+const handleScrollbar = ({ type }) => {
+	if (type === "mousedown") IS_SCROLL = false;
+	if (type === "scroll" && IS_SCROLL === false) IS_SCROLL = true;
+	if (type === "mouseup" && IS_SCROLL) for (const [popover] of POPOVERS) popover.showPopover();
+};
+onHotReload("popover", () => [on(document, "mousedown scroll mouseup", handleScrollbar, true), on(document, "toggle ds-toggle-source", handleToggle, QUICK_EVENT)]);
+const arrowPseudo = () => ({
+	name: "arrowPseudo",
+	fn(data) {
+		const target = data.elements.floating;
+		const source = data.rects.reference;
+		const x = `${Math.round(source.width / 2 + source.x - data.x)}px`;
+		const y = `${Math.round(source.height / 2 + source.y - data.y)}px`;
+		target.style.setProperty("--_ds-floating-arrow-x", x);
+		target.style.setProperty("--_ds-floating-arrow-y", y);
+		attr(target, "data-floating", data.placement);
+		return data;
+	}
+});
+//#endregion
+//#region src/readonly/readonly.ts
+const isReadOnly = (el) => (el instanceof HTMLSelectElement || el instanceof HTMLInputElement) && (el.hasAttribute("readonly") || attr(el, "aria-readonly") === "true");
+const handleKeyDown = (e) => {
+	if (e.key !== "Tab" && isReadOnly(e.target)) {
+		const isArrow = e.key?.startsWith("Arrow");
+		const isModifier = e.altKey || e.ctrlKey || e.metaKey;
+		if (isArrow || !isModifier) e.preventDefault();
+		if (isArrow && attr(e.target, "type") === "radio") {
+			const all = document.querySelectorAll(`input[name="${e.target.name}"]`);
+			const move = e.key?.match(/Arrow(Right|Down)/) ? 1 : -1;
+			all[(all.length + [...all].indexOf(e.target) + move) % all.length]?.focus();
+		}
+	}
+};
+const handleClick = (e) => {
+	const input = e.target?.closest?.("label")?.control || e.target;
+	if (isReadOnly(input)) {
+		e.preventDefault();
+		input.focus();
+	}
+};
+const handleMouseDown = (e) => {
+	if (e.target instanceof HTMLSelectElement && isReadOnly(e.target)) e.preventDefault();
+};
+onHotReload("readonly", () => [
+	on(document, "keydown", handleKeyDown),
+	on(document, "click", handleClick),
+	on(document, "mousedown", handleMouseDown)
+]);
+//#endregion
+//#region src/toggle-group/toggle-group.ts
+const ARIA_LABELLEDBY = "aria-labelledby";
+const ARIA_LABEL$1 = "aria-label";
+const ATTR_TOGGLEGROUP = "data-toggle-group";
+const SELECTOR_TOGGLEGROUP = `[${ATTR_TOGGLEGROUP}]`;
+const handleAriaAttributes$1 = () => {
+	for (const group of document.querySelectorAll(SELECTOR_TOGGLEGROUP)) attr(group, "aria-label", attrOrCSS(group, ATTR_TOGGLEGROUP));
+};
+const handleKeydown = (event) => {
+	const { key, target: el } = event;
+	const group = el instanceof HTMLInputElement && el.closest(SELECTOR_TOGGLEGROUP);
+	if (!group) return;
+	if (!attr(group, ARIA_LABEL$1) && !attr(group, ARIA_LABELLEDBY)) attr(group, ARIA_LABEL$1, attrOrCSS(group, ATTR_TOGGLEGROUP));
+	if (key === "Enter") el.click();
+	if (key?.startsWith("Arrow")) {
+		event.preventDefault?.();
+		const inputs = [...group.getElementsByTagName("input")];
+		const index = inputs.indexOf(el);
+		const move = key.match(/Arrow(Right|Down)/) ? 1 : -1;
+		let nextIndex = index;
+		for (let i = 0; i < inputs.length; i++) {
+			nextIndex = (inputs.length + nextIndex + move) % inputs.length;
+			if (!inputs[nextIndex]?.disabled) {
+				inputs[nextIndex]?.focus();
+				break;
+			}
+		}
+	}
+};
+onHotReload("toggle-group", () => [on(document, "keydown", handleKeydown), onMutation(document, handleAriaAttributes$1, {
+	attributeFilter: [ATTR_TOGGLEGROUP],
+	attributes: true,
+	childList: true,
+	subtree: true
+})]);
+//#endregion
+//#region src/tooltip/tooltip.ts
+let TIP;
+let SOURCE;
+let IS_HOVERING = false;
+let HOVER_TIMER = 0;
+let SKIP_TIMER = 0;
+const IS_IOS = isBrowser() && /iPad|iPhone|iPod/.test(navigator.userAgent);
+const ATTR_TOOLTIP = "data-tooltip";
+const ATTR_COLOR = "data-color";
+const ARIA_LABEL = "aria-label";
+const ARIA_DESC = "aria-description";
+const SELECTOR_COLOR = `[${ATTR_COLOR}]`;
+const SELECTOR_TOOLTIP = `[${ATTR_TOOLTIP}]`;
+const ATTR_SCHEME = "data-color-scheme";
+const SELECTOR_SCHEME = `[${ATTR_SCHEME}]`;
+const SELECTOR_INTERACTIVE = "a,button,input,label,select,textarea,[tabindex]";
+const DELAY_HOVER = 300;
+const DELAY_SKIP = 300;
+/**
+* setTooltipElement
+* @description Allows setting a custom tooltip element. It does not need to, and should not, be injected to document.body, as we inject on hover to ensure React hydration works as expected.
+* @param el The HTMLElement to use as tooltip
+*/
+const setTooltipElement = (el) => {
+	if (el && !(el instanceof HTMLElement)) warn("setTooltipElement expects an HTMLElement, got: ", el);
+	clearTimeout(SKIP_TIMER);
+	clearTimeout(HOVER_TIMER);
+	SOURCE = void 0;
+	IS_HOVERING = false;
+	TIP = el || void 0;
+};
+const handleAriaAttributes = () => {
+	for (const el of document.querySelectorAll(SELECTOR_TOOLTIP)) {
+		const text = attrOrCSS(el, ATTR_TOOLTIP);
+		if (!text) return;
+		if (text !== (el.getAttribute(ARIA_LABEL) || el.getAttribute(ARIA_DESC))) {
+			const hasText = attr(el, "role") !== "img" && el.textContent?.trim();
+			attr(el, ATTR_TOOLTIP, text);
+			attr(el, ARIA_LABEL, hasText ? null : text);
+			attr(el, ARIA_DESC, hasText ? text : null);
+			if (!el.matches(SELECTOR_INTERACTIVE)) warn("Missing tabindex=\"0\" attribute on: ", el);
+		}
+		const isCurrent = el === SOURCE && TIP?.offsetHeight && TIP?.offsetWidth;
+		const isChanged = isCurrent && text && TIP?.textContent !== text;
+		if (isCurrent && isChanged) {
+			if (TIP) TIP.textContent = text;
+			if (document.activeElement === el) announce(text);
+		}
+	}
+};
+const handleInterest = (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;
+	}
+	if (source === SOURCE) return;
+	if (!source) return hideTooltip();
+	if (!TIP) TIP = tag("div", { class: "ds-tooltip" });
+	if (!TIP.isConnected) document.body.appendChild(TIP);
+	const color = source.closest(SELECTOR_COLOR);
+	const scheme = source.closest(SELECTOR_SCHEME);
+	const isReset = color !== scheme && color?.contains(scheme);
+	clearTimeout(SKIP_TIMER);
+	attr(TIP, "popover", "manual");
+	attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null);
+	attr(TIP, ATTR_COLOR, isReset && color?.getAttribute(ATTR_COLOR) || null);
+	TIP.textContent = attr(source, ATTR_TOOLTIP);
+	TIP.showPopover();
+	TIP.dispatchEvent(new CustomEvent("ds-toggle-source", { detail: source }));
+	IS_HOVERING = true;
+	SOURCE = source;
+};
+const hideTooltip = () => TIP?.isConnected && TIP.popover && TIP.hidePopover();
+const handleClose = (event) => {
+	if (event?.type === "keydown") return event?.key === "Escape" && hideTooltip();
+	if (!event) IS_HOVERING = false;
+	else if (event.target === TIP && event.newState === "closed") {
+		SOURCE = void 0;
+		SKIP_TIMER = setTimeout(handleClose, DELAY_SKIP);
+	}
+};
+onHotReload("tooltip", () => [
+	on(document, "blur focus mouseover", handleInterest, QUICK_EVENT),
+	on(document, "toggle keydown", handleClose, QUICK_EVENT),
+	onMutation(document, handleAriaAttributes, {
+		attributeFilter: [ATTR_TOOLTIP],
+		attributes: true,
+		childList: true,
+		subtree: true
+	})
+]);
+//#endregion
+//#region src/breadcrumbs/breadcrumbs.ts
+const ATTR_LABEL$1 = "aria-label";
+var DSBreadcrumbsElement = class extends DSElement {
+	_items;
+	_label = null;
+	_unresize;
+	_unmutate;
+	static get observedAttributes() {
+		return [ATTR_LABEL$1];
+	}
+	connectedCallback() {
+		const resize = debounce(() => render$3(this), 100);
+		this._label = attrOrCSS(this, ATTR_LABEL$1);
+		this._items = this.getElementsByTagName("a");
+		this._unresize = on(window, "resize", resize);
+		this._unmutate = onMutation(this, render$3, {
+			childList: true,
+			subtree: true
+		});
+	}
+	attributeChangedCallback(_name, _prev, next) {
+		if (!this._unmutate || !next) return;
+		this._label = next;
+		render$3(this);
+	}
+	disconnectedCallback() {
+		this._unresize?.();
+		this._unmutate?.();
+		this._unresize = this._unmutate = this._items = void 0;
+	}
+};
+const render$3 = (self) => {
+	const lastItem = self._items?.[self._items.length - 1];
+	const lastItemInList = lastItem?.parentElement === self ? null : lastItem;
+	const isListHidden = !lastItemInList?.offsetHeight;
+	attr(self, "role", isListHidden ? null : "navigation");
+	attr(self, ATTR_LABEL$1, isListHidden ? null : self._label);
+	for (const item of self._items || []) attr(item, "aria-current", item === lastItemInList ? "page" : null);
+};
+customElements.define("ds-breadcrumbs", DSBreadcrumbsElement);
+//#endregion
+//#region src/error-summary/error-summary.ts
+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,
+			subtree: true
+		});
+		this.focus();
+	}
+	handleEvent({ target }) {
+		if (target === this) this.focus();
+	}
+	disconnectedCallback() {
+		off(this, "animationend", this, QUICK_EVENT);
+		this._unmutate?.();
+		this._unmutate = void 0;
+	}
+};
+const render$2 = (self) => {
+	const 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.");
+};
+customElements.define("ds-error-summary", DSErrorSummaryElement);
+//#endregion
+//#region src/field/field.ts
+const ATTR_INVALID = "aria-invalid";
+const ATTR_DESCRIBEDBY = "aria-describedby";
+const ATTR_INDETERMINATE = "data-indeterminate";
+const COUNTER_DEBOUNCE = isWindows() ? 800 : 200;
+const COUNTS = /* @__PURE__ */ new WeakMap();
+const FIELDS = /* @__PURE__ */ new Map();
+const VALIDATIONS = /* @__PURE__ */ new WeakSet();
+const WARNING_MULTIPLE_INPUTS = `Fields should only have one input element. Use <fieldset> to group multiple fields:`;
+const handleFieldMutations = (_doc, records = []) => {
+	for (const { target } of records) {
+		const isFieldset = target instanceof HTMLFieldSetElement;
+		for (const [field] of FIELDS) if (isFieldset ? target.contains(field) : field.contains(target)) handleFieldMutation(field);
+	}
+};
+const handleFieldMutation = (field) => {
+	const labels = [];
+	const nextDescs = [];
+	const prevDescs = FIELDS.get(field) || [];
+	let input;
+	let counter;
+	let hasValidation = false;
+	let invalid = false;
+	for (const el of field.getElementsByTagName("*")) {
+		if (el instanceof HTMLLabelElement) labels.push(el);
+		if (el.hidden) continue;
+		if (isInputLike(el)) if (input) warn(WARNING_MULTIPLE_INPUTS, field);
+		else input = el;
+		else {
+			const type = el.getAttribute("data-field");
+			if (type === "counter") counter = el;
+			if (type === "validation") {
+				nextDescs.unshift(useId(el));
+				hasValidation = true;
+				invalid = invalid || isInvalid(el);
+			} else if (type) nextDescs.push(useId(el));
+		}
+	}
+	if (!input) return;
+	if (counter) COUNTS.set(input, counter);
+	for (const label of labels) attr(label, "for", useId(input));
+	const fieldsetValidation = field.closest("fieldset")?.querySelector(":scope > [data-field=\"validation\"]");
+	if (fieldsetValidation && !fieldsetValidation?.hidden) {
+		hasValidation = true;
+		invalid = invalid || isInvalid(fieldsetValidation);
+		nextDescs.unshift(useId(fieldsetValidation));
+	}
+	const indeterminate = attr(input, ATTR_INDETERMINATE);
+	if (indeterminate) input.indeterminate = indeterminate === "true";
+	if (input.type === "radio" || input.type === "checkbox") attr(field, "data-clickdelegatefor", useId(input));
+	const keep = (attr(input, ATTR_DESCRIBEDBY)?.trim().split(/\s+/))?.filter((id) => !prevDescs.includes(id)) || [];
+	attr(input, ATTR_DESCRIBEDBY, [...nextDescs, ...keep].join(" ") || null);
+	FIELDS.set(field, nextDescs);
+	const hadValidation = VALIDATIONS.has(input);
+	if (hasValidation && !hadValidation && !input.hasAttribute(ATTR_INVALID)) {
+		attr(input, ATTR_INVALID, "true");
+		VALIDATIONS.add(input);
+	} else if (!hasValidation && hadValidation) {
+		attr(input, ATTR_INVALID, null);
+		VALIDATIONS.delete(input);
+	}
+	handleFieldInput(input);
+};
+const TEXTS = {
+	over: "%d tegn for mye",
+	under: "%d tegn igjen"
+};
+const handleFieldInput = (e) => {
+	const input = e.target || e;
+	const counter = COUNTS.get(input);
+	if (counter?.isConnected) {
+		const count = (Number(attr(counter, "data-limit")) || 0) - input.value.length;
+		const state = count < 0 ? "over" : "under";
+		const label = (attrOrCSS(counter, `data-${state}`) || TEXTS[state])?.replace("%d", `${Math.abs(count)}`);
+		attr(counter, "data-label", label);
+		attr(counter, "data-state", state);
+		attr(counter, "data-color", count < 0 ? "danger" : null);
+		if (e.type === "input" && label) debouncedCounterLiveRegion(input, label);
+	}
+	if (input instanceof HTMLTextAreaElement) {
+		input.style.setProperty("--_ds-field-sizing", "auto");
+		input.style.setProperty("--_ds-field-sizing", `${input.scrollHeight}px`);
+	}
+};
+const debouncedCounterLiveRegion = debounce((input, text) => {
+	if (document.activeElement === input) announce(text);
+}, COUNTER_DEBOUNCE);
+const isInvalid = (el) => el.getAttribute("data-color") !== "success";
+const isInputLike = (el) => el instanceof HTMLElement && "validity" in el && !(el instanceof HTMLButtonElement) && el.type !== "hidden";
+var DSFieldElement = class extends DSElement {
+	connectedCallback() {
+		FIELDS.set(this, []);
+		handleFieldMutation(this);
+	}
+	disconnectedCallback() {
+		FIELDS.delete(this);
+	}
+};
+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";
+const pagination = ({ current = 1, total = 10, show = 7 }) => ({
+	prev: current > 1 ? current - 1 : 0,
+	next: current < total ? current + 1 : 0,
+	pages: getSteps(current, total, show).map((page, index) => ({
+		current: page === current && "page",
+		key: `key-${page}-${index}`,
+		page
+	}))
+});
+var DSPaginationElement = class extends DSElement {
+	_unmutate;
+	_render;
+	static get observedAttributes() {
+		return [
+			ATTR_LABEL,
+			ATTR_CURRENT,
+			ATTR_TOTAL,
+			ATTR_HREF
+		];
+	}
+	connectedCallback() {
+		const total = attr(this, ATTR_TOTAL);
+		const current = attr(this, ATTR_CURRENT);
+		if (current && !total) warn(`Missing ${ATTR_TOTAL} attribute on:`, this);
+		if (total && !current) warn(`Missing ${ATTR_CURRENT} attribute on:`, this);
+		attr(this, ATTR_LABEL, attrOrCSS(this, ATTR_LABEL));
+		attr(this, "role", "navigation");
+		this._unmutate = onMutation(this, render$1, {
+			childList: true,
+			subtree: true
+		});
+	}
+	attributeChangedCallback() {
+		if (this._unmutate) render$1(this);
+	}
+	disconnectedCallback() {
+		this._unmutate?.();
+		this._unmutate = this._render = void 0;
+	}
+};
+const render$1 = (self) => {
+	const current = Number(attr(self, ATTR_CURRENT));
+	const total = Number(attr(self, ATTR_TOTAL));
+	if (current && total) {
+		const items = self.querySelectorAll("button,a");
+		const show = items.length - 2;
+		const href = attr(self, ATTR_HREF);
+		const { next, prev, pages } = pagination({
+			current,
+			total,
+			show
+		});
+		items.forEach((item, i) => {
+			const page = i ? items[i + 1] ? pages[i - 1]?.page : next : prev;
+			attr(item, "aria-current", pages[i - 1]?.current ? "true" : null);
+			attr(item, "aria-label", `${page ?? "hidden"}`);
+			attr(item, "role", page ? null : "none");
+			attr(item, "tabindex", page ? null : "-1");
+			if (item instanceof HTMLButtonElement) attr(item, "value", `${page}`);
+			if (href && item instanceof HTMLAnchorElement) attr(item, "href", href.replace("%d", `${page}`));
+		});
+	}
+};
+const getSteps = (now, max, show = Number.POSITIVE_INFINITY) => {
+	const offset = (show - 1) / 2;
+	const start = Math.max(Math.min(now - Math.floor(offset), max - show + 1), 1);
+	const end = Math.min(Math.max(now + Math.ceil(offset), show), max);
+	const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
+	if (show > 4 && start > 1) pages.splice(0, 2, 1, 0);
+	if (show > 3 && end < max) pages.splice(-2, 2, 0, max);
+	return pages;
+};
+customElements.define("ds-pagination", DSPaginationElement);
+//#endregion
+//#region src/suggestion/suggestion.ts
+var DSSuggestionElement = class extends UHTMLComboboxElement {
+	_unmutate;
+	connectedCallback() {
+		super.connectedCallback();
+		this._unmutate = onMutation(this, render, { childList: true });
+		on(this, "toggle", polyfillToggleSource, QUICK_EVENT);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._unmutate?.();
+		this._unmutate = void 0;
+		off(this, "toggle", polyfillToggleSource, QUICK_EVENT);
+	}
+};
+const render = (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");
+};
+const polyfillToggleSource = (event) => {
+	const self = event.currentTarget;
+	const detail = event.newState === "open" && self.control;
+	if (detail) self.list?.dispatchEvent(new CustomEvent("ds-toggle-source", { detail }));
+};
+customElements.define("ds-suggestion", DSSuggestionElement);
+//#endregion
+//#region src/tabs/tabs.ts
+var DSTabsElement = class extends UTabs.UHTMLTabsElement {};
+var DSTabListElement = class extends UTabs.UHTMLTabListElement {};
+var DSTabElement = class extends UTabs.UHTMLTabElement {};
+var DSTabPanelElement = class extends UTabs.UHTMLTabPanelElement {};
+customElements.define("ds-tabs", DSTabsElement);
+customElements.define("ds-tablist", DSTabListElement);
+customElements.define("ds-tab", DSTabElement);
+customElements.define("ds-tabpanel", DSTabPanelElement);
+//#endregion
+export { DSBreadcrumbsElement, DSErrorSummaryElement, DSFieldElement, DSPaginationElement, DSSuggestionElement, DSTabElement, DSTabListElement, DSTabPanelElement, DSTabsElement, pagination, setTooltipElement };
+
+//# sourceMappingURL=index.js.map