@oslokommune/punkt-elements 16.0.5 → 16.1.0

package/dist/{tabitem-BKv4eN0a.cjs → tabitem-Jenus4Qd.cjs}

@@ -1,8 +1,8 @@
-"use strict";const a=require("./element-CMTfByxQ.cjs"),g=require("./pkt-slot-controller-D4nKlom5.cjs"),v=require("./state-BNgpvY-A.cjs"),d=require("./ref-CxLwrCxt.cjs"),u=require("./if-defined-hKKmbsI8.cjs");/**
+"use strict";const d=require("./element-with-slot-yT8k1Z37.cjs"),a=require("./element-CMTfByxQ.cjs"),x=require("./state-BNgpvY-A.cjs"),f=require("./ref-DahIePMT.cjs"),u=require("./if-defined-hKKmbsI8.cjs");/**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */let C=class extends Event{constructor(t,e,i,s){super("context-request",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=e,this.callback=i,this.subscribe=s??!1}};/**
+ */let m=class extends Event{constructor(t,e,i,s){super("context-request",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=e,this.callback=i,this.subscribe=s??!1}};/**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -10,33 +10,33 @@
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */let k=class{constructor(t,e,i,s){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(r,o)=>{this.unsubscribe&&(this.unsubscribe!==o&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=r,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(r,o)),this.unsubscribe=o},this.host=t,e.context!==void 0){const r=e;this.context=r.context,this.callback=r.callback,this.subscribe=r.subscribe??!1}else this.context=e,this.callback=i,this.subscribe=s??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new C(this.context,this.host,this.t,this.subscribe))}};/**
+ */let w=class{constructor(t,e,i,s){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(r,o)=>{this.unsubscribe&&(this.unsubscribe!==o&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=r,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(r,o)),this.unsubscribe=o},this.host=t,e.context!==void 0){const r=e;this.context=r.context,this.callback=r.callback,this.subscribe=r.subscribe??!1}else this.context=e,this.callback=i,this.subscribe=s??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new m(this.context,this.host,this.t,this.subscribe))}};/**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class m{get value(){return this.o}set value(t){this.setValue(t)}setValue(t,e=!1){const i=e||!Object.is(t,this.o);this.o=t,i&&this.updateObservers()}constructor(t){this.subscriptions=new Map,this.updateObservers=()=>{for(const[e,{disposer:i}]of this.subscriptions)e(this.o,i)},t!==void 0&&(this.value=t)}addCallback(t,e,i){if(!i)return void t(this.value);this.subscriptions.has(t)||this.subscriptions.set(t,{disposer:()=>{this.subscriptions.delete(t)},consumerHost:e});const{disposer:s}=this.subscriptions.get(t);t(this.value,s)}clearCallbacks(){this.subscriptions.clear()}}/**
+ */class C{get value(){return this.o}set value(t){this.setValue(t)}setValue(t,e=!1){const i=e||!Object.is(t,this.o);this.o=t,i&&this.updateObservers()}constructor(t){this.subscriptions=new Map,this.updateObservers=()=>{for(const[e,{disposer:i}]of this.subscriptions)e(this.o,i)},t!==void 0&&(this.value=t)}addCallback(t,e,i){if(!i)return void t(this.value);this.subscriptions.has(t)||this.subscriptions.set(t,{disposer:()=>{this.subscriptions.delete(t)},consumerHost:e});const{disposer:s}=this.subscriptions.get(t);t(this.value,s)}clearCallbacks(){this.subscriptions.clear()}}/**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */let $=class extends Event{constructor(t,e){super("context-provider",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=e}};class w extends m{constructor(t,e,i){var s,r;super(e.context!==void 0?e.initialValue:i),this.onContextRequest=o=>{if(o.context!==this.context)return;const c=o.contextTarget??o.composedPath()[0];c!==this.host&&(o.stopPropagation(),this.addCallback(o.callback,c,o.subscribe))},this.onProviderRequest=o=>{if(o.context!==this.context||(o.contextTarget??o.composedPath()[0])===this.host)return;const c=new Set;for(const[f,{consumerHost:x}]of this.subscriptions)c.has(f)||(c.add(f),x.dispatchEvent(new C(this.context,x,f,!0)));o.stopPropagation()},this.host=t,e.context!==void 0?this.context=e.context:this.context=e,this.attachListeners(),(r=(s=this.host).addController)==null||r.call(s,this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new $(this.context,this.host))}}/**
+ */let $=class extends Event{constructor(t,e){super("context-provider",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=e}};class g extends C{constructor(t,e,i){var s,r;super(e.context!==void 0?e.initialValue:i),this.onContextRequest=o=>{if(o.context!==this.context)return;const c=o.contextTarget??o.composedPath()[0];c!==this.host&&(o.stopPropagation(),this.addCallback(o.callback,c,o.subscribe))},this.onProviderRequest=o=>{if(o.context!==this.context||(o.contextTarget??o.composedPath()[0])===this.host)return;const c=new Set;for(const[v,{consumerHost:k}]of this.subscriptions)c.has(v)||(c.add(v),k.dispatchEvent(new m(this.context,k,v,!0)));o.stopPropagation()},this.host=t,e.context!==void 0?this.context=e.context:this.context=e,this.attachListeners(),(r=(s=this.host).addController)==null||r.call(s,this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new $(this.context,this.host))}}/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function P({context:n}){return(t,e)=>{const i=new WeakMap;if(typeof e=="object")return{get(){return t.get.call(this)},set(s){return i.get(this).setValue(s),t.set.call(this,s)},init(s){return i.set(this,new w(this,{context:n,initialValue:s})),s}};{t.constructor.addInitializer((o=>{i.set(o,new w(o,{context:n}))}));const s=Object.getOwnPropertyDescriptor(t,e);let r;if(s===void 0){const o=new WeakMap;r={get(){return o.get(this)},set(c){i.get(this).setValue(c),o.set(this,c)},configurable:!0,enumerable:!0}}else{const o=s.set;r={...s,set(c){i.get(this).setValue(c),o==null||o.call(this,c)}}}return void Object.defineProperty(t,e,r)}}}/**
+ */function P({context:n}){return(t,e)=>{const i=new WeakMap;if(typeof e=="object")return{get(){return t.get.call(this)},set(s){return i.get(this).setValue(s),t.set.call(this,s)},init(s){return i.set(this,new g(this,{context:n,initialValue:s})),s}};{t.constructor.addInitializer((o=>{i.set(o,new g(o,{context:n}))}));const s=Object.getOwnPropertyDescriptor(t,e);let r;if(s===void 0){const o=new WeakMap;r={get(){return o.get(this)},set(c){i.get(this).setValue(c),o.set(this,c)},configurable:!0,enumerable:!0}}else{const o=s.set;r={...s,set(c){i.get(this).setValue(c),o==null||o.call(this,c)}}}return void Object.defineProperty(t,e,r)}}}/**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function S({context:n,subscribe:t}){return(e,i)=>{typeof i=="object"?i.addInitializer((function(){new k(this,{context:n,callback:s=>{e.set.call(this,s)},subscribe:t})})):e.constructor.addInitializer((s=>{new k(s,{context:n,callback:r=>{s[i]=r},subscribe:t})}))}}const y=Symbol("pkt-tabs-context");var _=Object.defineProperty,N=Object.getOwnPropertyDescriptor,p=(n,t,e,i)=>{for(var s=i>1?void 0:i?N(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&_(t,e,s),s};let b=class extends a.PktElement{constructor(){super(),this.arrowNav=!0,this.disableArrowNav=!1,this.tabRefs=[],this.tabCount=0,this.defaultSlot=d.e(),this.context={useArrowNav:this.useArrowNav,registerTab:this.registerTab.bind(this),handleClick:this.handleClick.bind(this),handleKeyUp:this.handleKeyUp.bind(this)},this.slotController=new g.PktSlotController(this,this.defaultSlot)}get useArrowNav(){return this.arrowNav&&!this.disableArrowNav}updated(t){(t.has("arrowNav")||t.has("disableArrowNav"))&&(this.context={...this.context,useArrowNav:this.useArrowNav})}registerTab(t,e){this.tabRefs[e]=t,this.tabCount=Math.max(this.tabCount,e+1)}handleClick(t){this.dispatchEvent(new CustomEvent("tab-selected",{detail:{index:t},bubbles:!0,composed:!0}))}handleKeyUp(t,e){var i,s;this.useArrowNav&&(t.code==="ArrowLeft"&&e!==0&&((i=this.tabRefs[e-1])==null||i.focus()),t.code==="ArrowRight"&&e<this.tabCount-1&&((s=this.tabRefs[e+1])==null||s.focus()),(t.code==="ArrowDown"||t.code==="Space")&&this.dispatchEvent(new CustomEvent("tab-selected",{detail:{index:e},bubbles:!0,composed:!0})))}render(){const t=this.useArrowNav?"tablist":"navigation";return a.b`
+ */function _({context:n,subscribe:t}){return(e,i)=>{typeof i=="object"?i.addInitializer((function(){new w(this,{context:n,callback:s=>{e.set.call(this,s)},subscribe:t})})):e.constructor.addInitializer((s=>{new w(s,{context:n,callback:r=>{s[i]=r},subscribe:t})}))}}const y=Symbol("pkt-tabs-context");var N=Object.defineProperty,R=Object.getOwnPropertyDescriptor,p=(n,t,e,i)=>{for(var s=i>1?void 0:i?R(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&N(t,e,s),s};let b=class extends d.PktElementWithSlot{constructor(){super(...arguments),this.arrowNav=!0,this.disableArrowNav=!1,this.tabRefs=[],this.tabCount=0,this.context={useArrowNav:this.useArrowNav,registerTab:this.registerTab.bind(this),handleClick:this.handleClick.bind(this),handleKeyUp:this.handleKeyUp.bind(this)}}get useArrowNav(){return this.arrowNav&&!this.disableArrowNav}updated(t){(t.has("arrowNav")||t.has("disableArrowNav"))&&(this.context={...this.context,useArrowNav:this.useArrowNav})}registerTab(t,e){this.tabRefs[e]=t,this.tabCount=Math.max(this.tabCount,e+1)}handleClick(t){this.dispatchEvent(new CustomEvent("tab-selected",{detail:{index:t},bubbles:!0,composed:!0}))}handleKeyUp(t,e){var i,s;this.useArrowNav&&(t.code==="ArrowLeft"&&e!==0&&((i=this.tabRefs[e-1])==null||i.focus()),t.code==="ArrowRight"&&e<this.tabCount-1&&((s=this.tabRefs[e+1])==null||s.focus()),(t.code==="ArrowDown"||t.code==="Space")&&this.dispatchEvent(new CustomEvent("tab-selected",{detail:{index:e},bubbles:!0,composed:!0})))}render(){const t=this.useArrowNav?"tablist":"navigation";return a.b`
       <div class="pkt-tabs">
-        <div class="pkt-tabs__list" role=${t} ${d.n(this.defaultSlot)}></div>
+        <div class="pkt-tabs__list" role=${t}>${d.slotContent(this)}</div>
       </div>
-    `}};p([a.n({type:Boolean,reflect:!0,attribute:"arrow-nav"})],b.prototype,"arrowNav",2);p([a.n({type:Boolean,reflect:!0,attribute:"disable-arrow-nav"})],b.prototype,"disableArrowNav",2);p([v.r()],b.prototype,"tabRefs",2);p([v.r()],b.prototype,"tabCount",2);p([P({context:y}),v.r()],b.prototype,"context",2);b=p([a.t("pkt-tabs")],b);const R=b;var A=Object.defineProperty,T=Object.getOwnPropertyDescriptor,l=(n,t,e,i)=>{for(var s=i>1?void 0:i?T(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&A(t,e,s),s};let h=class extends a.PktElement{constructor(){super(),this.active=!1,this.href="",this.icon="",this.controls="",this.tag="",this.tagSkin="blue",this.index=0,this.elementRef=d.e(),this.defaultSlot=d.e(),this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index)})}handleClick(){this.context&&this.context.handleClick(this.index)}handleKeyUp(n){this.context&&this.context.handleKeyUp(n,this.index)}render(){var o;const n=((o=this.context)==null?void 0:o.useArrowNav)??!0,t=this.active?"active":"",e=n?"tab":void 0,i=n?this.active:void 0,s=this.active||!n?void 0:-1,r=a.b`
+    `}};p([a.n({type:Boolean,reflect:!0,attribute:"arrow-nav"})],b.prototype,"arrowNav",2);p([a.n({type:Boolean,reflect:!0,attribute:"disable-arrow-nav"})],b.prototype,"disableArrowNav",2);p([x.r()],b.prototype,"tabRefs",2);p([x.r()],b.prototype,"tabCount",2);p([P({context:y}),x.r()],b.prototype,"context",2);b=p([a.t("pkt-tabs")],b);const A=b;var S=Object.defineProperty,T=Object.getOwnPropertyDescriptor,l=(n,t,e,i)=>{for(var s=i>1?void 0:i?T(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&S(t,e,s),s};let h=class extends d.PktElementWithSlot{constructor(){super(),this.active=!1,this.href="",this.icon="",this.controls="",this.tag="",this.tagSkin="blue",this.index=0,this.elementRef=f.e()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index)})}handleClick(){this.context&&this.context.handleClick(this.index)}handleKeyUp(n){this.context&&this.context.handleKeyUp(n,this.index)}render(){var o;const n=((o=this.context)==null?void 0:o.useArrowNav)??!0,t=this.active?"active":"",e=n?"tab":void 0,i=n?this.active:void 0,s=this.active||!n?void 0:-1,r=a.b`
       ${this.icon?a.b`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>`:""}
-      <span ${d.n(this.defaultSlot)}></span>
+      <span>${d.slotContent(this)}</span>
       ${this.tag?a.b`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>`:""}
     `;return this.href?a.b`
         <a
-          ${d.n(this.elementRef)}
+          ${f.n(this.elementRef)}
           href=${this.href}
           class="pkt-tabs__link ${t}"
           role=${u.o(e)}
@@ -50,7 +50,7 @@
         </a>
       `:a.b`
       <button
-        ${d.n(this.elementRef)}
+        ${f.n(this.elementRef)}
         type="button"
         class="pkt-tabs__button pkt-link-button ${t}"
         role=${u.o(e)}
@@ -62,4 +62,4 @@
       >
         ${r}
       </button>
-    `}};l([a.n({type:Boolean,reflect:!0})],h.prototype,"active",2);l([a.n({type:String,reflect:!0})],h.prototype,"href",2);l([a.n({type:String,reflect:!0})],h.prototype,"icon",2);l([a.n({type:String,reflect:!0})],h.prototype,"controls",2);l([a.n({type:String,reflect:!0})],h.prototype,"tag",2);l([a.n({type:String,reflect:!0,attribute:"tag-skin"})],h.prototype,"tagSkin",2);l([a.n({type:Number,reflect:!0})],h.prototype,"index",2);l([S({context:y,subscribe:!0}),a.n({attribute:!1})],h.prototype,"context",2);h=l([a.t("pkt-tab-item")],h);const q=h;exports.PktTabItem_default=q;exports.PktTabs=R;
+    `}};l([a.n({type:Boolean,reflect:!0})],h.prototype,"active",2);l([a.n({type:String,reflect:!0})],h.prototype,"href",2);l([a.n({type:String,reflect:!0})],h.prototype,"icon",2);l([a.n({type:String,reflect:!0})],h.prototype,"controls",2);l([a.n({type:String,reflect:!0})],h.prototype,"tag",2);l([a.n({type:String,reflect:!0,attribute:"tag-skin"})],h.prototype,"tagSkin",2);l([a.n({type:Number,reflect:!0})],h.prototype,"index",2);l([_({context:y,subscribe:!0}),a.n({attribute:!1})],h.prototype,"context",2);h=l([a.t("pkt-tab-item")],h);const q=h;exports.PktTabItem_default=q;exports.PktTabs=A;

package/dist/{tag-DZPqFiem.js → tag-CIWBLpjv.js}

@@ -1,27 +1,26 @@
 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 g, n as f } from "./ref-Dma3n3i8.js";
+import { b as n, n as o, t as y } from "./element-CV9utnHJ.js";
+import { r as f } from "./state-l4hGZdFJ.js";
+import { P as k, s as b } from "./element-with-slot-1djk8KXi.js";
 import "./icon-D0IQAVwS.js";
 import { o as u } from "./if-defined-rXcLNTzN.js";
-const $ = { size: { default: "medium" }, skin: { default: "blue" }, closeTag: { default: !1 }, type: { default: "button" } }, l = {
-  props: $
+const g = { size: { default: "medium" }, skin: { default: "blue" }, closeTag: { default: !1 }, type: { default: "button" } }, l = {
+  props: g
 };
-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--)
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, i, p, a) => {
+  for (var r = a > 1 ? void 0 : a ? _(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;
+  return a && r && m(i, p, r), r;
 };
-let t = class extends m {
+let t = class extends k {
   constructor() {
-    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) => {
+    super(), 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(
         new CustomEvent("on-close", { detail: { origin: s }, bubbles: !1, composed: !0 })
       );
-    }, this.slotController = new y(this, this.defaultSlot), this._isClosed = !1;
+    }, this._isClosed = !1;
   }
   /**
    * Lifecycle
@@ -29,7 +28,7 @@ let t = class extends m {
   firstUpdated(s) {
     var i, p;
     if (super.firstUpdated(s), this.closeTag && !this.ariaLabel) {
-      const a = (p = (i = this.defaultSlot.value) == null ? void 0 : i.textContent) == null ? void 0 : p.trim();
+      const a = (p = (i = this.querySelector("button span, .pkt-tag > span")) == null ? void 0 : i.textContent) == null ? void 0 : p.trim();
       a && (this._ariaDescription = `Klikk for å fjerne ${a}`);
     }
   }
@@ -63,7 +62,7 @@ let t = class extends m {
             name=${this.iconName}
             aria-hidden="true"
           ></pkt-icon>`}
-          <span ${f(this.defaultSlot)}></span>
+          <span>${b(this)}</span>
           <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
         </button>
       ` : n`
@@ -73,7 +72,7 @@ let t = class extends m {
             name=${this.iconName}
             aria-hidden="true"
           ></pkt-icon>`}
-          <span ${f(this.defaultSlot)}></span>
+          <span>${b(this)}</span>
         </span>
       `;
   }
@@ -103,13 +102,13 @@ e([
   o({ type: Number, attribute: "button-tabindex" })
 ], t.prototype, "buttonTabindex", 2);
 e([
-  b()
+  f()
 ], t.prototype, "_isClosed", 2);
 e([
-  b()
+  f()
 ], t.prototype, "_ariaDescription", 2);
 t = e([
-  k("pkt-tag")
+  y("pkt-tag")
 ], t);
 export {
   t as P

package/dist/tag-DeE1OpmF.cjs

@@ -0,0 +1,27 @@
+"use strict";const h=require("./class-map-Bokp1SoS.cjs"),t=require("./element-CMTfByxQ.cjs"),k=require("./state-BNgpvY-A.cjs"),c=require("./element-with-slot-yT8k1Z37.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"}},o={props:g};var d=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(r,e,a,n)=>{for(var i=n>1?void 0:n?b(e,a):e,p=r.length-1,l;p>=0;p--)(l=r[p])&&(i=(n?l(e,a,i):l(i))||i);return n&&i&&d(e,a,i),i};exports.PktTag=class extends c.PktElementWithSlot{constructor(){super(),this.closeTag=o.props.closeTag.default,this.size=o.props.size.default,this.skin=o.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=o.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._isClosed=!1}firstUpdated(e){var a,n;if(super.firstUpdated(e),this.closeTag&&!this.ariaLabel){const i=(n=(a=this.querySelector("button span, .pkt-tag > span"))==null?void 0:a.textContent)==null?void 0:n.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.slotContent(this)}</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.slotContent(this)}</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([k.r()],exports.PktTag.prototype,"_isClosed",2);s([k.r()],exports.PktTag.prototype,"_ariaDescription",2);exports.PktTag=s([t.t("pkt-tag")],exports.PktTag);

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

@@ -1,13 +1,13 @@
-import { E as l, A as $, b as g, n as d, t as f } from "./element-CV9utnHJ.js";
+import { E as l, A as c, b as m, n as d, t as g } from "./element-CV9utnHJ.js";
 import { o as u } from "./if-defined-rXcLNTzN.js";
-import { r as x } from "./state-l4hGZdFJ.js";
-import { e as c, n as m } from "./ref-Dma3n3i8.js";
+import { r as $ } from "./state-l4hGZdFJ.js";
+import { e as f, n as x } from "./ref-DBGHvw2G.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-BGNbdzy2.js";
-import { P as E } from "./pkt-slot-controller-D7CrjM52.js";
-import "./input-wrapper-CaUY90qz.js";
+import { P as C } from "./input-element-n5U38pZ1.js";
+import { s as E } from "./element-with-slot-1djk8KXi.js";
+import "./input-wrapper-B__6jW4U.js";
 import "./icon-D0IQAVwS.js";
 /**
  * @license
@@ -23,7 +23,7 @@ const P = b(class extends T {
     return t;
   }
   update(t, [r]) {
-    if (r === l || r === $) return r;
+    if (r === l || r === c) return r;
     const e = t.element, i = t.name;
     if (t.type === a.PROPERTY) {
       if (r === e[i]) return l;
@@ -40,7 +40,7 @@ var B = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, r, e
 };
 let o = class extends C {
   constructor() {
-    super(), this.inputRef = c(), this.helptextSlot = c(), this.value = "", this.autocomplete = "off", this.rows = null, this.counterCurrent = 0, this.slotController = new E(this, this.helptextSlot);
+    super(...arguments), this.inputRef = f(), this.value = "", this.autocomplete = "off", this.rows = null, this.counterCurrent = 0;
   }
   attributeChangedCallback(t, r, e) {
     t === "value" && this.value !== r && (this.counterCurrent = e ? e.length : 0, this.valueChanged(e, r)), super.attributeChangedCallback(t, r, e);
@@ -55,7 +55,7 @@ let o = class extends C {
       "pkt-input--fullwidth": this.fullwidth,
       "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
     }), r = this.ariaLabelledby || `${this.id}-input-label`;
-    return g`<pkt-input-wrapper
+    return m`<pkt-input-wrapper
       label=${this.label}
       ?counter=${this.counter}
       ?disabled=${this.disabled}
@@ -78,9 +78,9 @@ let o = class extends C {
       .tagText=${this.tagText}
       class="pkt-textarea"
     >
-      <div class="pkt-contents" ${m(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      <div class="pkt-contents" slot="helptext">${E(this, "helptext")}</div>
       <textarea
-        ${m(this.inputRef)}
+        ${x(this.inputRef)}
         class=${t}
         id=${this.id + "-input"}
         name=${(this.name || this.id) + "-input"}
@@ -121,10 +121,10 @@ n([
   d({ type: Number })
 ], o.prototype, "rows", 2);
 n([
-  x()
+  $()
 ], o.prototype, "counterCurrent", 2);
 o = n([
-  f("pkt-textarea")
+  g("pkt-textarea")
 ], o);
 export {
   o as P

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

@@ -1,8 +1,8 @@
-"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");/**
+"use strict";const s=require("./element-CMTfByxQ.cjs"),h=require("./if-defined-hKKmbsI8.cjs"),c=require("./state-BNgpvY-A.cjs"),p=require("./ref-DahIePMT.cjs"),$=require("./class-map-Bokp1SoS.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-B3Vpl3xV.cjs"),g=require("./input-element-Xe9FTi2a.cjs"),x=require("./element-with-slot-yT8k1Z37.cjs");require("./input-wrapper-BdFdJU-k.cjs");require("./icon-Dj0oZZSa.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const T=a.e(class extends a.i{constructor(r){if(super(r),r.type!==a.t.PROPERTY&&r.type!==a.t.ATTRIBUTE&&r.type!==a.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!d.r(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(r,[e]){if(e===s.E||e===s.A)return e;const i=r.element,t=r.name;if(r.type===a.t.PROPERTY){if(e===i[t])return s.E}else if(r.type===a.t.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(t))return s.E}else if(r.type===a.t.ATTRIBUTE&&i.getAttribute(t)===e+"")return s.E;return d.p(r),e}});var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(r,e,i,t)=>{for(var n=t>1?void 0:t?f(e,i):e,u=r.length-1,h;u>=0;u--)(h=r[u])&&(n=(t?h(e,i,n):h(n))||n);return t&&n&&v(e,i,n),n};exports.PktTextarea=class extends x.PktInputElement{constructor(){super(),this.inputRef=l.e(),this.helptextSlot=l.e(),this.value="",this.autocomplete="off",this.rows=null,this.counterCurrent=0,this.slotController=new g.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(e,i,t){e==="value"&&this.value!==i&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,i)),super.attributeChangedCallback(e,i,t)}updated(e){var i;super.updated(e),e.has("value")&&(this.counterCurrent=((i=this.value)==null?void 0:i.length)||0,this.valueChanged(this.value,e.get("value"))),e.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const e=$.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}),i=this.ariaLabelledby||`${this.id}-input-label`;return s.b`<pkt-input-wrapper
+ */const T=a.e(class extends a.i{constructor(r){if(super(r),r.type!==a.t.PROPERTY&&r.type!==a.t.ATTRIBUTE&&r.type!==a.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!d.r(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(r,[e]){if(e===s.E||e===s.A)return e;const i=r.element,t=r.name;if(r.type===a.t.PROPERTY){if(e===i[t])return s.E}else if(r.type===a.t.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(t))return s.E}else if(r.type===a.t.ATTRIBUTE&&i.getAttribute(t)===e+"")return s.E;return d.p(r),e}});var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(r,e,i,t)=>{for(var n=t>1?void 0:t?f(e,i):e,u=r.length-1,l;u>=0;u--)(l=r[u])&&(n=(t?l(e,i,n):l(n))||n);return t&&n&&v(e,i,n),n};exports.PktTextarea=class extends g.PktInputElement{constructor(){super(...arguments),this.inputRef=p.e(),this.value="",this.autocomplete="off",this.rows=null,this.counterCurrent=0}attributeChangedCallback(e,i,t){e==="value"&&this.value!==i&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,i)),super.attributeChangedCallback(e,i,t)}updated(e){var i;super.updated(e),e.has("value")&&(this.counterCurrent=((i=this.value)==null?void 0:i.length)||0,this.valueChanged(this.value,e.get("value"))),e.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const e=$.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}),i=this.ariaLabelledby||`${this.id}-input-label`;return s.b`<pkt-input-wrapper
       label=${this.label}
       ?counter=${this.counter}
       ?disabled=${this.disabled}
@@ -25,16 +25,16 @@
       .tagText=${this.tagText}
       class="pkt-textarea"
     >
-      <div class="pkt-contents" ${l.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      <div class="pkt-contents" slot="helptext">${x.slotContent(this,"helptext")}</div>
       <textarea
-        ${l.n(this.inputRef)}
+        ${p.n(this.inputRef)}
         class=${e}
         id=${this.id+"-input"}
         name=${(this.name||this.id)+"-input"}
-        placeholder=${p.o(this.placeholder)}
+        placeholder=${h.o(this.placeholder)}
         .value=${T(this.value)}
-        minlength=${p.o(this.minlength)}
-        maxlength=${p.o(this.maxlength)}
+        minlength=${h.o(this.minlength)}
+        maxlength=${h.o(this.maxlength)}
         ?readonly=${this.readonly}
         autocomplete=${this.autocomplete}
         aria-labelledby=${i}

package/dist/{textinput-C2AZ9ss2.js → textinput-0Bttvt9V.js}

@@ -1,20 +1,20 @@
-import { A as p, b as h, n as a, t as $ } from "./element-CV9utnHJ.js";
-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 { A as p, b as h, n as a, t as d } from "./element-CV9utnHJ.js";
+import { o as l } from "./if-defined-rXcLNTzN.js";
+import { r as m } from "./state-l4hGZdFJ.js";
+import { e as $, n as f } from "./ref-DBGHvw2G.js";
 import { e as g } from "./class-map-3ADKve8g.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 { P as x } from "./input-element-n5U38pZ1.js";
+import { s as v } from "./element-with-slot-1djk8KXi.js";
+import "./input-wrapper-B__6jW4U.js";
 import "./icon-D0IQAVwS.js";
 var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (i, e, r, t) => {
-  for (var n = t > 1 ? void 0 : t ? b(e, r) : e, l = i.length - 1, c; l >= 0; l--)
-    (c = i[l]) && (n = (t ? c(e, r, n) : c(n)) || n);
+  for (var n = t > 1 ? void 0 : t ? b(e, r) : e, u = i.length - 1, c; u >= 0; u--)
+    (c = i[u]) && (n = (t ? c(e, r, n) : c(n)) || n);
   return t && n && y(e, r, n), n;
 };
 let s = class extends x {
   constructor() {
-    super(), this.inputRef = d(), this.helptextSlot = d(), 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 v(this, this.helptextSlot);
+    super(...arguments), this.inputRef = $(), 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;
   }
   attributeChangedCallback(i, e, r) {
     i === "value" && this.value !== e && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, e)), super.attributeChangedCallback(i, e, r);
@@ -54,23 +54,23 @@ let s = class extends x {
         .tagText=${this.tagText}
         class="pkt-textinput"
       >
-        <div class="pkt-contents" ${m(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" slot="helptext">${v(this, "helptext")}</div>
         <div class="pkt-input__container">
           ${this.prefix ? h`<div class="pkt-input-prefix">${this.prefix}</div>` : p}
           <input
-            ${m(this.inputRef)}
+            ${f(this.inputRef)}
             class=${e}
             type=${this.type}
             name=${(this.name || this.id) + "-input"}
             id=${this.id + "-input"}
-            placeholder=${u(this.placeholder)}
+            placeholder=${l(this.placeholder)}
             aria-labelledby=${r}
             autocomplete=${this.autocomplete || "off"}
-            minlength=${u(this.minlength || void 0)}
-            maxlength=${u(this.maxlength || void 0)}
-            min=${u(this.min || void 0)}
-            max=${u(this.max || void 0)}
-            step=${u(this.step || void 0)}
+            minlength=${l(this.minlength || void 0)}
+            maxlength=${l(this.maxlength || void 0)}
+            min=${l(this.min || void 0)}
+            max=${l(this.max || void 0)}
+            step=${l(this.step || void 0)}
             ?readonly=${this.readonly}
             size=${this.size || p}
             .value=${this.value}
@@ -92,8 +92,8 @@ let s = class extends x {
             @keydown=${(t) => {
       var n;
       if (t.key === "Enter") {
-        const l = this.internals.form;
-        l ? l.requestSubmit() : (n = this.inputRef.value) == null || n.blur();
+        const u = this.internals.form;
+        u ? u.requestSubmit() : (n = this.inputRef.value) == null || n.blur();
       }
     }}
           />
@@ -140,10 +140,10 @@ o([
   a({ type: Boolean })
 ], s.prototype, "omitSearchIcon", 2);
 o([
-  f()
+  m()
 ], s.prototype, "counterCurrent", 2);
 s = o([
-  $("pkt-textinput")
+  d("pkt-textinput")
 ], s);
 export {
   s as P

package/dist/{textinput-DRFZU3dA.cjs → textinput-cKrjvbJW.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-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`
+"use strict";const t=require("./element-CMTfByxQ.cjs"),p=require("./if-defined-hKKmbsI8.cjs"),l=require("./state-BNgpvY-A.cjs"),h=require("./ref-DahIePMT.cjs"),c=require("./class-map-Bokp1SoS.cjs"),d=require("./input-element-Xe9FTi2a.cjs"),$=require("./element-with-slot-yT8k1Z37.cjs");require("./input-wrapper-BdFdJU-k.cjs");require("./icon-Dj0oZZSa.cjs");var x=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?g(i,s):i,o=u.length-1,a;o>=0;o--)(a=u[o])&&(e=(n?a(i,s,e):a(e))||e);return n&&e&&x(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(...arguments),this.inputRef=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}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}
@@ -23,7 +23,7 @@
         .tagText=${this.tagText}
         class="pkt-textinput"
       >
