@oslokommune/punkt-elements 13.5.4 → 13.5.5

package/CHANGELOG.md

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

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-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`
+"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-CD6Zn8YH.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

@@ -27,7 +27,7 @@ import { P as ht, P as ct } from "./radiobutton-CWxiIVfA.js";
 import { P as ut } from "./tag-DyXzTY68.js";
 import { P as vt } from "./textarea-BZL8Mkm0.js";
 import { P as bt } from "./textinput-DjPhmmkB.js";
-import { P as $t } from "./select-CJS_CIKv.js";
+import { P as $t } from "./select-dcaJHvmR.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);

package/dist/pkt-select.cjs

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

package/dist/pkt-select.js

@@ -1,4 +1,4 @@
-import { P as t } from "./select-CJS_CIKv.js";
+import { P as t } from "./select-dcaJHvmR.js";
 const a = t;
 export {
   t as PktSelect,

package/dist/{select-Dkl0KhGW.cjs → select-CD6Zn8YH.cjs}

@@ -1,4 +1,4 @@
-"use strict";const r=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),l=require("./if-defined-Cni-RHLS.cjs"),d=require("./input-element-C4xJoM-X.cjs"),c=require("./pkt-options-controller-CiuBG6Lt.cjs"),v=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(u,t,e,s)=>{for(var i=s>1?void 0:s?b(t,e):t,o=u.length-1,n;o>=0;o--)(n=u[o])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&f(t,e,i),i};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.options=[],this.value="",this._options=[],this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new v.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.hasAttribute("value")?s.getAttribute("value")??"":s.textContent??"",label:s.textContent||s.getAttribute("value")||"",disabled:s.hasAttribute("disabled"),selected:s.hasAttribute("selected"),hidden:s.hasAttribute("data-hidden")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):(this._options=this.options,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){var s,i,o;(s=this.inputRef.value)==null||s.add(t,e),this._options.push({value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled}),t.selected&&(this.value=t.value||t.text,this.selectedIndex=this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions),this.requestUpdate()}remove(t){var e,s;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),(s=this.inputRef.value)==null||s.remove(t))}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){var t;(t=this.inputRef.value)==null||t.showPicker()}attributeChangedCallback(t,e,s){var i,o;t==="options"&&(this._options=s?JSON.parse(s):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex):this.options.findIndex(n=>n.value===s),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions,this.valueChanged(s,e)),super.attributeChangedCallback(t,e,s)}update(t){var e,s;super.update(t),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this.options.findIndex(i=>i.value===this.value),this.selectedOptions=(s=this.inputRef.value)==null?void 0:s.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this.options.length&&(this._options=this.options),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return r.x`
+"use strict";const h=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),r=require("./ref-iJtiv3o2.cjs"),l=require("./if-defined-Cni-RHLS.cjs"),d=require("./input-element-C4xJoM-X.cjs"),c=require("./pkt-options-controller-CiuBG6Lt.cjs"),v=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(u,t,e,s)=>{for(var i=s>1?void 0:s?b(t,e):t,o=u.length-1,n;o>=0;o--)(n=u[o])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&f(t,e,i),i};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=r.e(),this.helptextSlot=r.e(),this.options=[],this.value="",this._options=[],this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new v.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.hasAttribute("value")?s.getAttribute("value")??"":s.textContent??"",label:s.textContent||s.getAttribute("value")||"",disabled:s.hasAttribute("disabled"),selected:s.hasAttribute("selected"),hidden:s.hasAttribute("data-hidden")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):(this._options=this.options,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){var s,i,o;(s=this.inputRef.value)==null||s.add(t,e),this._options.push({value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled}),t.selected&&(this.value=t.value||t.text,this.selectedIndex=this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions),this.requestUpdate()}remove(t){var e,s;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),(s=this.inputRef.value)==null||s.remove(t))}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){var t;(t=this.inputRef.value)==null||t.showPicker()}attributeChangedCallback(t,e,s){var i,o;t==="options"&&(this._options=s?JSON.parse(s):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex):this.options.findIndex(n=>n.value===s),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions,this.valueChanged(s,e)),super.attributeChangedCallback(t,e,s)}update(t){var e,s;super.update(t),t.has("options")&&(this._options=this.options,this.requestUpdate("_options"),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this.options.findIndex(i=>i.value===this.value),this.selectedOptions=(s=this.inputRef.value)==null?void 0:s.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this.options.length&&(this._options=this.options),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return h.x`
       <pkt-input-wrapper
         ?counter=${this.counter}
         ?disabled=${this.disabled}
@@ -33,17 +33,17 @@
           @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
           @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
           @blur=${e=>{this.onBlur(),e.stopImmediatePropagation()}}
-          ${h.n(this.inputRef)}
+          ${r.n(this.inputRef)}
         >
-          ${this._options.length>0&&this._options.map(e=>r.x`<option
-                value=${e.value}
-                ?selected=${this.value==e.value||e.selected}
-                ?disabled=${e.disabled}
-                ?hidden=${e.hidden}
-              >
-                ${e.label}
-              </option>`)}
+          ${this._options.length>0?this._options.map(e=>h.x`<option
+                    value=${e.value}
+                    ?selected=${this.value==e.value||e.selected}
+                    ?disabled=${e.disabled}
+                    ?hidden=${e.hidden}
+                  >
+                    ${e.label}
+                  </option>`):""}
         </select>
-        <div class="pkt-contents" ${h.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
       </pkt-input-wrapper>
-    `}returnNumberOrNull(t){return t==null||isNaN(t)?null:t}};a([r.n({type:Array})],exports.PktSelect.prototype,"options",2);a([r.n({type:String})],exports.PktSelect.prototype,"value",2);a([p.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=a([r.t("pkt-select")],exports.PktSelect);
+    `}returnNumberOrNull(t){return t==null||isNaN(t)?null:t}};a([h.n({type:Array})],exports.PktSelect.prototype,"options",2);a([h.n({type:String})],exports.PktSelect.prototype,"value",2);a([p.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=a([h.t("pkt-select")],exports.PktSelect);

package/dist/{select-CJS_CIKv.js → select-dcaJHvmR.js}

@@ -7,11 +7,11 @@ import { P as $ } from "./pkt-options-controller-CZO1nxZ8.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
 import "./input-wrapper-Dr__Sxql.js";
 var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (t, e, s, i) => {
-  for (var l = i > 1 ? void 0 : i ? g(e, s) : e, a = t.length - 1, r; a >= 0; a--)
-    (r = t[a]) && (l = (i ? r(e, s, l) : r(l)) || l);
+  for (var l = i > 1 ? void 0 : i ? g(e, s) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (l = (i ? r(e, s, l) : r(l)) || l);
   return i && l && m(e, s, l), l;
 };
-let h = class extends b {
+let a = class extends b {
   constructor() {
     super(), this.inputRef = u(), this.helptextSlot = u(), this.options = [], this.value = "", this._options = [], this.selectedIndex = -1, this.selectedOptions = void 0, this.optionsController = new $(this), this.slotController = new x(this, this.helptextSlot), this.slotController.skipOptions = !0;
   }
@@ -64,11 +64,11 @@ let h = class extends b {
   }
   attributeChangedCallback(t, e, s) {
     var i, l;
-    t === "options" && (this._options = s ? JSON.parse(s) : []), t === "value" && this.value !== e && (this.selectedIndex = this.touched ? this.returnNumberOrNull((i = this.inputRef.value) == null ? void 0 : i.selectedIndex) : this.options.findIndex((a) => a.value === s), this.selectedOptions = (l = this.inputRef.value) == null ? void 0 : l.selectedOptions, this.valueChanged(s, e)), super.attributeChangedCallback(t, e, s);
+    t === "options" && (this._options = s ? JSON.parse(s) : []), t === "value" && this.value !== e && (this.selectedIndex = this.touched ? this.returnNumberOrNull((i = this.inputRef.value) == null ? void 0 : i.selectedIndex) : this.options.findIndex((h) => h.value === s), this.selectedOptions = (l = this.inputRef.value) == null ? void 0 : l.selectedOptions, this.valueChanged(s, e)), super.attributeChangedCallback(t, e, s);
   }
   update(t) {
     var e, s;
-    super.update(t), t.has("value") && this.value !== t.get("value") && (this.selectedIndex = this.touched ? this.returnNumberOrNull((e = this.inputRef.value) == null ? void 0 : e.selectedIndex) : this.options.findIndex((i) => i.value === this.value), this.selectedOptions = (s = this.inputRef.value) == null ? void 0 : s.selectedOptions, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
+    super.update(t), t.has("options") && (this._options = this.options, this.requestUpdate("_options"), !this.value && this._options.length > 0 && (this.value = this._options[0].value, this.selectedIndex = 0)), t.has("value") && this.value !== t.get("value") && (this.selectedIndex = this.touched ? this.returnNumberOrNull((e = this.inputRef.value) == null ? void 0 : e.selectedIndex) : this.options.findIndex((i) => i.value === this.value), this.selectedOptions = (s = this.inputRef.value) == null ? void 0 : s.selectedOptions, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
   }
   firstUpdated(t) {
     var e;
@@ -121,16 +121,16 @@ let h = class extends b {
     }}
           ${d(this.inputRef)}
         >
-          ${this._options.length > 0 && this._options.map(
+          ${this._options.length > 0 ? this._options.map(
       (e) => p`<option
-                value=${e.value}
-                ?selected=${this.value == e.value || e.selected}
-                ?disabled=${e.disabled}
-                ?hidden=${e.hidden}
-              >
-                ${e.label}
-              </option>`
-    )}
+                    value=${e.value}
+                    ?selected=${this.value == e.value || e.selected}
+                    ?disabled=${e.disabled}
+                    ?hidden=${e.hidden}
+                  >
+                    ${e.label}
+                  </option>`
+    ) : ""}
         </select>
         <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
       </pkt-input-wrapper>
