@sb1/indeks-web 0.24.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @sb1/indeks-web
 
+## 0.26.0
+
+### Minor Changes
+
+- 250261e: Én hook per del og ingen `:where()` i accordion, read-more og tabs (ADR-DS-009).
+  
+  Breaking: Accordion styler `<details>` og `<summary>` direkte, og innholdet må ha `ix-accordion__content`. Tabs styler `<ix-tab-list>`, `<ix-tab>` og `<ix-tab-panel>` inni `.ix-tabs`. `ix-accordion__item`, `ix-accordion__header`, `ix-tabs__list`, `ix-tabs__tab` og `ix-tabs__panel` styles ikke lenger, og React setter dem ikke.
+- 140b0cb: Én hook per del og ingen `:where()` i checkbox, checkbox-group, chip og modal (ADR-DS-009).
+  
+  Breaking: `ix-checkbox--disabled` er fjernet. Bruk `disabled` på inputen. `ix-checkbox__input` og `ix-checkbox__label` styles ikke lenger, men gjør ingen skade i markupen.
+- 04e6c71: ProgressBar viser nå status som i Figma. I `success` og `error` ser støtteteksten under baren ut som en ValidationMessage, med statusikonet foran. Ikonet vises også uten støttetekst.
+  
+  **Breaking:** Statusikonet er flyttet fra headeren til støtteteksten, og feilikonet heter nå `close` i stedet for `priority_high`. Har du stylet `.ix-progress-bar__header ix-icon`, eller lett etter ikonet med navn, må du bruke `.ix-progress-bar__support ix-icon[data-badge]`. Meldingen bruker ikke `data-field="error"`, så et `<ix-field>` rundt en ProgressBar tar den ikke for sin egen feilmelding.
+- 636e79c: Én hook per del og ingen `:where()` i radio-group (ADR-DS-009).
+  
+  Breaking: `ix-radio-button`, `ix-radio-button__input` og `ix-radio-button__label` er fjernet. Radio styles bare inni `ix-radio-group` eller `.ix-radio-group`, og klassene gjør ingen skade i markupen. `ix-radio-group` finner labelen i inputens forelder.
+- 04e6c71: ValidationMessage har fått en suksessvariant: `data-status="success"` i HTML og `status="success"` i React gir grønn tekst og en sirkel med hake. `<ix-field>`, `<ix-checkbox-group>`, `<ix-radio-group>` og `<ix-phone-number-field>` setter ikke `aria-invalid` for en suksessmelding, og `<ix-phone-number-field>` setter heller ikke `data-state="error"`.
+  
+  Feilmeldingen i `<ix-phone-number-field>` har nå samme avstand mellom ikon og tekst som i de andre skjemafeltene (`xs` i stedet for `2xs`).
+
+### Patch Changes
+
+- 329f308: Én hook per del og ingen `:where()` i combobox og date-field (ADR-DS-009).
+  
+  Breaking: chips-wrapperen i combobox styles fra `data-field="chips"`, ikke `ix-combobox__chips`. Toggle, listbox og option styles bare fra BEM-klassene, ikke fra `role` eller `.ix-text-field > button`. `ix-combobox` finner inputen med `.ix-text-field > input`.
+- dc9139a: Modal: scroll-låsen på `<body>` slippes nå også når en åpen modal fjernes fra DOM-en, for eksempel når forelderen fjerner den i `onOpenChange` eller ved ruteskifte. Før ble siden stående uten scroll.
+
+## 0.25.0
+
+No changes in this release.
+
 ## 0.24.0
 
 No changes in this release.

package/dist/npm/index.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -7,8 +7,7 @@ function _typeof(o) {
 		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
 	}, _typeof(o);
 }
-//#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -19,14 +18,12 @@ function toPrimitive(t, r) {
 	}
 	return ("string" === r ? String : Number)(t);
 }
-//#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+// \0@oxc-project+runtime@0.155.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.149.0/helpers/esm/defineProperty.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -35,8 +32,7 @@ function _defineProperty(e, r, t) {
 		writable: !0
 	}) : e[r] = t, e;
 }