-        <div class="pkt-contents" ${h.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" slot="helptext">${$.slotContent(this,"helptext")}</div>
         <div class="pkt-input__container">
           ${this.prefix?t.b`<div class="pkt-input-prefix">${this.prefix}</div>`:t.A}
           <input
@@ -32,14 +32,14 @@
             type=${this.type}
             name=${(this.name||this.id)+"-input"}
             id=${this.id+"-input"}
-            placeholder=${a.o(this.placeholder)}
+            placeholder=${p.o(this.placeholder)}
             aria-labelledby=${n}
             autocomplete=${this.autocomplete||"off"}
-            minlength=${a.o(this.minlength||void 0)}
-            maxlength=${a.o(this.maxlength||void 0)}
-            min=${a.o(this.min||void 0)}
-            max=${a.o(this.max||void 0)}
-            step=${a.o(this.step||void 0)}
+            minlength=${p.o(this.minlength||void 0)}
+            maxlength=${p.o(this.maxlength||void 0)}
+            min=${p.o(this.min||void 0)}
+            max=${p.o(this.max||void 0)}
+            step=${p.o(this.step||void 0)}
             ?readonly=${this.readonly}
             size=${this.size||t.A}
             .value=${this.value}
@@ -50,7 +50,7 @@
             @change=${e=>{e.stopImmediatePropagation()}}
             @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
             @blur=${e=>{this.value=e.target.value,this.onBlur(),e.stopImmediatePropagation()}}
-            @keydown=${e=>{var o;if(e.key==="Enter"){const p=this.internals.form;p?p.requestSubmit():(o=this.inputRef.value)==null||o.blur()}}}
+            @keydown=${e=>{var o;if(e.key==="Enter"){const a=this.internals.form;a?a.requestSubmit():(o=this.inputRef.value)==null||o.blur()}}}
           />
           ${this.suffix?t.b`<div class="pkt-input-suffix">
                 ${this.suffix}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.0.5",
+  "version": "16.1.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -79,5 +79,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "422e54c85a36cf45cddb1705192572d8456f1406"
+  "gitHead": "d6bf3b8ba1ebb83dafc1de2937609f67257d011e"
 }

package/src/components/accordion/accordionitem.ts

@@ -1,5 +1,5 @@
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
@@ -25,7 +25,7 @@ export interface IPktAccordionItem {
 }
 
 @customElement('pkt-accordion-item')
-export class PktAccordionItem extends PktElement implements IPktAccordionItem {
+export class PktAccordionItem extends PktElementWithSlot implements IPktAccordionItem {
   @property({ type: Boolean }) defaultOpen: boolean = false
   @property({ type: String }) title: string = ''
   @property({ type: String, reflect: true }) skin: TPktAccordionSkin | undefined = undefined
@@ -34,11 +34,9 @@ export class PktAccordionItem extends PktElement implements IPktAccordionItem {
   @property({ type: String, reflect: true }) name: string | undefined = undefined
 
   accordionItemRef: Ref<HTMLDivElement> = createRef()
-  defaultSlot: Ref<HTMLElement> = createRef()
 
   constructor() {
     super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
@@ -75,7 +73,7 @@ export class PktAccordionItem extends PktElement implements IPktAccordionItem {
           id="pkt-accordion-item__content-${this.id}"
           role="region"
         >
-          <div class="pkt-accordion-item__content-inner" ${ref(this.defaultSlot)}></div>
+          <div class="pkt-accordion-item__content-inner">${slotContent(this)}</div>
         </div>
       </details>
     `

package/src/components/alert/alert.ts

@@ -1,9 +1,8 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing, PropertyValues } from 'lit'
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { ref, createRef, Ref } from 'lit/directives/ref.js'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import type { TAriaLive, TAlertSkin } from 'shared-types'
 import { updateClassAttribute } from '@/utils/classutils'
 import specs from 'componentSpecs/alert.json'
@@ -24,12 +23,9 @@ export interface IPktAlert {
   role?: string
 }
 @customElement('pkt-alert')
-export class PktAlert extends PktElement implements IPktAlert {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
+export class PktAlert extends PktElementWithSlot implements IPktAlert {
   constructor() {
     super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
     this._isClosed = false
   }
 
@@ -116,7 +112,7 @@ export class PktAlert extends PktElement implements IPktAlert {
             : nothing}
           ${this.title ? html`<div class="pkt-alert__title">${this.title}</div>` : nothing}
 
-          <div class="pkt-alert__text" ${ref(this.defaultSlot)}></div>
+          <div class="pkt-alert__text">${slotContent(this)}</div>
 
           ${this.date
             ? html`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`

package/src/components/button/button.ts

@@ -1,12 +1,11 @@
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
 import type { Booleanish, THTMLButtonType } from 'shared-types'
 import { html, nothing, PropertyValues } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { createRef, Ref, ref } from 'lit/directives/ref.js'
 
 import '@/components/icon'
 
@@ -57,14 +56,7 @@ export interface IPktButton {
   loadingAnimationPath?: string
 }
 @customElement('pkt-button')
-export class PktButton extends PktElement<IPktButton> implements IPktButton {
-  slotController: PktSlotController
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
+export class PktButton extends PktElementWithSlot<IPktButton> implements IPktButton {
 
   // Properties
   @property({ type: String }) iconName: string = 'user'
@@ -177,7 +169,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
               path=${ifDefined(this.iconPath)}
             ></pkt-icon>`
           : nothing}
-        <span class="pkt-btn__text" ${ref(this.defaultSlot)}></span>
+        <span class="pkt-btn__text">${slotContent(this)}</span>
         ${this.variant === 'icons-right-and-left'
           ? html`<pkt-icon
               class="pkt-btn__icon"