@@ -142,16 +142,16 @@ let h = class extends b {
 };
 n([
   c({ type: Array })
-], h.prototype, "options", 2);
+], a.prototype, "options", 2);
 n([
   c({ type: String })
-], h.prototype, "value", 2);
+], a.prototype, "value", 2);
 n([
   f()
-], h.prototype, "_options", 2);
-h = n([
+], a.prototype, "_options", 2);
+a = n([
   v("pkt-select")
-], h);
+], a);
 export {
-  h as P
+  a as P
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.4",
+  "version": "13.5.5",
   "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": "aed226fa38fe77f28a9bc5d0380b194f0f90a64a"
+  "gitHead": "f65d3c81c0543cc360a34fe346b4e0585deb46ac"
 }

package/src/components/progressbar/progressbar.test.ts

@@ -0,0 +1,195 @@
+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 IPktProgressbar } from './progressbar'
+import './progressbar'
+
+export interface ProgressbarTestConfig extends Partial<IPktProgressbar>, BaseTestConfig {}
+
+export const createProgressbarTest = async (config: ProgressbarTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-progressbar'>,
+    ProgressbarTestConfig
+  >('pkt-progressbar', config)
+
+  return {
+    container,
+    progressbar: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktProgressbar', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const { progressbar } = await createProgressbarTest()
+
+      expect(progressbar).toBeInTheDocument()
+      expect(progressbar).toBeTruthy()
+    })
+
+    test('renders with progress value', async () => {
+      const { progressbar } = await createProgressbarTest({ valueCurrent: 50 })
+
+      expect(progressbar.valueCurrent).toBe(50)
+      expect(progressbar.getAttribute('role')).toBe('progressbar')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const { progressbar } = await createProgressbarTest()
+
+      expect(progressbar.valueCurrent).toBe(0)
+      expect(progressbar.valueMin).toBe(0)
+      expect(progressbar.valueMax).toBe(100)
+      expect(progressbar.skin).toBe('dark-blue')
+      expect(progressbar.role).toBe('progressbar')
+    })
+
+    test('sets properties correctly', async () => {
+      const { progressbar } = await createProgressbarTest({
+        valueCurrent: 75,
+        valueMin: 10,
+        valueMax: 200,
+        skin: 'green',
+        title: 'Loading',
+      })
+
+      expect(progressbar.valueCurrent).toBe(75)
+      expect(progressbar.valueMin).toBe(10)
+      expect(progressbar.valueMax).toBe(200)
+      expect(progressbar.skin).toBe('green')
+      expect(progressbar.title).toBe('Loading')
+    })
+  })
+
+  describe('Skin variants', () => {
+    test('applies dark-blue skin correctly', async () => {
+      const { progressbar } = await createProgressbarTest({ skin: 'dark-blue' })
+
+      const barElement = progressbar.querySelector('.pkt-progressbar__bar')
+      expect(barElement?.classList.contains('pkt-progressbar__bar--dark-blue')).toBe(true)
+    })
+
+    test('applies green skin correctly', async () => {
+      const { progressbar } = await createProgressbarTest({ skin: 'green' })
+
+      const barElement = progressbar.querySelector('.pkt-progressbar__bar')
+      expect(barElement?.classList.contains('pkt-progressbar__bar--green')).toBe(true)
+    })
+
+    test('applies red skin correctly', async () => {
+      const { progressbar } = await createProgressbarTest({ skin: 'red' })
+
+      const barElement = progressbar.querySelector('.pkt-progressbar__bar')
+      expect(barElement?.classList.contains('pkt-progressbar__bar--red')).toBe(true)
+    })
+  })
+
+  describe('Status display', () => {
+    test('shows percentage when statusType is percentage', async () => {
+      const { progressbar } = await createProgressbarTest({
+        valueCurrent: 50,
+        statusType: 'percentage',
+      })
+
+      const statusElement = progressbar.querySelector('.pkt-progressbar__status')
+      expect(statusElement?.textContent).toContain('50%')
+    })
+
+    test('shows fraction when statusType is fraction', async () => {
+      const { progressbar } = await createProgressbarTest({
+        valueCurrent: 25,
+        valueMax: 50,
+        statusType: 'fraction',
+      })
+
+      const statusElement = progressbar.querySelector('.pkt-progressbar__status')
+      expect(statusElement?.textContent?.trim()).toContain('25 av 50')
+    })
+
+    test('hides status when statusType is none', async () => {
+      const { progressbar } = await createProgressbarTest({
+        valueCurrent: 50,
+        statusType: 'none',
+      })
+
+      const statusElement = progressbar.querySelector('.pkt-progressbar__status')
+      expect(statusElement).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Title functionality', () => {
+    test('renders title when provided', async () => {
+      const { progressbar } = await createProgressbarTest({ title: 'Loading progress' })
+
+      const titleElement = progressbar.querySelector('.pkt-progressbar__title')
+      expect(titleElement).toBeInTheDocument()
+      expect(titleElement?.textContent).toBe('Loading progress')
+    })
+
+    test('does not render title when empty', async () => {
+      const { progressbar } = await createProgressbarTest()
+
+      const titleElement = progressbar.querySelector('.pkt-progressbar__title')
+      expect(titleElement).not.toBeInTheDocument()
+    })
+  })
+
+  describe('ARIA and accessibility', () => {
+    test('has correct ARIA attributes', async () => {
+      const { progressbar } = await createProgressbarTest({
+        valueCurrent: 60,
+        ariaLabel: 'File upload progress',
+      })
+
+      expect(progressbar.getAttribute('aria-valuemin')).toBe('0')
+      expect(progressbar.getAttribute('aria-valuemax')).toBe('100')
+      expect(progressbar.getAttribute('aria-valuenow')).toBe('60')
+      expect(progressbar.getAttribute('aria-label')).toBe('File upload progress')
+    })
+
+    test('updates aria-valuenow when value changes', async () => {
+      const { progressbar } = await createProgressbarTest({ valueCurrent: 30 })
+
+      progressbar.valueCurrent = 80
+      await progressbar.updateComplete
+
+      expect(progressbar.getAttribute('aria-valuenow')).toBe('80')
+    })
+  })
+
+  describe('Role variants', () => {
+    test('uses progressbar role by default', async () => {
+      const { progressbar } = await createProgressbarTest()
+
+      expect(progressbar.getAttribute('role')).toBe('progressbar')
+    })
+
+    test('uses meter role when specified', async () => {
+      const { progressbar } = await createProgressbarTest({ role: 'meter' })
+
+      expect(progressbar.getAttribute('role')).toBe('meter')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('progressbar is accessible', async () => {
+      const { container } = await createProgressbarTest({
+        title: 'Upload progress',
+        valueCurrent: 50,
+        ariaLabel: 'File upload progress',
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/radiobutton/radiobutton.test.ts

@@ -0,0 +1,272 @@
+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 './radiobutton'
+
+export interface RadioButtonTestConfig extends BaseTestConfig {
+  value?: string
+  checkHelptext?: string | null
+  defaultChecked?: boolean
+  hasTile?: boolean
+  checked?: boolean | string | null
+  type?: string
+  tagText?: string | null
+  optionalTag?: boolean
+  optionalText?: string
+  requiredTag?: boolean
+  requiredText?: string
+
+  id?: string
+  name?: string
+  label?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  hasError?: boolean
+  inline?: boolean
+  ariaDescribedBy?: string | null
+  ariaLabelledby?: string | null
+}
+
+export const createRadioButtonTest = async (config: RadioButtonTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-radiobutton'>,
+    RadioButtonTestConfig
+  >('pkt-radiobutton', config)
+
+  if (config.label) {
+    element.label = config.label
+    await element.updateComplete
+  }
+
+  return {
+    container,
+    radiobutton: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+describe('pkt-radiobutton', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('renders with basic properties', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      id: 'test',
+      name: 'test',
+      value: 'test',
+    })
+
+    expect(radiobutton).toBeInTheDocument()
+    expect(radiobutton.tagName).toBe('PKT-RADIOBUTTON')
+  })
+
+  test('renders input element with correct attributes', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      id: 'test',
+      name: 'test',
+      value: 'test',
+    })
+
+    const input = radiobutton.querySelector('input[type="radio"]') as HTMLInputElement
+    expect(input).toBeInTheDocument()
+    expect(input.type).toBe('radio')
+    expect(input.id).toBe('test-internal')
+    expect(input.name).toBe('test-internal')
+  })
+
+  test('displays label correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      id: 'test',
+      label: 'Test Radio',
+    })
+
+    const label = radiobutton.querySelector('label')
+    expect(label).toBeInTheDocument()
+    expect(label?.textContent?.trim()).toContain('Test Radio')
+    expect(label?.getAttribute('for')).toBe('test-internal')
+  })
+
+  test('handles checked state correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest()
+
+    expect(radiobutton.checked).toBe(null)
+
+    radiobutton.checked = true
+    await radiobutton.updateComplete
+
+    const input = radiobutton.querySelector('input') as HTMLInputElement
+    expect(input.checked).toBe(true)
+    expect(radiobutton.checked).toBe(true)
+  })
+
+  test('updates checked state on user interaction', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      label: 'Test Option',
+    })
+
+    const input = radiobutton.querySelector('input') as HTMLInputElement
+    expect(input.checked).toBe(false)
+    expect(radiobutton.touched).toBe(false)
+
+    fireEvent.click(input)
+    await radiobutton.updateComplete
+
+    expect(input.checked).toBe(true)
+    expect(radiobutton.touched).toBe(true)
+  })
+
+  test('handles disabled state correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      disabled: true,
+    })
+
+    const input = radiobutton.querySelector('input') as HTMLInputElement
+    expect(input.disabled).toBe(true)
+
+    const label = radiobutton.querySelector('.pkt-input-check__input-label')
+    expect(label).toHaveClass('pkt-input-check__input-label--disabled')
+  })
+
+  test('renders tile variant correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      hasTile: true,
+    })
+
+    const container = radiobutton.querySelector('.pkt-input-check__input')
+    expect(container).toHaveClass('pkt-input-check__input--tile')
+  })
+
+  test('renders disabled tile variant correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      hasTile: true,
+      disabled: true,
+    })
+
+    const container = radiobutton.querySelector('.pkt-input-check__input')
+    expect(container).toHaveClass('pkt-input-check__input--tile-disabled')
+  })
+
+  test('renders helptext when provided', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      checkHelptext: 'This is helpful information',
+    })
+
+    const helptext = radiobutton.querySelector('.pkt-input-check__input-helptext')
+    expect(helptext).toBeInTheDocument()
+    expect(helptext?.textContent).toBe('This is helpful information')
+  })
+
+  test('handles error state correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      hasError: true,
+    })
+
+    const input = radiobutton.querySelector('input')
+    expect(input).toHaveClass('pkt-input-check__input-checkbox--error')
+  })
+
+  test('renders tag text when provided', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      tagText: 'Tag',
+    })
+
+    const tag = radiobutton.querySelector('.pkt-tag--gray')
+    expect(tag).toBeInTheDocument()
+    expect(tag?.textContent).toBe('Tag')
+  })
+
+  test('renders optional tag when enabled', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      optionalTag: true,
+    })
+
+    const tag = radiobutton.querySelector('.pkt-tag--blue-light')
+    expect(tag).toBeInTheDocument()
+    expect(tag?.textContent).toBe('Valgfritt')
+  })
+
+  test('renders required tag when enabled', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      requiredTag: true,
+    })
+
+    const tag = radiobutton.querySelector('.pkt-tag--beige')
+    expect(tag).toBeInTheDocument()
+    expect(tag?.textContent).toBe('Må fylles ut')
+  })
+
+  test('manages focus events correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest()
+
+    const focusSpy = jest.fn()
+    const blurSpy = jest.fn()
+    radiobutton.addEventListener('focus', focusSpy)
+    radiobutton.addEventListener('blur', blurSpy)
+
+    const input = radiobutton.querySelector('input') as HTMLInputElement
+
+    fireEvent.focus(input)
+    expect(focusSpy).toHaveBeenCalled()
+
+    fireEvent.blur(input)
+    expect(blurSpy).toHaveBeenCalled()
+  })
+
+  test('works with radio button groups', async () => {
+    const container = document.createElement('form')
+    document.body.appendChild(container)
+
+    const radio1Container = document.createElement('div')
+    radio1Container.innerHTML = '<pkt-radiobutton name="group" value="1"></pkt-radiobutton>'
+    container.appendChild(radio1Container)
+    await customElements.whenDefined('pkt-radiobutton')
+    const radio1 = radio1Container.querySelector(
+      'pkt-radiobutton',
+    ) as CustomElementFor<'pkt-radiobutton'>
+    radio1.label = 'Option 1'
+    await radio1.updateComplete
+
+    const radio2Container = document.createElement('div')
+    radio2Container.innerHTML = '<pkt-radiobutton name="group" value="2"></pkt-radiobutton>'
+    container.appendChild(radio2Container)
+    const radio2 = radio2Container.querySelector(
+      'pkt-radiobutton',
+    ) as CustomElementFor<'pkt-radiobutton'>
+    radio2.label = 'Option 2'
+    await radio2.updateComplete
+
+    const input1 = radio1.querySelector('input') as HTMLInputElement
+    const input2 = radio2.querySelector('input') as HTMLInputElement
+
+    expect(input1.checked).toBe(false)
+    expect(input2.checked).toBe(false)
+
+    fireEvent.click(input1)
+    await radio1.updateComplete
+
+    expect(input1.checked).toBe(true)
+    expect(radio1.touched).toBe(true)
+
+    fireEvent.click(input2)
+    await radio2.updateComplete
+
+    expect(input2.checked).toBe(true)
+    expect(radio2.touched).toBe(true)
+
+    document.body.removeChild(container)
+  })
+
+  test('meets accessibility standards', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      label: 'Accessible Radio Button',
+    })
+
+    const results = await axe(radiobutton)
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/select/select.test.ts

