@oslokommune/punkt-elements 13.5.11 → 13.5.13

package/CHANGELOG.md

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

package/dist/index.d.ts

@@ -1046,11 +1046,13 @@ export { PktRadioButton as PktRadiobutton }
 export declare class PktSelect extends PktInputElement implements IPktSelect {
     private inputRef;
     private helptextSlot;
-    options: TSelectOption[];
+    private _optionsProp;
     value: string;
     private _options;
     selectedIndex: number | null;
     selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined;
+    get options(): TSelectOption[];
+    set options(value: TSelectOption[]);
     constructor();
     connectedCallback(): void;
     add(item: HTMLOptionElement, before?: HTMLOptionElement | number): void;

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-D84REr9N.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-DonUad47.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`
+"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-D84REr9N.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-DonUad47.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-Be--DBcR.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-dcaJHvmR.js";
+import { P as $t } from "./select-VpX_cjMM.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-CD6Zn8YH.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-Be--DBcR.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-dcaJHvmR.js";
+import { P as t } from "./select-VpX_cjMM.js";
 const a = t;
 export {
   t as PktSelect,

package/dist/select-Be--DBcR.cjs

@@ -0,0 +1,49 @@
+"use strict";const h=require("./element-6DBpyGQm.cjs"),u=require("./state-DPobt-Yz.cjs"),r=require("./ref-iJtiv3o2.cjs"),o=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,_=Object.getOwnPropertyDescriptor,a=(p,t,e,s)=>{for(var i=s>1?void 0:s?_(t,e):t,l=p.length-1,n;l>=0;l--)(n=p[l])&&(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._optionsProp=[],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}get options(){return this._options.map(t=>({...t,selected:t.value===this.value}))}set options(t){this._optionsProp=t,this.requestUpdate("_optionsProp",this._options)}connectedCallback(){super.connectedCallback();const t=this._optionsProp.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._optionsProp,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){const s={value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled};if(e===void 0)this._options.push(s);else if(typeof e=="number")this._options.splice(e,0,s);else{const i=e.value||e.text,l=this._options.findIndex(n=>n.value===i);l>=0?this._options.splice(l,0,s):this._options.push(s)}t.selected&&(this.value=t.value||t.text,this.selectedIndex=this._options.findIndex(i=>i.value===this.value)),this.requestUpdate()}remove(t){var e;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),this._options.splice(t,1),this.requestUpdate())}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(){this.inputRef.value&&"showPicker"in this.inputRef.value&&this.inputRef.value.showPicker()}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(n=>n.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("_optionsProp")&&this._optionsProp.length>0&&(this._options=this._optionsProp,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._optionsProp.length&&(this._options=this._optionsProp),!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}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        ariaDescribedBy=${o.o(this.ariaDescribedBy)}
+        class="pkt-select"
+        errorMessage=${o.o(this.errorMessage)}
+        forId=${this.id+"-input"}
+        helptext=${o.o(this.helptext)}
+        helptextDropdown=${o.o(this.helptextDropdown)}
+        helptextDropdownButton=${o.o(this.helptextDropdownButton)}
+        label=${o.o(this.label)}
+        optionalText=${o.o(this.optionalText)}
+        requiredText=${o.o(this.requiredText)}
+        tagText=${o.o(this.tagText)}
+      >
+        <select
+          class=${t}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${o.o(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id+"-input"}
+          name=${(this.name||this.id)+"-input"}
+          value=${this.value}
+          @change=${e=>{this.touched=!0,this.value=e.target.value,e.stopImmediatePropagation()}}
+          @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+          @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
+          @blur=${e=>{this.onBlur(),e.stopImmediatePropagation()}}
+          ${r.n(this.inputRef)}
+        >
+          ${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" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      </pkt-input-wrapper>
+    `}returnNumberOrNull(t){return t==null||isNaN(t)?null:t}};a([h.n({type:Array,attribute:"options"})],exports.PktSelect.prototype,"_optionsProp",2);a([h.n({type:String})],exports.PktSelect.prototype,"value",2);a([u.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=a([h.t("pkt-select")],exports.PktSelect);

package/dist/select-VpX_cjMM.js

@@ -0,0 +1,173 @@
+import { x as r, n as c, a as v } from "./element-CgEWt74-.js";
+import { r as f } from "./state-Bo2bck5_.js";
+import { e as u, n as d } from "./ref-BBYSqgeW.js";
+import { o as l } from "./if-defined-CmuO4Vz9.js";
+import { P as _ } from "./input-element-NnrDmp4r.js";
+import { P as x } from "./pkt-options-controller-CZO1nxZ8.js";
+import { P as b } from "./pkt-slot-controller-BPGj-LC5.js";
+import "./input-wrapper-Dr__Sxql.js";
+var $ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (t, e, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? m(e, s) : e, n = t.length - 1, p; n >= 0; n--)
+    (p = t[n]) && (o = (i ? p(e, s, o) : p(o)) || o);
+  return i && o && $(e, s, o), o;
+};
+let h = class extends _ {
+  constructor() {
+    super(), this.inputRef = u(), this.helptextSlot = u(), this._optionsProp = [], this.value = "", this._options = [], this.selectedIndex = -1, this.selectedOptions = void 0, this.optionsController = new x(this), this.slotController = new b(this, this.helptextSlot), this.slotController.skipOptions = !0;
+  }
+  // Getter and setter for options to expose the actual parsed options
+  get options() {
+    return this._options.map((t) => ({
+      ...t,
+      selected: t.value === this.value
+    }));
+  }
+  set options(t) {
+    this._optionsProp = t, this.requestUpdate("_optionsProp", this._options);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this._optionsProp.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._optionsProp, this._options.forEach((s) => {
+      s.selected && !this.value && (this.value = s.value);
+    }));
+  }
+  // Support native Select method `add`
+  add(t, e) {
+    const s = {
+      value: t.value || t.text,
+      label: t.text || t.value,
+      selected: t.selected,
+      disabled: t.disabled
+    };
+    if (e === void 0)
+      this._options.push(s);
+    else if (typeof e == "number")
+      this._options.splice(e, 0, s);
+    else {
+      const i = e.value || e.text, o = this._options.findIndex((n) => n.value === i);
+      o >= 0 ? this._options.splice(o, 0, s) : this._options.push(s);
+    }
+    t.selected && (this.value = t.value || t.text, this.selectedIndex = this._options.findIndex((i) => i.value === this.value)), this.requestUpdate();
+  }
+  // Support native Select method `remove`
+  remove(t) {
+    var e;
+    typeof t == "number" && (this.selectedIndex === t && (this.value = ((e = this._options[0]) == null ? void 0 : e.value) || ""), this._options.splice(t, 1), this.requestUpdate());
+  }
+  // Support native Select method `item`
+  item(t) {
+    var e;
+    return (e = this.inputRef.value) == null ? void 0 : e.item(t);
+  }
+  // Support native Select method `namedItem`
+  namedItem(t) {
+    var e;
+    return (e = this.inputRef.value) == null ? void 0 : e.namedItem(t);
+  }
+  // Support native Select method `showPicker`
+  showPicker() {
+    this.inputRef.value && "showPicker" in this.inputRef.value && this.inputRef.value.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("_optionsProp") && this._optionsProp.length > 0 && (this._options = this._optionsProp, 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._optionsProp.length && (this._options = this._optionsProp), !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`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        ariaDescribedBy=${l(this.ariaDescribedBy)}
+        class="pkt-select"
+        errorMessage=${l(this.errorMessage)}
+        forId=${this.id + "-input"}
+        helptext=${l(this.helptext)}
+        helptextDropdown=${l(this.helptextDropdown)}
+        helptextDropdownButton=${l(this.helptextDropdownButton)}
+        label=${l(this.label)}
+        optionalText=${l(this.optionalText)}
+        requiredText=${l(this.requiredText)}
+        tagText=${l(this.tagText)}
+      >
+        <select
+          class=${t}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${l(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id + "-input"}
+          name=${(this.name || this.id) + "-input"}
+          value=${this.value}
+          @change=${(e) => {
+      this.touched = !0, this.value = e.target.value, e.stopImmediatePropagation();
+    }}
+          @input=${(e) => {
+      this.onInput(), e.stopImmediatePropagation();
+    }}
+          @focus=${(e) => {
+      this.onFocus(), e.stopImmediatePropagation();
+    }}
+          @blur=${(e) => {
+      this.onBlur(), e.stopImmediatePropagation();
+    }}
+          ${d(this.inputRef)}
+        >
+          ${this._options.length > 0 ? this._options.map(
+      (e) => r`<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>
+    `;
+  }
+  returnNumberOrNull(t) {
+    return t == null || isNaN(t) ? null : t;
+  }
+};
+a([
+  c({ type: Array, attribute: "options" })
+], h.prototype, "_optionsProp", 2);
+a([
+  c({ type: String })
+], h.prototype, "value", 2);
+a([
+  f()
+], h.prototype, "_options", 2);
+h = a([
+  v("pkt-select")
+], h);
+export {
+  h as P
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.11",
+  "version": "13.5.13",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -41,7 +41,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.3.1",
-    "@oslokommune/punkt-css": "^13.5.11",
+    "@oslokommune/punkt-css": "^13.5.12",
     "@testing-library/jest-dom": "^6.6.3",
     "@vitest/ui": "^1.0.0",
     "jest-axe": "^9.0.0",
@@ -73,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "09ba8de9047136b06b520d7208b31a1743bcf1d7"
+  "gitHead": "1a1aad782fd8d6b632557869c3c4cd9ad2f663cf"
 }

package/src/components/select/select.ts

@@ -43,7 +43,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
   private inputRef: Ref<HTMLSelectElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
-  @property({ type: Array }) options: TSelectOption[] = []
+  @property({ type: Array, attribute: 'options' }) private _optionsProp: TSelectOption[] = []
   @property({ type: String }) value: string = ''
 
   @state() private _options: TSelectOption[] = []
@@ -51,6 +51,19 @@ export class PktSelect extends PktInputElement implements IPktSelect {
   public selectedIndex: number | null = -1
   public selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined = undefined
 
+  // Getter and setter for options to expose the actual parsed options
+  public get options(): TSelectOption[] {
+    return this._options.map((option) => ({
+      ...option,
+      selected: option.value === this.value,
+    }))
+  }
+
+  public set options(value: TSelectOption[]) {
+    this._optionsProp = value
+    this.requestUpdate('_optionsProp', this._options)
+  }
+
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)
@@ -58,11 +71,10 @@ export class PktSelect extends PktInputElement implements IPktSelect {
     this.slotController.skipOptions = true
   }
 
-  // Used for initilization
   connectedCallback(): void {
     super.connectedCallback()
 
-    const optionsReceivedFromProps = this.options.length > 0
+    const optionsReceivedFromProps = this._optionsProp.length > 0
     const checkIfOptionNodesInSlot =
       this.optionsController.nodes.length && this.optionsController.nodes.length > 0
 
@@ -83,7 +95,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
         this._options.push(option)
       })
     } else {
-      this._options = this.options
+      this._options = this._optionsProp
       this._options.forEach((option) => {
         if (option.selected && !this.value) {
           this.value = option.value
@@ -94,17 +106,32 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   // Support native Select method `add`
   public add(item: HTMLOptionElement, before?: HTMLOptionElement | number) {
-    this.inputRef.value?.add(item, before)
-    this._options.push({
+    const newOption = {
       value: item.value || item.text,
       label: item.text || item.value,
       selected: item.selected,
       disabled: item.disabled,
-    })
+    }
+
+    // Add to our internal options array at the correct position
+    if (before === undefined) {
+      this._options.push(newOption)
+    } else if (typeof before === 'number') {
+      this._options.splice(before, 0, newOption)
+    } else {
+      // If before is an HTMLOptionElement, find its index in our options
+      const beforeValue = before.value || before.text
+      const beforeIndex = this._options.findIndex((opt) => opt.value === beforeValue)
+      if (beforeIndex >= 0) {
+        this._options.splice(beforeIndex, 0, newOption)
+      } else {
+        this._options.push(newOption)
+      }
+    }
+
     if (item.selected) {
       this.value = item.value || item.text
-      this.selectedIndex = this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
-      this.selectedOptions = this.inputRef.value?.selectedOptions
+      this.selectedIndex = this._options.findIndex((opt) => opt.value === this.value)
     }
     this.requestUpdate()
   }
@@ -115,7 +142,8 @@ export class PktSelect extends PktInputElement implements IPktSelect {
       if (this.selectedIndex === item) {
         this.value = this._options[0]?.value || ''
       }
-      this.inputRef.value?.remove(item)
+      this._options.splice(item, 1)
+      this.requestUpdate()
     }
   }
 
@@ -131,7 +159,9 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   // Support native Select method `showPicker`
   public showPicker() {
-    this.inputRef.value?.showPicker()
+    if (this.inputRef.value && 'showPicker' in this.inputRef.value) {
+      ;(this.inputRef.value as any).showPicker()
+    }
   }
 
   public attributeChangedCallback(name: string, _old: string, value: string): void {
@@ -141,7 +171,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
     if (name === 'value' && this.value !== _old) {
       this.selectedIndex = this.touched
         ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
-        : this.options.findIndex((option) => option.value === value)
+        : this._options.findIndex((option) => option.value === value)
       this.selectedOptions = this.inputRef.value?.selectedOptions
       this.valueChanged(value, _old)
     }
@@ -150,8 +180,8 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   update(changedProperties: PropertyValues) {
     super.update(changedProperties)
-    if (changedProperties.has('options')) {
-      this._options = this.options
+    if (changedProperties.has('_optionsProp') && this._optionsProp.length > 0) {
+      this._options = this._optionsProp
       this.requestUpdate('_options')
 
       // If no value is set and we have options, set to first option
@@ -163,7 +193,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
     if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
       this.selectedIndex = this.touched
         ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
-        : this.options.findIndex((option) => option.value === this.value)
+        : this._options.findIndex((option) => option.value === this.value)
       this.selectedOptions = this.inputRef.value?.selectedOptions
       this.valueChanged(this.value, changedProperties.get('value'))
     }
@@ -174,8 +204,8 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties)
-    if (this.options.length) {
-      this._options = this.options
+    if (this._optionsProp.length) {
+      this._options = this._optionsProp
     }
     // If no options are selected, set value and selectedIndex to the first option
     if (!this.value && this._options.length > 0) {

package/dist/select-CD6Zn8YH.cjs

@@ -1,49 +0,0 @@
-"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}
-        ?hasError=${this.hasError}
-        ?hasFieldset=${this.hasFieldset}
-        ?inline=${this.inline}
-        ?optionalTag=${this.optionalTag}
-        ?requiredTag=${this.requiredTag}
-        ?useWrapper=${this.useWrapper}
-        ariaDescribedBy=${l.o(this.ariaDescribedBy)}
-        class="pkt-select"
-        errorMessage=${l.o(this.errorMessage)}
-        forId=${this.id+"-input"}
-        helptext=${l.o(this.helptext)}
-        helptextDropdown=${l.o(this.helptextDropdown)}
-        helptextDropdownButton=${l.o(this.helptextDropdownButton)}
-        label=${l.o(this.label)}
-        optionalText=${l.o(this.optionalText)}
-        requiredText=${l.o(this.requiredText)}
-        tagText=${l.o(this.tagText)}
-      >
-        <select
-          class=${t}
-          aria-invalid=${this.hasError}
-          aria-errormessage=${`${this.id}-error`}
-          aria-labelledby=${l.o(this.ariaLabelledby)}
-          ?disabled=${this.disabled}
-          id=${this.id+"-input"}
-          name=${(this.name||this.id)+"-input"}
-          value=${this.value}
-          @change=${e=>{this.touched=!0,this.value=e.target.value,e.stopImmediatePropagation()}}
-          @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
-          @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
-          @blur=${e=>{this.onBlur(),e.stopImmediatePropagation()}}
-          ${r.n(this.inputRef)}
-        >
-          ${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" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
-      </pkt-input-wrapper>
-    `}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-dcaJHvmR.js

@@ -1,157 +0,0 @@
-import { x as p, n as c, a as v } from "./element-CgEWt74-.js";
-import { r as f } from "./state-Bo2bck5_.js";
-import { e as u, n as d } from "./ref-BBYSqgeW.js";
-import { o } from "./if-defined-CmuO4Vz9.js";
-import { P as b } from "./input-element-NnrDmp4r.js";
-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, 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 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;
-  }
-  // Used for initilization
-  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);
-    }));
-  }
-  // Support native Select method `add`
-  add(t, e) {
-    var s, i, l;
-    (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 = (l = this.inputRef.value) == null ? void 0 : l.selectedOptions), this.requestUpdate();
-  }
-  // Support native Select method `remove`
-  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));
-  }
-  // Support native Select method `item`
-  item(t) {
-    var e;
-    return (e = this.inputRef.value) == null ? void 0 : e.item(t);
-  }
-  // Support native Select method `namedItem`
-  namedItem(t) {
-    var e;
-    return (e = this.inputRef.value) == null ? void 0 : e.namedItem(t);
-  }
-  // Support native Select method `showPicker`
-  showPicker() {
-    var t;
-    (t = this.inputRef.value) == null || t.showPicker();
-  }
-  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((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("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 p`
-      <pkt-input-wrapper
-        ?counter=${this.counter}
-        ?disabled=${this.disabled}
-        ?hasError=${this.hasError}
-        ?hasFieldset=${this.hasFieldset}
-        ?inline=${this.inline}
-        ?optionalTag=${this.optionalTag}
-        ?requiredTag=${this.requiredTag}
-        ?useWrapper=${this.useWrapper}
-        ariaDescribedBy=${o(this.ariaDescribedBy)}
-        class="pkt-select"
-        errorMessage=${o(this.errorMessage)}
-        forId=${this.id + "-input"}
-        helptext=${o(this.helptext)}
-        helptextDropdown=${o(this.helptextDropdown)}
-        helptextDropdownButton=${o(this.helptextDropdownButton)}
-        label=${o(this.label)}
-        optionalText=${o(this.optionalText)}
-        requiredText=${o(this.requiredText)}
-        tagText=${o(this.tagText)}
-      >
-        <select
-          class=${t}
-          aria-invalid=${this.hasError}
-          aria-errormessage=${`${this.id}-error`}
-          aria-labelledby=${o(this.ariaLabelledby)}
-          ?disabled=${this.disabled}
-          id=${this.id + "-input"}
-          name=${(this.name || this.id) + "-input"}
-          value=${this.value}
-          @change=${(e) => {
-      this.touched = !0, this.value = e.target.value, e.stopImmediatePropagation();
-    }}
-          @input=${(e) => {
-      this.onInput(), e.stopImmediatePropagation();
-    }}
-          @focus=${(e) => {
-      this.onFocus(), e.stopImmediatePropagation();
-    }}
-          @blur=${(e) => {
-      this.onBlur(), e.stopImmediatePropagation();
-    }}
-          ${d(this.inputRef)}
-        >
-          ${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>`
-    ) : ""}
-        </select>
-        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
-      </pkt-input-wrapper>
-    `;
-  }
-  returnNumberOrNull(t) {
-    return t == null || isNaN(t) ? null : t;
-  }
-};
-n([
-  c({ type: Array })
-], a.prototype, "options", 2);
-n([
-  c({ type: String })
-], a.prototype, "value", 2);
-n([
-  f()
-], a.prototype, "_options", 2);
-a = n([
-  v("pkt-select")
-], a);
-export {
-  a as P
-};