@oslokommune/punkt-elements 13.17.0 → 13.18.1

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.18.0](https://github.com/oslokommune/punkt/compare/13.17.0...13.18.0) (2025-12-22)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Checkbox med state "indeterminate" som prop (#3148). 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.15.4](https://github.com/oslokommune/punkt/compare/13.15.3...13.15.4) (2025-11-11)
 
 ### ⚠ BREAKING CHANGES

package/dist/{checkbox-CCFBIf44.js → checkbox-CCmRUWTH.js}

@@ -1,63 +1,63 @@
-import { E as o, x as p, n as s, a as u } from "./element-CRDRygXu.js";
+import { E as r, x as p, n as s, a as d } from "./element-CRDRygXu.js";
 import { P as k } from "./input-element-Dqu8udwd.js";
-import { e as f, n as g } from "./ref-Xa5dbh--.js";
-import { e as d } from "./class-map-wy7PUk0P.js";
-var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, a, c, l) => {
-  for (var h = l > 1 ? void 0 : l ? y(a, c) : a, n = t.length - 1, r; n >= 0; n--)
-    (r = t[n]) && (h = (l ? r(a, c, h) : r(h)) || h);
-  return l && h && b(a, c, h), h;
+import { e as f, n as b } from "./ref-Xa5dbh--.js";
+import { e as u } from "./class-map-wy7PUk0P.js";
+var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (t, a, n, l) => {
+  for (var h = l > 1 ? void 0 : l ? m(a, n) : a, c = t.length - 1, o; c >= 0; c--)
+    (o = t[c]) && (h = (l ? o(a, n, h) : o(h)) || h);
+  return l && h && g(a, n, h), h;
 };
 let e = class extends k {
   constructor() {
-    super(...arguments), this.inputRef = f(), this.value = "", this.checkHelptext = null, this.defaultChecked = !1, this.hasTile = !1, this.isSwitch = !1, this.labelPosition = "right", this.hideLabel = !1, this.checked = null, this.type = "checkbox", this.tagText = null, this.optionalTag = !1, this.optionalText = "Valgfritt", this.requiredTag = !1, this.requiredText = "Må fylles ut";
+    super(...arguments), this.inputRef = f(), this.value = "", this.checkHelptext = null, this.defaultChecked = !1, this.hasTile = !1, this.isSwitch = !1, this.labelPosition = "right", this.hideLabel = !1, this.checked = null, this.indeterminate = !1, this.type = "checkbox", this.tagText = null, this.optionalTag = !1, this.optionalText = "Valgfritt", this.requiredTag = !1, this.requiredText = "Må fylles ut";
   }
   connectedCallback() {
     super.connectedCallback();
   }
-  attributeChangedCallback(t, a, c) {
-    t === "defaultChecked" && !this.checked && (this.checked = this.defaultChecked), t === "checked" && (this.checked = this.checked === "" || this.checked === "true" || this.checked === !0, this.inputRef.value && (this.inputRef.value.checked = this.checked)), super.attributeChangedCallback(t, a, c);
+  attributeChangedCallback(t, a, n) {
+    t === "defaultChecked" && !this.checked && (this.checked = this.defaultChecked), t === "checked" && (this.checked = this.checked === "" || this.checked === "true" || this.checked === !0, this.inputRef.value && (this.inputRef.value.checked = this.checked)), t === "indeterminate" && (this.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0, this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate)), super.attributeChangedCallback(t, a, n);
   }
   firstUpdated(t) {
-    t.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), super.firstUpdated(t);
+    t.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0), super.firstUpdated(t);
   }
   updated(t) {
-    t.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), t.has("checked") && this.inputRef.value && (this.inputRef.value.checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.updated(t);
+    t.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), t.has("checked") && this.inputRef.value && (this.inputRef.value.checked = this.checked === "" || this.checked === "true" || this.checked === !0), t.has("indeterminate") && this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0), super.updated(t);
   }
   render() {
-    const t = d({
+    const t = u({
       "pkt-input-check__input": !0,
       "pkt-input-check__input--tile": this.hasTile,
       "pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
-    }), a = d({
+    }), a = u({
       "pkt-input-check__input-checkbox": !0,
       "pkt-input-check__input-checkbox--error": this.hasError
-    }), c = d({
+    }), n = u({
       "pkt-input-check__input-label": !0,
       "pkt-input-check__input-label--disabled": this.disabled,
       "pkt-input-check__input-label--left": this.labelPosition === "left",
       "pkt-input-check__input-label--right": this.labelPosition === "right",
       "pkt-sr-only": this.hideLabel
     }), l = "pkt-tag pkt-tag--small pkt-tag--thin-text", h = () => p`
-        ${this.tagText ? p`<span class=${l + " pkt-tag--gray"}>${this.tagText}</span>` : o}
-        ${this.optionalTag ? p`<span class=${l + " pkt-tag--blue-light"}>${this.optionalText}</span>` : o}
-        ${this.requiredTag ? p`<span class=${l + " pkt-tag--beige"}>${this.requiredText}</span>` : o}
-      `, n = () => p`
-        <label class=${c} for=${this.id + "-internal"}>
+        ${this.tagText ? p`<span class=${l + " pkt-tag--gray"}>${this.tagText}</span>` : r}
+        ${this.optionalTag ? p`<span class=${l + " pkt-tag--blue-light"}>${this.optionalText}</span>` : r}
+        ${this.requiredTag ? p`<span class=${l + " pkt-tag--beige"}>${this.requiredText}</span>` : r}
+      `, c = () => p`
+        <label class=${n} for=${this.id + "-internal"}>
           ${this.label} ${h()}
-          ${this.checkHelptext ? p`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : o}
+          ${this.checkHelptext ? p`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : r}
         </label>
       `;
     return p`
       <div class="pkt-input-check">
         <div class=${t}>
-          ${this.labelPosition === "left" ? n() : o}
+          ${this.labelPosition === "left" ? c() : r}
           <input
             id=${this.id + "-internal"}
             class=${a}
             type="checkbox"
             ?disabled=${this.disabled}
             name=${this.name + "-internal"}
-            ${g(this.inputRef)}
+            ${b(this.inputRef)}
             @change=${this.handleChange}
             @click=${this.handleClick}
             @blur=${this.onBlur}
@@ -65,7 +65,7 @@ let e = class extends k {
             ?checked=${this.checked}
             role=${this.isSwitch ? "switch" : "checkbox"}
           />
-          ${this.labelPosition === "right" ? n() : o}
+          ${this.labelPosition === "right" ? c() : r}
         </div>
       </div>
     `;
@@ -116,6 +116,9 @@ i([
 i([
   s({ type: Boolean, reflect: !0 })
 ], e.prototype, "checked", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "indeterminate", 2);
 i([
   s({ type: String, reflect: !0 })
 ], e.prototype, "type", 2);
@@ -135,7 +138,7 @@ i([
   s({ type: String })
 ], e.prototype, "requiredText", 2);
 e = i([
-  u("pkt-checkbox")
+  d("pkt-checkbox")
 ], e);
 export {
   e as P

package/dist/checkbox-CqoOG2KJ.cjs

@@ -0,0 +1,31 @@
+"use strict";const t=require("./element-CJ_QKaki.cjs"),o=require("./input-element-KUsQQ-1d.cjs"),r=require("./ref-BFa5Utho.cjs"),p=require("./class-map-C_erArZz.cjs");var u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(l,e,h,a)=>{for(var s=a>1?void 0:a?d(e,h):e,c=l.length-1,n;c>=0;c--)(n=l[c])&&(s=(a?n(e,h,s):n(s))||s);return a&&s&&u(e,h,s),s};exports.PktCheckbox=class extends o.PktInputElement{constructor(){super(...arguments),this.inputRef=r.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.indeterminate=!1,this.type="checkbox",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,h,a){e==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),e==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0,this.inputRef.value&&(this.inputRef.value.checked=this.checked)),e==="indeterminate"&&(this.indeterminate=this.indeterminate===""||this.indeterminate==="true"||this.indeterminate===!0,this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate)),super.attributeChangedCallback(e,h,a)}firstUpdated(e){e.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===""||this.indeterminate==="true"||this.indeterminate===!0),super.firstUpdated(e)}updated(e){e.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),e.has("checked")&&this.inputRef.value&&(this.inputRef.value.checked=this.checked===""||this.checked==="true"||this.checked===!0),e.has("indeterminate")&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===""||this.indeterminate==="true"||this.indeterminate===!0),super.updated(e)}render(){const e=p.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),h=p.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=p.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",c=()=>t.x`
+        ${this.tagText?t.x`<span class=${s+" pkt-tag--gray"}>${this.tagText}</span>`:t.E}
+        ${this.optionalTag?t.x`<span class=${s+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.E}
+        ${this.requiredTag?t.x`<span class=${s+" pkt-tag--beige"}>${this.requiredText}</span>`:t.E}
+      `,n=()=>t.x`
+        <label class=${a} for=${this.id+"-internal"}>
+          ${this.label} ${c()}
+          ${this.checkHelptext?t.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:t.E}
+        </label>
+      `;return t.x`
+      <div class="pkt-input-check">
+        <div class=${e}>
+          ${this.labelPosition==="left"?n():t.E}
+          <input
+            id=${this.id+"-internal"}
+            class=${h}
+            type="checkbox"
+            ?disabled=${this.disabled}
+            name=${this.name+"-internal"}
+            ${r.n(this.inputRef)}
+            @change=${this.handleChange}
+            @click=${this.handleClick}
+            @blur=${this.onBlur}
+            @focus=${this.onFocus}
+            ?checked=${this.checked}
+            role=${this.isSwitch?"switch":"checkbox"}
+          />
+          ${this.labelPosition==="right"?n():t.E}
+        </div>
+      </div>
+    `}handleClick(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1}handleChange(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1;this.toggleChecked(e)}toggleChecked(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}const h=e.target;if(h&&h.disabled){e.preventDefault(),e.stopImmediatePropagation();return}e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(":checked"),this.valueChecked(this.checked))}};i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"value",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"checkHelptext",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"defaultChecked",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hasTile",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"isSwitch",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"labelPosition",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hideLabel",2);i([t.n({type:Boolean,reflect:!0})],exports.PktCheckbox.prototype,"checked",2);i([t.n({type:Boolean,reflect:!0})],exports.PktCheckbox.prototype,"indeterminate",2);i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"type",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"tagText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"optionalTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"optionalText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"requiredTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"requiredText",2);exports.PktCheckbox=i([t.t("pkt-checkbox")],exports.PktCheckbox);

