@oslokommune/punkt-elements 16.26.7 → 17.0.2

package/src/components/header/types.ts

@@ -12,6 +12,9 @@ import type {
   TLogOutButtonPlacement,
   THeaderPosition,
   THeaderScrollBehavior,
+  THeaderFooterApi,
+  THeaderMenuLocale,
+  IPktHeaderGlobal as ISharedPktHeaderGlobal,
 } from 'shared-types'
 
 export type {
@@ -21,7 +24,15 @@ export type {
   TLogOutButtonPlacement,
   THeaderPosition,
   THeaderScrollBehavior,
+  THeaderFooterApi,
+  THeaderMenuLocale,
 }
+
+/** Which header variant `<pkt-header>` renders. */
+export type THeaderType = 'service' | 'global'
+
+/** Which dropdown/overlay is open in the global header. */
+export type TGlobalHeaderMenu = 'none' | 'menu' | 'user' | 'search'
 export { booleanishConverter }
 
 // Re-export with PktIconName typing
@@ -85,4 +96,31 @@ export interface IPktHeader {
   slotMenuVariant?: TSlotMenuVariant
   /** Text for the slot menu button. Default: 'Meny' */
   slotMenuText?: string
+  /** Which header variant to render. Default: 'service' */
+  type?: THeaderType
+}
+
+/**
+ * Interface for the global (kommune-wide) Header element props.
+ *
+ * Extends the framework-agnostic {@link ISharedPktHeaderGlobal} base
+ * (in shared-types), narrowing boolean fields to `Booleanish`, typing
+ * `userMenu` icons as `PktIconName`, and adding the Lit-only `hasLogOut`
+ * signal.
+ */
+export interface IPktHeaderGlobal
+  extends Omit<
+    ISharedPktHeaderGlobal,
+    'showSearch' | 'showContact' | 'canChangeRepresentation' | 'userMenu'
+  > {
+  /** Show the search field. Default: true */
+  showSearch?: Booleanish
+  /** Show the contact link (from the payload's `header.contact`). Default: true */
+  showContact?: Booleanish
+  /** Allow the user to change representation. */
+  canChangeRepresentation?: Booleanish
+  /** User menu items. */
+  userMenu?: UserMenuItem[]
+  /** Whether a logout handler is attached (required for the logout button to show). */
+  hasLogOut?: Booleanish
 }

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

@@ -8,12 +8,16 @@ import './header-menu'
 import { PktHeaderMenu } from './header-menu'
 import {
   deriveSocialIcon,
+  fetchHeaderFooterData,
+  getExternalDomainLabel,
+  getLinkDomainLabel,
   ICON_MAP_ODS_TO_PUNKT,
   mapOdsIcon,
+  resetHeaderFooterDataCache,
   selectLocaleData,
   selectMegamenu,
-} from 'shared-utils/header-menu'
-import type { THeaderFooterApi } from 'shared-types/header-menu'
+} from 'shared-utils/header-footer'
+import type { THeaderFooterApi } from 'shared-types/header-footer'
 
 const LOCAL_DATA: THeaderFooterApi = {
   'nb-NO': {
@@ -130,9 +134,9 @@ describe('shared-utils: icon-map', () => {
   })
 
   test('deriveSocialIcon ignores localized text when URL resolves', () => {
-    expect(
-      deriveSocialIcon('https://www.facebook.com/Oslo/', 'Følg oss på Facebook'),
-    ).toBe('facebook')
+    expect(deriveSocialIcon('https://www.facebook.com/Oslo/', 'Følg oss på Facebook')).toBe(
+      'facebook',
+    )
   })
 
   test('deriveSocialIcon falls back to text when the URL is unknown or invalid', () => {
@@ -170,6 +174,127 @@ describe('shared-utils: select-megamenu', () => {
   })
 })
 
+describe('shared-utils: external-domain', () => {
+  test('returns the top domain for hosts outside oslo.kommune.no', () => {
+    expect(
+      getExternalDomainLabel(
+        'https://candidate.webcruiter.com/nb-no/home/companyadverts?companylock=2180#search',
+      ),
+    ).toBe('webcruiter.com')
+    expect(getExternalDomainLabel('https://www.facebook.com/Oslo/')).toBe('facebook.com')
+  })
+
+  test('handles two-part TLDs', () => {
+    expect(getExternalDomainLabel('https://news.bbc.co.uk/article')).toBe('bbc.co.uk')
+  })
+
+  test('returns undefined for oslo.kommune.no and subdomains', () => {
+    expect(getExternalDomainLabel('https://www.oslo.kommune.no/kontakt/')).toBeUndefined()
+    expect(getExternalDomainLabel('https://oslo.kommune.no/')).toBeUndefined()
+    expect(getExternalDomainLabel('https://tjenester.oslo.kommune.no/booking')).toBeUndefined()
+  })
+
+  test('returns undefined for relative URLs, fragments, and non-http schemes', () => {
+    expect(getExternalDomainLabel('/jobb-i-oslo-kommune/')).toBeUndefined()
+    expect(getExternalDomainLabel('#cb-trigger')).toBeUndefined()
+    expect(getExternalDomainLabel('mailto:postmottak@oslo.kommune.no')).toBeUndefined()
+    expect(getExternalDomainLabel('tel:+4721802180')).toBeUndefined()
+    expect(getExternalDomainLabel('')).toBeUndefined()
+    expect(getExternalDomainLabel(undefined)).toBeUndefined()
+  })
+
+  test('honors a custom internal host', () => {
+    expect(
+      getExternalDomainLabel('https://intranett.example.no/side', 'example.no'),
+    ).toBeUndefined()
+    expect(getExternalDomainLabel('https://www.oslo.kommune.no/', 'example.no')).toBe('oslo.kommune.no')
+  })
+
+  test('getLinkDomainLabel skips the internal-host check (explicit external flag)', () => {
+    expect(getLinkDomainLabel('https://www.oslo.kommune.no/kontakt/')).toBe('oslo.kommune.no')
+    expect(getLinkDomainLabel('https://example.test/side')).toBe('example.test')
+    expect(getLinkDomainLabel('/relativ')).toBeUndefined()
+    expect(getLinkDomainLabel('mailto:foo@example.test')).toBeUndefined()
+  })
+})
+
+describe('shared-utils: fetchHeaderFooterData dedup', () => {
+  const PAYLOAD_URL = 'https://dedup.test/payload.json'
+
+  const mockFetchOk = () =>
+    vi.spyOn(globalThis, 'fetch').mockImplementation(() =>
+      Promise.resolve(
+        new Response(JSON.stringify(LOCAL_DATA), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      ),
+    )
+
+  beforeEach(() => {
+    resetHeaderFooterDataCache()
+  })
+
+  test('concurrent calls for the same URL share one request', async () => {
+    const fetchSpy = mockFetchOk()
+    const [a, b] = await Promise.all([
+      fetchHeaderFooterData(PAYLOAD_URL),
+      fetchHeaderFooterData(PAYLOAD_URL),
+    ])
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+    expect(a).toEqual(LOCAL_DATA)
+    expect(b).toEqual(LOCAL_DATA)
+  })
+
+  test('successful payloads stay cached for later calls', async () => {
+    const fetchSpy = mockFetchOk()
+    await fetchHeaderFooterData(PAYLOAD_URL)
+    await fetchHeaderFooterData(PAYLOAD_URL)
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('different URLs fetch independently', async () => {
+    const fetchSpy = mockFetchOk()
+    await Promise.all([
+      fetchHeaderFooterData(PAYLOAD_URL),
+      fetchHeaderFooterData('https://dedup.test/other.json'),
+    ])
+    expect(fetchSpy).toHaveBeenCalledTimes(2)
+  })
+
+  test('failed fetches are evicted so a retry hits the network', async () => {
+    const fetchSpy = vi
+      .spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(new Response('boom', { status: 500 }))
+      .mockResolvedValueOnce(
+        new Response(JSON.stringify(LOCAL_DATA), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      )
+    await expect(fetchHeaderFooterData(PAYLOAD_URL)).rejects.toThrow('HTTP 500')
+    await expect(fetchHeaderFooterData(PAYLOAD_URL)).resolves.toEqual(LOCAL_DATA)
+    expect(fetchSpy).toHaveBeenCalledTimes(2)
+  })
+
+  test('aborting one caller does not cancel the shared request', async () => {
+    mockFetchOk()
+    const controller = new AbortController()
+    const aborted = fetchHeaderFooterData(PAYLOAD_URL, controller.signal)
+    const kept = fetchHeaderFooterData(PAYLOAD_URL)
+    controller.abort()
+    await expect(aborted).rejects.toThrow()
+    await expect(kept).resolves.toEqual(LOCAL_DATA)
+  })
+
+  test('rejects immediately when the signal is already aborted', async () => {
+    mockFetchOk()
+    const controller = new AbortController()
+    controller.abort()
+    await expect(fetchHeaderFooterData(PAYLOAD_URL, controller.signal)).rejects.toThrow()
+  })
+})
+
 describe('PktHeaderMenu rendering', () => {
   test('renders services, sections, and footer when given pre-fetched data', async () => {
     const el = await mountWithData()
@@ -268,7 +393,6 @@ describe('PktHeaderMenu fetching', () => {
     await el.updateComplete
     expect(globalThis.fetch).toHaveBeenCalledWith(
       'https://cdn.web.oslo.kommune.no/header-footer/header-footer.json',
-      expect.any(Object),
     )
     expect(el.querySelector('.pkt-header-menu__services-title')?.textContent).toContain(
       'Tjenester og tilbud',
@@ -281,10 +405,7 @@ describe('PktHeaderMenu fetching', () => {
     document.body.appendChild(el)
     await waitForReady()
     await new Promise((resolve) => setTimeout(resolve, 0))
-    expect(globalThis.fetch).toHaveBeenCalledWith(
-      'https://custom.test/payload.json',
-      expect.any(Object),
-    )
+    expect(globalThis.fetch).toHaveBeenCalledWith('https://custom.test/payload.json')
   })
 
   test('emits data-error when the fetch fails', async () => {

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

@@ -9,7 +9,7 @@ import {
   fetchHeaderFooterData,
   mapOdsIcon,
   selectLocaleData,
-} from 'shared-utils/header-menu'
+} from 'shared-utils/header-footer'
 import type {
   IHeaderFooterLocaleData,
   IHeaderMenuButton,
@@ -39,9 +39,6 @@ export class PktHeaderMenu extends PktElement<IPktHeaderMenu> implements IPktHea
   @property({ type: Boolean, reflect: true, converter: booleanishConverter })
   open: Booleanish = false
 
-  @property({ type: String, attribute: 'aria-labelledby', reflect: true })
-  ariaLabelledBy: string = ''
-
   @property({ type: Number, attribute: 'mobile-breakpoint' })
   mobileBreakpoint: number = 768
 
@@ -50,13 +47,14 @@ export class PktHeaderMenu extends PktElement<IPktHeaderMenu> implements IPktHea
   @state() private isMobile = false
 
   private abortController?: AbortController
-  private mediaQuery?: MediaQueryList
+  private menuWidth = 0
+  private resizeObserver?: ResizeObserver
 
   override connectedCallback(): void {
     super.connectedCallback()
     this.classList.add('pkt-header-menu')
     this.updateOpenClass()
-    this.setupMediaQuery()
+    this.observeWidth()
     if (!this.data) {
       void this.loadData()
     } else {
@@ -78,7 +76,8 @@ export class PktHeaderMenu extends PktElement<IPktHeaderMenu> implements IPktHea
   override disconnectedCallback(): void {
     super.disconnectedCallback()
     this.abortController?.abort()
-    this.teardownMediaQuery()
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = undefined
   }
 
   override updated(changedProperties: PropertyValues): void {
@@ -92,12 +91,9 @@ export class PktHeaderMenu extends PktElement<IPktHeaderMenu> implements IPktHea
       changedProperties.has('mobileBreakpoint') &&
       changedProperties.get('mobileBreakpoint') !== undefined
     ) {
-      this.setupMediaQuery()
+      this.refreshIsMobile()
     }
 
-    // Re-fetch only when dataUrl genuinely changes after first load.
-    // The initial fetch is kicked off from connectedCallback, so we
-    // skip the noop "field default" change that fires on first update.
     if (
       changedProperties.has('dataUrl') &&
       changedProperties.get('dataUrl') !== undefined &&
@@ -118,21 +114,24 @@ export class PktHeaderMenu extends PktElement<IPktHeaderMenu> implements IPktHea
     }
   }
 
-  private setupMediaQuery() {
-    this.teardownMediaQuery()
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
-    this.mediaQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`)
-    this.isMobile = this.mediaQuery.matches
-    this.mediaQuery.addEventListener('change', this.handleMediaChange)
-  }
-
-  private teardownMediaQuery() {
-    this.mediaQuery?.removeEventListener('change', this.handleMediaChange)
-    this.mediaQuery = undefined
+  private observeWidth() {
+    if (typeof ResizeObserver === 'undefined') return
+    this.menuWidth = this.offsetWidth
+    this.refreshIsMobile()
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.menuWidth =
+          entry.borderBoxSize && entry.borderBoxSize.length > 0
+            ? entry.borderBoxSize[0].inlineSize
+            : entry.contentRect.width
+        this.refreshIsMobile()
+      }
+    })
+    this.resizeObserver.observe(this)
   }
 
-  private handleMediaChange = (event: MediaQueryListEvent) => {
-    this.isMobile = event.matches
+  private refreshIsMobile() {
+    this.isMobile = this.menuWidth < this.mobileBreakpoint
   }
 
   private async loadData() {

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

@@ -10,7 +10,7 @@ import type {
   IPktHeaderMenu as ISharedPktHeaderMenu,
   THeaderFooterApi,
   THeaderMenuLocale,
-} from 'shared-types/header-menu'
+} from 'shared-types/header-footer'
 import type { Booleanish } from 'shared-types'
 
 export type {

package/src/components/index.ts

@@ -12,7 +12,13 @@ export { PktCheckbox } from '@/components/checkbox'
 export { PktFileUpload } from '@/components/fileupload'
 export { PktDateTags } from '@/components/datepicker/date-tags.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
-export { PktHeader, PktHeaderService, PktHeaderUserMenu } from '@/components/header'
+export { PktFooter, PktFooterSimple } from '@/components/footer'
+export {
+  PktHeader,
+  PktHeaderService,
+  PktHeaderGlobal,
+  PktHeaderUserMenu,
+} from '@/components/header'
 export { PktHeaderMenu } from '@/components/header-menu'
 export { PktHelptext } from '@/components/helptext'
 export { PktHeading } from '@/components/heading'
@@ -58,7 +64,10 @@ export type {
   THeaderPosition,
   THeaderScrollBehavior,
   TSlotMenuVariant,
+  THeaderType,
+  TGlobalHeaderMenu,
   IPktHeader,
+  IPktHeaderGlobal,
 } from '@/components/header'
 
 export type { IPktHeaderMenu } from '@/components/header-menu'
@@ -84,7 +93,7 @@ export type { TTagSkin, TTagType } from '@/components/tag'
 
 export type { IPktTabs, IPktTabItem, TSkin as TTabItemSkin } from '@/components/tabs'
 
-export type { TSelectOption } from '@/components/select'
+export type { IPktSelectOption, TSelectOption } from '@/components/select'
 
 export type { IPktBackLink } from '@/components/backlink'
 
@@ -93,6 +102,13 @@ export type { IPktBreadcrumbs, IBreadcrumbItem } from '@/components/breadcrumbs'
 export type { IPktLoader, TPktLoaderVariant } from '@/components/loader'
 
 export type { IPktConsent } from '@/components/consent'
+
+export type {
+  IPktFooter,
+  IPktFooterSimple,
+  IPktFooterColumn,
+  IPktFooterLink,
+} from '@/components/footer'
 export type {
   FileItem,
   IPktFileUpload,

package/src/components/input-wrapper/input-wrapper.test.ts

@@ -31,6 +31,7 @@ export interface InputWrapperTestConfig extends BaseTestConfig {
   requiredText?: string
   tagText?: string
   role?: string
+  size?: 'small' | 'medium' | 'xsmall'
 }
 
 // Use shared framework
@@ -280,6 +281,27 @@ describe('PktInputWrapper', () => {
       const errorMessage = wrapper.querySelector('.pkt-alert--error')
       expect(errorMessage).toBeInTheDocument()
       expect(errorMessage?.textContent).toContain('This field is required')
+      expect(errorMessage).toHaveClass('pkt-alert--small')
+    })
+
+    test('uses xsmall error alert when wrapper size is small or xsmall', async () => {
+      const { wrapper: smallWrapper } = await createInputWrapperTest({
+        label: 'Test Label',
+        hasError: true,
+        errorMessage: 'Required',
+      })
+      smallWrapper.size = 'small'
+      await smallWrapper.updateComplete
+      expect(smallWrapper.querySelector('.pkt-alert--error')).toHaveClass('pkt-alert--xsmall')
+
+      const { wrapper: xsmallWrapper } = await createInputWrapperTest({
+        label: 'Test Label',
+        hasError: true,
+        errorMessage: 'Required',
+      })
+      xsmallWrapper.size = 'xsmall'
+      await xsmallWrapper.updateComplete
+      expect(xsmallWrapper.querySelector('.pkt-alert--error')).toHaveClass('pkt-alert--xsmall')
     })
 
     test('does not display error message when hasError is false', async () => {
@@ -303,6 +325,29 @@ describe('PktInputWrapper', () => {
       const inputWrapper = wrapper.querySelector('.pkt-inputwrapper')
       expect(inputWrapper?.classList.contains('pkt-inputwrapper--error')).toBe(true)
     })
+
+    test('applies small size modifier class', async () => {
+      const { wrapper } = await createInputWrapperTest({
+        label: 'Test Label',
+      })
+      wrapper.size = 'small'
+      await wrapper.updateComplete
+
+      const inputWrapper = wrapper.querySelector('.pkt-inputwrapper')
+      expect(inputWrapper?.classList.contains('pkt-inputwrapper--small')).toBe(true)
+    })
+
+    test('applies xsmall size modifier class', async () => {
+      const { wrapper } = await createInputWrapperTest({
+        label: 'Test Label',
+      })
+      wrapper.size = 'xsmall'
+      await wrapper.updateComplete
+
+      const inputWrapper = wrapper.querySelector('.pkt-inputwrapper')
+      expect(inputWrapper?.classList.contains('pkt-inputwrapper--xsmall')).toBe(true)
+      expect(inputWrapper?.classList.contains('pkt-inputwrapper--small')).toBe(false)
+    })
   })
 
   describe('Fieldset functionality', () => {

package/src/components/input-wrapper/input-wrapper.ts

@@ -15,6 +15,7 @@ import '@/components/icon'
 import '@/components/alert'
 
 type TCounterPosition = 'top' | 'bottom'
+type TInputWrapperSize = 'small' | 'medium' | 'xsmall'
 type Props = ElementProps<
   PktInputWrapper,
   | 'forId'
@@ -69,6 +70,8 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
   @property({ type: String, reflect: true }) role: string | null = 'group'
   @property({ type: Boolean, reflect: true, converter: booleanishConverter })
   useWrapper: Booleanish = specs.props.useWrapper.default
+  @property({ type: String, attribute: 'input-wrapper-size' })
+  size: TInputWrapperSize = 'medium'
 
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties)
@@ -86,6 +89,8 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
       'pkt-inputwrapper--error': this.hasError,
       'pkt-inputwrapper--disabled': this.disabled,
       'pkt-inputwrapper--inline': this.inline,
+      'pkt-inputwrapper--small': this.size === 'small',
+      'pkt-inputwrapper--xsmall': this.size === 'xsmall',
     }
 
     const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
@@ -172,15 +177,18 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
 
     const errorElement = () => {
       if (this.hasError && this.errorMessage) {
-        return html`<pkt-alert
-          skin="error"
-          compact
-          id=${`${this.forId}-error`}
-          aria-live="assertive"
-          aria-atomic="true"
-        >
-          ${unsafeHTML(this.errorMessage)}
-        </pkt-alert>`
+        const errorAlertSize = this.size === 'medium' ? 'small' : 'xsmall'
+        return html`<div class="pkt-inputwrapper__alert-wrapper">
+          <pkt-alert
+            skin="error"
+            .size=${errorAlertSize}
+            id=${`${this.forId}-error`}
+            aria-live="assertive"
+            aria-atomic="true"
+          >
+            ${unsafeHTML(this.errorMessage)}
+          </pkt-alert>
+        </div>`
       } else {
         return nothing
       }

package/src/components/modal/modal.ts

@@ -7,11 +7,10 @@ import { ref } from 'lit/directives/ref.js'
 import { Ref, createRef } from 'lit/directives/ref.js'
 import { TPktSize } from '@/types/size'
 import {
-  acquireModalScrollLock,
-  createModalScrollLockToken,
-  releaseModalScrollLock,
-  type ModalScrollLockToken,
-} from 'shared-utils/modal-scroll-lock'
+  createScrollLockToken,
+  setScrollLock,
+  type ScrollLockToken,
+} from 'shared-utils/scroll-lock'
 import specs from 'componentSpecs/modal.json'
 import '@/components/icon'
 
@@ -46,7 +45,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
 
   dialogRef: Ref<HTMLDialogElement> = createRef()
 
-  private _scrollLockToken: ModalScrollLockToken = createModalScrollLockToken()
+  private _scrollLockToken: ScrollLockToken = createScrollLockToken()
 
   @state() _isOpen: boolean = false
 
@@ -66,7 +65,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     document.removeEventListener('keydown', this.handleKeyDown)
     document.removeEventListener('click', this.handleBackdropClick)
     // Rydd opp scroll-lock hvis elementet fjernes fra DOM mens det er åpent
-    releaseModalScrollLock(this._scrollLockToken)
+    setScrollLock(this._scrollLockToken, false)
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -122,7 +121,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     this._isOpen = false
     this.open = false
 
-    releaseModalScrollLock(this._scrollLockToken)
+    setScrollLock(this._scrollLockToken, false)
 
     // Scroll to the opener element if it's not in the viewport
     const openerElement = document.activeElement as HTMLElement
@@ -143,7 +142,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     this.open = true
     this.dialogRef.value?.showModal()
 
-    acquireModalScrollLock(this._scrollLockToken)
+    setScrollLock(this._scrollLockToken, true)
     this.dispatchEvent(
       new CustomEvent('showModal', { detail: { origin: event }, bubbles: true, composed: true }),
     )

package/src/components/searchinput/searchinput.test.ts

@@ -13,6 +13,7 @@ interface SearchInputTestConfig extends BaseTestConfig {
   id?: string
   name?: string
   appearance?: 'local' | 'local-with-button' | 'global'
+  inputSize?: 'small' | 'medium' | 'xsmall'
   label?: string
   placeholder?: string
   disabled?: boolean
@@ -61,6 +62,20 @@ describe('PktSearchInput', () => {
     })
   })
 
+  describe('aria-label', () => {
+    test('flytter host aria-label til input og fjerner den fra verten', async () => {
+      const el = document.createElement('pkt-searchinput') as CustomElementFor<'pkt-searchinput'>
+      el.id = 'aria-search'
+      el.setAttribute('aria-label', 'Søk i hele nettstedet')
+      document.body.appendChild(el)
+      await el.updateComplete
+
+      expect(el.hasAttribute('aria-label')).toBe(false)
+      const input = el.querySelector('input')
+      expect(input).toHaveAttribute('aria-label', 'Søk i hele nettstedet')
+    })
+  })
+
   describe('label', () => {
     test('renders label when label exists', async () => {
       const { searchinput } = await createSearchInputTest({ label: 'Test Label' })
@@ -134,6 +149,34 @@ describe('PktSearchInput', () => {
       expect(lwb.querySelector('.pkt-searchinput__field')).toBeTruthy()
       expect(lwb.querySelector('.pkt-input__container')).toBeNull()
     })
+
+    test('applies inputSize classes on wrapper, input, button and container', async () => {
+      const { searchinput } = await createSearchInputTest({
+        appearance: 'local-with-button',
+      })
+      searchinput.inputSize = 'small'
+      await searchinput.updateComplete
+
+      const wrapper = searchinput.querySelector('.pkt-searchinput')
+      expect(wrapper?.classList.contains('pkt-searchinput--small')).toBe(true)
+
+      const input = searchinput.querySelector('input')
+      expect(input?.classList.contains('pkt-input--small')).toBe(true)
+
+      const button = searchinput.querySelector('.pkt-searchinput__button')
+      expect(button?.classList.contains('pkt-btn--small')).toBe(true)
+    })
+
+    test('local inputSize applies container modifier', async () => {
+      const { searchinput } = await createSearchInputTest({
+        appearance: 'local',
+      })
+      searchinput.inputSize = 'xsmall'
+      await searchinput.updateComplete
+
+      const container = searchinput.querySelector('.pkt-input__container')
+      expect(container?.classList.contains('pkt-input__container--xsmall')).toBe(true)
+    })
   })
 
   describe('pkt-search', () => {