@oslokommune/punkt-elements 18.7.0 → 18.7.2

package/dist/{combobox-DcBFiuwP.js → combobox-Cqqokx73.js}

@@ -1,17 +1,18 @@
-import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-e2MAMNEP.js";
-import { t as o } from "./class-map-BL_YL_Ed.js";
-import { t as s } from "./if-defined-r8tKY4tG.js";
-import { r as c } from "./element-with-slot-GwTT3WRD.js";
-import "./icon-jEFbKTB_.js";
-import { n as l, t as u } from "./ref-lE1mGUOL.js";
-import "./tag-D2Xvsy1i.js";
-import { t as d } from "./repeat-CCnTfedv.js";
-import { a as f, c as p, i as m, o as h, r as g, s as _ } from "./listbox-CsP0qbU1.js";
-import { t as v } from "./input-element-BiUfK_gU.js";
-import { t as y } from "./pkt-options-controller-DKkmDDzT.js";
-import "./input-wrapper-Bwh720ke.js";
+import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-J8nynuVk.js";
+import { t as o } from "./class-map-DSoj1J68.js";
+import { t as s } from "./if-defined-BILLSM7i.js";
+import { t as c } from "./format-BTeSVkED.js";
+import { r as l } from "./element-with-slot-BOuXlWSY.js";
+import "./icon-DkVqRWbC.js";
+import { n as u, t as d } from "./ref-DNowxdYH.js";
+import "./tag-bztxjcF0.js";
+import { t as f } from "./repeat-CZ1oMXnW.js";
+import { a as p, c as m, i as h, l as g, o as _, r as v, s as y } from "./listbox-CrQboPG6.js";
+import { t as b } from "./input-element-Qb0w3ChW.js";
+import { t as x } from "./pkt-options-controller-XcIgx_v1.js";
+import "./input-wrapper-Bg06k-cj.js";
 //#region ../../shared-utils/combobox/input-utils.ts
