@oslokommune/punkt-elements 16.26.7 → 17.0.2

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

@@ -0,0 +1,79 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+
+import './header-service'
+import type { PktHeaderService } from './header-service'
+
+expect.extend(toHaveNoViolations)
+
+beforeEach(() => {
+  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(),
+    })),
+  })
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  window.scrollTo = vi.fn()
+})
+
+afterEach(() => {
+  document.body.innerHTML = ''
+  vi.restoreAllMocks()
+})
+
+const mount = async (
+  props: Record<string, unknown> = {},
+  innerHTML = '',
+): Promise<PktHeaderService> => {
+  const el = document.createElement('pkt-header-service') as PktHeaderService
+  el.setAttribute('service-name', 'Min tjeneste')
+  el.position = 'relative'
+  Object.assign(el, props)
+  if (innerHTML) el.innerHTML = innerHTML
+  document.body.appendChild(el)
+  await customElements.whenDefined('pkt-header-service')
+  await el.updateComplete
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await el.updateComplete
+  return el
+}
+
+// offsetWidth is 0 in jsdom. Zero both breakpoints → desktop; zero only the
+// mobile breakpoint (tablet stays positive) → tablet (menu collapses to a button).
+const DESKTOP = { mobileBreakpoint: 0, tabletBreakpoint: 0 }
+const TABLET = { mobileBreakpoint: 0, tabletBreakpoint: 1280 }
+
+describe('pkt-header-service – tilgjengelighet', () => {
+  test('ingen brudd i standardvisning (desktop)', async () => {
+    const el = await mount(DESKTOP, '<a href="#en">Lenke én</a><a href="#to">Lenke to</a>')
+    expect(await axe(el)).toHaveNoViolations()
+  })
+
+  test('ingen brudd med søk og innlogget bruker', async () => {
+    const el = await mount({ ...DESKTOP, showSearch: true, user: { name: 'Aksel Web Opdahl' } })
+    expect(await axe(el)).toHaveNoViolations()
+  })
+
+  test('ingen brudd med åpen brukermeny', async () => {
+    const el = await mount({ ...DESKTOP, user: { name: 'Aksel Web Opdahl' }, openedMenu: 'user' })
+    expect(await axe(el)).toHaveNoViolations()
+  })
+
+  test('ingen brudd i nettbrettvisning med åpen meny', async () => {
+    const el = await mount({ ...TABLET, openedMenu: 'slot' }, '<a href="#en">Lenke én</a>')
+    expect(await axe(el)).toHaveNoViolations()
+  })
+})

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

@@ -21,7 +21,7 @@ export interface HeaderServiceTestConfig extends BaseTestConfig {
   'logo-link'?: string
   compact?: boolean
   'hide-logo'?: boolean
-  position?: 'fixed' | 'relative'
+  position?: 'fixed' | 'sticky' | 'relative'
   'scroll-behavior'?: 'hide' | 'none'
   'show-search'?: boolean
   'search-placeholder'?: string
@@ -109,31 +109,38 @@ describe('pkt-header-service', () => {
     it('renders logo as link when logo-link is provided', async () => {
       const { element } = await createHeaderServiceTest({
         'service-name': 'Svc',
-        'logo-link': 'https://oslo.kommune.no',
+        'logo-link': 'https://www.oslo.kommune.no',
       })
       const logoLink = element.querySelector('.pkt-header-service__logo a')
       expect(logoLink).toBeTruthy()
-      expect(logoLink?.getAttribute('href')).toBe('https://oslo.kommune.no')
+      expect(logoLink?.getAttribute('href')).toBe('https://www.oslo.kommune.no')
     })
 
-    it('dispatches logo-click event when logo button is clicked', async () => {
+    it('sender logo-click-event når logoen klikkes', async () => {
       const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
 
+      // preventDefault - jsdom kan ikke navigere
       const eventSpy = vi.fn()
-      element.addEventListener('logo-click', eventSpy)
+      element.addEventListener('logo-click', (e: Event) => {
+        ;(e as CustomEvent<{ originalEvent: Event }>).detail.originalEvent.preventDefault()
+        eventSpy(e)
+      })
 
-      const logoButton = element.querySelector('.pkt-header-service__logo button')
+      const logoLink = element.querySelector('.pkt-header-service__logo a')
+      expect(logoLink).toBeTruthy()
+      logoLink!.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, composed: true, cancelable: true }),
+      )
 
-      if (logoButton) {
-        logoButton.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }))
-        expect(eventSpy).toHaveBeenCalled()
-      }
+      expect(eventSpy).toHaveBeenCalledTimes(1)
+      expect(eventSpy.mock.calls[0][0].detail.originalEvent).toBeInstanceOf(MouseEvent)
     })
 
