@oslokommune/punkt-elements 13.22.0 → 14.0.1

package/dist/pkt-index.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./alert-CCjoJo11.cjs"),l=require("./accordionitem-DCZrHVNR.cjs"),m=require("./backlink-BzEvli8m.cjs"),g=require("./button-abD9URn0.cjs"),P=require("./calendar-Dz1Cnzx5.cjs"),h=require("./card-BAoH1g6O.cjs"),f=require("./combobox-DYYCdlex.cjs"),y=require("./consent-B1N02CuT.cjs"),O=require("./checkbox-BP5zOlPy.cjs"),t=require("./element-CJ_QKaki.cjs"),j=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BFa5Utho.cjs"),q=require("./class-map-C_erArZz.cjs"),k=require("./datepicker-CnCOXI2x.cjs"),x=require("./helptext-EPTR9AIl.cjs"),C=require("./heading-Dv_cH6N1.cjs"),v=require("./icon-BGuizDwk.cjs"),S=require("./input-wrapper-WEGSbIA6.cjs"),T=require("./link-Da3pZ_CW.cjs"),$=require("./linkcard-BM23gzhS.cjs"),L=require("./loader-Bo8RCbCJ.cjs"),_=require("./messagebox-C76IcXTl.cjs"),I=require("./modal-Cdz9JcCX.cjs"),A=require("./progressbar-8gzOtJyh.cjs"),p=require("./radiobutton-BuKXgQm_.cjs"),B=require("./tag-BkuJjOy7.cjs"),d=require("./tabitem-D5zyipN1.cjs"),D=require("./textarea-CcIQXCmC.cjs"),M=require("./textinput-Dn704gQw.cjs"),R=require("./select-BSnylWof.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new j.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
-      <div class="${q.e(e)}">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./alert-CCjoJo11.cjs"),P=require("./accordionitem-DCZrHVNR.cjs"),g=require("./backlink-BzEvli8m.cjs"),h=require("./button-abD9URn0.cjs"),k=require("./calendar-Dz1Cnzx5.cjs"),f=require("./card-BAoH1g6O.cjs"),y=require("./combobox-DYYCdlex.cjs"),O=require("./consent-B1N02CuT.cjs"),j=require("./checkbox-BP5zOlPy.cjs"),t=require("./element-CJ_QKaki.cjs"),q=require("./pkt-slot-controller-BzddBp7z.cjs"),a=require("./ref-BFa5Utho.cjs"),x=require("./class-map-C_erArZz.cjs"),d=require("./datepicker-CnCOXI2x.cjs"),l=require("./pkt-header.cjs"),C=require("./helptext-EPTR9AIl.cjs"),v=require("./heading-Dv_cH6N1.cjs"),S=require("./icon-BGuizDwk.cjs"),T=require("./input-wrapper-WEGSbIA6.cjs"),$=require("./link-Da3pZ_CW.cjs"),H=require("./linkcard-BM23gzhS.cjs"),L=require("./loader-Bo8RCbCJ.cjs"),_=require("./messagebox-C76IcXTl.cjs"),I=require("./modal-Cdz9JcCX.cjs"),A=require("./progressbar-8gzOtJyh.cjs"),p=require("./radiobutton-BuKXgQm_.cjs"),B=require("./tag-BkuJjOy7.cjs"),b=require("./tabitem-D5zyipN1.cjs"),M=require("./textarea-CcIQXCmC.cjs"),D=require("./textinput-Dn704gQw.cjs"),R=require("./select-BSnylWof.cjs");var w=Object.defineProperty,E=Object.getOwnPropertyDescriptor,o=(s,e,r,i)=>{for(var n=i>1?void 0:i?E(e,r):e,u=s.length-1,c;u>=0;u--)(c=s[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&w(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=a.e(),this.namedSlot=a.e(),this.slotController=new q.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+      <div class="${x.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
         <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
@@ -7,11 +7,11 @@
         <div>${this.renderList(this.doStuff(this._list))}</div>
 
         <h2 class="pkt-txt-22">Slot</h2>
-        <div ${s.n(this.defaultSlot)}>defaultSlotRef</div>
+        <div ${a.n(this.defaultSlot)}>defaultSlotRef</div>
         <h2 class="pkt-txt-22">Named slot</h2>
         <select
           name="named-slot"
-          ${s.n(this.namedSlot)}
+          ${a.n(this.namedSlot)}
           @change=${r=>alert(r.target.value)}
         >
           namedSlotRef
@@ -26,4 +26,4 @@
       <ul>
         ${e.map(r=>t.x`<li>${r}</li>`)}
       </ul>
-    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:P.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>b.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>m.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>g.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>P.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>h.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>f.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>y.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>O.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>k.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>k.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>x.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>C.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>v.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>S.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>T.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>$.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>L.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>_.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>I.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>A.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>B.PktTag});exports.PktTabItem=d.PktTabItem;exports.PktTabs=d.PktTabs;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>D.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>M.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>R.PktSelect});
+    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:k.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>m.PktAlert});exports.PktAccordion=P.PktAccordion;exports.PktAccordionItem=P.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>g.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>h.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>k.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>f.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>y.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>O.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>j.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>d.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>d.PktDatepicker});Object.defineProperty(exports,"PktHeader",{enumerable:!0,get:()=>l.PktHeader});Object.defineProperty(exports,"PktHeaderService",{enumerable:!0,get:()=>l.PktHeaderService});Object.defineProperty(exports,"PktHeaderUserMenu",{enumerable:!0,get:()=>l.PktHeaderUserMenu});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>C.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>v.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>S.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>T.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>$.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>H.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>L.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>_.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>I.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>A.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>B.PktTag});exports.PktTabItem=b.PktTabItem;exports.PktTabs=b.PktTabs;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>M.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>D.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>R.PktSelect});

