@oslokommune/punkt-elements 13.5.3 → 13.5.4

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.5.4](https://github.com/oslokommune/punkt/compare/13.5.3...13.5.4) (2025-09-09)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.5.3](https://github.com/oslokommune/punkt/compare/13.5.2...13.5.3) (2025-09-08)
 
 ### ⚠ BREAKING CHANGES

package/dist/{loader-CHPxY9c6.cjs → loader-DNidjwH-.cjs}

@@ -1,4 +1,9 @@
-"use strict";const t=require("./element-6DBpyGQm.cjs"),d=require("./class-map-BBG2gMX4.cjs"),h=require("./state-DPobt-Yz.cjs"),p=require("./ref-iJtiv3o2.cjs"),u=require("./pkt-slot-controller-BzddBp7z.cjs");require("./icon-B_ryAy4Q.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(r,e,a,o)=>{for(var i=o>1?void 0:o?y(e,a):e,n=r.length-1,l;n>=0;n--)(l=r[n])&&(i=(o?l(e,a,i):l(i))||i);return o&&i&&c(e,a,i),i};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktLoader=class extends t.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this.loadingAnimationPath=window.pktAnimationPath,this._shouldDisplayLoader=!1,this.slotController=new u.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(e){e.has("delay")&&this.setupLoader()}render(){const e=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),a=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return t.x`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${e}>
+"use strict";const t=require("./element-6DBpyGQm.cjs"),d=require("./class-map-BBG2gMX4.cjs"),h=require("./state-DPobt-Yz.cjs"),p=require("./ref-iJtiv3o2.cjs"),u=require("./pkt-slot-controller-BzddBp7z.cjs");require("./icon-B_ryAy4Q.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(r,e,a,o)=>{for(var i=o>1?void 0:o?y(e,a):e,n=r.length-1,l;n>=0;n--)(l=r[n])&&(i=(o?l(e,a,i):l(i))||i);return o&&i&&c(e,a,i),i};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktLoader=class extends t.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this.loadingAnimationPath=window.pktAnimationPath,this._shouldDisplayLoader=!1,this.slotController=new u.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(e){e.has("delay")&&this.setupLoader()}render(){const e=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),a=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return t.x`<div
+      role="status"
+      aria-live="polite"
+      aria-busy=${this.isLoading?"true":"false"}
+      class=${e}
+    >
       ${this.isLoading&&this._shouldDisplayLoader?t.x`<div class="pkt-loader__spinner">
             <pkt-icon
               name=${this.getVariant(this.variant)}

package/dist/{loader-Da4IOk_T.js → loader-h3d-3D7s.js}

@@ -29,7 +29,12 @@ let t = class extends u {
       "pkt-contents": !0,
       "pkt-hide": this.isLoading
     });
-    return d`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${s}>
+    return d`<div
+      role="status"
+      aria-live="polite"
+      aria-busy=${this.isLoading ? "true" : "false"}
+      class=${s}
+    >
       ${this.isLoading && this._shouldDisplayLoader ? d`<div class="pkt-loader__spinner">
             <pkt-icon
               name=${this.getVariant(this.variant)}

package/dist/{messagebox-DwGdcdm7.js → messagebox-C8KQgCl_.js}

@@ -1,4 +1,4 @@
-import { P as b, E as u, x as n, n as p, a as m } from "./element-CgEWt74-.js";
+import { P as b, E as d, x as n, n as a, a as m } from "./element-CgEWt74-.js";
 import { P as h } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as f, n as k } from "./ref-BBYSqgeW.js";
 import { e as _ } from "./class-map-BpTj9gtz.js";
@@ -15,17 +15,17 @@ const x = {
   closable: {
     default: !1
   }
-}, d = {
+}, u = {
   props: x
 };
-var C = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, l, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? y(l, a) : l, r = t.length - 1, c; r >= 0; r--)
-    (c = t[r]) && (s = (i ? c(l, a, s) : c(s)) || s);
-  return i && s && C(l, a, s), s;
+var C = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, l, p, i) => {
+  for (var s = i > 1 ? void 0 : i ? y(l, p) : l, r = t.length - 1, c; r >= 0; r--)
+    (c = t[r]) && (s = (i ? c(l, p, s) : c(s)) || s);
+  return i && s && C(l, p, s), s;
 };
 let e = class extends b {
   constructor() {
-    super(), this.defaultSlot = f(), this.closable = d.props.closable.default, this.compact = d.props.compact.default, this.title = "", this.skin = d.props.skin.default, this._isClosed = !1, this.close = (t) => {
+    super(), this.defaultSlot = f(), this.closable = u.props.closable.default, this.compact = u.props.compact.default, this.title = "", this.skin = u.props.skin.default, this._isClosed = !1, this.close = (t) => {
       this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin: t }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0 }));
     }, this.slotController = new h(this, this.defaultSlot), this._isClosed = !1;
   }