-    it('renders logo without link when logo-link is not provided', async () => {
+    it('lenker logoen til www.oslo.kommune.no som standard når logo-link ikke er oppgitt', async () => {
       const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
       const logoLink = element.querySelector('.pkt-header-service__logo a')
-      expect(logoLink).toBeNull()
+      expect(logoLink).toBeTruthy()
+      expect(logoLink?.getAttribute('href')).toBe('https://www.oslo.kommune.no')
     })
   })
 
@@ -187,6 +194,19 @@ describe('pkt-header-service', () => {
       expect(header?.classList.contains('pkt-header-service--fixed')).toBe(false)
     })
 
+    it('applies sticky class when position="sticky", without wrapper/spacer', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        position: 'sticky',
+      })
+      const header = element.querySelector('.pkt-header-service')
+      expect(header?.classList.contains('pkt-header-service--sticky')).toBe(true)
+      expect(header?.classList.contains('pkt-header-service--fixed')).toBe(false)
+      // Sticky stays in the document flow — no fixed-position wrapper or spacer.
+      expect(element.querySelector('.pkt-header-service-wrapper')).toBeNull()
+      expect(element.querySelector('.pkt-header-service-spacer')).toBeNull()
+    })
+
     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')

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

@@ -18,6 +18,8 @@ import {
   booleanishConverter,
 } from './types'
 import { formatLastLoggedIn } from './header-utils'
+import { HeaderChromeController } from './header-chrome-controller'
+import { DEFAULT_HEADER_LOGO_LINK } from 'shared-types'
 
 import '@/components/button'
 import '@/components/icon'
