@sb1/indeks-web 0.15.0 → 0.16.0

package/dist/npm/index.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.139.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.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.139.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.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.139.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.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -36,7 +36,1078 @@ function _defineProperty(e, r, t) {
 	}) : e[r] = t, e;
 }
 //#endregion
+//#region lib/components/checkbox-group/IxCheckboxGroup.ts
+/**
+* IxCheckboxGroup — ARIA-lim for checkbox-grupper.
+*
+* ## Designfilosofi
+*
+* Komponenten erstatter ingen native HTML-elementer. Forfatteren skriver
+* native <input type="checkbox">, <label> og hjelpetekster inni
+* <ix-checkbox-group>. Komponenten sin eneste jobb er å sette opp
+* ARIA-koblingene mellom dem. Speiler <ix-radio-group>, med tre bevisste
+* forskjeller (se under).
+*
+* ## Hva komponenten gjør
+*
+* 1. Setter role="group" på host slik at skjermlesere annonserer gruppen og
+*    leser legend-teksten som gruppens tilgjengelige navn. (Det finnes ingen
+*    "checkboxgroup"-rolle i ARIA — "group" er korrekt for en checkbox-gruppe.)
+*
+* 2. Kobler legend via aria-labelledby — genererer ID på [data-field="legend"]
+*    om nødvendig og peker host til den.
+*
+* 3. Setter aria-describedby på host med IDer til description og error
+*    (description alltid først). Hopper over elementer som mangler.
+*
+* 4. Genererer stabile IDer på hvert input og setter htmlFor på matchende label
+*    om label ikke allerede har det. Respekterer alltid eksisterende IDer.
+*
+* 5. Setter aria-live="polite" på [data-field="error"] og observerer
+*    textContent-endringer: ikke-tomt innhold → aria-invalid="true" på host;
+*    tomt → aria-invalid fjernes. aria-invalid settes kun på host.
+*
+* 6. Propagerer disabled/readonly til alle inputs via attributeChangedCallback.
+*    Per-knapp disabled bevares — settes med en WeakMap ved første _wire().
+*
+* 7. Lytter på childList på host slik at nye <input type="checkbox">-elementer
+*    som legges til etter mount automatisk wires (id, name, htmlFor, disabled).
+*
+* ## Forskjeller fra <ix-radio-group>
+*
+* - **role="group"**, ikke "radiogroup".
+* - **Ingen name-mutex.** Checkbox deler ikke `name` for gjensidig utelukkelse.
+*   Host-`name` propageres til alle inputs (for form-innsending under felles
+*   navn), men når host ikke har name lar vi forfatterens egne name/value stå
+*   — vi auto-genererer ikke et felles name.
+* - **Ingen required-triks.** For radio settes `required` kun på første input
+*   (Safari-boble-fiks for mutex-gruppen). For checkbox betyr `required` "denne
+*   må krysses", så vi rører ikke required automatisk på gruppenivå.
+* - **Tastatur:** checkbox har ingen pil-navigasjon; readonly blokkerer kun
+*   Space (toggle) — ikke piltaster.
+*
+* ## Ingen Shadow DOM
+*
+* Komponenten bruker light DOM slik at CSS fra @sb1/indeks-css når alle
+* delelementer direkte.
+*
+* @example
+* <ix-checkbox-group>
+*   <span data-field="legend">Hvordan vil du bli kontaktet?</span>
+*   <span data-field="description">Velg én eller flere</span>
+*   <div data-field="items">
+*     <div class="ix-checkbox">
+*       <input type="checkbox" value="epost" />
+*       <label>E-post</label>
+*     </div>
+*   </div>
+*   <span data-field="error"></span>
+* </ix-checkbox-group>
+*/
+var checkboxGroupCounter = 0;
+var checkboxInputCounter = 0;
+var IxCheckboxGroup = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_errorObserver", null);
+		_defineProperty(this, "_childObserver", null);
+		_defineProperty(this, "_keydownListener", null);
+		_defineProperty(this, "_instanceId", 0);
+		_defineProperty(this, "_ownDisabled", /* @__PURE__ */ new WeakMap());
+	}
+	static get observedAttributes() {
+		return [
+			"disabled",
+			"readonly",
+			"name"
+		];
+	}
+	connectedCallback() {
+		this._wire();
+	}
+	disconnectedCallback() {
+		this._errorObserver?.disconnect();
+		this._errorObserver = null;
+		this._childObserver?.disconnect();
+		this._childObserver = null;
+		if (this._keydownListener) this.removeEventListener("keydown", this._keydownListener);
+		this._keydownListener = null;
+	}
+	attributeChangedCallback(attr, _oldValue, _newValue) {
+		if (!this.isConnected) return;
+		if (attr === "disabled" || attr === "readonly") this._syncHostStateToInputs();
+		if (attr === "name") this._wireInputs();
+	}
+	_wire() {
+		this.setAttribute("role", "group");
+		this._instanceId = ++checkboxGroupCounter;
+		const legend = this.querySelector("[data-field=\"legend\"]");
+		if (legend) {
+			if (!legend.id) legend.id = `ix-checkbox-group-legend-${this._instanceId}`;
+			this.setAttribute("aria-labelledby", legend.id);
+		}
+		const description = this.querySelector("[data-field=\"description\"]");
+		const error = this.querySelector("[data-field=\"error\"]");
+		const describedBy = [];
+		if (description) {
+			if (!description.id) description.id = `ix-checkbox-group-desc-${this._instanceId}`;
+			describedBy.push(description.id);
+		}
+		if (error) {
+			if (!error.id) error.id = `ix-checkbox-group-error-${this._instanceId}`;
+			describedBy.push(error.id);
+			error.setAttribute("aria-live", "polite");
+			this._errorObserver = new MutationObserver(() => {
+				this._syncInvalid(error);
+			});
+			this._errorObserver.observe(error, {
+				childList: true,
+				characterData: true,
+				subtree: true
+			});
+			this._syncInvalid(error);
+		}
+		if (describedBy.length > 0) this.setAttribute("aria-describedby", describedBy.join(" "));
+		this._wireInputs();
+		this._keydownListener = (e) => {
+			if (this.hasAttribute("readonly") && e.key === " ") e.preventDefault();
+		};
+		this.addEventListener("keydown", this._keydownListener);
+		this._childObserver = new MutationObserver((mutations) => {
+			const hasInputChange = mutations.some((m) => Array.from(m.addedNodes).some((n) => this._containsCheckboxInput(n)) || Array.from(m.removedNodes).some((n) => this._containsCheckboxInput(n)));
+			const hasNameRemoval = mutations.some((m) => m.type === "attributes" && m.attributeName === "name" && m.target instanceof HTMLInputElement && m.target.type === "checkbox" && !m.target.name);
+			if (hasInputChange || hasNameRemoval) this._wireInputs();
+		});
+		this._childObserver.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["name"]
+		});
+	}
+	_containsCheckboxInput(node) {
+		if (node.nodeType !== Node.ELEMENT_NODE) return false;
+		const el = node;
+		if (el.matches?.("input[type=\"checkbox\"]")) return true;
+		return !!el.querySelector?.("input[type=\"checkbox\"]");
+	}
+	_wireInputs() {
+		const inputs = Array.from(this.querySelectorAll("input[type=\"checkbox\"]"));
+		if (inputs.length === 0) return;
+		for (const input of inputs) {
+			if (!input.id) input.id = `ix-checkbox-${++checkboxInputCounter}`;
+			const wrapper = input.closest(".ix-checkbox") ?? input.parentElement;
+			if (wrapper) {
+				const label = wrapper.querySelector("label, .ix-checkbox__label");
+				if (label instanceof HTMLLabelElement && !label.htmlFor) label.htmlFor = input.id;
+			}
+		}
+		const hostName = this.getAttribute("name");
+		if (hostName) for (const input of inputs) input.name = hostName;
+		this._syncHostStateToInputs();
+	}
+	_syncInvalid(error) {
+		if (!!error.textContent?.trim()) this.setAttribute("aria-invalid", "true");
+		else this.removeAttribute("aria-invalid");
+	}
+	_syncHostStateToInputs() {
+		const inputs = Array.from(this.querySelectorAll("input[type=\"checkbox\"]"));
+		const isDisabled = this.hasAttribute("disabled");
+		for (const input of inputs) if (isDisabled) {
+			if (!this._ownDisabled.has(input)) this._ownDisabled.set(input, input.disabled);
+			input.disabled = true;
+		} else if (this._ownDisabled.has(input)) {
+			input.disabled = this._ownDisabled.get(input);
+			this._ownDisabled.delete(input);
+		}
+	}
+};
+//#endregion
+//#region lib/components/combobox/IxCombobox.ts
+/**
+* IxCombobox — ARIA-lim for en søkbar select med single- og multiselect.
+*
+* ## Designfilosofi
+*
+* Komponenten erstatter ingen native elementer. Forfatteren skriver <input>,
+* en options-liste og en skjult <select> i light DOM inni <ix-combobox>.
+* Komponentens jobb er å koble dem sammen med korrekt combobox/listbox-ARIA,
+* håndtere tastatur og filtrering, posisjonere lista, og synkronisere valgte
+* verdier til den skjulte <select> for form-innsending.
+*
+* ## Virtual focus
+*
+* DOM-fokus blir ALLTID på <input>. Aktivt listeelement spores med
+* `aria-activedescendant` som peker på option-ens id — fokus flyttes aldri
+* fysisk inn i lista. Dette lar brukeren skrive og pil-navigere samtidig, og
+* er den enkeltbeslutningen hjemmelagde comboboxer oftest bommer på.
+*
+* ## Single vs. multi
+*
+* `multiple` (attributt på host) bytter oppførsel — ikke to komponenter:
+*   - Single: valg setter input.value = label, lukker lista, synker én <option>.
+*   - Multi:  valg legges i et sett, lista holdes åpen, input tømmes, og en
+*             <data class="ix-chip" data-removable> rendres i chips-wrapperen.
+*             Chips nås med piltast (radiogruppe-modell), ikke egne tab-stopp.
+*
+* ## Posisjonering
+*
+* Lista posisjoneres manuelt med getBoundingClientRect + viewport-clamp (samme
+* grep som tooltip.ts) — position: fixed, flip over feltet ved plassmangel.
+* INGEN popover-API og INGEN avhengigheter: indeks-web er dependency-fritt og
+* bundles til CDN, og manuell posisjonering fungerer på hele browserslist.
+*
+* ## Delelementer (data-field / klasse i light DOM)
+*   - .ix-text-field > input           → combobox-input
+*   - .ix-combobox__toggle             → chevron-knapp (åpne/lukke)
+*   - .ix-combobox__listbox            → listbox-panel
+*   - .ix-combobox__option[data-value] → alternativer
+*   - .ix-combobox__no-hits            → melding ved 0 treff (role="status")
+*   - [data-field="chips"]             → chips-wrapper (kun multi)
+*   - [data-field="native"] (select)   → skjult select for form-synk
+*
+* @example Single
+* <ix-combobox data-no-hits-text="Ingen treff">
+*   <div class="ix-text-field">
+*     <input class="ix-text-field__input" placeholder="Søk …" />
+*     <button class="ix-combobox__toggle"></button>
+*   </div>
+*   <div class="ix-combobox__listbox">
+*     <div class="ix-combobox__option" data-value="47">
+*       <span class="ix-combobox__option-check" aria-hidden="true"></span>
+*       <span class="ix-combobox__option-label">Norge</span>
+*     </div>
+*   </div>
+*   <div class="ix-combobox__no-hits" role="status" hidden>Ingen treff</div>
+*   <select data-field="native" hidden></select>
+* </ix-combobox>
+*/
+var comboboxCounter = 0;
+var COLLATOR = new Intl.Collator("no", {
+	sensitivity: "base",
+	usage: "search"
+});
+var IS_TOUCH = typeof navigator !== "undefined" && /iphone|ipad|ipod|android/i.test(navigator.userAgent);
+var IxCombobox = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_instanceId", 0);
+		_defineProperty(this, "_input", null);
+		_defineProperty(this, "_listbox", null);
+		_defineProperty(this, "_toggle", null);
+		_defineProperty(this, "_chips", null);
+		_defineProperty(this, "_noHits", null);
+		_defineProperty(this, "_noHitsText", "");
+		_defineProperty(this, "_select", null);
+		_defineProperty(this, "_arrowHint", null);
+		_defineProperty(this, "_results", null);
+		_defineProperty(this, "_lastAnnouncedCount", -1);
+		_defineProperty(this, "_announceTimer", null);
+		_defineProperty(this, "_activeOption", null);
+		_defineProperty(this, "_onInput", null);
+		_defineProperty(this, "_onKeydown", null);
+		_defineProperty(this, "_onFocusin", null);
+		_defineProperty(this, "_onClick", null);
+		_defineProperty(this, "_onDocPointer", null);
+		_defineProperty(this, "_onReposition", null);
+		_defineProperty(this, "_optionObserver", null);
+	}
+	static get observedAttributes() {
+		return [
+			"multiple",
+			"disabled",
+			"readonly",
+			"name",
+			"data-no-hits-text",
+			"data-arrow-hint-text",
+			"data-remove-chip-label",
+			"data-chips-label"
+		];
+	}
+	connectedCallback() {
+		this._instanceId = ++comboboxCounter;
+		this._wire();
+	}
+	disconnectedCallback() {
+		const input = this._input;
+		if (input) {
+			if (this._onInput) input.removeEventListener("input", this._onInput);
+			if (this._onKeydown) input.removeEventListener("keydown", this._onKeydown);
+		}
+		if (this._onKeydown) this.removeEventListener("keydown", this._onKeydown);
+		if (this._onFocusin) this.removeEventListener("focusin", this._onFocusin);
+		if (this._onClick) this.removeEventListener("click", this._onClick);
+		if (this._onDocPointer) document.removeEventListener("pointerdown", this._onDocPointer, true);
+		this._removeRepositionListeners();
+		this._optionObserver?.disconnect();
+		if (this._announceTimer) {
+			clearTimeout(this._announceTimer);
+			this._announceTimer = null;
+		}
+		this._onInput = null;
+		this._onKeydown = null;
+		this._onFocusin = null;
+		this._onClick = null;
+		this._onDocPointer = null;
+		this._onReposition = null;
+		this._optionObserver = null;
+		this._activeOption = null;
+		this._arrowHint = null;
+		this._results = null;
+	}
+	attributeChangedCallback(name, _oldValue, newValue) {
+		if (!this.isConnected) return;
+		if (name === "disabled" || name === "readonly") this._syncControlState();
+		else if (name === "multiple") this._syncMultiState();
+		else if (name === "name") {
+			if (this._select) this._select.name = newValue ?? "";
+		} else if (name === "data-remove-chip-label" || name === "data-arrow-hint-text") {
+			this._syncChipLabels();
+			this._syncArrowHint();
+		} else if (name === "data-chips-label") this._syncChipsGroup();
+		else if (name === "data-no-hits-text") {
+			this._noHitsText = (newValue || "").trim();
+			this._updateNoHits();
+		}
+	}
+	get multiple() {
+		const attr = this.getAttribute("multiple");
+		return attr !== null && attr !== "false";
+	}
+	set multiple(value) {
+		this.toggleAttribute("multiple", value);
+	}
+	get _options() {
+		return this._listbox ? Array.from(this._listbox.querySelectorAll(".ix-combobox__option")) : [];
+	}
+	get _visibleOptions() {
+		return this._options.filter((o) => !o.hidden && o.getAttribute("aria-disabled") !== "true");
+	}
+	get _isDisabled() {
+		return this.hasAttribute("disabled") || this.hasAttribute("readonly");
+	}
+	_wire() {
+		this._input = this.querySelector(".ix-text-field input, input.ix-text-field__input, input");
+		this._listbox = this.querySelector(".ix-combobox__listbox");
+		this._toggle = this.querySelector(".ix-combobox__toggle");
+		this._chips = this.querySelector("[data-field=\"chips\"]");
+		this._noHits = this.querySelector(".ix-combobox__no-hits");
+		this._select = this.querySelector("select[data-field=\"native\"]");
+		const input = this._input;
+		const listbox = this._listbox;
+		if (!input || !listbox) return;
+		if (!this._select) {
+			const select = document.createElement("select");
+			select.setAttribute("data-field", "native");
+			select.hidden = true;
+			this.appendChild(select);
+			this._select = select;
+		}
+		const nameAttr = this.getAttribute("name");
+		if (nameAttr) this._select.name = nameAttr;
+		if (!input.id) input.id = `ix-combobox-input-${this._instanceId}`;
+		input.setAttribute("role", "combobox");
+		input.setAttribute("aria-autocomplete", "list");
+		input.setAttribute("autocomplete", "off");
+		input.setAttribute("aria-expanded", "false");
+		if (!listbox.id) listbox.id = `ix-combobox-listbox-${this._instanceId}`;
+		listbox.setAttribute("role", "listbox");
+		listbox.hidden = true;
+		input.setAttribute("aria-controls", listbox.id);
+		this._options.forEach((option, i) => {
+			if (!option.id) option.id = `${listbox.id}-option-${i}`;
+			option.setAttribute("role", "option");
+			if (this.multiple && !option.hasAttribute("aria-selected")) option.setAttribute("aria-selected", "false");
+		});
+		if (!this.multiple) this._normalizeSelectedAria();
+		if (this._toggle) {
+			this._toggle.type = "button";
+			this._toggle.setAttribute("tabindex", "-1");
+			if (IS_TOUCH) this._toggle.setAttribute("aria-hidden", "true");
+		}
+		if (this._noHits) {
+			this._noHitsText = (this.getAttribute("data-no-hits-text") || this._noHits.textContent || "").trim();
+			this._noHits.textContent = "";
+			this._noHits.removeAttribute("hidden");
+		}
+		this._ensureResultsEl();
+		this._syncMultiState();
+		this._syncControlState();
+		this._syncFromInitialSelection();
+		this._onInput = () => this._handleInput();
+		input.addEventListener("input", this._onInput);
+		this._onKeydown = (e) => this._handleKeydown(e);
+		this.addEventListener("keydown", this._onKeydown);
+		this._onClick = (e) => this._handleClick(e);
+		this.addEventListener("click", this._onClick);
+		this._onFocusin = () => {};
+		this._onDocPointer = (e) => {
+			if (!this.contains(e.target)) this._close();
+		};
+		document.addEventListener("pointerdown", this._onDocPointer, true);
+		this._optionObserver = new MutationObserver(() => this._rewireOptions());
+		this._optionObserver.observe(listbox, {
+			childList: true,
+			subtree: true
+		});
+	}
+	_rewireOptions() {
+		const listbox = this._listbox;
+		if (!listbox) return;
+		this._options.forEach((option, i) => {
+			if (!option.id) option.id = `${listbox.id}-option-${i}`;
+			option.setAttribute("role", "option");
+			if (this.multiple && !option.hasAttribute("aria-selected")) option.setAttribute("aria-selected", "false");
+		});
+		if (!this.multiple) this._normalizeSelectedAria();
+		this._syncFromInitialSelection();
+	}
+	_normalizeSelectedAria() {
+		for (const option of this._options) if (option.getAttribute("aria-selected") !== "true") option.removeAttribute("aria-selected");
+	}
+	get _isOpen() {
+		return !!this._listbox && !this._listbox.hidden;
+	}
+	_open() {
+		if (this._isDisabled || this._isOpen || !this._listbox || !this._input) return;
+		this._listbox.hidden = false;
+		this._input.setAttribute("aria-expanded", "true");
+		this.setAttribute("data-open", "");
+		this._position();
+		this._addRepositionListeners();
+		const selected = this._visibleOptions.find((o) => o.getAttribute("aria-selected") === "true");
+		this._setActive(selected ?? this._visibleOptions[0] ?? null);
+	}
+	_close() {
+		if (!this._isOpen || !this._listbox || !this._input) return;
+		this._listbox.hidden = true;
+		this._input.setAttribute("aria-expanded", "false");
+		this.removeAttribute("data-open");
+		this._setActive(null);
+		this._removeRepositionListeners();
+		this._updateNoHits();
+		this._resetResults();
+	}
+	_toggleOpen() {
+		if (this._isOpen) this._close();
+		else this._open();
+	}
+	_position() {
+		const listbox = this._listbox;
+		const field = this.querySelector(".ix-text-field") ?? this._input;
+		if (!listbox || !field) return;
+		const r = field.getBoundingClientRect();
+		const vh = window.innerHeight || 0;
+		const gap = 4;
+		listbox.style.width = `${r.width}px`;
+		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`;
+		else listbox.style.top = `${r.bottom + gap}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;
+		}
+	}
+	_handleInput() {
+		if (this._isDisabled) return;
+		const query = (this._input?.value ?? "").trim();
+		if (!this._isOpen) this._open();
+		else this._position();
+		this._filter(query);
+		this._setActive(this._visibleOptions[0] ?? null);
+	}
+	_filter(query) {
+		const options = this._options;
+		if (!query) options.forEach((o) => o.hidden = false);
+		else for (const option of options) option.hidden = !this._searchTexts(option).some((text) => this._match(text, query));
+		this._updateNoHits();
+		this._announceResults();
+	}
+	_searchTexts(option) {
+		return [
+			this._optionLabelText(option),
+			option.getAttribute("data-value") ?? "",
+			this._optionDescriptionText(option)
+		].filter((text) => text.length > 0);
+	}
+	_match(text, query) {
+		const l = text.length;
+		const q = query.length;
+		if (q === 0) return true;
+		if (q > l) return false;
+		for (let i = 0; i + q <= l; i++) if (COLLATOR.compare(text.slice(i, i + q), query) === 0) return true;
+		return false;
+	}
+	_updateNoHits() {
+		if (!this._noHits) return;
+		const show = this._isOpen && this._visibleOptions.length === 0;
+		this._noHits.textContent = show ? this._noHitsText : "";
+	}
+	_optionLabelText(option) {
+		return (option.querySelector(".ix-combobox__option-label")?.textContent ?? option.textContent ?? "").trim();
+	}
+	_optionDescriptionText(option) {
+		return (option.querySelector(".ix-combobox__option-description")?.textContent ?? "").trim();
+	}
+	_setActive(option) {
+		if (this._activeOption && this._activeOption !== option) this._activeOption.removeAttribute("data-active");
+		this._activeOption = option;
+		if (option) {
+			option.setAttribute("data-active", "");
+			this._input?.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView?.({ block: "nearest" });
+		} else this._input?.removeAttribute("aria-activedescendant");
+	}
+	_moveActive(delta) {
+		const visible = this._visibleOptions;
+		if (visible.length === 0) return;
+		let next = (this._activeOption ? visible.indexOf(this._activeOption) : -1) + delta;
+		if (next < 0) next = 0;
+		if (next >= visible.length) next = visible.length - 1;
+		this._setActive(visible[next]);
+	}
+	_handleKeydown(e) {
+		if (this._isDisabled) return;
+		const target = e.target;
+		if (e.key === "Escape" && this._isOpen) {
+			e.preventDefault();
+			this._close();
+			this._input?.focus();
+			return;
+		}
+		if (target instanceof HTMLDataElement && target.classList.contains("ix-chip")) {
+			this._handleChipKeydown(e, target);
+			return;
+		}
+		if (target !== this._input) return;
+		this._handleInputKeydown(e);
+	}
+	_handleInputKeydown(e) {
+		const input = this._input;
+		if (!input) return;
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				if (!this._isOpen) this._open();
+				else this._moveActive(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				if (!this._isOpen) this._open();
+				else this._moveActive(-1);
+				break;
+			case "Enter":
+				if (this._isOpen && this._activeOption) {
+					e.preventDefault();
+					this._selectOption(this._activeOption);
+				}
+				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();
+					}
+				}
+				break;
+		}
+	}
+	_handleChipKeydown(e, chip) {
+		const chips = this._chipElements();
+		const index = chips.indexOf(chip);
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault();
+				chips[index - 1]?.focus();
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				(chips[index + 1] ?? this._input)?.focus();
+				break;
+			case "Backspace":
+			case "Delete":
+			case "Enter":
+			case " ": {
+				e.preventDefault();
+				const value = chip.getAttribute("value") ?? "";
+				const next = chips[index + 1] ?? chips[index - 1] ?? this._input;
+				this._deselectValue(value);
+				next?.focus();
+				break;
+			}
+		}
+	}
+	_handleClick(e) {
+		if (this._isDisabled) return;
+		const target = e.target;
+		if (this._toggle && this._toggle.contains(target)) {
+			e.preventDefault();
+			this._input?.focus();
+			this._toggleOpen();
+			return;
+		}
+		const chip = target.closest("data.ix-chip");
+		if (chip && this.contains(chip)) {
+			e.preventDefault();
+			this._deselectValue(chip.getAttribute("value") ?? "");
+			this._input?.focus();
+			return;
+		}
+		const option = target.closest(".ix-combobox__option");
+		if (option && this._listbox?.contains(option)) {
+			if (option.getAttribute("aria-disabled") === "true") return;
+			this._selectOption(option);
+			return;
+		}
+		if (this._input && (target === this._input || this.querySelector(".ix-text-field")?.contains(target))) {
+			this._input.focus();
+			if (!this._isOpen) this._open();
+		}
+	}
+	_selectOption(option) {
+		const value = option.getAttribute("data-value") ?? "";
+		const label = this._optionLabelText(option);
+		if (this.multiple) {
+			if (option.getAttribute("aria-selected") === "true") this._deselectValue(value);
+			else {
+				option.setAttribute("aria-selected", "true");
+				this._addChip(value, label);
+				this._syncSelect();
+				this._emitChange();
+			}
+			if (this._input) this._input.value = "";
+			this._filter("");
+			this._setActive(option);
+		} else {
+			for (const o of this._options) if (o === option) o.setAttribute("aria-selected", "true");
+			else o.removeAttribute("aria-selected");
+			if (this._input) this._input.value = label;
+			this._syncSelect();
+			this._emitChange();
+			this._close();
+		}
+	}
+	_deselectValue(value) {
+		this._options.find((o) => (o.getAttribute("data-value") ?? "") === value)?.setAttribute("aria-selected", "false");
+		this._removeChip(value);
+		this._syncSelect();
+		this._emitChange();
+	}
+	_syncFromInitialSelection() {
+		const selected = this._options.filter((o) => o.getAttribute("aria-selected") === "true");
+		if (this.multiple) for (const option of selected) {
+			const value = option.getAttribute("data-value") ?? "";
+			if (!this._chipElements().some((c) => c.getAttribute("value") === value)) this._addChip(value, this._optionLabelText(option));
+		}
+		else if (selected[0] && this._input && !this._input.value) this._input.value = this._optionLabelText(selected[0]);
+		this._syncSelect();
+	}
+	_chipElements() {
+		return this._chips ? Array.from(this._chips.querySelectorAll("data.ix-chip")) : [];
+	}
+	_addChip(value, label) {
+		if (!this._chips) return;
+		if (this._chipElements().some((c) => c.getAttribute("value") === value)) return;
+		const chip = document.createElement("data");
+		chip.className = "ix-chip";
+		chip.setAttribute("data-removable", "");
+		chip.setAttribute("value", value);
+		chip.setAttribute("role", "button");
+		chip.setAttribute("tabindex", "-1");
+		chip.textContent = label;
+		chip.setAttribute("aria-label", this._chipLabel(label));
+		this._chips.appendChild(chip);
+	}
+	_removeChip(value) {
+		this._chipElements().find((c) => c.getAttribute("value") === value)?.remove();
+	}
+	_chipLabel(label) {
+		const remove = this.getAttribute("data-remove-chip-label");
+		return remove ? `${label}, ${remove}` : label;
+	}
+	_syncChipLabels() {
+		for (const chip of this._chipElements()) chip.setAttribute("aria-label", this._chipLabel((chip.textContent ?? "").trim()));
+	}
+	_syncSelect() {
+		const select = this._select;
+		if (!select) return;
+		select.toggleAttribute("multiple", this.multiple);
+		const selectedOptions = this._options.filter((o) => o.getAttribute("aria-selected") === "true");
+		select.textContent = "";
+		for (const option of selectedOptions) {
+			const value = option.getAttribute("data-value") ?? "";
+			const opt = new Option(this._optionLabelText(option), value, true, true);
+			select.add(opt);
+		}
+	}
+	_emitChange() {
+		this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+	}
+	_syncControlState() {
+		const input = this._input;
+		if (!input) return;
+		const disabled = this.hasAttribute("disabled");
+		const readonly = this.hasAttribute("readonly");
+		input.disabled = disabled;
+		input.readOnly = readonly;
+		this.toggleAttribute("data-disabled", disabled);
+		this.toggleAttribute("data-readonly", readonly);
+		if (disabled || readonly) this._close();
+	}
+	_syncMultiState() {
+		const multiple = this.multiple;
+		if (this._listbox) this._listbox.setAttribute("aria-multiselectable", multiple ? "true" : "false");
+		this._syncChipsGroup();
+		this._syncArrowHint();
+		this._syncSelect();
+	}
+	_syncChipsGroup() {
+		const chips = this._chips;
+		if (!chips) return;
+		if (this.multiple) {
+			chips.setAttribute("role", "group");
+			const label = this.getAttribute("data-chips-label");
+			if (label) chips.setAttribute("aria-label", label);
+			else chips.removeAttribute("aria-label");
+		} else {
+			chips.removeAttribute("role");
+			chips.removeAttribute("aria-label");
+		}
+	}
+	_syncArrowHint() {
+		if (!this._input) return;
+		const hint = this.getAttribute("data-arrow-hint-text");
+		if (this.multiple && hint) {
+			const el = this._ensureArrowHintEl();
+			el.textContent = hint;
+			this._addDescribedBy(el.id);
+		} else if (this._arrowHint) {
+			this._arrowHint.textContent = "";
+			this._removeDescribedBy(this._arrowHint.id);
+		}
+	}
+	_ensureArrowHintEl() {
+		if (!this._arrowHint) {
+			const el = document.createElement("span");
+			el.className = "ix-sr-only";
+			el.id = `ix-combobox-arrow-hint-${this._instanceId}`;
+			this.appendChild(el);
+			this._arrowHint = el;
+		}
+		return this._arrowHint;
+	}
+	_addDescribedBy(id) {
+		const input = this._input;
+		if (!input || !id) return;
+		const tokens = (input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+		if (!tokens.includes(id)) {
+			tokens.push(id);
+			input.setAttribute("aria-describedby", tokens.join(" "));
+		}
+	}
+	_removeDescribedBy(id) {
+		const input = this._input;
+		if (!input || !id) return;
+		const next = (input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean).filter((t) => t !== id);
+		if (next.length) input.setAttribute("aria-describedby", next.join(" "));
+		else input.removeAttribute("aria-describedby");
+	}
+	_ensureResultsEl() {
+		if (!this._results) {
+			const el = document.createElement("div");
+			el.className = "ix-sr-only";
+			el.setAttribute("role", "status");
+			el.id = `ix-combobox-results-${this._instanceId}`;
+			this.appendChild(el);
+			this._results = el;
+		}
+		return this._results;
+	}
+	_announceResults() {
+		const el = this._results;
+		if (!el) return;
+		const count = this._visibleOptions.length;
+		if (!this._isOpen || count === 0) return;
+		if (count === this._lastAnnouncedCount) return;
+		const template = this.getAttribute("data-results-text");
+		if (!template) return;
+		const text = template.replace("{n}", String(count));
+		if (this._announceTimer) clearTimeout(this._announceTimer);
+		this._announceTimer = setTimeout(() => {
+			if (!this.isConnected) return;
+			el.textContent = text;
+			this._lastAnnouncedCount = count;
+		}, 250);
+	}
+	_resetResults() {
+		if (this._announceTimer) {
+			clearTimeout(this._announceTimer);
+			this._announceTimer = null;
+		}
+		this._lastAnnouncedCount = -1;
+		if (this._results) this._results.textContent = "";
+	}
+};
+//#endregion
+//#region lib/components/field/formats.ts
+/**
+* Slot-definisjoner for pattern-strenger. Et pattern består av slot-tegn som
+* brukeren fyller, og faste separatorer (alt annet) som settes inn automatisk.
+*
+*   `0` → ett siffer
+*   `a` → én bokstav (inkl. æ ø å)
+*   `*` → hvilket som helst tegn
+*
+* Alt annet i patternet er en fast separator: `"000 00 000"`, `"00.00.0000"`.
+*/
+var SLOT_DEFINITIONS = {
+	"0": /\d/,
+	a: /[a-zA-ZæøåÆØÅ]/,
+	"*": /[^\s]/
+};
+function compileTokens(pattern) {
+	const tokens = [];
+	for (const char of pattern) {
+		const slot = SLOT_DEFINITIONS[char];
+		tokens.push(slot ? {
+			type: "slot",
+			match: slot
+		} : {
+			type: "literal",
+			value: char
+		});
+	}
+	return tokens;
+}
+/**
+* Lager en formatter fra en pattern-streng.
+*
+* `format` fyller slots med matchende tegn fra den rå verdien og setter inn
+* separatorer først når neste slot faktisk fylles (ingen dinglende separator på
+* slutten mens man skriver). Tegn som ikke passer neste slot — enten fordi
+* brukeren skrev flere tegn enn patternet har plasser, eller skrev noe som ikke
+* hører hjemme (bokstav i et sifferfelt) — droppes IKKE: den ledende delen som
+* passer formateres, og resten legges uformatert på til slutt i samme
+* rekkefølge brukeren skrev. Alt brukeren skriver forblir synlig.
+*
+* `parse` er tapsfri: den fjerner kun separator-tegnene patternet definerer
+* (literal-tokens) og beholder alt annet i rekkefølge — ingen cap på antall
+* slots, ingen filtrering av «ugyldige» tegn. Slik overlever et feilaktig tegn
+* (bokstav i et sifferfelt) i den rå verdien og kan fanges av validering.
+*/
+function createPatternFormatter(pattern) {
+	const tokens = compileTokens(pattern);
+	const separators = new Set(tokens.filter((t) => t.type === "literal").map((t) => t.value));
+	return {
+		parse(display) {
+			let raw = "";
+			for (const char of display) if (!separators.has(char)) raw += char;
+			return raw;
+		},
+		format(raw) {
+			const chars = [...raw];
+			let out = "";
+			let pendingLiterals = "";
+			let i = 0;
+			for (const token of tokens) {
+				if (token.type === "literal") {
+					pendingLiterals += token.value;
+					continue;
+				}
+				if (i >= chars.length || !token.match.test(chars[i])) break;
+				out += pendingLiterals + chars[i];
+				pendingLiterals = "";
+				i++;
+			}
+			return out + chars.slice(i).join("");
+		}
+	};
+}
+/**
+* Beløp er ikke en fast-lengde pattern-maske: lengden varierer og tusenskillet
+* forskyver seg mens man skriver. Derfor en egen formatter.
+*
+* Rå verdi = siffer med valgfritt desimalskilletegn (`decimalSeparator`), uten
+* tusenskille: `"1234567,89"`. Visning = med tusenskille: `"1 234 567,89"`.
+*/
+function createAmountFormatter(options = {}) {
+	const group = options.groupSeparator ?? " ";
+	const decimal = options.decimalSeparator ?? ",";
+	const stripToRaw = (display) => {
+		return display.split(group).join("");
+	};
+	return {
+		parse: stripToRaw,
+		format(raw) {
+			const chars = [...raw];
+			let leading = "";
+			let seenDecimal = false;
+			let i = 0;
+			for (; i < chars.length; i++) {
+				const char = chars[i];
+				if (char >= "0" && char <= "9") leading += char;
+				else if (char === decimal && !seenDecimal) {
+					leading += decimal;
+					seenDecimal = true;
+				} else break;
+			}
+			const rest = chars.slice(i).join("");
+			if (leading === "") return rest;
+			const [intPart, ...decimals] = leading.split(decimal);
+			const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, group);
+			return (decimals.length > 0 ? `${grouped}${decimal}${decimals.join("")}` : grouped) + rest;
+		}
+	};
+}
+/**
+* Utleder tusenskille og desimalskilletegn for en locale via `Intl.NumberFormat`.
+* Brukes for locale-bevisst beløpsformatering uten å hardkode separatorer.
+*/
+function amountFormatterForLocale(locale) {
+	const parts = new Intl.NumberFormat(locale).formatToParts(1234567.8);
+	return createAmountFormatter({
+		groupSeparator: parts.find((p) => p.type === "group")?.value ?? " ",
+		decimalSeparator: parts.find((p) => p.type === "decimal")?.value ?? ","
+	});
+}
+var registry = /* @__PURE__ */ new Map();
+/**
+* Registrerer en navngitt formatter som deretter kan brukes via
+* `data-format="<navn>"` på et input inne i et ix-field, hvor som helst i appen.
+*
+* Team kan registrere sine egne varianter (orgnr, kortnummer, …) uten at
+* designsystemet må endres — «felles, men ikke avhengig av oss».
+*/
+function registerFormat(name, formatter) {
+	registry.set(name, formatter);
+}
+/** Slår opp en registrert formatter. Returnerer `undefined` om navnet er ukjent. */
+function resolveFormat(name) {
+	return registry.get(name);
+}
+registerFormat("phone", {
+	...createPatternFormatter("000 00 000"),
+	live: true
+});
+registerFormat("ssn", {
+	...createPatternFormatter("000000 00000"),
+	live: true
+});
+registerFormat("date", {
+	...createPatternFormatter("00.00.0000"),
+	live: true
+});
+registerFormat("account", {
+	...createPatternFormatter("0000 00 00000"),
+	live: true
+});
+registerFormat("orgnr", {
+	...createPatternFormatter("000 000 000"),
+	live: true
+});
+registerFormat("amount", {
+	...createAmountFormatter({
+		groupSeparator: " ",
+		decimalSeparator: ","
+	}),
+	live: true
+});
+//#endregion
 //#region lib/components/field/IxField.ts
