@digdir/designsystemet-web 0.0.0-deps-tsdown-20260421103939

package/dist/index.js

@@ -0,0 +1,984 @@
+import "@u-elements/u-details/polyfill";
+import { autoUpdate, computePosition, flip, limitShift, offset, shift, size } from "@floating-ui/dom";
+import { UHTMLComboboxElement } from "@u-elements/u-combobox";
+import * as UTabs from "@u-elements/u-tabs";
+export * from "@u-elements/u-datalist";
+//#region ../../node_modules/.pnpm/invokers-polyfill@1.0.2_patch_hash=d5677be15320f04cdc552d82cb4a79242bd1cf8b26bcbb0a13e1153e7bed3b5a/node_modules/invokers-polyfill/invoker.js
+function isSupported() {
+	return typeof HTMLButtonElement !== "undefined" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
+}
+function apply() {
+	document.addEventListener("invoke", (e) => {
+		if (e.type == "invoke" && e.isTrusted) {
+			e.stopImmediatePropagation();
+			e.preventDefault();
+		}
+	}, true);
+	document.addEventListener("command", (e) => {
+		if (e.type == "command" && e.isTrusted) {
+			e.stopImmediatePropagation();
+			e.preventDefault();
+		}
+	}, true);
+	function enumerate(obj, key, enumerable = true) {
+		Object.defineProperty(obj, key, {
+			...Object.getOwnPropertyDescriptor(obj, key),
+			enumerable
+		});
+	}
+	function getRootNode(node) {
+		if (node && typeof node.getRootNode === "function") return node.getRootNode();
+		if (node && node.parentNode) return getRootNode(node.parentNode);
+		return node;
+	}
+	const commandEventSourceElements = /* @__PURE__ */ new WeakMap();
+	const commandEventActions = /* @__PURE__ */ new WeakMap();
+	class CommandEvent extends Event {
+		constructor(type, invokeEventInit = {}) {
+			super(type, invokeEventInit);
+			const { source, command } = invokeEventInit;
+			if (source != null && !(source instanceof Element)) throw new TypeError(`source must be an element`);
+			commandEventSourceElements.set(this, source || null);
+			commandEventActions.set(this, command !== void 0 ? String(command) : "");
+		}
+		get [Symbol.toStringTag]() {
+			return "CommandEvent";
+		}
+		get source() {
+			if (!commandEventSourceElements.has(this)) throw new TypeError("illegal invocation");
+			const source = commandEventSourceElements.get(this);
+			if (!(source instanceof Element)) return null;
+			const invokerRoot = getRootNode(source);
+			if (invokerRoot !== getRootNode(this.target || document)) return invokerRoot.host;
+			return source;
+		}
+		get command() {
+			if (!commandEventActions.has(this)) throw new TypeError("illegal invocation");
+			return commandEventActions.get(this);
+		}
+	}
+	enumerate(CommandEvent.prototype, "source");
+	enumerate(CommandEvent.prototype, "command");
+	const invokerAssociatedElements = /* @__PURE__ */ new WeakMap();
+	function applyInvokerMixin(ElementClass) {
+		Object.defineProperties(ElementClass.prototype, {
+			commandForElement: {
+				enumerable: true,
+				configurable: true,
+				set(targetElement) {
+					if (targetElement === null) {
+						this.removeAttribute("commandfor");
+						invokerAssociatedElements.delete(this);
+					} else if (!(targetElement instanceof Element)) throw new TypeError(`commandForElement must be an element or null`);
+					else {
+						this.setAttribute("commandfor", "");
+						const targetRootNode = getRootNode(targetElement);
+						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/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 src/popover/popover.ts
+const ATTR_PLACE = "data-placement";
+const ATTR_AUTO = "data-autoplacement";
+const POPOVERS = /* @__PURE__ */ new Map();
+function handleToggle(event) {
+	let { newState, oldState, target: el, source = event.detail } = event;
+	const float = el instanceof HTMLElement && attr(el, "popover") !== null && getCSSProp(el, "--_ds-floating");
+	if (!float) return;
+	if (newState === "closed") return POPOVERS.get(el)?.();
+	if (!source) {
+		const root = el.getRootNode();
+		const css = `[popovertarget="${el.id}"],[commandfor="${el.id}"]`;
+		source = el.id && root?.querySelector?.(css) || void 0;
+	}
+	if (!source || source === el || oldState && oldState === newState) return;
+	const padding = 10;
+	const overscroll = getCSSProp(el, "--_ds-floating-overscroll");
+	const placement = attr(el, ATTR_PLACE) || attr(source, ATTR_PLACE) || float;
+	const auto = attr(el, ATTR_AUTO) || attr(source, ATTR_AUTO);
+	const arrowSize = parseFloat(getComputedStyle(el, "::before").height) || 0;
+	const shiftProp = placement.match(/left|right/gi) ? "Height" : "Width";
+	const shiftLimit = source[`offset${shiftProp}`] / 2 + arrowSize;
+	if (placement === "none") return;
+	const options = {
+		strategy: "absolute",
+		placement,
+		middleware: [
+			offset(arrowSize || 0),
+			shift({
+				padding,
+				limiter: limitShift({ offset: { mainAxis: shiftLimit } })
+			}),
+			arrowPseudo(),
+			...auto !== "false" ? [flip({
+				padding,
+				crossAxis: false
+			})] : [],
+			...overscroll ? [size({ apply({ availableHeight }) {
+				if (overscroll === "fit") el.style.width = `${source.clientWidth}px`;
+				el.style.maxHeight = `${Math.max(50, availableHeight - padding * 2)}px`;
+			} })] : []
+		]
+	};
+	const unfloat = autoUpdate(source, el, async () => {
+		if (!source?.isConnected) return POPOVERS.get(el)?.();
+		const { x, y } = await computePosition(source, el, options);
+		el.style.translate = `${x}px ${y}px`;
+	});
+	POPOVERS.set(el, () => POPOVERS.delete(el) && unfloat());
+}
+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 = ({ type, target }) => {
+	clearTimeout(HOVER_TIMER);
+	if (target === TIP) return;
+	if (type === "mouseover" && !IS_HOVERING && !IS_IOS) {
+		HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target });
+		return;
+	}
+	const source = target?.closest?.(`[${ATTR_TOOLTIP}]`);
+	if (source === SOURCE) return;
+	if (!source) return hideTooltip();
+	if (!TIP) TIP = tag("div", { class: "ds-tooltip" });
+	if (!TIP.isConnected) document.body.appendChild(TIP);
+	const color = source.closest(SELECTOR_COLOR);
+	const scheme = source.closest(SELECTOR_SCHEME);
+	const isReset = color !== scheme && color?.contains(scheme);
+	clearTimeout(SKIP_TIMER);
+	attr(TIP, "popover", "manual");
+	attr(TIP, ATTR_SCHEME, scheme?.getAttribute(ATTR_SCHEME) || null);
+	attr(TIP, ATTR_COLOR, isReset && color?.getAttribute(ATTR_COLOR) || null);
+	TIP.textContent = attr(source, ATTR_TOOLTIP);
+	TIP.showPopover();
+	TIP.dispatchEvent(new CustomEvent("ds-toggle-source", { detail: source }));
+	IS_HOVERING = true;
+	SOURCE = source;
+};
+const hideTooltip = () => TIP?.isConnected && TIP.popover && TIP.hidePopover();
+const handleClose = (event) => {
+	if (event?.type === "keydown") return event?.key === "Escape" && hideTooltip();
+	if (!event) IS_HOVERING = false;
+	else if (event.target === TIP && event.newState === "closed") {
+		SOURCE = void 0;
+		SKIP_TIMER = setTimeout(handleClose, DELAY_SKIP);
+	}
+};
+onHotReload("tooltip", () => [
+	on(document, "blur focus mouseover", handleInterest, QUICK_EVENT),
+	on(document, "toggle keydown", handleClose, QUICK_EVENT),
+	onMutation(document, 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, "tabindex", "-1");
+		this._unmutate = onMutation(this, render$2, {
+			childList: true,
+			subtree: true
+		});
+		this.focus();
+	}
+	handleEvent({ target }) {
+		if (target === this) this.focus();
+	}
+	disconnectedCallback() {
+		off(this, "animationend", this, QUICK_EVENT);
+		this._unmutate?.();
+		this._unmutate = void 0;
+	}
+};
+const render$2 = (self) => {
+	const heading = self.querySelector("h2,h3,h4,h5,h6");
+	if (heading) attr(self, "aria-labelledby", useId(heading));
+};
+customElements.define("ds-error-summary", DSErrorSummaryElement);
+//#endregion
+//#region src/field/field.ts
+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 WeakMap();
+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) {
+		VALIDATIONS.set(input, attr(input, "aria-invalid"));
+		attr(input, "aria-invalid", "true");
+	} else if (!hasValidation && hadValidation) {
+		attr(input, "aria-invalid", VALIDATIONS.get(input));
+		VALIDATIONS.delete(input);
+	}
+	handleFieldInput(input);
+};
+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 {
+	_render;
+	_unmutate;
+	connectedCallback() {
+		super.connectedCallback();
+		this._unmutate = onMutation(this, render, { childList: true });
+		on(this, "toggle", polyfillToggleSource, QUICK_EVENT);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._unmutate?.();
+		this._unmutate = this._render = void 0;
+		off(this, "toggle", polyfillToggleSource, QUICK_EVENT);
+	}
+};
+const render = ({ control, list }) => {
+	if (control && !control.placeholder) attr(control, "placeholder", " ");
+	if (control) attr(control, "popovertarget", useId(list) || null);
+	if (list) attr(list, "popover", "manual");
+};
+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
+//#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