@@ -47,26 +47,27 @@ let e = class extends b {
             <button
               @click=${this.close}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+              aria-label="Lukk"
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
             </button>
-          </div>` : u}
-      ${this.title ? n`<div class="pkt-messagebox__title">${this.title}</div>` : u}
+          </div>` : d}
+      ${this.title ? n`<div class="pkt-messagebox__title">${this.title}</div>` : d}
       <div class="pkt-messagebox__text" ${k(this.defaultSlot)}></div>
     </div>`;
   }
 };
 o([
-  p({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "closable", 2);
 o([
-  p({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "compact", 2);
 o([
-  p({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "title", 2);
 o([
-  p({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "skin", 2);
 o([
   v()

package/dist/{messagebox-CqUBJs_D.cjs → messagebox-CjPtPPrW.cjs}

@@ -3,6 +3,7 @@
             <button
               @click=${this.close}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+              aria-label="Lukk"
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
             </button>

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-JbBNi3qg.cjs"),b=require("./button-B8rdtaHB.cjs"),k=require("./calendar-32W9p9uc.cjs"),m=require("./card-DBlFf1ry.cjs"),g=require("./combobox-DjO0RMUB.cjs"),h=require("./consent-hYeFWNFr.cjs"),f=require("./checkbox-Gn7Wtk9h.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-CmTrG5GE.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-CHPxY9c6.cjs"),_=require("./messagebox-CqUBJs_D.cjs"),A=require("./modal-CRtxhCaP.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-Dkl0KhGW.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 y.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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-JbBNi3qg.cjs"),b=require("./button-B8rdtaHB.cjs"),k=require("./calendar-32W9p9uc.cjs"),m=require("./card-DBlFf1ry.cjs"),g=require("./combobox-DjO0RMUB.cjs"),h=require("./consent-hYeFWNFr.cjs"),f=require("./checkbox-Gn7Wtk9h.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-CmTrG5GE.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-DNidjwH-.cjs"),_=require("./messagebox-CjPtPPrW.cjs"),A=require("./modal-CRtxhCaP.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-Dkl0KhGW.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 y.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="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -19,8 +19,8 @@ import { P as Z } from "./icon-CC1js8eR.js";
 import { P as et } from "./input-wrapper-Dr__Sxql.js";
 import { P as ot } from "./link-AIyVfcyH.js";
 import { P as at } from "./linkcard-9CNlyT0S.js";
-import { P as it } from "./loader-Da4IOk_T.js";
-import { P as lt } from "./messagebox-DwGdcdm7.js";
+import { P as it } from "./loader-h3d-3D7s.js";
+import { P as lt } from "./messagebox-C8KQgCl_.js";
 import { P as mt } from "./modal-Zj8yRX3K.js";
 import { P as ft } from "./progressbar-Dj_mI_A6.js";
 import { P as ht, P as ct } from "./radiobutton-CWxiIVfA.js";

package/dist/pkt-loader.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./loader-CHPxY9c6.cjs"),t=e.PktLoader;Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>e.PktLoader});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./loader-DNidjwH-.cjs"),t=e.PktLoader;Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>e.PktLoader});exports.default=t;

package/dist/pkt-loader.js

@@ -1,4 +1,4 @@
-import { P as a } from "./loader-Da4IOk_T.js";
+import { P as a } from "./loader-h3d-3D7s.js";
 const t = a;
 export {
   a as PktLoader,

package/dist/pkt-messagebox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./messagebox-CqUBJs_D.cjs"),t=e.PktMessagebox;Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>e.PktMessagebox});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./messagebox-CjPtPPrW.cjs"),t=e.PktMessagebox;Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>e.PktMessagebox});exports.default=t;

package/dist/pkt-messagebox.js

@@ -1,4 +1,4 @@
-import { P as s } from "./messagebox-DwGdcdm7.js";
+import { P as s } from "./messagebox-C8KQgCl_.js";
 const a = s;
 export {
   s as PktMessagebox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.3",
+  "version": "13.5.4",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -73,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "6b43945924c71b96b609f1abc7875e139e297233"
+  "gitHead": "aed226fa38fe77f28a9bc5d0380b194f0f90a64a"
 }

package/src/components/listbox/listbox.test.ts

@@ -0,0 +1,225 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import { type IPktListbox } from './listbox'
+import './listbox'
+
+export interface ListboxTestConfig extends Partial<IPktListbox>, BaseTestConfig {
+  label?: string
+  id?: string
+}
+
+// Use shared framework
+export const createListboxTest = async (config: ListboxTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-listbox'>,
+    ListboxTestConfig
+  >('pkt-listbox', { ...config, options: undefined })
+
+  // Set complex properties directly on the element after creation
+  if (config.options) {
+    element.options = config.options
+    await element.updateComplete
+  }
+
+  return {
+    container,
+    listbox: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktListbox', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const { listbox } = await createListboxTest()
+
+      expect(listbox).toBeInTheDocument()
+      expect(listbox).toBeTruthy()
+    })
+
+    test('renders with options', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { listbox } = await createListboxTest({
+        label: 'Test Listbox',
+        options,
+      })
+
+      const listboxElement = listbox.querySelector('.pkt-listbox')
+      expect(listboxElement).toBeInTheDocument()
+
+      const optionElements = listbox.querySelectorAll('.pkt-listbox__option')
+      expect(optionElements).toHaveLength(2)
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const { listbox } = await createListboxTest()
+
+      expect(listbox.isOpen).toBe(false)
+      expect(listbox.disabled).toBe(false)
+      expect(listbox.includeSearch).toBe(false)
+      expect(listbox.isMultiSelect).toBe(false)
+      expect(listbox.allowUserInput).toBe(false)
+      expect(listbox.maxLength).toBe(0)
+    })
+
+    test('sets properties correctly', async () => {
+      const { listbox } = await createListboxTest({
+        isOpen: true,
+        disabled: true,
+        includeSearch: true,
+        isMultiSelect: true,
+      })
+
+      expect(listbox.isOpen).toBe(true)
+      expect(listbox.disabled).toBe(true)
+      expect(listbox.includeSearch).toBe(true)
+      expect(listbox.isMultiSelect).toBe(true)
+    })
+  })
+
+  describe('Option handling', () => {
+    test('renders single select options correctly', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1', selected: true },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { listbox } = await createListboxTest({ options })
+
+      const selectedOption = listbox.querySelector('.pkt-listbox__option--selected')
+      expect(selectedOption).toBeInTheDocument()
+
+      const checkIcon = listbox.querySelector('pkt-icon[name="check-big"]')
+      expect(checkIcon).toBeInTheDocument()
+    })
+
+    test('renders multi-select options with checkboxes', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1', selected: true },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { listbox } = await createListboxTest({
+        isMultiSelect: true,
+        options,
+      })
+
+      const checkboxes = listbox.querySelectorAll('input[type="checkbox"]')
+      expect(checkboxes).toHaveLength(2)
+      expect(checkboxes[0]).toBeChecked()
+      expect(checkboxes[1]).not.toBeChecked()
+    })
+
+    test('handles option click', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { listbox } = await createListboxTest({ options })
+
+      // Listen for the option-toggle event
+      let toggledValue: string | null = null
+      listbox.addEventListener('option-toggle', (e: any) => {
+        toggledValue = e.detail
+      })
+
+      const optionElement = listbox.querySelector('.pkt-listbox__option')
+      fireEvent.click(optionElement!)
+
+      await listbox.updateComplete
+      expect(toggledValue).toBe('option1')
+    })
+  })
+
+  describe('Search functionality', () => {
+    test('renders search when includeSearch is true', async () => {
+      const { listbox } = await createListboxTest({ includeSearch: true })
+
+      const searchInput = listbox.querySelector('[role="searchbox"]')
+      expect(searchInput).toBeInTheDocument()
+    })
+
+    test('filters options based on search', async () => {
+      const options = [
+        { value: 'apple', label: 'Apple' },
+        { value: 'banana', label: 'Banana' },
+      ]
+      const { listbox } = await createListboxTest({
+        includeSearch: true,
+        options,
+      })
+
+      // Set search value and trigger filtering
+      listbox.searchValue = 'app'
+      listbox.filterOptions()
+      await listbox.updateComplete
+
+      // Should filter to only show Apple - check filtered options
+      const visibleOptions = listbox.querySelectorAll('.pkt-listbox__option')
+      expect(visibleOptions).toHaveLength(1)
+      expect(visibleOptions[0].textContent?.trim()).toContain('Apple')
+    })
+  })
+
+  describe('User input functionality', () => {
+    test('renders new option banner when allowUserInput is true', async () => {
+      const { listbox } = await createListboxTest({
+        allowUserInput: true,
+        customUserInput: 'New',
+      })
+
+      const newOptionBanner = listbox.querySelector('.pkt-listbox__banner--new-option')
+      expect(newOptionBanner).toBeInTheDocument()
+      expect(newOptionBanner?.getAttribute('data-value')).toBe('New')
+      // Check that the text contains the basic structure
+      expect(newOptionBanner?.textContent).toMatch(/Legg til.*New/)
+    })
+  })
+
+  describe('Maximum selection', () => {
+    test('shows maximum reached banner', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1', selected: true },
+        { value: 'option2', label: 'Option 2', selected: true },
+      ]
+      const { listbox } = await createListboxTest({
+        isMultiSelect: true,
+        maxLength: 3,
+        options,
+      })
+
+      const banner = listbox.querySelector('.pkt-listbox__banner--maximum-reached')
+      expect(banner).toBeInTheDocument()
+      expect(banner?.textContent).toContain('2 av maks 3')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('basic listbox is accessible', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { container } = await createListboxTest({
+        label: 'Accessible Listbox',
+        options,
+      })
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/loader/loader.test.ts

@@ -0,0 +1,257 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import { type IPktLoader } from './loader'
+import './loader'
+
+export interface LoaderTestConfig extends Partial<IPktLoader>, BaseTestConfig {}
+
+// Use shared framework
+export const createLoaderTest = async (config: LoaderTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-loader'>,
+    LoaderTestConfig
+  >('pkt-loader', { ...config, isLoading: undefined })
+
+  // Set boolean properties directly on the element after creation
+  if (config.isLoading !== undefined) {
+    element.isLoading = config.isLoading
+    await element.updateComplete
+  }
+  if (config.inline !== undefined) {
+    element.inline = config.inline
+    await element.updateComplete
+  }
+
+  return {
+    container,
+    loader: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktLoader', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const { loader } = await createLoaderTest()
+
+      expect(loader).toBeInTheDocument()
+      expect(loader).toBeTruthy()
+    })
+
+    test('renders loading state by default', async () => {
+      const { loader } = await createLoaderTest()
+
+      expect(loader.isLoading).toBe(true)
+      const spinner = loader.querySelector('.pkt-loader__spinner')
+      expect(spinner).toBeInTheDocument()
+    })
+
+    test('renders content when not loading', async () => {
+      const { loader } = await createLoaderTest({
+        content: '<p>Content</p>',
+        isLoading: false,
+      })
+
+      expect(loader.isLoading).toBe(false)
+      const content = loader.querySelector('.pkt-contents')
+      expect(content).toBeInTheDocument()
+      expect(content?.classList.contains('pkt-hide')).toBe(false)
+    })
+
+    test('renders with slot content', async () => {
+      const { loader } = await createLoaderTest({
+        content: '<p>Test content</p>',
+      })
+
+      const content = loader.querySelector('p')
+      expect(content).toBeInTheDocument()
+      expect(content?.textContent).toBe('Test content')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const { loader } = await createLoaderTest()
+
+      expect(loader.isLoading).toBe(true)
+      expect(loader.inline).toBe(false)
+      expect(loader.size).toBe('medium')
+      expect(loader.variant).toBe('shapes')
+      expect(loader.delay).toBe(0)
+    })
+
+    test('sets properties correctly', async () => {
+      const { loader } = await createLoaderTest({
+        size: 'small',
+        variant: 'blue',
+        delay: 100,
+        isLoading: false,
+        inline: true,
+      })
+
+      expect(loader.isLoading).toBe(false)
+      expect(loader.inline).toBe(true)
+      expect(loader.size).toBe('small')
+      expect(loader.variant).toBe('blue')
+      expect(loader.delay).toBe(100)
+    })
+  })
+
+  describe('Size variants', () => {
+    test('applies small size correctly', async () => {
+      const { loader } = await createLoaderTest({ size: 'small' })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--small')).toBe(true)
+    })
+
+    test('applies medium size correctly', async () => {
+      const { loader } = await createLoaderTest({ size: 'medium' })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--medium')).toBe(true)
+    })
+
+    test('applies large size correctly', async () => {
+      const { loader } = await createLoaderTest({ size: 'large' })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--large')).toBe(true)
+    })
+  })
+
+  describe('Loader variants', () => {
+    test('applies shapes variant correctly', async () => {
+      const { loader } = await createLoaderTest({ variant: 'shapes' })
+
+      const icon = loader.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe('loader')
+    })
+
+    test('applies blue variant correctly', async () => {
+      const { loader } = await createLoaderTest({ variant: 'blue' })
+
+      const icon = loader.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe('spinner-blue')
+    })
+
+    test('applies rainbow variant correctly', async () => {
+      const { loader } = await createLoaderTest({ variant: 'rainbow' })
+
+      const icon = loader.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe('spinner')
+    })
+  })
+
+  describe('Inline mode', () => {
+    test('applies box class when inline is false', async () => {
+      const { loader } = await createLoaderTest({ inline: false })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--box')).toBe(true)
+    })
+
+    test('applies inline class when inline is true', async () => {
+      const { loader } = await createLoaderTest({ inline: true })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--inline')).toBe(true)
+    })
+  })
+
+  describe('Message functionality', () => {
+    test('renders message when provided', async () => {
+      const { loader } = await createLoaderTest({ message: 'Loading data...' })
+
+      const message = loader.querySelector('p')
+      expect(message).toBeInTheDocument()
+      expect(message?.textContent).toBe('Loading data...')
+    })
+
+    test('does not render message when not provided', async () => {
+      const { loader } = await createLoaderTest()
+
+      const message = loader.querySelector('p')
+      expect(message).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Delay functionality', () => {
+    test('handles delay correctly', async () => {
+      const { loader } = await createLoaderTest({ delay: 100 })
+
+      // Initially should not show spinner due to delay
+      let spinner = loader.querySelector('.pkt-loader__spinner')
+      expect(spinner).not.toBeInTheDocument()
+
+      // Wait for delay to pass
+      await new Promise((resolve) => setTimeout(resolve, 150))
+      await loader.updateComplete
+
+      // Now spinner should be visible
+      spinner = loader.querySelector('.pkt-loader__spinner')
+      expect(spinner).toBeInTheDocument()
+    }, 300)
+  })
+
+  describe('Content visibility', () => {
+    test('hides content when loading', async () => {
+      const { loader } = await createLoaderTest({
+        isLoading: true,
+        content: '<p>Content</p>',
+      })
+
+      const content = loader.querySelector('.pkt-contents')
+      expect(content?.classList.contains('pkt-hide')).toBe(true)
+    })
+
+    test('shows content when not loading', async () => {
+      const { loader } = await createLoaderTest({
+        isLoading: false,
+        content: '<p>Content</p>',
+      })
+
+      const content = loader.querySelector('.pkt-contents')
+      expect(content?.classList.contains('pkt-hide')).toBe(false)
+    })
+  })
+
+  describe('ARIA and accessibility', () => {
+    test('has correct ARIA attributes', async () => {
+      const { loader } = await createLoaderTest()
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.getAttribute('role')).toBe('status')
+      expect(loaderDiv?.getAttribute('aria-live')).toBe('polite')
+      // Check the aria-busy attribute
+      expect(loaderDiv?.getAttribute('aria-busy')).toBe('true')
+    })
+
+    test('updates aria-busy when loading state changes', async () => {
+      const { loader } = await createLoaderTest({ isLoading: false })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      // Check the aria-busy attribute
+      expect(loaderDiv?.getAttribute('aria-busy')).toBe('false')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('loader is accessible', async () => {
+      const { container } = await createLoaderTest({
+        message: 'Loading content',
+        content: '<p>Content</p>',
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/loader/loader.ts

@@ -94,7 +94,12 @@ export class PktLoader extends PktElement implements IPktLoader {
       'pkt-hide': this.isLoading,
     })
 
-    return html`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${classes}>
+    return html`<div
+      role="status"
+      aria-live="polite"
+      aria-busy=${this.isLoading ? 'true' : 'false'}
+      class=${classes}
+    >
       ${this.isLoading && this._shouldDisplayLoader
         ? html`<div class="pkt-loader__spinner">
             <pkt-icon