package/dist/index.d.ts

@@ -534,6 +534,7 @@ export declare class PktCheckbox extends PktInputElement<Props_3> {
     labelPosition: 'right' | 'left';
     hideLabel: boolean;
     checked: boolean | string | null;
+    indeterminate: boolean | 'true' | 'false' | '';
     type: string;
     tagText: string | null;
     optionalTag: boolean;

package/dist/pkt-checkbox.cjs

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

package/dist/pkt-checkbox.js

@@ -1,4 +1,4 @@
-import { P as o } from "./checkbox-CCFBIf44.js";
+import { P as o } from "./checkbox-CCmRUWTH.js";
 const k = o;
 export {
   o as PktCheckbox,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./alert-BXbmjri0.cjs"),l=require("./accordionitem-DCZrHVNR.cjs"),m=require("./backlink-BzEvli8m.cjs"),g=require("./button-1jYzMALk.cjs"),P=require("./calendar-Dz1Cnzx5.cjs"),h=require("./card-Cf-UcGAP.cjs"),f=require("./combobox-6WP1urZS.cjs"),y=require("./consent-Cgc6nuiP.cjs"),O=require("./checkbox-UT6D1Wi0.cjs"),t=require("./element-CJ_QKaki.cjs"),j=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BFa5Utho.cjs"),q=require("./class-map-C_erArZz.cjs"),k=require("./datepicker-DEO1C69C.cjs"),x=require("./helptext-EPTR9AIl.cjs"),C=require("./heading--JKFppLS.cjs"),v=require("./icon-BGuizDwk.cjs"),S=require("./input-wrapper-B-Qseywc.cjs"),T=require("./link-Da3pZ_CW.cjs"),$=require("./linkcard-BM23gzhS.cjs"),L=require("./loader-Bo8RCbCJ.cjs"),_=require("./messagebox-C76IcXTl.cjs"),I=require("./modal-Cdz9JcCX.cjs"),A=require("./progressbar-8gzOtJyh.cjs"),p=require("./radiobutton-FwxpKELo.cjs"),B=require("./tag-EFUKrc8q.cjs"),d=require("./tabitem-D5zyipN1.cjs"),D=require("./textarea-CzN0E0TV.cjs"),M=require("./textinput-D8v6D6ie.cjs"),R=require("./select-BbmLn1qh.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new j.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./alert-BXbmjri0.cjs"),l=require("./accordionitem-DCZrHVNR.cjs"),m=require("./backlink-BzEvli8m.cjs"),g=require("./button-1jYzMALk.cjs"),P=require("./calendar-Dz1Cnzx5.cjs"),h=require("./card-Cf-UcGAP.cjs"),f=require("./combobox-6WP1urZS.cjs"),y=require("./consent-Cgc6nuiP.cjs"),O=require("./checkbox-CqoOG2KJ.cjs"),t=require("./element-CJ_QKaki.cjs"),j=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BFa5Utho.cjs"),q=require("./class-map-C_erArZz.cjs"),k=require("./datepicker-DEO1C69C.cjs"),x=require("./helptext-EPTR9AIl.cjs"),C=require("./heading--JKFppLS.cjs"),v=require("./icon-BGuizDwk.cjs"),S=require("./input-wrapper-B-Qseywc.cjs"),T=require("./link-Da3pZ_CW.cjs"),$=require("./linkcard-BM23gzhS.cjs"),L=require("./loader-Bo8RCbCJ.cjs"),_=require("./messagebox-C76IcXTl.cjs"),I=require("./modal-Cdz9JcCX.cjs"),A=require("./progressbar-8gzOtJyh.cjs"),p=require("./radiobutton-FwxpKELo.cjs"),B=require("./tag-EFUKrc8q.cjs"),d=require("./tabitem-D5zyipN1.cjs"),D=require("./textarea-CzN0E0TV.cjs"),M=require("./textinput-D8v6D6ie.cjs"),R=require("./select-BbmLn1qh.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new j.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${q.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -7,7 +7,7 @@ import { P as j } from "./calendar-Bz27nuTP.js";
 import { P as G } from "./card-M1X36b6i.js";
 import { P as K } from "./combobox-CtHgl1n2.js";
 import { P as U } from "./consent-CYFXjOXF.js";
-import { P as q } from "./checkbox-CCFBIf44.js";
+import { P as q } from "./checkbox-CCmRUWTH.js";
 import { P as d, t as h, x as P, n, a as c } from "./element-CRDRygXu.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as m, n as k } from "./ref-Xa5dbh--.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.17.0",
+  "version": "13.18.1",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -42,7 +42,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.16.0",
-    "@oslokommune/punkt-css": "^13.17.0",
+    "@oslokommune/punkt-css": "^13.18.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
@@ -79,5 +79,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "8eb6e3c34e6bba48446f574861192858379c48a1"
+  "gitHead": "3a29f3b3de9cced943ed4cd7de3d6c8a02e75040"
 }

package/src/components/checkbox/checkbox.test.ts

@@ -241,6 +241,79 @@ describe('PktCheckbox', () => {
       expect(input?.getAttribute('role')).toBe('switch')
     })
 
+    test('handles indeterminate property correctly', async () => {
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
+      expect(input.indeterminate).toBe(false)
+
+      // Set indeterminate to true
+      checkbox.indeterminate = true
+      await checkbox.updateComplete
+
+      expect(checkbox.indeterminate).toBe(true)
+      expect(input.indeterminate).toBe(true)
+
+      // Set indeterminate back to false
+      checkbox.indeterminate = false
+      await checkbox.updateComplete
+
+      expect(checkbox.indeterminate).toBe(false)
+      expect(input.indeterminate).toBe(false)
+    })
+
+    test('handles indeterminate attribute changes', async () => {
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
+      expect(input.indeterminate).toBe(false)
+
+      // Set via attribute
+      checkbox.setAttribute('indeterminate', '')
+      await checkbox.updateComplete
+
+      expect(checkbox.indeterminate).toBe(true)
+      expect(input.indeterminate).toBe(true)
+
+      // Remove attribute
+      checkbox.removeAttribute('indeterminate')
+      await checkbox.updateComplete
+
+      expect(checkbox.indeterminate).toBe(false)
+      expect(input.indeterminate).toBe(false)
+    })
+
+    test('clicking checkbox clears indeterminate state', async () => {
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
+      checkbox.indeterminate = true
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
+      expect(input.indeterminate).toBe(true)
+
+      // Click the checkbox
+      fireEvent.click(input)
+      await checkbox.updateComplete
+
+      // Indeterminate should be cleared by the browser when clicked
+      expect(input.indeterminate).toBe(false)
+      expect(input.checked).toBe(true)
+    })
+
     test('handles hasTile property correctly', async () => {
       const { checkbox } = await createCheckboxTest({
         id: 'test',

package/src/components/checkbox/checkbox.ts

@@ -33,6 +33,7 @@ export class PktCheckbox extends PktInputElement<Props> {
   @property({ type: String }) labelPosition: 'right' | 'left' = 'right'
   @property({ type: Boolean }) hideLabel: boolean = false
   @property({ type: Boolean, reflect: true }) checked: boolean | string | null = null
+  @property({ type: Boolean, reflect: true }) indeterminate: boolean | 'true' | 'false' | '' = false
   @property({ type: String, reflect: true }) type: string = 'checkbox'
   @property({ type: String }) tagText: string | null = null
   @property({ type: Boolean }) optionalTag: boolean = false
@@ -52,6 +53,11 @@ export class PktCheckbox extends PktInputElement<Props> {
       this.checked = this.checked === '' || this.checked === 'true' || this.checked === true
       if (this.inputRef.value) this.inputRef.value.checked = this.checked as boolean
     }
+    if (name === 'indeterminate') {
+      this.indeterminate =
+        this.indeterminate === '' || this.indeterminate === 'true' || this.indeterminate === true
+      if (this.inputRef.value) this.inputRef.value.indeterminate = this.indeterminate as boolean
+    }
     super.attributeChangedCallback(name, _old, value)
   }
 
@@ -59,6 +65,10 @@ export class PktCheckbox extends PktInputElement<Props> {
     if (_changedProperties.has('defaultChecked') && !this.checked) {
       this.checked = this.defaultChecked
     }
+    if (this.inputRef.value) {
+      this.inputRef.value.indeterminate =
+        this.indeterminate === '' || this.indeterminate === 'true' || this.indeterminate === true
+    }
     super.firstUpdated(_changedProperties)
   }
 
@@ -70,6 +80,10 @@ export class PktCheckbox extends PktInputElement<Props> {
       this.inputRef.value.checked =
         this.checked === '' || this.checked === 'true' || this.checked === true
     }
+    if (changedProperties.has('indeterminate') && this.inputRef.value) {
+      this.inputRef.value.indeterminate =
+        this.indeterminate === '' || this.indeterminate === 'true' || this.indeterminate === true
+    }
     super.updated(changedProperties)
   }
 

package/dist/checkbox-UT6D1Wi0.cjs

@@ -1,31 +0,0 @@
-"use strict";const t=require("./element-CJ_QKaki.cjs"),r=require("./input-element-KUsQQ-1d.cjs"),o=require("./ref-BFa5Utho.cjs"),n=require("./class-map-C_erArZz.cjs");var k=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(p,e,h,c)=>{for(var s=c>1?void 0:c?u(e,h):e,l=p.length-1,a;l>=0;l--)(a=p[l])&&(s=(c?a(e,h,s):a(s))||s);return c&&s&&k(e,h,s),s};exports.PktCheckbox=class extends r.PktInputElement{constructor(){super(...arguments),this.inputRef=o.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.type="checkbox",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,h,c){e==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),e==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0,this.inputRef.value&&(this.inputRef.value.checked=this.checked)),super.attributeChangedCallback(e,h,c)}firstUpdated(e){e.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(e)}updated(e){e.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),e.has("checked")&&this.inputRef.value&&(this.inputRef.value.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.updated(e)}render(){const e=n.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),h=n.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),c=n.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",l=()=>t.x`
-        ${this.tagText?t.x`<span class=${s+" pkt-tag--gray"}>${this.tagText}</span>`:t.E}
-        ${this.optionalTag?t.x`<span class=${s+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.E}
-        ${this.requiredTag?t.x`<span class=${s+" pkt-tag--beige"}>${this.requiredText}</span>`:t.E}
-      `,a=()=>t.x`
-        <label class=${c} for=${this.id+"-internal"}>
-          ${this.label} ${l()}
-          ${this.checkHelptext?t.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:t.E}
-        </label>
-      `;return t.x`
-      <div class="pkt-input-check">
-        <div class=${e}>
-          ${this.labelPosition==="left"?a():t.E}
-          <input
-            id=${this.id+"-internal"}
-            class=${h}
-            type="checkbox"
-            ?disabled=${this.disabled}
-            name=${this.name+"-internal"}
-            ${o.n(this.inputRef)}
-            @change=${this.handleChange}
-            @click=${this.handleClick}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-            role=${this.isSwitch?"switch":"checkbox"}
-          />
-          ${this.labelPosition==="right"?a():t.E}
-        </div>
-      </div>
-    `}handleClick(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1}handleChange(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1;this.toggleChecked(e)}toggleChecked(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}const h=e.target;if(h&&h.disabled){e.preventDefault(),e.stopImmediatePropagation();return}e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(":checked"),this.valueChecked(this.checked))}};i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"value",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"checkHelptext",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"defaultChecked",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hasTile",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"isSwitch",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"labelPosition",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hideLabel",2);i([t.n({type:Boolean,reflect:!0})],exports.PktCheckbox.prototype,"checked",2);i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"type",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"tagText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"optionalTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"optionalText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"requiredTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"requiredText",2);exports.PktCheckbox=i([t.t("pkt-checkbox")],exports.PktCheckbox);