@sb1/indeks-web 0.18.1 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @sb1/indeks-web
 
+## 0.20.0
+
+### Minor Changes
+
+-   a64a806: Ny Popover-komponent for kontekstuell informasjon og handlinger
+
+    -   CSS: `.ix-popover`, `.ix-popover__content`, `.ix-popover__heading`, `.ix-popover__body`, `.ix-popover__actions`
+    -   Web component: `<ix-popover>` med ARIA-lim, posisjonering og fokushåndtering
+    -   React: `<Popover>` med sub-komponenter `Popover.Trigger`, `Popover.Content`, `Popover.Heading`, `Popover.Body`, `Popover.Actions`
+
+### Patch Changes
+
+-   b71ecc3: Fiks heading i Popover og åpning av submenyer på hover i DropdownMenu
+
+    -   Popover: Heading er nå stylet som en overskrift
+    -   DropdownMenu: Submenyer åpnes nå ved hover i tillegg til tastatur (ArrowRight)
+
+## 0.19.0
+
+### Minor Changes
+
+-   ef4f6e2: Ny DropdownMenu-komponent for handlingsmenyer og navigasjon. Komponenten følger APG Menu Button-mønsteret med full tastaturstøtte (piltaster, Home/End, Escape, typeahead), submenyer, og automatisk ARIA-oppsett. CSS-laget definerer `.ix-dropdown__menu`, `.ix-dropdown__item`, `.ix-dropdown__divider` og `.ix-dropdown__group`. Web component `<ix-dropdown>` håndterer åpne/lukke, posisjonering og fokusstyring. React-wrapperen `<DropdownMenu>` eksponerer `<DropdownMenu.Trigger>`, `<DropdownMenu.Menu>`, `<DropdownMenu.Item>`, `<DropdownMenu.Divider>` og `<DropdownMenu.Group>`.
+
 ## 0.18.1
 
 ## 0.18.0

package/dist/npm/index.d.ts

@@ -1,9 +1,11 @@
 import { IxCheckboxGroup } from './lib/components/checkbox-group/IxCheckboxGroup.js';
 import { IxCombobox } from './lib/components/combobox/IxCombobox.js';
 import { IxDateField } from './lib/components/date-field/IxDateField.js';
+import { IxDropdown } from './lib/components/dropdown/IxDropdown.js';
 import { IxField } from './lib/components/field/IxField.js';
 import { IxIcon, IconName } from './lib/components/icon/IxIcon.js';
 import { IxPhoneNumberField } from './lib/components/phone-number-field/IxPhoneNumberField.js';
+import { IxPopover } from './lib/components/popover/IxPopover.js';
 import { IxProgressBar } from './lib/components/progress-bar/IxProgressBar.js';
 import { IxRadioGroup } from './lib/components/radio-group/IxRadioGroup.js';
 import { IxTabs, IxTabList, IxTab, IxTabPanel } from './lib/components/tabs/IxTabs.js';
@@ -13,7 +15,9 @@ export { IxRadioGroup };
 export { IxCheckboxGroup };
 export { IxCombobox };
 export { IxDateField };
+export { IxDropdown };
 export { IxPhoneNumberField };
+export { IxPopover };
 export { IxProgressBar };
 export type { ProgressBarState } from './lib/components/progress-bar/IxProgressBar.js';
 export { IxTabs, IxTabList, IxTab, IxTabPanel };