@@ -35,7 +37,7 @@ if (typeof window !== 'undefined') {
 export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements IPktHeader {
   @property({ type: String, attribute: 'service-name' }) serviceName?: string
   @property({ type: String, attribute: 'service-link' }) serviceLink?: string
-  @property({ type: String, attribute: 'logo-link' }) logoLink?: string
+  @property({ type: String, attribute: 'logo-link' }) logoLink: string = DEFAULT_HEADER_LOGO_LINK
   @property({ type: String, attribute: 'logo-path' }) logoPath: string | undefined =
     typeof window !== 'undefined' ? window.pktLogoPath : defaultLogoPath
   @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder = 'Søk'
@@ -70,11 +72,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
   @property({ type: Array, attribute: 'user-menu' }) userMenu?: UserMenuItem[]
   @property({ type: Object }) representing?: Representing
 
-  @state() private isMobile = false
-  @state() private isTablet = false
   @state() private openMenu: THeaderMenu = 'none'
-  @state() private isHidden = false
-  @state() private componentWidth = typeof window !== 'undefined' ? window.innerWidth : 0
   @state() private alignSlotRight = false
   @state() private alignSearchRight = false
 
@@ -85,26 +83,26 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
   private slotContentRef: Ref<HTMLElement> = createRef()
   private searchMenuRef: Ref<HTMLElement> = createRef()
 
-  private resizeObserver?: ResizeObserver
-  private lastScrollPosition = 0
-  private savedScrollY = 0
-  private lastFocusedElement: HTMLElement | null = null
-  private shouldRestoreFocus = false
+  // Shared shell logic (breakpoints, scroll-to-hide, scroll lock, focus return).
+  private chrome = new HeaderChromeController(this, () => ({
+    mobileBreakpoint: this.mobileBreakpoint,
+    tabletBreakpoint: this.tabletBreakpoint,
+    position: this.position,
+    scrollBehavior: this.scrollBehavior,
+  }))
 
-  connectedCallback() {
-    super.connectedCallback()
-    this.setupScrollListener()
+  private get isMobile(): boolean {
+    return this.chrome.isMobile
   }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.resizeObserver?.disconnect()
-    window.removeEventListener('scroll', this.handleScroll)
-    this.unlockScroll()
+  private get isTablet(): boolean {
+    return this.chrome.isTablet
+  }
+  private get isHidden(): boolean {
+    return this.chrome.isHidden
   }
 
   firstUpdated() {
-    this.setupResizeObserver()
+    this.chrome.observe(this.headerRef.value)
   }
 
   updated(changedProperties: PropertyValues) {
@@ -115,8 +113,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
     }
 
     if (changedProperties.has('mobileBreakpoint') || changedProperties.has('tabletBreakpoint')) {
-      this.updateIsMobile()
-      this.updateIsTablet()
+      this.chrome.refreshBreakpoints()
     }
 
     if (changedProperties.has('openMenu')) {
@@ -136,106 +133,15 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
       } else if (this.openMenu === 'none' && previousOpenMenu !== 'none') {
         document.removeEventListener('mousedown', this.handleClickOutside)
         document.removeEventListener('keydown', this.handleEscapeKey)
-        this.restoreFocus()
+        this.chrome.restoreFocus()
       }
     }
 
-    if (changedProperties.has('openMenu') || changedProperties.has('isMobile')) {
-      this.updateScrollLock()
-    }
-  }
-
-  private setupResizeObserver() {
-    const headerElement = this.headerRef.value
-    if (!headerElement) return
-
-    this.componentWidth = headerElement.offsetWidth
-    this.updateIsMobile()
-    this.updateIsTablet()
-
-    this.resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
-          this.componentWidth = entry.borderBoxSize[0].inlineSize
-        } else {
-          this.componentWidth = entry.contentRect.width
-        }
-        this.updateIsMobile()
-        this.updateIsTablet()
-      }
-    })
-    this.resizeObserver.observe(headerElement)
-  }
-
-  private updateIsMobile() {
-    this.isMobile = this.componentWidth < this.mobileBreakpoint
-  }
-
-  private updateIsTablet() {
-    this.isTablet = this.componentWidth < this.tabletBreakpoint
-  }
-
-  private updateScrollLock() {
-    const shouldLock = this.position === 'fixed' && this.isMobile && this.openMenu !== 'none'
-    if (shouldLock) {
-      this.lockScroll()
-    } else {
-      this.unlockScroll()
-    }
-  }
-
-  private lockScroll() {
-    const body = document.body
-    const docEl = document.documentElement
-
-    this.savedScrollY = window.scrollY || window.pageYOffset
-
-    const scrollBarWidth = window.innerWidth - docEl.clientWidth
-    if (scrollBarWidth > 0) {
-      body.style.paddingRight = `${scrollBarWidth}px`
-    }
-
-    body.style.position = 'fixed'
-    body.style.top = `-${this.savedScrollY}px`
-    body.style.left = '0'
-    body.style.right = '0'
-    body.style.width = '100%'
-    body.style.overflow = 'hidden'
-
-    docEl.classList.add('is-scroll-locked')
-  }
-
-  private unlockScroll() {
-    const body = document.body
-    const docEl = document.documentElement
-
-    if (!docEl.classList.contains('is-scroll-locked')) return
-
-    body.style.removeProperty('position')
-    body.style.removeProperty('top')
-    body.style.removeProperty('left')
-    body.style.removeProperty('right')
-    body.style.removeProperty('width')
-    body.style.removeProperty('overflow')
-    body.style.removeProperty('padding-right')
-    docEl.classList.remove('is-scroll-locked')
-
-    window.scrollTo({ top: this.savedScrollY })
-  }
-
-  private setupScrollListener() {
-    window.addEventListener('scroll', this.handleScroll)
-  }
-
-  private handleScroll = () => {
-    if (!this.shouldHideOnScroll) return
-
-    const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop
-    if (currentScrollPosition < 0) return
-    if (Math.abs(currentScrollPosition - this.lastScrollPosition) < 60) return
-
-    this.isHidden = currentScrollPosition > this.lastScrollPosition
-    this.lastScrollPosition = currentScrollPosition
+    // Lock background scroll while a menu is open on mobile (recomputed every
+    // update so it also reacts to breakpoint changes from the controller).
+    this.chrome.setScrollLock(
+      (this.isFixed || this.isSticky) && this.isMobile && this.openMenu !== 'none',
+    )
   }
 
   private handleClickOutside = (event: MouseEvent) => {
@@ -307,23 +213,11 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
   private handleEscapeKey = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.openMenu !== 'none') {
       event.preventDefault()
-      this.shouldRestoreFocus = true
+      this.chrome.flagRestoreFocus()
       this.openMenu = 'none'
     }
   }
 
