@oslokommune/punkt-react 16.9.1 → 16.11.0

package/CHANGELOG.md

@@ -5,6 +5,41 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.11.0](https://github.com/oslokommune/punkt/compare/16.10.0...16.11.0) (2026-04-29)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [16.10.0](https://github.com/oslokommune/punkt/compare/16.9.1...16.10.0) (2026-04-22)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Legger til støtte for "fit-content" som størrelse på modal (#3433). 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.9.1](https://github.com/oslokommune/punkt/compare/16.9.0...16.9.1) (2026-04-22)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -618,7 +618,7 @@ export declare interface IPktModal extends Omit<HTMLAttributes<HTMLDialogElement
     headingText?: string;
     hideCloseButton?: boolean;
     closeOnBackdropClick?: boolean;
-    size?: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'fit-content';
     removePadding?: boolean;
     closeButtonSkin?: 'blue' | 'yellow-filled';
     variant?: 'dialog' | 'drawer';
@@ -772,6 +772,8 @@ declare interface IPktTabItem {
 declare interface IPktTabs {
     arrowNav?: boolean;
     disableArrowNav?: boolean;
+    separatorIconName?: string;
+    separatorIconPath?: string;
     tabs?: IPktTab[];
     onTabSelected?: (index: number) => void;
     children?: ReactNode;

package/dist/punkt-react.es.js

@@ -1084,7 +1084,7 @@ var Ut = class extends ft {
 Ut.directiveName = "unsafeHTML", Ut.resultType = 1;
 var Wt = dt(Ut), Gt = class extends Ut {};
 Gt.directiveName = "unsafeSVG", Gt.resultType = 2;
-var Kt = dt(Gt), qt = "https://punkt-cdn.oslo.kommune.no/16.9/icons/";
+var Kt = dt(Gt), qt = "https://punkt-cdn.oslo.kommune.no/16.11/icons/";
 typeof window < "u" && (window.pktFetch = window.pktFetch === void 0 ? fetch : window.pktFetch, window.pktIconPath = window.pktIconPath || qt);
 var Jt = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>", Yt = {}, Xt = 2, Zt = 1500, Qt = typeof Storage < "u" && typeof sessionStorage < "u", $t = (e) => window.pktFetch(e).then((t) => {
 	if (!t.ok) throw Error("Missing icon: " + e);
@@ -1146,7 +1146,7 @@ try {
 var X = (e) => e ?? V;
 //#endregion
 //#region ../elements/dist/button-BIpd1xJh.js
-window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.9/animations/";
+window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.11/animations/";
 var rn = class extends Vt {
 	constructor(...e) {
 		super(...e), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.fullWidth = !1, this.fullWidthOnMobile = !1, this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = window.pktAnimationPath;
@@ -6918,7 +6918,7 @@ try {
 } catch {
 	console.warn("Forsøker å definere <pkt-header-user-menu>, men den er allerede definert");
 }
-var Oa = "https://punkt-cdn.oslo.kommune.no/16.9/logos/", ka = class extends Vt {
+var Oa = "https://punkt-cdn.oslo.kommune.no/16.11/logos/", ka = class extends Vt {
 	constructor(...e) {
 		super(...e), this.searchPlaceholder = "Søk", this.searchValue = "", this.mobileBreakpoint = 768, this.tabletBreakpoint = 1280, this.openedMenu = "none", this.logOutButtonPlacement = "none", this.position = "fixed", this.scrollBehavior = "hide", this.slotMenuVariant = "icon-only", this.slotMenuText = "Meny", this.hideLogo = !1, this.compact = !1, this.showSearch = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.isMobile = !1, this.isTablet = !1, this.openMenu = "none", this.isHidden = !1, this.componentWidth = typeof window < "u" ? window.innerWidth : 0, this.alignSlotRight = !1, this.alignSearchRight = !1, this.headerRef = sn(), this.userContainerRef = sn(), this.slotContainerRef = sn(), this.searchContainerRef = sn(), this.slotContentRef = sn(), this.searchMenuRef = sn(), this.lastScrollPosition = 0, this.savedScrollY = 0, this.lastFocusedElement = null, this.shouldRestoreFocus = !1, this.handleScroll = () => {
 			if (!this.shouldHideOnScroll) return;
@@ -8958,7 +8958,7 @@ try {
 }
 //#endregion
 //#region ../elements/dist/loader-6kFZUErT.js
-window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.9/animations/";
+window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.11/animations/";
 var po = class extends Vt {
 	constructor(...e) {
 		super(...e), this.delay = 0, this.inline = !1, this.isLoading = !0, this.message = null, this.size = "medium", this.variant = "shapes", this.loadingAnimationPath = window.pktAnimationPath, this._shouldDisplayLoader = !1;
@@ -9117,7 +9117,7 @@ try {
 	console.warn("Forsøker å definere <pkt-messagebox>, men den er allerede definert");
 }
 //#endregion
-//#region ../elements/dist/modal-C_wtsh9m.js
+//#region ../elements/dist/modal-pPp8nia6.js
 var go = {
 	name: "pkt-modal",
 	react: "PktModal",
@@ -9169,7 +9169,8 @@ var go = {
 			type: [
 				"small",
 				"medium",
-				"large"
+				"large",
+				"fit-content"
 			],
 			category: "ui",
 			default: "medium"
@@ -9298,10 +9299,9 @@ var go = {
                     </div>`}
               </div>` : V}
           <div class="pkt-modal__container">
-            <div
-              id="pkt-modal__content"
-              class=${Y(n)}
-            >${Bt(this)}</div>
+            <div id="pkt-modal__content" class=${Y(n)}>
+              ${Bt(this)}
+            </div>
           </div>
         </div>
       </dialog>
@@ -9497,7 +9497,7 @@ try {
 	console.warn("Forsøker å definere <pkt-radiobutton>, men den er allerede definert");
 }
 //#endregion
-//#region ../elements/dist/tabs-C0DWPmn2.js
+//#region ../elements/dist/tabs-Rc9N9HWa.js
 var Co = class extends Event {
 	constructor(e, t, n, r) {
 		super("context-request", {
@@ -9656,7 +9656,7 @@ function Ao({ context: e, subscribe: t }) {
 }
 var jo = wo(Symbol("pkt-tabs-context")), Mo = class extends Vt {
 	constructor(...e) {
-		super(...e), this.arrowNav = !0, this.disableArrowNav = !1, this.tabRefs = [], this.disabledMap = {}, this.tabCount = 0, this.context = {
+		super(...e), this.arrowNav = !0, this.disableArrowNav = !1, this.separatorIconName = "", this.separatorIconPath = "", this.tabRefs = [], this.disabledMap = {}, this.tabCount = 0, this.context = {
 			useArrowNav: this.useArrowNav,
 			registerTab: this.registerTab.bind(this),
 			handleClick: this.handleClick.bind(this),
@@ -9670,7 +9670,23 @@ var jo = wo(Symbol("pkt-tabs-context")), Mo = class extends Vt {
 		(e.has("arrowNav") || e.has("disableArrowNav")) && (this.context = {
 			...this.context,
 			useArrowNav: this.useArrowNav
-		});
+		}), this.updateComplete.then(() => this.syncSeparators());
+	}
+	syncSeparators() {
+		let e = this.querySelector(".pkt-tabs__list");
+		if (!e || (e.querySelectorAll(".pkt-tabs__separator").forEach((e) => e.remove()), !(this.separatorIconName || this.separatorIconPath))) return;
+		let t = Array.from(e.children).filter((e) => !e.classList.contains("pkt-tabs__separator"));
+		for (let e = 0; e < t.length - 1; e++) {
+			let n = document.createElement("span");
+			if (n.className = "pkt-tabs__separator", n.setAttribute("aria-hidden", "true"), n.setAttribute("role", "presentation"), this.separatorIconPath) {
+				let e = document.createElement("img");
+				e.setAttribute("src", this.separatorIconPath), e.setAttribute("alt", ""), e.setAttribute("aria-hidden", "true"), n.appendChild(e);
+			} else if (this.separatorIconName) {
+				let e = document.createElement("pkt-icon");
+				e.setAttribute("name", this.separatorIconName), e.classList.add("pkt-tabs__separator-icon"), n.appendChild(e);
+			}
+			t[e].after(n);
+		}
 	}
 	registerTab(e, t, n = !1) {
 		this.tabRefs[t] = e, this.disabledMap[t] = n, this.tabCount = Math.max(this.tabCount, t + 1);
@@ -9709,9 +9725,10 @@ var jo = wo(Symbol("pkt-tabs-context")), Mo = class extends Vt {
 		}
 	}
 	render() {
+		let e = this.useArrowNav ? "tablist" : "navigation";
 		return z`
-      <div class="pkt-tabs">
-        <div class="pkt-tabs__list" role=${this.useArrowNav ? "tablist" : "navigation"}>${Bt(this)}</div>
+      <div class=${this.separatorIconName || this.separatorIconPath ? "pkt-tabs pkt-tabs--with-separator" : "pkt-tabs"}>
+        <div class="pkt-tabs__list" role=${e}>${Bt(this)}</div>
       </div>
     `;
 	}
@@ -9724,7 +9741,15 @@ J([K({
 	type: Boolean,
 	reflect: !0,
 	attribute: "disable-arrow-nav"
-})], Mo.prototype, "disableArrowNav", void 0), J([q()], Mo.prototype, "tabRefs", void 0), J([q()], Mo.prototype, "disabledMap", void 0), J([q()], Mo.prototype, "tabCount", void 0), J([ko({ context: jo }), q()], Mo.prototype, "context", void 0);
+})], Mo.prototype, "disableArrowNav", void 0), J([K({
+	type: String,
+	reflect: !0,
+	attribute: "separator-icon-name"
+})], Mo.prototype, "separatorIconName", void 0), J([K({
+	type: String,
+	reflect: !0,
+	attribute: "separator-icon-path"
+})], Mo.prototype, "separatorIconPath", void 0), J([q()], Mo.prototype, "tabRefs", void 0), J([q()], Mo.prototype, "disabledMap", void 0), J([q()], Mo.prototype, "tabCount", void 0), J([ko({ context: jo }), q()], Mo.prototype, "context", void 0);
 try {
 	G("pkt-tabs")(Mo);
 } catch {
@@ -9757,8 +9782,8 @@ var No = class extends Vt {
 		this.context && this.context.handleKeyUp(e, this.index);
 	}
 	render() {
-		let e = this.context?.useArrowNav ?? !0, t = this.active && !this.disabled, n = [t ? "active" : "", this.disabled ? "pkt-tabs__item--disabled" : ""].filter(Boolean).join(" "), r = e ? "tab" : void 0, i = e ? t : void 0, a = this.disabled ? -1 : t || !e ? void 0 : -1, o = z`
-      ${this.icon ? z`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ""}
+		let e = this.context?.useArrowNav ?? !0, t = this.active && !this.disabled, n = [t ? "active" : "", this.disabled ? "pkt-tabs__item--disabled" : ""].filter(Boolean).join(" "), r = e ? "tab" : void 0, i = e ? t : void 0, a = this.disabled ? -1 : t || !e ? void 0 : -1, o = `pkt-icon--small ${this.icon === "check" ? "pkt-tabs__status-icon" : ""}`, s = z`
+      ${this.icon ? z`<pkt-icon name=${this.icon} class=${o}></pkt-icon>` : ""}
       <span>${Bt(this)}</span>
       ${this.tag ? z`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
     `;
@@ -9775,7 +9800,7 @@ var No = class extends Vt {
           @click=${this.handleClick}
           @keydown=${this.handleKeyDown}
         >
-          ${o}
+          ${s}
         </a>
       ` : z`
       <button
@@ -9791,7 +9816,7 @@ var No = class extends Vt {
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
       >
-        ${o}
+        ${s}
       </button>
     `;
 	}
@@ -10807,7 +10832,7 @@ var Jo = s(({ breadcrumbs: e, navigationType: t, renderLink: n, className: r, ..
 });
 //#endregion
 //#region src/components/button/Button.tsx
-Jo.displayName = "PktBreadcrumbs", window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.9/animations/";
+Jo.displayName = "PktBreadcrumbs", window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.11/animations/";
 var Yo = s(({ children: e, className: t, iconName: n = "user", secondIconName: r = "user", iconPath: i, secondIconPath: a, size: o = "medium", fullWidth: s = !1, fullWidthOnMobile: c = !1, skin: l = "primary", type: u = "button", variant: d = "label-only", state: f, color: p, isLoading: m = void 0, disabled: h = void 0, loadingAnimationPath: g = window.pktAnimationPath, ..._ }, v) => {
 	let x = [
 		t,
@@ -16450,7 +16475,7 @@ var _d = s(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 						children: /* @__PURE__ */ y(Q, {
 							name: "oslologo",
 							"aria-hidden": "true",
-							path: "https://punkt-cdn.oslo.kommune.no/16.9/logos/"
+							path: "https://punkt-cdn.oslo.kommune.no/16.11/logos/"
 						})
 					}) : re ? /* @__PURE__ */ y("button", {
 						"aria-label": "Tilbake til forside",
@@ -16459,12 +16484,12 @@ var _d = s(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 						children: /* @__PURE__ */ y(Q, {
 							name: "oslologo",
 							"aria-hidden": "true",
-							path: "https://punkt-cdn.oslo.kommune.no/16.9/logos/"
+							path: "https://punkt-cdn.oslo.kommune.no/16.11/logos/"
 						})
 					}) : /* @__PURE__ */ y(Q, {
 						name: "oslologo",
 						"aria-hidden": "true",
-						path: "https://punkt-cdn.oslo.kommune.no/16.9/logos/"
+						path: "https://punkt-cdn.oslo.kommune.no/16.11/logos/"
 					})
 				}), T && /* @__PURE__ */ y("span", {
 					className: "pkt-header-service__service-name",
@@ -17138,7 +17163,7 @@ var zd = ({ className: e, compact: t = !1, skin: n = "basic", responsiveView: r
 	}, _ = /* @__PURE__ */ b(v, { children: [
 		a && /* @__PURE__ */ y(Q, {
 			name: a,
-			className: "pkt-icon--small"
+			className: `pkt-icon--small ${a === "check" ? "pkt-tabs__status-icon" : ""}`
 		}),
 		e,
 		s && /* @__PURE__ */ y(dl, {
@@ -17169,42 +17194,54 @@ var Kd = i(null), qd = () => {
 	let e = u(Kd);
 	if (!e) throw Error("TabItem must be used within a Tabs component");
 	return e;
-}, Jd = s(({ arrowNav: e = !0, disableArrowNav: n = !1, tabs: r, onTabSelected: i, children: a }, o) => {
-	let s = g([]), c = g({}), l = e && !n, u = a && t.count(a) > 0 ? t.count(a) : r?.length || 0;
+}, Jd = s(({ arrowNav: e = !0, disableArrowNav: n = !1, separatorIconName: r, separatorIconPath: i, tabs: a, onTabSelected: o, children: s }, c) => {
+	let l = g([]), u = g({}), f = e && !n, p = t.toArray(s), m = p.length > 0, h = m ? p.length : a?.length || 0, _ = !!(r || i);
 	d(() => {
-		s.current = s.current.slice(0, u), Object.keys(c.current).forEach((e) => {
+		l.current = l.current.slice(0, h), Object.keys(u.current).forEach((e) => {
 			let t = Number(e);
-			t >= u && delete c.current[t];
+			t >= h && delete u.current[t];
 		});
-	}, [u]);
-	let f = (e) => r ? !!r[e]?.disabled : !!c.current[e], p = (e) => {
-		if (f(e)) return;
-		let t = r?.[e];
-		t?.action && t.action(e), i && i(e);
-	}, m = (e, t) => {
+	}, [h]);
+	let v = (e) => a ? !!a[e]?.disabled : !!u.current[e], b = (e) => {
+		if (v(e)) return;
+		let t = a?.[e];
+		t?.action && t.action(e), o && o(e);
+	}, x = (e, t) => {
 		let n = e + t;
-		for (; n >= 0 && n < u;) {
-			if (!f(n)) return n;
+		for (; n >= 0 && n < h;) {
+			if (!v(n)) return n;
 			n += t;
 		}
 		return null;
-	}, h = (e, t) => {
-		if (l) {
+	}, S = (e, t) => {
+		if (f) {
 			if (t.key === "ArrowLeft") {
 				t.preventDefault();
-				let n = m(e, -1);
-				n !== null && s.current[n]?.focus();
+				let n = x(e, -1);
+				n !== null && l.current[n]?.focus();
 			}
 			if (t.key === "ArrowRight") {
 				t.preventDefault();
-				let n = m(e, 1);
-				n !== null && s.current[n]?.focus();
+				let n = x(e, 1);
+				n !== null && l.current[n]?.focus();
 			}
-			(t.key === "Enter" || t.key === " " || t.key === "Spacebar" || t.key === "ArrowDown") && (t.preventDefault(), f(e) || p(e));
+			(t.key === "Enter" || t.key === " " || t.key === "Spacebar" || t.key === "ArrowDown") && (t.preventDefault(), v(e) || b(e));
 		}
-	}, _ = (e, t, n = !1) => {
-		s.current[e] = t, c.current[e] = n;
-	}, v = r?.map((e, t) => /* @__PURE__ */ y(Gd, {
+	}, C = (e, t, n = !1) => {
+		l.current[e] = t, u.current[e] = n;
+	}, w = (e) => /* @__PURE__ */ y("span", {
+		className: "pkt-tabs__separator",
+		"aria-hidden": "true",
+		role: "presentation",
+		children: i ? /* @__PURE__ */ y("img", {
+			src: i,
+			alt: "",
+			"aria-hidden": "true"
+		}) : r ? /* @__PURE__ */ y(Q, {
+			name: r,
+			className: "pkt-tabs__separator-icon"
+		}) : null
+	}, e), T = (e) => !_ || e.length <= 1 ? e : e.flatMap((t, n) => n < e.length - 1 ? [t, w(`separator-${n}`)] : [t]), E = a?.map((e, t) => /* @__PURE__ */ y(Gd, {
 		active: e.disabled ? !1 : e.active,
 		disabled: e.disabled,
 		href: e.href,
@@ -17214,21 +17251,21 @@ var Kd = i(null), qd = () => {
 		tagSkin: e.tag?.skin,
 		index: t,
 		children: e.text
-	}, t));
+	}, t)), ee = ["pkt-tabs", _ && "pkt-tabs--with-separator"].filter(Boolean).join(" "), D = T(m ? p : E || []);
 	return /* @__PURE__ */ y(Kd.Provider, {
 		value: {
-			arrowNav: l,
-			registerTabRef: _,
-			handleKeyPress: h,
-			selectTab: p
+			arrowNav: f,
+			registerTabRef: C,
+			handleKeyPress: S,
+			selectTab: b
 		},
 		children: /* @__PURE__ */ y("div", {
-			className: "pkt-tabs",
-			ref: o,
+			className: ee,
+			ref: c,
 			children: /* @__PURE__ */ y("div", {
 				className: "pkt-tabs__list",
-				role: l ? "tablist" : "navigation",
-				children: a || v
+				role: f ? "tablist" : "navigation",
+				children: D
 			})
 		})
 	});