@oslokommune/punkt-elements 16.6.0 → 16.6.2

package/CHANGELOG.md

@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.6.2](https://github.com/oslokommune/punkt/compare/16.6.1...16.6.2) (2026-04-10)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [16.6.1](https://github.com/oslokommune/punkt/compare/16.6.0...16.6.1) (2026-04-07)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.6.0](https://github.com/oslokommune/punkt/compare/16.5.1...16.6.0) (2026-04-07)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -1111,7 +1111,7 @@ export declare class PktHeaderService extends PktElementWithSlot<IPktHeader> imp
     private renderSearch;
     private renderUserButton;
     private renderHeader;
-    render(): TemplateResult<1>;
+    render(): TemplateResult_2<1>;
 }
 
 export declare class PktHeaderUserMenu extends PktElement<IPktHeaderUserMenu> implements IPktHeaderUserMenu {

package/dist/pkt-header.cjs

@@ -123,7 +123,7 @@
       <span class="pkt-header-service__service-name" @click=${this.handleServiceClick}>
         <span class="pkt-header-service__service-link">${this.serviceName}</span>
       </span>
-    `:t.A}renderSlotContainer(){const e=p.e({"pkt-header-service__slot-container":!0,"is-open":this.openMenu==="slot"}),s=p.e({"pkt-header-service__slot-content":!0,"align-right":this.alignSlotRight});return t.b`
+    `:t.A}renderSlotContainer(){if(!this.hasSlotContent())return t.A;const e=p.e({"pkt-header-service__slot-container":!0,"is-open":this.openMenu==="slot"}),s=p.e({"pkt-header-service__slot-content":!0,"align-right":this.alignSlotRight});return t.b`
       <div
         class=${e}
         @focusout=${n=>this.handleFocusOut(n,"slot")}
@@ -150,7 +150,9 @@
           role=${this.isTablet?"menu":t.A}
           aria-label=${this.isTablet?"Meny":t.A}
           ${c.n(this.slotContentRef)}
-        >${v.slotContent(this)}</div>
+        >
+          ${v.slotContent(this)}
+        </div>
       </div>
     `}renderSearch(){if(!this.showSearch)return t.A;if(this.isTablet){const e=p.e({"pkt-header-service__search-container":!0,"is-open":this.openMenu==="search"}),s=p.e({"pkt-header-service__mobile-menu":!0,"is-open":this.openMenu==="search","align-right":this.alignSearchRight});return t.b`
         <div
@@ -218,7 +220,7 @@
           @click=${()=>this.handleMenuToggle("user")}
         >
           <span class="pkt-sr-only">Brukermeny: </span>
-          ${((s=this.representing)==null?void 0:s.name)||this.user.name}
+          <span>${((s=this.representing)==null?void 0:s.name)||this.user.name}</span>
         </pkt-button>
         ${this.openMenu==="user"&&this.user?t.b`
               <div class=${e}>
@@ -239,35 +241,34 @@
       <header class=${e} ${c.n(this.headerRef)}>
         <div class=${s}>${this.renderLogo()} ${this.renderServiceName()}</div>
 
-        <div class="pkt-header-service__content">
-          ${this.renderSlotContainer()} ${this.renderSearch()}
-          ${this.isTablet&&this.showLogoutInHeader?t.b`
-                <pkt-button
-                  skin="secondary"
-                  size=${this.isMobile?"small":"medium"}
-                  variant="icon-only"
-                  iconName="exit"
-                  @click=${this.handleLogout}
-                >
-                  Logg ut
-                </pkt-button>
-              `:t.A}
-        </div>
-
-        <div class="pkt-header-service__user">
-          ${this.renderUserButton()}
-          ${!this.isTablet&&this.showLogoutInHeader?t.b`
-                <pkt-button
-                  skin="tertiary"
-                  size="medium"
-                  variant="icon-right"
-                  iconName="exit"
-                  @click=${this.handleLogout}
-                >
-                  Logg ut
-                </pkt-button>
-              `:t.A}
-        </div>
+        ${this.hasSlotContent()||this.showSearch||this.showLogoutInHeader?t.b`<div class="pkt-header-service__content">
+              ${this.renderSlotContainer()} ${this.renderSearch()}
+              ${this.isTablet&&this.showLogoutInHeader?t.b`
+                    <pkt-button
+                      skin="secondary"
+                      size=${this.isMobile?"small":"medium"}
+                      variant="icon-only"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  `:t.A}
+            </div>`:t.A}
+        ${this.user||!this.isTablet&&this.showLogoutInHeader?t.b`<div class="pkt-header-service__user">
+              ${this.renderUserButton()}
+              ${!this.isTablet&&this.showLogoutInHeader?t.b`
+                    <pkt-button
+                      skin="tertiary"
+                      size="medium"
+                      variant="icon-right"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  `:t.A}
+            </div>`:t.A}
       </header>
     `}render(){const e=this.renderHeader();if(this.isFixed){const s=p.e({"pkt-header-service-spacer":!0,"pkt-header-service-spacer--compact":this.compact,"pkt-header-service-spacer--has-user":!!this.user,"pkt-header-service-spacer--mobile":this.isMobile});return t.b`
         <div class="pkt-header-service-wrapper">
@@ -298,6 +299,6 @@
         .userMenu=${this.effectiveUserMenu}
         .representing=${this.representing}
       >
-        <div class="pkt-contents">${v.slotContent(this)}</div>
+        ${this.hasSlotContent()?t.b`<div class="pkt-contents">${v.slotContent(this)}</div>`:t.A}
       </pkt-header-service>
     `}};a([t.n({type:String,attribute:"service-name"})],exports.PktHeader.prototype,"serviceName",2);a([t.n({type:String,attribute:"service-link"})],exports.PktHeader.prototype,"serviceLink",2);a([t.n({type:String,attribute:"logo-link"})],exports.PktHeader.prototype,"logoLink",2);a([t.n({type:String,attribute:"search-placeholder"})],exports.PktHeader.prototype,"searchPlaceholder",2);a([t.n({type:String,attribute:"search-value"})],exports.PktHeader.prototype,"searchValue",2);a([t.n({type:Number,attribute:"mobile-breakpoint"})],exports.PktHeader.prototype,"mobileBreakpoint",2);a([t.n({type:Number,attribute:"tablet-breakpoint"})],exports.PktHeader.prototype,"tabletBreakpoint",2);a([t.n({type:String,attribute:"opened-menu"})],exports.PktHeader.prototype,"openedMenu",2);a([t.n({type:String,attribute:"log-out-button-placement"})],exports.PktHeader.prototype,"logOutButtonPlacement",2);a([t.n({type:String})],exports.PktHeader.prototype,"position",2);a([t.n({type:String,attribute:"scroll-behavior"})],exports.PktHeader.prototype,"scrollBehavior",2);a([t.n({type:String,attribute:"slot-menu-variant"})],exports.PktHeader.prototype,"slotMenuVariant",2);a([t.n({type:String,attribute:"slot-menu-text"})],exports.PktHeader.prototype,"slotMenuText",2);a([t.n({type:Boolean,attribute:"hide-logo",converter:u.booleanishConverter})],exports.PktHeader.prototype,"hideLogo",2);a([t.n({type:Boolean,converter:u.booleanishConverter})],exports.PktHeader.prototype,"compact",2);a([t.n({type:Boolean,attribute:"show-search",converter:u.booleanishConverter})],exports.PktHeader.prototype,"showSearch",2);a([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeader.prototype,"canChangeRepresentation",2);a([t.n({type:Boolean,attribute:"has-log-out",converter:u.booleanishConverter})],exports.PktHeader.prototype,"hasLogOut",2);a([t.n({type:Object})],exports.PktHeader.prototype,"user",2);a([t.n({type:Array,attribute:"user-menu"})],exports.PktHeader.prototype,"userMenu",2);a([t.n({type:Object})],exports.PktHeader.prototype,"representing",2);a([t.n({type:Array,attribute:"user-menu-footer"})],exports.PktHeader.prototype,"userMenuFooter",2);a([t.n({type:Array,attribute:"user-options"})],exports.PktHeader.prototype,"userOptions",2);exports.PktHeader=a([t.t("pkt-header")],exports.PktHeader);exports.formatLastLoggedIn=g;

package/dist/pkt-header.js

@@ -1,5 +1,5 @@
 import { P as M, s as S } from "./element-with-slot-1djk8KXi.js";
-import { P as C, A as u, b as n, n as s, t as _ } from "./element-CV9utnHJ.js";
+import { P as C, A as l, b as n, n as s, t as _ } from "./element-CV9utnHJ.js";
 import { o as $ } from "./if-defined-rXcLNTzN.js";
 import { b as d } from "./booleanish-C9R0tdXH.js";
 import { r as k } from "./state-l4hGZdFJ.js";
@@ -21,10 +21,10 @@ const L = (e) => typeof e.target == "string" ? { title: e.title, iconName: e.ico
       minute: "2-digit"
     });
 };