package/src/components/messagebox/messagebox.test.ts

@@ -0,0 +1,241 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import { type IPktMessagebox } from './messagebox'
+import './messagebox'
+
+export interface MessageboxTestConfig extends Partial<IPktMessagebox>, BaseTestConfig {}
+
+// Use shared framework
+export const createMessageboxTest = async (config: MessageboxTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-messagebox'>,
+    MessageboxTestConfig
+  >('pkt-messagebox', config)
+
+  return {
+    container,
+    messagebox: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktMessagebox', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const { messagebox } = await createMessageboxTest()
+
+      expect(messagebox).toBeInTheDocument()
+      expect(messagebox).toBeTruthy()
+    })
+
+    test('renders with basic structure', async () => {
+      const { messagebox } = await createMessageboxTest({
+        title: 'Test Title',
+        content: 'Test content',
+      })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv).toBeInTheDocument()
+
+      const title = messagebox.querySelector('.pkt-messagebox__title')
+      expect(title).toBeInTheDocument()
+      expect(title?.textContent).toBe('Test Title')
+
+      const text = messagebox.querySelector('.pkt-messagebox__text')
+      expect(text).toBeInTheDocument()
+    })
+
+    test('renders content correctly', async () => {
+      const { messagebox } = await createMessageboxTest({
+        content: 'This is the message content',
+      })
+
+      const text = messagebox.querySelector('.pkt-messagebox__text')
+      expect(text?.textContent).toContain('This is the message content')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const { messagebox } = await createMessageboxTest()
+
+      expect(messagebox.closable).toBe(false)
+      expect(messagebox.compact).toBe(false)
+      expect(messagebox.title).toBe('')
+      expect(messagebox.skin).toBe('beige')
+    })
+
+    test('sets properties correctly', async () => {
+      const { messagebox } = await createMessageboxTest({
+        closable: true,
+        compact: true,
+        title: 'Custom Title',
+        skin: 'blue',
+      })
+
+      expect(messagebox.closable).toBe(true)
+      expect(messagebox.compact).toBe(true)
+      expect(messagebox.title).toBe('Custom Title')
+      expect(messagebox.skin).toBe('blue')
+    })
+  })
+
+  describe('Skin variants', () => {
+    test('applies beige skin correctly', async () => {
+      const { messagebox } = await createMessageboxTest({ skin: 'beige' })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--beige')).toBe(true)
+    })
+
+    test('applies blue skin correctly', async () => {
+      const { messagebox } = await createMessageboxTest({ skin: 'blue' })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--blue')).toBe(true)
+    })
+
+    test('applies red skin correctly', async () => {
+      const { messagebox } = await createMessageboxTest({ skin: 'red' })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--red')).toBe(true)
+    })
+
+    test('applies green skin correctly', async () => {
+      const { messagebox } = await createMessageboxTest({ skin: 'green' })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--green')).toBe(true)
+    })
+  })
+
+  describe('Compact mode', () => {
+    test('applies compact class when compact is true', async () => {
+      const { messagebox } = await createMessageboxTest({ compact: true })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--compact')).toBe(true)
+    })
+
+    test('does not apply compact class when compact is false', async () => {
+      const { messagebox } = await createMessageboxTest({ compact: false })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--compact')).toBe(false)
+    })
+  })
+
+  describe('Closable functionality', () => {
+    test('renders close button when closable is true', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: true })
+
+      const closeButton = messagebox.querySelector('.pkt-messagebox__close button')
+      expect(closeButton).toBeInTheDocument()
+
+      const closeIcon = messagebox.querySelector('pkt-icon[name="close"]')
+      expect(closeIcon).toBeInTheDocument()
+    })
+
+    test('does not render close button when closable is false', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: false })
+
+      const closeButton = messagebox.querySelector('.pkt-messagebox__close')
+      expect(closeButton).not.toBeInTheDocument()
+    })
+
+    test('closes messagebox when close button is clicked', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: true })
+
+      const closeButton = messagebox.querySelector('.pkt-messagebox__close button')
+      fireEvent.click(closeButton!)
+
+      await messagebox.updateComplete
+      expect(messagebox._isClosed).toBe(true)
+      expect(messagebox.classList.contains('pkt-hide')).toBe(true)
+    })
+
+    test('dispatches close events when closed', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: true })
+
+      const closeHandler = jest.fn()
+      const onCloseHandler = jest.fn()
+      messagebox.addEventListener('close', closeHandler)
+      messagebox.addEventListener('on-close', onCloseHandler)
+
+      const closeButton = messagebox.querySelector('.pkt-messagebox__close button')
+      fireEvent.click(closeButton!)
+
+      expect(closeHandler).toHaveBeenCalled()
+      expect(onCloseHandler).toHaveBeenCalled()
+    })
+  })
+
+  describe('Title functionality', () => {
+    test('renders title when provided', async () => {
+      const { messagebox } = await createMessageboxTest({ title: 'Important Message' })
+
+      const title = messagebox.querySelector('.pkt-messagebox__title')
+      expect(title).toBeInTheDocument()
+      expect(title?.textContent).toBe('Important Message')
+      expect(title?.textContent).toBe('Important Message')
+    })
+
+    test('does not render title when empty', async () => {
+      const { messagebox } = await createMessageboxTest({ title: '' })
+
+      const title = messagebox.querySelector('.pkt-messagebox__title')
+      expect(title).not.toBeInTheDocument()
+    })
+  })
+
+  describe('CSS classes', () => {
+    test('applies base messagebox class', async () => {
+      const { messagebox } = await createMessageboxTest()
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox')).toBe(true)
+    })
+
+    test('applies closable class when closable', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: true })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--closable')).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('basic messagebox is accessible', async () => {
+      const { container } = await createMessageboxTest({
+        title: 'Accessible Message',
+        content: 'This is an accessible message',
+      })
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('closable messagebox is accessible', async () => {
+      const { container } = await createMessageboxTest({
+        closable: true,
+        title: 'Closable Message',
+        content: 'This message can be closed',
+      })
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/messagebox/messagebox.ts

@@ -65,6 +65,7 @@ export class PktMessagebox extends PktElement implements IPktMessagebox {
             <button
               @click=${this.close}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+              aria-label="Lukk"
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
             </button>