@@ -0,0 +1,227 @@
+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 IPktSelect, type TSelectOption } from './select'
+import './select'
+
+export interface SelectTestConfig extends Partial<IPktSelect>, BaseTestConfig {
+  id?: string
+  label?: string
+  disabled?: boolean
+  required?: boolean
+  hasError?: boolean
+  errorMessage?: string
+  helptext?: string
+  fullwidth?: boolean
+  ariaLabelledby?: string | null
+  ariaDescribedBy?: string | null
+  counter?: boolean
+  inline?: boolean
+  useWrapper?: boolean | string
+}
+
+export const createSelectTest = async (config: SelectTestConfig = {}) => {
+  const { options, ...htmlConfig } = config
+
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-select'>,
+    Omit<SelectTestConfig, 'options'>
+  >('pkt-select', htmlConfig)
+
+  if (options) {
+    element.options = options
+    await element.updateComplete
+  }
+
+  return {
+    container,
+    select: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+describe('pkt-select', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('renders with basic properties', async () => {
+    const { select } = await createSelectTest({
+      label: 'Test Select',
+      id: 'test-select',
+    })
+
+    expect(select).toBeInTheDocument()
+    expect(select.getAttribute('id')).toBe('test-select')
+    expect(select.label).toBe('Test Select')
+  })
+
+  test('displays correct label in input wrapper', async () => {
+    const { select } = await createSelectTest({
+      label: 'Choose Option',
+    })
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper).toBeInTheDocument()
+    expect(inputWrapper?.getAttribute('label')).toBe('Choose Option')
+  })
+
+  test('renders select element with correct attributes', async () => {
+    const { select } = await createSelectTest({
+      id: 'my-select',
+      disabled: true,
+      value: 'option2',
+    })
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement).toBeInTheDocument()
+    expect(selectElement?.getAttribute('id')).toBe('my-select-input')
+    expect(selectElement?.hasAttribute('disabled')).toBe(true)
+    expect(selectElement?.getAttribute('value')).toBe('option2')
+  })
+
+  test('handles options array property', async () => {
+    const options: TSelectOption[] = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3', disabled: true },
+    ]
+
+    const { select } = await createSelectTest({ options })
+
+    const optionElements = select.querySelectorAll('option')
+    expect(optionElements).toHaveLength(3)
+
+    expect(optionElements[0].value).toBe('1')
+    expect(optionElements[0].textContent?.trim()).toBe('Option 1')
+
+    expect(optionElements[2].hasAttribute('disabled')).toBe(true)
+  })
+
+  test('updates value on selection', async () => {
+    const options: TSelectOption[] = [
+      { value: 'a', label: 'Option A' },
+      { value: 'b', label: 'Option B' },
+    ]
+
+    const { select } = await createSelectTest({ options })
+
+    const selectElement = select.querySelector('select') as HTMLSelectElement
+
+    expect(selectElement.options.length).toBe(2)
+    expect(selectElement.options[0].value).toBe('a')
+    expect(selectElement.options[1].value).toBe('b')
+
+    expect(select.value).toBe('a')
+
+    selectElement.selectedIndex = 1
+    selectElement.dispatchEvent(new Event('change', { bubbles: true }))
+    await select.updateComplete
+
+    expect(select.value).toBe('b')
+    expect(select.touched).toBe(true)
+  })
+
+  test('handles error state correctly', async () => {
+    const { select } = await createSelectTest({
+      hasError: true,
+      errorMessage: 'Selection required',
+    })
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper?.hasAttribute('hasError')).toBe(true)
+    expect(inputWrapper?.getAttribute('errorMessage')).toBe('Selection required')
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement?.getAttribute('aria-invalid')).toBe('true')
+  })
+
+  test('renders helptext when provided', async () => {
+    const { select } = await createSelectTest({
+      helptext: 'Choose your preferred option',
+    })
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper?.getAttribute('helptext')).toBe('Choose your preferred option')
+  })
+
+  test('handles fullwidth styling', async () => {
+    const { select } = await createSelectTest({
+      fullwidth: true,
+    })
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement?.className).toContain('pkt-input--fullwidth')
+  })
+
+  test('manages focus events correctly', async () => {
+    const { select } = await createSelectTest()
+
+    const focusSpy = jest.spyOn(select, 'onFocus')
+    const blurSpy = jest.spyOn(select, 'onBlur')
+
+    const selectElement = select.querySelector('select') as HTMLSelectElement
+
+    selectElement.dispatchEvent(new FocusEvent('focus'))
+    expect(focusSpy).toHaveBeenCalled()
+
+    selectElement.dispatchEvent(new FocusEvent('blur'))
+    expect(blurSpy).toHaveBeenCalled()
+  })
+
+  test('passes through accessibility attributes', async () => {
+    const { select } = await createSelectTest({
+      ariaLabelledby: 'external-label',
+      ariaDescribedBy: 'external-description',
+    })
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement?.getAttribute('aria-labelledby')).toBe('external-label')
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper?.getAttribute('ariaDescribedBy')).toBe('external-description')
+  })
+
+  test('handles input wrapper properties', async () => {
+    const { select } = await createSelectTest({
+      counter: true,
+      inline: true,
+    })
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper?.hasAttribute('counter')).toBe(true)
+    expect(inputWrapper?.hasAttribute('inline')).toBe(true)
+  })
+
+  test('handles useWrapper false', async () => {
+    const { select } = await createSelectTest()
+
+    // Set useWrapper property directly on the element
+    select.useWrapper = false
+    await select.updateComplete
+
+    // When useWrapper is false, verify the behavior
+    expect(select.useWrapper).toBe(false)
+
+    // Confirm that there's a label with class pkt-sr-only in the markup
+    const srOnlyLabel = select.querySelector('label.pkt-sr-only')
+    expect(srOnlyLabel).toBeInTheDocument()
+  })
+
+  test('meets accessibility standards', async () => {
+    const options: TSelectOption[] = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+    ]
+
+    const { select } = await createSelectTest({
+      label: 'Accessible Select',
+      options,
+    })
+
+    const results = await axe(select)
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/select/select.ts

@@ -150,6 +150,16 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   update(changedProperties: PropertyValues) {
     super.update(changedProperties)
+    if (changedProperties.has('options')) {
+      this._options = this.options
+      this.requestUpdate('_options')
+
+      // If no value is set and we have options, set to first option
+      if (!this.value && this._options.length > 0) {
+        this.value = this._options[0].value
+        this.selectedIndex = 0
+      }
+    }
     if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
       this.selectedIndex = this.touched
         ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
@@ -230,18 +240,19 @@ export class PktSelect extends PktInputElement implements IPktSelect {
           }}
           ${ref(this.inputRef)}
         >
-          ${this._options.length > 0 &&
-          this._options.map(
-            (option) =>
-              html`<option
-                value=${option.value}
-                ?selected=${this.value == option.value || option.selected}
-                ?disabled=${option.disabled}
-                ?hidden=${option.hidden}
-              >
-                ${option.label}
-              </option>`,
-          )}
+          ${this._options.length > 0
+            ? this._options.map(
+                (option) =>
+                  html`<option
+                    value=${option.value}
+                    ?selected=${this.value == option.value || option.selected}
+                    ?disabled=${option.disabled}
+                    ?hidden=${option.hidden}
+                  >
+                    ${option.label}
+                  </option>`,
+              )
+            : ''}
         </select>
         <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
       </pkt-input-wrapper>