package/dist/pkt-index.js

@@ -1,40 +1,41 @@
 import { P as T } from "./alert-CPY1IhxY.js";
-import { P as I, a as w } from "./accordionitem-C_URrDjP.js";
-import { P as D } from "./backlink-CI_jMGzZ.js";
-import { P as O } from "./button-D99MF5nV.js";
-import { c as f } from "./calendar-Bz27nuTP.js";
-import { P as j } from "./calendar-Bz27nuTP.js";
-import { P as G } from "./card-0F02tcJV.js";
-import { P as K } from "./combobox-D-VZRCHk.js";
-import { P as U } from "./consent-BSNqH1LX.js";
+import { P as A, a as I } from "./accordionitem-C_URrDjP.js";
+import { P as B } from "./backlink-CI_jMGzZ.js";
+import { P as E } from "./button-D99MF5nV.js";
+import { c as d } from "./calendar-Bz27nuTP.js";
+import { P as R } from "./calendar-Bz27nuTP.js";
+import { P as M } from "./card-0F02tcJV.js";
+import { P as U } from "./combobox-D-VZRCHk.js";
+import { P as N } from "./consent-BSNqH1LX.js";
 import { P as q } from "./checkbox-CfXOh6Lw.js";
-import { P as d, t as h, x as P, n, a as c } from "./element-CRDRygXu.js";
+import { P as f, t as h, x as l, n, a as c } from "./element-CRDRygXu.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as m, n as k } from "./ref-Xa5dbh--.js";
 import { e as u } from "./class-map-wy7PUk0P.js";
 import { P as F, a as J } from "./datepicker-DsqM01iU.js";
