@oslokommune/punkt-elements 12.37.6 → 12.38.0

package/CHANGELOG.md

@@ -5,6 +5,60 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.38.0](https://github.com/oslokommune/punkt/compare/12.37.8...12.38.0) (2025-05-13)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Refaktorering og forbedringer av kort – klikkbart lenkekort, runde bilder, tilgjengelighet, semantikk, fleksibilitet, styling (#2511). Lagt til støtte for: 
+  - Tilgjenglig, klikkbart lenkekort
+  - Variabel tagposisjon
+  - Runde bilder
+  - Responsivitet
+  - Fokus på rammen av kortet
+  - Valgfri hover på rammen av kortet
+  - Variant uten padding
+  - Ny skin: outlined-beige
+  - forfatter
+  - dato
+  
+  Annet:
+  - Bruker ny headingkomponent
+  - Støtte for valg av headingnivå
+  - Semantisk HTML med article, header, section og footer
+  - Fokusert på UU og lagt til aria-label og roller på ulike deler av kortet
+  - Kortet går nå fra landskap til portett på små skjermer
+  - Mange stylingendringer
+  - Håndterer nå at brukere ikke cropper bilder på forhånd slik at de ved ulike størrelser allikevel får uniforme størrelser på bildene i kortene
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [12.37.8](https://github.com/oslokommune/punkt/compare/12.37.7...12.37.8) (2025-05-13)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.37.6](https://github.com/oslokommune/punkt/compare/12.37.5...12.37.6) (2025-05-13)
 
 ### ⚠ BREAKING CHANGES

package/dist/card-CZG7XGlj.js

@@ -0,0 +1,231 @@
+import { e as c } from "./class-map-KyMqi0fa.js";
+import { o as g } from "./if-defined-BErSJCeJ.js";
+import { P as u, E as d, x as t, n as r, a as $ } from "./element-DjjF_tEh.js";
+import { P as m } from "./pkt-slot-controller-DtDaD9q_.js";
+import { e as _, n as y } from "./ref-iIffqQAI.js";
+import "./icon-Beoxup8E.js";
+import "./tag-Cu8afZy8.js";
+const b = {
+  skin: {
+    default: "outlined"
+  },
+  direction: {
+    default: "portrait"
+  },
+  padding: {
+    default: "standard"
+  }
+}, k = {
+  props: b
+};
+var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (a, s, p, o) => {
+  for (var n = o > 1 ? void 0 : o ? S(s, p) : s, h = a.length - 1, l; h >= 0; h--)
+    (l = a[h]) && (n = (o ? l(s, p, n) : l(n)) || n);
+  return o && n && f(s, p, n), n;
+};
+let e = class extends u {
+  //Constructor
+  constructor() {
+    super(), this.defaultSlot = _(), this.ariaLabel = "", this.author = null, this.borderOnHover = !0, this.clickCardLink = null, this.date = null, this.direction = k.props.direction.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 m(this, this.defaultSlot);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  // Render methods
+  // Main render method
+  // prettier-ignore
+  render() {
+    var o, n;
+    const a = {
+      "pkt-card": !0,
+      [`pkt-card--${this.skin}`]: this.skin,
+      [`pkt-card--${this.direction}`]: this.direction,
+      [`pkt-card--padding-${this.padding}`]: this.padding,
+      "pkt-card--border-on-hover": this.borderOnHover
+    }, s = ((o = this.ariaLabel) == null ? void 0 : o.trim()) || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), p = ((n = this.ariaLabel) == null ? void 0 : n.trim()) || (this.heading ? this.heading : "kort");
+    return t`
+      <article
+        class=${c(a)}
+        aria-label=${g(this.clickCardLink ? s : p)}
+      >
+        ${this.renderImage()}
+        <div class="pkt-card__wrapper">
+          ${this.tagPosition === "top" ? this.renderTags() : d} 
+          ${this.renderHeader()}
+          ${this.renderSlot()} 
+          ${this.tagPosition === "bottom" ? this.renderTags() : d}
+          ${this.renderCreditline()}
+        </div>
+      </article>
+    `;
+  }
+  // Render methods for different parts of the card
+  renderImage() {
+    const a = {
+      "pkt-card__image": !0,
+      [`pkt-card__image-${this.imageShape}`]: this.imageShape
+    };
+    return t`
+      ${this.image.src && t`
+        <div class=${c(a)}>
+          <img src=${this.image.src} alt=${this.image.alt || ""} />
+        </div>
+      `}
+    `;
+  }
+  // Do not render heading if link is present, render link heading instead
+  // Combine the rendering for headings into a renderHeader method
+  renderHeading() {
+    return t`
+      ${this.heading && !this.clickCardLink ? t`
+            <pkt-heading
+              class="pkt-card__heading"
+              .level=${this.headinglevel || 3}
+              size="medium"
+              nospacing
+            >
+              ${this.heading}
+            </pkt-heading>
+          ` : d}
+    `;
+  }
+  renderLinkHeading() {
+    return t`
+      ${this.clickCardLink ? t`
+            <pkt-heading
+              class="pkt-card__link-heading pkt-card__heading"
+              .level=${this.headinglevel || 3}
+              size="medium"
+              nospacing
+            >
+              <a
+                class="pkt-card__link"
+                href=${this.clickCardLink}
+                target=${this.openLinkInNewTab ? "_blank" : "_self"}
+                >${this.heading}</a
+              >
+            </pkt-heading>
+          ` : d}
+    `;
+  }
+  renderSubheading() {
+    return t`
+      ${this.subheading ? t` <p class="pkt-card__subheading ">${this.subheading}</p> ` : d}
+    `;
+  }
+  // Render header
+  // prettier-ignore
+  renderHeader() {
+    const a = !!this.heading || !!this.subheading;
+    return t`
+      ${a ? t`
+            <header class="pkt-card__header">
+              ${this.renderHeading()} 
+              ${this.renderLinkHeading()} 
+              ${this.renderSubheading()}
+            </header>
+          ` : d}
+    `;
+  }
+  renderTags() {
+    const a = {
+      "pkt-card__tags": !0,
+      [`pkt-card__tags-${this.tagPosition}`]: this.tagPosition
+    };
+    return t`
+      ${this.tags.length > 0 ? t`
+            <div
+              class=${c(a)}
+              role="list"
+              aria-label=${this.tags.length > 1 ? "merkelapper" : "merkelapp"}
+            >
+              ${this.tags.map(
+      (s) => t`
+                  <pkt-tag
+                    role="listitem"
+                    textStyle="normal-text"
+                    size="medium"
+                    skin=${g(s.skin)}
+                    iconName=${g(s.iconName)}
+                  >
+                    ${s.text}
+                  </pkt-tag>
+                `
+    )}
+            </div>
+          ` : d}
+    `;
+  }
+  renderSlot() {
+    return t`
+      ${this.defaultSlot && t`<section class="pkt-card__content" ${y(this.defaultSlot)}></section>`}
+    `;
+  }
+  renderCreditline() {
+    return t`
+      ${this.author || this.date ? t`
+            <footer class="pkt-card__creditline">
+              ${this.author ? t`<span class="pkt-card__creditline-author">${this.author}</span>` : d}
+              ${this.date ? t`<span class="pkt-card__creditline-date">${this.date}</span>` : d}
+            </footer>
+          ` : d}
+    `;
+  }
+};
+i([
+  r({ type: String })
+], e.prototype, "ariaLabel", 2);
+i([
+  r({ type: String })
+], e.prototype, "author", 2);
+i([
+  r({ type: Boolean })
+], e.prototype, "borderOnHover", 2);
+i([
+  r({ type: String, reflect: !0 })
+], e.prototype, "clickCardLink", 2);
+i([
+  r({ type: String })
+], e.prototype, "date", 2);
+i([
+  r({ type: String })
+], e.prototype, "direction", 2);
+i([
+  r({ type: String })
+], e.prototype, "heading", 2);
+i([
+  r({ type: Number })
+], e.prototype, "headinglevel", 2);
+i([
+  r({ type: Object })
+], e.prototype, "image", 2);
+i([
+  r({ type: String })
+], e.prototype, "imageShape", 2);
+i([
+  r({ type: Boolean })
+], e.prototype, "openLinkInNewTab", 2);
+i([
+  r({ type: String })
+], e.prototype, "padding", 2);
+i([
+  r({ type: String })
+], e.prototype, "skin", 2);
+i([
+  r({ type: String })
+], e.prototype, "subheading", 2);
+i([
+  r({ type: String })
+], e.prototype, "tagPosition", 2);
+i([
+  r({ type: Array })
+], e.prototype, "tags", 2);
+e = i([
+  $("pkt-card")
+], e);
+export {
+  e as P
+};

package/dist/card-Di1MQneh.cjs

@@ -0,0 +1,87 @@
+"use strict";const p=require("./class-map-DCyaICmy.cjs"),h=require("./if-defined-a3sotaUr.cjs"),t=require("./element-BSypUpzA.cjs"),g=require("./pkt-slot-controller-Da-RgXfS.cjs"),c=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");require("./tag-B9kFYxHg.cjs");const k={skin:{default:"outlined"},direction:{default:"portrait"},padding:{default:"standard"}},l={props:k};var u=Object.defineProperty,$=Object.getOwnPropertyDescriptor,e=(d,i,a,n)=>{for(var r=n>1?void 0:n?$(i,a):i,s=d.length-1,o;s>=0;s--)(o=d[s])&&(r=(n?o(i,a,r):o(r))||r);return n&&r&&u(i,a,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.author=null,this.borderOnHover=!0,this.clickCardLink=null,this.date=null,this.direction=l.props.direction.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=l.props.padding.default,this.skin=l.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,s;const i={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},a=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),n=((s=this.ariaLabel)==null?void 0:s.trim())||(this.heading?this.heading:"kort");return t.x`
+      <article
+        class=${p.e(i)}
+        aria-label=${h.o(this.clickCardLink?a:n)}
+      >
+        ${this.renderImage()}
+        <div class="pkt-card__wrapper">
+          ${this.tagPosition==="top"?this.renderTags():t.E} 
+          ${this.renderHeader()}
+          ${this.renderSlot()} 
+          ${this.tagPosition==="bottom"?this.renderTags():t.E}
+          ${this.renderCreditline()}
+        </div>
+      </article>
+    `}renderImage(){const i={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return t.x`
+      ${this.image.src&&t.x`
+        <div class=${p.e(i)}>
+          <img src=${this.image.src} alt=${this.image.alt||""} />
+        </div>
+      `}
+    `}renderHeading(){return t.x`
+      ${this.heading&&!this.clickCardLink?t.x`
+            <pkt-heading
+              class="pkt-card__heading"
+              .level=${this.headinglevel||3}
+              size="medium"
+              nospacing
+            >
+              ${this.heading}
+            </pkt-heading>
+          `:t.E}
+    `}renderLinkHeading(){return t.x`
+      ${this.clickCardLink?t.x`
+            <pkt-heading
+              class="pkt-card__link-heading pkt-card__heading"
+              .level=${this.headinglevel||3}
+              size="medium"
+              nospacing
+            >
+              <a
+                class="pkt-card__link"
+                href=${this.clickCardLink}
+                target=${this.openLinkInNewTab?"_blank":"_self"}
+                >${this.heading}</a
+              >
+            </pkt-heading>
+          `:t.E}
+    `}renderSubheading(){return t.x`
+      ${this.subheading?t.x` <p class="pkt-card__subheading ">${this.subheading}</p> `:t.E}
+    `}renderHeader(){const i=!!this.heading||!!this.subheading;return t.x`
+      ${i?t.x`
+            <header class="pkt-card__header">
+              ${this.renderHeading()} 
+              ${this.renderLinkHeading()} 
+              ${this.renderSubheading()}
+            </header>
+          `:t.E}
+    `}renderTags(){const i={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return t.x`
+      ${this.tags.length>0?t.x`
+            <div
+              class=${p.e(i)}
+              role="list"
+              aria-label=${this.tags.length>1?"merkelapper":"merkelapp"}
+            >
+              ${this.tags.map(a=>t.x`
+                  <pkt-tag
+                    role="listitem"
+                    textStyle="normal-text"
+                    size="medium"
+                    skin=${h.o(a.skin)}
+                    iconName=${h.o(a.iconName)}
+                  >
+                    ${a.text}
+                  </pkt-tag>
+                `)}
+            </div>
+          `:t.E}
+    `}renderSlot(){return t.x`
+      ${this.defaultSlot&&t.x`<section class="pkt-card__content" ${c.n(this.defaultSlot)}></section>`}
+    `}renderCreditline(){return t.x`
+      ${this.author||this.date?t.x`
+            <footer class="pkt-card__creditline">
+              ${this.author?t.x`<span class="pkt-card__creditline-author">${this.author}</span>`:t.E}
+              ${this.date?t.x`<span class="pkt-card__creditline-date">${this.date}</span>`:t.E}
+            </footer>
+          `:t.E}
+    `}};e([t.n({type:String})],exports.PktCard.prototype,"ariaLabel",2);e([t.n({type:String})],exports.PktCard.prototype,"author",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,"date",2);e([t.n({type:String})],exports.PktCard.prototype,"direction",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);

package/dist/{checkbox-DCjl4VM0.js → checkbox-Ds1FrhqK.js}

@@ -1,5 +1,5 @@
 import { E as n, x as r, n as s, a as d } from "./element-DjjF_tEh.js";
-import { P as k } from "./input-element-B5EvsMww.js";
+import { P as k } from "./input-element-4hgBpSNJ.js";
 import { e as b, n as f } from "./ref-iIffqQAI.js";
 import { e as u } from "./class-map-KyMqi0fa.js";
 var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, h, c, l) => {

package/dist/{checkbox-B7ObRUbU.cjs → checkbox-zqd3KVfz.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./element-BSypUpzA.cjs"),a=require("./input-element-KzKpjjLc.cjs"),k=require("./ref-BvbyvXRH.cjs"),o=require("./class-map-DCyaICmy.cjs");var r=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=(l,t,s,h)=>{for(var i=h>1?void 0:h?u(t,s):t,n=l.length-1,p;n>=0;n--)(p=l[n])&&(i=(h?p(t,s,i):p(i))||i);return h&&i&&r(t,s,i),i};exports.PktCheckbox=class extends a.PktInputElement{constructor(){super(...arguments),this.inputRef=k.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"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(t,s,h){t==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),t==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(t,s,h)}firstUpdated(t){t.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(t)}render(){const t=o.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),s=o.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),h=o.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),i=()=>e.x`
+"use strict";const e=require("./element-BSypUpzA.cjs"),a=require("./input-element-CwUniARD.cjs"),k=require("./ref-BvbyvXRH.cjs"),o=require("./class-map-DCyaICmy.cjs");var r=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=(l,t,s,h)=>{for(var i=h>1?void 0:h?u(t,s):t,n=l.length-1,p;n>=0;n--)(p=l[n])&&(i=(h?p(t,s,i):p(i))||i);return h&&i&&r(t,s,i),i};exports.PktCheckbox=class extends a.PktInputElement{constructor(){super(...arguments),this.inputRef=k.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"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(t,s,h){t==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),t==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(t,s,h)}firstUpdated(t){t.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(t)}render(){const t=o.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),s=o.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),h=o.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),i=()=>e.x`
         <label class=${h} for=${this.id+"-internal"}>
           ${this.label}
           ${this.checkHelptext?e.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.E}

package/dist/{combobox-CnnTPWcA.js → combobox-B6x7Qukm.js}

@@ -4,7 +4,7 @@ import { r as c } from "./state-BtbpSrdV.js";
 import { e as _, n as v } from "./ref-iIffqQAI.js";
 import { e as k } from "./class-map-KyMqi0fa.js";
 import { c as R } from "./repeat-D4kMediE.js";
-import { P as V } from "./input-element-B5EvsMww.js";
+import { P as V } from "./input-element-4hgBpSNJ.js";
 import { P as C } from "./pkt-options-controller-DepYQBqb.js";
 import { P as S } from "./pkt-slot-controller-DtDaD9q_.js";
 import "./input-wrapper-BdeoMGnk.js";

package/dist/{combobox-BokBs9Jo.cjs → combobox-yUrUarU_.cjs}

@@ -1,4 +1,4 @@
-"use strict";const l=require("./element-BSypUpzA.cjs"),c=require("./if-defined-a3sotaUr.cjs"),d=require("./state-B5KCNjEd.cjs"),r=require("./ref-BvbyvXRH.cjs"),$=require("./class-map-DCyaICmy.cjs"),I=require("./repeat-BnuruAat.cjs"),w=require("./input-element-KzKpjjLc.cjs"),y=require("./pkt-options-controller-Ay9ELZTV.cjs"),O=require("./pkt-slot-controller-Da-RgXfS.cjs");require("./input-wrapper-B-f_SotM.cjs");require("./icon-BnKGwYjj.cjs");require("./tag-B9kFYxHg.cjs");require("./listbox-DqpGh7eq.cjs");const C={displayValueAs:{default:"label"}},R={props:C};var V=Object.defineProperty,S=Object.getOwnPropertyDescriptor,o=(b,e,t,i)=>{for(var s=i>1?void 0:i?S(e,t):e,h=b.length-1,n;h>=0;h--)(n=b[h])&&(s=(i?n(e,t,s):n(s))||s);return i&&s&&V(e,t,s),s};exports.PktCombobox=class extends w.PktInputElement{constructor(){super(),this.helptextSlot=r.e(),this.value="",this.options=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder="",this.multiple=!1,this.maxlength=null,this.displayValueAs=R.props.displayValueAs.default,this.tagPlacement=null,this._options=[],this._isOptionsOpen=!1,this._value=[],this._userInfoMessage="",this._addValueText=null,this._maxIsReached=!1,this._search="",this._inputFocus=!1,this._editingSingleValue=!1,this.inputRef=r.e(),this.arrowRef=r.e(),this.listboxRef=r.e(),this.focusRef=r.e(),this.optionTagRef=r.e(),this.optionsController=new y.PktOptionsSlotController(this),this.slotController=new O.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){if(super.connectedCallback(),document&&document.body.addEventListener("click",e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.handleFocusOut(e)}),this._options=[],this.optionsController.nodes.length){const e=[];this.optionsController.nodes.forEach(t=>{if(!t.textContent&&!t.getAttribute("value"))return null;const i={value:t.getAttribute("value")||t.textContent||"",label:t.textContent||t.getAttribute("value")||""};t.getAttribute("data-prefix")&&(i.prefix=t.getAttribute("data-prefix")||void 0),t.getAttribute("tagskincolor")&&(i.tagSkinColor=t.getAttribute("tagskincolor")),t.getAttribute("description")&&(i.description=t.getAttribute("description")||void 0),i.fulltext=i.value+i.label+(i.prefix||""),e.push(i)}),e.length&&(this.options=[...e],this._options=[...e])}}updated(e){e.has("_value")&&this.valueChanged(this._value,e.get("_value")),e.has("value")&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),e.has("options")&&this.options.length&&(this._options=this.options,this._options.forEach(t=>{if(t.value&&!t.label&&(t.label=t.value),t.selected&&!this._value.includes(t.value)){const i=[...this._value];this._value=[...this._value,t.value],this.valueChanged(this._value,i)}t.fulltext=t.value+t.label+(t.prefix||""),t.selected=t.selected||this._value.includes(t.value)})),e.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(e)}attributeChangedCallback(e,t,i){e==="value"&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),e==="options"&&(this._options=this.options,this._options.forEach(s=>{s.value&&!s.label&&(s.label=s.value),s.selected&&!this._value.includes(s.value)&&(this._value=[...this._value,s.value]),s.fulltext=s.value+s.label+(s.prefix||"")}),this._search=""),super.attributeChangedCallback(e,t,i)}render(){return l.x`
+"use strict";const l=require("./element-BSypUpzA.cjs"),c=require("./if-defined-a3sotaUr.cjs"),d=require("./state-B5KCNjEd.cjs"),r=require("./ref-BvbyvXRH.cjs"),$=require("./class-map-DCyaICmy.cjs"),I=require("./repeat-BnuruAat.cjs"),w=require("./input-element-CwUniARD.cjs"),y=require("./pkt-options-controller-Ay9ELZTV.cjs"),O=require("./pkt-slot-controller-Da-RgXfS.cjs");require("./input-wrapper-B-f_SotM.cjs");require("./icon-BnKGwYjj.cjs");require("./tag-B9kFYxHg.cjs");require("./listbox-DqpGh7eq.cjs");const C={displayValueAs:{default:"label"}},R={props:C};var V=Object.defineProperty,S=Object.getOwnPropertyDescriptor,o=(b,e,t,i)=>{for(var s=i>1?void 0:i?S(e,t):e,h=b.length-1,n;h>=0;h--)(n=b[h])&&(s=(i?n(e,t,s):n(s))||s);return i&&s&&V(e,t,s),s};exports.PktCombobox=class extends w.PktInputElement{constructor(){super(),this.helptextSlot=r.e(),this.value="",this.options=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder="",this.multiple=!1,this.maxlength=null,this.displayValueAs=R.props.displayValueAs.default,this.tagPlacement=null,this._options=[],this._isOptionsOpen=!1,this._value=[],this._userInfoMessage="",this._addValueText=null,this._maxIsReached=!1,this._search="",this._inputFocus=!1,this._editingSingleValue=!1,this.inputRef=r.e(),this.arrowRef=r.e(),this.listboxRef=r.e(),this.focusRef=r.e(),this.optionTagRef=r.e(),this.optionsController=new y.PktOptionsSlotController(this),this.slotController=new O.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){if(super.connectedCallback(),document&&document.body.addEventListener("click",e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.handleFocusOut(e)}),this._options=[],this.optionsController.nodes.length){const e=[];this.optionsController.nodes.forEach(t=>{if(!t.textContent&&!t.getAttribute("value"))return null;const i={value:t.getAttribute("value")||t.textContent||"",label:t.textContent||t.getAttribute("value")||""};t.getAttribute("data-prefix")&&(i.prefix=t.getAttribute("data-prefix")||void 0),t.getAttribute("tagskincolor")&&(i.tagSkinColor=t.getAttribute("tagskincolor")),t.getAttribute("description")&&(i.description=t.getAttribute("description")||void 0),i.fulltext=i.value+i.label+(i.prefix||""),e.push(i)}),e.length&&(this.options=[...e],this._options=[...e])}}updated(e){e.has("_value")&&this.valueChanged(this._value,e.get("_value")),e.has("value")&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),e.has("options")&&this.options.length&&(this._options=this.options,this._options.forEach(t=>{if(t.value&&!t.label&&(t.label=t.value),t.selected&&!this._value.includes(t.value)){const i=[...this._value];this._value=[...this._value,t.value],this.valueChanged(this._value,i)}t.fulltext=t.value+t.label+(t.prefix||""),t.selected=t.selected||this._value.includes(t.value)})),e.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(e)}attributeChangedCallback(e,t,i){e==="value"&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),e==="options"&&(this._options=this.options,this._options.forEach(s=>{s.value&&!s.label&&(s.label=s.value),s.selected&&!this._value.includes(s.value)&&(this._value=[...this._value,s.value]),s.fulltext=s.value+s.label+(s.prefix||"")}),this._search=""),super.attributeChangedCallback(e,t,i)}render(){return l.x`
       <pkt-input-wrapper
         .label=${this.label}
         .helptext=${this.helptext}

package/dist/{datepicker-B767w-e9.cjs → datepicker-CH5ZmFhf.cjs}

@@ -1,4 +1,4 @@
-"use strict";const d=require("./class-map-DCyaICmy.cjs"),p=require("./if-defined-a3sotaUr.cjs"),s=require("./element-BSypUpzA.cjs"),m=require("./state-B5KCNjEd.cjs"),h=require("./calendar-CYY42kN4.cjs"),k=require("./input-element-KzKpjjLc.cjs"),r=require("./ref-BvbyvXRH.cjs"),v=require("./repeat-BnuruAat.cjs");require("./icon-BnKGwYjj.cjs");require("./input-wrapper-B-f_SotM.cjs");require("./tag-B9kFYxHg.cjs");const $=require("./pkt-slot-controller-Da-RgXfS.cjs"),y={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},o={props:y};var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,l=(c,t,e,i)=>{for(var a=i>1?void 0:i?x(t,e):t,n=c.length-1,u;n>=0;n--)(u=c[n])&&(a=(i?u(t,e,a):u(a))||a);return i&&a&&b(t,e,a),a};const g=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends k.PktInputElement{constructor(){super(),this.value="",this._value=this.value?Array.isArray(this.value)?this.value:this.value.split(","):[],this.label="Datovelger",this.dateformat=o.props.dateformat.default,this.multiple=o.props.multiple.default,this.maxlength=null,this.range=o.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=o.props.weeknumbers.default,this.withcontrols=o.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.helptextSlot=r.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?h.newDate(this.min):null,a=this.max?h.newDate(this.max):null,n=h.newDate(e.value.split(",")[0]);n&&!isNaN(n.getTime())&&(!i||n>=i)&&(!a||n<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(n),e.value=""},this.slotController=new $.PktSlotController(this,this.helptextSlot)}async connectedCallback(){super.connectedCallback();const t=navigator.userAgent,e=/iP(hone|od|ad)/.test(t);this.inputType=e?"text":"date",document&&document.body.addEventListener("click",i=>{var a,n;(a=this.inputRef)!=null&&a.value&&((n=this.btnRef)!=null&&n.value)&&!this.inputRef.value.contains(i.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(i.target))&&!this.btnRef.value.contains(i.target)&&!i.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),this.value.length&&this._value.length===0&&(this._value=Array.isArray(this.value)?this.value:this.value.split(",")),this.min=this.min||o.props.min.default,this.max=this.max||o.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await g(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",t=>{var e,i;(e=this.inputRef)!=null&&e.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(t.target)&&!this.btnRef.value.contains(t.target)&&this.hideCalendar()})}attributeChangedCallback(t,e,i){if(t==="value"){if(this.range&&(i==null?void 0:i.split(",").length)===1)return;this.value!==e&&this.valueChanged(i,e)}t==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),t==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(t,e,i)}updated(t){if(t.has("value")){if(this.range&&this.value.length===1)return;this.valueChanged(this.value,t.get("value"))}super.updated(t)}renderInput(){return s.x`
+"use strict";const d=require("./class-map-DCyaICmy.cjs"),p=require("./if-defined-a3sotaUr.cjs"),s=require("./element-BSypUpzA.cjs"),m=require("./state-B5KCNjEd.cjs"),h=require("./calendar-CYY42kN4.cjs"),k=require("./input-element-CwUniARD.cjs"),r=require("./ref-BvbyvXRH.cjs"),v=require("./repeat-BnuruAat.cjs");require("./icon-BnKGwYjj.cjs");require("./input-wrapper-B-f_SotM.cjs");require("./tag-B9kFYxHg.cjs");const $=require("./pkt-slot-controller-Da-RgXfS.cjs"),y={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},o={props:y};var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,l=(c,t,e,i)=>{for(var a=i>1?void 0:i?x(t,e):t,n=c.length-1,u;n>=0;n--)(u=c[n])&&(a=(i?u(t,e,a):u(a))||a);return i&&a&&b(t,e,a),a};const g=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends k.PktInputElement{constructor(){super(),this.value="",this._value=this.value?Array.isArray(this.value)?this.value:this.value.split(","):[],this.label="Datovelger",this.dateformat=o.props.dateformat.default,this.multiple=o.props.multiple.default,this.maxlength=null,this.range=o.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=o.props.weeknumbers.default,this.withcontrols=o.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.helptextSlot=r.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?h.newDate(this.min):null,a=this.max?h.newDate(this.max):null,n=h.newDate(e.value.split(",")[0]);n&&!isNaN(n.getTime())&&(!i||n>=i)&&(!a||n<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(n),e.value=""},this.slotController=new $.PktSlotController(this,this.helptextSlot)}async connectedCallback(){super.connectedCallback();const t=navigator.userAgent,e=/iP(hone|od|ad)/.test(t);this.inputType=e?"text":"date",document&&document.body.addEventListener("click",i=>{var a,n;(a=this.inputRef)!=null&&a.value&&((n=this.btnRef)!=null&&n.value)&&!this.inputRef.value.contains(i.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(i.target))&&!this.btnRef.value.contains(i.target)&&!i.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),this.value.length&&this._value.length===0&&(this._value=Array.isArray(this.value)?this.value:this.value.split(",")),this.min=this.min||o.props.min.default,this.max=this.max||o.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await g(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",t=>{var e,i;(e=this.inputRef)!=null&&e.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(t.target)&&!this.btnRef.value.contains(t.target)&&this.hideCalendar()})}attributeChangedCallback(t,e,i){if(t==="value"){if(this.range&&(i==null?void 0:i.split(",").length)===1)return;this.value!==e&&this.valueChanged(i,e)}t==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),t==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(t,e,i)}updated(t){if(t.has("value")){if(this.range&&this.value.length===1)return;this.valueChanged(this.value,t.get("value"))}super.updated(t)}renderInput(){return s.x`
       <input
         class="${d.e(this.inputClasses)}"
         .type=${this.inputType}

package/dist/{datepicker-B-ytA8nG.js → datepicker-WpOJS948.js}

@@ -3,7 +3,7 @@ import { o } from "./if-defined-BErSJCeJ.js";
 import { x as u, E as g, n as r, a as w } from "./element-DjjF_tEh.js";
 import { r as k } from "./state-BtbpSrdV.js";
 import { n as v, f as $, a as R, b as y, d as x } from "./calendar-KDcOWD6V.js";
-import { P as C } from "./input-element-B5EvsMww.js";
+import { P as C } from "./input-element-4hgBpSNJ.js";
 import { e as m, n as p } from "./ref-iIffqQAI.js";
 import { c as T } from "./repeat-D4kMediE.js";
 import "./icon-Beoxup8E.js";

package/dist/index.d.ts

@@ -117,6 +117,30 @@ export declare interface IPktButton {
     disabled?: Booleanish;
 }
 
+declare interface IPktCard {
+    ariaLabel?: IAriaAttributes['aria-label'];
+    author?: string | null;
+    date?: string | null;
+    direction?: TDirection;
+    heading?: string;
+    headingLevel?: IPktHeading['level'];
+    image?: {
+        src: string;
+        alt: string;
+    };
+    imageShape?: TCardImageShape;
+    clickCardLink?: string | null;
+    openLinkInNewTab?: boolean | null;
+    borderOnHover?: boolean | null;
+    padding?: TCardPadding;
+    skin?: TCardSkin;
+    subheading?: string;
+    tagPosition?: TCardTagPosition;
+    tags?: (Omit<IPktTag, 'closeTag'> & {
+        text: string;
+    })[];
+}
+
 export declare interface IPktCombobox {
     allowUserInput?: boolean;
     typeahead?: boolean;
@@ -425,22 +449,40 @@ export declare class PktCalendar extends PktElement {
     close(): void;
 }
 
-export declare class PktCard extends PktElement {
+export declare class PktCard extends PktElement implements IPktCard {
     defaultSlot: Ref<HTMLElement>;
     constructor();
-    skin: TCardSkin;
+    ariaLabel: string;
+    author: string | null;
+    borderOnHover: boolean;
+    clickCardLink: IPktCard['clickCardLink'];
+    date: string | null;
     direction: TDirection;
+    heading: string;
+    headinglevel: IPktHeading['level'];
     image: {
         src: string;
         alt: string;
     };
-    heading: string;
+    imageShape: TCardImageShape;
+    openLinkInNewTab: boolean;
+    padding: TCardPadding;
+    skin: TCardSkin;
     subheading: string;
+    tagPosition: 'top' | 'bottom';
     tags: (Omit<IPktTag, 'closeTag'> & {
         text: string;
     })[];
     connectedCallback(): void;
     render(): TemplateResult<1>;
+    renderImage(): TemplateResult<1>;
+    renderHeading(): TemplateResult<1>;
+    renderLinkHeading(): TemplateResult<1>;
+    renderSubheading(): TemplateResult<1>;
+    renderHeader(): TemplateResult<1>;
+    renderTags(): TemplateResult<1>;
+    renderSlot(): TemplateResult<1>;
+    renderCreditline(): TemplateResult<1>;
 }
 
 export declare class PktCheckbox extends PktInputElement {
@@ -1115,7 +1157,13 @@ declare type TAriaRelevant = 'additions' | 'removals' | 'text' | 'all';
 
 declare type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';
 
-declare type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
+declare type TCardImageShape = 'square' | 'round';
+
+declare type TCardPadding = 'none' | 'standard';
+
+declare type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';
+
+declare type TCardTagPosition = 'top' | 'bottom';
 
 declare type TCounterPosition = 'top' | 'bottom';