+/**
+* IxField — tilgjengelighetslim mellom label, input og hjelpetekster.
+*
+* ## Designfilosofi
+*
+* Komponenten erstatter ingen native HTML-elementer. `<label>`, `<input>`,
+* `<select>`, `<textarea>` og hjelpetekster skrives som vanlig HTML inne i
+* `<ix-field>`. Komponenten sin eneste jobb er å sette opp ARIA-koblingene
+* mellom dem — arbeid som er kjedelig å gjøre manuelt og lett å gjøre feil.
+*
+* Denne tilnærmingen betyr at:
+*   - Native nettleser-atferd, validering og styling forblir intakt.
+*   - Alle form-attributter (`required`, `disabled`, `name`, `value`, osv.)
+*     settes direkte på native elementet — ikke som props til en wrapper.
+*   - Komponenten kan brukes med alle typer input uten kodeendringer.
+*
+* ## Hva komponenten gjør
+*
+* 1. Kobler `<label>` til input via `for`/`id`-paret.
+*    Genererer en stabil ID på input om den mangler en.
+*
+* 2. Setter `aria-describedby` på input med IDer til description og
+*    error-elementet, slik at skjermlesere leser dem opp etter label og verdi.
+*
+* 3. Setter `aria-live="polite"` på error-elementet.
+*    Error-elementet skal alltid ligge i DOM — tomt betyr ingen feil.
+*    Dette er et krav fra ARIA Live Regions: elementet må eksistere i DOM
+*    *før* innholdet settes inn for at skjermlesere skal fange opp endringen.
+*    Hadde vi injisert elementet dynamisk ville mange skjermlesere gått glipp
+*    av meldingen.
+*
+*    Vi bruker *ikke* `role="alert"` fordi det impliserer `aria-live="assertive"`
+*    som avbryter brukeren. Feilmeldinger i skjema er viktige, men ikke så
+*    kritiske at de bør avbryte — `polite` venter til skjermleseren er ferdig.
+*
+* 4. Bruker MutationObserver på error-elementet. Når innholdet endres:
+*    - Ikke-tomt → `aria-invalid="true"` på input (visuell og semantisk feil)
+*    - Tomt      → `aria-invalid` fjernes
+*    Applikasjonen styrer altså feilmelding ved å sette/tømme textContent —
+*    komponenten holder input-tilstanden synkronisert automatisk.
+*
+* ## Identifisering av delelementer
+*
+* Komponenten finner delelementer via:
+*   - `<label>`                       → første label-element
+*   - `input | select | textarea`     → første native form-kontroll
+*   - `[data-field="description"]`    → hjelpetekst
+*   - `[data-field="error"]`          → feilmelding (alltid til stede, kan være tom)
+*   - `[data-field="prefix"]`         → visuell prefix (skjules med aria-hidden)
+*   - `[data-field="suffix"]`         → visuell suffix (skjules med aria-hidden)
+*
+* `data-field` brukes fremfor `slot`-attributtet selv om Shadow DOM ikke er i
+* bruk. `slot` er et reservert nøkkelord knytt til Shadow DOM og ville vært
+* misvisende, samt kunne krasje om `<ix-field>` senere pakkes inn i en
+* komponent med Shadow DOM.
+*
+* ## Ingen Shadow DOM
+*
+* Komponenten bruker light DOM. Det betyr at CSS fra `@sb1/indeks-css` når
+* alle delelementer uten videre, og at ARIA-attributtene er fullt synlige i
+* den tilgjengelighetstreet nettleseren eksponerer til hjelpemiddelteknologi.
+*
+* @example Grunnleggende bruk
+* <ix-field>
+*   <label>E-postadresse</label>
+*   <span data-field="description">Vi sender kvittering til denne adressen</span>
+*   <input type="email" name="email" />
+*   <span data-field="error"></span>
+* </ix-field>
+*
+* @example Sett feilmelding programmatisk
+* const errorEl = document.querySelector('ix-field [data-field="error"]');
+* errorEl.textContent = 'Oppgi en gyldig e-postadresse';
+* // → input får automatisk aria-invalid="true"
+*
+* errorEl.textContent = '';
+* // → aria-invalid fjernes
+*/
 var fieldCounter = 0;
 var ICON_URL = "https://cdn.sparebank1.no/icons/info.svg";
 var IxField = class extends HTMLElement {
@@ -46,6 +1117,43 @@ var IxField = class extends HTMLElement {
 		_defineProperty(this, "_stateObserver", null);
 		_defineProperty(this, "_charCountListener", null);
 		_defineProperty(this, "_charCountControl", null);
+		_defineProperty(this, "_formatterProp", null);
+		_defineProperty(this, "_formatTeardown", null);
+		_defineProperty(this, "_activeFormatter", null);
+		_defineProperty(this, "_activeControl", null);
+		_defineProperty(this, "_formatMirror", null);
+	}
+	/**
+	* Sett en formatter direkte på instansen (høyest presedens). Lar konsumenten
+	* gi vilkårlig format/parse-logikk som ikke kan uttrykkes som attributt.
+	*/
+	set formatter(value) {
+		this._formatterProp = value;
+		if (this.isConnected) this._wireFormatting();
+	}
+	get formatter() {
+		return this._formatterProp;
+	}
+	/**
+	* Den rå (uformaterte) verdien til feltet. Sannheten ligger i den skjulte
+	* mirror-inputen; uten mirror (feltet mangler `name`) utledes den ved å
+	* `parse()` den synlige verdien. Tom streng når ingen formatter er aktiv
+	* eller det ikke finnes noe input.
+	*
+	* Praktisk for ren JS/HTML: `document.querySelector('ix-field').rawValue`.
+	* Merk at `<form>`-innsending og `new FormData(form)` også gir rå verdi
+	* automatisk, siden mirror-inputen bærer det opprinnelige `name`-et.
+	*/
+	get rawValue() {
+		if (this._formatMirror) return this._formatMirror.value;
+		const control = this._activeControl;
+		const formatter = this._activeFormatter;
+		if (!control) return "";
+		return formatter ? formatter.parse(control.value) : control.value;
+	}
+	/** True når den aktive formatteren formaterer live (mens man skriver). */
+	get live() {
+		return !!this._activeFormatter?.live;
 	}
 	static get observedAttributes() {
 		return [
@@ -57,6 +1165,7 @@ var IxField = class extends HTMLElement {
 	connectedCallback() {
 		this._wire();
 		this._syncTooltip();
+		this._wireFormatting();
 	}
 	disconnectedCallback() {
 		this._observer?.disconnect();
@@ -64,6 +1173,7 @@ var IxField = class extends HTMLElement {
 		this._stateObserver?.disconnect();
 		this._stateObserver = null;
 		this._teardownCharCount();
+		this._teardownFormatting();
 	}
 	attributeChangedCallback(name, _oldValue, _newValue) {
 		if (name === "tooltip" || name === "tooltip-label" || name === "tooltip-placement") {
@@ -94,6 +1204,7 @@ var IxField = class extends HTMLElement {
 					}
 				}
 			}
+			if (mutations.some((m) => m.attributeName === "data-format" || m.attributeName === "data-format-pattern" || m.attributeName === "data-format-live")) this._wireFormatting();
 		});
 		this._stateObserver.observe(control, {
 			attributes: true,
@@ -101,7 +1212,10 @@ var IxField = class extends HTMLElement {
 				"disabled",
 				"readonly",
 				"maxlength",
-				"minlength"
+				"minlength",
+				"data-format",
+				"data-format-pattern",
+				"data-format-live"
 			]
 		});
 		if (!control.id) control.id = `ix-field-${++fieldCounter}`;
@@ -174,6 +1288,124 @@ var IxField = class extends HTMLElement {
 		if (max) el.textContent = `${current}/${max}`;
 		else if (min) el.textContent = `${current} tegn (minimum ${min})`;
 	}
+	_resolveFormatter(control) {
+		if (this._formatterProp) return this._formatterProp;
+		const name = control.getAttribute("data-format");
+		if (name) {
+			const named = resolveFormat(name);
+			if (named) return named;
+		}
+		const pattern = control.getAttribute("data-format-pattern");
+		if (pattern) return createPatternFormatter(pattern);
+		return null;
+	}
+	_applyLiveOverride(formatter, control) {
+		if (!control.hasAttribute("data-format-live")) return formatter;
+		const live = control.getAttribute("data-format-live") !== "false";
+		if (live === !!formatter.live) return formatter;
+		return {
+			...formatter,
+			live
+		};
+	}
+	_wireFormatting() {
+		this._teardownFormatting();
+		const control = this.querySelector("input");
+		if (!control) return;
+		const base = this._resolveFormatter(control);
+		if (!base) return;
+		const formatter = this._applyLiveOverride(base, control);
+		this._activeFormatter = formatter;
+		this._activeControl = control;
+		const initialRaw = control.value;
+		const originalName = control.getAttribute("name");
+		let mirror = null;
+		if (originalName !== null) {
+			control.setAttribute("name", `${originalName}_formatted`);
+			mirror = document.createElement("input");
+			mirror.type = "hidden";
+			mirror.name = originalName;
+			mirror.value = initialRaw;
+			mirror.disabled = control.disabled;
+			control.after(mirror);
+			this._formatMirror = mirror;
+		}
+		const listeners = [];
+		const on = (type, fn) => {
+			control.addEventListener(type, fn);
+			listeners.push([type, fn]);
+		};
+		if (formatter.live) {
+			on("input", () => this._maskInPlace());
+			control.value = formatter.format(initialRaw);
+		} else {
+			on("focus", () => {
+				control.value = this.rawValue;
+			});
+			on("input", () => {
+				if (this._formatMirror) this._formatMirror.value = control.value;
+			});
+			on("blur", () => {
+				control.value = formatter.format(this.rawValue);
+			});
+			control.value = this.contains(document.activeElement) && document.activeElement === control ? initialRaw : formatter.format(initialRaw);
+		}
+		this._formatTeardown = () => {
+			for (const [type, fn] of listeners) control.removeEventListener(type, fn);
+			control.value = this.rawValue;
+			if (originalName !== null) control.setAttribute("name", originalName);
+			mirror?.remove();
+			this._formatMirror = null;
+			this._activeFormatter = null;
+			this._activeControl = null;
+		};
+	}
+	_maskInPlace() {
+		const formatter = this._activeFormatter;
+		const control = this._activeControl;
+		if (!formatter || !control) return;
+		const display = control.value;
+		const caret = control.selectionStart ?? display.length;
+		const before = formatter.parse(display.slice(0, caret)).length;
+		const raw = formatter.parse(display);
+		const next = formatter.format(raw);
+		let newCaret = next.length;
+		if (before === 0) newCaret = 0;
+		else for (let i = 1; i <= next.length; i++) if (formatter.parse(next.slice(0, i)).length >= before) {
+			newCaret = i;
+			break;
+		}
+		if (next !== display) control.value = next;
+		control.setSelectionRange(newCaret, newCaret);
+		if (this._formatMirror) this._formatMirror.value = raw;
+	}
+	/**
+	* Re-anvender formateringen fra en rå verdi.
+	*
+	* Nyttig for controlled React: når React skriver den rå prop-verdien ved en
+	* re-render fyres ikke `input`-eventet, så visningen må oppdateres eksplisitt.
+	* Kall denne etter commit (f.eks. i `useLayoutEffect`). No-op når ingen
+	* formatter er aktiv.
+	*
+	* @param raw Ny rå verdi. Utelates den, reformateres gjeldende rå verdi.
+	*/
+	refreshFormat(raw) {
+		const formatter = this._activeFormatter;
+		const control = this._activeControl;
+		if (!formatter || !control) return;
+		const nextRaw = raw ?? this.rawValue;
+		if (this._formatMirror) this._formatMirror.value = nextRaw;
+		const focused = document.activeElement === control;
+		const nextDisplay = !formatter.live && focused ? nextRaw : formatter.format(nextRaw);
+		if (nextDisplay !== control.value) {
+			control.value = nextDisplay;
+			if (formatter.live) control.setSelectionRange(nextDisplay.length, nextDisplay.length);
+		}
+	}
+	_teardownFormatting() {
+		this._formatTeardown?.();
+		this._formatTeardown = null;
+	}
 	_syncInvalid(control, error) {
 		const hasError = !!error.textContent?.trim();
 		if (hasError) control.setAttribute("aria-invalid", "true");
@@ -184,6 +1416,7 @@ var IxField = class extends HTMLElement {
 		this.toggleAttribute("data-disabled", control.disabled);
 		const readOnly = "readOnly" in control ? control.readOnly : false;
 		this.toggleAttribute("data-readonly", readOnly);
+		if (this._formatMirror) this._formatMirror.disabled = control.disabled;
 	}
 	_syncTooltip() {
 		const content = this.getAttribute("tooltip");
@@ -219,6 +1452,7 @@ var IxField = class extends HTMLElement {
 		this.querySelector(".ix-field__tooltip-btn")?.remove();
 	}
 };
+_defineProperty(IxField, "registerFormatter", registerFormat);
 //#endregion
 //#region lib/components/icon/IxIcon.ts
 var ICON_CDN_BASE = "https://cdn.sparebank1.no/icons";
@@ -407,6 +1641,227 @@ var IxIcon = class extends HTMLElement {
 	}
 };
 //#endregion
+//#region lib/utils/platform.ts
+/**
+* Plattform-deteksjon for web components.
+*
+* Funksjoner (ikke modul-konstanter) fordi userAgent leses ved kall — det gjør
+* grenene testbare via stub av `navigator.userAgent`, og unngår å cache en verdi
+* ved import-tid som kan være feil i SSR-/testmiljø.
+*/
+/**
+* True når koden kjører på iOS (iPhone/iPad/iPod).
+*
+* Brukes til iOS-spesifikke a11y-workarounds, f.eks. at VoiceOver ikke leser
+* løpende `aria-valuenow`-endringer på `role="progressbar"` — se IxProgressBar.
+* SSR-guardet: returnerer false når `navigator` ikke finnes.
+*/
+function isIOS() {
+	if (typeof navigator === "undefined") return false;
+	return /iPad|iPhone|iPod/.test(navigator.userAgent);
+}
+//#endregion
+//#region lib/components/progress-bar/IxProgressBar.ts
+/**
+* IxProgressBar — viser fremdrift i én sammenhengende prosess.
+*
+* DOM-generator: web componenten eier og genererer all indre HTML (header med
+* label + verdi/statusikon, track + fill, og en støttetekst-region).
+* Forfatteren skriver kun host-elementet `<ix-progress-bar>` med attributter —
+* ingen intern struktur.
+*
+* Tilstander (`data-state`):
+*  - `active` (default): role="progressbar" med aria-valuenow/min/max på host.
+*    Nøytral/primær fremdriftsfarge. Ingen statusikon. Kan vise prosent.
+*  - `success` / `error`: rollen `progressbar` FJERNES (prosessen er ferdig/avbrutt).
+*    Status formidles semantisk «tilsvarende Message» — `data-status`
+*    (success/danger) kobler --ix-color-status-* og et dekorativt
+*    `<ix-icon data-badge>` vises alltid. Støtteteksten er en aria-live-region
+*    (role="status") så overgangen annonseres politely.
+*
+* Komponenten er rent informativ og aldri fokuserbar (setter aldri tabindex).
+* Ugyldige verdier klampes: value < 0 → 0, > 100 → 100, ikke-numerisk → 0.
+*
+* iOS-workaround: VoiceOver leser ikke løpende `aria-valuenow`-endringer på
+* `role="progressbar"`. På iOS byttes derfor rollen i `active` til `role="img"`
+* og verdien bakes inn i `aria-label` (samme mønster som u-elements sin
+* u-progress). Desktop beholder ekte progressbar-semantikk.
+*/
+var progressBarCounter = 0;
+var STATE_ICON = {
+	success: "check",
+	error: "priority_high"
+};
+var STATE_STATUS = {
+	success: "success",
+	error: "danger"
+};
+var IxProgressBar = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_instanceId", ++progressBarCounter);
+		_defineProperty(this, "_header", null);
+		_defineProperty(this, "_label", null);
+		_defineProperty(this, "_headerEnd", null);
+		_defineProperty(this, "_track", null);
+		_defineProperty(this, "_fill", null);
+		_defineProperty(this, "_support", null);
+		_defineProperty(this, "_supportText", null);
+		_defineProperty(this, "_icon", null);
+	}
+	static get observedAttributes() {
+		return [
+			"value",
+			"data-state",
+			"label",
+			"data-support-text",
+			"data-show-value",
+			"data-value-text"
+		];
+	}
+	connectedCallback() {
+		this._ensureStructure();
+		this._update();
+	}
+	attributeChangedCallback(_name, oldValue, newValue) {
+		if (!this.isConnected) return;
+		if (oldValue === newValue) return;
+		this._update();
+	}
+	disconnectedCallback() {}
+	/** Bygger den indre strukturen én gang (idempotent). */
+	_ensureStructure() {
+		if (this._track) return;
+		this._header = document.createElement("div");
+		this._header.className = "ix-progress-bar__header";
+		this._label = document.createElement("span");
+		this._label.className = "ix-progress-bar__label";
+		this._label.id = `ix-progress-bar-label-${this._instanceId}`;
+		this._headerEnd = document.createElement("span");
+		this._headerEnd.className = "ix-progress-bar__value";
+		this._header.append(this._label, this._headerEnd);
+		this._track = document.createElement("div");
+		this._track.className = "ix-progress-bar__track";
+		this._fill = document.createElement("div");
+		this._fill.className = "ix-progress-bar__fill";
+		this._track.appendChild(this._fill);
+		this._support = document.createElement("p");
+		this._support.className = "ix-progress-bar__support";
+		this._support.id = `ix-progress-bar-support-${this._instanceId}`;
+		this._support.setAttribute("role", "status");
+		this._support.setAttribute("aria-live", "polite");
+		this._support.setAttribute("aria-atomic", "false");
+		this._supportText = document.createElement("span");
+		this._support.appendChild(this._supportText);
+		this.append(this._header, this._track, this._support);
+	}
+	_update() {
+		if (!this._track || !this._fill || !this._header || !this._label || !this._headerEnd || !this._support || !this._supportText) return;
+		const state = this._resolveState();
+		const clamped = this._clampValue(this.getAttribute("value"));
+		const label = this.getAttribute("label");
+		const supportText = this.getAttribute("data-support-text");
+		const valueText = this.getAttribute("data-value-text");
+		const showValue = this.hasAttribute("data-show-value");
+		const isActive = state === "active";
+		const fillPercent = state === "success" ? 100 : clamped;
+		this.style.setProperty("--ii-progress-bar-fill", `${fillPercent}%`);
+		this._label.textContent = label ?? "";
+		this._label.hidden = !label;
+		this._updateIconAndValue(state, clamped, showValue, isActive, Boolean(label));
+		this._supportText.textContent = supportText ?? "";
+		Boolean(label) || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby");
+		if (isActive) {
+			this.removeAttribute("data-status");
+			if (isIOS()) {
+				this.setAttribute("role", "img");
+				this.removeAttribute("aria-valuemin");
+				this.removeAttribute("aria-valuemax");
+				this.removeAttribute("aria-valuenow");
+				this.removeAttribute("aria-valuetext");
+				this.removeAttribute("aria-labelledby");
+				const iosLabel = [label, valueText ?? `${Math.round(clamped)}\u00A0%`].filter(Boolean).join(", ");
+				if (label || !this.hasAttribute("aria-label")) this.setAttribute("aria-label", iosLabel);
+				this._setAriaRef("aria-describedby", supportText ? this._support.id : null);
+			} else {
+				this.setAttribute("role", "progressbar");
+				this.setAttribute("aria-valuemin", "0");
+				this.setAttribute("aria-valuemax", "100");
+				this.setAttribute("aria-valuenow", String(Math.round(clamped)));
+				if (valueText) this.setAttribute("aria-valuetext", valueText);
+				else this.removeAttribute("aria-valuetext");
+				this._setAriaRef("aria-labelledby", label ? this._label.id : null);
+				this._setAriaRef("aria-describedby", supportText ? this._support.id : null);
+			}
+		} else {
+			this.removeAttribute("role");
+			this.removeAttribute("aria-valuemin");
+			this.removeAttribute("aria-valuemax");
+			this.removeAttribute("aria-valuenow");
+			this.removeAttribute("aria-valuetext");
+			this.removeAttribute("aria-label");
+			this.removeAttribute("aria-labelledby");
+			this.removeAttribute("aria-describedby");
+			this.setAttribute("data-status", STATE_STATUS[state]);
+		}
+	}
+	/**
+	* Plasserer statusikon og verdi. Følger Figma:
+	*  - active + data-show-value → «NN %» i header-slutten.
+	*  - success/error med label → ikon i header-slutten (til høyre for label).
+	*  - success/error uten label → ikon foran støtteteksten.
+	*/
+	_updateIconAndValue(state, clamped, showValue, isActive, hasLabel) {
+		if (!this._headerEnd || !this._support || !this._supportText || !this._header) return;
+		if (isActive && showValue) {
+			this._removeIcon();
+			this._headerEnd.textContent = `${Math.round(clamped)}\u00A0%`;
+			this._headerEnd.hidden = false;
+		} else {
+			this._headerEnd.textContent = "";
+			this._headerEnd.hidden = true;
+		}
+		if (!isActive) {
+			const icon = this._ensureIcon();
+			icon.setAttribute("name", STATE_ICON[state]);
+			if (hasLabel) {
+				this._headerEnd.hidden = true;
+				this._header.appendChild(icon);
+			} else this._support.insertBefore(icon, this._supportText);
+		} else this._removeIcon();
+		const headerHasContent = hasLabel || isActive && showValue || !isActive && hasLabel;
+		this._header.hidden = !headerHasContent;
+	}
+	_ensureIcon() {
+		if (!this._icon) {
+			this._icon = document.createElement("ix-icon");
+			this._icon.setAttribute("data-badge", "");
+			this._icon.setAttribute("aria-hidden", "true");
+		}
+		return this._icon;
+	}
+	_removeIcon() {
+		this._icon?.remove();
+	}
+	_resolveState() {
+		const raw = this.getAttribute("data-state");
+		if (raw === "success" || raw === "error") return raw;
+		return "active";
+	}
+	/** Klamper til 0–100. Ikke-numerisk → 0. */
+	_clampValue(raw) {
+		const parsed = Number(raw);
+		if (raw === null || raw.trim() === "" || !Number.isFinite(parsed)) return 0;
+		if (parsed < 0) return 0;
+		if (parsed > 100) return 100;
+		return parsed;
+	}
+	_setAriaRef(attr, id) {
+		if (id) this.setAttribute(attr, id);
+		else this.removeAttribute(attr);
+	}
+};
+//#endregion
 //#region lib/components/radio-group/IxRadioGroup.ts
 /**
 * IxRadioGroup — ARIA-lim for radioknapp-grupper.
@@ -612,6 +2067,345 @@ var IxRadioGroup = class extends HTMLElement {
 	}
 };
 //#endregion
+//#region lib/components/tabs/IxTabs.ts
+/**
+* IxTabs — ARIA-lim for faner (tabs) i light DOM.
+*
+* ## Designfilosofi
+*
+* Komponenten erstatter ingen native elementer. Forfatteren skriver semantisk
+* HTML — en liste med faner og ett panel per fane — og <ix-tabs> kobler dem
+* sammen med ARIA, roving tabindex, tastaturnavigasjon og panel-visning.
+* Logikken er portet fra u-elements (u-tabs), men til Indeks' light-DOM-
+* konvensjon (ingen Shadow DOM, ingen ::slotted).
+*
+* Fire custom elements samarbeider:
+*   - <ix-tabs>       — rot og koordinator. Eier all kabling og tastatur.
+*   - <ix-tab-list>   — role="tablist", horisontal orientering.
+*   - <ix-tab>        — role="tab", én per fane.
+*   - <ix-tab-panel>  — role="tabpanel", ett innholdspanel per fane.
+*
+* Underelementene setter kun sin egen `role` (så de fungerer isolert); <ix-tabs>
+* er den autoritative koordinatoren og kjører ved connectedCallback.
+*
+* ## Hva <ix-tabs> gjør
+*
+* 1. Setter role="tablist" + aria-orientation="horizontal" på tab-lista,
+*    role="tab" på fanene og role="tabpanel" på panelene.
+* 2. Genererer stabile IDer på faner og paneler (der de mangler) og setter opp
+*    kryssreferansene aria-controls (fane → panel) og aria-labelledby
+*    (panel → fane). Eksisterende IDer og aria-controls respekteres. Fane[i]
+*    kobles til panel[i], eller til panelet fanens aria-controls peker på.
+* 3. Manuell aktivering: piltast (Venstre/Høyre) og Home/End flytter kun FOKUS
+*    via roving tabindex (fokusert fane får tabindex=0, resten -1).
+*    Piltast-navigasjonen looper rundt endene. Enter/Space (og klikk) aktiverer
+*    den fokuserte fanen.
+* 4. Kun én fane er valgt om gangen. Ved aktivering flyttes aria-selected +
+*    tabindex til ny fane, tilhørende panel vises, øvrige skjules ([hidden] +
+*    aria-hidden). Panelet gjøres ikke fokuserbart — det er ikke en egen
+*    tab-stopp; innholdet i panelet bærer sin egen fokusrekkefølge.
+*    Fane→panel-kobling skjer via delt data-value (ellers aria-controls,
+*    ellers posisjon) — se _getPanel.
+* 5. Minst én fane er valgt ved mount — enten den som har aria-selected="true"
+*    i markup, ellers den første fanen.
+* 6. Ved aktivering (klikk/tastatur) sendes et bubbling CustomEvent('change')
+*    på <ix-tabs> slik at en React-wrapper kan lese aria-selected og kalle
+*    onChange. Programmatisk init og ekstern (kontrollert) synk sender IKKE
+*    change — kun ekte brukerinteraksjon.
+* 7. En MutationObserver re-wirer når faner/paneler legges til eller fjernes
+*    (typisk React conditional rendering), og reagerer på ekstern endring av
+*    aria-selected (kontrollert React-modus) ved å reconcile-e resten.
+*
+* ## Ingen Shadow DOM
+*
+* Light DOM slik at CSS fra @sb1/indeks-css treffer .ix-tabs__* og tag-
+* selektorene direkte, og ARIA-relasjonene fungerer på tvers av elementene.
+*
+* @example
+* <ix-tabs class="ix-tabs">
+*   <ix-tab-list class="ix-tabs__list">
+*     <ix-tab class="ix-tabs__tab">Oversikt</ix-tab>
+*     <ix-tab class="ix-tabs__tab">Detaljer</ix-tab>
+*   </ix-tab-list>
+*   <ix-tab-panel class="ix-tabs__panel">Oversikt-innhold</ix-tab-panel>
+*   <ix-tab-panel class="ix-tabs__panel">Detaljer-innhold</ix-tab-panel>
+* </ix-tabs>
+*/
+var tabsCounter = 0;
+var ROLE = "role";
+var ARIA_SELECTED = "aria-selected";
+var ARIA_CONTROLS = "aria-controls";
+var ARIA_LABELLEDBY = "aria-labelledby";
+var ARIA_HIDDEN = "aria-hidden";
+var DATA_VALUE = "data-value";
+function isTab(el) {
+	return el instanceof HTMLElement && (el.tagName === "IX-TAB" || el.getAttribute(ROLE) === "tab");
+}
+function isPanel(el) {
+	return el instanceof HTMLElement && (el.tagName === "IX-TAB-PANEL" || el.getAttribute(ROLE) === "tabpanel");
+}
+var IxTabs = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_mutationObserver", null);
+		_defineProperty(this, "_clickListener", null);
+		_defineProperty(this, "_keydownListener", null);
+		_defineProperty(this, "_instanceId", 0);
+		_defineProperty(this, "_internalUpdate", false);
+	}
+	connectedCallback() {
+		this._instanceId = ++tabsCounter;
+		this._clickListener = (e) => this._onClick(e);
+		this._keydownListener = (e) => this._onKeydown(e);
+		this.addEventListener("click", this._clickListener);
+		this.addEventListener("keydown", this._keydownListener);
+		this._mutationObserver = new MutationObserver((records) => this._onMutations(records));
+		this._mutationObserver.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [ARIA_SELECTED]
+		});
+		this._wire();
+	}
+	disconnectedCallback() {
+		this._mutationObserver?.disconnect();
+		this._mutationObserver = null;
+		if (this._clickListener) this.removeEventListener("click", this._clickListener);
+		this._clickListener = null;
+		if (this._keydownListener) this.removeEventListener("keydown", this._keydownListener);
+		this._keydownListener = null;
+	}
+	/** Faner i rekkefølge (direkte barn av tab-lista). */
+	_getTabs() {
+		const list = this.querySelector("ix-tab-list, [role=\"tablist\"]");
+		if (!list) return [];
+		return Array.from(list.children).filter(isTab);
+	}
+	/** Paneler i rekkefølge (direkte barn av <ix-tabs>). */
+	_getPanels() {
+		return Array.from(this.children).filter(isPanel);
+	}
+	/**
+	* Finn panelet en fane styrer. Prioritet:
+	*   1. Eksplisitt `aria-controls` (forfatter- eller WC-satt).
+	*   2. Delt `data-value` — kobler fane og panel eksplisitt, uavhengig av
+	*      DOM-rekkefølge (React setter dette; ren HTML kan også sette det).
+	*   3. Posisjon (fane[i] → panel[i]) som siste utvei for enkel markup.
+	*/
+	_getPanel(tab, index) {
+		const controls = tab.getAttribute(ARIA_CONTROLS);
+		if (controls) {
+			const el = this.ownerDocument.getElementById(controls);
+			if (el) return el;
+		}
+		const value = tab.getAttribute(DATA_VALUE);
+		if (value) {
+			const match = this._getPanels().find((p) => p.getAttribute(DATA_VALUE) === value);
+			if (match) return match;
+		}
+		return this._getPanels()[index] ?? null;
+	}
+	/**
+	* Kobler roller, IDer og kryssreferanser, og setter initial valgt fane.
+	* Idempotent — kan kjøres på nytt når DOM endres.
+	*/
+	_wire() {
+		const list = this.querySelector("ix-tab-list, [role=\"tablist\"]");
+		if (!list) return;
+		if (!list.getAttribute(ROLE)) list.setAttribute(ROLE, "tablist");
+		if (!list.getAttribute("aria-orientation")) list.setAttribute("aria-orientation", "horizontal");
+		const tabs = this._getTabs();
+		if (tabs.length === 0) return;
+		tabs.forEach((tab, i) => {
+			if (!tab.getAttribute(ROLE)) tab.setAttribute(ROLE, "tab");
+			if (!tab.id) tab.id = `ix-tab-${this._instanceId}-${i}`;
+			const panel = this._getPanel(tab, i);
+			if (panel) {
+				if (!panel.getAttribute(ROLE)) panel.setAttribute(ROLE, "tabpanel");
+				if (!panel.id) panel.id = `ix-tab-panel-${this._instanceId}-${i}`;
+				if (!tab.getAttribute(ARIA_CONTROLS)) tab.setAttribute(ARIA_CONTROLS, panel.id);
+				if (!panel.getAttribute(ARIA_LABELLEDBY)) panel.setAttribute(ARIA_LABELLEDBY, tab.id);
+			}
+		});
+		const selected = tabs.find((t) => t.getAttribute(ARIA_SELECTED) === "true") ?? tabs[0];
+		this.setSelected(selected, false);
+	}
+	/**
+	* Aktiverer en fane: flytter aria-selected + roving tabindex hit, viser dens
+	* panel og skjuler de øvrige. Sender kun change ved ekte brukerinteraksjon
+	* (dispatch=true) OG når valget faktisk endres.
+	*/
+	setSelected(selected, dispatch = false) {
+		if (!selected) return;
+		const tabs = this._getTabs();
+		if (!tabs.includes(selected)) return;
+		const changed = selected.getAttribute(ARIA_SELECTED) !== "true";
+		this._internalUpdate = true;
+		tabs.forEach((tab, i) => {
+			const isSel = tab === selected;
+			tab.setAttribute(ARIA_SELECTED, String(isSel));
+			tab.tabIndex = isSel ? 0 : -1;
+			const panel = this._getPanel(tab, i);
+			if (panel) this._syncPanel(panel, isSel);
+		});
+		this._internalUpdate = false;
+		this._mutationObserver?.takeRecords();
+		if (dispatch && changed) this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+	}
+	/**
+	* Vis/skjul et panel. Skjult panel fjernes fra a11y-treet og lesefokus.
+	* Panelet gjøres ikke fokuserbart — det inneholder eget innhold (tekst,
+	* lenker, felt) og skal ikke være en egen tab-stopp. Har panelet ikke
+	* fokuserbart innhold, klarer skjermlesere seg med aria-labelledby-koblingen.
+	*/
+	_syncPanel(panel, show) {
+		panel.setAttribute(ARIA_HIDDEN, String(!show));
+		if (show) panel.removeAttribute("hidden");
+		else panel.setAttribute("hidden", "");
+	}
+	/** Flytt fokus (roving tabindex) til en fane uten å aktivere den. */
+	_moveFocus(tabs, target) {
+		for (const tab of tabs) tab.tabIndex = tab === target ? 0 : -1;
+		target.focus();
+	}
+	/** Neste fane fra `from`, i retning `step`, med loop rundt endene. */
+	_step(tabs, from, step) {
+		const n = tabs.length;
+		return (from + step + n) % n;
+	}
+	_onClick(e) {
+		const tabs = this._getTabs();
+		const target = e.target;
+		const tab = target ? tabs.find((t) => t === target || t.contains(target)) : void 0;
+		if (tab) this.setSelected(tab, true);
+	}
+	_onKeydown(e) {
+		const tabs = this._getTabs();
+		const target = e.target;
+		const current = target ? tabs.findIndex((t) => t === target || t.contains(target)) : -1;
+		if (current === -1) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			this.setSelected(tabs[current], true);
+			return;
+		}
+		let next;
+		if (e.key === "ArrowRight") next = this._step(tabs, current, 1);
+		else if (e.key === "ArrowLeft") next = this._step(tabs, current, -1);
+		else if (e.key === "Home") next = 0;
+		else if (e.key === "End") next = tabs.length - 1;
+		else return;
+		e.preventDefault();
+		this._moveFocus(tabs, tabs[next]);
+	}
+	_onMutations(records) {
+		if (this._internalUpdate) return;
+		let structural = false;
+		let externalSelected = null;
+		for (const record of records) if (record.type === "childList") {
+			if (Array.from(record.addedNodes).some(nodeAffectsTabs) || Array.from(record.removedNodes).some(nodeAffectsTabs)) structural = true;
+		} else if (record.type === "attributes" && record.attributeName === ARIA_SELECTED) {
+			const t = record.target;
+			if (t instanceof HTMLElement && isTab(t) && t.getAttribute(ARIA_SELECTED) === "true") externalSelected = t;
+		}
+		if (structural) this._wire();
+		else if (externalSelected) this.setSelected(externalSelected, false);
+	}
+};
+function nodeAffectsTabs(node) {
+	if (node.nodeType !== Node.ELEMENT_NODE) return false;
+	const el = node;
+	return isTab(el) || isPanel(el) || !!el.querySelector?.("ix-tab, ix-tab-panel, [role=\"tab\"], [role=\"tabpanel\"]");
+}
+/** role="tablist" + horisontal orientering. Koordineres av <ix-tabs>. */
+var IxTabList = class extends HTMLElement {
+	connectedCallback() {
+		if (!this.getAttribute(ROLE)) this.setAttribute(ROLE, "tablist");
+		if (!this.getAttribute("aria-orientation")) this.setAttribute("aria-orientation", "horizontal");
+	}
+};
+/** role="tab". Aktiv-tilstand og tabindex styres av <ix-tabs>. */
+var IxTab = class extends HTMLElement {
+	connectedCallback() {
+		if (!this.getAttribute(ROLE)) this.setAttribute(ROLE, "tab");
+	}
+};
+/** role="tabpanel". Vis/skjul styres av <ix-tabs>. */
+var IxTabPanel = class extends HTMLElement {
+	connectedCallback() {
+		if (!this.getAttribute(ROLE)) this.setAttribute(ROLE, "tabpanel");
+	}
+};
+//#endregion
+//#region lib/modal/modal.ts
+var ATTR_OPEN = "data-modal-open";
+var ATTR_CLOSE = "data-modal-close";
+var ATTR_NO_BACKDROP = "data-no-close-on-backdrop";
+var openModals = /* @__PURE__ */ new Set();
+var previousBodyOverflow;
+function handleOpened(dialog) {
+	if (openModals.has(dialog)) return;
+	if (openModals.size === 0) {
+		previousBodyOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+	}
+	openModals.add(dialog);
+	moveOpeningFocus(dialog);
+}
+function handleClosed(dialog) {
+	if (!openModals.delete(dialog)) return;
+	if (openModals.size === 0) {
+		document.body.style.overflow = previousBodyOverflow ?? "";
+		previousBodyOverflow = void 0;
+	}
+}
+function moveOpeningFocus(dialog) {
+	if (dialog.querySelector("[autofocus]")) return;
+	if (!dialog.hasAttribute("tabindex")) dialog.tabIndex = -1;
+	dialog.focus();
+}
+function handleClick(e) {
+	const target = e.target;
+	if (!target?.closest) return;
+	const opener = target.closest(`[${ATTR_OPEN}]`);
+	if (opener) {
+		const id = opener.getAttribute(ATTR_OPEN);
+		const dialog = id ? document.getElementById(id) : null;
+		if (dialog instanceof HTMLDialogElement && !dialog.open) {
+			dialog.showModal();
+			if (dialog.classList.contains("ix-modal")) handleOpened(dialog);
+		}
+		return;
+	}
+	const closer = target.closest(`[${ATTR_CLOSE}]`);
+	if (closer) {
+		closer.closest("dialog")?.close();
+		return;
+	}
+	if (target instanceof HTMLDialogElement && target.classList.contains("ix-modal") && !target.hasAttribute(ATTR_NO_BACKDROP)) target.close();
+}
+function handleClose(e) {
+	const target = e.target;
+	if (target instanceof HTMLDialogElement && target.classList.contains("ix-modal")) handleClosed(target);
+}
+var observer = new MutationObserver((records) => {
+	for (const record of records) {
+		const dialog = record.target;
+		if (!(dialog instanceof HTMLDialogElement)) continue;
+		if (!dialog.classList.contains("ix-modal")) continue;
+		if (dialog.open) handleOpened(dialog);
+		else handleClosed(dialog);
+	}
+});
+document.addEventListener("click", handleClick);
+document.addEventListener("close", handleClose, true);
+observer.observe(document.documentElement, {
+	subtree: true,
+	attributes: true,
+	attributeFilter: ["open"]
+});
+//#endregion
 //#region lib/tooltip/tooltip.ts
 var TOOLTIP_ID = "ix-tooltip-singleton";
 var ATTR = "data-tooltip";
@@ -734,5 +2528,12 @@ document.addEventListener("keydown", handleKeydown);
 customElements.define("ix-field", IxField);
 customElements.define("ix-icon", IxIcon);
 customElements.define("ix-radio-group", IxRadioGroup);
+customElements.define("ix-checkbox-group", IxCheckboxGroup);
+customElements.define("ix-combobox", IxCombobox);
+customElements.define("ix-progress-bar", IxProgressBar);
+customElements.define("ix-tabs", IxTabs);
+customElements.define("ix-tab-list", IxTabList);
+customElements.define("ix-tab", IxTab);
+customElements.define("ix-tab-panel", IxTabPanel);
 //#endregion
-export { COMMON_ICON_NAMES, IxField, IxIcon, IxRadioGroup };
+export { COMMON_ICON_NAMES, IxCheckboxGroup, IxCombobox, IxField, IxIcon, IxProgressBar, IxRadioGroup, IxTab, IxTabList, IxTabPanel, IxTabs, amountFormatterForLocale, createAmountFormatter, createPatternFormatter, registerFormat, resolveFormat };