@oslokommune/punkt-elements 12.37.8 → 12.38.1

package/CHANGELOG.md

@@ -5,6 +5,60 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.38.1](https://github.com/oslokommune/punkt/compare/12.38.0...12.38.1) (2025-05-14)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [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

package/dist/{button-D39TTsjJ.js → button-D1zx8gKd.js}

@@ -1,4 +1,4 @@
-import { n as a, P as b, E as p, x as l, a as c } from "./element-DjjF_tEh.js";
+import { n as a, P as c, E as p, x as l, a as b } from "./element-DjjF_tEh.js";
 import { P as f } from "./pkt-slot-controller-DtDaD9q_.js";
 import { e as u, n as k } from "./ref-iIffqQAI.js";
 var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (t, e, n, o) => {
@@ -6,7 +6,7 @@ var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (t, e, n
     (h = t[d]) && (r = (o ? h(e, n, r) : h(r)) || r);
   return o && r && y(e, n, r), r;
 };
-let i = class extends b {
+let i = class extends c {
   constructor() {
     super(), this.internals = this.attachInternals(), this.defaultSlot = u(), 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.isLoading = !1, this.disabled = !1, this.slotController = new f(this, this.defaultSlot), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown);
   }
@@ -104,10 +104,10 @@ s([
   a({ type: Boolean })
 ], i.prototype, "isLoading", 2);
 s([
-  a({ type: Boolean })
+  a({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled", 2);
 i = s([
-  c("pkt-button")
+  b("pkt-button")
 ], i);
 export {
   i as P

package/dist/{button-ZkEpUrbJ.cjs → button-DEadihVm.cjs}

@@ -9,4 +9,4 @@
         <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
         ${this.variant==="icons-right-and-left"?i.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:i.E}
       </div>
-    `}updateElementClasses(){const t=new Set,s=this.getAttribute("class");t.add("pkt-btn"),s&&s.split(" ").forEach(n=>t.add(n)),this.size&&t.add(`pkt-btn--${this.size}`),this.skin&&t.add(`pkt-btn--${this.skin}`),this.variant&&t.add(`pkt-btn--${this.variant}`),this.color&&t.add(`pkt-btn--${this.color}`),this.isLoading&&t.add("pkt-btn--active"),this.state&&t.add(`pkt-btn--${this.state}`),this.disabled&&t.add("pkt-btn--disabled"),this.className=[...t].join(" ")}handleClick(t){if(this.disabled||this.isLoading){t.preventDefault(),t.stopImmediatePropagation();return}if(this.type==="submit"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.type==="reset"&&this.internals.form){this.internals.form.reset();return}this.onClick&&typeof this.onClick=="function"&&this.onClick!==this.handleClick&&this.onClick(t),this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0,detail:{originalEvent:t}}))}handleKeydown(t){if(!(this.disabled||this.isLoading)&&(t.key==="Enter"||t.key===" ")){t.preventDefault();const s=t.target;s&&s.click()}}};exports.PktButton.formAssociated=!0;e([i.n({type:String})],exports.PktButton.prototype,"iconName",2);e([i.n({type:String})],exports.PktButton.prototype,"secondIconName",2);e([i.n({type:String})],exports.PktButton.prototype,"mode",2);e([i.n({type:String})],exports.PktButton.prototype,"size",2);e([i.n({type:String})],exports.PktButton.prototype,"color",2);e([i.n({type:String})],exports.PktButton.prototype,"skin",2);e([i.n({type:String})],exports.PktButton.prototype,"variant",2);e([i.n({type:String})],exports.PktButton.prototype,"state",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([i.n({type:Boolean})],exports.PktButton.prototype,"isLoading",2);e([i.n({type:Boolean})],exports.PktButton.prototype,"disabled",2);exports.PktButton=e([i.t("pkt-button")],exports.PktButton);
+    `}updateElementClasses(){const t=new Set,s=this.getAttribute("class");t.add("pkt-btn"),s&&s.split(" ").forEach(n=>t.add(n)),this.size&&t.add(`pkt-btn--${this.size}`),this.skin&&t.add(`pkt-btn--${this.skin}`),this.variant&&t.add(`pkt-btn--${this.variant}`),this.color&&t.add(`pkt-btn--${this.color}`),this.isLoading&&t.add("pkt-btn--active"),this.state&&t.add(`pkt-btn--${this.state}`),this.disabled&&t.add("pkt-btn--disabled"),this.className=[...t].join(" ")}handleClick(t){if(this.disabled||this.isLoading){t.preventDefault(),t.stopImmediatePropagation();return}if(this.type==="submit"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.type==="reset"&&this.internals.form){this.internals.form.reset();return}this.onClick&&typeof this.onClick=="function"&&this.onClick!==this.handleClick&&this.onClick(t),this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0,detail:{originalEvent:t}}))}handleKeydown(t){if(!(this.disabled||this.isLoading)&&(t.key==="Enter"||t.key===" ")){t.preventDefault();const s=t.target;s&&s.click()}}};exports.PktButton.formAssociated=!0;e([i.n({type:String})],exports.PktButton.prototype,"iconName",2);e([i.n({type:String})],exports.PktButton.prototype,"secondIconName",2);e([i.n({type:String})],exports.PktButton.prototype,"mode",2);e([i.n({type:String})],exports.PktButton.prototype,"size",2);e([i.n({type:String})],exports.PktButton.prototype,"color",2);e([i.n({type:String})],exports.PktButton.prototype,"skin",2);e([i.n({type:String})],exports.PktButton.prototype,"variant",2);e([i.n({type:String})],exports.PktButton.prototype,"state",2);e([i.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([i.n({type:Boolean})],exports.PktButton.prototype,"isLoading",2);e([i.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);exports.PktButton=e([i.t("pkt-button")],exports.PktButton);

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/{consent-CSspmVST.cjs → consent-B4r94Z8d.cjs}

@@ -1,4 +1,4 @@
-"use strict";const s=require("./element-BSypUpzA.cjs");require("./button-ZkEpUrbJ.cjs");require("./icon-BnKGwYjj.cjs");const g={i18n:{nb:{contentPresentation:{title:"Oslo kommune bruker informasjonskapsler",description:["For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.","Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss."],buttons:{accept:"Godta alle",reject:"Kun nødvendige",settings:"Innstillinger for informasjonskapsler"}},contentSettings:{title:"Innstillinger for informasjonskapsler",description:["Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.","Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler»."],buttons:{back:"Tilbake",save:"Lagre innstillinger"}}},en:{contentPresentation:{title:"Before you visit Oslo kommune ...",description:["This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.","To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites."],buttons:{accept:"Yes, I accept",reject:"Only necessary",settings:"Go to settings"}},contentSettings:{title:"Her kan du aktivt velge mellom ulike informasjonskapsler",description:["For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider"],buttons:{back:"Back",save:"Save settings"}}}}},c=globalThis,d=c.__cookieEvents||{events:{},on(n,e){this.events[n]||(this.events[n]=[]),this.events[n].push(e)},off(n,e){this.events[n]&&(this.events[n]=this.events[n].filter(t=>t!==e))},once(n,e){const t=o=>{this.off(n,t),e(o)};this.on(n,t)},emit(n,e){this.events[n]&&this.events[n].forEach(t=>t(e))}};c.__cookieEvents=d;const k=d;var u=Object.defineProperty,p=Object.getOwnPropertyDescriptor,a=(n,e,t,o)=>{for(var i=o>1?void 0:o?p(e,t):e,r=n.length-1,l;r>=0;r--)(l=n[r])&&(i=(o?l(e,t,i):l(i))||i);return o&&i&&u(e,t,i),i};exports.PktConsent=class extends s.PktElement{constructor(){super(),this.hotjarId=null,this.googleAnalyticsId=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||g.i18n[this.i18nLanguage].contentPresentation.buttons.settings,this.googleAnalyticsId&&(window.googleAnalyticsId=this.googleAnalyticsId),this.hotjarId&&(window.hotjarId=this.hotjarId),k.on("CookieManager.setCookie",e=>{this.emitCookieConsents(e)})}returnJsonOrObject(e){let t;try{t=JSON.parse(e)}catch{t=e}return t}emitCookieConsents(e){const o=this.returnJsonOrObject(e.value).items.reduce((i,r)=>(i[r.name]=r.consent,i),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:o,bubbles:!0,composed:!0}))}firstUpdated(e){if(!document.querySelector("#oslo-consent-script")&&window.location.hostname.toLowerCase().includes("oslo.kommune.no")){window.googleAnalyticsId=this.googleAnalyticsId,window.hotjarId=this.hotjarId;const t=document.createElement("script");t.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js",t.id="oslo-consent-script",t.onload=()=>{this.triggerInit()},document.head.appendChild(t);const o=document.createElement("link");o.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css",o.type="text/css",o.rel="stylesheet",o.id="oslo-consent-styles",document.head.appendChild(o)}}triggerInit(){window.document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(e=>{if(e){const o={value:window.cookieBanner.cookieConsent.getConsentCookie()};this.emitCookieConsents(o)}})}openModal(e){e.preventDefault(),window.cookieBanner.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?s.x`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?s.x`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
+"use strict";const s=require("./element-BSypUpzA.cjs");require("./button-DEadihVm.cjs");require("./icon-BnKGwYjj.cjs");const g={i18n:{nb:{contentPresentation:{title:"Oslo kommune bruker informasjonskapsler",description:["For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.","Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss."],buttons:{accept:"Godta alle",reject:"Kun nødvendige",settings:"Innstillinger for informasjonskapsler"}},contentSettings:{title:"Innstillinger for informasjonskapsler",description:["Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.","Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler»."],buttons:{back:"Tilbake",save:"Lagre innstillinger"}}},en:{contentPresentation:{title:"Before you visit Oslo kommune ...",description:["This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.","To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites."],buttons:{accept:"Yes, I accept",reject:"Only necessary",settings:"Go to settings"}},contentSettings:{title:"Her kan du aktivt velge mellom ulike informasjonskapsler",description:["For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider"],buttons:{back:"Back",save:"Save settings"}}}}},c=globalThis,d=c.__cookieEvents||{events:{},on(n,e){this.events[n]||(this.events[n]=[]),this.events[n].push(e)},off(n,e){this.events[n]&&(this.events[n]=this.events[n].filter(t=>t!==e))},once(n,e){const t=o=>{this.off(n,t),e(o)};this.on(n,t)},emit(n,e){this.events[n]&&this.events[n].forEach(t=>t(e))}};c.__cookieEvents=d;const k=d;var u=Object.defineProperty,p=Object.getOwnPropertyDescriptor,a=(n,e,t,o)=>{for(var i=o>1?void 0:o?p(e,t):e,r=n.length-1,l;r>=0;r--)(l=n[r])&&(i=(o?l(e,t,i):l(i))||i);return o&&i&&u(e,t,i),i};exports.PktConsent=class extends s.PktElement{constructor(){super(),this.hotjarId=null,this.googleAnalyticsId=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||g.i18n[this.i18nLanguage].contentPresentation.buttons.settings,this.googleAnalyticsId&&(window.googleAnalyticsId=this.googleAnalyticsId),this.hotjarId&&(window.hotjarId=this.hotjarId),k.on("CookieManager.setCookie",e=>{this.emitCookieConsents(e)})}returnJsonOrObject(e){let t;try{t=JSON.parse(e)}catch{t=e}return t}emitCookieConsents(e){const o=this.returnJsonOrObject(e.value).items.reduce((i,r)=>(i[r.name]=r.consent,i),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:o,bubbles:!0,composed:!0}))}firstUpdated(e){if(!document.querySelector("#oslo-consent-script")&&window.location.hostname.toLowerCase().includes("oslo.kommune.no")){window.googleAnalyticsId=this.googleAnalyticsId,window.hotjarId=this.hotjarId;const t=document.createElement("script");t.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js",t.id="oslo-consent-script",t.onload=()=>{this.triggerInit()},document.head.appendChild(t);const o=document.createElement("link");o.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css",o.type="text/css",o.rel="stylesheet",o.id="oslo-consent-styles",document.head.appendChild(o)}}triggerInit(){window.document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(e=>{if(e){const o={value:window.cookieBanner.cookieConsent.getConsentCookie()};this.emitCookieConsents(o)}})}openModal(e){e.preventDefault(),window.cookieBanner.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?s.x`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?s.x`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
         <pkt-icon name="chevron-right" class="pkt-footer__link-icon"></pkt-icon>
         ${this.triggerText}
       </a>`:this.triggerType==="icon"?s.x`<pkt-button

package/dist/{consent-BPZ8QV7q.js → consent-DDcfVjC6.js}

@@ -1,5 +1,5 @@
 import { P as k, x as l, n as a, a as u } from "./element-DjjF_tEh.js";
-import "./button-D39TTsjJ.js";
+import "./button-D1zx8gKd.js";
 import "./icon-Beoxup8E.js";
 const h = {
   i18n: {

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 {
@@ -810,7 +852,6 @@ export declare class PktLink extends PktElement {
     external: boolean;
     target: string | null;
     render(): TemplateResult<1>;
-    private handleClick;
 }
 
 export declare class PktLinkCard extends PktElement implements IPktLinkCard {
@@ -1115,7 +1156,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';
 

package/dist/link-DCYJhFKJ.js

@@ -0,0 +1,64 @@
+import { P as h, E as u, x as f, n as o, a as m } from "./element-DjjF_tEh.js";
+import { P } from "./pkt-slot-controller-DtDaD9q_.js";
+import { e as k, n as g } from "./ref-iIffqQAI.js";
+import { e as d } from "./class-map-KyMqi0fa.js";
+import "./icon-Beoxup8E.js";
+const x = {
+  href: {
+    default: "#"
+  },
+  target: {
+    default: "_self"
+  },
+  external: {
+    default: !1
+  }
+}, c = {
+  props: x
+};
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (i, n, l, s) => {
+  for (var t = s > 1 ? void 0 : s ? _(n, l) : n, p = i.length - 1, a; p >= 0; p--)
+    (a = i[p]) && (t = (s ? a(n, l, t) : a(t)) || t);
+  return s && t && y(n, l, t), t;
+};
+let e = class extends h {
+  constructor() {
+    super(), this.defaultSlot = k(), this.href = c.props.href.default, this.iconName = void 0, this.iconPosition = void 0, this.external = c.props.external.default, this.target = c.props.target.default, this.slotController = new P(this, this.defaultSlot);
+  }
+  render() {
+    const i = {
+      "pkt-link": !0,
+      "pkt-link--icon-left": !!this.iconName && this.iconPosition === "left" || !!(this.iconName && !this.iconPosition),
+      "pkt-link--icon-right": !!this.iconName && this.iconPosition === "right",
+      "pkt-link--external": this.external
+    };
+    return f`<a
+      class=${d(i)}
+      href=${this.href}
+      .target=${this.target}
+      .rel=${this.external ? "noopener noreferrer" : u}
+      >${this.iconName ? f`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span ${g(this.defaultSlot)}>Link</span></a
+    >`;
+  }
+};
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "href", 2);
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "iconName", 2);
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "iconPosition", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "external", 2);
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "target", 2);
+e = r([
+  m("pkt-link")
+], e);
+export {
+  e as P
+};

package/dist/link-nesPZCIx.cjs

@@ -0,0 +1,7 @@
+"use strict";const t=require("./element-BSypUpzA.cjs"),f=require("./pkt-slot-controller-Da-RgXfS.cjs"),c=require("./ref-BvbyvXRH.cjs"),h=require("./class-map-DCyaICmy.cjs");require("./icon-BnKGwYjj.cjs");const k={href:{default:"#"},target:{default:"_self"},external:{default:!1}},a={props:k};var u=Object.defineProperty,P=Object.getOwnPropertyDescriptor,n=(o,r,s,i)=>{for(var e=i>1?void 0:i?P(r,s):r,l=o.length-1,p;l>=0;l--)(p=o[l])&&(e=(i?p(r,s,e):p(e))||e);return i&&e&&u(r,s,e),e};exports.PktLink=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.href=a.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=a.props.external.default,this.target=a.props.target.default,this.slotController=new f.PktSlotController(this,this.defaultSlot)}render(){const r={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return t.x`<a
+      class=${h.e(r)}
+      href=${this.href}
+      .target=${this.target}
+      .rel=${this.external?"noopener noreferrer":t.E}
+      >${this.iconName?t.x`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:""} <span ${c.n(this.defaultSlot)}>Link</span></a
+    >`}};n([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"href",2);n([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconName",2);n([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconPosition",2);n([t.n({type:Boolean,reflect:!0})],exports.PktLink.prototype,"external",2);n([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"target",2);exports.PktLink=n([t.t("pkt-link")],exports.PktLink);

package/dist/pkt-button.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./button-ZkEpUrbJ.cjs"),e=t.PktButton;Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>t.PktButton});exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./button-DEadihVm.cjs"),e=t.PktButton;Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>t.PktButton});exports.default=e;

package/dist/pkt-button.js

@@ -1,4 +1,4 @@
-import { P as t } from "./button-D39TTsjJ.js";
+import { P as t } from "./button-D1zx8gKd.js";
 const a = t;
 export {
   t as PktButton,

package/dist/pkt-card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-DH-3qNgp.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-Di1MQneh.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;

package/dist/pkt-card.js

@@ -1,4 +1,4 @@
-import { P as a } from "./card-Cyww1yKr.js";
+import { P as a } from "./card-CZG7XGlj.js";
 const r = a;
 export {
   a as PktCard,

package/dist/pkt-consent.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./consent-CSspmVST.cjs"),t=e.PktConsent;Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>e.PktConsent});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./consent-B4r94Z8d.cjs"),t=e.PktConsent;Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>e.PktConsent});exports.default=t;

package/dist/pkt-consent.js

@@ -1,4 +1,4 @@
-import { P as t } from "./consent-BPZ8QV7q.js";
+import { P as t } from "./consent-DDcfVjC6.js";
 const o = t;
 export {
   t as PktConsent,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-ZkEpUrbJ.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-DH-3qNgp.cjs"),g=require("./combobox-yUrUarU_.cjs"),h=require("./consent-CSspmVST.cjs"),f=require("./checkbox-zqd3KVfz.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-CH5ZmFhf.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-BrDbM3GT.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-Bk4XPiOY.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-DZY4gZCQ.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-CI2xaqAB.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-DxbylapQ.cjs"),M=require("./textinput-B__c4c1z.cjs"),R=require("./select-BCL790jM.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-DEadihVm.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-Di1MQneh.cjs"),g=require("./combobox-yUrUarU_.cjs"),h=require("./consent-B4r94Z8d.cjs"),f=require("./checkbox-zqd3KVfz.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-CH5ZmFhf.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-nesPZCIx.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-Bk4XPiOY.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-DZY4gZCQ.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-CI2xaqAB.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-DxbylapQ.cjs"),M=require("./textinput-B__c4c1z.cjs"),R=require("./select-BCL790jM.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -1,12 +1,12 @@
 import { P as A } from "./alert-C33z1kBf.js";
 import { P as B, a as E } from "./accordionitem-vmwqD9rr.js";
 import { P as O } from "./backlink-hvyJmwrO.js";
-import { P as T } from "./button-D39TTsjJ.js";
+import { P as T } from "./button-D1zx8gKd.js";
 import { c as f } from "./calendar-KDcOWD6V.js";
 import { P as D } from "./calendar-KDcOWD6V.js";
-import { P as G } from "./card-Cyww1yKr.js";
+import { P as G } from "./card-CZG7XGlj.js";
 import { P as K } from "./combobox-B6x7Qukm.js";
-import { P as U } from "./consent-BPZ8QV7q.js";
+import { P as U } from "./consent-DDcfVjC6.js";
 import { P as q } from "./checkbox-Ds1FrhqK.js";
 import { P as k, t as h, x as P, n, a as c } from "./element-DjjF_tEh.js";
 import { P as x } from "./pkt-slot-controller-DtDaD9q_.js";
@@ -17,7 +17,7 @@ import { P as Q } from "./helptext-DcSUjjEq.js";
 import { P as X } from "./heading-DNLQdsXY.js";
 import { P as Z } from "./icon-Beoxup8E.js";
 import { P as et } from "./input-wrapper-BdeoMGnk.js";
-import { P as ot } from "./link-B748tCGi.js";
+import { P as ot } from "./link-DCYJhFKJ.js";
 import { P as at } from "./linkcard-Bt-Qa_SP.js";
 import { P as it } from "./loader-C9EtX_mK.js";
 import { P as lt } from "./messagebox-DZDP8XZt.js";

package/dist/pkt-link.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./link-BrDbM3GT.cjs"),t=e.PktLink;Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>e.PktLink});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./link-nesPZCIx.cjs"),t=e.PktLink;Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>e.PktLink});exports.default=t;

package/dist/pkt-link.js

@@ -1,4 +1,4 @@
-import { P as t } from "./link-B748tCGi.js";
+import { P as t } from "./link-DCYJhFKJ.js";
 const a = t;
 export {
   t as PktLink,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.37.8",
+  "version": "12.38.1",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.37.0",
-    "@oslokommune/punkt-css": "^12.37.2",
+    "@oslokommune/punkt-css": "^12.38.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
@@ -59,5 +59,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "ff82b384dde195e97572a47eb6f9e13c5f3c9063"
+  "gitHead": "bbffeef32589486551e5e1eaf611c6740adc85d7"
 }

package/src/components/button/button.ts

@@ -69,7 +69,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
   @property({ type: String }) state?: TPktButtonState = 'normal'
   @property({ type: String, reflect: true }) type: TPktButtonType = 'button'
   @property({ type: Boolean }) isLoading: Booleanish = false
-  @property({ type: Boolean }) disabled: Booleanish = false
+  @property({ type: Boolean, reflect: true }) disabled: Booleanish = false
 
   // Lifecycle
 

package/src/components/card/card.ts

@@ -6,78 +6,247 @@ import { IPktTag } from '@/components/tag'
 import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
+import { IPktHeading } from '../heading'
 import specs from 'componentSpecs/card.json'
 import '@/components/icon'
 import '@/components/tag'
+import { IAriaAttributes } from '@/types/aria'
 
-export type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue'
+export type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue'
 export type TDirection = 'portrait' | 'landscape'
+export type TCardPadding = 'none' | 'standard'
+export type TCardImageShape = 'square' | 'round'
+export type TCardTagPosition = 'top' | 'bottom'
+
+export 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 })[]
+}
 
 @customElement('pkt-card')
-export class PktCard extends PktElement {
+export class PktCard extends PktElement implements IPktCard {
+  // Refs
+
   defaultSlot: Ref<HTMLElement> = createRef()
 
+  //Constructor
+
   constructor() {
     super()
     this.slotController = new PktSlotController(this, this.defaultSlot)
   }
 
-  @property({ type: String, reflect: true }) skin: TCardSkin = specs.props.skin.default as TCardSkin
-  @property({ type: String, reflect: true }) direction: TDirection = specs.props.direction
-    .default as TDirection
-  @property({ type: Object, reflect: true }) image: { src: string; alt: string } = {
+  // Properties
+
+  @property({ type: String }) ariaLabel: string = ''
+  @property({ type: String }) author: string | null = null
+  @property({ type: Boolean }) borderOnHover: boolean = true
+  @property({ type: String, reflect: true }) clickCardLink: IPktCard['clickCardLink'] = null
+  @property({ type: String }) date: string | null = null
+  @property({ type: String }) direction: TDirection = specs.props.direction.default as TDirection
+  @property({ type: String }) heading: string = ''
+  @property({ type: Number }) headinglevel: IPktHeading['level'] = 3
+  @property({ type: Object }) image: { src: string; alt: string } = {
     src: '',
     alt: '',
   }
-  @property({ type: String, reflect: true }) heading: string = ''
-  @property({ type: String, reflect: true }) subheading: string = ''
-  @property({ type: Array, reflect: true }) tags: (Omit<IPktTag, 'closeTag'> & { text: string })[] =
-    []
+  @property({ type: String }) imageShape: TCardImageShape = 'square'
+  @property({ type: Boolean }) openLinkInNewTab: boolean = false
+  @property({ type: String }) padding: TCardPadding = specs.props.padding.default as TCardPadding
+  @property({ type: String }) skin: TCardSkin = specs.props.skin.default as TCardSkin
+  @property({ type: String }) subheading: string = ''
+  @property({ type: String }) tagPosition: 'top' | 'bottom' = 'top'
+  @property({ type: Array }) tags: (Omit<IPktTag, 'closeTag'> & { text: string })[] = []
 
   connectedCallback() {
     super.connectedCallback()
   }
 
+  // Render methods
+
+  // Main render method
+  // prettier-ignore
   render() {
     const classes = {
       'pkt-card': true,
       [`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,
+     
     }
 
+    //
+    const ariaLabelLenke =
+      this.ariaLabel?.trim() || (this.heading ? `${this.heading} lenkekort` : 'lenkekort')
+    const ariaLabelVanlig = this.ariaLabel?.trim() || (this.heading ? this.heading : 'kort')
+
     return html`
-      <div class=${classMap(classes)}>
-        ${this.image.src &&
-        html`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt || ''} />
-          </div>
-        `}
+      <article
+        class=${classMap(classes)}
+        aria-label=${ifDefined(this.clickCardLink ? ariaLabelLenke : ariaLabelVanlig)}
+      >
+        ${this.renderImage()}
         <div class="pkt-card__wrapper">
-          ${this.tags.length > 0
-            ? html`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(
-                    (tag) => html`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${ifDefined(tag.skin)}
-                        iconName=${ifDefined(tag.iconName)}
-                      >
-                        ${tag.text}
-                      </pkt-tag>
-                    `,
-                  )}
-                </div>
-              `
-            : nothing}
-          ${this.heading && html`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading && html`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot &&
-          html`<div class="pkt-card__content" ${ref(this.defaultSlot)}></div>`}
+          ${this.tagPosition === 'top' ? this.renderTags() : nothing} 
+          ${this.renderHeader()}
+          ${this.renderSlot()} 
+          ${this.tagPosition === 'bottom' ? this.renderTags() : nothing}
+          ${this.renderCreditline()}
+        </div>
+      </article>
+    `
+  }
+
+  // Render methods for different parts of the card
+  renderImage() {
+    const imageClasses = {
+      'pkt-card__image': true,
+      [`pkt-card__image-${this.imageShape}`]: this.imageShape,
+    }
+
+    return html`
+      ${this.image.src &&
+      html`
+        <div class=${classMap(imageClasses)}>
+          <img src=${this.image.src} alt=${this.image.alt || ''} />
         </div>
-      </div>
+      `}
+    `
+  }
+
+  // Do not render heading if link is present, render link heading instead
+  // Combine the rendering for headings into a renderHeader method
+  renderHeading() {
+    return html`
+      ${this.heading && !this.clickCardLink
+        ? html`
+            <pkt-heading
+              class="pkt-card__heading"
+              .level=${this.headinglevel || 3}
+              size="medium"
+              nospacing
+            >
+              ${this.heading}
+            </pkt-heading>
+          `
+        : nothing}
+    `
+  }
+
+  renderLinkHeading() {
+    return html`
+      ${this.clickCardLink
+        ? html`
+            <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>
+          `
+        : nothing}
+    `
+  }
+
+  renderSubheading() {
+    return html`
+      ${this.subheading ? html` <p class="pkt-card__subheading ">${this.subheading}</p> ` : nothing}
+    `
+  }
+
+  // Render header
+
+  // prettier-ignore
+  renderHeader() {
+    const hasHeading = !!this.heading || !!this.subheading
+    return html`
+      ${hasHeading
+        ? html`
+            <header class="pkt-card__header">
+              ${this.renderHeading()} 
+              ${this.renderLinkHeading()} 
+              ${this.renderSubheading()}
+            </header>
+          `
+        : nothing}
+    `
+  }
+
+  renderTags() {
+    const tagClasses = {
+      'pkt-card__tags': true,
+      [`pkt-card__tags-${this.tagPosition}`]: this.tagPosition,
+    }
+    return html`
+      ${this.tags.length > 0
+        ? html`
+            <div
+              class=${classMap(tagClasses)}
+              role="list"
+              aria-label=${this.tags.length > 1 ? 'merkelapper' : 'merkelapp'}
+            >
+              ${this.tags.map(
+                (tag) => html`
+                  <pkt-tag
+                    role="listitem"
+                    textStyle="normal-text"
+                    size="medium"
+                    skin=${ifDefined(tag.skin)}
+                    iconName=${ifDefined(tag.iconName)}
+                  >
+                    ${tag.text}
+                  </pkt-tag>
+                `,
+              )}
+            </div>
+          `
+        : nothing}
+    `
+  }
+
+  renderSlot() {
+    return html`
+      ${this.defaultSlot &&
+      html`<section class="pkt-card__content" ${ref(this.defaultSlot)}></section>`}
+    `
+  }
+
+  renderCreditline() {
+    return html`
+      ${this.author || this.date
+        ? html`
+            <footer class="pkt-card__creditline">
+              ${this.author
+                ? html`<span class="pkt-card__creditline-author">${this.author}</span>`
+                : nothing}
+              ${this.date
+                ? html`<span class="pkt-card__creditline-date">${this.date}</span>`
+                : nothing}
+            </footer>
+          `
+        : nothing}
     `
   }
 }

package/src/components/link/link.ts

@@ -37,7 +37,6 @@ export class PktLink extends PktElement {
     return html`<a
       class=${classMap(classes)}
       href=${this.href}
-      @click=${this.handleClick}
       .target=${this.target}
       .rel=${this.external ? 'noopener noreferrer' : nothing}
       >${this.iconName
@@ -45,13 +44,4 @@ export class PktLink extends PktElement {
         : ''} <span ${ref(this.defaultSlot)}>Link</span></a
     >`
   }
-
-  private handleClick() {
-    this.dispatchEvent(
-      new CustomEvent('click', {
-        detail: 'pkt-link-clicked',
-        bubbles: true,
-      }),
-    )
-  }
 }

package/dist/card-Cyww1yKr.js

@@ -1,94 +0,0 @@
-import { e as m } from "./class-map-KyMqi0fa.js";
-import { o as d } from "./if-defined-BErSJCeJ.js";
-import { P as u, E as g, x as i, n as a, a as f } from "./element-DjjF_tEh.js";
-import { P as k } from "./pkt-slot-controller-DtDaD9q_.js";
-import { e as $, n as v } from "./ref-iIffqQAI.js";
-import "./icon-Beoxup8E.js";
-import "./tag-Cu8afZy8.js";
-const y = {
-  skin: {
-    default: "outlined"
-  },
-  direction: {
-    default: "portrait"
-  }
-}, h = {
-  props: y
-};
-var _ = Object.defineProperty, P = Object.getOwnPropertyDescriptor, r = (o, t, n, p) => {
-  for (var s = p > 1 ? void 0 : p ? P(t, n) : t, c = o.length - 1, l; c >= 0; c--)
-    (l = o[c]) && (s = (p ? l(t, n, s) : l(s)) || s);
-  return p && s && _(t, n, s), s;
-};
-let e = class extends u {
-  constructor() {
-    super(), this.defaultSlot = $(), this.skin = h.props.skin.default, this.direction = h.props.direction.default, this.image = {
-      src: "",
-      alt: ""
-    }, this.heading = "", this.subheading = "", this.tags = [], this.slotController = new k(this, this.defaultSlot);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  render() {
-    const o = {
-      "pkt-card": !0,
-      [`pkt-card--${this.skin}`]: this.skin,
-      [`pkt-card--${this.direction}`]: this.direction
-    };
-    return i`
-      <div class=${m(o)}>
-        ${this.image.src && i`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt || ""} />
-          </div>
-        `}
-        <div class="pkt-card__wrapper">
-          ${this.tags.length > 0 ? i`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(
-      (t) => i`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${d(t.skin)}
-                        iconName=${d(t.iconName)}
-                      >
-                        ${t.text}
-                      </pkt-tag>
-                    `
-    )}
-                </div>
-              ` : g}
-          ${this.heading && i`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading && i`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot && i`<div class="pkt-card__content" ${v(this.defaultSlot)}></div>`}
-        </div>
-      </div>
-    `;
-  }
-};
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "skin", 2);
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "direction", 2);
-r([
-  a({ type: Object, reflect: !0 })
-], e.prototype, "image", 2);
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "heading", 2);
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "subheading", 2);
-r([
-  a({ type: Array, reflect: !0 })
-], e.prototype, "tags", 2);
-e = r([
-  f("pkt-card")
-], e);
-export {
-  e as P
-};

package/dist/card-DH-3qNgp.cjs

@@ -1,28 +0,0 @@
-"use strict";const h=require("./class-map-DCyaICmy.cjs"),d=require("./if-defined-a3sotaUr.cjs"),t=require("./element-BSypUpzA.cjs"),u=require("./pkt-slot-controller-Da-RgXfS.cjs"),l=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");require("./tag-B9kFYxHg.cjs");const k={skin:{default:"outlined"},direction:{default:"portrait"}},p={props:k};var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(n,i,e,a)=>{for(var r=a>1?void 0:a?f(i,e):i,c=n.length-1,o;c>=0;c--)(o=n[c])&&(r=(a?o(i,e,r):o(r))||r);return a&&r&&g(i,e,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=l.e(),this.skin=p.props.skin.default,this.direction=p.props.direction.default,this.image={src:"",alt:""},this.heading="",this.subheading="",this.tags=[],this.slotController=new u.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){const i={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction};return t.x`
-      <div class=${h.e(i)}>
-        ${this.image.src&&t.x`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt||""} />
-          </div>
-        `}
-        <div class="pkt-card__wrapper">
-          ${this.tags.length>0?t.x`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(e=>t.x`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${d.o(e.skin)}
-                        iconName=${d.o(e.iconName)}
-                      >
-                        ${e.text}
-                      </pkt-tag>
-                    `)}
-                </div>
-              `:t.E}
-          ${this.heading&&t.x`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading&&t.x`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot&&t.x`<div class="pkt-card__content" ${l.n(this.defaultSlot)}></div>`}
-        </div>
-      </div>
-    `}};s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"skin",2);s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"direction",2);s([t.n({type:Object,reflect:!0})],exports.PktCard.prototype,"image",2);s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"heading",2);s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"subheading",2);s([t.n({type:Array,reflect:!0})],exports.PktCard.prototype,"tags",2);exports.PktCard=s([t.t("pkt-card")],exports.PktCard);

package/dist/link-B748tCGi.js

@@ -1,73 +0,0 @@
-import { P as f, E as u, x as h, n as i, a as k } from "./element-DjjF_tEh.js";
-import { P as m } from "./pkt-slot-controller-DtDaD9q_.js";
-import { e as d, n as P } from "./ref-iIffqQAI.js";
-import { e as g } from "./class-map-KyMqi0fa.js";
-import "./icon-Beoxup8E.js";
-const v = {
-  href: {
-    default: "#"
-  },
-  target: {
-    default: "_self"
-  },
-  external: {
-    default: !1
-  }
-}, c = {
-  props: v
-};
-var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (o, n, l, s) => {
-  for (var t = s > 1 ? void 0 : s ? y(n, l) : n, a = o.length - 1, p; a >= 0; a--)
-    (p = o[a]) && (t = (s ? p(n, l, t) : p(t)) || t);
-  return s && t && x(n, l, t), t;
-};
-let e = class extends f {
-  constructor() {
-    super(), this.defaultSlot = d(), this.href = c.props.href.default, this.iconName = void 0, this.iconPosition = void 0, this.external = c.props.external.default, this.target = c.props.target.default, this.slotController = new m(this, this.defaultSlot);
-  }
-  render() {
-    const o = {
-      "pkt-link": !0,
-      "pkt-link--icon-left": !!this.iconName && this.iconPosition === "left" || !!(this.iconName && !this.iconPosition),
-      "pkt-link--icon-right": !!this.iconName && this.iconPosition === "right",
-      "pkt-link--external": this.external
-    };
-    return h`<a
-      class=${g(o)}
-      href=${this.href}
-      @click=${this.handleClick}
-      .target=${this.target}
-      .rel=${this.external ? "noopener noreferrer" : u}
-      >${this.iconName ? h`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span ${P(this.defaultSlot)}>Link</span></a
-    >`;
-  }
-  handleClick() {
-    this.dispatchEvent(
-      new CustomEvent("click", {
-        detail: "pkt-link-clicked",
-        bubbles: !0
-      })
-    );
-  }
-};
-r([
-  i({ type: String, reflect: !0 })
-], e.prototype, "href", 2);
-r([
-  i({ type: String, reflect: !0 })
-], e.prototype, "iconName", 2);
-r([
-  i({ type: String, reflect: !0 })
-], e.prototype, "iconPosition", 2);
-r([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "external", 2);
-r([
-  i({ type: String, reflect: !0 })
-], e.prototype, "target", 2);
-e = r([
-  k("pkt-link")
-], e);
-export {
-  e as P
-};

package/dist/link-BrDbM3GT.cjs

@@ -1,8 +0,0 @@
-"use strict";const t=require("./element-BSypUpzA.cjs"),k=require("./pkt-slot-controller-Da-RgXfS.cjs"),p=require("./ref-BvbyvXRH.cjs"),h=require("./class-map-DCyaICmy.cjs");require("./icon-BnKGwYjj.cjs");const f={href:{default:"#"},target:{default:"_self"},external:{default:!1}},a={props:f};var u=Object.defineProperty,P=Object.getOwnPropertyDescriptor,n=(o,i,s,r)=>{for(var e=r>1?void 0:r?P(i,s):i,l=o.length-1,c;l>=0;l--)(c=o[l])&&(e=(r?c(i,s,e):c(e))||e);return r&&e&&u(i,s,e),e};exports.PktLink=class extends t.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.href=a.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=a.props.external.default,this.target=a.props.target.default,this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const i={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return t.x`<a
-      class=${h.e(i)}
-      href=${this.href}
-      @click=${this.handleClick}
-      .target=${this.target}
-      .rel=${this.external?"noopener noreferrer":t.E}
-      >${this.iconName?t.x`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:""} <span ${p.n(this.defaultSlot)}>Link</span></a
-    >`}handleClick(){this.dispatchEvent(new CustomEvent("click",{detail:"pkt-link-clicked",bubbles:!0}))}};n([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"href",2);n([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconName",2);n([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconPosition",2);n([t.n({type:Boolean,reflect:!0})],exports.PktLink.prototype,"external",2);n([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"target",2);exports.PktLink=n([t.t("pkt-link")],exports.PktLink);