@sb1/indeks-web 0.17.0 → 0.18.1

package/dist/npm/index.js

@@ -287,7 +287,7 @@ 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 IS_TOUCH$1 = typeof navigator !== "undefined" && /iphone|ipad|ipod|android/i.test(navigator.userAgent);
 var IxCombobox = class extends HTMLElement {
 	constructor(..._args) {
 		super(..._args);
@@ -355,6 +355,9 @@ var IxCombobox = class extends HTMLElement {
 		this._arrowHint = null;
 		this._results = null;
 	}
+	focus(options) {
+		this._input?.focus(options);
+	}
 	attributeChangedCallback(name, _oldValue, newValue) {
 		if (!this.isConnected) return;
 		if (name === "disabled" || name === "readonly") this._syncControlState();
@@ -423,7 +426,7 @@ var IxCombobox = class extends HTMLElement {
 		if (this._toggle) {
 			this._toggle.type = "button";
 			this._toggle.setAttribute("tabindex", "-1");
-			if (IS_TOUCH) this._toggle.setAttribute("aria-hidden", "true");
+			if (IS_TOUCH$1) this._toggle.setAttribute("aria-hidden", "true");
 		}
 		if (this._noHits) {
 			this._noHitsText = (this.getAttribute("data-no-hits-text") || this._noHits.textContent || "").trim();
@@ -757,6 +760,7 @@ var IxCombobox = class extends HTMLElement {
 		}
 	}
 	_emitChange() {
+		this._select?.dispatchEvent(new Event("change", { bubbles: true }));
 		this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
 	}
 	_syncControlState() {
@@ -898,13 +902,18 @@ function compileTokens(pattern) {
 /**
 * 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.
+* `format` fyller slots med matchende tegn fra den rå verdien og setter inn en
+* separator så snart gruppen foran er fylt OG resten av verdien er konsumert —
+* separatoren dukker altså opp med én gang gruppen er komplett ("24" → "24.",
+* "2412" → "24.12."), ikke først når neste siffer skrives. En separator legges
+* aldri til for en halvfylt gruppe, og heller ikke når vi stoppet fordi neste
+* tegn ikke passet sloten (da ville vi doblet separatoren ved innliming av
+* allerede formatert tekst). 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
@@ -935,11 +944,74 @@ function createPatternFormatter(pattern) {
 				pendingLiterals = "";
 				i++;
 			}
-			return out + chars.slice(i).join("");
+			const trailing = i >= chars.length ? pendingLiterals : "";
+			return out + trailing + chars.slice(i).join("");
 		}
 	};
 }
 /**
+* Kanonisk dato-parser — den ENE sannheten for hvordan en dato-streng tolkes.
+* Både ix-field sin synlige formatering og IxDateField sin ISO-utleding går
+* gjennom denne, så de aldri kan drifte fra hverandre.
+*
+* Komplett dato → nullutfylte deler; ufullstendig/tvetydig → `null`.
+*
+*   - Med punktum: nøyaktig 3 rent-numeriske segmenter, dag/måned 1-2 sifre,
+*     år 2 eller 4 sifre. Dag/måned nullutfylles; 2-sifret år utvides til `20xx`
+*     (`"26"` → `"2026"`). `"1.1.2026"` og `"1.1.26"` → begge 01/01/2026.
+*   - Uten punktum: nøyaktig 8 sifre tolkes som ddmmåååå (`"01012026"`). Annen
+*     lengde uten skilletegn (f.eks. `"112026"`) er tvetydig — vi kan ikke vite
+*     hvor grensene går uten punktum — og regnes ufullstendig → `null`.
+*   - Bokstaver, ekstra punktum eller feil segmentantall → `null`.
+*/
+function parseDate(display) {
+	const trimmed = display.trim();
+	if (trimmed.includes(".")) {
+		const segments = trimmed.split(".");
+		if (segments.length !== 3) return null;
+		const [day, month, year] = segments;
+		if (!/^\d{1,2}$/.test(day) || !/^\d{1,2}$/.test(month) || !/^(\d{2}|\d{4})$/.test(year)) return null;
+		const fullYear = year.length === 2 ? `20${year}` : year;
+		return {
+			day: day.padStart(2, "0"),
+			month: month.padStart(2, "0"),
+			year: fullYear
+		};
+	}
+	if (/^\d{8}$/.test(trimmed)) return {
+		day: trimmed.slice(0, 2),
+		month: trimmed.slice(2, 4),
+		year: trimmed.slice(4, 8)
+	};
+	return null;
+}
+/** Komplett dato → visning `dd.mm.åååå` (nullutfylt); ellers strengen verbatim. */
+function normalizeDateDisplay(display) {
+	const parts = parseDate(display);
+	return parts ? `${parts.day}.${parts.month}.${parts.year}` : display;
+}
+/** Komplett dato → ISO `åååå-mm-dd`; ellers tom streng. */
+function isoFromDate(display) {
+	const parts = parseDate(display);
+	return parts ? `${parts.year}-${parts.month}-${parts.day}` : "";
+}
+/**
+* Formatter for datofelt. `parse` er identitet — punktumet er en meningsfull
+* tastet grense, ikke en separator å fjerne (trivielt tapsfri). `format`
+* nullutfyller til `dd.mm.åååå` når datoen er komplett, ellers vises alt verbatim.
+*
+* Invariant-unntak: `parse(format(raw)) === raw` gjelder IKKE her, fordi
+* nullutfylling (`"1"` → `"01"`) ikke er reversibel. Blur-syklusen krever i
+* stedet at `format` er idempotent på allerede-normaliserte verdier —
+* `format("01.01.2026") === "01.01.2026"` — som holder.
+*/
+function createDateFormatter() {
+	return {
+		parse: (display) => display,
+		format: (raw) => normalizeDateDisplay(raw)
+	};
+}
+/**
 * Beløp er ikke en fast-lengde pattern-maske: lengden varierer og tusenskillet
 * forskyver seg mens man skriver. Derfor en egen formatter.
 *
@@ -1001,6 +1073,19 @@ function registerFormat(name, formatter) {
 function resolveFormat(name) {
 	return registry.get(name);
 }
+/**
+* Navnene på de innebygde formatvariantene. Eksporteres slik at typelaget
+* (indeks-react dupliserer denne listen for autocomplete på `format`) kan holdes
+* i synk via en sync-test — React importerer ikke web-runtime ellers.
+*/
+var BUILTIN_FORMAT_NAMES = [
+	"phone",
+	"amount",
+	"account",
+	"orgnr",
+	"ssn",
+	"date"
+];
 registerFormat("phone", {
 	...createPatternFormatter("000 00 000"),
 	live: true
@@ -1009,10 +1094,7 @@ registerFormat("ssn", {
 	...createPatternFormatter("000000 00000"),
 	live: true
 });
-registerFormat("date", {
-	...createPatternFormatter("00.00.0000"),
-	live: true
-});
+registerFormat("date", createDateFormatter());
 registerFormat("account", {
 	...createPatternFormatter("0000 00 00000"),
 	live: true
@@ -1029,6 +1111,216 @@ registerFormat("amount", {
 	live: true
 });
 //#endregion
+//#region lib/components/date-field/IxDateField.ts
+/**
+* IxDateField — datofelt: formatert tekst-input (dd.mm.åååå) + native OS-kalender.
+*
+* ## Designfilosofi
+*
+* Hybrid av to mønstre. `ix-date-field` ligger NØSTET inne i `ix-field` (som
+* `ix-combobox`), og `ix-field` gjør ARIA-limet: kobler label↔input,
+* aria-describedby, feilmelding, OG formateringen (`data-format="date"` →
+* normaliserer til dd.mm.åååå på blur; brukeren kan taste `1.1.2026` like gjerne
+* som `01.01.2026`). `ix-date-field` dupliserer ingenting av dette. Dens ENESTE
+* jobb er å gjøre feltet til et datofelt:
+*
+*   1. GENERERE to instrumentelle elementer inn i `.ix-text-field` (idempotent):
+*      - `.ix-date-field__toggle`  kalenderknapp (CSS gir ikonet)
+*      - `.ix-date-field__native`  overlagt gjennomsiktig `<input type="date">`
+*        som bærer ISO-verdien, gir min/max-validering og åpner OS-kalenderen
+*   2. To-veis synk mellom den synlige dd.mm.åååå-inputen og den native ISO-inputen.
+*   3. Speile min/max/disabled/readonly ned til den native inputen.
+*   4. Knapp-klikk → `native.showPicker?.()`; tap/klikk treffer uansett den
+*      gjennomsiktige native-inputen som ligger over knappen (mobil).
+*
+* ## Verdi-kontrakt
+*
+* Utad er verdien ISO (`åååå-mm-dd`): den native inputen bærer den, `change`
+* emitter den, og `name` settes på den native inputen så form-innsending gir ISO.
+* Den synlige inputen viser `dd.mm.åååå` og har bevisst INGEN `name` (ville
+* kollidert med ix-field sin formaterings-speiling ved innsending).
+*
+* ## Delelementer (light DOM)
+*   - .ix-text-field > input               → synlig dd.mm.åååå-input (forfatteren)
+*   - .ix-date-field__toggle               → kalenderknapp (WC genererer)
+*   - .ix-date-field__native (input[date]) → skjult ISO-input (WC genererer)
+*
+* @example
+* <ix-field>
+*   <label>Fødselsdato</label>
+*   <span data-field="description">dd.mm.åååå</span>
+*   <ix-date-field data-open-label="Åpne kalender" name="fodt">
+*     <div class="ix-text-field">
+*       <input inputmode="numeric" data-format="date" />
+*     </div>
+*   </ix-date-field>
+*   <span data-field="error"></span>
+* </ix-field>
+*/
+var IS_TOUCH = typeof navigator !== "undefined" && /iphone|ipad|ipod|android/i.test(navigator.userAgent);
+function digitsFromIso(iso) {
+	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+	if (!match) return "";
+	const [, year, month, day] = match;
+	return `${day}${month}${year}`;
+}
+function displayFromDigits(digits) {
+	return `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4, 8)}`;
+}
+var IxDateField = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_input", null);
+		_defineProperty(this, "_toggle", null);
+		_defineProperty(this, "_native", null);
+		_defineProperty(this, "_syncing", false);
+		_defineProperty(this, "_lastEmitted", "");
+		_defineProperty(this, "_onVisibleInput", null);
+		_defineProperty(this, "_onNativeInput", null);
+		_defineProperty(this, "_onToggleClick", null);
+	}
+	static get observedAttributes() {
+		return [
+			"min",
+			"max",
+			"disabled",
+			"readonly",
+			"value",
+			"name",
+			"data-open-label"
+		];
+	}
+	connectedCallback() {
+		this._wire();
+	}
+	disconnectedCallback() {
+		if (this._input && this._onVisibleInput) this._input.removeEventListener("input", this._onVisibleInput);
+		if (this._native && this._onNativeInput) {
+			this._native.removeEventListener("input", this._onNativeInput);
+			this._native.removeEventListener("change", this._onNativeInput);
+		}
+		if (this._toggle && this._onToggleClick) this._toggle.removeEventListener("click", this._onToggleClick);
+		this._onVisibleInput = null;
+		this._onNativeInput = null;
+		this._onToggleClick = null;
+		this._input = null;
+		this._toggle = null;
+		this._native = null;
+	}
+	attributeChangedCallback(name, _oldValue, newValue) {
+		if (!this.isConnected) return;
+		if (name === "min" || name === "max" || name === "disabled" || name === "readonly") this._syncControlState();
+		else if (name === "name") {
+			if (this._native) this._native.name = newValue ?? "";
+		} else if (name === "data-open-label") this._syncToggleLabel();
+		else if (name === "value") this._seedFromIso(newValue ?? "");
+	}
+	_wire() {
+		const field = this.querySelector(".ix-text-field");
+		if (!field) return;
+		this._input = field.querySelector("input:not(.ix-date-field__native)");
+		if (!this._input) return;
+		this._native = field.querySelector("input.ix-date-field__native");
+		if (!this._native) {
+			const native = document.createElement("input");
+			native.type = "date";
+			native.className = "ix-date-field__native";
+			native.tabIndex = -1;
+			native.setAttribute("aria-hidden", "true");
+			field.appendChild(native);
+			this._native = native;
+		}
+		this._toggle = field.querySelector("button.ix-date-field__toggle");
+		if (!this._toggle) {
+			const toggle = document.createElement("button");
+			toggle.type = "button";
+			toggle.className = "ix-date-field__toggle";
+			field.insertBefore(toggle, this._native);
+			this._toggle = toggle;
+		}
+		const hostName = this.getAttribute("name");
+		const visibleName = this._input.getAttribute("name");
+		const name = hostName ?? visibleName ?? "";
+		if (name) this._native.name = name;
+		if (visibleName) this._input.removeAttribute("name");
+		this.toggleAttribute("data-touch", IS_TOUCH);
+		this._syncToggleLabel();
+		this._syncControlState();
+		this._onVisibleInput = () => this._handleVisibleInput();
+		this._input.addEventListener("input", this._onVisibleInput);
+		this._onNativeInput = (e) => this._handleNativeInput(e);
+		this._native.addEventListener("input", this._onNativeInput);
+		this._native.addEventListener("change", this._onNativeInput);
+		this._onToggleClick = () => this._openPicker();
+		this._toggle.addEventListener("click", this._onToggleClick);
+		const initialIso = this.getAttribute("value");
+		if (initialIso) this._seedFromIso(initialIso);
+		else if (this._input.value) {
+			this._syncing = true;
+			this._native.value = isoFromDate(this._input.value);
+			this._syncing = false;
+		}
+		this._lastEmitted = this._native.value;
+	}
+	_handleVisibleInput() {
+		if (this._syncing || !this._input || !this._native) return;
+		this._syncing = true;
+		this._native.value = isoFromDate(this._input.value);
+		this._syncing = false;
+		this._emitIfChanged();
+	}
+	_handleNativeInput(e) {
+		e.stopPropagation();
+		if (this._syncing || !this._input || !this._native) return;
+		const digits = digitsFromIso(this._native.value);
+		this._syncing = true;
+		this._input.value = digits ? displayFromDigits(digits) : "";
+		this._input.dispatchEvent(new Event("input", { bubbles: true }));
+		this._syncing = false;
+		this._emitIfChanged();
+	}
+	_emitIfChanged() {
+		const iso = this._native?.value ?? "";
+		if (iso === this._lastEmitted) return;
+		this._lastEmitted = iso;
+		this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+	}
+	_seedFromIso(iso) {
+		if (!this._native || !this._input) return;
+		this._syncing = true;
+		this._native.value = iso;
+		const digits = digitsFromIso(this._native.value);
+		this._input.value = digits ? displayFromDigits(digits) : "";
+		this._syncing = false;
+		this._emitIfChanged();
+	}
+	_openPicker() {
+		try {
+			this._native?.showPicker();
+		} catch {}
+	}
+	_syncControlState() {
+		if (!this._native) return;
+		this._native.min = this.getAttribute("min") ?? "";
+		this._native.max = this.getAttribute("max") ?? "";
+		this._native.disabled = this.hasAttribute("disabled");
+		this._native.readOnly = this.hasAttribute("readonly");
+	}
+	_syncToggleLabel() {
+		if (!this._toggle) return;
+		const label = this.getAttribute("data-open-label");
+		if (label) this._toggle.setAttribute("aria-label", label);
+		else this._toggle.removeAttribute("aria-label");
+		if (IS_TOUCH) {
+			this._toggle.setAttribute("aria-hidden", "true");
+			this._toggle.tabIndex = -1;
+		} else {
+			this._toggle.removeAttribute("aria-hidden");
+			this._toggle.tabIndex = 0;
+		}
+	}
+};
+//#endregion
 //#region lib/components/field/IxField.ts
 /**
 * IxField — tilgjengelighetslim mellom label, input og hjelpetekster.
@@ -1336,7 +1628,7 @@ var IxField = class extends HTMLElement {
 			listeners.push([type, fn]);
 		};
 		if (formatter.live) {
-			on("input", () => this._maskInPlace());
+			on("input", (e) => this._maskInPlace(e));
 			control.value = formatter.format(initialRaw);
 		} else {
 			on("focus", () => {
@@ -1360,7 +1652,7 @@ var IxField = class extends HTMLElement {
 			this._activeControl = null;
 		};
 	}
-	_maskInPlace() {
+	_maskInPlace(event) {
 		const formatter = this._activeFormatter;
 		const control = this._activeControl;
 		if (!formatter || !control) return;
@@ -1375,6 +1667,7 @@ var IxField = class extends HTMLElement {
 			newCaret = i;
 			break;
 		}
+		if (!(event?.inputType?.startsWith("delete") ?? false)) while (newCaret < next.length && !formatter.parse(next[newCaret])) newCaret++;
 		if (next !== display) control.value = next;
 		control.setSelectionRange(newCaret, newCaret);
 		if (this._formatMirror) this._formatMirror.value = raw;
@@ -1641,6 +1934,669 @@ var IxIcon = class extends HTMLElement {
 	}
 };
 //#endregion
+//#region lib/components/phone-number-field/countries.ts
+var NORDIC = /* @__PURE__ */ new Set([
+	"SE",
+	"DK",
+	"FI",
+	"IS"
+]);
+var COUNTRIES = [
+	{
+		iso: "NO",
+		code: "47",
+		name: {
+			nb: "Norge",
+			nn: "Noreg",
+			en: "Norway"
+		}
+	},
+	{
+		iso: "SE",
+		code: "46",
+		name: {
+			nb: "Sverige",
+			nn: "Sverige",
+			en: "Sweden"
+		}
+	},
+	{
+		iso: "DK",
+		code: "45",
+		name: {
+			nb: "Danmark",
+			nn: "Danmark",
+			en: "Denmark"
+		}
+	},
+	{
+		iso: "FI",
+		code: "358",
+		name: {
+			nb: "Finland",
+			nn: "Finland",
+			en: "Finland"
+		}
+	},
+	{
+		iso: "IS",
+		code: "354",
+		name: {
+			nb: "Island",
+			nn: "Island",
+			en: "Iceland"
+		}
+	},
+	{
+		iso: "BE",
+		code: "32",
+		name: {
+			nb: "Belgia",
+			nn: "Belgia",
+			en: "Belgium"
+		}
+	},
+	{
+		iso: "EE",
+		code: "372",
+		name: {
+			nb: "Estland",
+			nn: "Estland",
+			en: "Estonia"
+		}
+	},
+	{
+		iso: "FR",
+		code: "33",
+		name: {
+			nb: "Frankrike",
+			nn: "Frankrike",
+			en: "France"
+		}
+	},
+	{
+		iso: "GR",
+		code: "30",
+		name: {
+			nb: "Hellas",
+			nn: "Hellas",
+			en: "Greece"
+		}
+	},
+	{
+		iso: "IN",
+		code: "91",
+		name: {
+			nb: "India",
+			nn: "India",
+			en: "India"
+		}
+	},
+	{
+		iso: "IE",
+		code: "353",
+		name: {
+			nb: "Irland",
+			nn: "Irland",
+			en: "Ireland"
+		}
+	},
+	{
+		iso: "IT",
+		code: "39",
+		name: {
+			nb: "Italia",
+			nn: "Italia",
+			en: "Italy"
+		}
+	},
+	{
+		iso: "HR",
+		code: "385",
+		name: {
+			nb: "Kroatia",
+			nn: "Kroatia",
+			en: "Croatia"
+		}
+	},
+	{
+		iso: "LV",
+		code: "371",
+		name: {
+			nb: "Latvia",
+			nn: "Latvia",
+			en: "Latvia"
+		}
+	},
+	{
+		iso: "LT",
+		code: "370",
+		name: {
+			nb: "Litauen",
+			nn: "Litauen",
+			en: "Lithuania"
+		}
+	},
+	{
+		iso: "NL",
+		code: "31",
+		name: {
+			nb: "Nederland",
+			nn: "Nederland",
+			en: "Netherlands"
+		}
+	},
+	{
+		iso: "PL",
+		code: "48",
+		name: {
+			nb: "Polen",
+			nn: "Polen",
+			en: "Poland"
+		}
+	},
+	{
+		iso: "PT",
+		code: "351",
+		name: {
+			nb: "Portugal",
+			nn: "Portugal",
+			en: "Portugal"
+		}
+	},
+	{
+		iso: "RO",
+		code: "40",
+		name: {
+			nb: "Romania",
+			nn: "Romania",
+			en: "Romania"
+		}
+	},
+	{
+		iso: "RU",
+		code: "7",
+		name: {
+			nb: "Russland",
+			nn: "Russland",
+			en: "Russia"
+		}
+	},
+	{
+		iso: "ES",
+		code: "34",
+		name: {
+			nb: "Spania",
+			nn: "Spania",
+			en: "Spain"
+		}
+	},
+	{
+		iso: "GB",
+		code: "44",
+		name: {
+			nb: "Storbritannia",
+			nn: "Storbritannia",
+			en: "United Kingdom"
+		}
+	},
+	{
+		iso: "CH",
+		code: "41",
+		name: {
+			nb: "Sveits",
+			nn: "Sveits",
+			en: "Switzerland"
+		}
+	},
+	{
+		iso: "DE",
+		code: "49",
+		name: {
+			nb: "Tyskland",
+			nn: "Tyskland",
+			en: "Germany"
+		}
+	},
+	{
+		iso: "US",
+		code: "1",
+		name: {
+			nb: "USA",
+			nn: "USA",
+			en: "United States"
+		}
+	},
+	{
+		iso: "AT",
+		code: "43",
+		name: {
+			nb: "Østerrike",
+			nn: "Austerrike",
+			en: "Austria"
+		}
+	},
+	{
+		iso: "TR",
+		code: "90",
+		name: {
+			nb: "Tyrkia",
+			nn: "Tyrkia",
+			en: "Turkey"
+		}
+	},
+	{
+		iso: "UA",
+		code: "380",
+		name: {
+			nb: "Ukraina",
+			nn: "Ukraina",
+			en: "Ukraine"
+		}
+	},
+	{
+		iso: "CN",
+		code: "86",
+		name: {
+			nb: "Kina",
+			nn: "Kina",
+			en: "China"
+		}
+	},
+	{
+		iso: "JP",
+		code: "81",
+		name: {
+			nb: "Japan",
+			nn: "Japan",
+			en: "Japan"
+		}
+	},
+	{
+		iso: "BR",
+		code: "55",
+		name: {
+			nb: "Brasil",
+			nn: "Brasil",
+			en: "Brazil"
+		}
+	},
+	{
+		iso: "AU",
+		code: "61",
+		name: {
+			nb: "Australia",
+			nn: "Australia",
+			en: "Australia"
+		}
+	}
+];
+/**
+* Bygger standard landliste for en gitt `locale`. Rekkefølge: Norge først,
+* deretter Norden (Sverige, Danmark, Finland, Island), deretter resten
+* alfabetisk etter lokalisert landnavn (locale-bevisst `Intl.Collator`, som
+* håndterer æ/ø/å).
+*
+* @default locale = 'nb'
+*/
+function getDefaultCountries(locale = "nb") {
+	const collator = new Intl.Collator(locale);
+	const toOption = (c) => ({
+		value: c.code,
+		label: `+${c.code}`,
+		description: c.name[locale]
+	});
+	const norway = COUNTRIES.filter((c) => c.iso === "NO");
+	const nordics = COUNTRIES.filter((c) => NORDIC.has(c.iso)).sort((a, b) => collator.compare(a.name[locale], b.name[locale]));
+	const rest = COUNTRIES.filter((c) => c.iso !== "NO" && !NORDIC.has(c.iso)).sort((a, b) => collator.compare(a.name[locale], b.name[locale]));
+	return [
+		...norway,
+		...nordics,
+		...rest
+	].map(toOption);
+}
+/** Normaliserer en `data-locale`-attributt til en gyldig `CountryLocale`. */
+function normalizeLocale(value) {
+	return value === "nn" || value === "en" ? value : "nb";
+}
+//#endregion
+//#region lib/components/phone-number-field/IxPhoneNumberField.ts
+/**
+* IxPhoneNumberField — telefonnummer med landvelger.
+*
+* ## Designfilosofi
+*
+* Komponenten er en sammensatt gruppe: den binder sammen en <ix-combobox>
+* (landkode) og et <ix-field>-tekstfelt (nummer) under én felles label og én
+* felles valideringsmelding. Den reimplementerer verken combobox- eller
+* formaterings-oppførsel — <ix-combobox> og <ix-field> gjør fortsatt sin egen
+* interne ARIA-kabling.
+*
+* HTML/WC er primærkilden: forfatteren skriver minimal markup (en TOM
+* <ix-combobox> holder), og komponenten fyller landlista, setter forhåndsvalg
+* og stamper nummer-feltets standardattributter. React er et tynt lag som kun
+* videresender config som data-*-attributter.
+*
+* Speiler <ix-checkbox-group>/<ix-radio-group>-mønsteret, med disse forskjellene:
+* de to «kontrollene» er en <ix-combobox> og et nummer-<input> (ikke en liste av
+* like radio/checkbox), og disabled/readonly/required propageres til begge disse.
+*
+* ## 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
+*    egen rolle for et sammensatt felt — "group" er korrekt.)
+*
+* 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. 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 — det er
+*    gruppens validitet som telles.
+*
+* 5. Propagerer disabled/readonly/required til begge kontrollene. Egne
+*    (per-kontroll) verdier bevares via WeakMaps slik at group-toggle ikke
+*    overstyrer dem.
+*
+* 6. Fyller landvelgeren: injiserer .ix-combobox__option-markup i den tomme
+*    <ix-combobox>-lista fra en innebygd, lokaliserbar landliste (eller en
+*    egendefinert `data-countries`-JSON), og setter aria-selected på
+*    forhåndsvalgt land (data-country-code / data-default-country-code).
+*
+* 7. Stamper nummer-feltets standardattributter (type=tel, inputmode=numeric,
+*    autocomplete=tel-national, data-format=phone) om de mangler.
+*
+* 8. Utleder data-state (error/readonly/disabled) for CSS.
+*
+* 9. Lytter på childList slik at kontroller som React rendrer inn etter mount
+*    (conditional rendering) fanges opp og re-wires.
+*
+* ## Ingen Shadow DOM
+*
+* Komponenten bruker light DOM slik at CSS fra @sb1/indeks-css når alle
+* delelementer direkte, og aria-koblingene (aria-labelledby/-describedby) ikke
+* krysser en shadow-grense.
+*
+* @example
+* <ix-phone-number-field data-locale="nb" data-default-country-code="47">
+*   <span data-field="legend">Mobilnummer</span>
+*   <span data-field="description">Vi bruker det kun til SMS-varsling</span>
+*   <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" />
+*         <button type="button" class="ix-combobox__toggle" aria-label="Vis land"></button>
+*       </div>
+*       <div class="ix-combobox__listbox" hidden></div>
+*     </ix-combobox>
+*     <ix-field data-field="number">
+*       <div class="ix-text-field">
+*         <input aria-label="Telefonnummer" />
+*       </div>
+*     </ix-field>
+*   </div>
+*   <span data-field="error"></span>
+* </ix-phone-number-field>
+*/
+var phoneNumberFieldCounter = 0;
+var IxPhoneNumberField = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_errorObserver", null);
+		_defineProperty(this, "_childObserver", null);
+		_defineProperty(this, "_instanceId", 0);
+		_defineProperty(this, "_filling", false);
+		_defineProperty(this, "_ownDisabled", /* @__PURE__ */ new WeakMap());
+		_defineProperty(this, "_ownReadonly", /* @__PURE__ */ new WeakMap());
+		_defineProperty(this, "_ownRequired", /* @__PURE__ */ new WeakMap());
+	}
+	static get observedAttributes() {
+		return [
+			"disabled",
+			"readonly",
+			"required",
+			"data-locale",
+			"data-countries",
+			"data-country-code",
+			"data-default-country-code"
+		];
+	}
+	connectedCallback() {
+		this._wire();
+	}
+	disconnectedCallback() {
+		this._errorObserver?.disconnect();
+		this._errorObserver = null;
+		this._childObserver?.disconnect();
+		this._childObserver = null;
+	}
+	attributeChangedCallback(attr, _oldValue, _newValue) {
+		if (!this.isConnected) return;
+		if (attr === "disabled" || attr === "readonly") this._syncHostStateToControls();
+		else if (attr === "required") this._syncRequired();
+		else if (attr === "data-locale" || attr === "data-countries") this._refillCombobox();
+		else if (attr === "data-country-code" || attr === "data-default-country-code") this._applyPreselection();
+	}
+	_wire() {
+		this.setAttribute("role", "group");
+		this._instanceId = ++phoneNumberFieldCounter;
+		const legend = this.querySelector(":scope > [data-field=\"legend\"]");
+		if (legend) {
+			if (!legend.id) legend.id = `ix-phone-number-field-legend-${this._instanceId}`;
+			this.setAttribute("aria-labelledby", legend.id);
+		}
+		this._wireDescribedBy();
+		this._fillCombobox();
+		this._stampNumberDefaults();
+		this._syncHostStateToControls();
+		this._syncRequired();
+		this._syncDataState();
+		this._childObserver = new MutationObserver((mutations) => {
+			if (this._filling) return;
+			if (mutations.some((m) => Array.from(m.addedNodes).some((n) => this._containsControl(n)) || Array.from(m.removedNodes).some((n) => this._containsControl(n)))) {
+				this._fillCombobox();
+				this._stampNumberDefaults();
+				this._syncHostStateToControls();
+				this._syncRequired();
+			}
+			if (mutations.some((m) => Array.from(m.addedNodes).some((n) => this._containsGroupField(n)) || Array.from(m.removedNodes).some((n) => this._containsGroupField(n)))) this._wireDescribedBy();
+		});
+		this._childObserver.observe(this, {
+			childList: true,
+			subtree: true
+		});
+	}
+	_wireDescribedBy() {
+		const description = this.querySelector(":scope > [data-field=\"description\"]");
+		const error = this.querySelector(":scope > [data-field=\"error\"]");
+		const describedBy = [];
+		if (description) {
+			if (!description.id) description.id = `ix-phone-number-field-desc-${this._instanceId}`;
+			describedBy.push(description.id);
+		}
+		this._errorObserver?.disconnect();
+		this._errorObserver = null;
+		if (error) {
+			if (!error.id) error.id = `ix-phone-number-field-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);
+		} else this.removeAttribute("aria-invalid");
+		if (describedBy.length > 0) this.setAttribute("aria-describedby", describedBy.join(" "));
+		else this.removeAttribute("aria-describedby");
+	}
+	_containsControl(node) {
+		if (node.nodeType !== Node.ELEMENT_NODE) return false;
+		const el = node;
+		if (el.matches?.("ix-combobox, input")) return true;
+		return !!el.querySelector?.("ix-combobox, input");
+	}
+	_containsGroupField(node) {
+		if (node.nodeType !== Node.ELEMENT_NODE) return false;
+		const el = node;
+		const selector = "[data-field=\"description\"], [data-field=\"error\"]";
+		if (el.matches?.(selector)) return true;
+		return !!el.querySelector?.(selector);
+	}
+	_combobox() {
+		return this.querySelector("ix-combobox");
+	}
+	_numberInput() {
+		const numberField = this.querySelector("[data-field=\"number\"]");
+		if (numberField) return numberField.querySelector("input");
+		const combobox = this._combobox();
+		return Array.from(this.querySelectorAll("input")).find((input) => !combobox?.contains(input)) ?? null;
+	}
+	_syncInvalid(error) {
+		if (!!error.textContent?.trim()) 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;
+		if (state) this.setAttribute("data-state", state);
+		else this.removeAttribute("data-state");
+	}
+	_syncHostStateToControls() {
+		const isDisabled = this.hasAttribute("disabled");
+		const isReadonly = this.hasAttribute("readonly");
+		const combobox = this._combobox();
+		if (combobox) this._applyState(combobox, isDisabled, isReadonly, "attribute");
+		const input = this._numberInput();
+		if (input) this._applyState(input, isDisabled, isReadonly, "property");
+		this._syncDataState();
+	}
+	_syncRequired() {
+		const on = this.hasAttribute("required");
+		const comboboxInput = this._combobox()?.querySelector("input") ?? null;
+		if (comboboxInput) this._applyFlag(comboboxInput, "required", on, this._ownRequired, "property");
+		const numberInput = this._numberInput();
+		if (numberInput) this._applyFlag(numberInput, "required", on, this._ownRequired, "property");
+	}
+	_applyState(control, isDisabled, isReadonly, mode) {
+		this._applyFlag(control, "disabled", isDisabled, this._ownDisabled, mode);
+		this._applyFlag(control, "readonly", isReadonly, this._ownReadonly, mode);
+	}
+	_applyFlag(control, flag, groupOn, ownStore, mode) {
+		const prop = flag === "readonly" ? "readOnly" : flag;
+		const read = () => mode === "attribute" ? control.hasAttribute(flag) : !!control[prop];
+		const write = (value) => {
+			if (mode === "attribute") if (value) control.setAttribute(flag, "");
+			else control.removeAttribute(flag);
+			else control[prop] = value;
+		};
+		if (groupOn) {
+			if (!ownStore.has(control)) ownStore.set(control, read());
+			write(true);
+		} else if (ownStore.has(control)) {
+			write(ownStore.get(control));
+			ownStore.delete(control);
+		}
+	}
+	_fillCombobox() {
+		if (this._filling) return;
+		const listbox = this._listbox();
+		if (!listbox) return;
+		if (listbox.querySelector(".ix-combobox__option")) return;
+		const options = this._resolveCountryOptions();
+		if (options.length === 0) return;
+		const preselect = this._preselectValue();
+		this._filling = true;
+		try {
+			const frag = document.createDocumentFragment();
+			for (const opt of options) frag.appendChild(this._buildOption(opt, opt.value === preselect));
+			listbox.setAttribute("data-ix-injected", "");
+			listbox.appendChild(frag);
+		} finally {
+			this._filling = false;
+		}
+	}
+	_refillCombobox() {
+		const listbox = this._listbox();
+		if (!listbox || !listbox.hasAttribute("data-ix-injected")) {
+			this._fillCombobox();
+			return;
+		}
+		this._filling = true;
+		try {
+			for (const opt of Array.from(listbox.querySelectorAll(".ix-combobox__option"))) opt.remove();
+		} finally {
+			this._filling = false;
+		}
+		listbox.removeAttribute("data-ix-injected");
+		this._fillCombobox();
+	}
+	_applyPreselection() {
+		const listbox = this._listbox();
+		if (!listbox) return;
+		const preselect = this._preselectValue();
+		this._filling = true;
+		try {
+			for (const opt of Array.from(listbox.querySelectorAll(".ix-combobox__option"))) if (preselect !== null && opt.getAttribute("data-value") === preselect) opt.setAttribute("aria-selected", "true");
+			else opt.removeAttribute("aria-selected");
+		} finally {
+			this._filling = false;
+		}
+	}
+	_buildOption(opt, selected) {
+		const el = document.createElement("div");
+		el.className = "ix-combobox__option";
+		el.setAttribute("data-value", opt.value);
+		if (selected) el.setAttribute("aria-selected", "true");
+		const check = document.createElement("span");
+		check.className = "ix-combobox__option-check";
+		check.setAttribute("aria-hidden", "true");
+		el.appendChild(check);
+		const label = document.createElement("span");
+		label.className = "ix-combobox__option-label";
+		label.textContent = opt.label;
+		el.appendChild(label);
+		if (opt.description) {
+			const desc = document.createElement("span");
+			desc.className = "ix-combobox__option-description";
+			desc.textContent = opt.description;
+			el.appendChild(desc);
+		}
+		return el;
+	}
+	_preselectValue() {
+		return this.getAttribute("data-country-code") ?? this.getAttribute("data-default-country-code");
+	}
+	_resolveCountryOptions() {
+		const raw = this.getAttribute("data-countries");
+		if (raw) try {
+			const parsed = JSON.parse(raw);
+			if (Array.isArray(parsed) && parsed.every((o) => o && typeof o.value === "string" && typeof o.label === "string")) return parsed;
+		} catch {}
+		return getDefaultCountries(normalizeLocale(this.getAttribute("data-locale")));
+	}
+	_listbox() {
+		return this._combobox()?.querySelector(".ix-combobox__listbox") ?? null;
+	}
+	_stampNumberDefaults() {
+		const input = this._numberInput();
+		if (!input) return;
+		for (const [attr, value] of Object.entries({
+			type: "tel",
+			inputmode: "numeric",
+			autocomplete: "tel-national",
+			"data-format": "phone"
+		})) if (!input.hasAttribute(attr)) input.setAttribute(attr, value);
+	}
+};
+//#endregion
 //#region lib/utils/platform.ts
 /**
 * Plattform-deteksjon for web components.
@@ -2338,6 +3294,22 @@ var IxTabPanel = class extends HTMLElement {
 	}
 };
 //#endregion
+//#region lib/utils/cn.ts
+function cn(...inputs) {
+	const klasser = [];
+	for (const input of inputs) {
+		if (!input) continue;
+		if (typeof input === "string" || typeof input === "number") klasser.push(String(input));
+		else if (Array.isArray(input)) {
+			const nøstet = cn(...input);
+			if (nøstet) klasser.push(nøstet);
+		} else if (typeof input === "object") {
+			for (const nøkkel in input) if (input[nøkkel]) klasser.push(nøkkel);
+		}
+	}
+	return klasser.join(" ");
+}
+//#endregion
 //#region lib/modal/modal.ts
 var ATTR_OPEN = "data-modal-open";
 var ATTR_CLOSE = "data-modal-close";
@@ -2530,10 +3502,13 @@ 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-date-field", IxDateField);
+customElements.define("ix-phone-number-field", IxPhoneNumberField);
 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);
+globalThis.cn = cn;
 //#endregion
-export { COMMON_ICON_NAMES, IxCheckboxGroup, IxCombobox, IxField, IxIcon, IxProgressBar, IxRadioGroup, IxTab, IxTabList, IxTabPanel, IxTabs, amountFormatterForLocale, createAmountFormatter, createPatternFormatter, registerFormat, resolveFormat };
+export { BUILTIN_FORMAT_NAMES, COMMON_ICON_NAMES, IxCheckboxGroup, IxCombobox, IxDateField, IxField, IxIcon, IxPhoneNumberField, IxProgressBar, IxRadioGroup, IxTab, IxTabList, IxTabPanel, IxTabs, amountFormatterForLocale, cn, createAmountFormatter, createPatternFormatter, registerFormat, resolveFormat };