@oslokommune/punkt-elements 13.4.0 → 13.4.2

package/CHANGELOG.md

@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.4.2](https://github.com/oslokommune/punkt/compare/13.4.1...13.4.2) (2025-09-04)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [13.4.1](https://github.com/oslokommune/punkt/compare/13.4.0...13.4.1) (2025-09-03)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.4.0](https://github.com/oslokommune/punkt/compare/13.3.1...13.4.0) (2025-09-03)
 
 ### ⚠ BREAKING CHANGES

package/dist/{alert-B0OUR9oD.js → alert-B07oUpkq.js}

@@ -1,10 +1,11 @@
 import { e as u } from "./class-map-BpTj9gtz.js";
 import { P as f, E as h, x as p, n as a, a as v } from "./element-CgEWt74-.js";
-import { r as k } from "./state-Bo2bck5_.js";
-import { P as m } from "./pkt-slot-controller-BPGj-LC5.js";
+import { r as m } from "./state-Bo2bck5_.js";
+import { P as k } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as _, n as b } from "./ref-BBYSqgeW.js";
 import { u as y } from "./classutils-RQs1k6D9.js";
 import "./icon-CC1js8eR.js";
+import "./button-DhispFOY.js";
 const C = {
   skin: {
     default: "info"
@@ -34,7 +35,7 @@ let e = class extends f {
       ), this.dispatchEvent(
         new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0, composed: !0 })
       );