-var R = Object.defineProperty, B = Object.getOwnPropertyDescriptor, b = (e, t, i, c) => {
-  for (var a = c > 1 ? void 0 : c ? B(t, i) : t, p = e.length - 1, m; p >= 0; p--)
-    (m = e[p]) && (a = (c ? m(t, i, a) : m(a)) || a);
-  return c && a && R(t, i, a), a;
+var R = Object.defineProperty, B = Object.getOwnPropertyDescriptor, b = (e, t, i, u) => {
+  for (var a = u > 1 ? void 0 : u ? B(t, i) : t, p = e.length - 1, m; p >= 0; p--)
+    (m = e[p]) && (a = (u ? m(t, i, a) : m(a)) || a);
+  return u && a && R(t, i, a), a;
 };
 let v = class extends C {
   constructor() {
@@ -50,7 +50,7 @@ let v = class extends C {
     "onClick" in e && typeof e.onClick == "function" && e.onClick();
   }
   renderLinkOrButton(e, t) {
-    const i = "href" in e, c = g({
+    const i = "href" in e, u = g({
       "pkt-user-menu__link": !0,
       "pkt-link-button": !i,
       "pkt-link": !i,
@@ -59,7 +59,7 @@ let v = class extends C {
     });
     return i ? n`
         <pkt-link
-          icon-name=${e.iconName || u}
+          icon-name=${e.iconName || l}
           href=${e.href}
           aria-hidden="true"
           class="pkt-user-menu__link ${t || ""}"
@@ -67,12 +67,12 @@ let v = class extends C {
           ${e.title}
         </pkt-link>
       ` : n`
-      <button class=${c} type="button" @click=${() => this.handleMenuItemClick(e)}>
+      <button class=${u} type="button" @click=${() => this.handleMenuItemClick(e)}>
         ${e.iconName ? n`<pkt-icon
               name=${e.iconName}
               class="pkt-link__icon"
               aria-hidden="true"
-            ></pkt-icon>` : u}
+            ></pkt-icon>` : l}
         ${e.title}
       </button>
     `;
@@ -103,14 +103,14 @@ let v = class extends C {
                         <div class="pkt-user-menu__last-logged-in">
                           Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
                         </div>
-                      ` : u}
+                      ` : l}
                 </li>
-              ` : u}
+              ` : l}
 
           <!-- User menu items -->
           ${e && e.length > 0 ? n`
                 <li class="pkt-user-menu__item">${this.renderLinkSection(e)}</li>
-              ` : u}
+              ` : l}
 
           <!-- Representing section -->
           ${this.representing ? n`
@@ -119,7 +119,7 @@ let v = class extends C {
                   <div class="pkt-user-menu__name" translate="no">${this.representing.name}</div>
                   ${this.representing.orgNumber ? n`<div class="pkt-user-menu__org-number">
                         Org.nr. ${this.representing.orgNumber}
-                      </div>` : u}
+                      </div>` : l}
                   ${this.canChangeRepresentation ? n`
                         <ul class="pkt-user-menu__sublist mt-size-16">
                           <li class="pkt-user-menu__subitem">
@@ -130,9 +130,9 @@ let v = class extends C {
     })}
                           </li>
                         </ul>
-                      ` : u}
+                      ` : l}
                 </li>
-              ` : u}
+              ` : l}
 
           <!-- Change representation without representing object -->
           ${!this.representing && this.canChangeRepresentation ? n`
@@ -147,7 +147,7 @@ let v = class extends C {
                     </li>
                   </ul>
                 </li>
-              ` : u}
+              ` : l}
 
           <!-- Logout -->
           ${this.logoutOnClick ? n`
@@ -158,7 +158,7 @@ let v = class extends C {
       onClick: () => this.handleLogout()
     })}
                 </li>
-              ` : u}
+              ` : l}
         </ul>
       </nav>
     `;
@@ -189,10 +189,10 @@ b([
 v = b([
   _("pkt-header-user-menu")
 ], v);
-var E = Object.defineProperty, P = Object.getOwnPropertyDescriptor, r = (e, t, i, c) => {
-  for (var a = c > 1 ? void 0 : c ? P(t, i) : t, p = e.length - 1, m; p >= 0; p--)
-    (m = e[p]) && (a = (c ? m(t, i, a) : m(a)) || a);
-  return c && a && E(t, i, a), a;
+var E = Object.defineProperty, P = Object.getOwnPropertyDescriptor, r = (e, t, i, u) => {
+  for (var a = u > 1 ? void 0 : u ? P(t, i) : t, p = e.length - 1, m; p >= 0; p--)
+    (m = e[p]) && (a = (u ? m(t, i, a) : m(a)) || a);
+  return u && a && E(t, i, a), a;
 };
 const x = "https://punkt-cdn.oslo.kommune.no/latest/logos/";
 let o = class extends M {
@@ -206,21 +206,21 @@ let o = class extends M {
       this.user && this.openMenu === "user" && !t.closest(".pkt-header-service__user-container") && (this.openMenu = "none"), this.openMenu === "slot" && !t.closest(".pkt-header-service__slot-container") && (this.openMenu = "none"), this.openMenu === "search" && !t.closest(".pkt-header-service__search-container") && !t.closest(".pkt-header-service__search-input") && (this.openMenu = "none");
     }, this.handleFocusOut = (e, t) => {
       const i = e.relatedTarget;
-      let c;
+      let u;
       switch (t) {
         case "user":
-          c = this.userContainerRef;
+          u = this.userContainerRef;
           break;
         case "slot":
-          c = this.slotContainerRef;
+          u = this.slotContainerRef;
           break;
         case "search":
-          c = this.searchContainerRef;
+          u = this.searchContainerRef;
           break;
         default:
           return;
       }
-      const a = c.value;
+      const a = u.value;
       a && (!i || !a.contains(i)) && (this.openMenu = "none");
     }, this.handleEscapeKey = (e) => {
       e.key === "Escape" && this.openMenu !== "none" && (e.preventDefault(), this.shouldRestoreFocus = !0, this.openMenu = "none");
@@ -280,7 +280,7 @@ let o = class extends M {
   checkDropdownAlignment(e) {
     const t = e === "slot" ? this.slotContainerRef : this.searchContainerRef, i = e === "slot" ? this.slotContentRef : this.searchMenuRef;
     if (!t.value || !i.value || !this.isTablet || this.isMobile) return;
-    const c = t.value.getBoundingClientRect(), a = i.value.offsetWidth, p = c.left + a > window.innerWidth;
+    const u = t.value.getBoundingClientRect(), a = i.value.offsetWidth, p = u.left + a > window.innerWidth;
     e === "slot" ? this.alignSlotRight = p : this.alignSearchRight = p;
   }
   handleMenuToggle(e) {
@@ -354,7 +354,7 @@ let o = class extends M {
     return this.hasLogOut && (this.logOutButtonPlacement === "userMenu" || this.logOutButtonPlacement === "both");
   }
   renderLogo() {
-    if (this.hideLogo) return u;
+    if (this.hideLogo) return l;
     const e = n`
       <pkt-icon name="oslologo" aria-hidden="true" path=${x}></pkt-icon>
     `;
@@ -402,9 +402,10 @@ let o = class extends M {
       <span class="pkt-header-service__service-name" @click=${this.handleServiceClick}>
         <span class="pkt-header-service__service-link">${this.serviceName}</span>
       </span>
-    ` : u;
+    ` : l;
   }
   renderSlotContainer() {
+    if (!this.hasSlotContent()) return l;
     const e = g({
       "pkt-header-service__slot-container": !0,
       "is-open": this.openMenu === "slot"
@@ -432,19 +433,21 @@ let o = class extends M {
               >
                 ${this.slotMenuText}
               </pkt-button>
-            ` : u}
+            ` : l}
         <div
           class=${t}
           id="mobile-slot-menu"
-          role=${this.isTablet ? "menu" : u}
-          aria-label=${this.isTablet ? "Meny" : u}
+          role=${this.isTablet ? "menu" : l}
+          aria-label=${this.isTablet ? "Meny" : l}
           ${y(this.slotContentRef)}
-        >${S(this)}</div>
+        >
+          ${S(this)}
+        </div>
       </div>
     `;
   }
   renderSearch() {
-    if (!this.showSearch) return u;
+    if (!this.showSearch) return l;
     if (this.isTablet) {
       const e = g({
         "pkt-header-service__search-container": !0,
@@ -490,7 +493,7 @@ let o = class extends M {
         i.key === "Enter" && this.handleSearch(i.target.value);
       }}
                   ></pkt-textinput>
-                ` : u}
+                ` : l}
           </div>
         </div>
       `;
@@ -511,7 +514,7 @@ let o = class extends M {
   }
   renderUserButton() {
     var t;
-    if (!this.user) return u;
+    if (!this.user) return l;
     const e = g({
       "pkt-header-service__user-menu": this.isMobile === !1,
       "pkt-header-service__mobile-menu": this.isMobile === !0,
@@ -537,13 +540,13 @@ let o = class extends M {
           @click=${() => this.handleMenuToggle("user")}
         >
           <span class="pkt-sr-only">Brukermeny: </span>
-          ${((t = this.representing) == null ? void 0 : t.name) || this.user.name}
+          <span>${((t = this.representing) == null ? void 0 : t.name) || this.user.name}</span>
         </pkt-button>
         ${this.openMenu === "user" && this.user ? n`
               <div class=${e}>
                 <pkt-header-user-menu
                   .user=${this.user}
-                  formatted-last-logged-in=${this.formattedLastLoggedIn || u}
+                  formatted-last-logged-in=${this.formattedLastLoggedIn || l}
                   .representing=${this.representing}
                   .userMenu=${this.userMenu}
                   ?can-change-representation=${this.canChangeRepresentation}
@@ -554,7 +557,7 @@ let o = class extends M {
                   @log-out=${this.handleLogout}
                 ></pkt-header-user-menu>
               </div>
-            ` : u}
+            ` : l}
       </div>
     `;
   }
@@ -575,35 +578,34 @@ let o = class extends M {
       <header class=${e} ${y(this.headerRef)}>
         <div class=${t}>${this.renderLogo()} ${this.renderServiceName()}</div>
 
-        <div class="pkt-header-service__content">
-          ${this.renderSlotContainer()} ${this.renderSearch()}
-          ${this.isTablet && this.showLogoutInHeader ? n`
-                <pkt-button
-                  skin="secondary"
-                  size=${this.isMobile ? "small" : "medium"}
-                  variant="icon-only"
-                  iconName="exit"
-                  @click=${this.handleLogout}
-                >
-                  Logg ut
-                </pkt-button>
-              ` : u}
-        </div>
-
-        <div class="pkt-header-service__user">
-          ${this.renderUserButton()}
-          ${!this.isTablet && this.showLogoutInHeader ? n`
-                <pkt-button
-                  skin="tertiary"
-                  size="medium"
-                  variant="icon-right"
-                  iconName="exit"
-                  @click=${this.handleLogout}
-                >
-                  Logg ut
-                </pkt-button>
-              ` : u}
-        </div>
+        ${this.hasSlotContent() || this.showSearch || this.showLogoutInHeader ? n`<div class="pkt-header-service__content">
+              ${this.renderSlotContainer()} ${this.renderSearch()}
+              ${this.isTablet && this.showLogoutInHeader ? n`
+                    <pkt-button
+                      skin="secondary"
+                      size=${this.isMobile ? "small" : "medium"}
+                      variant="icon-only"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  ` : l}
+            </div>` : l}
+        ${this.user || !this.isTablet && this.showLogoutInHeader ? n`<div class="pkt-header-service__user">
+              ${this.renderUserButton()}
+              ${!this.isTablet && this.showLogoutInHeader ? n`
+                    <pkt-button
+                      skin="tertiary"
+                      size="medium"
+                      variant="icon-right"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  ` : l}
+            </div>` : l}
       </header>
     `;
   }
@@ -717,12 +719,12 @@ r([
 o = r([
   _("pkt-header-service")
 ], o);
-var N = Object.defineProperty, T = Object.getOwnPropertyDescriptor, h = (e, t, i, c) => {
-  for (var a = c > 1 ? void 0 : c ? T(t, i) : t, p = e.length - 1, m; p >= 0; p--)
-    (m = e[p]) && (a = (c ? m(t, i, a) : m(a)) || a);
-  return c && a && N(t, i, a), a;
+var N = Object.defineProperty, T = Object.getOwnPropertyDescriptor, c = (e, t, i, u) => {
+  for (var a = u > 1 ? void 0 : u ? T(t, i) : t, p = e.length - 1, m; p >= 0; p--)
+    (m = e[p]) && (a = (u ? m(t, i, a) : m(a)) || a);
+  return u && a && N(t, i, a), a;
 };
-let l = class extends M {
+let h = class extends M {
   constructor() {
     super(...arguments), 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;
   }
@@ -764,89 +766,89 @@ let l = class extends M {
         .userMenu=${this.effectiveUserMenu}
         .representing=${this.representing}
       >
-        <div class="pkt-contents">${S(this)}</div>
+        ${this.hasSlotContent() ? n`<div class="pkt-contents">${S(this)}</div>` : l}
       </pkt-header-service>
     `;
   }
 };
-h([
+c([
   s({ type: String, attribute: "service-name" })
-], l.prototype, "serviceName", 2);
-h([
+], h.prototype, "serviceName", 2);
+c([
   s({ type: String, attribute: "service-link" })
-], l.prototype, "serviceLink", 2);
-h([
+], h.prototype, "serviceLink", 2);
+c([
   s({ type: String, attribute: "logo-link" })
-], l.prototype, "logoLink", 2);
-h([
+], h.prototype, "logoLink", 2);
+c([
   s({ type: String, attribute: "search-placeholder" })
-], l.prototype, "searchPlaceholder", 2);
-h([
+], h.prototype, "searchPlaceholder", 2);
+c([
   s({ type: String, attribute: "search-value" })
-], l.prototype, "searchValue", 2);
-h([
+], h.prototype, "searchValue", 2);
+c([
   s({ type: Number, attribute: "mobile-breakpoint" })
-], l.prototype, "mobileBreakpoint", 2);
-h([
+], h.prototype, "mobileBreakpoint", 2);
+c([
   s({ type: Number, attribute: "tablet-breakpoint" })
-], l.prototype, "tabletBreakpoint", 2);
-h([
+], h.prototype, "tabletBreakpoint", 2);
+c([
   s({ type: String, attribute: "opened-menu" })
-], l.prototype, "openedMenu", 2);
-h([
+], h.prototype, "openedMenu", 2);
+c([
   s({ type: String, attribute: "log-out-button-placement" })
-], l.prototype, "logOutButtonPlacement", 2);
-h([
+], h.prototype, "logOutButtonPlacement", 2);
+c([
   s({ type: String })
-], l.prototype, "position", 2);
-h([
+], h.prototype, "position", 2);
+c([
   s({ type: String, attribute: "scroll-behavior" })
-], l.prototype, "scrollBehavior", 2);
-h([
+], h.prototype, "scrollBehavior", 2);
+c([
   s({ type: String, attribute: "slot-menu-variant" })
-], l.prototype, "slotMenuVariant", 2);
-h([
+], h.prototype, "slotMenuVariant", 2);
+c([
   s({ type: String, attribute: "slot-menu-text" })
-], l.prototype, "slotMenuText", 2);
-h([
+], h.prototype, "slotMenuText", 2);
+c([
   s({ type: Boolean, attribute: "hide-logo", converter: d })
-], l.prototype, "hideLogo", 2);
-h([
+], h.prototype, "hideLogo", 2);
+c([
   s({ type: Boolean, converter: d })
-], l.prototype, "compact", 2);
-h([
+], h.prototype, "compact", 2);
+c([
   s({ type: Boolean, attribute: "show-search", converter: d })
-], l.prototype, "showSearch", 2);
-h([
+], h.prototype, "showSearch", 2);
+c([
   s({
     type: Boolean,
     attribute: "can-change-representation",
     converter: d
   })
-], l.prototype, "canChangeRepresentation", 2);
-h([
+], h.prototype, "canChangeRepresentation", 2);
+c([
   s({ type: Boolean, attribute: "has-log-out", converter: d })
-], l.prototype, "hasLogOut", 2);
-h([
+], h.prototype, "hasLogOut", 2);
+c([
   s({ type: Object })
-], l.prototype, "user", 2);
-h([
+], h.prototype, "user", 2);
+c([
   s({ type: Array, attribute: "user-menu" })
-], l.prototype, "userMenu", 2);
-h([
+], h.prototype, "userMenu", 2);
+c([
   s({ type: Object })
-], l.prototype, "representing", 2);
-h([
+], h.prototype, "representing", 2);
+c([
   s({ type: Array, attribute: "user-menu-footer" })
-], l.prototype, "userMenuFooter", 2);
-h([
+], h.prototype, "userMenuFooter", 2);
+c([
   s({ type: Array, attribute: "user-options" })
-], l.prototype, "userOptions", 2);
-l = h([
+], h.prototype, "userOptions", 2);
+h = c([
   _("pkt-header")
-], l);
+], h);
 export {
-  l as PktHeader,
+  h as PktHeader,
   o as PktHeaderService,
   v as PktHeaderUserMenu,
   O as formatLastLoggedIn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.6.0",
+  "version": "16.6.2",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -79,5 +79,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "a5df0ac2434d55a4c73421d970a55cc9329fec0e"
+  "gitHead": "420cd507db8426491e86687bf18f3483202f5c25"
 }

package/src/components/header/header-service.ts

@@ -1,5 +1,5 @@
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
-import { html, nothing, PropertyValues } from 'lit'
+import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
@@ -490,7 +490,8 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
     `
   }
 
-  private renderSlotContainer() {
+  private renderSlotContainer(): TemplateResult | typeof nothing {
+    if (!this.hasSlotContent()) return nothing
     const slotContainerClasses = classMap({
       'pkt-header-service__slot-container': true,
       'is-open': this.openMenu === 'slot',
@@ -530,7 +531,9 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
           role=${this.isTablet ? 'menu' : nothing}
           aria-label=${this.isTablet ? 'Meny' : nothing}
           ${ref(this.slotContentRef)}
-        >${slotContent(this)}</div>
+        >
+          ${slotContent(this)}
+        </div>
       </div>
     `
   }
@@ -640,7 +643,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
           @click=${() => this.handleMenuToggle('user')}
         >
           <span class="pkt-sr-only">Brukermeny: </span>
-          ${this.representing?.name || this.user.name}
+          <span>${this.representing?.name || this.user.name}</span>
         </pkt-button>
         ${this.openMenu === 'user' && this.user
           ? html`
@@ -685,39 +688,42 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
       <header class=${headerClasses} ${ref(this.headerRef)}>
         <div class=${logoAreaClasses}>${this.renderLogo()} ${this.renderServiceName()}</div>
 
-        <div class="pkt-header-service__content">
-          ${this.renderSlotContainer()} ${this.renderSearch()}
-          ${this.isTablet && this.showLogoutInHeader
-            ? html`
-                <pkt-button
-                  skin="secondary"
-                  size=${this.isMobile ? 'small' : 'medium'}
-                  variant="icon-only"
-                  iconName="exit"
-                  @click=${this.handleLogout}
-                >
-                  Logg ut
-                </pkt-button>
-              `
-            : nothing}
-        </div>
-
-        <div class="pkt-header-service__user">
-          ${this.renderUserButton()}
-          ${!this.isTablet && this.showLogoutInHeader
-            ? html`
-                <pkt-button
-                  skin="tertiary"
-                  size="medium"
-                  variant="icon-right"
-                  iconName="exit"
-                  @click=${this.handleLogout}
-                >
-                  Logg ut
-                </pkt-button>
-              `
-            : nothing}
-        </div>
+        ${this.hasSlotContent() || this.showSearch || this.showLogoutInHeader
+          ? html`<div class="pkt-header-service__content">
+              ${this.renderSlotContainer()} ${this.renderSearch()}
+              ${this.isTablet && this.showLogoutInHeader
+                ? html`
+                    <pkt-button
+                      skin="secondary"
+                      size=${this.isMobile ? 'small' : 'medium'}
+                      variant="icon-only"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  `
+                : nothing}
+            </div>`
+          : nothing}
+        ${this.user || (!this.isTablet && this.showLogoutInHeader)
+          ? html`<div class="pkt-header-service__user">
+              ${this.renderUserButton()}
+              ${!this.isTablet && this.showLogoutInHeader
+                ? html`
+                    <pkt-button
+                      skin="tertiary"
+                      size="medium"
+                      variant="icon-right"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  `
+                : nothing}
+            </div>`
+          : nothing}
       </header>
     `
   }

package/src/components/header/header.ts

@@ -1,6 +1,6 @@
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
-import { html, PropertyValues } from 'lit'
+import { html, nothing, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import {
@@ -127,7 +127,9 @@ export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHea
         .userMenu=${this.effectiveUserMenu}
         .representing=${this.representing}
       >
-        <div class="pkt-contents">${slotContent(this)}</div>
+        ${this.hasSlotContent()
+          ? html`<div class="pkt-contents">${slotContent(this)}</div>`
+          : nothing}
       </pkt-header-service>
     `
   }