@sb1/indeks-web 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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

package/dist/npm/index.d.ts

@@ -5,6 +5,7 @@ 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';
@@ -16,6 +17,7 @@ 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 };
@@ -36,6 +38,7 @@ declare global {
         '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;
@@ -109,6 +112,14 @@ declare global {
                 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,
@@ -620,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) {
@@ -1558,7 +1556,6 @@ var IxDropdown = class extends HTMLElement {
 				this._openedWithKeyboard = true;
 				this._open();
 				this._focusItem(this._items.length - 1);
-				break;
 		}
 	}
 	_handleMenuKeydown(e) {
@@ -1634,6 +1631,18 @@ var IxDropdown = class extends HTMLElement {
 	_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") {
@@ -2980,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());
@@ -3084,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.
@@ -3992,6 +4313,7 @@ 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);
@@ -3999,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, IxDropdown, 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

@@ -74,6 +74,7 @@ export declare class IxDropdown extends HTMLElement {
     private _handleTriggerKeydown;
     private _handleMenuKeydown;
     private _handleItemPointerEnter;
+    private _closeOtherSubmenus;
     private _handleItemClick;
     private _handleTypeahead;
     private _focusItem;

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.19.0",
+  "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"
   },