@@ -32,7 +36,9 @@ declare global {
         'ix-checkbox-group': IxCheckboxGroup;
         'ix-combobox': IxCombobox;
         'ix-date-field': IxDateField;
+        'ix-dropdown': IxDropdown;
         'ix-phone-number-field': IxPhoneNumberField;
+        'ix-popover': IxPopover;
         'ix-progress-bar': IxProgressBar;
         'ix-tabs': IxTabs;
         'ix-tab-list': IxTabList;
@@ -101,6 +107,19 @@ declare global {
                 class?: string;
                 children?: unknown;
             };
+            'ix-dropdown': {
+                open?: boolean | '';
+                placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+                'data-submenu'?: boolean | '';
+            };
+            'ix-popover': {
+                open?: boolean | '';
+                placement?: 'top' | 'bottom' | 'left' | 'right';
+                'data-arrow'?: 'true' | 'false';
+                'data-controlled'?: boolean | '';
+                class?: string;
+                children?: unknown;
+            };
             'ix-icon': {
                 name?: IconName;
                 'data-size'?: 'sm' | 'md' | 'lg' | 'xl';

package/dist/npm/index.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.144.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -8,7 +8,7 @@ function _typeof(o) {
 	}, _typeof(o);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.144.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -20,13 +20,13 @@ function toPrimitive(t, r) {
 	return ("string" === r ? String : Number)(t);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.144.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.144.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -506,7 +506,8 @@ var IxCombobox = class extends HTMLElement {
 		listbox.style.left = `${Math.max(8, r.left)}px`;
 		const ph = listbox.offsetHeight;
 		const spaceBelow = vh - r.bottom;
-		if (ph > spaceBelow && r.top > spaceBelow) listbox.style.top = `${Math.max(8, r.top - ph - gap)}px`;
+		const spaceAbove = r.top;
+		if (ph > spaceBelow && spaceAbove > spaceBelow) listbox.style.top = `${Math.max(8, r.top - ph - gap)}px`;
 		else listbox.style.top = `${r.bottom + gap}px`;
 	}
 	_addRepositionListeners() {
@@ -619,16 +620,14 @@ var IxCombobox = class extends HTMLElement {
 				}
 				break;
 			case "ArrowLeft":
-			case "Backspace":
-				if (this.multiple && input.selectionStart === 0 && input.selectionEnd === 0) {
-					const chips = this._chipElements();
-					const last = chips[chips.length - 1];
-					if (last) {
-						e.preventDefault();
-						last.focus();
-					}
+			case "Backspace": if (this.multiple && input.selectionStart === 0 && input.selectionEnd === 0) {
+				const chips = this._chipElements();
+				const last = chips[chips.length - 1];
+				if (last) {
+					e.preventDefault();
+					last.focus();
 				}
-				break;
+			}
 		}
 	}
 	_handleChipKeydown(e, chip) {
@@ -1321,6 +1320,503 @@ var IxDateField = class extends HTMLElement {
 	}
 };
 //#endregion
+//#region lib/components/dropdown/IxDropdown.ts
+/**
+* IxDropdown — ARIA-lim for en nedtrekksmeny med handlinger eller navigasjon.
+*
+* ## Designfilosofi
+*
+* Komponenten kobler en trigger-knapp med en meny. Forfatteren skriver en
+* <button> (trigger) og en .ix-dropdown__menu med .ix-dropdown__item-elementer
+* i light DOM. Komponentens jobb er å sette opp ARIA-attributter, håndtere
+* tastaturnavigasjon, posisjonere menyen, og styre åpen/lukket-tilstand.
+*
+* ## Roving tabindex
+*
+* Alle items har tabindex="-1" unntatt det aktive (fokuserte). Piltaster
+* flytter fokus mellom items. Dette følger APG Menu Button-mønsteret.
+*
+* ## Submenyer
+*
+* En submenu er en nøstet <ix-dropdown data-submenu> inne i parent-menyen.
+* ArrowRight på en submenu-trigger åpner submenyen, ArrowLeft lukker den.
+* Submenyen posisjoneres til høyre for parent-item (flipper ved plassmangel).
+*
+* ## Posisjonering
+*
+* Menyen posisjoneres manuelt med getBoundingClientRect + viewport-clamp
+* (samme grep som tooltip og combobox) — position: fixed, JS setter top/left.
+*
+* @example
+* <ix-dropdown>
+*   <button class="ix-button" data-variant="secondary">Handlinger</button>
+*   <div class="ix-dropdown__menu">
+*     <button class="ix-dropdown__item">Rediger</button>
+*     <button class="ix-dropdown__item">Dupliser</button>
+*     <hr class="ix-dropdown__divider" />
+*     <button class="ix-dropdown__item" data-danger>Slett</button>
+*   </div>
+* </ix-dropdown>
+*/
+var dropdownCounter = 0;
+var IxDropdown = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_instanceId", 0);
+		_defineProperty(this, "_trigger", null);
+		_defineProperty(this, "_menu", null);
+		_defineProperty(this, "_items", []);
+		_defineProperty(this, "_activeIndex", -1);
+		_defineProperty(this, "_onTriggerClick", null);
+		_defineProperty(this, "_onTriggerKeydown", null);
+		_defineProperty(this, "_onMenuKeydown", null);
+		_defineProperty(this, "_onMenuClick", null);
+		_defineProperty(this, "_onMenuPointerenter", null);
+		_defineProperty(this, "_onDocPointer", null);
+		_defineProperty(this, "_onFocusout", null);
+		_defineProperty(this, "_onReposition", null);
+		_defineProperty(this, "_itemObserver", null);
+		_defineProperty(this, "_typeaheadBuffer", "");
+		_defineProperty(this, "_typeaheadTimer", null);
+		_defineProperty(this, "_openedWithKeyboard", false);
+	}
+	static get observedAttributes() {
+		return [
+			"open",
+			"placement",
+			"data-controlled"
+		];
+	}
+	/**
+	* Kontrollert modus: når `data-controlled` er satt, endrer ikke komponenten
+	* egen åpen-tilstand. Den dispatcher kun `open-request` / `close-request`,
+	* og foreldren må sette `open`-attributtet for å faktisk åpne/lukke.
+	*/
+	get _isControlled() {
+		return this.hasAttribute("data-controlled");
+	}
+	connectedCallback() {
+		this._instanceId = ++dropdownCounter;
+		this._wire();
+	}
+	disconnectedCallback() {
+		if (this._trigger) {
+			if (this._onTriggerClick) this._trigger.removeEventListener("click", this._onTriggerClick);
+			if (this._onTriggerKeydown) this._trigger.removeEventListener("keydown", this._onTriggerKeydown);
+		}
+		if (this._menu) {
+			if (this._onMenuKeydown) this._menu.removeEventListener("keydown", this._onMenuKeydown);
+			if (this._onMenuClick) this._menu.removeEventListener("click", this._onMenuClick);
+			if (this._onMenuPointerenter) this._menu.removeEventListener("pointerenter", this._onMenuPointerenter, true);
+		}
+		if (this._onDocPointer) document.removeEventListener("pointerdown", this._onDocPointer, true);
+		if (this._onFocusout) this.removeEventListener("focusout", this._onFocusout);
+		this._removeRepositionListeners();
+		this._itemObserver?.disconnect();
+		if (this._typeaheadTimer) {
+			clearTimeout(this._typeaheadTimer);
+			this._typeaheadTimer = null;
+		}
+		this._onTriggerClick = null;
+		this._onTriggerKeydown = null;
+		this._onMenuKeydown = null;
+		this._onMenuClick = null;
+		this._onMenuPointerenter = null;
+		this._onDocPointer = null;
+		this._onFocusout = null;
+		this._onReposition = null;
+		this._itemObserver = null;
+		this._trigger = null;
+		this._menu = null;
+		this._items = [];
+	}
+	attributeChangedCallback(name, _oldValue, newValue) {
+		if (!this.isConnected) return;
+		if (name === "open") {
+			const shouldBeOpen = newValue !== null && newValue !== "false";
+			if (shouldBeOpen && !this._isOpen) this._doOpen();
+			else if (!shouldBeOpen && this._isOpen) this._doClose();
+		} else if (name === "placement" && this._isOpen) this._position();
+	}
+	get open() {
+		const attr = this.getAttribute("open");
+		return attr !== null && attr !== "false";
+	}
+	set open(value) {
+		this.toggleAttribute("open", value);
+	}
+	get _isOpen() {
+		return this.hasAttribute("data-open");
+	}
+	get _isSubmenu() {
+		return this.hasAttribute("data-submenu");
+	}
+	get _placement() {
+		return this.getAttribute("placement") ?? "bottom-start";
+	}
+	_wire() {
+		this._menu = this.querySelector(":scope > .ix-dropdown__menu");
+		if (this._isSubmenu) this._trigger = this.querySelector(":scope > .ix-dropdown__item");
+		else this._trigger = Array.from(this.children).find((child) => child instanceof HTMLElement && !child.classList.contains("ix-dropdown__menu")) ?? null;
+		if (!this._trigger || !this._menu) return;
+		if (!this._menu.id) this._menu.id = `ix-dropdown-menu-${this._instanceId}`;
+		if (!this._menu.getAttribute("role")) this._menu.setAttribute("role", "menu");
+		this._menu.hidden = true;
+		this._trigger.setAttribute("aria-haspopup", "menu");
+		this._trigger.setAttribute("aria-expanded", "false");
+		this._trigger.setAttribute("aria-controls", this._menu.id);
+		this._wireItems();
+		this._onTriggerClick = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this._openedWithKeyboard = false;
+			this._toggleOpen();
+		};
+		this._trigger.addEventListener("click", this._onTriggerClick);
+		this._onTriggerKeydown = (e) => this._handleTriggerKeydown(e);
+		this._trigger.addEventListener("keydown", this._onTriggerKeydown);
+		this._onMenuKeydown = (e) => this._handleMenuKeydown(e);
+		this._menu.addEventListener("keydown", this._onMenuKeydown);
+		this._onMenuClick = (e) => {
+			const item = e.target.closest(".ix-dropdown__item");
+			if (item && this._menu?.contains(item)) this._handleItemClick(e, item);
+		};
+		this._menu.addEventListener("click", this._onMenuClick);
+		this._onMenuPointerenter = (e) => {
+			const item = e.target.closest(".ix-dropdown__item");
+			if (item && this._menu?.contains(item)) {
+				const idx = this._items.indexOf(item);
+				if (idx !== -1) this._handleItemPointerEnter(idx);
+			}
+		};
+		this._menu.addEventListener("pointerenter", this._onMenuPointerenter, true);
+		this._onDocPointer = (e) => {
+			if (!this._isOpen) return;
+			const target = e.target;
+			if (!this.contains(target)) this._close();
+		};
+		document.addEventListener("pointerdown", this._onDocPointer, true);
+		this._onFocusout = (e) => {
+			if (!this._isOpen) return;
+			const relatedTarget = e.relatedTarget;
+			if (relatedTarget && this.contains(relatedTarget)) return;
+			const rootDropdown = this.closest("ix-dropdown:not([data-submenu])") ?? this;
+			if (relatedTarget && rootDropdown.contains(relatedTarget)) return;
+			this._close();
+		};
+		this.addEventListener("focusout", this._onFocusout);
+		this._itemObserver = new MutationObserver(() => this._rewireItems());
+		this._itemObserver.observe(this._menu, {
+			childList: true,
+			subtree: true
+		});
+		if (this.open) this._doOpen();
+	}
+	_wireItems() {
+		this._rewireItems();
+	}
+	_rewireItems() {
+		if (!this._menu) return;
+		const items = Array.from(this._menu.children).filter((child) => child instanceof HTMLElement && child.classList.contains("ix-dropdown__item"));
+		Array.from(this._menu.querySelectorAll(":scope > ix-dropdown[data-submenu]")).forEach((submenu) => {
+			const submenuTrigger = submenu.querySelector(":scope > .ix-dropdown__item");
+			if (submenuTrigger) {
+				items.push(submenuTrigger);
+				submenuTrigger.setAttribute("aria-haspopup", "menu");
+				submenuTrigger.setAttribute("aria-expanded", "false");
+			}
+		});
+		items.sort((a, b) => {
+			const position = a.compareDocumentPosition(b);
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+			if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+			return 0;
+		});
+		items.forEach((item) => {
+			if (!item.getAttribute("role")) item.setAttribute("role", "menuitem");
+			item.setAttribute("tabindex", "-1");
+		});
+		this._menu.querySelectorAll(":scope > .ix-dropdown__divider").forEach((divider) => {
+			if (!divider.getAttribute("role")) divider.setAttribute("role", "separator");
+		});
+		this._items = items;
+	}
+	_handleTriggerKeydown(e) {
+		if (this._isSubmenu) return;
+		switch (e.key) {
+			case "Enter":
+			case " ":
+			case "ArrowDown":
+				e.preventDefault();
+				this._openedWithKeyboard = true;
+				this._open();
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				this._openedWithKeyboard = true;
+				this._open();
+				this._focusItem(this._items.length - 1);
+		}
+	}
+	_handleMenuKeydown(e) {
+		const target = e.target;
+		if (!this._menu?.contains(target)) return;
+		const closestSubmenuMenu = target.closest("ix-dropdown[data-submenu] > .ix-dropdown__menu");
+		if (closestSubmenuMenu && closestSubmenuMenu !== this._menu && this._menu.contains(closestSubmenuMenu)) return;
+		switch (e.key) {
+			case "Escape":
+				e.preventDefault();
+				e.stopPropagation();
+				this._close();
+				this._trigger?.focus();
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				this._focusNextItem(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				this._focusNextItem(-1);
+				break;
+			case "Home":
+				e.preventDefault();
+				this._focusItem(0);
+				break;
+			case "End":
+				e.preventDefault();
+				this._focusItem(this._items.length - 1);
+				break;
+			case "ArrowRight": {
+				const submenu = target.closest("ix-dropdown[data-submenu]");
+				if (submenu && submenu !== this && target === submenu._trigger) {
+					e.preventDefault();
+					submenu._openedWithKeyboard = true;
+					submenu._open();
+				}
+				break;
+			}
+			case "ArrowLeft":
+				if (this._isSubmenu) {
+					e.preventDefault();
+					e.stopPropagation();
+					const parentDropdown = this.parentElement?.closest("ix-dropdown");
+					if (this._trigger) {
+						this._trigger.focus();
+						if (parentDropdown) {
+							const triggerIndex = parentDropdown._items.indexOf(this._trigger);
+							if (triggerIndex !== -1) parentDropdown._focusItem(triggerIndex);
+						}
+					}
+					this._close();
+				}
+				break;
+			case "Enter":
+			case " ":
+				if (target.classList.contains("ix-dropdown__item")) {
+					e.preventDefault();
+					const submenu = target.parentElement;
+					if (submenu?.hasAttribute("data-submenu") && target === submenu._trigger) {
+						submenu._openedWithKeyboard = true;
+						submenu._open();
+					} else target.click();
+				}
+				break;
+			case "Tab":
+				e.preventDefault();
+				this._closeAll();
+				break;
+			default: if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) this._handleTypeahead(e.key);
+		}
+	}
+	_handleItemPointerEnter(index) {
+		this._activeIndex = index;
+		if (this._menu?.contains(document.activeElement)) this._focusItem(index);
+		const item = this._items[index];
+		if (!item) return;
+		const submenu = item.parentElement;
+		if (submenu?.hasAttribute("data-submenu") && item === submenu._trigger) {
+			this._closeOtherSubmenus(submenu);
+			submenu._open();
+		} else this._closeAllSubmenus();
+	}
+	_closeOtherSubmenus(keep) {
+		(this._menu?.querySelectorAll("ix-dropdown[data-submenu]"))?.forEach((submenu) => {
+			if (submenu !== keep && submenu._isOpen) submenu._close();
+		});
+	}
+	_handleItemClick(e, item) {
+		if (item.hasAttribute("disabled") || item.getAttribute("aria-disabled") === "true") {
+			e.preventDefault();
+			return;
+		}
+		const submenu = item.parentElement;
+		if (submenu?.hasAttribute("data-submenu") && item === submenu._trigger) {
+			e.stopPropagation();
+			return;
+		}
+		this._activeIndex = this._items.indexOf(item);
+		this._closeAll();
+	}
+	_handleTypeahead(char) {
+		this._typeaheadBuffer += char.toLowerCase();
+		if (this._typeaheadTimer) clearTimeout(this._typeaheadTimer);
+		this._typeaheadTimer = setTimeout(() => {
+			this._typeaheadBuffer = "";
+		}, 500);
+		const match = this._items.findIndex((item) => {
+			if (item.hasAttribute("disabled") || item.getAttribute("aria-disabled") === "true") return false;
+			return (item.textContent ?? "").trim().toLowerCase().startsWith(this._typeaheadBuffer);
+		});
+		if (match !== -1) this._focusItem(match);
+	}
+	_focusItem(index) {
+		if (this._items.filter((item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true").length === 0) return;
+		const clampedIndex = Math.max(0, Math.min(index, this._items.length - 1));
+		const item = this._items[clampedIndex];
+		if (item?.hasAttribute("disabled") || item?.getAttribute("aria-disabled") === "true") {
+			this._focusNextItem(1);
+			return;
+		}
+		this._items.forEach((i, idx) => {
+			i.setAttribute("tabindex", idx === clampedIndex ? "0" : "-1");
+			i.removeAttribute("data-active");
+		});
+		if (item) {
+			item.setAttribute("data-active", "");
+			item.focus();
+			this._activeIndex = clampedIndex;
+		}
+	}
+	_focusNextItem(delta) {
+		if (this._items.filter((item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true").length === 0) return;
+		let currentIdx = this._activeIndex;
+		if (currentIdx === -1) currentIdx = delta > 0 ? -1 : this._items.length;
+		let nextIdx = currentIdx;
+		let iterations = 0;
+		do {
+			nextIdx = nextIdx + delta;
+			if (nextIdx < 0) nextIdx = this._items.length - 1;
+			if (nextIdx >= this._items.length) nextIdx = 0;
+			iterations++;
+		} while (iterations < this._items.length && (this._items[nextIdx]?.hasAttribute("disabled") || this._items[nextIdx]?.getAttribute("aria-disabled") === "true"));
+		this._focusItem(nextIdx);
+	}
+	_open() {
+		if (this._isOpen || !this._menu || !this._trigger) return;
+		if (this._isControlled) {
+			this.dispatchEvent(new CustomEvent("open-request", { bubbles: true }));
+			return;
+		}
+		this._doOpen();
+	}
+	_doOpen() {
+		if (this._isOpen || !this._menu || !this._trigger) return;
+		this.setAttribute("data-open", "");
+		this.setAttribute("open", "");
+		this._menu.hidden = false;
+		this._trigger.setAttribute("aria-expanded", "true");
+		this._position();
+		this._addRepositionListeners();
+		if (this._openedWithKeyboard) this._focusItem(0);
+		this.dispatchEvent(new CustomEvent("open", { bubbles: true }));
+	}
+	_close() {
+		if (!this._isOpen || !this._menu || !this._trigger) return;
+		if (this._isControlled) {
+			this.dispatchEvent(new CustomEvent("close-request", { bubbles: true }));
+			return;
+		}
+		this._doClose();
+	}
+	_doClose() {
+		if (!this._isOpen || !this._menu || !this._trigger) return;
+		this._closeAllSubmenus();
+		this.removeAttribute("data-open");
+		this.removeAttribute("open");
+		this._menu.hidden = true;
+		this._trigger.setAttribute("aria-expanded", "false");
+		this._items.forEach((item) => {
+			item.setAttribute("tabindex", "-1");
+			item.removeAttribute("data-active");
+		});
+		this._activeIndex = -1;
+		this._removeRepositionListeners();
+		this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
+	}
+	_toggleOpen() {
+		if (this._isOpen) this._close();
+		else this._open();
+	}
+	_closeAll() {
+		let root = this.parentElement?.closest("ix-dropdown");
+		if (!root) {
+			this._close();
+			this._trigger?.focus();
+			return;
+		}
+		while (root.parentElement?.closest("ix-dropdown")) root = root.parentElement.closest("ix-dropdown");
+		root._close();
+		root._trigger?.focus();
+	}
+	_closeAllSubmenus() {
+		(this._menu?.querySelectorAll("ix-dropdown[data-submenu]"))?.forEach((submenu) => {
+			if (submenu._isOpen) submenu._close();
+		});
+	}
+	_position() {
+		if (!this._menu || !this._trigger) return;
+		const triggerRect = this._trigger.getBoundingClientRect();
+		const menuRect = this._menu.getBoundingClientRect();
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		const gap = 2;
+		let top;
+		let left;
+		if (this._isSubmenu) {
+			const parentMenuRect = this.parentElement?.getBoundingClientRect();
+			const anchorRight = parentMenuRect?.right ?? triggerRect.right;
+			const anchorLeft = parentMenuRect?.left ?? triggerRect.left;
+			const spaceRight = vw - anchorRight;
+			const spaceLeft = anchorLeft;
+			if (spaceRight >= menuRect.width || spaceRight >= spaceLeft) left = anchorRight + gap;
+			else left = anchorLeft - menuRect.width - gap;
+			top = triggerRect.top;
+			if (top + menuRect.height > vh - gap) top = Math.max(gap, vh - menuRect.height - gap);
+		} else {
+			const [vertical, horizontal] = this._placement.split("-");
+			const spaceBelow = vh - triggerRect.bottom;
+			const spaceAbove = triggerRect.top;
+			if (vertical === "bottom" && spaceBelow >= menuRect.height + gap) top = triggerRect.bottom + gap;
+			else if (vertical === "top" && spaceAbove >= menuRect.height + gap) top = triggerRect.top - menuRect.height - gap;
+			else if (spaceBelow >= spaceAbove) top = triggerRect.bottom + gap;
+			else top = triggerRect.top - menuRect.height - gap;
+			if (horizontal === "end") left = triggerRect.right - menuRect.width;
+			else left = triggerRect.left;
+			if (left + menuRect.width > vw - gap) left = vw - menuRect.width - gap;
+			if (left < gap) left = gap;
+		}
+		if (top + menuRect.height > vh - gap) top = Math.max(gap, vh - menuRect.height - gap);
+		if (top < gap) top = gap;
+		this._menu.style.top = `${top}px`;
+		this._menu.style.left = `${left}px`;
+	}
+	_addRepositionListeners() {
+		if (this._onReposition) return;
+		this._onReposition = () => {
+			if (this._isOpen) this._position();
+		};
+		window.addEventListener("scroll", this._onReposition, true);
+		window.addEventListener("resize", this._onReposition);
+	}
+	_removeRepositionListeners() {
+		if (this._onReposition) {
+			window.removeEventListener("scroll", this._onReposition, true);
+			window.removeEventListener("resize", this._onReposition);
+			this._onReposition = null;
+		}
+	}
+};
+//#endregion
 //#region lib/components/field/IxField.ts
 /**
 * IxField — tilgjengelighetslim mellom label, input og hjelpetekster.
@@ -2493,9 +2989,10 @@ var IxPhoneNumberField = class extends HTMLElement {
 		const prop = flag === "readonly" ? "readOnly" : flag;
 		const read = () => mode === "attribute" ? control.hasAttribute(flag) : !!control[prop];
 		const write = (value) => {
-			if (mode === "attribute") if (value) control.setAttribute(flag, "");
-			else control.removeAttribute(flag);
-			else control[prop] = value;
+			if (mode === "attribute") {
+				if (value) control.setAttribute(flag, "");
+				else control.removeAttribute(flag);
+			} else control[prop] = value;
 		};
 		if (groupOn) {
 			if (!ownStore.has(control)) ownStore.set(control, read());
@@ -2597,6 +3094,317 @@ var IxPhoneNumberField = class extends HTMLElement {
 	}
 };
 //#endregion
+//#region lib/components/popover/IxPopover.ts
+/**
+* IxPopover — ARIA-lim for en popover med kontekstuell informasjon eller handlinger.
+*
+* ## Designfilosofi
+*
+* Komponenten kobler en trigger-knapp med et innholdspanel. Forfatteren skriver
+* en <button> (trigger) og en .ix-popover__content i light DOM. Komponentens jobb
+* er å sette opp ARIA-attributter, håndtere åpne/lukke-logikk, posisjonere panelet,
+* og styre fokus.
+*
+* ## Fokushåndtering
+*
+* Når popoveren åpnes, flyttes fokus til første focusable element i content (hvis det
+* finnes). Når popoveren lukkes med Escape, returneres fokus til trigger. Fokus trappes IKKE —
+* brukeren kan tabbe ut av popoveren naturlig.
+*
+* ## Posisjonering
+*
+* Panelet posisjoneres manuelt med getBoundingClientRect + viewport-clamp
+* (samme grep som dropdown og tooltip) — position: fixed, JS setter top/left.
+* Auto-flip brukes hvis det ikke er nok plass i ønsket retning.
+*
+* @example
+* <ix-popover placement="top">
+*   <button class="ix-button">Åpne popover</button>
+*   <div class="ix-popover__content">
+*     <div class="ix-popover__heading">Overskrift</div>
+*     <div class="ix-popover__body">Forklarende tekst her.</div>
+*     <div class="ix-popover__actions">
+*       <button class="ix-button" data-size="sm">OK</button>
+*     </div>
+*   </div>
+* </ix-popover>
+*/
+var popoverCounter = 0;
+var IxPopover = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_instanceId", 0);
+		_defineProperty(this, "_trigger", null);
+		_defineProperty(this, "_content", null);
+		_defineProperty(this, "_onTriggerClick", null);
+		_defineProperty(this, "_onTriggerKeydown", null);
+		_defineProperty(this, "_onContentKeydown", null);
+		_defineProperty(this, "_onDocPointer", null);
+		_defineProperty(this, "_onFocusout", null);
+		_defineProperty(this, "_onReposition", null);
+	}
+	static get observedAttributes() {
+		return ["open", "placement"];
+	}
+	/**
+	* Kontrollert modus: når `data-controlled` er satt, endrer ikke komponenten
+	* egen åpen-tilstand. Den dispatcher kun `open-request` / `close-request`,
+	* og foreldren må sette `open`-attributtet for å faktisk åpne/lukke.
+	*/
+	get _isControlled() {
+		return this.hasAttribute("data-controlled");
+	}
+	connectedCallback() {
+		this._instanceId = ++popoverCounter;
+		this._wire();
+	}
+	disconnectedCallback() {
+		if (this._trigger) {
+			if (this._onTriggerClick) this._trigger.removeEventListener("click", this._onTriggerClick);
+			if (this._onTriggerKeydown) this._trigger.removeEventListener("keydown", this._onTriggerKeydown);
+		}
+		if (this._content) {
+			if (this._onContentKeydown) this._content.removeEventListener("keydown", this._onContentKeydown);
+		}
+		if (this._onDocPointer) document.removeEventListener("pointerdown", this._onDocPointer, true);
+		if (this._onFocusout) this.removeEventListener("focusout", this._onFocusout);
+		this._removeRepositionListeners();
+		this._onTriggerClick = null;
+		this._onTriggerKeydown = null;
+		this._onContentKeydown = null;
+		this._onDocPointer = null;
+		this._onFocusout = null;
+		this._onReposition = null;
+		this._trigger = null;
+		this._content = null;
+	}
+	attributeChangedCallback(name, _oldValue, newValue) {
+		if (!this.isConnected) return;
+		if (name === "open") {
+			const shouldBeOpen = newValue !== null && newValue !== "false";
+			if (shouldBeOpen && !this._isOpen) this._doOpen();
+			else if (!shouldBeOpen && this._isOpen) this._doClose();
+		} else if (name === "placement" && this._isOpen) this._position();
+	}
+	get open() {
+		const attr = this.getAttribute("open");
+		return attr !== null && attr !== "false";
+	}
+	set open(value) {
+		this.toggleAttribute("open", value);
+	}
+	get _isOpen() {
+		return this.hasAttribute("data-open");
+	}
+	get _placement() {
+		return this.getAttribute("placement") ?? "top";
+	}
+	_wire() {
+		this._content = this.querySelector(":scope > .ix-popover__content");
+		this._trigger = Array.from(this.children).find((child) => child instanceof HTMLElement && !child.classList.contains("ix-popover__content")) ?? null;
+		if (!this._trigger || !this._content) return;
+		if (!this._content.id) this._content.id = `ix-popover-content-${this._instanceId}`;
+		this._trigger.setAttribute("aria-haspopup", "dialog");
+		this._trigger.setAttribute("aria-expanded", "false");
+		this._trigger.setAttribute("aria-controls", this._content.id);
+		this._content.hidden = true;
+		this._content.setAttribute("role", "dialog");
+		this._onTriggerClick = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this._toggleOpen();
+		};
+		this._trigger.addEventListener("click", this._onTriggerClick);
+		this._onTriggerKeydown = (e) => this._handleTriggerKeydown(e);
+		this._trigger.addEventListener("keydown", this._onTriggerKeydown);
+		this._onContentKeydown = (e) => this._handleContentKeydown(e);
+		this._content.addEventListener("keydown", this._onContentKeydown);
+		this._onDocPointer = (e) => {
+			if (!this._isOpen) return;
+			const target = e.target;
+			if (!this.contains(target)) this._close();
+		};
+		document.addEventListener("pointerdown", this._onDocPointer, true);
+		this._onFocusout = (e) => {
+			if (!this._isOpen) return;
+			const relatedTarget = e.relatedTarget;
+			if (relatedTarget && this.contains(relatedTarget)) return;
+			this._close();
+		};
+		this.addEventListener("focusout", this._onFocusout);
+		if (this.open) this._doOpen();
+	}
+	_handleTriggerKeydown(e) {
+		switch (e.key) {
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				this._toggleOpen();
+				break;
+			case "ArrowDown": if (!this._isOpen) {
+				e.preventDefault();
+				this._open();
+			}
+		}
+	}
+	_handleContentKeydown(e) {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			this._close();
+			this._trigger?.focus();
+		}
+	}
+	_open() {
+		if (this._isOpen || !this._content || !this._trigger) return;
+		if (this._isControlled) {
+			this.dispatchEvent(new CustomEvent("open-request", { bubbles: true }));
+			return;
+		}
+		this._doOpen();
+	}
+	_doOpen() {
+		if (this._isOpen || !this._content || !this._trigger) return;
+		this.setAttribute("data-open", "");
+		this.setAttribute("open", "");
+		this._content.hidden = false;
+		this._trigger.setAttribute("aria-expanded", "true");
+		this._position();
+		this._addRepositionListeners();
+		const firstFocusable = this._content.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
+		if (firstFocusable) firstFocusable.focus();
+		this.dispatchEvent(new CustomEvent("open", { bubbles: true }));
+	}
+	_close() {
+		if (!this._isOpen || !this._content || !this._trigger) return;
+		if (this._isControlled) {
+			this.dispatchEvent(new CustomEvent("close-request", { bubbles: true }));
+			return;
+		}
+		this._doClose();
+	}
+	_doClose() {
+		if (!this._isOpen || !this._content || !this._trigger) return;
+		this.removeAttribute("data-open");
+		this.removeAttribute("open");
+		this._content.hidden = true;
+		this._trigger.setAttribute("aria-expanded", "false");
+		this._removeRepositionListeners();
+		this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
+	}
+	_toggleOpen() {
+		if (this._isOpen) this._close();
+		else this._open();
+	}
+	_position() {
+		if (!this._content || !this._trigger) return;
+		const triggerRect = this._trigger.getBoundingClientRect();
+		const contentRect = this._content.getBoundingClientRect();
+		const offsetRect = this._getFixedOffsetParent()?.getBoundingClientRect() ?? {
+			top: 0,
+			left: 0
+		};
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		const gap = 8;
+		const arrowSize = 8;
+		let top;
+		let left;
+		let actualPlacement = this._placement;
+		const spaceAbove = triggerRect.top;
+		const spaceBelow = vh - triggerRect.bottom;
+		const spaceLeft = triggerRect.left;
+		const spaceRight = vw - triggerRect.right;
+		if (actualPlacement === "top" && spaceAbove < contentRect.height + gap + arrowSize) {
+			if (spaceBelow >= contentRect.height + gap + arrowSize) actualPlacement = "bottom";
+		} else if (actualPlacement === "bottom" && spaceBelow < contentRect.height + gap + arrowSize) {
+			if (spaceAbove >= contentRect.height + gap + arrowSize) actualPlacement = "top";
+		} else if (actualPlacement === "left" && spaceLeft < contentRect.width + gap + arrowSize) {
+			if (spaceRight >= contentRect.width + gap + arrowSize) actualPlacement = "right";
+		} else if (actualPlacement === "right" && spaceRight < contentRect.width + gap + arrowSize) {
+			if (spaceLeft >= contentRect.width + gap + arrowSize) actualPlacement = "left";
+		}
+		const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+		const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+		switch (actualPlacement) {
+			case "top":
+				top = triggerRect.top - contentRect.height - gap - arrowSize;
+				left = triggerCenterX - contentRect.width / 2;
+				break;
+			case "bottom":
+				top = triggerRect.bottom + gap + arrowSize;
+				left = triggerCenterX - contentRect.width / 2;
+				break;
+			case "left":
+				top = triggerCenterY - contentRect.height / 2;
+				left = triggerRect.left - contentRect.width - gap - arrowSize;
+				break;
+			case "right":
+				top = triggerCenterY - contentRect.height / 2;
+				left = triggerRect.right + gap + arrowSize;
+				break;
+			default:
+				top = triggerRect.top - contentRect.height - gap - arrowSize;
+				left = triggerCenterX - contentRect.width / 2;
+		}
+		if (left + contentRect.width > vw - gap) left = vw - contentRect.width - gap;
+		if (left < gap) left = gap;
+		if (top + contentRect.height > vh - gap) top = Math.max(gap, vh - contentRect.height - gap);
+		if (top < gap) top = gap;
+		top -= offsetRect.top;
+		left -= offsetRect.left;
+		this._content.style.top = `${top}px`;
+		this._content.style.left = `${left}px`;
+		this._content.setAttribute("data-placement", actualPlacement);
+		const adjustedTriggerCenterX = triggerCenterX - offsetRect.left;
+		const adjustedTriggerCenterY = triggerCenterY - offsetRect.top;
+		let arrowX;
+		let arrowY;
+		if (actualPlacement === "top" || actualPlacement === "bottom") {
+			arrowX = adjustedTriggerCenterX - left;
+			arrowX = Math.max(16, Math.min(arrowX, contentRect.width - arrowSize - gap));
+			this._content.style.setProperty("--_arrow-x", `${arrowX}px`);
+			this._content.style.removeProperty("--_arrow-y");
+		} else {
+			arrowY = adjustedTriggerCenterY - top;
+			arrowY = Math.max(16, Math.min(arrowY, contentRect.height - arrowSize - gap));
+			this._content.style.setProperty("--_arrow-y", `${arrowY}px`);
+			this._content.style.removeProperty("--_arrow-x");
+		}
+	}
+	/**
+	* Finner nærmeste ancestor med transform, filter, eller will-change som
+	* skaper en ny containing block for position: fixed.
+	*/
+	_getFixedOffsetParent() {
+		let el = this._content?.parentElement ?? null;
+		while (el && el !== document.documentElement) {
+			const style = getComputedStyle(el);
+			const transform = style.transform;
+			const willChange = style.willChange;
+			const filter = style.filter;
+			if (transform && transform !== "none" || willChange && (willChange.includes("transform") || willChange.includes("filter")) || filter && filter !== "none") return el;
+			el = el.parentElement;
+		}
+		return null;
+	}
+	_addRepositionListeners() {
+		if (this._onReposition) return;
+		this._onReposition = () => {
+			if (this._isOpen) this._position();
+		};
+		window.addEventListener("scroll", this._onReposition, true);
+		window.addEventListener("resize", this._onReposition);
+	}
+	_removeRepositionListeners() {
+		if (this._onReposition) {
+			window.removeEventListener("scroll", this._onReposition, true);
+			window.removeEventListener("resize", this._onReposition);
+			this._onReposition = null;
+		}
+	}
+};
+//#endregion
 //#region lib/utils/platform.ts
 /**
 * Plattform-deteksjon for web components.
@@ -3503,7 +4311,9 @@ customElements.define("ix-radio-group", IxRadioGroup);
 customElements.define("ix-checkbox-group", IxCheckboxGroup);
 customElements.define("ix-combobox", IxCombobox);
 customElements.define("ix-date-field", IxDateField);
+customElements.define("ix-dropdown", IxDropdown);
 customElements.define("ix-phone-number-field", IxPhoneNumberField);
+customElements.define("ix-popover", IxPopover);
 customElements.define("ix-progress-bar", IxProgressBar);
 customElements.define("ix-tabs", IxTabs);
 customElements.define("ix-tab-list", IxTabList);
@@ -3511,4 +4321,4 @@ customElements.define("ix-tab", IxTab);
 customElements.define("ix-tab-panel", IxTabPanel);
 globalThis.cn = cn;
 //#endregion
-export { BUILTIN_FORMAT_NAMES, COMMON_ICON_NAMES, IxCheckboxGroup, IxCombobox, IxDateField, IxField, IxIcon, IxPhoneNumberField, IxProgressBar, IxRadioGroup, IxTab, IxTabList, IxTabPanel, IxTabs, amountFormatterForLocale, cn, createAmountFormatter, createPatternFormatter, registerFormat, resolveFormat };
+export { BUILTIN_FORMAT_NAMES, COMMON_ICON_NAMES, IxCheckboxGroup, IxCombobox, IxDateField, IxDropdown, IxField, IxIcon, IxPhoneNumberField, IxPopover, IxProgressBar, IxRadioGroup, IxTab, IxTabList, IxTabPanel, IxTabs, amountFormatterForLocale, cn, createAmountFormatter, createPatternFormatter, registerFormat, resolveFormat };

package/dist/npm/lib/components/dropdown/IxDropdown.d.ts

@@ -0,0 +1,92 @@
+/**
+ * IxDropdown — ARIA-lim for en nedtrekksmeny med handlinger eller navigasjon.
+ *
+ * ## Designfilosofi
+ *
+ * Komponenten kobler en trigger-knapp med en meny. Forfatteren skriver en
+ * <button> (trigger) og en .ix-dropdown__menu med .ix-dropdown__item-elementer
+ * i light DOM. Komponentens jobb er å sette opp ARIA-attributter, håndtere
+ * tastaturnavigasjon, posisjonere menyen, og styre åpen/lukket-tilstand.
+ *
+ * ## Roving tabindex
+ *
+ * Alle items har tabindex="-1" unntatt det aktive (fokuserte). Piltaster
+ * flytter fokus mellom items. Dette følger APG Menu Button-mønsteret.
+ *
+ * ## Submenyer
+ *
+ * En submenu er en nøstet <ix-dropdown data-submenu> inne i parent-menyen.
+ * ArrowRight på en submenu-trigger åpner submenyen, ArrowLeft lukker den.
+ * Submenyen posisjoneres til høyre for parent-item (flipper ved plassmangel).
+ *
+ * ## Posisjonering
+ *
+ * Menyen posisjoneres manuelt med getBoundingClientRect + viewport-clamp
+ * (samme grep som tooltip og combobox) — position: fixed, JS setter top/left.
+ *
+ * @example
+ * <ix-dropdown>
+ *   <button class="ix-button" data-variant="secondary">Handlinger</button>
+ *   <div class="ix-dropdown__menu">
+ *     <button class="ix-dropdown__item">Rediger</button>
+ *     <button class="ix-dropdown__item">Dupliser</button>
+ *     <hr class="ix-dropdown__divider" />
+ *     <button class="ix-dropdown__item" data-danger>Slett</button>
+ *   </div>
+ * </ix-dropdown>
+ */
+export declare class IxDropdown extends HTMLElement {
+    private _instanceId;
+    private _trigger;
+    private _menu;
+    private _items;
+    private _activeIndex;
+    private _onTriggerClick;
+    private _onTriggerKeydown;
+    private _onMenuKeydown;
+    private _onMenuClick;
+    private _onMenuPointerenter;
+    private _onDocPointer;
+    private _onFocusout;
+    private _onReposition;
+    private _itemObserver;
+    private _typeaheadBuffer;
+    private _typeaheadTimer;
+    private _openedWithKeyboard;
+    static get observedAttributes(): string[];
+    /**
+     * Kontrollert modus: når `data-controlled` er satt, endrer ikke komponenten
+     * egen åpen-tilstand. Den dispatcher kun `open-request` / `close-request`,
+     * og foreldren må sette `open`-attributtet for å faktisk åpne/lukke.
+     */
+    private get _isControlled();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    get open(): boolean;
+    set open(value: boolean);
+    private get _isOpen();
+    private get _isSubmenu();
+    private get _placement();
+    private _wire;
+    private _wireItems;
+    private _rewireItems;
+    private _handleTriggerKeydown;
+    private _handleMenuKeydown;
+    private _handleItemPointerEnter;
+    private _closeOtherSubmenus;
+    private _handleItemClick;
+    private _handleTypeahead;
+    private _focusItem;
+    private _focusNextItem;
+    private _open;
+    private _doOpen;
+    private _close;
+    private _doClose;
+    private _toggleOpen;
+    private _closeAll;
+    private _closeAllSubmenus;
+    private _position;
+    private _addRepositionListeners;
+    private _removeRepositionListeners;
+}

package/dist/npm/lib/components/popover/IxPopover.d.ts

@@ -0,0 +1,75 @@
+/**
+ * IxPopover — ARIA-lim for en popover med kontekstuell informasjon eller handlinger.
+ *
+ * ## Designfilosofi
+ *
+ * Komponenten kobler en trigger-knapp med et innholdspanel. Forfatteren skriver
+ * en <button> (trigger) og en .ix-popover__content i light DOM. Komponentens jobb
+ * er å sette opp ARIA-attributter, håndtere åpne/lukke-logikk, posisjonere panelet,
+ * og styre fokus.
+ *
+ * ## Fokushåndtering
+ *
+ * Når popoveren åpnes, flyttes fokus til første focusable element i content (hvis det
+ * finnes). Når popoveren lukkes med Escape, returneres fokus til trigger. Fokus trappes IKKE —
+ * brukeren kan tabbe ut av popoveren naturlig.
+ *
+ * ## Posisjonering
+ *
+ * Panelet posisjoneres manuelt med getBoundingClientRect + viewport-clamp
+ * (samme grep som dropdown og tooltip) — position: fixed, JS setter top/left.
+ * Auto-flip brukes hvis det ikke er nok plass i ønsket retning.
+ *
+ * @example
+ * <ix-popover placement="top">
+ *   <button class="ix-button">Åpne popover</button>
+ *   <div class="ix-popover__content">
+ *     <div class="ix-popover__heading">Overskrift</div>
+ *     <div class="ix-popover__body">Forklarende tekst her.</div>
+ *     <div class="ix-popover__actions">
+ *       <button class="ix-button" data-size="sm">OK</button>
+ *     </div>
+ *   </div>
+ * </ix-popover>
+ */
+export declare class IxPopover extends HTMLElement {
+    private _instanceId;
+    private _trigger;
+    private _content;
+    private _onTriggerClick;
+    private _onTriggerKeydown;
+    private _onContentKeydown;
+    private _onDocPointer;
+    private _onFocusout;
+    private _onReposition;
+    static get observedAttributes(): string[];
+    /**
+     * Kontrollert modus: når `data-controlled` er satt, endrer ikke komponenten
+     * egen åpen-tilstand. Den dispatcher kun `open-request` / `close-request`,
+     * og foreldren må sette `open`-attributtet for å faktisk åpne/lukke.
+     */
+    private get _isControlled();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    get open(): boolean;
+    set open(value: boolean);
+    private get _isOpen();
+    private get _placement();
+    private _wire;
+    private _handleTriggerKeydown;
+    private _handleContentKeydown;
+    private _open;
+    private _doOpen;
+    private _close;
+    private _doClose;
+    private _toggleOpen;
+    private _position;
+    /**
+     * Finner nærmeste ancestor med transform, filter, eller will-change som
+     * skaper en ny containing block for position: fixed.
+     */
+    private _getFixedOffsetParent;
+    private _addRepositionListeners;
+    private _removeRepositionListeners;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-web",
-  "version": "0.18.1",
+  "version": "0.20.0",
   "type": "module",
   "description": "Web components for Indeks design system",
   "homepage": "https://design.sparebank1.no",
@@ -40,10 +40,10 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^26.0.1",
+    "@types/node": "^26.2.0",
     "jsdom": "^29.1.1",
     "typescript": "~6.0.3",
-    "vite": "^8.1.5",
+    "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10"
   },