@oslokommune/punkt-elements 15.4.5 → 16.0.2

package/dist/pkt-textinput.js

@@ -1,4 +1,4 @@
-import { P as t } from "./textinput-BCi9p0Du.js";
+import { P as t } from "./textinput-C2AZ9ss2.js";
 const p = t;
 export {
   t as PktTextinput,

package/dist/{radiobutton-95wp024h.cjs → radiobutton-CNHCpKn0.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-CMTfByxQ.cjs"),r=require("./state-BNgpvY-A.cjs"),u=require("./input-element-DM0tY799.cjs"),h=require("./ref-CxLwrCxt.cjs"),c=require("./class-map-Bokp1SoS.cjs");var d=Object.defineProperty,k=Object.getOwnPropertyDescriptor,i=(p,e,n,a)=>{for(var s=a>1?void 0:a?k(e,n):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(s=(a?l(e,n,s):l(s))||s);return a&&s&&d(e,n,s),s};exports.PktRadioButton=class extends u.PktInputElement{constructor(){super(...arguments),this.inputRef=h.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type="radio",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut",this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,n,a){e==="defaultChecked"&&(this._checked=this.defaultChecked),e==="checked"&&(this._checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(e,n,a)}render(){const e=c.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),n=c.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=c.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",o=()=>t.b`
+"use strict";const t=require("./element-CMTfByxQ.cjs"),r=require("./state-BNgpvY-A.cjs"),u=require("./input-element-CSDVA3Y6.cjs"),h=require("./ref-CxLwrCxt.cjs"),c=require("./class-map-Bokp1SoS.cjs");var d=Object.defineProperty,k=Object.getOwnPropertyDescriptor,i=(p,e,n,a)=>{for(var s=a>1?void 0:a?k(e,n):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(s=(a?l(e,n,s):l(s))||s);return a&&s&&d(e,n,s),s};exports.PktRadioButton=class extends u.PktInputElement{constructor(){super(...arguments),this.inputRef=h.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type="radio",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut",this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,n,a){e==="defaultChecked"&&(this._checked=this.defaultChecked),e==="checked"&&(this._checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(e,n,a)}render(){const e=c.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),n=c.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=c.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",o=()=>t.b`
         ${this.tagText?t.b`<span class=${s+" pkt-tag--gray"}>${this.tagText}</span>`:t.A}
         ${this.optionalTag?t.b`<span class=${s+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.A}
         ${this.requiredTag?t.b`<span class=${s+" pkt-tag--beige"}>${this.requiredText}</span>`:t.A}

package/dist/{radiobutton-CTFAV5GU.js → radiobutton-DgC27mb0.js}

@@ -1,6 +1,6 @@
 import { b as h, A as n, n as s, t as d } from "./element-CV9utnHJ.js";
 import { r as k } from "./state-l4hGZdFJ.js";
-import { P as f } from "./input-element-Bkv6Yxld.js";
+import { P as f } from "./input-element-BGNbdzy2.js";
 import { e as g, n as b } from "./ref-Dma3n3i8.js";
 import { e as u } from "./class-map-3ADKve8g.js";
 var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, a, c, l) => {

package/dist/{select-YLvYAQX6.js → select-7VuYtPZv.js}

@@ -2,8 +2,8 @@ import { n as c, b as a, t as _ } from "./element-CV9utnHJ.js";
 import { e as u, n as d } from "./ref-Dma3n3i8.js";
 import { o as n } from "./if-defined-rXcLNTzN.js";
 import { r as $ } from "./state-l4hGZdFJ.js";
-import { P as x } from "./input-element-Bkv6Yxld.js";
-import { P as m } from "./pkt-options-controller-BcGywCmf.js";
+import { P as x } from "./input-element-BGNbdzy2.js";
+import { P as m } from "./pkt-options-controller-Z-bPox7n.js";
 import { P as b } from "./pkt-slot-controller-D7CrjM52.js";
 import "./input-wrapper-CaUY90qz.js";
 var P = Object.defineProperty, v = (e, t, s, o) => {

package/dist/{select-CZ_Lx5W6.cjs → select-PWPy5gTB.cjs}

@@ -1,4 +1,4 @@
-"use strict";const p=require("./element-CMTfByxQ.cjs"),h=require("./ref-CxLwrCxt.cjs"),l=require("./if-defined-hKKmbsI8.cjs"),c=require("./state-BNgpvY-A.cjs"),v=require("./input-element-DM0tY799.cjs"),f=require("./pkt-options-controller-BnTmkl3g.cjs"),_=require("./pkt-slot-controller-D4nKlom5.cjs");require("./input-wrapper-JU4D2TGu.cjs");var $=Object.defineProperty,u=(r,t,e,i)=>{for(var s=void 0,o=r.length-1,n;o>=0;o--)(n=r[o])&&(s=n(t,e,s)||s);return s&&$(t,e,s),s};class a extends v.PktInputElement{constructor(){super(...arguments),this._optionsProp=[],this._options=[]}get options(){return this._options.map(t=>({...t,selected:this.isOptionSelected(t)}))}set options(t){this._optionsProp=t,this.requestUpdate("_optionsProp",this._options)}isOptionSelected(t){return Array.isArray(this.value)?this.value.includes(t.value):t.value===this.value}findOptionByValue(t){return this._options.find(e=>e.value===t)}getSelectedOptions(){return this._options.filter(t=>this.isOptionSelected(t))}parseOptions(){var i,s;const t=this._optionsProp.length>0,e=((s=(i=this.optionsController)==null?void 0:i.nodes)==null?void 0:s.length)&&this.optionsController.nodes.length>0;t?this._options=this._optionsProp:e&&(this._options=this.optionsController.options)}willUpdate(t){super.willUpdate(t),this.parseOptions()}}u([p.n({type:Array,attribute:"options"})],a.prototype,"_optionsProp");u([c.r()],a.prototype,"_options");var x=Object.defineProperty,b=Object.getOwnPropertyDescriptor,d=(r,t,e,i)=>{for(var s=i>1?void 0:i?b(t,e):t,o=r.length-1,n;o>=0;o--)(n=r[o])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&x(t,e,s),s};exports.PktSelect=class extends a{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.value="",this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new f.PktOptionsSlotController(this),this.slotController=new _.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback(),this.parseOptions(),this._options.forEach(t=>{t.selected&&!this.value&&(this.value=t.value)})}add(t,e){const i={value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled};if(e===void 0)this._options.push(i);else if(typeof e=="number")this._options.splice(e,0,i);else{const s=e.value||e.text,o=this._options.findIndex(n=>n.value===s);o>=0?this._options.splice(o,0,i):this._options.push(i)}t.selected&&(this.value=t.value||t.text,this.selectedIndex=this._options.findIndex(s=>s.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,i){var s,o;t==="options"&&(this._options=i?JSON.parse(i):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((s=this.inputRef.value)==null?void 0:s.selectedIndex):this._options.findIndex(n=>n.value===i),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions,this.valueChanged(i,e)),super.attributeChangedCallback(t,e,i)}update(t){var e,i;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(s=>s.value===this.value),this.selectedOptions=(i=this.inputRef.value)==null?void 0:i.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(i=>i.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.b`
+"use strict";const p=require("./element-CMTfByxQ.cjs"),h=require("./ref-CxLwrCxt.cjs"),l=require("./if-defined-hKKmbsI8.cjs"),c=require("./state-BNgpvY-A.cjs"),v=require("./input-element-CSDVA3Y6.cjs"),f=require("./pkt-options-controller-BogGk-6J.cjs"),_=require("./pkt-slot-controller-D4nKlom5.cjs");require("./input-wrapper-JU4D2TGu.cjs");var $=Object.defineProperty,u=(r,t,e,i)=>{for(var s=void 0,o=r.length-1,n;o>=0;o--)(n=r[o])&&(s=n(t,e,s)||s);return s&&$(t,e,s),s};class a extends v.PktInputElement{constructor(){super(...arguments),this._optionsProp=[],this._options=[]}get options(){return this._options.map(t=>({...t,selected:this.isOptionSelected(t)}))}set options(t){this._optionsProp=t,this.requestUpdate("_optionsProp",this._options)}isOptionSelected(t){return Array.isArray(this.value)?this.value.includes(t.value):t.value===this.value}findOptionByValue(t){return this._options.find(e=>e.value===t)}getSelectedOptions(){return this._options.filter(t=>this.isOptionSelected(t))}parseOptions(){var i,s;const t=this._optionsProp.length>0,e=((s=(i=this.optionsController)==null?void 0:i.nodes)==null?void 0:s.length)&&this.optionsController.nodes.length>0;t?this._options=this._optionsProp:e&&(this._options=this.optionsController.options)}willUpdate(t){super.willUpdate(t),this.parseOptions()}}u([p.n({type:Array,attribute:"options"})],a.prototype,"_optionsProp");u([c.r()],a.prototype,"_options");var x=Object.defineProperty,b=Object.getOwnPropertyDescriptor,d=(r,t,e,i)=>{for(var s=i>1?void 0:i?b(t,e):t,o=r.length-1,n;o>=0;o--)(n=r[o])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&x(t,e,s),s};exports.PktSelect=class extends a{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.value="",this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new f.PktOptionsSlotController(this),this.slotController=new _.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback(),this.parseOptions(),this._options.forEach(t=>{t.selected&&!this.value&&(this.value=t.value)})}add(t,e){const i={value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled};if(e===void 0)this._options.push(i);else if(typeof e=="number")this._options.splice(e,0,i);else{const s=e.value||e.text,o=this._options.findIndex(n=>n.value===s);o>=0?this._options.splice(o,0,i):this._options.push(i)}t.selected&&(this.value=t.value||t.text,this.selectedIndex=this._options.findIndex(s=>s.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,i){var s,o;t==="options"&&(this._options=i?JSON.parse(i):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((s=this.inputRef.value)==null?void 0:s.selectedIndex):this._options.findIndex(n=>n.value===i),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions,this.valueChanged(i,e)),super.attributeChangedCallback(t,e,i)}update(t){var e,i;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(s=>s.value===this.value),this.selectedOptions=(i=this.inputRef.value)==null?void 0:i.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(i=>i.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.b`
       <pkt-input-wrapper
         ?counter=${this.counter}
         ?disabled=${this.disabled}

package/dist/{tag-68q0_Sn0.js → tag-DZPqFiem.js}

@@ -1,21 +1,21 @@
-import { e as u } from "./class-map-3ADKve8g.js";
-import { P as m, b as p, n as r, t as g } from "./element-CV9utnHJ.js";
-import { r as k } from "./state-l4hGZdFJ.js";
+import { e as d } from "./class-map-3ADKve8g.js";
+import { P as m, b as n, n as o, t as k } from "./element-CV9utnHJ.js";
+import { r as b } from "./state-l4hGZdFJ.js";
 import { P as y } from "./pkt-slot-controller-D7CrjM52.js";
-import { e as b, n as f } from "./ref-Dma3n3i8.js";
+import { e as g, n as f } from "./ref-Dma3n3i8.js";
 import "./icon-D0IQAVwS.js";
-import { o as d } from "./if-defined-rXcLNTzN.js";
-const _ = { size: { default: "medium" }, skin: { default: "blue" }, closeTag: { default: !1 }, type: { default: "button" } }, n = {
-  props: _
+import { o as u } from "./if-defined-rXcLNTzN.js";
+const $ = { size: { default: "medium" }, skin: { default: "blue" }, closeTag: { default: !1 }, type: { default: "button" } }, l = {
+  props: $
 };
-var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, i, l, o) => {
-  for (var a = o > 1 ? void 0 : o ? S(i, l) : i, c = s.length - 1, h; c >= 0; c--)
-    (h = s[c]) && (a = (o ? h(i, l, a) : h(a)) || a);
-  return o && a && $(i, l, a), a;
+var _ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, i, p, a) => {
+  for (var r = a > 1 ? void 0 : a ? S(i, p) : i, c = s.length - 1, h; c >= 0; c--)
+    (h = s[c]) && (r = (a ? h(i, p, r) : h(r)) || r);
+  return a && r && _(i, p, r), r;
 };
 let t = class extends m {
   constructor() {
-    super(), this.defaultSlot = b(), this.closeTag = n.props.closeTag.default, this.size = n.props.size.default, this.skin = n.props.skin.default, this.textStyle = null, this.iconName = void 0, this.type = n.props.type.default, this.ariaLabel = null, this._isClosed = !1, this._ariaDescription = null, this.close = (s) => {
+    super(), this.defaultSlot = g(), this.closeTag = l.props.closeTag.default, this.size = l.props.size.default, this.skin = l.props.skin.default, this.textStyle = null, this.iconName = void 0, this.type = l.props.type.default, this.ariaLabel = null, this.buttonTabindex = void 0, this._isClosed = !1, this._ariaDescription = null, this.close = (s) => {
       this._isClosed = !0, this.dispatchEvent(
         new CustomEvent("close", { detail: { origin: s }, bubbles: !1, composed: !0 })
       ), this.dispatchEvent(
@@ -27,10 +27,10 @@ let t = class extends m {
    * Lifecycle
    */
   firstUpdated(s) {
-    var i, l;
+    var i, p;
     if (super.firstUpdated(s), this.closeTag && !this.ariaLabel) {
-      const o = (l = (i = this.defaultSlot.value) == null ? void 0 : i.textContent) == null ? void 0 : l.trim();
-      o && (this._ariaDescription = `Klikk for å fjerne ${o}`);
+      const a = (p = (i = this.defaultSlot.value) == null ? void 0 : i.textContent) == null ? void 0 : p.trim();
+      a && (this._ariaDescription = `Klikk for å fjerne ${a}`);
     }
   }
   render() {
@@ -49,15 +49,16 @@ let t = class extends m {
       "pkt-btn--icons-right-and-left": this.closeTag && !!this.iconName,
       "pkt-hide": this._isClosed
     };
-    return this.closeTag ? p`
+    return this.closeTag ? n`
         <button
-          class=${u(i)}
+          class=${d(i)}
           type=${this.type}
+          tabindex=${u(this.buttonTabindex)}
           @click=${this.close}
-          aria-label=${d(this.ariaLabel || void 0)}
-          aria-description=${d(this._ariaDescription || void 0)}
+          aria-label=${u(this.ariaLabel || void 0)}
+          aria-description=${u(this._ariaDescription || void 0)}
         >
-          ${this.iconName && p`<pkt-icon
+          ${this.iconName && n`<pkt-icon
             class="pkt-tag__icon"
             name=${this.iconName}
             aria-hidden="true"
@@ -65,9 +66,9 @@ let t = class extends m {
           <span ${f(this.defaultSlot)}></span>
           <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
         </button>
-      ` : p`
-        <span class=${u(s)}>
-          ${this.iconName && p`<pkt-icon
+      ` : n`
+        <span class=${d(s)}>
+          ${this.iconName && n`<pkt-icon
             class="pkt-tag__icon"
             name=${this.iconName}
             aria-hidden="true"
@@ -78,34 +79,37 @@ let t = class extends m {
   }
 };
 e([
-  r({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], t.prototype, "closeTag", 2);
 e([
-  r({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "size", 2);
 e([
-  r({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "skin", 2);
 e([
-  r({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "textStyle", 2);
 e([
-  r({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "iconName", 2);
 e([
-  r({ type: String })
+  o({ type: String })
 ], t.prototype, "type", 2);
 e([
-  r({ type: String })
+  o({ type: String })
 ], t.prototype, "ariaLabel", 2);
 e([
-  k()
+  o({ type: Number, attribute: "button-tabindex" })
+], t.prototype, "buttonTabindex", 2);
+e([
+  b()
 ], t.prototype, "_isClosed", 2);
 e([
-  k()
+  b()
 ], t.prototype, "_ariaDescription", 2);
 t = e([
-  g("pkt-tag")
+  k("pkt-tag")
 ], t);
 export {
   t as P

package/dist/tag-DmbgBCKu.cjs

@@ -0,0 +1,27 @@
+"use strict";const h=require("./class-map-Bokp1SoS.cjs"),t=require("./element-CMTfByxQ.cjs"),d=require("./state-BNgpvY-A.cjs"),k=require("./pkt-slot-controller-D4nKlom5.cjs"),c=require("./ref-CxLwrCxt.cjs");require("./icon-Dj0oZZSa.cjs");const u=require("./if-defined-hKKmbsI8.cjs"),g={size:{default:"medium"},skin:{default:"blue"},closeTag:{default:!1},type:{default:"button"}},n={props:g};var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(r,e,a,o)=>{for(var i=o>1?void 0:o?b(e,a):e,l=r.length-1,p;l>=0;l--)(p=r[l])&&(i=(o?p(e,a,i):p(i))||i);return o&&i&&f(e,a,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closeTag=n.props.closeTag.default,this.size=n.props.size.default,this.skin=n.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=n.props.type.default,this.ariaLabel=null,this.buttonTabindex=void 0,this._isClosed=!1,this._ariaDescription=null,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!1,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!1,composed:!0}))},this.slotController=new k.PktSlotController(this,this.defaultSlot),this._isClosed=!1}firstUpdated(e){var a,o;if(super.firstUpdated(e),this.closeTag&&!this.ariaLabel){const i=(o=(a=this.defaultSlot.value)==null?void 0:a.textContent)==null?void 0:o.trim();i&&(this._ariaDescription=`Klikk for å fjerne ${i}`)}}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},a={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.b`
+        <button
+          class=${h.e(a)}
+          type=${this.type}
+          tabindex=${u.o(this.buttonTabindex)}
+          @click=${this.close}
+          aria-label=${u.o(this.ariaLabel||void 0)}
+          aria-description=${u.o(this._ariaDescription||void 0)}
+        >
+          ${this.iconName&&t.b`<pkt-icon
+            class="pkt-tag__icon"
+            name=${this.iconName}
+            aria-hidden="true"
+          ></pkt-icon>`}
+          <span ${c.n(this.defaultSlot)}></span>
+          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        </button>
+      `:t.b`
+        <span class=${h.e(e)}>
+          ${this.iconName&&t.b`<pkt-icon
+            class="pkt-tag__icon"
+            name=${this.iconName}
+            aria-hidden="true"
+          ></pkt-icon>`}
+          <span ${c.n(this.defaultSlot)}></span>
+        </span>
+      `}};s([t.n({type:Boolean,reflect:!0})],exports.PktTag.prototype,"closeTag",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"size",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"skin",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"textStyle",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"iconName",2);s([t.n({type:String})],exports.PktTag.prototype,"type",2);s([t.n({type:String})],exports.PktTag.prototype,"ariaLabel",2);s([t.n({type:Number,attribute:"button-tabindex"})],exports.PktTag.prototype,"buttonTabindex",2);s([d.r()],exports.PktTag.prototype,"_isClosed",2);s([d.r()],exports.PktTag.prototype,"_ariaDescription",2);exports.PktTag=s([t.t("pkt-tag")],exports.PktTag);

package/dist/{textarea-CuTsE1WX.cjs → textarea-CO7Ikug5.cjs}

@@ -1,4 +1,4 @@
-"use strict";const s=require("./element-CMTfByxQ.cjs"),p=require("./if-defined-hKKmbsI8.cjs"),c=require("./state-BNgpvY-A.cjs"),l=require("./ref-CxLwrCxt.cjs"),$=require("./class-map-Bokp1SoS.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-B3Vpl3xV.cjs"),x=require("./input-element-DM0tY799.cjs"),g=require("./pkt-slot-controller-D4nKlom5.cjs");require("./input-wrapper-JU4D2TGu.cjs");require("./icon-Dj0oZZSa.cjs");/**
+"use strict";const s=require("./element-CMTfByxQ.cjs"),p=require("./if-defined-hKKmbsI8.cjs"),c=require("./state-BNgpvY-A.cjs"),l=require("./ref-CxLwrCxt.cjs"),$=require("./class-map-Bokp1SoS.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-B3Vpl3xV.cjs"),x=require("./input-element-CSDVA3Y6.cjs"),g=require("./pkt-slot-controller-D4nKlom5.cjs");require("./input-wrapper-JU4D2TGu.cjs");require("./icon-Dj0oZZSa.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{textarea-DhWH99qN.js → textarea-VpCEjVFx.js}

@@ -5,7 +5,7 @@ import { e as c, n as m } from "./ref-Dma3n3i8.js";
 import { e as v } from "./class-map-3ADKve8g.js";
 import { e as b, i as T, t as a } from "./directive-oAbCiebi.js";
 import { r as y, p as w } from "./directive-helpers-CyPtA1_i.js";
-import { P as C } from "./input-element-Bkv6Yxld.js";
+import { P as C } from "./input-element-BGNbdzy2.js";
 import { P as E } from "./pkt-slot-controller-D7CrjM52.js";
 import "./input-wrapper-CaUY90qz.js";
 import "./icon-D0IQAVwS.js";

package/dist/{textinput-BCi9p0Du.js → textinput-C2AZ9ss2.js}

@@ -3,7 +3,7 @@ import { o as u } from "./if-defined-rXcLNTzN.js";
 import { r as f } from "./state-l4hGZdFJ.js";
 import { e as d, n as m } from "./ref-Dma3n3i8.js";
 import { e as g } from "./class-map-3ADKve8g.js";
-import { P as x } from "./input-element-Bkv6Yxld.js";
+import { P as x } from "./input-element-BGNbdzy2.js";
 import { P as v } from "./pkt-slot-controller-D7CrjM52.js";
 import "./input-wrapper-CaUY90qz.js";
 import "./icon-D0IQAVwS.js";

package/dist/{textinput-st4Vml5J.cjs → textinput-DRFZU3dA.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-CMTfByxQ.cjs"),a=require("./if-defined-hKKmbsI8.cjs"),l=require("./state-BNgpvY-A.cjs"),h=require("./ref-CxLwrCxt.cjs"),c=require("./class-map-Bokp1SoS.cjs"),d=require("./input-element-DM0tY799.cjs"),$=require("./pkt-slot-controller-D4nKlom5.cjs");require("./input-wrapper-JU4D2TGu.cjs");require("./icon-Dj0oZZSa.cjs");var x=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?f(i,s):i,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&x(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.value="",this.type="text",this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.slotController=new $.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(i,s,n){i==="value"&&this.value!==s&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,s)),super.attributeChangedCallback(i,s,n)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=c.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),n=this.ariaLabelledby||`${this.id}-input-label`;return t.b`
+"use strict";const t=require("./element-CMTfByxQ.cjs"),a=require("./if-defined-hKKmbsI8.cjs"),l=require("./state-BNgpvY-A.cjs"),h=require("./ref-CxLwrCxt.cjs"),c=require("./class-map-Bokp1SoS.cjs"),d=require("./input-element-CSDVA3Y6.cjs"),$=require("./pkt-slot-controller-D4nKlom5.cjs");require("./input-wrapper-JU4D2TGu.cjs");require("./icon-Dj0oZZSa.cjs");var x=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?f(i,s):i,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&x(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.value="",this.type="text",this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.slotController=new $.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(i,s,n){i==="value"&&this.value!==s&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,s)),super.attributeChangedCallback(i,s,n)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=c.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),n=this.ariaLabelledby||`${this.id}-input-label`;return t.b`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "15.4.5",
+  "version": "16.0.2",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -41,8 +41,8 @@
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
-    "@oslokommune/punkt-assets": "^15.0.0",
-    "@oslokommune/punkt-css": "^15.4.4",
+    "@oslokommune/punkt-assets": "^16.0.0",
+    "@oslokommune/punkt-css": "^16.0.0",
     "@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": "64154bb897bebc4a10bddd741816ca5943b1f687"
+  "gitHead": "78107e738894fed2f40d8baad0273c29d58544f0"
 }

package/src/components/card/card.ts

@@ -78,6 +78,7 @@ export class PktCard extends PktElement implements IPktCard {
           return value as TCardSkin
         } else {
           if (value && !validSkins.includes(value as TCardSkin)) {
+            // eslint-disable-next-line no-console -- Acceptable to log a warning for invalid skin values
             console.warn(
               `Invalid skin value "${value}". Using default skin "${specs.props.skin.default}".`,
             )

package/src/components/combobox/combobox-base.ts

@@ -0,0 +1,158 @@
+import { property, state } from 'lit/decorators.js'
+import { Ref, createRef } from 'lit/directives/ref.js'
+import { PktInputElement } from '@/base-elements/input-element'
+import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { isMaxSelectionReached } from 'shared-utils/combobox/option-utils'
+import specs from 'componentSpecs/combobox.json'
+
+import type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types'
+import PktListbox from '../listbox'
+
+/**
+ * Base class for PktCombobox.
+ * Declares all reactive properties, state, refs, and simple helpers.
+ */
+export class ComboboxBase extends PktInputElement {
+  protected readonly helptextSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.optionsController = new PktOptionsSlotController(this)
+    this.slotController = new PktSlotController(this, this.helptextSlot)
+    this.slotController.skipOptions = true
+  }
+
+  // Props / Attributes
+  @property({ type: String, reflect: true }) value: string | string[] = ''
+  @property({ type: Array }) options: IPktComboboxOption[] = []
+  @property({ type: Array, attribute: 'default-options' }) defaultOptions: IPktComboboxOption[] = []
+  @property({ type: Boolean, attribute: 'allow-user-input' }) allowUserInput: boolean = false
+  @property({ type: Boolean }) typeahead: boolean = false
+  @property({ type: Boolean, attribute: 'include-search' }) includeSearch: boolean = false
+  @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder: string = ''
+  @property({ type: Boolean }) multiple: boolean = false
+  @property({ type: Number }) maxlength: number | null = null
+  @property({ type: String, attribute: 'display-value-as' }) displayValueAs: string =
+    specs.props.displayValueAs.default
+  @property({ type: String, attribute: 'tag-placement' })
+  tagPlacement: TPktComboboxTagPlacement | null = null
+  // Internal use only — syncs to _isOptionsOpen in updated(), but does not
+  // reliably open the listbox as a declarative attribute (requires focus state
+  // and populated _options). Not part of the public API / component spec.
+  // Used in tests to set initial open state without relying on focus or options population.
+  @property({ type: Boolean, attribute: 'open' }) isOpen: boolean = false
+
+  // Internal state
+  @state() override _options: IPktComboboxOption[] = []
+  @state() protected _value: string[] = []
+  @state() protected _isOptionsOpen = false
+  @state() protected _userInfoMessage: string = ''
+  @state() protected _addValueText: string | null = null
+  @state() protected _maxIsReached: boolean = false
+  @state() protected _search: string = ''
+  @state() protected _inputFocus: boolean = false
+  protected _internalValueSync = false
+  protected _optionsFromSlot = false
+  protected _lastSlotGeneration = 0
+  /** When true, the next handleFocus call will not reopen the dropdown. */
+  protected _suppressNextOpen = false
+
+  // Refs
+  protected readonly inputRef: Ref<HTMLInputElement> = createRef()
+  protected readonly triggerRef: Ref<HTMLDivElement> = createRef()
+  protected readonly listboxRef: Ref<PktListbox> = createRef()
+
+  protected get _hasTextInput(): boolean {
+    return this.typeahead || this.allowUserInput
+  }
+
+  protected get _selectionDescription(): string | undefined {
+    if (!this.multiple || this._value.length === 0) return undefined
+    return `${this._value.length} valgt`
+  }
+
+  /**
+   * Focuses the appropriate trigger element after closing the listbox.
+   * Select-only: the combobox input div. Editable: the text input.
+   */
+  protected focusTrigger(): void {
+    if (this._hasTextInput) {
+      this.inputRef.value?.focus()
+    } else {
+      this.triggerRef.value?.focus()
+    }
+  }
+
+  /**
+   * Parses the value prop into an internal string array.
+   */
+  protected parseValue(): string[] {
+    if (Array.isArray(this.value)) {
+      return this.multiple ? this.value : this.value.length > 0 ? [this.value[0]] : []
+    }
+    if (this.value && this.multiple) {
+      return this.value.split(',')
+    }
+    if (this.value) {
+      return [this.value]
+    }
+    return []
+  }
+
+  /**
+   * Updates the _maxIsReached state flag.
+   */
+  protected updateMaxReached(): void {
+    this._maxIsReached = isMaxSelectionReached(this._value.length, this.maxlength)
+  }
+
+  /**
+   * Syncs the public value property from internal _value state and dispatches
+   * events if the value content changed. Always sets this.value as a string
+   * to prevent array→string reflect cascades.
+   */
+  protected syncValueAndDispatch(oldInternal: string[]): void {
+    const newInternal = this._value
+
+    // Sync public value as a string (avoids array→string attribute reflect cascade)
+    const newPublicStr = this.multiple ? newInternal.join(',') : newInternal[0] || ''
+    const currentPublicStr = Array.isArray(this.value)
+      ? this.value.join(',')
+      : String(this.value || '')
+
+    if (newPublicStr !== currentPublicStr) {
+      this._internalValueSync = true
+      this.value = newPublicStr
+    }
+
+    // Dispatch events if value content changed
+    if (oldInternal?.join(',') !== newInternal.join(',')) {
+      const eventValue = this.multiple ? [...newInternal] : newInternal[0] || ''
+      this.onChange(eventValue)
+    } else if (newInternal.length === 0 && oldInternal && oldInternal.length > 0) {
+      this.clearInputValue()
+    }
+  }
+
+  /**
+   * Override onChange to skip the base class touched guard.
+   * The base class returns early on the first call (setting touched = true but not
+   * dispatching events). Combobox needs consistent event dispatch regardless of
+   * touched state.
+   */
+  protected override onChange(value: string | string[]): void {
+    this.touched = true
+    super.onChange(value)
+  }
+
+  /**
+   * No-op override of the base class valueChanged.
+   * The base class version sets both this.value AND this._value, which creates
+   * an infinite _value → valueChanged → value → parseValue → _value loop.
+   * Combobox handles value sync and event dispatch in syncValueAndDispatch() instead.
+   */
+  protected override valueChanged(): void {
+    // Intentionally empty — combobox manages value sync in updated()
+  }
+}