-  private restoreFocus() {
-    if (
-      this.shouldRestoreFocus &&
-      this.lastFocusedElement &&
-      document.contains(this.lastFocusedElement)
-    ) {
-      this.lastFocusedElement.focus()
-    }
-    this.lastFocusedElement = null
-    this.shouldRestoreFocus = false
-  }
-
   private checkDropdownAlignment(mode: 'slot' | 'search') {
     const containerRef = mode === 'slot' ? this.slotContainerRef : this.searchContainerRef
     const dropdownRef = mode === 'slot' ? this.slotContentRef : this.searchMenuRef
@@ -344,8 +238,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
     if (this.openMenu !== 'none') {
       this.openMenu = 'none'
     } else {
-      this.lastFocusedElement = document.activeElement as HTMLElement
-
+      this.chrome.captureFocus()
       this.openMenu = mode
     }
   }
@@ -418,6 +311,10 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
     return this.position === 'fixed'
   }
 
+  private get isSticky(): boolean {
+    return this.position === 'sticky'
+  }
+
   private get shouldHideOnScroll(): boolean {
     return this.scrollBehavior === 'hide'
   }
@@ -443,34 +340,12 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
       <pkt-icon name="oslologo" aria-hidden="true" path=${this.logoPath}></pkt-icon>
     `
 
-    // If logoLink is a non-empty string, render as link
-    if (this.logoLink && typeof this.logoLink === 'string') {
-      return html`
-        <span class="pkt-header-service__logo">
-          <a href=${this.logoLink} aria-label="Tilbake til forside" @click=${this.handleLogoClick}>
-            ${logoIcon}
-          </a>
-        </span>
-      `
-    }
-
-    // If logo-link attribute is present but empty, render as clickable button
-    if (this.hasAttribute('logo-link')) {
-      return html`
-        <span class="pkt-header-service__logo">
-          <button
-            aria-label="Tilbake til forside"
-            class="pkt-link-button pkt-link pkt-header-service__logo-link"
-            @click=${this.handleLogoClick}
-          >
-            ${logoIcon}
-          </button>
-        </span>
-      `
-    }
-
     return html`