-//#endregion
-//#region lib/components/checkbox-group/IxCheckboxGroup.ts
+// lib/components/checkbox-group/IxCheckboxGroup.ts
 /**
 * IxCheckboxGroup — ARIA-lim for checkbox-grupper.
 *
@@ -163,7 +159,8 @@ var IxCheckboxGroup = class extends HTMLElement {
 			this._errorObserver.observe(error, {
 				childList: true,
 				characterData: true,
-				subtree: true
+				subtree: true,
+				attributeFilter: ["data-status"]
 			});
 			this._syncInvalid(error);
 		}
@@ -198,7 +195,7 @@ var IxCheckboxGroup = class extends HTMLElement {
 			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");
+				const label = wrapper.querySelector("label");
 				if (label instanceof HTMLLabelElement && !label.htmlFor) label.htmlFor = input.id;
 			}
 		}
@@ -207,7 +204,7 @@ var IxCheckboxGroup = class extends HTMLElement {
 		this._syncHostStateToInputs();
 	}
 	_syncInvalid(error) {
-		if (!!error.textContent?.trim()) this.setAttribute("aria-invalid", "true");
+		if (!!error.textContent?.trim() && error.dataset.status !== "success") this.setAttribute("aria-invalid", "true");
 		else this.removeAttribute("aria-invalid");
 	}
 	_syncHostStateToInputs() {
@@ -222,8 +219,7 @@ var IxCheckboxGroup = class extends HTMLElement {
 		}
 	}
 };
-//#endregion
-//#region lib/components/combobox/IxCombobox.ts
+// lib/components/combobox/IxCombobox.ts
 /**
 * IxCombobox — ARIA-lim for en søkbar select med single- og multiselect.
 *
@@ -269,7 +265,7 @@ var IxCheckboxGroup = class extends HTMLElement {
 * @example Single
 * <ix-combobox data-no-hits-text="Ingen treff">
 *   <div class="ix-text-field">
-*     <input class="ix-text-field__input" placeholder="Søk …" />
+*     <input placeholder="Søk …" />
 *     <button class="ix-combobox__toggle"></button>
 *   </div>
 *   <div class="ix-combobox__listbox">
@@ -390,7 +386,7 @@ var IxCombobox = class extends HTMLElement {
 		return this.hasAttribute("disabled") || this.hasAttribute("readonly");
 	}
 	_wire() {
-		this._input = this.querySelector(".ix-text-field input, input.ix-text-field__input, input");
+		this._input = this.querySelector(".ix-text-field > input");
 		this._listbox = this.querySelector(".ix-combobox__listbox");
 		this._toggle = this.querySelector(".ix-combobox__toggle");
 		this._chips = this.querySelector("[data-field=\"chips\"]");
@@ -867,8 +863,7 @@ var IxCombobox = class extends HTMLElement {
 		if (this._results) this._results.textContent = "";
 	}
 };
-//#endregion
-//#region lib/components/field/formats.ts
+// 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.
@@ -1109,8 +1104,7 @@ registerFormat("amount", {
 	}),
 	live: true
 });
-//#endregion
-//#region lib/components/date-field/IxDateField.ts
+// lib/components/date-field/IxDateField.ts
 /**
 * IxDateField — datofelt: formatert tekst-input (dd.mm.åååå) + native OS-kalender.
 *
@@ -1319,8 +1313,7 @@ var IxDateField = class extends HTMLElement {
 		}
 	}
 };
-//#endregion
-//#region lib/components/dropdown/IxDropdown.ts
+// lib/components/dropdown/IxDropdown.ts
 /**
 * IxDropdown — ARIA-lim for en nedtrekksmeny med handlinger eller navigasjon.
 *
@@ -1816,8 +1809,7 @@ var IxDropdown = class extends HTMLElement {
 		}
 	}
 };
-//#endregion
-//#region lib/components/field/IxField.ts
+// lib/components/field/IxField.ts
 /**
 * IxField — tilgjengelighetslim mellom label, input og hjelpetekster.
 *
@@ -2030,7 +2022,8 @@ var IxField = class extends HTMLElement {
 			this._observer.observe(error, {
 				childList: true,
 				characterData: true,
-				subtree: true
+				subtree: true,
+				attributeFilter: ["data-status"]
 			});
 			this._syncInvalid(control, error);
 		}
@@ -2197,7 +2190,7 @@ var IxField = class extends HTMLElement {
 		this._formatTeardown = null;
 	}
 	_syncInvalid(control, error) {
-		const hasError = !!error.textContent?.trim();
+		const hasError = !!error.textContent?.trim() && error.dataset.status !== "success";
 		if (hasError) control.setAttribute("aria-invalid", "true");
 		else control.removeAttribute("aria-invalid");
 		control.closest(".ix-dropdown")?.toggleAttribute("data-invalid", hasError);
@@ -2245,8 +2238,7 @@ var IxField = class extends HTMLElement {
 	}
 };
 _defineProperty(IxField, "registerFormatter", registerFormat);
-//#endregion
-//#region lib/components/icon/IxIcon.ts
+// lib/components/icon/IxIcon.ts
 var ICON_CDN_BASE = "https://cdn.sparebank1.no/icons";
 var COMMON_ICON_NAMES = [
 	"close",
@@ -2432,8 +2424,7 @@ var IxIcon = class extends HTMLElement {
 		}
 	}
 };
-//#endregion
-//#region lib/components/phone-number-field/countries.ts
+// lib/components/phone-number-field/countries.ts
 var NORDIC = /* @__PURE__ */ new Set([
 	"SE",
 	"DK",
@@ -2758,8 +2749,7 @@ function getDefaultCountries(locale = "nb") {
 function normalizeLocale(value) {
 	return value === "nn" || value === "en" ? value : "nb";
 }
-//#endregion
-//#region lib/components/phone-number-field/IxPhoneNumberField.ts
+// lib/components/phone-number-field/IxPhoneNumberField.ts
 /**
 * IxPhoneNumberField — telefonnummer med landvelger.
 *
@@ -2827,7 +2817,7 @@ function normalizeLocale(value) {
 *   <div data-field="items">
 *     <ix-combobox data-field="country" class="ix-combobox" data-no-hits-text="Ingen treff">
 *       <div class="ix-text-field">
-*         <input class="ix-text-field__input" aria-label="Landkode" />
+*         <input aria-label="Landkode" />
 *         <button type="button" class="ix-combobox__toggle" aria-label="Vis land"></button>
 *       </div>
 *       <div class="ix-combobox__listbox" hidden></div>
@@ -2929,7 +2919,8 @@ var IxPhoneNumberField = class extends HTMLElement {
 			this._errorObserver.observe(error, {
 				childList: true,
 				characterData: true,
-				subtree: true
+				subtree: true,
+				attributeFilter: ["data-status"]
 			});
 			this._syncInvalid(error);
 		} else this.removeAttribute("aria-invalid");
@@ -2958,13 +2949,17 @@ var IxPhoneNumberField = class extends HTMLElement {
 		const combobox = this._combobox();
 		return Array.from(this.querySelectorAll("input")).find((input) => !combobox?.contains(input)) ?? null;
 	}
+	_hasError(error) {
+		return !!error?.textContent?.trim() && error.dataset.status !== "success";
+	}
 	_syncInvalid(error) {
-		if (!!error.textContent?.trim()) this.setAttribute("aria-invalid", "true");
+		if (this._hasError(error)) this.setAttribute("aria-invalid", "true");
 		else this.removeAttribute("aria-invalid");
 		this._syncDataState();
 	}
 	_syncDataState() {
-		const state = !!this.querySelector(":scope > [data-field=\"error\"]")?.textContent?.trim() ? "error" : this.hasAttribute("readonly") ? "readonly" : this.hasAttribute("disabled") ? "disabled" : null;
+		const error = this.querySelector(":scope > [data-field=\"error\"]");
+		const state = this._hasError(error) ? "error" : this.hasAttribute("readonly") ? "readonly" : this.hasAttribute("disabled") ? "disabled" : null;
 		if (state) this.setAttribute("data-state", state);
 		else this.removeAttribute("data-state");
 	}
@@ -3096,8 +3091,7 @@ var IxPhoneNumberField = class extends HTMLElement {
 		})) if (!input.hasAttribute(attr)) input.setAttribute(attr, value);
 	}
 };
-//#endregion
-//#region lib/components/popover/IxPopover.ts
+// lib/components/popover/IxPopover.ts
 /**
 * IxPopover — ARIA-lim for en popover med kontekstuell informasjon eller handlinger.
 *
@@ -3407,8 +3401,7 @@ var IxPopover = class extends HTMLElement {
 		}
 	}
 };
-//#endregion
-//#region lib/utils/platform.ts
+// lib/utils/platform.ts
 /**
 * Plattform-deteksjon for web components.
 *
@@ -3427,13 +3420,12 @@ function isIOS() {
 	if (typeof navigator === "undefined") return false;
 	return /iPad|iPhone|iPod/.test(navigator.userAgent);
 }
-//#endregion
-//#region lib/components/progress-bar/IxProgressBar.ts
+// 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).
+* label + verdi, track + fill, og en støttetekst-region).
 * Forfatteren skriver kun host-elementet `<ix-progress-bar>` med attributter —
 * ingen intern struktur.
 *
@@ -3441,9 +3433,11 @@ function isIOS() {
 *  - `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
+*    `data-status` (success/danger) kobler --ix-color-status-* til fyllet og
+*    til støtteteksten, som får badge-ikon foran og ser ut som en
+*    ValidationMessage, slik Figma viser. Den bruker ikke `data-field="error"`:
+*    ix-field og gruppene leter etter det i hele subtreet og ville tatt
+*    meldingen for feltets feilmelding. Støtteteksten er en aria-live-region
 *    (role="status") så overgangen annonseres politely.
 *
 * Komponenten er rent informativ og aldri fokuserbar (setter aldri tabindex).
@@ -3457,7 +3451,7 @@ function isIOS() {
 var progressBarCounter = 0;
 var STATE_ICON = {
 	success: "check",
-	error: "priority_high"
+	error: "close"
 };
 var STATE_STATUS = {
 	success: "success",
@@ -3535,8 +3529,9 @@ var IxProgressBar = class extends HTMLElement {
 		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._updateValue(clamped, showValue, isActive, Boolean(label));
 		this._supportText.textContent = supportText ?? "";
+		this._updateStatusMessage(state);
 		Boolean(label) || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby");
 		if (isActive) {
 			this.removeAttribute("data-status");
@@ -3572,32 +3567,28 @@ var IxProgressBar = class extends HTMLElement {
 			this.setAttribute("data-status", STATE_STATUS[state]);
 		}
 	}
+	/** Prosentverdien vises i header-slutten, bare i active. */
+	_updateValue(clamped, showValue, isActive, hasLabel) {
+		if (!this._headerEnd || !this._header) return;
+		const visible = isActive && showValue;
+		this._headerEnd.textContent = visible ? `${Math.round(clamped)}\u00A0%` : "";
+		this._headerEnd.hidden = !visible;
+		this._header.hidden = !hasLabel && !visible;
+	}
 	/**
-	* 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.
+	* I success/error får støtteteksten badge-ikon foran. Ikonet vises også
+	* uten tekst, så tilstanden ikke bare vises med farge (WCAG 1.4.1).
 	*/
-	_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;
+	_updateStatusMessage(state) {
+		if (!this._support || !this._supportText) return;
+		if (state === "active") {
+			this._icon?.remove();
+			return;
+		}
+		const icon = this._ensureIcon();
+		icon.setAttribute("name", STATE_ICON[state]);
+		icon.setAttribute("data-status", STATE_STATUS[state]);
+		this._support.insertBefore(icon, this._supportText);
 	}
 	_ensureIcon() {
 		if (!this._icon) {
@@ -3607,9 +3598,6 @@ var IxProgressBar = class extends HTMLElement {
 		}
 		return this._icon;
 	}
-	_removeIcon() {
-		this._icon?.remove();
-	}
 	_resolveState() {
 		const raw = this.getAttribute("data-state");
 		if (raw === "success" || raw === "error") return raw;
@@ -3628,64 +3616,32 @@ var IxProgressBar = class extends HTMLElement {
 		else this.removeAttribute(attr);
 	}
 };
-//#endregion
-//#region lib/components/radio-group/IxRadioGroup.ts
+// lib/components/radio-group/IxRadioGroup.ts
 /**
-* IxRadioGroup — ARIA-lim for radioknapp-grupper.
-*
-* ## Designfilosofi
-*
-* Komponenten erstatter ingen native HTML-elementer. Forfatteren skriver
-* native <input type="radio">, <label> og hjelpetekster inni <ix-radio-group>.
-* Komponenten sin eneste jobb er å sette opp ARIA-koblingene mellom dem.
-*
-* ## Hva komponenten gjør
-*
-* 1. Setter role="radiogroup" på host slik at skjermlesere annonserer gruppen
-*    med riktig rolle og leser legend-teksten som gruppens tilgjengelige navn.
-*
-* 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.
+* IxRadioGroup kobler ARIA mellom native radioknapper, legend og hjelpetekster.
+* Forfatteren skriver markupen selv.
 *
-* 5. Synkroniserer name-attributt på alle inputs — name er mekanismen
-*    nettleseren bruker for mutual exclusivity (ett valg av gangen) og
-*    ArrowKey-navigasjon mellom alternativene. Alle inputs i gruppen må ha
-*    samme name. Prioritet: name på host > name på input > auto-generert.
-*
-* 6. 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 (ikke per
-*    input) — det er gruppens validitet som telles, og en duplisert flagg
-*    per input gir ingen merverdi for skjermlesere.
-*
-* 7. Propagerer disabled/readonly til alle inputs via attributeChangedCallback.
-*    Per-knapp disabled bevares — settes med en WeakMap ved første _wire().
-*
-* 8. Lytter på childList på host slik at nye <input type="radio">-elementer
-*    som legges til etter mount automatisk wires (id, name, htmlFor, disabled).
-*
-* ## Ingen Shadow DOM
-*
-* Komponenten bruker light DOM slik at CSS fra @sb1/indeks-css når alle
-* delelementer direkte.
+* - role="radiogroup" og aria-labelledby til [data-field="legend"]
+* - aria-describedby til [data-field="description"] og [data-field="error"]
+* - id på hver input og for på labelen i samme forelder, når de mangler
+* - samme name på alle inputs: name på host, ellers name fra en input, ellers generert
+* - aria-invalid="true" på host (ikke per input) når error-feltet har tekst
+* - disabled, readonly og required på host gjelder hele gruppen
+* - inputs som legges til etter mount, kobles på samme måte
 *
 * @example
 * <ix-radio-group>
 *   <span data-field="legend">Velg kundetype</span>
 *   <span data-field="description">Beskrivelse</span>
-*   <div class="ix-radio-button">
-*     <input type="radio" value="privat" />
-*     <label>Privat</label>
-*   </div>
-*   <div class="ix-radio-button">
-*     <input type="radio" value="bedrift" />
-*     <label>Bedrift</label>
+*   <div data-field="items">
+*     <div>
+*       <input type="radio" value="privat" />
+*       <label>Privat</label>
+*     </div>
+*     <div>
+*       <input type="radio" value="bedrift" />
+*       <label>Bedrift</label>
+*     </div>
 *   </div>
 *   <span data-field="error"></span>
 * </ix-radio-group>
@@ -3751,7 +3707,8 @@ var IxRadioGroup = class extends HTMLElement {
 			this._errorObserver.observe(error, {
 				childList: true,
 				characterData: true,
-				subtree: true
+				subtree: true,
+				attributeFilter: ["data-status"]
 			});
 			this._syncInvalid(error);
 		}
@@ -3794,7 +3751,7 @@ var IxRadioGroup = class extends HTMLElement {
 		if (inputs.length === 0) return;
 		for (const input of inputs) {
 			if (!input.id) input.id = `ix-radio-${++radioInputCounter}`;
-			const wrapper = input.closest(".ix-radio-button") ?? input.parentElement;
+			const wrapper = input.parentElement;
 			if (wrapper) {
 				const label = wrapper.querySelector("label");
 				if (label && !label.htmlFor) label.htmlFor = input.id;
@@ -3807,7 +3764,7 @@ var IxRadioGroup = class extends HTMLElement {
 		this._syncHostStateToInputs();
 	}
 	_syncInvalid(error) {
-		if (!!error.textContent?.trim()) this.setAttribute("aria-invalid", "true");
+		if (!!error.textContent?.trim() && error.dataset.status !== "success") this.setAttribute("aria-invalid", "true");
 		else this.removeAttribute("aria-invalid");
 	}
 	_syncHostStateToInputs() {
@@ -3833,69 +3790,30 @@ var IxRadioGroup = class extends HTMLElement {
 		}
 	}
 };
-//#endregion
-//#region lib/components/tabs/IxTabs.ts
+// 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
+* IxTabs — ARIA-lim for faner i light DOM. Forfatteren skriver en liste med
+* faner og ett panel per fane; <ix-tabs> kobler dem med ARIA, roving tabindex,
+* tastaturnavigasjon og panel-visning. Portet fra u-elements (u-tabs), men uten
+* Shadow DOM, slik at CSS treffer custom elementene og ARIA-relasjonene virker
+* på tvers.
 *
-* Light DOM slik at CSS fra @sb1/indeks-css treffer .ix-tabs__* og tag-
-* selektorene direkte, og ARIA-relasjonene fungerer på tvers av elementene.
+* - Manuell aktivering: piltaster og Home/End flytter bare fokus; Enter/Space
+*   og klikk aktiverer. Panelet er ikke en egen tab-stopp.
+* - Fane og panel kobles via aria-controls, ellers delt data-value, ellers
+*   posisjon (se _getPanel).
+* - Ved klikk/tastatur sendes et bubbling `change` på <ix-tabs>. Init og
+*   ekstern (kontrollert) synk sender ikke change.
+* - Underelementene setter bare sin egen `role`; <ix-tabs> er koordinatoren.
 *
 * @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>Oversikt</ix-tab>
+*     <ix-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-tab-panel>Oversikt-innhold</ix-tab-panel>
+*   <ix-tab-panel>Detaljer-innhold</ix-tab-panel>
 * </ix-tabs>
 */
 var tabsCounter = 0;
@@ -4104,8 +4022,7 @@ var IxTabPanel = class extends HTMLElement {
 		if (!this.getAttribute(ROLE)) this.setAttribute(ROLE, "tabpanel");
 	}
 };
-//#endregion
-//#region lib/utils/cn.ts
+// lib/utils/cn.ts
 function cn(...inputs) {
 	const klasser = [];
 	for (const input of inputs) {
@@ -4120,8 +4037,7 @@ function cn(...inputs) {
 	}
 	return klasser.join(" ");
 }
-//#endregion
-//#region lib/modal/modal.ts
+// 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";
@@ -4174,22 +4090,24 @@ function handleClose(e) {
 }
 var observer = new MutationObserver((records) => {
 	for (const record of records) {
+		if (record.type !== "attributes") continue;
 		const dialog = record.target;
 		if (!(dialog instanceof HTMLDialogElement)) continue;
 		if (!dialog.classList.contains("ix-modal")) continue;
 		if (dialog.open) handleOpened(dialog);
 		else handleClosed(dialog);
 	}
+	for (const dialog of openModals) if (!dialog.isConnected) handleClosed(dialog);
 });
 document.addEventListener("click", handleClick);
 document.addEventListener("close", handleClose, true);
 observer.observe(document.documentElement, {
 	subtree: true,
+	childList: true,
 	attributes: true,
 	attributeFilter: ["open"]
 });
-//#endregion
-//#region lib/tooltip/tooltip.ts
+// lib/tooltip/tooltip.ts
 var TOOLTIP_ID = "ix-tooltip-singleton";
 var ATTR = "data-tooltip";
 var ATTR_PLACEMENT = "data-tooltip-placement";
@@ -4306,8 +4224,7 @@ document.addEventListener("mouseout", handleMouseout);
 document.addEventListener("focusin", handleFocusin);
 document.addEventListener("focusout", handleFocusout);
 document.addEventListener("keydown", handleKeydown);
-//#endregion
-//#region index.ts
+// index.ts
 customElements.define("ix-field", IxField);
 customElements.define("ix-icon", IxIcon);
 customElements.define("ix-radio-group", IxRadioGroup);
@@ -4323,5 +4240,4 @@ customElements.define("ix-tab-list", IxTabList);
 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, IxPopover, IxProgressBar, IxRadioGroup, IxTab, IxTabList, IxTabPanel, IxTabs, amountFormatterForLocale, cn, createAmountFormatter, createPatternFormatter, registerFormat, resolveFormat };

package/dist/npm/lib/components/combobox/IxCombobox.d.ts

@@ -43,7 +43,7 @@
  * @example Single
  * <ix-combobox data-no-hits-text="Ingen treff">
  *   <div class="ix-text-field">
- *     <input class="ix-text-field__input" placeholder="Søk …" />
+ *     <input placeholder="Søk …" />
  *     <button class="ix-combobox__toggle"></button>
  *   </div>
  *   <div class="ix-combobox__listbox">

package/dist/npm/lib/components/phone-number-field/IxPhoneNumberField.d.ts

@@ -16,6 +16,7 @@ export declare class IxPhoneNumberField extends HTMLElement {
     private _containsGroupField;
     private _combobox;
     private _numberInput;
+    private _hasError;
     private _syncInvalid;
     private _syncDataState;
     private _syncHostStateToControls;

package/dist/npm/lib/components/progress-bar/IxProgressBar.d.ts

@@ -2,7 +2,7 @@
  * 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).
+ * label + verdi, track + fill, og en støttetekst-region).
  * Forfatteren skriver kun host-elementet `<ix-progress-bar>` med attributter —
  * ingen intern struktur.
  *
@@ -10,9 +10,11 @@
  *  - `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
+ *    `data-status` (success/danger) kobler --ix-color-status-* til fyllet og
+ *    til støtteteksten, som får badge-ikon foran og ser ut som en
+ *    ValidationMessage, slik Figma viser. Den bruker ikke `data-field="error"`:
+ *    ix-field og gruppene leter etter det i hele subtreet og ville tatt
+ *    meldingen for feltets feilmelding. Støtteteksten er en aria-live-region
  *    (role="status") så overgangen annonseres politely.
  *
  * Komponenten er rent informativ og aldri fokuserbar (setter aldri tabindex).
@@ -41,15 +43,14 @@ export declare class IxProgressBar extends HTMLElement {
     /** Bygger den indre strukturen én gang (idempotent). */
     private _ensureStructure;
     private _update;
+    /** Prosentverdien vises i header-slutten, bare i active. */
+    private _updateValue;
     /**
-     * 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.
+     * I success/error får støtteteksten badge-ikon foran. Ikonet vises også
+     * uten tekst, så tilstanden ikke bare vises med farge (WCAG 1.4.1).
      */
-    private _updateIconAndValue;
+    private _updateStatusMessage;
     private _ensureIcon;
-    private _removeIcon;
     private _resolveState;
     /** Klamper til 0–100. Ikke-numerisk → 0. */
     private _clampValue;

package/dist/npm/lib/components/radio-group/IxRadioGroup.d.ts

@@ -1,59 +1,28 @@
 /**
- * IxRadioGroup — ARIA-lim for radioknapp-grupper.
+ * IxRadioGroup kobler ARIA mellom native radioknapper, legend og hjelpetekster.
+ * Forfatteren skriver markupen selv.
  *
- * ## Designfilosofi
- *
- * Komponenten erstatter ingen native HTML-elementer. Forfatteren skriver
- * native <input type="radio">, <label> og hjelpetekster inni <ix-radio-group>.
- * Komponenten sin eneste jobb er å sette opp ARIA-koblingene mellom dem.
- *
- * ## Hva komponenten gjør
- *
- * 1. Setter role="radiogroup" på host slik at skjermlesere annonserer gruppen
- *    med riktig rolle og leser legend-teksten som gruppens tilgjengelige navn.
- *
- * 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. Synkroniserer name-attributt på alle inputs — name er mekanismen
- *    nettleseren bruker for mutual exclusivity (ett valg av gangen) og
- *    ArrowKey-navigasjon mellom alternativene. Alle inputs i gruppen må ha
- *    samme name. Prioritet: name på host > name på input > auto-generert.
- *
- * 6. 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 (ikke per
- *    input) — det er gruppens validitet som telles, og en duplisert flagg
- *    per input gir ingen merverdi for skjermlesere.
- *
- * 7. Propagerer disabled/readonly til alle inputs via attributeChangedCallback.
- *    Per-knapp disabled bevares — settes med en WeakMap ved første _wire().
- *
- * 8. Lytter på childList på host slik at nye <input type="radio">-elementer
- *    som legges til etter mount automatisk wires (id, name, htmlFor, disabled).
- *
- * ## Ingen Shadow DOM
- *
- * Komponenten bruker light DOM slik at CSS fra @sb1/indeks-css når alle
- * delelementer direkte.
+ * - role="radiogroup" og aria-labelledby til [data-field="legend"]
+ * - aria-describedby til [data-field="description"] og [data-field="error"]
+ * - id på hver input og for på labelen i samme forelder, når de mangler
+ * - samme name på alle inputs: name på host, ellers name fra en input, ellers generert
+ * - aria-invalid="true" på host (ikke per input) når error-feltet har tekst
+ * - disabled, readonly og required på host gjelder hele gruppen
+ * - inputs som legges til etter mount, kobles på samme måte
  *
  * @example
  * <ix-radio-group>
  *   <span data-field="legend">Velg kundetype</span>
  *   <span data-field="description">Beskrivelse</span>
- *   <div class="ix-radio-button">
- *     <input type="radio" value="privat" />
- *     <label>Privat</label>
- *   </div>
- *   <div class="ix-radio-button">
- *     <input type="radio" value="bedrift" />
- *     <label>Bedrift</label>
+ *   <div data-field="items">
+ *     <div>
+ *       <input type="radio" value="privat" />
+ *       <label>Privat</label>
+ *     </div>
+ *     <div>
+ *       <input type="radio" value="bedrift" />
+ *       <label>Bedrift</label>
+ *     </div>
  *   </div>
  *   <span data-field="error"></span>
  * </ix-radio-group>

package/dist/npm/lib/components/tabs/IxTabs.d.ts

@@ -1,64 +1,26 @@
 /**
- * IxTabs — ARIA-lim for faner (tabs) i light DOM.
+ * IxTabs — ARIA-lim for faner i light DOM. Forfatteren skriver en liste med
+ * faner og ett panel per fane; <ix-tabs> kobler dem med ARIA, roving tabindex,
+ * tastaturnavigasjon og panel-visning. Portet fra u-elements (u-tabs), men uten
+ * Shadow DOM, slik at CSS treffer custom elementene og ARIA-relasjonene virker
+ * på tvers.
  *
- * ## 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.
+ * - Manuell aktivering: piltaster og Home/End flytter bare fokus; Enter/Space
+ *   og klikk aktiverer. Panelet er ikke en egen tab-stopp.
+ * - Fane og panel kobles via aria-controls, ellers delt data-value, ellers
+ *   posisjon (se _getPanel).
+ * - Ved klikk/tastatur sendes et bubbling `change` på <ix-tabs>. Init og
+ *   ekstern (kontrollert) synk sender ikke change.
+ * - Underelementene setter bare sin egen `role`; <ix-tabs> er koordinatoren.
  *
  * @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>Oversikt</ix-tab>
+ *     <ix-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-tab-panel>Oversikt-innhold</ix-tab-panel>
+ *   <ix-tab-panel>Detaljer-innhold</ix-tab-panel>
  * </ix-tabs>
  */
 export declare class IxTabs extends HTMLElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-web",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "type": "module",
   "description": "Web components for Indeks design system",
   "homepage": "https://design.sparebank1.no",
@@ -40,12 +40,12 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^26.6.2",
-    "jsdom": "^30.1.0",
+    "@types/node": "^26.6.5",
+    "jsdom": "^30.1.3",
     "typescript": "~6.0.3",
-    "vite": "^8.2.2",
-    "vite-plugin-dts": "^5.1.1",
-    "vitest": "^4.1.10"
+    "vite": "^8.3.5",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^5.0.5"
   },
   "scripts": {
     "build": "rm -rf ./dist && pnpm run build:npm",