@oslokommune/punkt-elements 14.2.0 → 14.3.0

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [14.3.0](https://github.com/oslokommune/punkt/compare/14.2.0...14.3.0) (2026-02-04)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [14.2.0](https://github.com/oslokommune/punkt/compare/14.1.1...14.2.0) (2026-02-04)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -15,12 +15,17 @@ import { TAriaLive } from '../../../../../shared-types';
 import { TCardSkin } from '../../../../../shared-types';
 import { TemplateResult } from 'lit-html';
 import { TemplateResult as TemplateResult_2 } from 'lit';
+import { THeaderMenu } from '../../../../../shared-types';
+import { THeaderPosition } from '../../../../../shared-types';
+import { THeaderScrollBehavior } from '../../../../../shared-types';
 import { THeadingLevel } from '../../../../../shared-types';
 import { THeadingSize } from '../../../../../shared-types';
 import { THeadingWeight } from '../../../../../shared-types';
 import { THTMLButtonType } from '../../../../../shared-types';
 import { TLayout } from '../../../../../shared-types';
 import { TMessageboxSkin } from '../../../../../shared-types';
+import { TLogOutButtonPlacement as TPktHeaderLogOutButtonPlacement } from '../../../../../shared-types';
+import { TSlotMenuVariant } from '../../../../../shared-types';
 import { User } from '../../../../../shared-types';
 import { UserMenuItem } from '../../../../../shared-types';
 
@@ -251,7 +256,11 @@ export declare interface IPktHeader {
     /** Custom breakpoint for tablet responsive behavior in pixels. Default: 1280 */
     tabletBreakpoint?: number;
     /** Which menu is initially open */
-    openedMenu?: TPktHeaderMenu;
+    openedMenu?: THeaderMenu;
+    /** Variant for the slot menu button. Default: 'icon-only' */
+    slotMenuVariant?: TSlotMenuVariant;
+    /** Text for the slot menu button. Default: 'Meny' */
+    slotMenuText?: string;
 }
 
 export declare type IPktHeaderRepresenting = Representing;
@@ -976,10 +985,12 @@ export declare class PktHeader extends PktElement<IPktHeader> implements IPktHea
     searchValue: string;
     mobileBreakpoint: number;
     tabletBreakpoint: number;
-    openedMenu: TPktHeaderMenu;
+    openedMenu: THeaderMenu;
     logOutButtonPlacement: TPktHeaderLogOutButtonPlacement;
     position: THeaderPosition;
     scrollBehavior: THeaderScrollBehavior;
+    slotMenuVariant: TSlotMenuVariant;
+    slotMenuText: string;
     hideLogo: Booleanish;
     compact: Booleanish;
     showSearch: Booleanish;
@@ -1008,10 +1019,12 @@ export declare class PktHeaderService extends PktElement<IPktHeader> implements
     searchValue: string;
     mobileBreakpoint: number;
     tabletBreakpoint: number;
-    openedMenu: TPktHeaderMenu;
+    openedMenu: THeaderMenu;
     logOutButtonPlacement: TPktHeaderLogOutButtonPlacement;
     position: THeaderPosition;
     scrollBehavior: THeaderScrollBehavior;
+    slotMenuVariant: TSlotMenuVariant;
+    slotMenuText: string;
     hideLogo: Booleanish;
     compact: Booleanish;
     showSearch: Booleanish;
@@ -1622,15 +1635,11 @@ declare type TCounterPosition = 'top' | 'bottom';
 
 declare type TDay = `${number}${number}`;
 
-/**
- * Position options for header
- */
-declare type THeaderPosition = 'fixed' | 'relative';
+export { THeaderMenu }
 
-/**
- * Scroll behavior options for header
- */
-declare type THeaderScrollBehavior = 'hide' | 'none';
+export { THeaderPosition }
+
+export { THeaderScrollBehavior }
 
 declare type TISODate = `${TYear}-${TMonth}-${TDay}`;
 
@@ -1656,15 +1665,7 @@ export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right
 
 export declare type TPktComboboxTagPlacement = 'inside' | 'outside';
 
-/**
- * Type for logout button placement
- */
-export declare type TPktHeaderLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none';
-
-/**
- * Type for which menu is currently open
- */
-export declare type TPktHeaderMenu = 'none' | 'slot' | 'search' | 'user';
+export { TPktHeaderLogOutButtonPlacement }
 
 export declare type TPktHeadingLevel = THeadingLevel;
 
@@ -1694,6 +1695,8 @@ export declare type TSelectOption = {
     hidden?: boolean;
 };
 
+export { TSlotMenuVariant }
+
 export declare type TTabItemSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';
 
 export declare type TTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | 'red' | 'yellow' | 'beige' | 'gray' | 'grey';

package/dist/pkt-header.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./element-CJ_QKaki.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),v=require("./if-defined-Bc9-_I01.cjs"),h=require("./ref-BFa5Utho.cjs"),u=require("./booleanish-BKVonob4.cjs"),d=require("./state-DSjcvzDN.cjs"),p=require("./class-map-C_erArZz.cjs");require("./button-DaM4jvhJ.cjs");require("./icon-MRx-m0Or.cjs");require("./link-Dw39h-YN.cjs");require("./textinput-IN3b0nSH.cjs");const m=o=>typeof o.target=="string"?{title:o.title,iconName:o.iconName,href:o.target}:{title:o.title,iconName:o.iconName,onClick:o.target},f=o=>m(o),b=o=>{if(!o)return;const e=typeof o=="string"?new Date(o):o;if(!isNaN(e.getTime()))return e.toLocaleDateString("nb-NO",{day:"numeric",month:"long",year:"numeric",hour:"2-digit",minute:"2-digit"})};var y=Object.defineProperty,S=Object.getOwnPropertyDescriptor,k=(o,e,s,n)=>{for(var r=n>1?void 0:n?S(e,s):e,l=o.length-1,c;l>=0;l--)(c=o[l])&&(r=(n?c(e,s,r):c(r))||r);return n&&r&&y(e,s,r),r};exports.PktHeaderUserMenu=class extends t.PktElement{constructor(){super(...arguments),this.canChangeRepresentation=!1,this.logoutOnClick=!1}handleChangeRepresentation(){this.dispatchEvent(new CustomEvent("change-representation",{bubbles:!0,composed:!0}))}handleLogout(){this.dispatchEvent(new CustomEvent("log-out",{bubbles:!0,composed:!0}))}handleMenuItemClick(e){"onClick"in e&&typeof e.onClick=="function"&&e.onClick()}renderLinkOrButton(e,s){const n="href"in e,r=p.e({"pkt-user-menu__link":!0,"pkt-link-button":!n,"pkt-link":!n,"pkt-link--icon-left":!n,[s||""]:!!s});return n?t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./element-CJ_QKaki.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),v=require("./if-defined-Bc9-_I01.cjs"),h=require("./ref-BFa5Utho.cjs"),u=require("./booleanish-BKVonob4.cjs"),d=require("./state-DSjcvzDN.cjs"),p=require("./class-map-C_erArZz.cjs");require("./button-DaM4jvhJ.cjs");require("./icon-MRx-m0Or.cjs");require("./link-Dw39h-YN.cjs");require("./textinput-IN3b0nSH.cjs");const b=o=>typeof o.target=="string"?{title:o.title,iconName:o.iconName,href:o.target}:{title:o.title,iconName:o.iconName,onClick:o.target},f=o=>b(o),m=o=>{if(!o)return;const e=typeof o=="string"?new Date(o):o;if(!isNaN(e.getTime()))return e.toLocaleDateString("nb-NO",{day:"numeric",month:"long",year:"numeric",hour:"2-digit",minute:"2-digit"})};var y=Object.defineProperty,S=Object.getOwnPropertyDescriptor,k=(o,e,s,n)=>{for(var r=n>1?void 0:n?S(e,s):e,l=o.length-1,c;l>=0;l--)(c=o[l])&&(r=(n?c(e,s,r):c(r))||r);return n&&r&&y(e,s,r),r};exports.PktHeaderUserMenu=class extends t.PktElement{constructor(){super(...arguments),this.canChangeRepresentation=!1,this.logoutOnClick=!1}handleChangeRepresentation(){this.dispatchEvent(new CustomEvent("change-representation",{bubbles:!0,composed:!0}))}handleLogout(){this.dispatchEvent(new CustomEvent("log-out",{bubbles:!0,composed:!0}))}handleMenuItemClick(e){"onClick"in e&&typeof e.onClick=="function"&&e.onClick()}renderLinkOrButton(e,s){const n="href"in e,r=p.e({"pkt-user-menu__link":!0,"pkt-link-button":!n,"pkt-link":!n,"pkt-link--icon-left":!n,[s||""]:!!s});return n?t.x`
         <pkt-link
           icon-name=${e.iconName||t.E}
           href=${e.href}
@@ -80,8 +80,8 @@
               `:t.E}
         </ul>
       </nav>
-    `}};k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"user",2);k([t.n({type:String,attribute:"formatted-last-logged-in"})],exports.PktHeaderUserMenu.prototype,"formattedLastLoggedIn",2);k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"representing",2);k([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderUserMenu.prototype,"userMenu",2);k([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeaderUserMenu.prototype,"canChangeRepresentation",2);k([t.n({type:Boolean,attribute:"logout-on-click",converter:u.booleanishConverter})],exports.PktHeaderUserMenu.prototype,"logoutOnClick",2);exports.PktHeaderUserMenu=k([t.t("pkt-header-user-menu")],exports.PktHeaderUserMenu);var $=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(o,e,s,n)=>{for(var r=n>1?void 0:n?_(e,s):e,l=o.length-1,c;l>=0;l--)(c=o[l])&&(r=(n?c(e,s,r):c(r))||r);return n&&r&&$(e,s,r),r};const M="https://punkt-cdn.oslo.kommune.no/latest/logos/";exports.PktHeaderService=class extends t.PktElement{constructor(){super(),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.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.hasSlotContent=!1,this.alignSlotRight=!1,this.alignSearchRight=!1,this.defaultSlot=h.e(),this.headerRef=h.e(),this.userContainerRef=h.e(),this.slotContainerRef=h.e(),this.searchContainerRef=h.e(),this.slotContentRef=h.e(),this.searchMenuRef=h.e(),this.lastScrollPosition=0,this.savedScrollY=0,this.lastFocusedElement=null,this.shouldRestoreFocus=!1,this.handleScroll=()=>{if(!this.shouldHideOnScroll)return;const e=window.pageYOffset||document.documentElement.scrollTop;e<0||Math.abs(e-this.lastScrollPosition)<60||(this.isHidden=e>this.lastScrollPosition,this.lastScrollPosition=e)},this.handleClickOutside=e=>{const s=e.target;this.user&&this.openMenu==="user"&&!s.closest(".pkt-header-service__user-container")&&(this.openMenu="none"),this.openMenu==="slot"&&!s.closest(".pkt-header-service__slot-container")&&(this.openMenu="none"),this.openMenu==="search"&&!s.closest(".pkt-header-service__search-container")&&!s.closest(".pkt-header-service__search-input")&&(this.openMenu="none")},this.handleFocusOut=(e,s)=>{const n=e.relatedTarget;let r;switch(s){case"user":r=this.userContainerRef;break;case"slot":r=this.slotContainerRef;break;case"search":r=this.searchContainerRef;break;default:return}const l=r.value;l&&(!n||!l.contains(n))&&(this.openMenu="none")},this.handleEscapeKey=e=>{e.key==="Escape"&&this.openMenu!=="none"&&(e.preventDefault(),this.shouldRestoreFocus=!0,this.openMenu="none")},this.slotController=new g.PktSlotController(this,this.defaultSlot)}updateSlots(e){this.hasSlotContent=e.has(null)||e.has(void 0)}connectedCallback(){super.connectedCallback(),this.setupScrollListener()}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.resizeObserver)==null||e.disconnect(),window.removeEventListener("scroll",this.handleScroll),this.unlockScroll()}firstUpdated(){this.setupResizeObserver()}updated(e){if(super.updated(e),e.has("openedMenu")&&this.openedMenu!==this.openMenu&&(this.openMenu=this.openedMenu),(e.has("mobileBreakpoint")||e.has("tabletBreakpoint"))&&(this.updateIsMobile(),this.updateIsTablet()),e.has("openMenu")){const s=e.get("openMenu");this.openMenu!=="none"&&(s==="none"||s===void 0)?(document.addEventListener("mousedown",this.handleClickOutside),document.addEventListener("keydown",this.handleEscapeKey),(this.openMenu==="slot"||this.openMenu==="search")&&requestAnimationFrame(()=>{this.checkDropdownAlignment(this.openMenu)})):this.openMenu==="none"&&s!=="none"&&(document.removeEventListener("mousedown",this.handleClickOutside),document.removeEventListener("keydown",this.handleEscapeKey),this.restoreFocus())}(e.has("openMenu")||e.has("isMobile"))&&this.updateScrollLock()}setupResizeObserver(){const e=this.headerRef.value;e&&(this.componentWidth=e.offsetWidth,this.updateIsMobile(),this.updateIsTablet(),this.resizeObserver=new ResizeObserver(s=>{for(const n of s)n.borderBoxSize&&n.borderBoxSize.length>0?this.componentWidth=n.borderBoxSize[0].inlineSize:this.componentWidth=n.contentRect.width,this.updateIsMobile(),this.updateIsTablet()}),this.resizeObserver.observe(e))}updateIsMobile(){this.isMobile=this.componentWidth<this.mobileBreakpoint}updateIsTablet(){this.isTablet=this.componentWidth<this.tabletBreakpoint}updateScrollLock(){this.position==="fixed"&&this.isMobile&&this.openMenu!=="none"?this.lockScroll():this.unlockScroll()}lockScroll(){const e=document.body,s=document.documentElement;this.savedScrollY=window.scrollY||window.pageYOffset;const n=window.innerWidth-s.clientWidth;n>0&&(e.style.paddingRight=`${n}px`),e.style.position="fixed",e.style.top=`-${this.savedScrollY}px`,e.style.left="0",e.style.right="0",e.style.width="100%",e.style.overflow="hidden",s.classList.add("is-scroll-locked")}unlockScroll(){const e=document.body,s=document.documentElement;s.classList.contains("is-scroll-locked")&&(e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("right"),e.style.removeProperty("width"),e.style.removeProperty("overflow"),e.style.removeProperty("padding-right"),s.classList.remove("is-scroll-locked"),window.scrollTo({top:this.savedScrollY}))}setupScrollListener(){window.addEventListener("scroll",this.handleScroll)}restoreFocus(){this.shouldRestoreFocus&&this.lastFocusedElement&&document.contains(this.lastFocusedElement)&&this.lastFocusedElement.focus(),this.lastFocusedElement=null,this.shouldRestoreFocus=!1}checkDropdownAlignment(e){const s=e==="slot"?this.slotContainerRef:this.searchContainerRef,n=e==="slot"?this.slotContentRef:this.searchMenuRef;if(!s.value||!n.value||!this.isTablet||this.isMobile)return;const r=s.value.getBoundingClientRect(),l=n.value.offsetWidth,c=r.left+l>window.innerWidth;e==="slot"?this.alignSlotRight=c:this.alignSearchRight=c}handleMenuToggle(e){this.openMenu!=="none"?this.openMenu="none":(this.lastFocusedElement=document.activeElement,this.openMenu=e)}handleLogoClick(e){this.dispatchEvent(new CustomEvent("logo-click",{bubbles:!0,composed:!0,detail:{originalEvent:e}}))}handleServiceClick(e){this.dispatchEvent(new CustomEvent("service-click",{bubbles:!0,composed:!0,detail:{originalEvent:e}}))}handleLogout(){this.dispatchEvent(new CustomEvent("log-out",{bubbles:!0,composed:!0}))}handleSearch(e){this.dispatchEvent(new CustomEvent("search",{detail:{query:e},bubbles:!0,composed:!0}))}handleSearchChange(e){this.dispatchEvent(new CustomEvent("search-change",{detail:{query:e},bubbles:!0,composed:!0}))}handleSearchInputChange(e){const s=e.target.value;this.handleSearchChange(s)}handleSearchKeyDown(e){e.key==="Enter"&&this.handleSearch(e.target.value)}get formattedLastLoggedIn(){var e;return b((e=this.user)==null?void 0:e.lastLoggedIn)}get isFixed(){return this.position==="fixed"}get shouldHideOnScroll(){return this.scrollBehavior==="hide"}get showLogoutInHeader(){return this.hasLogOut&&(this.logOutButtonPlacement==="header"||this.logOutButtonPlacement==="both")}get showLogoutInUserMenu(){return this.hasLogOut&&(this.logOutButtonPlacement==="userMenu"||this.logOutButtonPlacement==="both")}renderLogo(){if(this.hideLogo)return t.E;const e=t.x`
-      <pkt-icon name="oslologo" aria-hidden="true" path=${M}></pkt-icon>
+    `}};k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"user",2);k([t.n({type:String,attribute:"formatted-last-logged-in"})],exports.PktHeaderUserMenu.prototype,"formattedLastLoggedIn",2);k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"representing",2);k([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderUserMenu.prototype,"userMenu",2);k([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeaderUserMenu.prototype,"canChangeRepresentation",2);k([t.n({type:Boolean,attribute:"logout-on-click",converter:u.booleanishConverter})],exports.PktHeaderUserMenu.prototype,"logoutOnClick",2);exports.PktHeaderUserMenu=k([t.t("pkt-header-user-menu")],exports.PktHeaderUserMenu);var $=Object.defineProperty,M=Object.getOwnPropertyDescriptor,i=(o,e,s,n)=>{for(var r=n>1?void 0:n?M(e,s):e,l=o.length-1,c;l>=0;l--)(c=o[l])&&(r=(n?c(e,s,r):c(r))||r);return n&&r&&$(e,s,r),r};const _="https://punkt-cdn.oslo.kommune.no/latest/logos/";exports.PktHeaderService=class extends t.PktElement{constructor(){super(),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.hasSlotContent=!1,this.alignSlotRight=!1,this.alignSearchRight=!1,this.defaultSlot=h.e(),this.headerRef=h.e(),this.userContainerRef=h.e(),this.slotContainerRef=h.e(),this.searchContainerRef=h.e(),this.slotContentRef=h.e(),this.searchMenuRef=h.e(),this.lastScrollPosition=0,this.savedScrollY=0,this.lastFocusedElement=null,this.shouldRestoreFocus=!1,this.handleScroll=()=>{if(!this.shouldHideOnScroll)return;const e=window.pageYOffset||document.documentElement.scrollTop;e<0||Math.abs(e-this.lastScrollPosition)<60||(this.isHidden=e>this.lastScrollPosition,this.lastScrollPosition=e)},this.handleClickOutside=e=>{const s=e.target;this.user&&this.openMenu==="user"&&!s.closest(".pkt-header-service__user-container")&&(this.openMenu="none"),this.openMenu==="slot"&&!s.closest(".pkt-header-service__slot-container")&&(this.openMenu="none"),this.openMenu==="search"&&!s.closest(".pkt-header-service__search-container")&&!s.closest(".pkt-header-service__search-input")&&(this.openMenu="none")},this.handleFocusOut=(e,s)=>{const n=e.relatedTarget;let r;switch(s){case"user":r=this.userContainerRef;break;case"slot":r=this.slotContainerRef;break;case"search":r=this.searchContainerRef;break;default:return}const l=r.value;l&&(!n||!l.contains(n))&&(this.openMenu="none")},this.handleEscapeKey=e=>{e.key==="Escape"&&this.openMenu!=="none"&&(e.preventDefault(),this.shouldRestoreFocus=!0,this.openMenu="none")},this.slotController=new g.PktSlotController(this,this.defaultSlot)}updateSlots(e){this.hasSlotContent=e.has(null)||e.has(void 0)}connectedCallback(){super.connectedCallback(),this.setupScrollListener()}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.resizeObserver)==null||e.disconnect(),window.removeEventListener("scroll",this.handleScroll),this.unlockScroll()}firstUpdated(){this.setupResizeObserver()}updated(e){if(super.updated(e),e.has("openedMenu")&&this.openedMenu!==this.openMenu&&(this.openMenu=this.openedMenu),(e.has("mobileBreakpoint")||e.has("tabletBreakpoint"))&&(this.updateIsMobile(),this.updateIsTablet()),e.has("openMenu")){const s=e.get("openMenu");this.openMenu!=="none"&&(s==="none"||s===void 0)?(document.addEventListener("mousedown",this.handleClickOutside),document.addEventListener("keydown",this.handleEscapeKey),(this.openMenu==="slot"||this.openMenu==="search")&&requestAnimationFrame(()=>{this.checkDropdownAlignment(this.openMenu)})):this.openMenu==="none"&&s!=="none"&&(document.removeEventListener("mousedown",this.handleClickOutside),document.removeEventListener("keydown",this.handleEscapeKey),this.restoreFocus())}(e.has("openMenu")||e.has("isMobile"))&&this.updateScrollLock()}setupResizeObserver(){const e=this.headerRef.value;e&&(this.componentWidth=e.offsetWidth,this.updateIsMobile(),this.updateIsTablet(),this.resizeObserver=new ResizeObserver(s=>{for(const n of s)n.borderBoxSize&&n.borderBoxSize.length>0?this.componentWidth=n.borderBoxSize[0].inlineSize:this.componentWidth=n.contentRect.width,this.updateIsMobile(),this.updateIsTablet()}),this.resizeObserver.observe(e))}updateIsMobile(){this.isMobile=this.componentWidth<this.mobileBreakpoint}updateIsTablet(){this.isTablet=this.componentWidth<this.tabletBreakpoint}updateScrollLock(){this.position==="fixed"&&this.isMobile&&this.openMenu!=="none"?this.lockScroll():this.unlockScroll()}lockScroll(){const e=document.body,s=document.documentElement;this.savedScrollY=window.scrollY||window.pageYOffset;const n=window.innerWidth-s.clientWidth;n>0&&(e.style.paddingRight=`${n}px`),e.style.position="fixed",e.style.top=`-${this.savedScrollY}px`,e.style.left="0",e.style.right="0",e.style.width="100%",e.style.overflow="hidden",s.classList.add("is-scroll-locked")}unlockScroll(){const e=document.body,s=document.documentElement;s.classList.contains("is-scroll-locked")&&(e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("right"),e.style.removeProperty("width"),e.style.removeProperty("overflow"),e.style.removeProperty("padding-right"),s.classList.remove("is-scroll-locked"),window.scrollTo({top:this.savedScrollY}))}setupScrollListener(){window.addEventListener("scroll",this.handleScroll)}restoreFocus(){this.shouldRestoreFocus&&this.lastFocusedElement&&document.contains(this.lastFocusedElement)&&this.lastFocusedElement.focus(),this.lastFocusedElement=null,this.shouldRestoreFocus=!1}checkDropdownAlignment(e){const s=e==="slot"?this.slotContainerRef:this.searchContainerRef,n=e==="slot"?this.slotContentRef:this.searchMenuRef;if(!s.value||!n.value||!this.isTablet||this.isMobile)return;const r=s.value.getBoundingClientRect(),l=n.value.offsetWidth,c=r.left+l>window.innerWidth;e==="slot"?this.alignSlotRight=c:this.alignSearchRight=c}handleMenuToggle(e){this.openMenu!=="none"?this.openMenu="none":(this.lastFocusedElement=document.activeElement,this.openMenu=e)}handleLogoClick(e){this.dispatchEvent(new CustomEvent("logo-click",{bubbles:!0,composed:!0,detail:{originalEvent:e}}))}handleServiceClick(e){this.dispatchEvent(new CustomEvent("service-click",{bubbles:!0,composed:!0,detail:{originalEvent:e}}))}handleLogout(){this.dispatchEvent(new CustomEvent("log-out",{bubbles:!0,composed:!0}))}handleSearch(e){this.dispatchEvent(new CustomEvent("search",{detail:{query:e},bubbles:!0,composed:!0}))}handleSearchChange(e){this.dispatchEvent(new CustomEvent("search-change",{detail:{query:e},bubbles:!0,composed:!0}))}handleSearchInputChange(e){const s=e.target.value;this.handleSearchChange(s)}handleSearchKeyDown(e){e.key==="Enter"&&this.handleSearch(e.target.value)}get formattedLastLoggedIn(){var e;return m((e=this.user)==null?void 0:e.lastLoggedIn)}get isFixed(){return this.position==="fixed"}get shouldHideOnScroll(){return this.scrollBehavior==="hide"}get showLogoutInHeader(){return this.hasLogOut&&(this.logOutButtonPlacement==="header"||this.logOutButtonPlacement==="both")}get showLogoutInUserMenu(){return this.hasLogOut&&(this.logOutButtonPlacement==="userMenu"||this.logOutButtonPlacement==="both")}renderLogo(){if(this.hideLogo)return t.E;const e=t.x`
+      <pkt-icon name="oslologo" aria-hidden="true" path=${_}></pkt-icon>
     `;return this.logoLink&&typeof this.logoLink=="string"?t.x`
         <span class="pkt-header-service__logo">
           <a href=${this.logoLink} aria-label="Tilbake til forside" @click=${this.handleLogoClick}>
@@ -132,7 +132,7 @@
         ${this.isTablet&&this.hasSlotContent?t.x`
               <pkt-button
                 skin="secondary"
-                variant="icon-only"
+                variant=${this.slotMenuVariant}
                 iconName="menu"
                 size=${this.isMobile?"small":"medium"}
                 state=${this.openMenu==="slot"?"active":"normal"}
@@ -141,7 +141,7 @@
                 aria-controls="mobile-slot-menu"
                 aria-label="Åpne meny"
               >
-                Meny
+                ${this.slotMenuText}
               </pkt-button>
             `:t.E}
         <div
@@ -275,7 +275,7 @@
           ${e}
           <div class=${s}></div>
         </div>
-      `}return e}};i([t.n({type:String,attribute:"service-name"})],exports.PktHeaderService.prototype,"serviceName",2);i([t.n({type:String,attribute:"service-link"})],exports.PktHeaderService.prototype,"serviceLink",2);i([t.n({type:String,attribute:"logo-link"})],exports.PktHeaderService.prototype,"logoLink",2);i([t.n({type:String,attribute:"search-placeholder"})],exports.PktHeaderService.prototype,"searchPlaceholder",2);i([t.n({type:String,attribute:"search-value"})],exports.PktHeaderService.prototype,"searchValue",2);i([t.n({type:Number,attribute:"mobile-breakpoint"})],exports.PktHeaderService.prototype,"mobileBreakpoint",2);i([t.n({type:Number,attribute:"tablet-breakpoint"})],exports.PktHeaderService.prototype,"tabletBreakpoint",2);i([t.n({type:String,attribute:"opened-menu"})],exports.PktHeaderService.prototype,"openedMenu",2);i([t.n({type:String,attribute:"log-out-button-placement"})],exports.PktHeaderService.prototype,"logOutButtonPlacement",2);i([t.n({type:String})],exports.PktHeaderService.prototype,"position",2);i([t.n({type:String,attribute:"scroll-behavior"})],exports.PktHeaderService.prototype,"scrollBehavior",2);i([t.n({type:Boolean,attribute:"hide-logo",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"hideLogo",2);i([t.n({type:Boolean,converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"compact",2);i([t.n({type:Boolean,attribute:"show-search",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"showSearch",2);i([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"canChangeRepresentation",2);i([t.n({type:Boolean,attribute:"has-log-out",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"hasLogOut",2);i([t.n({type:Object})],exports.PktHeaderService.prototype,"user",2);i([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderService.prototype,"userMenu",2);i([t.n({type:Object})],exports.PktHeaderService.prototype,"representing",2);i([d.r()],exports.PktHeaderService.prototype,"isMobile",2);i([d.r()],exports.PktHeaderService.prototype,"isTablet",2);i([d.r()],exports.PktHeaderService.prototype,"openMenu",2);i([d.r()],exports.PktHeaderService.prototype,"isHidden",2);i([d.r()],exports.PktHeaderService.prototype,"componentWidth",2);i([d.r()],exports.PktHeaderService.prototype,"hasSlotContent",2);i([d.r()],exports.PktHeaderService.prototype,"alignSlotRight",2);i([d.r()],exports.PktHeaderService.prototype,"alignSearchRight",2);exports.PktHeaderService=i([t.t("pkt-header-service")],exports.PktHeaderService);var P=Object.defineProperty,C=Object.getOwnPropertyDescriptor,a=(o,e,s,n)=>{for(var r=n>1?void 0:n?C(e,s):e,l=o.length-1,c;l>=0;l--)(c=o[l])&&(r=(n?c(e,s,r):c(r))||r);return n&&r&&P(e,s,r),r};exports.PktHeader=class extends t.PktElement{constructor(){super(),this.defaultSlot=h.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.hideLogo=!1,this.compact=!1,this.showSearch=!1,this.canChangeRepresentation=!1,this.hasLogOut=!1,this.slotController=new g.PktSlotController(this,this.defaultSlot)}firstUpdated(e){super.firstUpdated(e),this.emitDeprecationWarnings()}emitDeprecationWarnings(){this.userMenuFooter!==void 0&&console.warn("[PktHeader] userMenuFooter is deprecated. Use userMenu instead."),this.userOptions!==void 0&&console.warn("[PktHeader] userOptions is deprecated. Use userMenu instead.")}get effectiveUserMenu(){const e=this.userMenu||[],s=this.userMenuFooter||[],n=this.userOptions||[];return s.length||n.length?[...e,...n,...s]:this.userMenu}render(){return t.x`
+      `}return e}};i([t.n({type:String,attribute:"service-name"})],exports.PktHeaderService.prototype,"serviceName",2);i([t.n({type:String,attribute:"service-link"})],exports.PktHeaderService.prototype,"serviceLink",2);i([t.n({type:String,attribute:"logo-link"})],exports.PktHeaderService.prototype,"logoLink",2);i([t.n({type:String,attribute:"search-placeholder"})],exports.PktHeaderService.prototype,"searchPlaceholder",2);i([t.n({type:String,attribute:"search-value"})],exports.PktHeaderService.prototype,"searchValue",2);i([t.n({type:Number,attribute:"mobile-breakpoint"})],exports.PktHeaderService.prototype,"mobileBreakpoint",2);i([t.n({type:Number,attribute:"tablet-breakpoint"})],exports.PktHeaderService.prototype,"tabletBreakpoint",2);i([t.n({type:String,attribute:"opened-menu"})],exports.PktHeaderService.prototype,"openedMenu",2);i([t.n({type:String,attribute:"log-out-button-placement"})],exports.PktHeaderService.prototype,"logOutButtonPlacement",2);i([t.n({type:String})],exports.PktHeaderService.prototype,"position",2);i([t.n({type:String,attribute:"scroll-behavior"})],exports.PktHeaderService.prototype,"scrollBehavior",2);i([t.n({type:String,attribute:"slot-menu-variant"})],exports.PktHeaderService.prototype,"slotMenuVariant",2);i([t.n({type:String,attribute:"slot-menu-text"})],exports.PktHeaderService.prototype,"slotMenuText",2);i([t.n({type:Boolean,attribute:"hide-logo",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"hideLogo",2);i([t.n({type:Boolean,converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"compact",2);i([t.n({type:Boolean,attribute:"show-search",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"showSearch",2);i([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"canChangeRepresentation",2);i([t.n({type:Boolean,attribute:"has-log-out",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"hasLogOut",2);i([t.n({type:Object})],exports.PktHeaderService.prototype,"user",2);i([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderService.prototype,"userMenu",2);i([t.n({type:Object})],exports.PktHeaderService.prototype,"representing",2);i([d.r()],exports.PktHeaderService.prototype,"isMobile",2);i([d.r()],exports.PktHeaderService.prototype,"isTablet",2);i([d.r()],exports.PktHeaderService.prototype,"openMenu",2);i([d.r()],exports.PktHeaderService.prototype,"isHidden",2);i([d.r()],exports.PktHeaderService.prototype,"componentWidth",2);i([d.r()],exports.PktHeaderService.prototype,"hasSlotContent",2);i([d.r()],exports.PktHeaderService.prototype,"alignSlotRight",2);i([d.r()],exports.PktHeaderService.prototype,"alignSearchRight",2);exports.PktHeaderService=i([t.t("pkt-header-service")],exports.PktHeaderService);var P=Object.defineProperty,C=Object.getOwnPropertyDescriptor,a=(o,e,s,n)=>{for(var r=n>1?void 0:n?C(e,s):e,l=o.length-1,c;l>=0;l--)(c=o[l])&&(r=(n?c(e,s,r):c(r))||r);return n&&r&&P(e,s,r),r};exports.PktHeader=class extends t.PktElement{constructor(){super(),this.defaultSlot=h.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.slotController=new g.PktSlotController(this,this.defaultSlot)}firstUpdated(e){super.firstUpdated(e),this.emitDeprecationWarnings()}emitDeprecationWarnings(){this.userMenuFooter!==void 0&&console.warn("[PktHeader] userMenuFooter is deprecated. Use userMenu instead."),this.userOptions!==void 0&&console.warn("[PktHeader] userOptions is deprecated. Use userMenu instead.")}get effectiveUserMenu(){const e=this.userMenu||[],s=this.userMenuFooter||[],n=this.userOptions||[];return s.length||n.length?[...e,...n,...s]:this.userMenu}render(){return t.x`
       <pkt-header-service
         service-name=${v.o(this.serviceName)}
         service-link=${v.o(this.serviceLink)}
@@ -288,6 +288,8 @@
         log-out-button-placement=${this.logOutButtonPlacement}
         position=${this.position}
         scroll-behavior=${this.scrollBehavior}
+        slot-menu-variant=${this.slotMenuVariant}
+        slot-menu-text=${this.slotMenuText}
         .hideLogo=${this.hideLogo}
         .compact=${this.compact}
         .showSearch=${this.showSearch}
@@ -299,4 +301,4 @@
       >
         <div class="pkt-contents" ${h.n(this.defaultSlot)}></div>
       </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: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=b;
+    `}};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=m;

package/dist/pkt-header.js

@@ -1,4 +1,4 @@
-import { P as _, E as c, x as n, n as s, a as M } from "./element-CRDRygXu.js";
+import { P as _, E as u, x as n, n as s, a as M } from "./element-CRDRygXu.js";
 import { P as S } from "./pkt-slot-controller-BPGj-LC5.js";
 import { o as $ } from "./if-defined-BWZGb3bh.js";
 import { e as v, n as k } from "./ref-Xa5dbh--.js";
@@ -21,10 +21,10 @@ const C = (e) => typeof e.target == "string" ? { title: e.title, iconName: e.ico
       minute: "2-digit"
     });
 };
-var O = Object.defineProperty, R = Object.getOwnPropertyDescriptor, y = (e, t, i, l) => {
-  for (var r = l > 1 ? void 0 : l ? R(t, i) : t, p = e.length - 1, m; p >= 0; p--)
-    (m = e[p]) && (r = (l ? m(t, i, r) : m(r)) || r);
-  return l && r && O(t, i, r), r;
+var O = Object.defineProperty, R = Object.getOwnPropertyDescriptor, y = (e, t, i, c) => {
+  for (var a = c > 1 ? void 0 : c ? R(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 && O(t, i, a), a;
 };
 let b = class extends _ {
   constructor() {
@@ -50,7 +50,7 @@ let b = class extends _ {
     "onClick" in e && typeof e.onClick == "function" && e.onClick();
   }
   renderLinkOrButton(e, t) {
-    const i = "href" in e, l = g({
+    const i = "href" in e, c = g({
       "pkt-user-menu__link": !0,
       "pkt-link-button": !i,
       "pkt-link": !i,
@@ -59,7 +59,7 @@ let b = class extends _ {
     });
     return i ? n`
         <pkt-link
-          icon-name=${e.iconName || c}
+          icon-name=${e.iconName || u}
           href=${e.href}
           aria-hidden="true"
           class="pkt-user-menu__link ${t || ""}"
@@ -67,12 +67,12 @@ let b = class extends _ {
           ${e.title}
         </pkt-link>
       ` : n`
-      <button class=${l} type="button" @click=${() => this.handleMenuItemClick(e)}>
+      <button class=${c} type="button" @click=${() => this.handleMenuItemClick(e)}>
         ${e.iconName ? n`<pkt-icon
               name=${e.iconName}
               class="pkt-link__icon"
               aria-hidden="true"
-            ></pkt-icon>` : c}
+            ></pkt-icon>` : u}
         ${e.title}
       </button>
     `;
@@ -103,14 +103,14 @@ let b = class extends _ {
                         <div class="pkt-user-menu__last-logged-in">
                           Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
                         </div>
-                      ` : c}
+                      ` : u}
                 </li>
-              ` : c}
+              ` : u}
 
           <!-- User menu items -->
           ${e && e.length > 0 ? n`
                 <li class="pkt-user-menu__item">${this.renderLinkSection(e)}</li>
-              ` : c}
+              ` : u}
 
           <!-- Representing section -->
           ${this.representing ? n`
@@ -119,7 +119,7 @@ let b = class extends _ {
                   <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>` : c}
+                      </div>` : u}
                   ${this.canChangeRepresentation ? n`
                         <ul class="pkt-user-menu__sublist mt-size-16">
                           <li class="pkt-user-menu__subitem">
@@ -130,9 +130,9 @@ let b = class extends _ {
     })}
                           </li>
                         </ul>
-                      ` : c}
+                      ` : u}
                 </li>
-              ` : c}
+              ` : u}
 
           <!-- Change representation without representing object -->
           ${!this.representing && this.canChangeRepresentation ? n`
@@ -147,7 +147,7 @@ let b = class extends _ {
                     </li>
                   </ul>
                 </li>
-              ` : c}
+              ` : u}
 
           <!-- Logout -->
           ${this.logoutOnClick ? n`
@@ -158,7 +158,7 @@ let b = class extends _ {
       onClick: () => this.handleLogout()
     })}
                 </li>
-              ` : c}
+              ` : u}
         </ul>
       </nav>
     `;
@@ -189,15 +189,15 @@ y([
 b = y([
   M("pkt-header-user-menu")
 ], b);
-var B = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (e, t, i, l) => {
-  for (var r = l > 1 ? void 0 : l ? E(t, i) : t, p = e.length - 1, m; p >= 0; p--)
-    (m = e[p]) && (r = (l ? m(t, i, r) : m(r)) || r);
-  return l && r && B(t, i, r), r;
+var B = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, t, i, c) => {
+  for (var a = c > 1 ? void 0 : c ? E(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 && B(t, i, a), a;
 };
 const P = "https://punkt-cdn.oslo.kommune.no/latest/logos/";
 let o = class extends _ {
   constructor() {
-    super(), 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.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.hasSlotContent = !1, this.alignSlotRight = !1, this.alignSearchRight = !1, this.defaultSlot = v(), this.headerRef = v(), this.userContainerRef = v(), this.slotContainerRef = v(), this.searchContainerRef = v(), this.slotContentRef = v(), this.searchMenuRef = v(), this.lastScrollPosition = 0, this.savedScrollY = 0, this.lastFocusedElement = null, this.shouldRestoreFocus = !1, this.handleScroll = () => {
+    super(), 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.hasSlotContent = !1, this.alignSlotRight = !1, this.alignSearchRight = !1, this.defaultSlot = v(), this.headerRef = v(), this.userContainerRef = v(), this.slotContainerRef = v(), this.searchContainerRef = v(), this.slotContentRef = v(), this.searchMenuRef = v(), this.lastScrollPosition = 0, this.savedScrollY = 0, this.lastFocusedElement = null, this.shouldRestoreFocus = !1, this.handleScroll = () => {
       if (!this.shouldHideOnScroll) return;
       const e = window.pageYOffset || document.documentElement.scrollTop;
       e < 0 || Math.abs(e - this.lastScrollPosition) < 60 || (this.isHidden = e > this.lastScrollPosition, this.lastScrollPosition = e);
@@ -206,22 +206,22 @@ let o = class extends _ {
       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 l;
+      let c;
       switch (t) {
         case "user":
-          l = this.userContainerRef;
+          c = this.userContainerRef;
           break;
         case "slot":
-          l = this.slotContainerRef;
+          c = this.slotContainerRef;
           break;
         case "search":
-          l = this.searchContainerRef;
+          c = this.searchContainerRef;
           break;
         default:
           return;
       }
-      const r = l.value;
-      r && (!i || !r.contains(i)) && (this.openMenu = "none");
+      const a = c.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");
     }, this.slotController = new S(this, this.defaultSlot);
@@ -283,7 +283,7 @@ let o = class extends _ {
   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 l = t.value.getBoundingClientRect(), r = i.value.offsetWidth, p = l.left + r > window.innerWidth;
+    const c = t.value.getBoundingClientRect(), a = i.value.offsetWidth, p = c.left + a > window.innerWidth;
     e === "slot" ? this.alignSlotRight = p : this.alignSearchRight = p;
   }
   handleMenuToggle(e) {
@@ -357,7 +357,7 @@ let o = class extends _ {
     return this.hasLogOut && (this.logOutButtonPlacement === "userMenu" || this.logOutButtonPlacement === "both");
   }
   renderLogo() {
-    if (this.hideLogo) return c;
+    if (this.hideLogo) return u;
     const e = n`
       <pkt-icon name="oslologo" aria-hidden="true" path=${P}></pkt-icon>
     `;
@@ -405,7 +405,7 @@ let o = class extends _ {
       <span class="pkt-header-service__service-name" @click=${this.handleServiceClick}>
         <span class="pkt-header-service__service-link">${this.serviceName}</span>
       </span>
-    ` : c;
+    ` : u;
   }
   renderSlotContainer() {
     const e = g({
@@ -424,7 +424,7 @@ let o = class extends _ {
         ${this.isTablet && this.hasSlotContent ? n`
               <pkt-button
                 skin="secondary"
-                variant="icon-only"
+                variant=${this.slotMenuVariant}
                 iconName="menu"
                 size=${this.isMobile ? "small" : "medium"}
                 state=${this.openMenu === "slot" ? "active" : "normal"}
@@ -433,14 +433,14 @@ let o = class extends _ {
                 aria-controls="mobile-slot-menu"
                 aria-label="Åpne meny"
               >
-                Meny
+                ${this.slotMenuText}
               </pkt-button>
-            ` : c}
+            ` : u}
         <div
           class=${t}
           id="mobile-slot-menu"
-          role=${this.isTablet ? "menu" : c}
-          aria-label=${this.isTablet ? "Meny" : c}
+          role=${this.isTablet ? "menu" : u}
+          aria-label=${this.isTablet ? "Meny" : u}
           ${k(this.slotContentRef)}
           ${k(this.defaultSlot)}
         ></div>
@@ -448,7 +448,7 @@ let o = class extends _ {
     `;
   }
   renderSearch() {
-    if (!this.showSearch) return c;
+    if (!this.showSearch) return u;
     if (this.isTablet) {
       const e = g({
         "pkt-header-service__search-container": !0,
@@ -494,7 +494,7 @@ let o = class extends _ {
         i.key === "Enter" && this.handleSearch(i.target.value);
       }}
                   ></pkt-textinput>
-                ` : c}
+                ` : u}
           </div>
         </div>
       `;
@@ -515,7 +515,7 @@ let o = class extends _ {
   }
   renderUserButton() {
     var t;
-    if (!this.user) return c;
+    if (!this.user) return u;
     const e = g({
       "pkt-header-service__user-menu": this.isMobile === !1,
       "pkt-header-service__mobile-menu": this.isMobile === !0,
@@ -547,7 +547,7 @@ let o = class extends _ {
               <div class=${e}>
                 <pkt-header-user-menu
                   .user=${this.user}
-                  formatted-last-logged-in=${this.formattedLastLoggedIn || c}
+                  formatted-last-logged-in=${this.formattedLastLoggedIn || u}
                   .representing=${this.representing}
                   .userMenu=${this.userMenu}
                   ?can-change-representation=${this.canChangeRepresentation}
@@ -558,7 +558,7 @@ let o = class extends _ {
                   @log-out=${this.handleLogout}
                 ></pkt-header-user-menu>
               </div>
-            ` : c}
+            ` : u}
       </div>
     `;
   }
@@ -591,7 +591,7 @@ let o = class extends _ {
                 >
                   Logg ut
                 </pkt-button>
-              ` : c}
+              ` : u}
         </div>
 
         <div class="pkt-header-service__user">
@@ -606,7 +606,7 @@ let o = class extends _ {
                 >
                   Logg ut
                 </pkt-button>
-              ` : c}
+              ` : u}
         </div>
       </header>
     `;
@@ -630,102 +630,108 @@ let o = class extends _ {
     return e;
   }
 };
-a([
+r([
   s({ type: String, attribute: "service-name" })
 ], o.prototype, "serviceName", 2);
-a([
+r([
   s({ type: String, attribute: "service-link" })
 ], o.prototype, "serviceLink", 2);
-a([
+r([
   s({ type: String, attribute: "logo-link" })
 ], o.prototype, "logoLink", 2);
-a([
+r([
   s({ type: String, attribute: "search-placeholder" })
 ], o.prototype, "searchPlaceholder", 2);
-a([
+r([
   s({ type: String, attribute: "search-value" })
 ], o.prototype, "searchValue", 2);
-a([
+r([
   s({ type: Number, attribute: "mobile-breakpoint" })
 ], o.prototype, "mobileBreakpoint", 2);
-a([
+r([
   s({ type: Number, attribute: "tablet-breakpoint" })
 ], o.prototype, "tabletBreakpoint", 2);
-a([
+r([
   s({ type: String, attribute: "opened-menu" })
 ], o.prototype, "openedMenu", 2);
-a([
+r([
   s({ type: String, attribute: "log-out-button-placement" })
 ], o.prototype, "logOutButtonPlacement", 2);
-a([
+r([
   s({ type: String })
 ], o.prototype, "position", 2);
-a([
+r([
   s({ type: String, attribute: "scroll-behavior" })
 ], o.prototype, "scrollBehavior", 2);
-a([
+r([
+  s({ type: String, attribute: "slot-menu-variant" })
+], o.prototype, "slotMenuVariant", 2);
+r([
+  s({ type: String, attribute: "slot-menu-text" })
+], o.prototype, "slotMenuText", 2);
+r([
   s({ type: Boolean, attribute: "hide-logo", converter: d })
 ], o.prototype, "hideLogo", 2);
-a([
+r([
   s({ type: Boolean, converter: d })
 ], o.prototype, "compact", 2);
-a([
+r([
   s({ type: Boolean, attribute: "show-search", converter: d })
 ], o.prototype, "showSearch", 2);
-a([
+r([
   s({
     type: Boolean,
     attribute: "can-change-representation",
     converter: d
   })
 ], o.prototype, "canChangeRepresentation", 2);
-a([
+r([
   s({ type: Boolean, attribute: "has-log-out", converter: d })
 ], o.prototype, "hasLogOut", 2);
-a([
+r([
   s({ type: Object })
 ], o.prototype, "user", 2);
-a([
+r([
   s({ type: Array, attribute: "user-menu" })
 ], o.prototype, "userMenu", 2);
-a([
+r([
   s({ type: Object })
 ], o.prototype, "representing", 2);
-a([
+r([
   f()
 ], o.prototype, "isMobile", 2);
-a([
+r([
   f()
 ], o.prototype, "isTablet", 2);
-a([
+r([
   f()
 ], o.prototype, "openMenu", 2);
-a([
+r([
   f()
 ], o.prototype, "isHidden", 2);
-a([
+r([
   f()
 ], o.prototype, "componentWidth", 2);
-a([
+r([
   f()
 ], o.prototype, "hasSlotContent", 2);
-a([
+r([
   f()
 ], o.prototype, "alignSlotRight", 2);
-a([
+r([
   f()
 ], o.prototype, "alignSearchRight", 2);
-o = a([
+o = r([
   M("pkt-header-service")
 ], o);
-var N = Object.defineProperty, I = Object.getOwnPropertyDescriptor, u = (e, t, i, l) => {
-  for (var r = l > 1 ? void 0 : l ? I(t, i) : t, p = e.length - 1, m; p >= 0; p--)
-    (m = e[p]) && (r = (l ? m(t, i, r) : m(r)) || r);
-  return l && r && N(t, i, r), r;
+var x = Object.defineProperty, N = Object.getOwnPropertyDescriptor, h = (e, t, i, c) => {
+  for (var a = c > 1 ? void 0 : c ? N(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 && x(t, i, a), a;
 };
-let h = class extends _ {
+let l = class extends _ {
   constructor() {
-    super(), this.defaultSlot = v(), 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.hideLogo = !1, this.compact = !1, this.showSearch = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.slotController = new S(this, this.defaultSlot);
+    super(), this.defaultSlot = v(), 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.slotController = new S(this, this.defaultSlot);
   }
   firstUpdated(e) {
     super.firstUpdated(e), this.emitDeprecationWarnings();
@@ -754,6 +760,8 @@ let h = class extends _ {
         log-out-button-placement=${this.logOutButtonPlacement}
         position=${this.position}
         scroll-behavior=${this.scrollBehavior}
+        slot-menu-variant=${this.slotMenuVariant}
+        slot-menu-text=${this.slotMenuText}
         .hideLogo=${this.hideLogo}
         .compact=${this.compact}
         .showSearch=${this.showSearch}
@@ -768,78 +776,84 @@ let h = class extends _ {
     `;
   }
 };
-u([
+h([
   s({ type: String, attribute: "service-name" })
-], h.prototype, "serviceName", 2);
-u([
+], l.prototype, "serviceName", 2);
+h([
   s({ type: String, attribute: "service-link" })
-], h.prototype, "serviceLink", 2);
-u([
+], l.prototype, "serviceLink", 2);
+h([
   s({ type: String, attribute: "logo-link" })
-], h.prototype, "logoLink", 2);
-u([
+], l.prototype, "logoLink", 2);
+h([
   s({ type: String, attribute: "search-placeholder" })
-], h.prototype, "searchPlaceholder", 2);
-u([
+], l.prototype, "searchPlaceholder", 2);
+h([
   s({ type: String, attribute: "search-value" })
-], h.prototype, "searchValue", 2);
-u([
+], l.prototype, "searchValue", 2);
+h([
   s({ type: Number, attribute: "mobile-breakpoint" })
-], h.prototype, "mobileBreakpoint", 2);
-u([
+], l.prototype, "mobileBreakpoint", 2);
+h([
   s({ type: Number, attribute: "tablet-breakpoint" })
-], h.prototype, "tabletBreakpoint", 2);
-u([
+], l.prototype, "tabletBreakpoint", 2);
+h([
   s({ type: String, attribute: "opened-menu" })
-], h.prototype, "openedMenu", 2);
-u([
+], l.prototype, "openedMenu", 2);
+h([
   s({ type: String, attribute: "log-out-button-placement" })
-], h.prototype, "logOutButtonPlacement", 2);
-u([
+], l.prototype, "logOutButtonPlacement", 2);
+h([
   s({ type: String })
-], h.prototype, "position", 2);
-u([
+], l.prototype, "position", 2);
+h([
   s({ type: String, attribute: "scroll-behavior" })
-], h.prototype, "scrollBehavior", 2);
-u([
+], l.prototype, "scrollBehavior", 2);
+h([
+  s({ type: String, attribute: "slot-menu-variant" })
+], l.prototype, "slotMenuVariant", 2);
+h([
+  s({ type: String, attribute: "slot-menu-text" })
+], l.prototype, "slotMenuText", 2);
+h([
   s({ type: Boolean, attribute: "hide-logo", converter: d })
-], h.prototype, "hideLogo", 2);
-u([
+], l.prototype, "hideLogo", 2);
+h([
   s({ type: Boolean, converter: d })
-], h.prototype, "compact", 2);
-u([
+], l.prototype, "compact", 2);
+h([
   s({ type: Boolean, attribute: "show-search", converter: d })
-], h.prototype, "showSearch", 2);
-u([
+], l.prototype, "showSearch", 2);
+h([
   s({
     type: Boolean,
     attribute: "can-change-representation",
     converter: d
   })
-], h.prototype, "canChangeRepresentation", 2);
-u([
+], l.prototype, "canChangeRepresentation", 2);
+h([
   s({ type: Boolean, attribute: "has-log-out", converter: d })
-], h.prototype, "hasLogOut", 2);
-u([
+], l.prototype, "hasLogOut", 2);
+h([
   s({ type: Object })
-], h.prototype, "user", 2);
-u([
+], l.prototype, "user", 2);
+h([
   s({ type: Array, attribute: "user-menu" })
-], h.prototype, "userMenu", 2);
-u([
+], l.prototype, "userMenu", 2);
+h([
   s({ type: Object })
-], h.prototype, "representing", 2);
-u([
+], l.prototype, "representing", 2);
+h([
   s({ type: Array, attribute: "user-menu-footer" })
-], h.prototype, "userMenuFooter", 2);
-u([
+], l.prototype, "userMenuFooter", 2);
+h([
   s({ type: Array, attribute: "user-options" })
-], h.prototype, "userOptions", 2);
-h = u([
+], l.prototype, "userOptions", 2);
+l = h([
   M("pkt-header")
-], h);
+], l);
 export {
-  h as PktHeader,
+  l as PktHeader,
   o as PktHeaderService,
   b as PktHeaderUserMenu,
   w as formatLastLoggedIn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "14.2.0",
+  "version": "14.3.0",
   "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": "47682b6620c3d10622e5121814954fa294996b9b"
+  "gitHead": "892df7abaa2e9e117dc32b0c44c77592c80233cb"
 }

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

@@ -8,10 +8,11 @@ import {
   User,
   Representing,
   UserMenuItem,
-  TPktHeaderMenu,
+  THeaderMenu,
   TLogOutButtonPlacement,
   THeaderPosition,
   THeaderScrollBehavior,
+  TSlotMenuVariant,
   IPktHeader,
   Booleanish,
   booleanishConverter,
@@ -35,12 +36,15 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
   @property({ type: String, attribute: 'search-value' }) searchValue = ''
   @property({ type: Number, attribute: 'mobile-breakpoint' }) mobileBreakpoint: number = 768
   @property({ type: Number, attribute: 'tablet-breakpoint' }) tabletBreakpoint: number = 1280
-  @property({ type: String, attribute: 'opened-menu' }) openedMenu: TPktHeaderMenu = 'none'
+  @property({ type: String, attribute: 'opened-menu' }) openedMenu: THeaderMenu = 'none'
   @property({ type: String, attribute: 'log-out-button-placement' })
   logOutButtonPlacement: TLogOutButtonPlacement = 'none'
   @property({ type: String }) position: THeaderPosition = 'fixed'
   @property({ type: String, attribute: 'scroll-behavior' }) scrollBehavior: THeaderScrollBehavior =
     'hide'
+  @property({ type: String, attribute: 'slot-menu-variant' })
+  slotMenuVariant: TSlotMenuVariant = 'icon-only'
+  @property({ type: String, attribute: 'slot-menu-text' }) slotMenuText = 'Meny'
 
   @property({ type: Boolean, attribute: 'hide-logo', converter: booleanishConverter })
   hideLogo: Booleanish = false
@@ -62,7 +66,7 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
 
   @state() private isMobile = false
   @state() private isTablet = false
-  @state() private openMenu: TPktHeaderMenu = 'none'
+  @state() private openMenu: THeaderMenu = 'none'
   @state() private isHidden = false
   @state() private componentWidth = typeof window !== 'undefined' ? window.innerWidth : 0
   @state() private hasSlotContent = false
@@ -123,7 +127,7 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
     }
 
     if (changedProperties.has('openMenu')) {
-      const previousOpenMenu = changedProperties.get('openMenu') as TPktHeaderMenu | undefined
+      const previousOpenMenu = changedProperties.get('openMenu') as THeaderMenu | undefined
       if (
         this.openMenu !== 'none' &&
         (previousOpenMenu === 'none' || previousOpenMenu === undefined)
@@ -263,7 +267,7 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
     }
   }
 
-  private handleFocusOut = (event: FocusEvent, menuType: TPktHeaderMenu) => {
+  private handleFocusOut = (event: FocusEvent, menuType: THeaderMenu) => {
     const relatedTarget = event.relatedTarget as HTMLElement | null
 
     let containerRef: Ref<HTMLElement>
@@ -325,7 +329,7 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
     }
   }
 
-  private handleMenuToggle(mode: TPktHeaderMenu) {
+  private handleMenuToggle(mode: THeaderMenu) {
     if (this.openMenu !== 'none') {
       this.openMenu = 'none'
     } else {
@@ -520,7 +524,7 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
           ? html`
               <pkt-button
                 skin="secondary"
-                variant="icon-only"
+                variant=${this.slotMenuVariant}
                 iconName="menu"
                 size=${this.isMobile ? 'small' : 'medium'}
                 state=${this.openMenu === 'slot' ? 'active' : 'normal'}
@@ -529,7 +533,7 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
                 aria-controls="mobile-slot-menu"
                 aria-label="Åpne meny"
               >
-                Meny
+                ${this.slotMenuText}
               </pkt-button>
             `
           : nothing}

package/src/components/header/header.ts

@@ -8,10 +8,11 @@ import {
   User,
   Representing,
   UserMenuItem,
-  TPktHeaderMenu,
+  THeaderMenu,
   TLogOutButtonPlacement,
   THeaderPosition,
   THeaderScrollBehavior,
+  TSlotMenuVariant,
   IPktHeader,
   Booleanish,
   booleanishConverter,
@@ -43,12 +44,15 @@ export class PktHeader extends PktElement<IPktHeader> implements IPktHeader {
   @property({ type: String, attribute: 'search-value' }) searchValue = ''
   @property({ type: Number, attribute: 'mobile-breakpoint' }) mobileBreakpoint: number = 768
   @property({ type: Number, attribute: 'tablet-breakpoint' }) tabletBreakpoint: number = 1280
-  @property({ type: String, attribute: 'opened-menu' }) openedMenu: TPktHeaderMenu = 'none'
+  @property({ type: String, attribute: 'opened-menu' }) openedMenu: THeaderMenu = 'none'
   @property({ type: String, attribute: 'log-out-button-placement' })
   logOutButtonPlacement: TLogOutButtonPlacement = 'none'
   @property({ type: String }) position: THeaderPosition = 'fixed'
   @property({ type: String, attribute: 'scroll-behavior' }) scrollBehavior: THeaderScrollBehavior =
     'hide'
+  @property({ type: String, attribute: 'slot-menu-variant' })
+  slotMenuVariant: TSlotMenuVariant = 'icon-only'
+  @property({ type: String, attribute: 'slot-menu-text' }) slotMenuText = 'Meny'
 
   @property({ type: Boolean, attribute: 'hide-logo', converter: booleanishConverter })
   hideLogo: Booleanish = false
@@ -119,6 +123,8 @@ export class PktHeader extends PktElement<IPktHeader> implements IPktHeader {
         log-out-button-placement=${this.logOutButtonPlacement}
         position=${this.position}
         scroll-behavior=${this.scrollBehavior}
+        slot-menu-variant=${this.slotMenuVariant}
+        slot-menu-text=${this.slotMenuText}
         .hideLogo=${this.hideLogo}
         .compact=${this.compact}
         .showSearch=${this.showSearch}

package/src/components/header/index.ts

@@ -7,8 +7,11 @@ export type {
   Representing,
   UserMenuItem,
   TInternalMenuItem,
-  TPktHeaderMenu,
+  THeaderMenu,
   TLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
+  TSlotMenuVariant,
   IPktHeader,
 } from './types'
 

package/src/components/header/types.ts

@@ -6,10 +6,22 @@ import type {
   Representing as SharedRepresenting,
   UserMenuItem as SharedUserMenuItem,
   TInternalMenuItem as SharedTInternalMenuItem,
+  TSlotMenuVariant,
+  THeaderMenu,
+  TLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
 } from 'shared-types'
 import { convertUserMenuItem as sharedConvertUserMenuItem } from 'shared-types'
 
-export type { Booleanish }
+export type {
+  Booleanish,
+  TSlotMenuVariant,
+  THeaderMenu,
+  TLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
+}
 export { booleanishConverter }
 
 // Re-export with PktIconName typing
@@ -25,26 +37,6 @@ export const convertUserMenuItem = (item: UserMenuItem): TInternalMenuItem => {
   return sharedConvertUserMenuItem(item)
 }
 
-/**
- * Type for which menu is currently open
- */
-export type TPktHeaderMenu = 'none' | 'slot' | 'search' | 'user'
-
-/**
- * Type for logout button placement
- */
-export type TLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none'
-
-/**
- * Position options for header
- */
-export type THeaderPosition = 'fixed' | 'relative'
-
-/**
- * Scroll behavior options for header
- */
-export type THeaderScrollBehavior = 'hide' | 'none'
-
 /**
  * Interface for the Header component props
  */
@@ -86,5 +78,9 @@ export interface IPktHeader {
   /** Custom breakpoint for tablet responsive behavior in pixels. Default: 1280 */
   tabletBreakpoint?: number
   /** Which menu is initially open */
-  openedMenu?: TPktHeaderMenu
+  openedMenu?: THeaderMenu
+  /** Variant for the slot menu button. Default: 'icon-only' */
+  slotMenuVariant?: TSlotMenuVariant
+  /** Text for the slot menu button. Default: 'Meny' */
+  slotMenuText?: string
 }

package/src/components/index.ts

@@ -49,8 +49,11 @@ export type {
   User as IPktHeaderUser,
   Representing as IPktHeaderRepresenting,
   UserMenuItem as IPktHeaderUserMenuItem,
-  TPktHeaderMenu,
+  THeaderMenu,
   TLogOutButtonPlacement as TPktHeaderLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
+  TSlotMenuVariant,
   IPktHeader,
 } from '@/components/header'