-var b = (e, t, n) => {
+var S = (e, t, n) => {
 	switch (e) {
 		case ",": return n ? "addValue" : null;
 		case "Enter": return "addValue";
@@ -20,12 +21,12 @@ var b = (e, t, n) => {
 		case "Escape": return "closeOptions";
 		default: return null;
 	}
-}, x = (e, t, n, r, i) => {
+}, C = (e, t, n, r, i) => {
 	if (!e) return {
 		action: "none",
 		value: null
 	};
-	let a = m(n, e);
+	let a = h(n, e);
 	return !t.includes(e) && !a ? r ? {
 		action: "addUserValue",
 		value: e
@@ -42,8 +43,8 @@ var b = (e, t, n) => {
 		action: "none",
 		value: null
 	};
-}, S = (e, t, n, r, i) => e.trim().toLowerCase() ? {
-	..._(e, t, n, r),
+}, w = (e, t, n, r, i) => e.trim().toLowerCase() ? {
+	...m(e, t, n, r),
 	shouldRemoveValue: !1,
 	shouldResetInput: !1
 } : {
@@ -51,10 +52,10 @@ var b = (e, t, n) => {
 	userInfoMessage: "",
 	shouldRemoveValue: !i && !!t[0],
 	shouldResetInput: !0
-}, C = (e, t, n) => {
-	let r = m(t, e);
+}, T = (e, t, n) => {
+	let r = h(t, e);
 	return n === "label" && r?.label ? r.label : e;
-}, w = {
+}, E = {
 	markOptionSelected(e, t) {
 		if (t) {
 			for (let n of e) if (n.value === t) {
@@ -80,7 +81,7 @@ var b = (e, t, n) => {
 	removeUserAddedOptions(e) {
 		return e.filter((e) => !e.userAdded);
 	}
-}, T = { parseOptionsFromSlot(e) {
+}, D = { parseOptionsFromSlot(e) {
 	let t = [];
 	return e.forEach((e) => {
 		if (!e.textContent && !e.getAttribute("value")) return;
@@ -88,22 +89,25 @@ var b = (e, t, n) => {
 			value: e.getAttribute("value") || e.textContent || "",
 			label: e.textContent || e.getAttribute("value") || ""
 		};
-		e.getAttribute("data-prefix") && (n.prefix = e.getAttribute("data-prefix") || void 0), e.getAttribute("tagskincolor") && (n.tagSkinColor = e.getAttribute("tagskincolor")), e.getAttribute("description") && (n.description = e.getAttribute("description") || void 0), n.fulltext = g(n), t.push(n);
+		e.getAttribute("data-prefix") && (n.prefix = e.getAttribute("data-prefix") || void 0), e.getAttribute("tagskincolor") && (n.tagSkinColor = e.getAttribute("tagskincolor")), e.getAttribute("description") && (n.description = e.getAttribute("description") || void 0), n.fulltext = v(n), t.push(n);
 	}), t;
-} }, E = {
+} }, O = {
+	cloneOptions(e) {
+		return Array.isArray(e) ? e.map((e) => ({ ...e })) : [];
+	},
 	syncOptionsWithValues(e, t) {
 		let n = [...t];
 		return e.forEach((e) => {
-			e.value && !e.label && (e.label = e.value), e.selected && !n.includes(e.value) && n.push(e.value), e.fulltext = g(e), e.selected = e.selected || n.includes(e.value);
+			e.value && !e.label && (e.label = e.value), e.selected && !n.includes(e.value) && n.push(e.value), e.fulltext = v(e), e.selected = e.selected || n.includes(e.value);
 		}), {
 			options: e,
 			newValues: n
 		};
 	},
-	mergeWithUserAdded(e, t) {
-		return [...t.filter((e) => e?.userAdded && e.selected).filter((t) => !(Array.isArray(e) ? e : []).some((e) => e.value === t.value)), ...e];
+	mergeWithUserAdded(e, t, n) {
+		return [...t.filter((e) => e?.userAdded && n.includes(e.value)).filter((t) => !(Array.isArray(e) ? e : []).some((e) => e.value === t.value)), ...e];
 	}
-}, D = {
+}, k = {
 	name: "pkt-combobox",
 	react: "PktCombobox",
 	"css-class": "pkt-combobox",
@@ -223,12 +227,14 @@ var b = (e, t, n) => {
 			category: "contents"
 		},
 		helptextDropdown: {
+			attribute: "helptextdropdown",
 			type: "string",
 			name: "Utvidet hjelpetekst",
 			description: "Hjelpetekst som vises i en lukket boks man kan åpne",
 			category: "contents"
 		},
 		helptextDropdownButton: {
+			attribute: "helptextdropdownbutton",
 			type: "string",
 			name: "Knappetekst for hjelpetekst",
 			description: "Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",
@@ -242,12 +248,14 @@ var b = (e, t, n) => {
 			category: "tech"
 		},
 		hasError: {
+			attribute: "haserror",
 			type: "boolean",
 			name: "Feil",
 			description: "Feltet har en feil",
 			category: "ui"
 		},
 		errorMessage: {
+			attribute: "errormessage",
 			type: "string",
 			name: "Feilmelding",
 			description: "Tekst som vises under feltet ved feil",
@@ -260,30 +268,35 @@ var b = (e, t, n) => {
 			category: "tech"
 		},
 		requiredTag: {
+			attribute: "requiredtag",
 			type: "boolean",
 			name: "Påkrevd-merking",
 			description: "Viser en merking som indikerer at feltet er påkrevd",
 			category: "ui"
 		},
 		requiredText: {
+			attribute: "requiredtext",
 			type: "string",
 			name: "Påkrevd-tekst",
 			description: "Tekst som vises i påkrevd-merkingen",
 			category: "contents"
 		},
 		optionalTag: {
+			attribute: "optionaltag",
 			type: "boolean",
 			name: "Valgfritt-merking",
 			description: "Viser en merking som indikerer at feltet er valgfritt",
 			category: "ui"
 		},
 		optionalText: {
+			attribute: "optionaltext",
 			type: "string",
 			name: "Valgfritt-tekst",
 			description: "Tekst som vises i valgfritt-merkingen",
 			category: "contents"
 		},
 		tagText: {
+			attribute: "tagtext",
 			type: "string",
 			name: "Tag-tekst",
 			description: "Tekst som vises i en tag ved siden av label",
@@ -425,6 +438,7 @@ var b = (e, t, n) => {
 			category: "ui"
 		},
 		useWrapper: {
+			attribute: "usewrapper",
 			name: "Bruk wrapper",
 			type: "boolean",
 			required: !1,
@@ -434,6 +448,7 @@ var b = (e, t, n) => {
 			category: "ui"
 		},
 		hasFieldset: {
+			attribute: "hasfieldset",
 			name: "Bruk fieldset",
 			type: "boolean",
 			required: !1,
@@ -448,6 +463,13 @@ var b = (e, t, n) => {
 			default: null,
 			description: "Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.",
 			category: "ui"
+		},
+		defaultValue: {
+			attribute: "defaultvalue",
+			type: "string | string[]",
+			name: "Standardverdi",
+			description: "Verdien feltet får ved oppstart og ved nullstilling av skjemaet",
+			category: "functionality"
 		}
 	},
 	events: {
@@ -468,9 +490,9 @@ var b = (e, t, n) => {
 			description: "Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"
 		}
 	}
-}, O = class extends v {
+}, A = class extends b {
 	constructor() {
-		super(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = D.props.displayValueAs.default, this.tagPlacement = null, this.isOpen = !1, this._options = [], this._value = [], this._isOptionsOpen = !1, this._userInfoMessage = "", this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._internalValueSync = !1, this._optionsFromSlot = !1, this._lastSlotGeneration = 0, this._suppressNextOpen = !1, this.inputRef = u(), this.triggerRef = u(), this.listboxRef = u(), this.optionsController = new y(this);
+		super(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = null, this.multiple = !1, this.maxlength = null, this.displayValueAs = k.props.displayValueAs.default, this.tagPlacement = null, this.isOpen = !1, this._options = [], this._value = [], this._isOptionsOpen = !1, this._userInfoMessage = "", this._messageValue = null, this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._skipInputTab = !1, this._optionsFromSlot = !1, this._lastSlotGeneration = 0, this._suppressNextOpen = !1, this.inputRef = d(), this.triggerRef = d(), this.listboxRef = d(), this._pendingDispatchFrom = null, this.optionsController = new x(this);
 	}
 	get _hasTextInput() {
 		return this.typeahead || this.allowUserInput;
@@ -481,15 +503,30 @@ var b = (e, t, n) => {
 	focusTrigger() {
 		this._hasTextInput ? this.inputRef.value?.focus() : this.triggerRef.value?.focus();
 	}
+	focusAfterCommit() {
+		this._skipInputTab = !0;
+		let e = this.inputRef.value;
+		e && e.type !== "hidden" && e.setAttribute("tabindex", "-1"), this.triggerRef.value?.focus();
+	}
+	restoreInputTab() {
+		this._skipInputTab = !1;
+	}
 	parseValue() {
-		return Array.isArray(this.value) ? this.multiple ? this.value : this.value.length > 0 ? [this.value[0]] : [] : this.value && this.multiple ? this.value.split(",") : this.value ? [this.value] : [];
+		return this.parseToValues(this.value);
+	}
+	parseToValues(e) {
+		return Array.isArray(e) ? this.multiple ? e : e.length > 0 ? [e[0]] : [] : e && this.multiple ? e.split(",") : e ? [e] : [];
 	}
 	updateMaxReached() {
-		this._maxIsReached = p(this._value.length, this.maxlength);
+		this._maxIsReached = g(this._value.length, this.maxlength);
 	}
-	syncValueAndDispatch(e) {
-		let t = this._value, n = this.multiple ? t.join(",") : t[0] || "";
-		if (n !== (Array.isArray(this.value) ? this.value.join(",") : String(this.value || "")) && (this._internalValueSync = !0, this.value = n), e?.join(",") !== t.join(",")) {
+	syncPublicValue() {
+		let e = this.multiple ? this._value.join(",") : this._value[0] || "";
+		e !== (Array.isArray(this.value) ? this.value.join(",") : String(this.value || "")) && (this.value = e);
+	}
+	dispatchValueChange(e) {
+		let t = this._value;
+		if (e?.join(",") !== t.join(",")) {
 			let e = this.multiple ? [...t] : t[0] || "";
 			this.onChange(e);
 		} else t.length === 0 && e && e.length > 0 && this.clearInputValue();
@@ -502,53 +539,53 @@ var b = (e, t, n) => {
 i([a({
 	type: String,
 	reflect: !0
-})], O.prototype, "value", void 0), i([a({ type: Array })], O.prototype, "options", void 0), i([a({
+})], A.prototype, "value", void 0), i([a({ type: Array })], A.prototype, "options", void 0), i([a({
 	type: Array,
 	attribute: "default-options"
-})], O.prototype, "defaultOptions", void 0), i([a({
+})], A.prototype, "defaultOptions", void 0), i([a({
 	type: Boolean,
 	attribute: "allow-user-input"
-})], O.prototype, "allowUserInput", void 0), i([a({ type: Boolean })], O.prototype, "typeahead", void 0), i([a({
+})], A.prototype, "allowUserInput", void 0), i([a({ type: Boolean })], A.prototype, "typeahead", void 0), i([a({
 	type: Boolean,
 	attribute: "include-search"
-})], O.prototype, "includeSearch", void 0), i([a({
+})], A.prototype, "includeSearch", void 0), i([a({
 	type: String,
 	attribute: "search-placeholder"
-})], O.prototype, "searchPlaceholder", void 0), i([a({ type: Boolean })], O.prototype, "multiple", void 0), i([a({ type: Number })], O.prototype, "maxlength", void 0), i([a({
+})], A.prototype, "searchPlaceholder", void 0), i([a({ type: Boolean })], A.prototype, "multiple", void 0), i([a({ type: Number })], A.prototype, "maxlength", void 0), i([a({
 	type: String,
 	attribute: "display-value-as"
-})], O.prototype, "displayValueAs", void 0), i([a({
+})], A.prototype, "displayValueAs", void 0), i([a({
 	type: String,
 	attribute: "tag-placement"
-})], O.prototype, "tagPlacement", void 0), i([a({
+})], A.prototype, "tagPlacement", void 0), i([a({
 	type: Boolean,
 	attribute: "open"
-})], O.prototype, "isOpen", void 0), i([r()], O.prototype, "_options", void 0), i([r()], O.prototype, "_value", void 0), i([r()], O.prototype, "_isOptionsOpen", void 0), i([r()], O.prototype, "_userInfoMessage", void 0), i([r()], O.prototype, "_addValueText", void 0), i([r()], O.prototype, "_maxIsReached", void 0), i([r()], O.prototype, "_search", void 0), i([r()], O.prototype, "_inputFocus", void 0);
+})], A.prototype, "isOpen", void 0), i([r()], A.prototype, "_options", void 0), i([r()], A.prototype, "_value", void 0), i([r()], A.prototype, "_isOptionsOpen", void 0), i([r()], A.prototype, "_userInfoMessage", void 0), i([r()], A.prototype, "_messageValue", void 0), i([r()], A.prototype, "_addValueText", void 0), i([r()], A.prototype, "_maxIsReached", void 0), i([r()], A.prototype, "_search", void 0), i([r()], A.prototype, "_inputFocus", void 0), i([r()], A.prototype, "_skipInputTab", void 0);
 //#endregion
 //#region src/components/combobox/combobox-value.ts
-var k = class extends O {
+var j = class extends A {
 	toggleValue(e) {
 		if (this.disabled) return;
 		this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
-		let t = m(this.options, e)?.value || null, n = this._value.includes(e || t || ""), r = !!t, i = this._options.find((t) => t.value === e)?.disabled || !1, a = !e?.trim(), o = !this.multiple, s = this.multiple, c = p(this._value.length, this.maxlength), l = !1, u = !0, d = "", f = "";
-		i || (!r && this.allowUserInput && !a ? (this.addNewUserValue(e), d = "valueAdded", l = s) : !r && !this.allowUserInput ? (o && this._value[0] && this.removeValue(this._value[0]), u = !1, l = !0, d = "noResults") : n ? (this.removeValue(t), l = !0, o && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "")) : a && o ? (this.removeAllSelected(), l = !0) : o ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(t), l = !1) : s && !c ? (this.setSelected(t), l = !0) : s && c ? (d = "maxSelected", u = !1, f = e) : (o && this.removeAllSelected(), d = "noValidValue", u = !1, l = !0, f = e), this._isOptionsOpen = l, l || (o && this._hasTextInput && (this._suppressNextOpen = !0), window.setTimeout(() => {
-			this.focusTrigger();
-		}, 0)), this._userInfoMessage = d, this._search = f || "", this.resetComboboxInput(u), s && this.updateMaxReached());
+		let t = h(this.options, e)?.value || null, n = this._value.includes(e || t || ""), r = !!t, i = this._options.find((t) => t.value === e)?.disabled || !1, a = !e?.trim(), o = !this.multiple, s = this.multiple, c = g(this._value.length, this.maxlength), l = !1, u = !0, d = "", f = null, p = "";
+		i || (!r && this.allowUserInput && !a ? (this.addNewUserValue(e), d = "valueAdded", l = s) : !r && !this.allowUserInput ? (o && this._value[0] && this.removeValue(this._value[0]), u = !1, l = !0, d = "noResults") : n ? (this.removeValue(t), l = !0, o && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "")) : a && o ? (this.removeAllSelected(), l = !0) : o ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(t), l = !1, d = "valueSelected", f = this._hasTextInput ? T(t || "", this.options, this.displayValueAs) : y(h(this.options, t), this.displayValueAs)) : s && !c ? (this.setSelected(t), l = !0) : s && c ? (d = "maxSelected", u = !1, p = e) : (o && this.removeAllSelected(), d = "noValidValue", u = !1, l = !0, p = e), this._isOptionsOpen = l, l || window.setTimeout(() => {
+			this.focusAfterCommit();
+		}, 0), this._search = p || "", this.resetComboboxInput(u), this._userInfoMessage = d, this._messageValue = f, s && this.updateMaxReached());
 	}
 	setSelected(e) {
 		if (!this._value.includes(e)) {
-			if (this.multiple && p(this._value.length, this.maxlength)) {
+			if (this.multiple && g(this._value.length, this.maxlength)) {
 				this._userInfoMessage = "maxSelected";
 				return;
 			}
-			!this.multiple && this.removeAllSelected(), this._value = e ? [...this._value, e] : this._value, w.markOptionSelected(this._options, e), this.resetComboboxInput(!0);
+			!this.multiple && this.removeAllSelected(), this._value = e ? [...this._value, e] : this._value, E.markOptionSelected(this._options, e), this.resetComboboxInput(!0);
 		}
 	}
 	removeSelected(e) {
 		if (!e) return;
 		this._value = this._value.filter((t) => t !== e);
-		let t = m(this.options, e);
-		t && (w.markOptionDeselected(this.options, e), t.userAdded ? (this._options = [...this._options.filter((t) => t.value !== e)], this.options = [...this.options.filter((t) => t.value !== e)]) : this._options.some((t) => t.value === e) || (this._options = [...this._options, t]));
+		let t = h(this.options, e);
+		t && (E.markOptionDeselected(this.options, e), t.userAdded ? (this._options = [...this._options.filter((t) => t.value !== e)], this.options = [...this.options.filter((t) => t.value !== e)]) : this._options.some((t) => t.value === e) || (this._options = [...this._options, t]));
 	}
 	addAllOptions() {
 		if (this.multiple) {
@@ -556,11 +593,11 @@ var k = class extends O {
 				this._userInfoMessage = "tooManySelected";
 				return;
 			}
-			this._value = this._options.map((e) => e.value), w.markAllSelected(this._options), this.requestUpdate();
+			this._value = this._options.map((e) => e.value), E.markAllSelected(this._options), this.requestUpdate();
 		}
 	}
 	removeAllSelected() {
-		this._value = [], w.markAllDeselected(this._options), this._options = w.removeUserAddedOptions(this._options), this.requestUpdate();
+		this._value = [], E.markAllDeselected(this._options), this._options = E.removeUserAddedOptions(this._options), this.requestUpdate();
 	}
 	addValue() {
 		let e = this.inputRef.value?.value.trim() || "";
@@ -576,8 +613,8 @@ var k = class extends O {
 	addNewUserValue(e) {
 		if (!e || e.trim() === "") return;
 		if (!this.multiple) this._value[0] && this.removeSelected(this._value[0]), this._value = [e];
-		else if (!m(this.options, e)) {
-			if (p(this._value.length, this.maxlength)) return;
+		else if (!h(this.options, e)) {
+			if (g(this._value.length, this.maxlength)) return;
 			this._value = [...this._value, e];
 		}
 		let t = {
@@ -586,12 +623,16 @@ var k = class extends O {
 			userAdded: !0,
 			selected: !0
 		};
-		this.options = [t, ...this.options], this._options = [t, ...this._options], this.resetComboboxInput(!0), this.multiple || (this._isOptionsOpen = !1, this._hasTextInput && (this._suppressNextOpen = !0), window.setTimeout(() => {
-			this.focusTrigger();
+		this.options = [t, ...this.options], this._options = [t, ...this._options], this.resetComboboxInput(!0), this.multiple || (this._isOptionsOpen = !1, window.setTimeout(() => {
+			this.focusAfterCommit();
 		}, 0)), this.requestUpdate();
 	}
+	refreshOptionsFromValue() {
+		let e = O.cloneOptions(this.options);
+		e.forEach((e) => e.selected = this._value.includes(e.value)), this._options = O.syncOptionsWithValues(e, this._value).options;
+	}
 	resetComboboxInput(e = !0) {
-		this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && e && (this._search = "", this.multiple ? this.inputRef.value.value = "" : (this.inputRef.value.value = this._value[0] ? C(this._value[0], this.options, this.displayValueAs) : "", this._userInfoMessage = "")), this._options = [...this.options];
+		this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && e && (this._search = "", this.multiple ? this.inputRef.value.value = "" : (this.inputRef.value.value = this._value[0] ? T(this._value[0], this.options, this.displayValueAs) : "", this._userInfoMessage = "")), this.refreshOptionsFromValue();
 	}
 	removeLastValue(e) {
 		if (this._value.length === 0) return;
@@ -599,31 +640,34 @@ var k = class extends O {
 		let t = this._value[this._value.length - 1];
 		t && this.removeSelected(t), this.updateMaxReached();
 	}
-}, A = class extends k {
+}, M = class extends j {
 	handleInput(e) {
 		if (e.stopPropagation(), e.stopImmediatePropagation(), this.disabled) return;
 		this.touched = !0;
 		let t = e.target;
 		if (this._search = t.value, this.checkForMatches(), this.typeahead) {
 			if (this._search) {
-				let { filtered: n, suggestion: r } = h(this.options, this._search);
+				let { filtered: n, suggestion: r } = _(this.options, this._search);
 				this._options = n, e.inputType !== "deleteContentBackward" && r?.label && this.inputRef.value && this.inputRef.value.type !== "hidden" && (t.value = r.label, window.setTimeout(() => t.setSelectionRange(this._search.length, t.value.length), 0), t.selectionDirection = "backward");
-			} else this._options = [...this.options];
+			} else this.refreshOptionsFromValue();
 		}
 	}
 	handleFocus() {
 		if (!this.disabled) {
-			if (this._suppressNextOpen) {
+			if (this._skipInputTab = !1, this._suppressNextOpen) {
 				this._suppressNextOpen = !1, this._inputFocus = !0, this.requestUpdate();
 				return;
 			}
-			!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = C(this._value[0], this.options, this.displayValueAs)), this._inputFocus = !0, this._search = "", this._options = [...this.options], this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
+			!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = T(this._value[0], this.options, this.displayValueAs)), this._inputFocus = !0, this._search = "", this.refreshOptionsFromValue(), this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
 		}
 	}
+	handleCloseOptions() {
+		this._isOptionsOpen = !1, this._hasTextInput && (this._suppressNextOpen = !0), this.focusTrigger();
+	}
 	handleFocusOut(e) {
 		if (this.disabled || !this._isOptionsOpen) return;
 		let t = e.relatedTarget;
-		t?.closest("pkt-combobox")?.id !== this.id && e.target?.getAttribute("data-focusfix") !== this.id && t !== this.inputRef.value && t !== this.triggerRef.value && this.closeAndProcessInput();
+		t?.closest("pkt-combobox")?.id === this.id || e.target?.classList?.contains("pkt-combobox__value") || t === this.inputRef.value || t === this.triggerRef.value || this.closeAndProcessInput();
 	}
 	closeAndProcessInput() {
 		if (this._inputFocus = !1, this._addValueText = null, this._userInfoMessage = "", this._search = "", this.inputRef.value && this.inputRef.value.type !== "hidden") {
@@ -631,11 +675,11 @@ var k = class extends O {
 			if (!this.multiple) {
 				if (!e) this._value[0] && this.removeSelected(this._value[0]);
 				else {
-					let t = m(this.options, e);
+					let t = h(this.options, e);
 					t && t.value !== this._value[0] ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(t.value)) : !t && this.allowUserInput && (this._value[0] && this.removeSelected(this._value[0]), this.addNewUserValue(e));
 				}
 			} else if (e !== "") {
-				let { action: t, value: n } = x(e, this._value, this.options, this.allowUserInput, this.multiple);
+				let { action: t, value: n } = C(e, this._value, this.options, this.allowUserInput, this.multiple);
 				switch (t) {
 					case "addUserValue":
 						this.addNewUserValue(n);
@@ -646,7 +690,7 @@ var k = class extends O {
 					case "removeValue": this.removeValue(n);
 				}
 			}
-			!this.multiple && this._value[0] ? this.inputRef.value.value = C(this._value[0], this.options, this.displayValueAs) : this.inputRef.value.value = "";
+			!this.multiple && this._value[0] ? this.inputRef.value.value = T(this._value[0], this.options, this.displayValueAs) : this.inputRef.value.value = "";
 		}
 		this._isOptionsOpen = !1, this.onBlur();
 	}
@@ -704,7 +748,7 @@ var k = class extends O {
 				return;
 			}
 		}
-		let t = b(e.key, e.shiftKey, this.multiple);
+		let t = S(e.key, e.shiftKey, this.multiple);
 		if (t && !(e.key === "Tab" && !this._isOptionsOpen)) {
 			if (t === "focusListbox" && e.key === "Tab" && !this.listboxRef.value?.querySelector("[role=\"option\"]:not([data-disabled]), [data-type=\"new-option\"]")) {
 				this.closeAndProcessInput();
@@ -765,14 +809,14 @@ var k = class extends O {
 		}
 	}
 	checkForMatches() {
-		let e = S(this.inputRef.value?.value || this._search || "", this._value, this.options, this.allowUserInput, this.multiple);
+		let e = w(this.inputRef.value?.value || this._search || "", this._value, this.options, this.allowUserInput, this.multiple);
 		if (e.shouldRemoveValue && this.removeValue(this._value[0]), e.shouldResetInput) {
 			this.resetComboboxInput(!1);
 			return;
 		}
 		this._addValueText = e.addValueText, this._userInfoMessage = e.userInfoMessage;
 	}
-}, j = class extends A {
+}, N = class extends M {
 	constructor(...e) {
 		super(...e), this.handleBodyClick = (e) => {
 			this._isOptionsOpen && !this.contains(e.target) && this.closeAndProcessInput();
@@ -781,56 +825,59 @@ var k = class extends O {
 	connectedCallback() {
 		if (super.connectedCallback(), document?.body.addEventListener("click", this.handleBodyClick), this._options = [], this.defaultOptions && this.defaultOptions.length) {
 			let e = this.options?.filter((e) => e.userAdded) || [];
-			this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : [];
+			this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = O.cloneOptions(this.options);
 		}
 		if (this.optionsController?.nodes && this.optionsController.nodes.length) {
-			let e = T.parseOptionsFromSlot(this.optionsController.nodes);
+			let e = D.parseOptionsFromSlot(this.optionsController.nodes);
 			e.length && (this.options = [...e], this._options = [...e], this._optionsFromSlot = !0, this._lastSlotGeneration = this.optionsController.generation);
 		}
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document?.body.removeEventListener("click", this.handleBodyClick);
+	}
+	firstUpdated(e) {
+		this.defaultValue !== null && !this.value && (this.value = this.defaultValue), super.firstUpdated(e);
+	}
 	willUpdate(e) {
 		if (this._optionsFromSlot && this.optionsController) {
 			let e = this.optionsController.generation;
 			if (e !== this._lastSlotGeneration) {
 				this._lastSlotGeneration = e;
-				let t = T.parseOptionsFromSlot(this.optionsController.nodes), n = this._options.filter((e) => e.userAdded);
+				let t = D.parseOptionsFromSlot(this.optionsController.nodes), n = this._options.filter((e) => e.userAdded);
 				this.options = [...n, ...t];
 			}
 		}
-		super.willUpdate(e);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), document?.body.removeEventListener("click", this.handleBodyClick);
-	}
-	firstUpdated(e) {
-		this.defaultValue !== null && !this.value && (this.value = this.defaultValue), super.firstUpdated(e);
-	}
-	updated(e) {
-		e.has("isOpen") && (this._isOptionsOpen = this.isOpen);
+		if (super.willUpdate(e), e.has("isOpen") && (this._isOptionsOpen = this.isOpen), e.has("defaultOptions") && this.defaultOptions.length) {
+			let e = (Array.isArray(this.options) ? this.options : []).filter((e) => e.userAdded) || [];
+			this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = O.cloneOptions(this.options);
+		}
 		let t = e.has("value"), n = e.has("_value");
-		if (t && this._internalValueSync) this._internalValueSync = !1, n && this.syncValueAndDispatch(e.get("_value"));
-		else if (t) {
+		if (t) {
 			let e = [...this._value], t = this.parseValue();
-			t.join(",") !== this._value.join(",") && (this._value = t, this.options.forEach((e) => e.selected = t.includes(e.value)), this._options.forEach((e) => e.selected = t.includes(e.value)), this._options = [...this._options]), this.updateMaxReached(), this.syncValueAndDispatch(e);
-		} else n && this.syncValueAndDispatch(e.get("_value"));
-		if (e.has("defaultOptions") && this.defaultOptions.length) {
-			let e = (Array.isArray(this.options) ? this.options : []).filter((e) => e.userAdded) || [];
-			this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : [];
+			t.join(",") !== this._value.join(",") && (this._value = t, this._options.forEach((e) => e.selected = t.includes(e.value)), this._options = [...this._options]), this._pendingDispatchFrom ??= e;
+		} else n && (this._pendingDispatchFrom ??= e.get("_value") ?? []);
+		if (e.has("defaultValue") && this.defaultValue != null && !this._value.length) {
+			let e = this.parseToValues(this.defaultValue);
+			e.length && (this._pendingDispatchFrom ??= [...this._value], this._value = e, this._options.forEach((t) => t.selected = e.includes(t.value)), this._options = [...this._options]);
 		}
 		if (e.has("options")) {
-			let t = e.get("options") || this._options || [], n = E.mergeWithUserAdded(this.options, t);
+			let t = e.get("options") || this._options || [], n = O.mergeWithUserAdded(O.cloneOptions(this.options), t, this._value);
 			this._options = n, n.length > this.options.length && (this.options = n);
-			let r = E.syncOptionsWithValues(this._options, this._value);
-			if (this._options = r.options, r.newValues.length > this._value.length) {
-				let e = [...this._value];
-				this._value = r.newValues, this.syncValueAndDispatch(e);
-			}
+			let r = O.syncOptionsWithValues(this._options, this._value);
+			this._options = r.options, r.newValues.length > this._value.length && (this._pendingDispatchFrom ??= [...this._value], this._value = r.newValues);
+		}
+		(t || n || e.has("options") || e.has("defaultValue")) && this.updateMaxReached(), this._pendingDispatchFrom && this.syncPublicValue();
+	}
+	updated(e) {
+		if (this._pendingDispatchFrom) {
+			let e = this._pendingDispatchFrom;
+			this._pendingDispatchFrom = null, this.dispatchValueChange(e);
 		}
 		if (e.has("_search") && this.dispatchEvent(new CustomEvent("search", {
 			detail: this._search,
 			bubbles: !1
 		})), !this._isOptionsOpen && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden") {
-			let e = !this.multiple && this._value[0] ? C(this._value[0], this.options, this.displayValueAs) : "";
+			let e = !this.multiple && this._value[0] ? T(this._value[0], this.options, this.displayValueAs) : "";
 			this.inputRef.value.value !== e && (this.inputRef.value.value = e);
 		}
 		this.classList.add("pkt-combobox-component"), this.classList.toggle("pkt-combobox-component--fullwidth", !!this.fullwidth), super.updated(e);
@@ -848,8 +895,8 @@ var k = class extends O {
 	}
 	attributeChangedCallback(e, t, n) {
 		if (e === "options") {
-			this._options = Array.isArray(this.options) ? [...this.options] : [];
-			let e = E.syncOptionsWithValues(this._options, this._value);
+			this._options = O.cloneOptions(this.options);
+			let e = O.syncOptionsWithValues(this._options, this._value);
 			this._options = e.options, e.newValues.length > this._value.length && (this._value = e.newValues), this._search = "";
 		}
 		super.attributeChangedCallback(e, t, n);
@@ -882,7 +929,7 @@ var k = class extends O {
         class="pkt-combobox__wrapper"
         @labelClick=${this.handleInputClick}
       >
-        <div class="pkt-contents" slot="helptext">${c(this, "helptext")}</div>
+        <div class="pkt-contents" slot="helptext">${l(this, "helptext")}</div>
         <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
           <div
             class=${o({
@@ -899,16 +946,17 @@ var k = class extends O {
             aria-controls=${s(this._hasTextInput ? void 0 : `${this.id}-listbox`)}
             aria-haspopup=${s(this._hasTextInput ? void 0 : "listbox")}
             aria-labelledby=${s(this._hasTextInput ? void 0 : `${this.id}-combobox-label`)}
-            aria-activedescendant=${s(!this._hasTextInput && this._value[0] && m(this.options, this._value[0]) ? `${this.id}-listbox-${f(this._options, this._value[0])}` : void 0)}
+            aria-activedescendant=${s(!this._hasTextInput && this._isOptionsOpen && this._value[0] && h(this.options, this._value[0]) ? `${this.id}-listbox-${p(this._options, this._value[0])}` : void 0)}
             aria-description=${s(this._selectionDescription || void 0)}
             tabindex=${this._hasTextInput || this.disabled ? "-1" : "0"}
             @click=${this.handleInputClick}
             @keydown=${this._hasTextInput ? n : this.handleSelectOnlyKeydown}
-            ${l(this.triggerRef)}
+            @blur=${this.restoreInputTab}
+            ${u(this.triggerRef)}
           >
             ${!this._hasTextInput && this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? e`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
-                  >${this.placeholder}</span
-                >` : this.tagPlacement === "outside" ? n : this.renderSingleOrMultipleValues()}
+                    >${this.placeholder}</span
+                  >` : this.tagPlacement === "outside" ? n : this.renderSingleOrMultipleValues()}
             ${this.renderInputField()}
             <pkt-icon
               class=${o({
@@ -926,26 +974,27 @@ var k = class extends O {
             .isOpen=${this._isOptionsOpen}
             .searchPlaceholder=${this.searchPlaceholder}
             .label="Liste: ${this.label || ""}"
+            ?disabled=${this.disabled}
             ?include-search=${this.includeSearch}
             ?is-multi-select=${this.multiple}
             ?allow-user-input=${this.allowUserInput && !this._maxIsReached}
             ?max-is-reached=${this._maxIsReached}
             .customUserInput=${s(this._addValueText)}
-            .userMessage=${this._userInfoMessage ? this.pktStrings.get("combobox")[this._userInfoMessage] : ""}
+            .userMessage=${this._userInfoMessage ? c(this.pktStrings.get("combobox")[this._userInfoMessage], { value: this._messageValue ?? "" }) : ""}
             @search=${this.handleSearch}
             @option-toggle=${this.handleOptionToggled}
             @select-all=${this.addAllOptions}
-            @close-options=${() => this._isOptionsOpen = !1}
+            @close-options=${this.handleCloseOptions}
             @tab-close=${() => this.closeAndProcessInput()}
             .searchValue=${this._search || null}
             .maxLength=${this.maxlength || 0}
-            ${l(this.listboxRef)}
+            ${u(this.listboxRef)}
           ></pkt-listbox>
         </div>
 
         ${this.tagPlacement === "outside" && this.multiple ? e`<div class="pkt-combobox__tags-outside">
-              ${this.renderSingleOrMultipleValues()}
-            </div>` : n}
+                ${this.renderSingleOrMultipleValues()}
+              </div>` : n}
       </pkt-input-wrapper>
     `;
 	}
@@ -961,6 +1010,7 @@ var k = class extends O {
               @change=${(e) => {
 			e.stopPropagation(), e.stopImmediatePropagation();
 		}}
+              tabindex=${s(this._skipInputTab ? "-1" : void 0)}
               @keydown=${this.handleInputKeydown}
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
@@ -970,9 +1020,9 @@ var k = class extends O {
               aria-label=${s(this.label)}
               aria-autocomplete=${this.typeahead ? "both" : this.allowUserInput ? "list" : "none"}
               aria-controls="${this.id}-listbox"
-              aria-activedescendant=${s(this._value[0] && m(this.options, this._value[0]) ? `${this.id}-listbox-${f(this._options, this._value[0])}` : void 0)}
+              aria-activedescendant=${s(this._isOptionsOpen && this._value[0] && h(this.options, this._value[0]) ? `${this.id}-listbox-${p(this._options, this._value[0])}` : void 0)}
               aria-description=${s(this._selectionDescription || void 0)}
-              ${l(this.inputRef)}
+              ${u(this.inputRef)}
             />
           </div>
         ` : e`
@@ -981,16 +1031,16 @@ var k = class extends O {
             id="${this.id}-input"
             name=${(this.name || this.id) + "-input"}
             .value=${this._value.join(",")}
-            ${l(this.inputRef)}
+            ${u(this.inputRef)}
           />
         `;
 	}
 	renderSingleOrMultipleValues() {
 		if (!this.multiple && this._hasTextInput) return n;
-		let t = !this.multiple, r = this.renderValueTag(m(this.options, this._value[0])), i = this.tagPlacement === "outside", a = e`
+		let t = !this.multiple, r = this.renderValueTag(h(this.options, this._value[0])), i = this.tagPlacement === "outside", a = e`
       <ul role="list" class="pkt-combobox__tag-list">
-        ${d(this._value, (e) => e, (t, r) => {
-			let a = m(this.options, t), o = a?.tagSkinColor;
+        ${f(this._value, (e) => e, (t, r) => {
+			let a = h(this.options, t), o = a?.tagSkinColor;
 			return e`
               <li
                 role="listitem"
@@ -1011,30 +1061,24 @@ var k = class extends O {
 		})}
       </ul>
     `;
-		return t ? r : a;
+		return !t && this._value.length === 0 ? n : t ? r : a;
 	}
 	renderValueTag(t) {
 		if (!t) return "";
 		switch (this.displayValueAs) {
-			case "prefixAndValue": return e`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${t.prefix || ""} ${t.value}</span
-        >`;
-			case "value": return e`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${t.value}</span
-        >`;
-			default: return e`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${t.label || t.value}</span
-        >`;
+			case "prefixAndValue": return e`<span class="pkt-combobox__value">${t.prefix || ""} ${t.value}</span>`;
+			case "value": return e`<span class="pkt-combobox__value">${t.value}</span>`;
+			default: return e`<span class="pkt-combobox__value">${t.label || t.value}</span>`;
 		}
 	}
 };
 try {
-	t("pkt-combobox")(j);
+	t("pkt-combobox")(N);
 } catch {
 	console.warn("Forsøker å definere <pkt-combobox>, men den er allerede definert");
 }
 //#endregion
 //#region src/components/combobox/index.ts
-var M = j;
+var P = N;
 //#endregion
-export { j as n, M as t };
+export { N as n, P as t };