-    }, this.slotController = new m(this, this.defaultSlot), this._isClosed = !1;
+    }, this.slotController = new k(this, this.defaultSlot), this._isClosed = !1;
   }
   // Lifecycle
   connectedCallback() {
@@ -117,7 +118,7 @@ i([
   a({ type: String, reflect: !0 })
 ], e.prototype, "role", 2);
 i([
-  k()
+  m()
 ], e.prototype, "_isClosed", 2);
 e = i([
   v("pkt-alert")

package/dist/{alert-BH0lJ2ny.cjs → alert-DQNBDKjT.cjs}

@@ -1,4 +1,4 @@
-"use strict";const c=require("./class-map-BBG2gMX4.cjs"),t=require("./element-6DBpyGQm.cjs"),d=require("./state-DPobt-Yz.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),u=require("./ref-iJtiv3o2.cjs"),k=require("./classutils-BwNK82ZQ.cjs");require("./icon-B_ryAy4Q.cjs");const v={skin:{default:"info"},ariaLive:{default:"polite"},compact:{default:!1},closeAlert:{default:!1}},a={props:v};var f=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(o,e,s,l)=>{for(var r=l>1?void 0:l?_(e,s):e,p=o.length-1,n;p>=0;p--)(n=o[p])&&(r=(l?n(e,s,r):n(r))||r);return l&&r&&f(e,s,r),r};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=u.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this.role="status",this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new h.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(e,s,l){e==="ariaLive"&&(this["aria-live"]=l),super.attributeChangedCallback(e,s,l)}updated(e){super.updated(e),e.has("ariaLive")&&(this["aria-live"]=this.ariaLive),e.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const e={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return t.x`
+"use strict";const c=require("./class-map-BBG2gMX4.cjs"),t=require("./element-6DBpyGQm.cjs"),d=require("./state-DPobt-Yz.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),u=require("./ref-iJtiv3o2.cjs"),k=require("./classutils-BwNK82ZQ.cjs");require("./icon-B_ryAy4Q.cjs");require("./button-B8rdtaHB.cjs");const v={skin:{default:"info"},ariaLive:{default:"polite"},compact:{default:!1},closeAlert:{default:!1}},a={props:v};var f=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(o,e,s,r)=>{for(var l=r>1?void 0:r?_(e,s):e,p=o.length-1,n;p>=0;p--)(n=o[p])&&(l=(r?n(e,s,l):n(l))||l);return r&&l&&f(e,s,l),l};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=u.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this.role="status",this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new h.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(e,s,r){e==="ariaLive"&&(this["aria-live"]=r),super.attributeChangedCallback(e,s,r)}updated(e){super.updated(e),e.has("ariaLive")&&(this["aria-live"]=this.ariaLive),e.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const e={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return t.x`
       <div class=${c.e(e)} aria-live=${this["aria-live"]}>
         <div class=${c.e(s)}>
           <pkt-icon

package/dist/{backlink-B13JTp9D.js → backlink-C2jbzu0U.js}

@@ -1,9 +1,10 @@
-import { P as c, x as k, n as o, a as f } from "./element-CgEWt74-.js";
-import { o as h } from "./if-defined-CmuO4Vz9.js";
-var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (t, r, i, l) => {
-  for (var e = l > 1 ? void 0 : l ? u(r, i) : r, n = t.length - 1, p; n >= 0; n--)
-    (p = t[n]) && (e = (l ? p(r, i, e) : p(e)) || e);
-  return l && e && b(r, i, e), e;
+import { P as c, x as k, n as o, a as h } from "./element-CgEWt74-.js";
+import { o as b } from "./if-defined-CmuO4Vz9.js";
+import "./icon-CC1js8eR.js";
+var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, l = (t, r, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? u(r, i) : r, n = t.length - 1, p; n >= 0; n--)
+    (p = t[n]) && (e = (s ? p(r, i, e) : p(e)) || e);
+  return s && e && f(r, i, e), e;
 };
 let a = class extends c {
   constructor() {
@@ -18,7 +19,7 @@ let a = class extends c {
       class="pkt-back-link"
       aria-label=${this.ariaLabel || "Gå tilbake til forrige side"}
     >
-      <a href=${h(this.href || "/")} class="pkt-link pkt-link--icon-left"
+      <a href=${b(this.href || "/")} class="pkt-link pkt-link--icon-left"
         ><pkt-icon
           class="pkt-back-link__icon pkt-icon pkt-link__icon"
           name="chevron-thin-left"
@@ -29,17 +30,17 @@ let a = class extends c {
     </nav>`;
   }
 };
-s([
-  o({ type: String, reflect: !0 })
+l([
+  o({ type: String })
 ], a.prototype, "href", 2);
-s([
-  o({ type: String, reflect: !0 })
+l([
+  o({ type: String })
 ], a.prototype, "text", 2);
-s([
-  o({ type: String, reflect: !0 })
+l([
+  o({ type: String })
 ], a.prototype, "ariaLabel", 2);
-a = s([
-  f("pkt-backlink")
+a = l([
+  h("pkt-backlink")
 ], a);
 export {
   a as P

package/dist/backlink-JbBNi3qg.cjs

@@ -0,0 +1,13 @@
+"use strict";const r=require("./element-6DBpyGQm.cjs"),c=require("./if-defined-Cni-RHLS.cjs");require("./icon-B_ryAy4Q.cjs");var p=Object.defineProperty,o=Object.getOwnPropertyDescriptor,n=(k,t,a,i)=>{for(var e=i>1?void 0:i?o(t,a):t,s=k.length-1,l;s>=0;s--)(l=k[s])&&(e=(i?l(t,a,e):l(e))||e);return i&&e&&p(t,a,e),e};exports.PktBackLink=class extends r.PktElement{constructor(){super(...arguments),this.href="",this.text="Forsiden",this.ariaLabel=""}attributeChangedCallback(t,a,i){t==="arialabel"&&this.removeAttribute("arialabel"),t==="href"&&this.removeAttribute("href"),t==="text"&&this.removeAttribute("text"),super.attributeChangedCallback(t,a,i)}render(){return r.x`<nav
+      class="pkt-back-link"
+      aria-label=${this.ariaLabel||"Gå tilbake til forrige side"}
+    >
+      <a href=${c.o(this.href||"/")} class="pkt-link pkt-link--icon-left"
+        ><pkt-icon
+          class="pkt-back-link__icon pkt-icon pkt-link__icon"
+          name="chevron-thin-left"
+          aria-hidden="true"
+        ></pkt-icon
+        ><span class="pkt-back-link__text">${this.text}</span></a
+      >
+    </nav>`}};n([r.n({type:String})],exports.PktBackLink.prototype,"href",2);n([r.n({type:String})],exports.PktBackLink.prototype,"text",2);n([r.n({type:String})],exports.PktBackLink.prototype,"ariaLabel",2);exports.PktBackLink=n([r.t("pkt-backlink")],exports.PktBackLink);

package/dist/{button-CDocR7iN.cjs → button-B8rdtaHB.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-6DBpyGQm.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),u=require("./class-map-BBG2gMX4.cjs"),a=require("./if-defined-Cni-RHLS.cjs"),d=require("./ref-iJtiv3o2.cjs");var c=Object.defineProperty,k=Object.getOwnPropertyDescriptor,e=(r,i,s,n)=>{for(var o=n>1?void 0:n?k(i,s):i,p=r.length-1,l;p>=0;p--)(l=r[p])&&(o=(n?l(i,s,o):l(o))||o);return n&&o&&c(i,s,o),o};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktButton=class extends t.PktElement{constructor(){super(),this.defaultSlot=d.e(),this.iconName="user",this.secondIconName="user",this.mode="light",this.size="medium",this.skin="primary",this.variant="label-only",this.state="normal",this.type="button",this.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=window.pktAnimationPath,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",i=>{(this.disabled||this.hasAttribute("disabled")||this.isLoading)&&(i.preventDefault(),i.stopImmediatePropagation())},!0),this.addEventListener("keydown",i=>{(this.disabled||this.hasAttribute("disabled")||this.isLoading)&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),i.stopImmediatePropagation())},!0)}attributeChangedCallback(i,s,n){super.attributeChangedCallback(i,s,n),i==="disabled"&&n==="false"&&(this.disabled=!1),(i==="isloading"||i==="isLoading")&&n==="false"&&(this.isLoading=!1)}firstUpdated(i){super.firstUpdated(i),this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1)}render(){const i=this.form??this.getAttribute("form")??void 0,s={"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading};return t.x`
+"use strict";const t=require("./element-6DBpyGQm.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),u=require("./class-map-BBG2gMX4.cjs"),a=require("./if-defined-Cni-RHLS.cjs"),d=require("./ref-iJtiv3o2.cjs");require("./icon-B_ryAy4Q.cjs");var c=Object.defineProperty,k=Object.getOwnPropertyDescriptor,e=(r,i,s,n)=>{for(var o=n>1?void 0:n?k(i,s):i,p=r.length-1,l;p>=0;p--)(l=r[p])&&(o=(n?l(i,s,o):l(o))||o);return n&&o&&c(i,s,o),o};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktButton=class extends t.PktElement{constructor(){super(),this.defaultSlot=d.e(),this.iconName="user",this.secondIconName="user",this.mode="light",this.size="medium",this.skin="primary",this.variant="label-only",this.state="normal",this.type="button",this.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=window.pktAnimationPath,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",i=>{(this.disabled||this.hasAttribute("disabled")||this.isLoading)&&(i.preventDefault(),i.stopImmediatePropagation())},!0),this.addEventListener("keydown",i=>{(this.disabled||this.hasAttribute("disabled")||this.isLoading)&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),i.stopImmediatePropagation())},!0)}attributeChangedCallback(i,s,n){super.attributeChangedCallback(i,s,n),i==="disabled"&&n==="false"&&(this.disabled=!1),(i==="isloading"||i==="isLoading")&&n==="false"&&(this.isLoading=!1)}firstUpdated(i){super.firstUpdated(i),this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1)}render(){const i=this.form??this.getAttribute("form")??void 0,s={"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading};return t.x`
       <button
         class=${u.e(s)}
         type=${this.type}

package/dist/{button-DrrEvUy9.js → button-DhispFOY.js}

@@ -3,6 +3,7 @@ import { P as m } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as u } from "./class-map-BpTj9gtz.js";
 import { o as l } from "./if-defined-CmuO4Vz9.js";
 import { e as y, n as k } from "./ref-BBYSqgeW.js";
+import "./icon-CC1js8eR.js";
 var g = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, e = (t, o, n, r) => {
   for (var a = r > 1 ? void 0 : r ? $(o, n) : o, d = t.length - 1, h; d >= 0; d--)
     (h = t[d]) && (a = (r ? h(o, n, a) : h(a)) || a);

package/dist/{card-uccD6Pnv.cjs → card-BUITGoqX.cjs}

@@ -1,7 +1,7 @@
-"use strict";const l=require("./class-map-BBG2gMX4.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),t=require("./element-6DBpyGQm.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-iJtiv3o2.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-Bbs0U_Au.cjs");const k={layout:{default:"vertical"},skin:{default:"outlined"},padding:{default:"default"}},h={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(d,a,i,s)=>{for(var r=s>1?void 0:s?m(a,i):a,n=d.length-1,o;n>=0;n--)(o=d[n])&&(r=(s?o(a,i,r):o(r))||r);return s&&r&&u(a,i,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=h.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=h.props.padding.default,this.skin=h.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,n;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},i=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),s=((n=this.ariaLabel)==null?void 0:n.trim())||(this.heading?this.heading:"kort");return t.x`
+"use strict";const p=require("./class-map-BBG2gMX4.cjs"),h=require("./if-defined-Cni-RHLS.cjs"),t=require("./element-6DBpyGQm.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-iJtiv3o2.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-Bbs0U_Au.cjs");require("./heading-BRE_iFtR.cjs");const k={layout:{default:"vertical"},skin:{type:["outlined","outlined-beige","gray","blue","beige","green"],default:"outlined"},padding:{default:"default"}},o={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(i,a,s,n)=>{for(var r=n>1?void 0:n?m(a,s):a,d=i.length-1,l;d>=0;d--)(l=i[d])&&(r=(n?l(a,s,r):l(r))||r);return n&&r&&u(a,s,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=o.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=o.props.padding.default,this.skin=o.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,d;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},s=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),n=((d=this.ariaLabel)==null?void 0:d.trim())||(this.heading?this.heading:"kort");return t.x`
       <article
-        class=${l.e(a)}
-        aria-label=${p.o(this.clickCardLink?i:s)}
+        class=${p.e(a)}
+        aria-label=${h.o(this.clickCardLink?s:n)}
       >
         ${this.renderImage()}
         <div class="pkt-card__wrapper">
@@ -14,7 +14,7 @@
       </article>
     `}renderImage(){const a={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return t.x`
       ${this.image.src&&t.x`
-        <div class=${l.e(a)}>
+        <div class=${p.e(a)}>
           <img src=${this.image.src} alt=${this.image.alt||""} />
         </div>
       `}
@@ -58,19 +58,19 @@
     `}renderTags(){const a={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return t.x`
       ${this.tags.length>0?t.x`
             <div
-              class=${l.e(a)}
+              class=${p.e(a)}
               role="list"
               aria-label=${this.tags.length>1?"merkelapper":"merkelapp"}
             >
-              ${this.tags.map(i=>t.x`
+              ${this.tags.map(s=>t.x`
                   <pkt-tag
                     role="listitem"
                     textStyle="normal-text"
                     size="medium"
-                    skin=${p.o(i.skin)}
-                    iconName=${p.o(i.iconName)}
+                    skin=${h.o(s.skin)}
+                    iconName=${h.o(s.iconName)}
                   >
-                    <span>${i.text}</span>
+                    <span>${s.text}</span>
                   </pkt-tag>
                 `)}
             </div>
@@ -84,4 +84,4 @@
               ${this.metaTrail?t.x`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:t.E}
             </footer>
           `:t.E}
-    `}};e([t.n({type:String})],exports.PktCard.prototype,"ariaLabel",2);e([t.n({type:String})],exports.PktCard.prototype,"metaLead",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"borderOnHover",2);e([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"clickCardLink",2);e([t.n({type:String})],exports.PktCard.prototype,"metaTrail",2);e([t.n({type:String})],exports.PktCard.prototype,"layout",2);e([t.n({type:String})],exports.PktCard.prototype,"heading",2);e([t.n({type:Number})],exports.PktCard.prototype,"headinglevel",2);e([t.n({type:Object})],exports.PktCard.prototype,"image",2);e([t.n({type:String})],exports.PktCard.prototype,"imageShape",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"openLinkInNewTab",2);e([t.n({type:String})],exports.PktCard.prototype,"padding",2);e([t.n({type:String})],exports.PktCard.prototype,"skin",2);e([t.n({type:String})],exports.PktCard.prototype,"subheading",2);e([t.n({type:String})],exports.PktCard.prototype,"tagPosition",2);e([t.n({type:Array})],exports.PktCard.prototype,"tags",2);exports.PktCard=e([t.t("pkt-card")],exports.PktCard);
+    `}};e([t.n({type:String})],exports.PktCard.prototype,"ariaLabel",2);e([t.n({type:String})],exports.PktCard.prototype,"metaLead",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"borderOnHover",2);e([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"clickCardLink",2);e([t.n({type:String})],exports.PktCard.prototype,"metaTrail",2);e([t.n({type:String})],exports.PktCard.prototype,"layout",2);e([t.n({type:String})],exports.PktCard.prototype,"heading",2);e([t.n({type:Number})],exports.PktCard.prototype,"headinglevel",2);e([t.n({type:Object})],exports.PktCard.prototype,"image",2);e([t.n({type:String})],exports.PktCard.prototype,"imageShape",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"openLinkInNewTab",2);e([t.n({type:String})],exports.PktCard.prototype,"padding",2);e([t.n({type:String,converter:{fromAttribute:i=>{const a=o.props.skin.type;return i&&a.includes(i)?i:(i&&!a.includes(i)&&console.warn(`Invalid skin value "${i}". Using default skin "${o.props.skin.default}".`),o.props.skin.default)},toAttribute:i=>i}})],exports.PktCard.prototype,"skin",2);e([t.n({type:String})],exports.PktCard.prototype,"subheading",2);e([t.n({type:String})],exports.PktCard.prototype,"tagPosition",2);e([t.n({type:Array})],exports.PktCard.prototype,"tags",2);exports.PktCard=e([t.t("pkt-card")],exports.PktCard);

package/dist/{card-BI1NZONj.js → card-Dtw26f7i.js}

@@ -1,35 +1,44 @@
-import { e as g } from "./class-map-BpTj9gtz.js";
-import { o as c } from "./if-defined-CmuO4Vz9.js";
-import { P as m, E as d, x as t, n as i, a as u } from "./element-CgEWt74-.js";
+import { e as c } from "./class-map-BpTj9gtz.js";
+import { o as k } from "./if-defined-CmuO4Vz9.js";
+import { P as u, E as d, x as t, n as r, a as m } from "./element-CgEWt74-.js";
 import { P as $ } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as y, n as _ } from "./ref-BBYSqgeW.js";
 import "./icon-CC1js8eR.js";
 import "./tag-DyXzTY68.js";
+import "./heading-D6jXE_Mz.js";
 const b = {
   layout: {
     default: "vertical"
   },
   skin: {
+    type: [
+      "outlined",
+      "outlined-beige",
+      "gray",
+      "blue",
+      "beige",
+      "green"
+    ],
     default: "outlined"
   },
   padding: {
     default: "default"
   }
-}, k = {
+}, p = {
   props: b
 };
-var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (r, s, o, p) => {
-  for (var n = p > 1 ? void 0 : p ? S(s, o) : s, l = r.length - 1, h; l >= 0; l--)
-    (h = r[l]) && (n = (p ? h(s, o, n) : h(n)) || n);
-  return p && n && f(s, o, n), n;
+var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, s, l, o) => {
+  for (var n = o > 1 ? void 0 : o ? S(s, l) : s, h = e.length - 1, g; h >= 0; h--)
+    (g = e[h]) && (n = (o ? g(s, l, n) : g(n)) || n);
+  return o && n && f(s, l, n), n;
 };
-let e = class extends m {
+let a = class extends u {
   //Constructor
   constructor() {
-    super(), this.defaultSlot = y(), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.layout = k.props.layout.default, this.heading = "", this.headinglevel = 3, this.image = {
+    super(), this.defaultSlot = y(), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.layout = p.props.layout.default, this.heading = "", this.headinglevel = 3, this.image = {
       src: "",
       alt: ""
-    }, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = k.props.padding.default, this.skin = k.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [], this.slotController = new $(this, this.defaultSlot);
+    }, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = p.props.padding.default, this.skin = p.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [], this.slotController = new $(this, this.defaultSlot);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -38,18 +47,18 @@ let e = class extends m {
   // Main render method
   // prettier-ignore
   render() {
-    var p, n;
-    const r = {
+    var o, n;
+    const e = {
       "pkt-card": !0,
       [`pkt-card--${this.skin}`]: this.skin,
       [`pkt-card--${this.layout}`]: this.layout,
       [`pkt-card--padding-${this.padding}`]: this.padding,
       "pkt-card--border-on-hover": this.borderOnHover
-    }, s = ((p = this.ariaLabel) == null ? void 0 : p.trim()) || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), o = ((n = this.ariaLabel) == null ? void 0 : n.trim()) || (this.heading ? this.heading : "kort");
+    }, s = ((o = this.ariaLabel) == null ? void 0 : o.trim()) || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), l = ((n = this.ariaLabel) == null ? void 0 : n.trim()) || (this.heading ? this.heading : "kort");
     return t`
       <article
-        class=${g(r)}
-        aria-label=${c(this.clickCardLink ? s : o)}
+        class=${c(e)}
+        aria-label=${k(this.clickCardLink ? s : l)}
       >
         ${this.renderImage()}
         <div class="pkt-card__wrapper">
@@ -64,13 +73,13 @@ let e = class extends m {
   }
   // Render methods for different parts of the card
   renderImage() {
-    const r = {
+    const e = {
       "pkt-card__image": !0,
       [`pkt-card__image-${this.imageShape}`]: this.imageShape
     };
     return t`
       ${this.image.src && t`
-        <div class=${g(r)}>
+        <div class=${c(e)}>
           <img src=${this.image.src} alt=${this.image.alt || ""} />
         </div>
       `}
@@ -119,9 +128,9 @@ let e = class extends m {
   // Render header
   // prettier-ignore
   renderHeader() {
-    const r = !!this.heading || !!this.subheading;
+    const e = !!this.heading || !!this.subheading;
     return t`
-      ${r ? t`
+      ${e ? t`
             <header class="pkt-card__header">
               ${this.renderHeading()} 
               ${this.renderLinkHeading()} 
@@ -131,14 +140,14 @@ let e = class extends m {
     `;
   }
   renderTags() {
-    const r = {
+    const e = {
       "pkt-card__tags": !0,
       [`pkt-card__tags-${this.tagPosition}`]: this.tagPosition
     };
     return t`
       ${this.tags.length > 0 ? t`
             <div
-              class=${g(r)}
+              class=${c(e)}
               role="list"
               aria-label=${this.tags.length > 1 ? "merkelapper" : "merkelapp"}
             >
@@ -148,8 +157,8 @@ let e = class extends m {
                     role="listitem"
                     textStyle="normal-text"
                     size="medium"
-                    skin=${c(s.skin)}
-                    iconName=${c(s.iconName)}
+                    skin=${k(s.skin)}
+                    iconName=${k(s.iconName)}
                   >
                     <span>${s.text}</span>
                   </pkt-tag>
@@ -175,57 +184,68 @@ let e = class extends m {
     `;
   }
 };
-a([
-  i({ type: String })
-], e.prototype, "ariaLabel", 2);
-a([
-  i({ type: String })
-], e.prototype, "metaLead", 2);
-a([
-  i({ type: Boolean })
-], e.prototype, "borderOnHover", 2);
-a([
-  i({ type: String, reflect: !0 })
-], e.prototype, "clickCardLink", 2);
-a([
-  i({ type: String })
-], e.prototype, "metaTrail", 2);
-a([
-  i({ type: String })
-], e.prototype, "layout", 2);
-a([
-  i({ type: String })
-], e.prototype, "heading", 2);
-a([
-  i({ type: Number })
-], e.prototype, "headinglevel", 2);
-a([
-  i({ type: Object })
-], e.prototype, "image", 2);
-a([
-  i({ type: String })
-], e.prototype, "imageShape", 2);
-a([
-  i({ type: Boolean })
-], e.prototype, "openLinkInNewTab", 2);
-a([
-  i({ type: String })
-], e.prototype, "padding", 2);
-a([
-  i({ type: String })
-], e.prototype, "skin", 2);
-a([
-  i({ type: String })
-], e.prototype, "subheading", 2);
-a([
-  i({ type: String })
-], e.prototype, "tagPosition", 2);
-a([
-  i({ type: Array })
-], e.prototype, "tags", 2);
-e = a([
-  u("pkt-card")
-], e);
+i([
+  r({ type: String })
+], a.prototype, "ariaLabel", 2);
+i([
+  r({ type: String })
+], a.prototype, "metaLead", 2);
+i([
+  r({ type: Boolean })
+], a.prototype, "borderOnHover", 2);
+i([
+  r({ type: String, reflect: !0 })
+], a.prototype, "clickCardLink", 2);
+i([
+  r({ type: String })
+], a.prototype, "metaTrail", 2);
+i([
+  r({ type: String })
+], a.prototype, "layout", 2);
+i([
+  r({ type: String })
+], a.prototype, "heading", 2);
+i([
+  r({ type: Number })
+], a.prototype, "headinglevel", 2);
+i([
+  r({ type: Object })
+], a.prototype, "image", 2);
+i([
+  r({ type: String })
+], a.prototype, "imageShape", 2);
+i([
+  r({ type: Boolean })
+], a.prototype, "openLinkInNewTab", 2);
+i([
+  r({ type: String })
+], a.prototype, "padding", 2);
+i([
+  r({
+    type: String,
+    converter: {
+      fromAttribute: (e) => {
+        const s = p.props.skin.type;
+        return e && s.includes(e) ? e : (e && !s.includes(e) && console.warn(
+          `Invalid skin value "${e}". Using default skin "${p.props.skin.default}".`
+        ), p.props.skin.default);
+      },
+      toAttribute: (e) => e
+    }
+  })
+], a.prototype, "skin", 2);
+i([
+  r({ type: String })
+], a.prototype, "subheading", 2);
+i([
+  r({ type: String })
+], a.prototype, "tagPosition", 2);
+i([
+  r({ type: Array })
+], a.prototype, "tags", 2);
+a = i([
+  m("pkt-card")
+], a);
 export {
-  e as P
+  a as P
 };

package/dist/checkbox-Gn7Wtk9h.cjs

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