-      <span class="pkt-header-service__logo" @click=${this.handleLogoClick}>${logoIcon}</span>
+      <span class="pkt-header-service__logo">
+        <a href=${this.logoLink} aria-label="Tilbake til forside" @click=${this.handleLogoClick}>
+          ${logoIcon}
+        </a>
+      </span>
     `
   }
 
@@ -556,7 +431,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
         <div
           class=${slotContentClasses}
           id="mobile-slot-menu"
-          role=${this.isTablet ? 'menu' : nothing}
+          role=${this.isTablet ? 'group' : nothing}
           aria-label=${this.isTablet ? 'Meny' : nothing}
           @click=${this.handleSlotContentClick}
           ${ref(this.slotContentRef)}
@@ -704,6 +579,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
       'pkt-header-service--mobile': this.isMobile,
       'pkt-header-service--tablet': this.isTablet,
       'pkt-header-service--fixed': this.isFixed,
+      'pkt-header-service--sticky': this.isSticky,
       'pkt-header-service--scroll-to-hide': this.shouldHideOnScroll,
       'pkt-header-service--hidden': this.isHidden,
     })

package/src/components/header/header-user-menu.ts

@@ -80,7 +80,6 @@ export class PktHeaderUserMenu
         <pkt-link
           icon-name=${item.iconName || nothing}
           href=${item.href}
-          aria-hidden="true"
           class="pkt-user-menu__link ${className || ''}"
         >
           ${item.title}

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

@@ -0,0 +1,84 @@
+import '@testing-library/jest-dom'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+
+import './header'
+import type { PktHeader } from './header'
+import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
+
+beforeEach(() => {
+  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(),
+    })),
+  })
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  window.scrollTo = vi.fn()
+})
+
+afterEach(() => {
+  document.body.innerHTML = ''
+  vi.restoreAllMocks()
+})
+
+// Zero breakpoints via attributes (so the wrapper forwards them) → desktop layout
+// with an inline search field.
+const mountGlobal = async (props: Record<string, unknown> = {}): Promise<PktHeader> => {
+  const el = document.createElement('pkt-header') as PktHeader
+  el.type = 'global'
+  el.position = 'relative'
+  el.setAttribute('mobile-breakpoint', '0')
+  el.setAttribute('tablet-breakpoint', '0')
+  el.data = EXAMPLE_HEADER_FOOTER_DATA
+  Object.assign(el, props)
+  document.body.appendChild(el)
+  await customElements.whenDefined('pkt-header')
+  await el.updateComplete
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  const inner = el.querySelector('pkt-header-global') as HTMLElement & { updateComplete: Promise<unknown> }
+  await inner?.updateComplete
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await inner?.updateComplete
+  return el
+}
+
+describe('pkt-header (wrapper) – global', () => {
+  test('søkefeltet henter placeholder og spørringsparametere fra API-dataene', async () => {
+    const el = await mountGlobal()
+    const input = el.querySelector<HTMLInputElement>('input[type="search"]')
+    const form = el.querySelector<HTMLFormElement>('form[role="search"]')
+
+    // Placeholder comes from the API payload, not the wrapper's service default «Søk».
+    expect(input).toHaveAttribute('placeholder', 'Søk i hele nettstedet')
+    expect(input).toHaveAttribute('name', 'q')
+    expect(form).toHaveAttribute('action', 'https://www.oslo.kommune.no/sokeresultat/')
+    expect(form).toHaveAttribute('method', 'get')
+  })
+
+  test('viser søk som standard (showSearch er av i service, på i global)', async () => {
+    const el = await mountGlobal()
+    expect(el.querySelector('input[type="search"]')).toBeInTheDocument()
+  })
+
+  test('eksplisitt search-placeholder overstyrer API-verdien', async () => {
+    const el = await mountGlobal()
+    el.setAttribute('search-placeholder', 'Egendefinert')
+    await el.updateComplete
+    const inner = el.querySelector('pkt-header-global') as HTMLElement & {
+      updateComplete: Promise<unknown>
+    }
+    await inner.updateComplete
+    expect(el.querySelector('input[type="search"]')).toHaveAttribute('placeholder', 'Egendefinert')
+  })
+})

package/src/components/header/header.ts

@@ -12,12 +12,16 @@ import {
   THeaderPosition,
   THeaderScrollBehavior,
   TSlotMenuVariant,
+  THeaderType,
+  THeaderFooterApi,
+  THeaderMenuLocale,
   IPktHeader,
   Booleanish,
   booleanishConverter,
 } from './types'
 
 import './header-service'
+import './header-global'
 
 /**
  * PktHeader - Main header component for Oslo kommune services
@@ -29,9 +33,13 @@ import './header-service'
  * - Responsive mobile menu
  * - Fixed positioning with scroll-to-hide
  *
- * TODO: Add `type` prop to switch between `service` and `global` header types
+ * The `type` prop switches between the `service` header (a customizable
+ * header for a single service, the default) and the `global`
+ * (kommune-wide) header driven by the shared header/footer payload.
  */
 export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHeader {
+  @property({ type: String }) type: THeaderType = 'service'
+
   @property({ type: String, attribute: 'service-name' }) serviceName?: string
   @property({ type: String, attribute: 'service-link' }) serviceLink?: string
   @property({ type: String, attribute: 'logo-link' }) logoLink?: string
@@ -54,7 +62,7 @@ export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHea
   hideLogo: Booleanish = false
   @property({ type: Boolean, converter: booleanishConverter }) compact: Booleanish = false
   @property({ type: Boolean, attribute: 'show-search', converter: booleanishConverter })
-  showSearch: Booleanish = false
+  showSearch?: Booleanish
   @property({
     type: Boolean,
     attribute: 'can-change-representation',
@@ -68,6 +76,13 @@ export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHea
   @property({ type: Array, attribute: 'user-menu' }) userMenu?: UserMenuItem[]
   @property({ type: Object }) representing?: Representing
 
+  // Global header props (type="global")
+  @property({ type: String, attribute: 'data-url' }) dataUrl?: string
+  @property({ type: Object, attribute: false }) data?: THeaderFooterApi
+  @property({ type: String }) locale?: THeaderMenuLocale
+  @property({ type: Boolean, attribute: 'show-contact', converter: booleanishConverter })
+  showContact: Booleanish = true
+
   // Deprecated props - emit warnings
   @property({ type: Array, attribute: 'user-menu-footer' }) userMenuFooter?: UserMenuItem[]
   @property({ type: Array, attribute: 'user-options' }) userOptions?: UserMenuItem[]
@@ -79,11 +94,9 @@ export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHea
 
   private emitDeprecationWarnings() {
     if (this.userMenuFooter !== undefined) {
-      // eslint-disable-next-line no-console -- Deprecation warnings are intentional for library consumers
       console.warn('[PktHeader] userMenuFooter is deprecated. Use userMenu instead.')
     }
     if (this.userOptions !== undefined) {
-      // eslint-disable-next-line no-console -- Deprecation warnings are intentional for library consumers
       console.warn('[PktHeader] userOptions is deprecated. Use userMenu instead.')
     }
   }
@@ -102,7 +115,41 @@ export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHea
     return this.userMenu
   }
 
+  private renderGlobal() {
+    return html`
+      <pkt-header-global
+        data-url=${ifDefined(this.dataUrl)}
+        locale=${ifDefined(this.locale)}
+        logo-link=${ifDefined(this.logoLink)}
+        logo-path=${ifDefined(this.logoPath)}
+        search-placeholder=${ifDefined(
+          this.hasAttribute('search-placeholder') ? this.searchPlaceholder : undefined,
+        )}
+        mobile-breakpoint=${ifDefined(
+          this.hasAttribute('mobile-breakpoint') ? this.mobileBreakpoint : undefined,
+        )}
+        tablet-breakpoint=${ifDefined(
+          this.hasAttribute('tablet-breakpoint') ? this.tabletBreakpoint : undefined,
+        )}
+        log-out-button-placement=${this.logOutButtonPlacement}
+        position=${this.position}
+        scroll-behavior=${this.scrollBehavior}
+        .data=${this.data}
+        .showSearch=${this.showSearch ?? true}
+        .showContact=${this.showContact}
+        .canChangeRepresentation=${this.canChangeRepresentation}
+        .hasLogOut=${this.hasLogOut}
+        .user=${this.user}
+        .userMenu=${this.effectiveUserMenu}
+        .representing=${this.representing}
+      ></pkt-header-global>
+    `
+  }
+
   render() {
+    if (this.type === 'global') {
+      return this.renderGlobal()
+    }
     return html`
       <pkt-header-service
         service-name=${ifDefined(this.serviceName)}
@@ -121,7 +168,7 @@ export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHea
         slot-menu-text=${this.slotMenuText}
         .hideLogo=${this.hideLogo}
         .compact=${this.compact}
-        .showSearch=${this.showSearch}
+        .showSearch=${this.showSearch ?? false}
         .canChangeRepresentation=${this.canChangeRepresentation}
         .hasLogOut=${this.hasLogOut}
         .user=${this.user}

package/src/components/header/index.ts

@@ -1,5 +1,6 @@
 export { PktHeader } from './header'
 export { PktHeaderService } from './header-service'
+export { PktHeaderGlobal } from './header-global'
 export { PktHeaderUserMenu } from './header-user-menu'
 
 export type {
@@ -12,7 +13,12 @@ export type {
   THeaderPosition,
   THeaderScrollBehavior,
   TSlotMenuVariant,
+  THeaderType,
+  TGlobalHeaderMenu,
+  THeaderFooterApi,
+  THeaderMenuLocale,
   IPktHeader,
+  IPktHeaderGlobal,
 } from './types'
 
 export { formatLastLoggedIn } from './header-utils'