@oslokommune/punkt-elements 12.40.0 → 12.40.1

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.40.1](https://github.com/oslokommune/punkt/compare/12.40.0...12.40.1) (2025-05-20)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.39.8](https://github.com/oslokommune/punkt/compare/12.39.7...12.39.8) (2025-05-19)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -295,6 +295,7 @@ export declare interface IPktProgressbar {
 
 declare interface IPktSelect {
     options: TSelectOption[];
+    value: string;
 }
 
 declare interface IPktTag {
@@ -1029,12 +1030,20 @@ export declare class PktSelect extends PktInputElement implements IPktSelect {
     options: TSelectOption[];
     value: string;
     private _options;
+    selectedIndex: number | null;
+    selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined;
     constructor();
     connectedCallback(): void;
+    add(item: HTMLOptionElement, before?: HTMLOptionElement | number): void;
+    remove(item?: number): void;
+    item(index: number): HTMLOptionElement | null | undefined;
+    namedItem(name: string): HTMLOptionElement | null | undefined;
+    showPicker(): void;
     attributeChangedCallback(name: string, _old: string, value: string): void;
-    updated(changedProperties: PropertyValues): void;
+    update(changedProperties: PropertyValues): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
+    private returnNumberOrNull;
 }
 
 /**

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-C60j8BsA.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-C8wbJJyj.cjs"),g=require("./combobox-dwkB9Yv_.cjs"),h=require("./consent-1ZSUrWK9.cjs"),f=require("./checkbox-7ct89AUo.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-BDnncwne.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-nesPZCIx.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-ndMy12Pb.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-C8GbUY8p.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-DGWTMdAZ.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-yUzqcBYY.cjs"),M=require("./textinput-8mT0npMY.cjs"),R=require("./select-Brv7vglu.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-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-C60j8BsA.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-C8wbJJyj.cjs"),g=require("./combobox-dwkB9Yv_.cjs"),h=require("./consent-1ZSUrWK9.cjs"),f=require("./checkbox-7ct89AUo.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-BDnncwne.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-nesPZCIx.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-ndMy12Pb.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-C8GbUY8p.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-DGWTMdAZ.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-yUzqcBYY.cjs"),M=require("./textinput-8mT0npMY.cjs"),R=require("./select-ChpPtH7u.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-CET0zjgD.js";
 import { P as ut } from "./tag-Cu8afZy8.js";
 import { P as vt } from "./textarea-l10XGym1.js";
 import { P as bt } from "./textinput-B1n0gFaS.js";
-import { P as $t } from "./select-C36Z4gui.js";
+import { P as $t } from "./select-C2Lr2fdU.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-Brv7vglu.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-ChpPtH7u.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-C36Z4gui.js";
+import { P as t } from "./select-C2Lr2fdU.js";
 const a = t;
 export {
   t as PktSelect,

package/dist/select-C2Lr2fdU.js

@@ -0,0 +1,153 @@
+import { x as p, n as c, a as v } from "./element-DjjF_tEh.js";
+import { r as f } from "./state-BtbpSrdV.js";
+import { e as u, n as d } from "./ref-iIffqQAI.js";
+import { o } from "./if-defined-BErSJCeJ.js";
+import { P as b } from "./input-element-B2GjFOXX.js";
+import { P as $ } from "./pkt-options-controller-DepYQBqb.js";
+import { P as x } from "./pkt-slot-controller-DtDaD9q_.js";
+import "./input-wrapper-BdeoMGnk.js";
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, e, s, i) => {
+  for (var l = i > 1 ? void 0 : i ? g(e, s) : e, n = t.length - 1, h; n >= 0; n--)
+    (h = t[n]) && (l = (i ? h(e, s, l) : h(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.getAttribute("value") || s.textContent || "",
+        label: s.textContent || s.getAttribute("value") || "",
+        disabled: !!s.getAttribute("disabled")
+      };
+      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" && ((e = this.inputRef.value) == null || e.remove(t), this._options.splice(t, 1), this.selectedIndex === t && (this.value = ((s = this._options[0]) == null ? void 0 : s.value) || ""));
+  }
+  // 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((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("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)}
+      >
+        <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.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}
+              >
+                ${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;
+  }
+};
+r([
+  c({ type: Array })
+], a.prototype, "options", 2);
+r([
+  c({ type: String })
+], a.prototype, "value", 2);
+r([
+  f()
+], a.prototype, "_options", 2);
+a = r([
+  v("pkt-select")
+], a);
+export {
+  a as P
+};

package/dist/select-ChpPtH7u.cjs

@@ -0,0 +1,47 @@
+"use strict";const r=require("./element-BSypUpzA.cjs"),p=require("./state-B5KCNjEd.cjs"),h=require("./ref-BvbyvXRH.cjs"),o=require("./if-defined-a3sotaUr.cjs"),d=require("./input-element-DK0UmdGZ.cjs"),c=require("./pkt-options-controller-Ay9ELZTV.cjs"),v=require("./pkt-slot-controller-Da-RgXfS.cjs");require("./input-wrapper-B-f_SotM.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,l=u.length-1,n;l>=0;l--)(n=u[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=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.getAttribute("value")||s.textContent||"",label:s.textContent||s.getAttribute("value")||"",disabled:!!s.getAttribute("disabled")};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,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()}remove(t){var e,s;typeof t=="number"&&((e=this.inputRef.value)==null||e.remove(t),this._options.splice(t,1),this.selectedIndex===t&&(this.value=((s=this._options[0])==null?void 0:s.value)||""))}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,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("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`
+      <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)}
+      >
+        <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.value=e.target.value,e.stopImmediatePropagation()}}
+          @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+          @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
+          @blur=${e=>{this.onBlur(),e.stopImmediatePropagation()}}
+          ${h.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}
+              >
+                ${e.label}
+              </option>`)}
+        </select>
+        <div class="pkt-contents" ${h.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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.40.0",
+  "version": "12.40.1",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -59,5 +59,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "01a4a75820f2c854bd51a4fa590bedf37e2ce8ce"
+  "gitHead": "6bd6f3b4b95dc4beadf43392788dfd17d1f37efc"
 }

package/src/components/select/select.ts

@@ -16,6 +16,7 @@ export type TSelectOption = {
 
 export interface IPktSelect {
   options: TSelectOption[]
+  value: string
 }
 
 /**
@@ -42,10 +43,13 @@ export class PktSelect extends PktInputElement implements IPktSelect {
   private helptextSlot: Ref<HTMLElement> = createRef()
 
   @property({ type: Array }) options: TSelectOption[] = []
-  @property({ type: String, reflect: true }) value: string = ''
+  @property({ type: String }) value: string = ''
 
   @state() private _options: TSelectOption[] = []
 
+  public selectedIndex: number | null = -1
+  public selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined = undefined
+
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)
@@ -75,23 +79,78 @@ export class PktSelect extends PktInputElement implements IPktSelect {
       })
     } else {
       this._options = this.options
+      this._options.forEach((option) => {
+        if (option.selected && !this.value) {
+          this.value = option.value
+        }
+      })
+    }
+  }
+
+  // Support native Select method `add`
+  public add(item: HTMLOptionElement, before?: HTMLOptionElement | number) {
+    this.inputRef.value?.add(item, before)
+    this._options.push({
+      value: item.value || item.text,
+      label: item.text || item.value,
+      selected: item.selected,
+      disabled: item.disabled,
+    })
+    if (item.selected) {
+      this.value = item.value || item.text
+      this.selectedIndex = this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
+      this.selectedOptions = this.inputRef.value?.selectedOptions
+    }
+    this.requestUpdate()
+  }
+
+  // Support native Select method `remove`
+  public remove(item?: number) {
+    if (typeof item === 'number') {
+      this.inputRef.value?.remove(item)
+      this._options.splice(item, 1)
+      if (this.selectedIndex === item) {
+        this.value = this._options[0]?.value || ''
+      }
     }
   }
 
+  // Support native Select method `item`
+  public item(index: number) {
+    return this.inputRef.value?.item(index)
+  }
+
+  // Support native Select method `namedItem`
+  public namedItem(name: string) {
+    return this.inputRef.value?.namedItem(name)
+  }
+
+  // Support native Select method `showPicker`
+  public showPicker() {
+    this.inputRef.value?.showPicker()
+  }
+
   public attributeChangedCallback(name: string, _old: string, value: string): void {
     if (name === 'options') {
       this._options = value ? JSON.parse(value) : []
     }
     if (name === 'value' && this.value !== _old) {
+      this.selectedIndex = this.touched
+        ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
+        : this.options.findIndex((option) => option.value === value)
+      this.selectedOptions = this.inputRef.value?.selectedOptions
       this.valueChanged(value, _old)
     }
     super.attributeChangedCallback(name, _old, value)
   }
 
-  updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties)
-    if (changedProperties.has('value')) {
-      this.counterCurrent = this.value?.length || 0
+  update(changedProperties: PropertyValues) {
+    super.update(changedProperties)
+    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.selectedOptions = this.inputRef.value?.selectedOptions
       this.valueChanged(this.value, changedProperties.get('value'))
     }
     if (changedProperties.has('id')) {
@@ -104,6 +163,14 @@ export class PktSelect extends PktInputElement implements IPktSelect {
     if (this.options.length) {
       this._options = this.options
     }
+    // If no options are selected, set value and selectedIndex to the first option
+    if (!this.value && this._options.length > 0) {
+      this.value = this._options[0].value
+      this.selectedIndex = 0
+    } else {
+      this.selectedIndex = this._options.findIndex((option) => option.value === this.value)
+    }
+    this.selectedOptions = this.inputRef.value?.selectedOptions
   }
 
   render() {
@@ -120,8 +187,6 @@ export class PktSelect extends PktInputElement implements IPktSelect {
         ?requiredTag=${this.requiredTag}
         ?useWrapper=${this.useWrapper}
         ariaDescribedBy=${ifDefined(this.ariaDescribedBy)}
-        .counterCurrent=${this.counterCurrent}
-        .counterMaxLength=${this.counterMaxLength}
         class="pkt-select"
         errorMessage=${ifDefined(this.errorMessage)}
         forId=${this.id + '-input'}
@@ -164,7 +229,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
             (option) =>
               html`<option
                 value=${option.value}
-                ?selected=${this.value == option.value}
+                ?selected=${this.value == option.value || option.selected}
                 ?disabled=${option.disabled}
               >
                 ${option.label}
@@ -175,4 +240,11 @@ export class PktSelect extends PktInputElement implements IPktSelect {
       </pkt-input-wrapper>
     `
   }
+
+  private returnNumberOrNull(value: number | null | undefined): number | null {
+    if (value === undefined || value === null || isNaN(value)) {
+      return null
+    }
+    return value
+  }
 }

package/dist/select-Brv7vglu.cjs

@@ -1,49 +0,0 @@
-"use strict";const r=require("./element-BSypUpzA.cjs"),u=require("./state-B5KCNjEd.cjs"),l=require("./ref-BvbyvXRH.cjs"),o=require("./if-defined-a3sotaUr.cjs"),d=require("./input-element-DK0UmdGZ.cjs"),c=require("./pkt-options-controller-Ay9ELZTV.cjs"),$=require("./pkt-slot-controller-Da-RgXfS.cjs");require("./input-wrapper-B-f_SotM.cjs");var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(a,e,t,i)=>{for(var s=i>1?void 0:i?v(e,t):e,p=a.length-1,h;p>=0;p--)(h=a[p])&&(s=(i?h(e,t,s):h(s))||s);return i&&s&&b(e,t,s),s};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=l.e(),this.helptextSlot=l.e(),this.options=[],this.value="",this._options=[],this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new $.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const e=this.options.length>0,t=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!e&&t?this.optionsController.nodes.forEach(i=>{const s={value:i.getAttribute("value")||i.textContent||"",label:i.textContent||i.getAttribute("value")||"",disabled:!!i.getAttribute("disabled")};i.getAttribute("selected")&&!this.value&&(this.value=s.value),this._options.push(s)}):this._options=this.options}attributeChangedCallback(e,t,i){e==="options"&&(this._options=i?JSON.parse(i):[]),e==="value"&&this.value!==t&&this.valueChanged(i,t),super.attributeChangedCallback(e,t,i)}updated(e){var t;super.updated(e),e.has("value")&&(this.counterCurrent=((t=this.value)==null?void 0:t.length)||0,this.valueChanged(this.value,e.get("value"))),e.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(e){super.firstUpdated(e),this.options.length&&(this._options=this.options)}render(){const e=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return r.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)}
-        .counterCurrent=${this.counterCurrent}
-        .counterMaxLength=${this.counterMaxLength}
-        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)}
-      >
-        <select
-          class=${e}
-          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=${t=>{this.value=t.target.value,t.stopImmediatePropagation()}}
-          @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
-          @focus=${t=>{this.onFocus(),t.stopImmediatePropagation()}}
-          @blur=${t=>{this.onBlur(),t.stopImmediatePropagation()}}
-          ${l.n(this.inputRef)}
-        >
-          ${this._options.length>0&&this._options.map(t=>r.x`<option
-                value=${t.value}
-                ?selected=${this.value==t.value}
-                ?disabled=${t.disabled}
-              >
-                ${t.label}
-              </option>`)}
-        </select>
-        <div class="pkt-contents" ${l.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
-      </pkt-input-wrapper>
-    `}};n([r.n({type:Array})],exports.PktSelect.prototype,"options",2);n([r.n({type:String,reflect:!0})],exports.PktSelect.prototype,"value",2);n([u.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=n([r.t("pkt-select")],exports.PktSelect);

package/dist/select-C36Z4gui.js

@@ -1,118 +0,0 @@
-import { x as h, n as c, a as $ } from "./element-DjjF_tEh.js";
-import { r as b } from "./state-BtbpSrdV.js";
-import { e as u, n as d } from "./ref-iIffqQAI.js";
-import { o as s } from "./if-defined-BErSJCeJ.js";
-import { P as v } from "./input-element-B2GjFOXX.js";
-import { P as f } from "./pkt-options-controller-DepYQBqb.js";
-import { P as m } from "./pkt-slot-controller-DtDaD9q_.js";
-import "./input-wrapper-BdeoMGnk.js";
-var g = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (e, t, i, o) => {
-  for (var r = o > 1 ? void 0 : o ? C(t, i) : t, n = e.length - 1, p; n >= 0; n--)
-    (p = e[n]) && (r = (o ? p(t, i, r) : p(r)) || r);
-  return o && r && g(t, i, r), r;
-};
-let l = class extends v {
-  constructor() {
-    super(), this.inputRef = u(), this.helptextSlot = u(), this.options = [], this.value = "", this._options = [], this.optionsController = new f(this), this.slotController = new m(this, this.helptextSlot), this.slotController.skipOptions = !0;
-  }
-  // Used for initilization
-  connectedCallback() {
-    super.connectedCallback();
-    const e = this.options.length > 0, t = this.optionsController.nodes.length && this.optionsController.nodes.length > 0;
-    !e && t ? this.optionsController.nodes.forEach((i) => {
-      const o = {
-        value: i.getAttribute("value") || i.textContent || "",
-        label: i.textContent || i.getAttribute("value") || "",
-        disabled: !!i.getAttribute("disabled")
-      };
-      i.getAttribute("selected") && !this.value && (this.value = o.value), this._options.push(o);
-    }) : this._options = this.options;
-  }
-  attributeChangedCallback(e, t, i) {
-    e === "options" && (this._options = i ? JSON.parse(i) : []), e === "value" && this.value !== t && this.valueChanged(i, t), super.attributeChangedCallback(e, t, i);
-  }
-  updated(e) {
-    var t;
-    super.updated(e), e.has("value") && (this.counterCurrent = ((t = this.value) == null ? void 0 : t.length) || 0, this.valueChanged(this.value, e.get("value"))), e.has("id") && !this.name && this.id && (this.name = this.id);
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.options.length && (this._options = this.options);
-  }
-  render() {
-    const e = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
-    return h`
-      <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=${s(this.ariaDescribedBy)}
-        .counterCurrent=${this.counterCurrent}
-        .counterMaxLength=${this.counterMaxLength}
-        class="pkt-select"
-        errorMessage=${s(this.errorMessage)}
-        forId=${this.id + "-input"}
-        helptext=${s(this.helptext)}
-        helptextDropdown=${s(this.helptextDropdown)}
-        helptextDropdownButton=${s(this.helptextDropdownButton)}
-        label=${s(this.label)}
-        optionalText=${s(this.optionalText)}
-        requiredText=${s(this.requiredText)}
-      >
-        <select
-          class=${e}
-          aria-invalid=${this.hasError}
-          aria-errormessage=${`${this.id}-error`}
-          aria-labelledby=${s(this.ariaLabelledby)}
-          ?disabled=${this.disabled}
-          id=${this.id + "-input"}
-          name=${(this.name || this.id) + "-input"}
-          value=${this.value}
-          @change=${(t) => {
-      this.value = t.target.value, t.stopImmediatePropagation();
-    }}
-          @input=${(t) => {
-      this.onInput(), t.stopImmediatePropagation();
-    }}
-          @focus=${(t) => {
-      this.onFocus(), t.stopImmediatePropagation();
-    }}
-          @blur=${(t) => {
-      this.onBlur(), t.stopImmediatePropagation();
-    }}
-          ${d(this.inputRef)}
-        >
-          ${this._options.length > 0 && this._options.map(
-      (t) => h`<option
-                value=${t.value}
-                ?selected=${this.value == t.value}
-                ?disabled=${t.disabled}
-              >
-                ${t.label}
-              </option>`
-    )}
-        </select>
-        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
-      </pkt-input-wrapper>
-    `;
-  }
-};
-a([
-  c({ type: Array })
-], l.prototype, "options", 2);
-a([
-  c({ type: String, reflect: !0 })
-], l.prototype, "value", 2);
-a([
-  b()
-], l.prototype, "_options", 2);
-l = a([
-  $("pkt-select")
-], l);
-export {
-  l as P
-};