-import { P as V } from "./helptext-Cs3QHeEy.js";
-import { P as Y } from "./heading-BUdy170t.js";
-import { P as tt } from "./icon-1dy7UZcu.js";
-import { P as rt } from "./input-wrapper-CnYj-xNE.js";
-import { P as st } from "./link-DzZCw8j2.js";
-import { P as nt } from "./linkcard-RIK5xqbd.js";
-import { P as pt } from "./loader-BVvBzaPI.js";
-import { P as Pt } from "./messagebox-DwdMXoAe.js";
-import { P as kt } from "./modal-BGXk3f9u.js";
-import { P as dt } from "./progressbar-kxcBEspG.js";
-import { P as ct, P as xt } from "./radiobutton-C_MzK8dE.js";
-import { P as gt } from "./tag-BpCdJuei.js";
-import { a as bt, P as St } from "./tabitem-NV2fzs_-.js";
-import { P as $t } from "./textarea-BJGCHy37.js";
-import { P as _t } from "./textinput-B3Q13J8H.js";
-import { P as Tt } from "./select-CtgQkH86.js";
+import { PktHeader as V, PktHeaderService as X, PktHeaderUserMenu as Y } from "./pkt-header.js";
+import { P as tt } from "./helptext-Cs3QHeEy.js";
+import { P as rt } from "./heading-BUdy170t.js";
+import { P as st } from "./icon-1dy7UZcu.js";
+import { P as nt } from "./input-wrapper-CnYj-xNE.js";
+import { P as pt } from "./link-DzZCw8j2.js";
+import { P as lt } from "./linkcard-RIK5xqbd.js";
+import { P as kt } from "./loader-BVvBzaPI.js";
+import { P as ft } from "./messagebox-DwdMXoAe.js";
+import { P as ct } from "./modal-BGXk3f9u.js";
+import { P as ut } from "./progressbar-kxcBEspG.js";
+import { P as vt, P as bt } from "./radiobutton-C_MzK8dE.js";
+import { P as Ct } from "./tag-BpCdJuei.js";
+import { a as yt, P as _t } from "./tabitem-NV2fzs_-.js";
+import { P as Tt } from "./textarea-BJGCHy37.js";
+import { P as At } from "./textinput-B3Q13J8H.js";
+import { P as wt } from "./select-CtgQkH86.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, e, i, a) => {
-  for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
-    (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
+  for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, P; p >= 0; p--)
+    (P = t[p]) && (r = (a ? P(e, i, r) : P(r)) || r);
   return a && r && g(e, i, r), r;
 };
-let o = class extends d {
+let o = class extends f {
   constructor() {
     super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = m(), this.namedSlot = m(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
   }
@@ -55,7 +56,7 @@ let o = class extends d {
       "pkt-component--has-list": this.strings.length > 0,
       "pkt-darkmode": this.darkmode
     };
-    return P`
+    return l`
       <div class="${u(t)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
@@ -82,9 +83,9 @@ let o = class extends d {
     `;
   }
   renderList(t) {
-    return P`
+    return l`
       <ul>
-        ${t.map((e) => P`<li>${e}</li>`)}
+        ${t.map((e) => l`<li>${e}</li>`)}
       </ul>
     `;
   }
@@ -109,7 +110,7 @@ s([
   n({ type: String })
 ], o.prototype, "string", 2);
 s([
-  n({ converter: f })
+  n({ converter: d })
 ], o.prototype, "strings", 2);
 s([
   n({ type: Boolean })
@@ -121,35 +122,38 @@ o = s([
   c("pkt-component")
 ], o);
 export {
-  I as PktAccordion,
-  w as PktAccordionItem,
+  A as PktAccordion,
+  I as PktAccordionItem,
   T as PktAlert,
-  D as PktBackLink,
-  O as PktButton,
-  j as PktCalendar,
-  G as PktCard,
+  B as PktBackLink,
+  E as PktButton,
+  R as PktCalendar,
+  M as PktCard,
   q as PktCheckbox,
-  K as PktCombobox,
+  U as PktCombobox,
   o as PktComponent,
-  U as PktConsent,
+  N as PktConsent,
   F as PktDateTags,
   J as PktDatepicker,
-  Y as PktHeading,
-  V as PktHelptext,
-  tt as PktIcon,
-  rt as PktInputWrapper,
-  st as PktLink,
-  nt as PktLinkCard,
-  pt as PktLoader,
-  Pt as PktMessagebox,
-  kt as PktModal,
-  dt as PktProgressbar,
-  ct as PktRadioButton,
-  xt as PktRadiobutton,
-  Tt as PktSelect,
-  bt as PktTabItem,
-  St as PktTabs,
-  gt as PktTag,
-  $t as PktTextarea,
-  _t as PktTextinput
+  V as PktHeader,
+  X as PktHeaderService,
+  Y as PktHeaderUserMenu,
+  rt as PktHeading,
+  tt as PktHelptext,
+  st as PktIcon,
+  nt as PktInputWrapper,
+  pt as PktLink,
+  lt as PktLinkCard,
+  kt as PktLoader,
+  ft as PktMessagebox,
+  ct as PktModal,
+  ut as PktProgressbar,
+  vt as PktRadioButton,
+  bt as PktRadiobutton,
+  wt as PktSelect,
+  yt as PktTabItem,
+  _t as PktTabs,
+  Ct as PktTag,
+  Tt as PktTextarea,
+  At as PktTextinput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.22.0",
+  "version": "14.0.1",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -41,8 +41,8 @@
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
-    "@oslokommune/punkt-assets": "^13.16.0",
-    "@oslokommune/punkt-css": "^13.22.0",
+    "@oslokommune/punkt-assets": "^14.0.0",
+    "@oslokommune/punkt-css": "^14.0.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
@@ -79,5 +79,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "ac304ed1adafb9567490e5b9a8d550712f4e68f1"
+  "gitHead": "6bc7e06b1757136f9460e4f4e0ea1a4df772cd1f"
 }

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

@@ -0,0 +1,404 @@
+import '@testing-library/jest-dom'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import './header-service'
+
+// Nested components are imported by header-service itself, but we need to wait for them
+const waitForNestedElements = async () => {
+  await Promise.all([
+    customElements.whenDefined('pkt-button'),
+    customElements.whenDefined('pkt-icon'),
+    customElements.whenDefined('pkt-link'),
+    customElements.whenDefined('pkt-textinput'),
+    customElements.whenDefined('pkt-header-user-menu'),
+  ])
+}
+
+export interface HeaderServiceTestConfig extends BaseTestConfig {
+  'service-name'?: string
+  'service-link'?: string
+  'logo-link'?: string
+  compact?: boolean
+  'hide-logo'?: boolean
+  position?: 'fixed' | 'relative'
+  'scroll-behavior'?: 'hide' | 'none'
+  'show-search'?: boolean
+  'search-placeholder'?: string
+  'search-value'?: string
+  'log-out-button-placement'?: 'userMenu' | 'header' | 'both' | 'none'
+  'can-change-representation'?: boolean
+  'opened-menu'?: 'none' | 'slot' | 'search' | 'user'
+  'mobile-breakpoint'?: number
+  'tablet-breakpoint'?: number
+}
+
+const createHeaderServiceTest = async (config: HeaderServiceTestConfig = {}) => {
+  const result = await createElementTest<
+    CustomElementFor<'pkt-header-service'>,
+    HeaderServiceTestConfig
+  >('pkt-header-service', config)
+  await waitForNestedElements()
+  await result.element.updateComplete
+  return result
+}
+
+describe('pkt-header-service', () => {
+  beforeEach(() => {
+    // Mock window.matchMedia for responsive behavior
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    })
+
+    // Mock ResizeObserver
+    global.ResizeObserver = class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+
+    // Mock scrollTo
+    window.scrollTo = vi.fn()
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  describe('basic rendering', () => {
+    it('renders with service name', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'My Service' })
+      const serviceName = element.querySelector('.pkt-header-service__service-name')
+      expect(serviceName).toBeTruthy()
+      expect(serviceName?.textContent).toContain('My Service')
+    })
+
+    it('applies compact class when compact attribute is set', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc', compact: true })
+      const header = element.querySelector('.pkt-header-service')
+      expect(header?.classList.contains('pkt-header-service--compact')).toBe(true)
+    })
+
+    it('shows logo by default', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      const logo = element.querySelector('.pkt-header-service__logo')
+      expect(logo).toBeTruthy()
+    })
+
+    it('hides logo when hide-logo attribute is set', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'hide-logo': true,
+      })
+      const logo = element.querySelector('.pkt-header-service__logo')
+      expect(logo).toBeNull()
+    })
+  })
+
+  describe('logoLink attribute', () => {
+    it('renders logo as link when logo-link is provided', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'logo-link': 'https://oslo.kommune.no',
+      })
+      const logoLink = element.querySelector('.pkt-header-service__logo a')
+      expect(logoLink).toBeTruthy()
+      expect(logoLink?.getAttribute('href')).toBe('https://oslo.kommune.no')
+    })
+
+    it('dispatches logo-click event when logo button is clicked', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+
+      const eventSpy = vi.fn()
+      element.addEventListener('logo-click', eventSpy)
+
+      const logoButton = element.querySelector('.pkt-header-service__logo button')
+
+      if (logoButton) {
+        logoButton.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }))
+        expect(eventSpy).toHaveBeenCalled()
+      }
+    })
+
+    it('renders logo without link when logo-link is not provided', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      const logoLink = element.querySelector('.pkt-header-service__logo a')
+      expect(logoLink).toBeNull()
+    })
+  })
+
+  describe('serviceLink and service-click event', () => {
+    it('renders service name as link when service-link is provided', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'My Service',
+        'service-link': 'https://example.com',
+      })
+      // Check that serviceLink property is set correctly
+      expect(element.serviceLink).toBe('https://example.com')
+      // Check that pkt-link element exists (may not fully render in test env)
+      const linkElement = element.querySelector('pkt-link')
+      expect(linkElement).toBeTruthy()
+    })
+
+    it('dispatches service-click event when service button is clicked', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'My Service' })
+
+      const eventSpy = vi.fn()
+      element.addEventListener('service-click', eventSpy)
+
+      const serviceButton = element.querySelector('button.pkt-header-service__service-link')
+
+      if (serviceButton) {
+        serviceButton.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }))
+        expect(eventSpy).toHaveBeenCalled()
+      }
+    })
+
+    it('renders service name as span when service-link is not provided', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'My Service' })
+      const span = element.querySelector('span.pkt-header-service__service-link')
+      expect(span).toBeTruthy()
+    })
+  })
+
+  describe('position and scrollBehavior attributes', () => {
+    it('applies fixed class by default (position="fixed")', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      const header = element.querySelector('.pkt-header-service')
+      expect(header?.classList.contains('pkt-header-service--fixed')).toBe(true)
+    })
+
+    it('does not apply fixed class when position="relative"', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        position: 'relative',
+      })
+      const header = element.querySelector('.pkt-header-service')
+      expect(header?.classList.contains('pkt-header-service--fixed')).toBe(false)
+    })
+
+    it('applies scroll-to-hide class by default (scroll-behavior="hide")', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      const header = element.querySelector('.pkt-header-service')
+      expect(header?.classList.contains('pkt-header-service--scroll-to-hide')).toBe(true)
+    })
+
+    it('does not apply scroll-to-hide class when scroll-behavior="none"', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'scroll-behavior': 'none',
+      })
+      const header = element.querySelector('.pkt-header-service')
+      expect(header?.classList.contains('pkt-header-service--scroll-to-hide')).toBe(false)
+    })
+  })
+
+  describe('search functionality', () => {
+    it('does not render search input by default', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      const search = element.querySelector('.pkt-header-service__search-input')
+      expect(search).toBeNull()
+    })
+
+    it('renders search container when show-search is true', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'show-search': true,
+      })
+      const searchContainer = element.querySelector('.pkt-header-service__search-container')
+      expect(searchContainer).toBeTruthy()
+    })
+
+    it('dispatches search event when Enter is pressed in search input', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'show-search': true,
+      })
+
+      const eventSpy = vi.fn()
+      element.addEventListener('search', eventSpy)
+
+      const searchInput = element.querySelector(
+        '.pkt-header-service__search-input input',
+      ) as HTMLInputElement
+      if (searchInput) {
+        searchInput.value = 'test query'
+        searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+        await element.updateComplete
+        expect(eventSpy).toHaveBeenCalled()
+      }
+    })
+
+    it('dispatches search-change event when search input value changes', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'show-search': true,
+      })
+
+      const eventSpy = vi.fn()
+      element.addEventListener('search-change', eventSpy)
+
+      const searchInput = element.querySelector(
+        '.pkt-header-service__search-input input',
+      ) as HTMLInputElement
+      if (searchInput) {
+        searchInput.value = 'test'
+        searchInput.dispatchEvent(new Event('input', { bubbles: true }))
+        await element.updateComplete
+        expect(eventSpy).toHaveBeenCalled()
+      }
+    })
+  })
+
+  describe('user menu', () => {
+    it('renders user container when user is provided', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      element.user = { name: 'Aksel Olsen' }
+      await element.updateComplete
+
+      // Check that user container exists
+      const userContainer = element.querySelector('.pkt-header-service__user-container')
+      expect(userContainer).toBeTruthy()
+      // Check that user property is passed correctly
+      expect(element.user.name).toBe('Aksel Olsen')
+    })
+
+    it('passes user data to user menu component', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      element.user = { name: 'Aksel Olsen' }
+      await element.updateComplete
+
+      // Verify user property is set
+      expect(element.user).toEqual({ name: 'Aksel Olsen' })
+    })
+
+    it('passes representing data to user menu component', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      element.user = { name: 'Aksel' }
+      element.representing = { name: 'Oslo Kommune' }
+      await element.updateComplete
+
+      // Verify representing property is set
+      expect(element.representing).toEqual({ name: 'Oslo Kommune' })
+    })
+
+    it('passes canChangeRepresentation prop when set', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'can-change-representation': true,
+      })
+      element.user = { name: 'Aksel' }
+      element.representing = { name: 'Oslo Kommune' }
+      await element.updateComplete
+
+      // Verify canChangeRepresentation property is set
+      expect(element.canChangeRepresentation).toBe(true)
+    })
+  })
+
+  describe('logout button placement', () => {
+    it('shows logout button in user area when log-out-button-placement="header"', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'log-out-button-placement': 'header',
+      })
+      element.user = { name: 'Aksel' }
+      await element.updateComplete
+
+      const userArea = element.querySelector('.pkt-header-service__user')
+      const logoutBtn = userArea?.querySelector('pkt-button')
+      expect(logoutBtn).toBeTruthy()
+    })
+
+    it('sets up logout button with correct properties', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'log-out-button-placement': 'header',
+      })
+      element.user = { name: 'Aksel' }
+      await element.updateComplete
+
+      // Verify logOutButtonPlacement property is set
+      expect(element.logOutButtonPlacement).toBe('header')
+      // Verify logout button component exists in DOM
+      const logoutBtn = element.querySelector('.pkt-header-service__user pkt-button')
+      expect(logoutBtn).toBeTruthy()
+    })
+
+    it('does not show logout button in header areas when log-out-button-placement="userMenu"', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'log-out-button-placement': 'userMenu',
+      })
+      element.user = { name: 'Aksel' }
+      await element.updateComplete
+
+      // Logout should not be in header areas
+      const userArea = element.querySelector('.pkt-header-service__user')
+      const contentArea = element.querySelector('.pkt-header-service__content')
+      const userAreaLogout = userArea?.querySelectorAll('pkt-button[icon-name="exit"]')
+      const contentAreaLogout = contentArea?.querySelectorAll('pkt-button[icon-name="exit"]')
+
+      expect(userAreaLogout?.length || 0).toBe(0)
+      expect(contentAreaLogout?.length || 0).toBe(0)
+    })
+  })
+
+  describe('user menu items', () => {
+    it('passes user menu items to user menu component', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      element.user = { name: 'Aksel' }
+      element.userMenu = [
+        { title: 'Mine bookinger', iconName: 'heart', target: '/bookinger' },
+        { title: 'Innstillinger', iconName: 'cogwheel', target: () => {} },
+      ]
+      await element.updateComplete
+
+      // Verify userMenu property is set correctly
+      expect(element.userMenu).toHaveLength(2)
+      expect(element.userMenu[0].title).toBe('Mine bookinger')
+      expect(element.userMenu[1].title).toBe('Innstillinger')
+    })
+  })
+
+  describe('events', () => {
+    it('dispatches change-representation event when change button is clicked', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'can-change-representation': true,
+      })
+      element.user = { name: 'Aksel' }
+      element.representing = { name: 'Oslo Kommune' }
+      await element.updateComplete
+
+      const eventSpy = vi.fn()
+      element.addEventListener('change-representation', eventSpy)
+
+      // Open user menu and click change button
+      const userButton = element.querySelector('.pkt-user-menu__button') as HTMLElement
+      userButton?.click()
+      await element.updateComplete
+
+      const allButtons = element.querySelectorAll('button')
+      const changeButton = Array.from(allButtons || []).find((btn) =>
+        btn.textContent?.includes('Endre organisasjon'),
+      )
+
+      if (changeButton) {
+        changeButton.click()
+        await element.updateComplete
+        expect(eventSpy).toHaveBeenCalled()
+      }
+    })
+  })
+})