@oslokommune/punkt-elements 12.34.3 → 12.35.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+Punkt følger [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering,
+og skriver commits ca etter [Conventional Commits](https://conventionalcommits.org).
+
+---
+
+## [12.35.0](https://github.com/oslokommune/punkt/compare/12.34.4...12.35.0) (2025-04-25)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+

package/dist/heading-BkC05ohM.js

@@ -0,0 +1,59 @@
+import { P as f, x as l, n as o, a as d } from "./element-DjjF_tEh.js";
+import { P as g } from "./pkt-slot-controller-DFrc5O93.js";
+import { e as r } from "./class-map-KyMqi0fa.js";
+import { e as $, n as i } from "./ref-iIffqQAI.js";
+var S = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (t, n, p, h) => {
+  for (var e = h > 1 ? void 0 : h ? y(n, p) : n, u = t.length - 1, c; u >= 0; u--)
+    (c = t[u]) && (e = (h ? c(n, p, e) : c(e)) || e);
+  return h && e && S(n, p, e), e;
+};
+let s = class extends f {
+  constructor() {
+    super(), this.defaultSlot = $(), this.size = "medium", this.level = 2, this.noSpacing = !0, this.visuallyHidden = !1, this.align = "start", this.slotController = new g(this, this.defaultSlot);
+  }
+  render() {
+    const t = {
+      "pkt-heading": !0,
+      [`pkt-heading--${this.size}`]: this.size,
+      "pkt-heading--noSpacing": this.noSpacing,
+      "pkt-sr-only": this.visuallyHidden,
+      [`pkt-heading--${this.align}`]: this.align
+    };
+    switch (this.level) {
+      case 2:
+        return l`<h2 class=${r(t)} ${i(this.defaultSlot)}></h2>`;
+      case 3:
+        return l`<h3 class=${r(t)} ${i(this.defaultSlot)}></h3>`;
+      case 4:
+        return l`<h4 class=${r(t)} ${i(this.defaultSlot)}></h4>`;
+      case 5:
+        return l`<h5 class=${r(t)} ${i(this.defaultSlot)}></h5>`;
+      case 6:
+        return l`<h6 class=${r(t)} ${i(this.defaultSlot)}></h6>`;
+      case 1:
+      default:
+        return l`<h1 class=${r(t)} ${i(this.defaultSlot)}></h1>`;
+    }
+  }
+};
+a([
+  o({ type: String, reflect: !0 })
+], s.prototype, "size", 2);
+a([
+  o({ type: Number, reflect: !0 })
+], s.prototype, "level", 2);
+a([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "noSpacing", 2);
+a([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "visuallyHidden", 2);
+a([
+  o({ type: String, reflect: !0 })
+], s.prototype, "align", 2);
+s = a([
+  d("pkt-heading")
+], s);
+export {
+  s as P
+};

package/dist/heading-CP3NaeWE.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./element-BSypUpzA.cjs"),c=require("./pkt-slot-controller-plQxXRvV.cjs"),l=require("./class-map-DCyaICmy.cjs"),n=require("./ref-BvbyvXRH.cjs");var p=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(a,t,o,i)=>{for(var s=i>1?void 0:i?d(t,o):t,h=a.length-1,u;h>=0;h--)(u=a[h])&&(s=(i?u(t,o,s):u(s))||s);return i&&s&&p(t,o,s),s};exports.PktHeading=class extends e.PktElement{constructor(){super(),this.defaultSlot=n.e(),this.size="medium",this.level=2,this.noSpacing=!0,this.visuallyHidden=!1,this.align="start",this.slotController=new c.PktSlotController(this,this.defaultSlot)}render(){const t={"pkt-heading":!0,[`pkt-heading--${this.size}`]:this.size,"pkt-heading--noSpacing":this.noSpacing,"pkt-sr-only":this.visuallyHidden,[`pkt-heading--${this.align}`]:this.align};switch(this.level){case 2:return e.x`<h2 class=${l.e(t)} ${n.n(this.defaultSlot)}></h2>`;case 3:return e.x`<h3 class=${l.e(t)} ${n.n(this.defaultSlot)}></h3>`;case 4:return e.x`<h4 class=${l.e(t)} ${n.n(this.defaultSlot)}></h4>`;case 5:return e.x`<h5 class=${l.e(t)} ${n.n(this.defaultSlot)}></h5>`;case 6:return e.x`<h6 class=${l.e(t)} ${n.n(this.defaultSlot)}></h6>`;case 1:default:return e.x`<h1 class=${l.e(t)} ${n.n(this.defaultSlot)}></h1>`}}};r([e.n({type:String,reflect:!0})],exports.PktHeading.prototype,"size",2);r([e.n({type:Number,reflect:!0})],exports.PktHeading.prototype,"level",2);r([e.n({type:Boolean,reflect:!0})],exports.PktHeading.prototype,"noSpacing",2);r([e.n({type:Boolean,reflect:!0})],exports.PktHeading.prototype,"visuallyHidden",2);r([e.n({type:String,reflect:!0})],exports.PktHeading.prototype,"align",2);exports.PktHeading=r([e.t("pkt-heading")],exports.PktHeading);

package/dist/heading.d.ts

@@ -0,0 +1 @@
+export { }

package/dist/index.d.ts

@@ -156,6 +156,14 @@ export declare interface IPktComboboxOption {
     value: string;
 }
 
+export declare interface IPktHeading {
+    size?: TPktHeadingSize;
+    level?: TPktHeadingLevel;
+    spacing?: boolean;
+    visuallyHidden?: boolean;
+    textAlign?: 'start' | 'center' | 'end';
+}
+
 declare interface IPktLinkCard {
     title?: string;
     href?: string;
@@ -638,6 +646,17 @@ declare class PktElement<T = {}> extends LitElement {
     constructor();
 }
 
+export declare class PktHeading extends PktElement<IPktHeading> implements IPktHeading {
+    defaultSlot: Ref<HTMLElement>;
+    constructor();
+    size: TPktHeadingSize;
+    level: TPktHeadingLevel;
+    noSpacing: boolean;
+    visuallyHidden: boolean;
+    align: 'start' | 'center' | 'end';
+    render(): TemplateResult<1>;
+}
+
 export declare class PktHelptext extends PktElement {
     defaultSlot: Ref<HTMLElement>;
     constructor();
@@ -1095,6 +1114,10 @@ export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right
 
 export declare type TPktComboboxTagPlacement = 'inside' | 'outside';
 
+export declare type TPktHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export declare type TPktHeadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
 export declare type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes';
 
 declare type TPktSize = 'small' | 'medium' | 'large';

package/dist/pkt-heading.cjs

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

package/dist/pkt-heading.js

@@ -0,0 +1,6 @@
+import { P as a } from "./heading-BkC05ohM.js";
+const e = a;
+export {
+  a as PktHeading,
+  e as default
+};

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-DWIElKEZ.cjs"),l=require("./accordionitem-cvsySqgK.cjs"),P=require("./backlink-HHM21crL.cjs"),b=require("./button-BNdVIhUp.cjs"),p=require("./calendar-oX4HJomV.cjs"),m=require("./card-BDcr3PII.cjs"),g=require("./combobox-D9NKnao2.cjs"),h=require("./checkbox-CqatE-eX.cjs"),t=require("./element-BSypUpzA.cjs"),f=require("./pkt-slot-controller-plQxXRvV.cjs"),s=require("./ref-BvbyvXRH.cjs"),y=require("./class-map-DCyaICmy.cjs"),x=require("./datepicker-CskZMUib.cjs"),O=require("./helptext-CCnYxYA9.cjs"),j=require("./icon-BnKGwYjj.cjs"),q=require("./input-wrapper-Cn929YTV.cjs"),C=require("./link-CnibgS3c.cjs"),v=require("./linkcard-DPGX1kb1.cjs"),S=require("./loader-BN4q8pSl.cjs"),$=require("./messagebox-BWJr42m9.cjs"),L=require("./modal-cPcTJriW.cjs"),_=require("./progressbar-DiRfScnB.cjs"),k=require("./radiobutton-CIW0FvT8.cjs"),A=require("./tag-CgkUxA5D.cjs"),B=require("./textarea-qX4Inr1X.cjs"),T=require("./textinput-BlsgLNwW.cjs"),I=require("./select-BJziJVde.cjs");var M=Object.defineProperty,R=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?R(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&&M(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 f.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 k=require("./alert-DWIElKEZ.cjs"),l=require("./accordionitem-cvsySqgK.cjs"),P=require("./backlink-HHM21crL.cjs"),b=require("./button-BNdVIhUp.cjs"),p=require("./calendar-oX4HJomV.cjs"),m=require("./card-BDcr3PII.cjs"),g=require("./combobox-D9NKnao2.cjs"),h=require("./checkbox-CqatE-eX.cjs"),t=require("./element-BSypUpzA.cjs"),f=require("./pkt-slot-controller-plQxXRvV.cjs"),s=require("./ref-BvbyvXRH.cjs"),y=require("./class-map-DCyaICmy.cjs"),O=require("./datepicker-CskZMUib.cjs"),j=require("./helptext-CCnYxYA9.cjs"),q=require("./heading-CP3NaeWE.cjs"),x=require("./icon-BnKGwYjj.cjs"),C=require("./input-wrapper-Cn929YTV.cjs"),v=require("./link-CnibgS3c.cjs"),S=require("./linkcard-DPGX1kb1.cjs"),$=require("./loader-BN4q8pSl.cjs"),L=require("./messagebox-BWJr42m9.cjs"),_=require("./modal-cPcTJriW.cjs"),A=require("./progressbar-DiRfScnB.cjs"),d=require("./radiobutton-CIW0FvT8.cjs"),B=require("./tag-CgkUxA5D.cjs"),T=require("./textarea-qX4Inr1X.cjs"),I=require("./textinput-BlsgLNwW.cjs"),M=require("./select-BJziJVde.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(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&&R(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 f.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="${y.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
@@ -26,4 +26,4 @@
       <ul>
         ${e.map(r=>t.x`<li>${r}</li>`)}
       </ul>
-    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:p.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>d.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>P.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>b.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>p.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>m.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>g.PktCombobox});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>h.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>x.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>O.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>j.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>q.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>C.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>v.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>S.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>$.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>L.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>_.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>k.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>k.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>A.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>B.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>T.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>I.PktSelect});
+    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:p.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>k.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>P.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>b.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>p.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>m.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>g.PktCombobox});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>h.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>O.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>j.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>q.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>x.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>C.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>v.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>S.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>$.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>L.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>_.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>A.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>d.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>d.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>B.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>T.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>I.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>M.PktSelect});

package/dist/pkt-index.js

@@ -2,36 +2,37 @@ import { P as A } from "./alert-B5lVS6Qs.js";
 import { P as B, a as E } from "./accordionitem-Db-3WiJS.js";
 import { P as O } from "./backlink-hvyJmwrO.js";
 import { P as T } from "./button-B6uRE7uT.js";
-import { c as h } from "./calendar-mTDcujoj.js";
+import { c as f } from "./calendar-mTDcujoj.js";
 import { P as D } from "./calendar-mTDcujoj.js";
-import { P as H } from "./card-B5zTEmH1.js";
+import { P as G } from "./card-B5zTEmH1.js";
 import { P as K } from "./combobox-CELUAZxF.js";
 import { P as U } from "./checkbox-CyYfA2fu.js";
-import { P as f, t as k, x as P, n, a as c } from "./element-DjjF_tEh.js";
+import { P as h, t as k, x as P, n, a as c } from "./element-DjjF_tEh.js";
 import { P as x } from "./pkt-slot-controller-DFrc5O93.js";
 import { e as m, n as d } from "./ref-iIffqQAI.js";
 import { e as u } from "./class-map-KyMqi0fa.js";
 import { P as q } from "./datepicker-B6qk_tTl.js";
 import { P as F } from "./helptext-BLHAJ1aC.js";
-import { P as Q } from "./icon-Beoxup8E.js";
-import { P as X } from "./input-wrapper-CeeNYbDA.js";
-import { P as Z } from "./link-BYI8VNGd.js";
-import { P as et } from "./linkcard--zuuAt_v.js";
-import { P as ot } from "./loader-DgIiyYBl.js";
-import { P as at } from "./messagebox-cme5VbUM.js";
-import { P as it } from "./modal-B-varrJT.js";
-import { P as lt } from "./progressbar-BKt_aj7f.js";
-import { P as mt, P as dt } from "./radiobutton-DtHuz7qn.js";
-import { P as ft } from "./tag-CGnj4c1Z.js";
-import { P as ct } from "./textarea-CiA4IzMs.js";
-import { P as ut } from "./textinput-CrxjZNEq.js";
-import { P as vt } from "./select-DbRLz-7l.js";
+import { P as Q } from "./heading-BkC05ohM.js";
+import { P as X } from "./icon-Beoxup8E.js";
+import { P as Z } from "./input-wrapper-CeeNYbDA.js";
+import { P as et } from "./link-BYI8VNGd.js";
+import { P as ot } from "./linkcard--zuuAt_v.js";
+import { P as at } from "./loader-DgIiyYBl.js";
+import { P as it } from "./messagebox-cme5VbUM.js";
+import { P as lt } from "./modal-B-varrJT.js";
+import { P as mt } from "./progressbar-BKt_aj7f.js";
+import { P as ft, P as ht } from "./radiobutton-DtHuz7qn.js";
+import { P as ct } from "./tag-CGnj4c1Z.js";
+import { P as ut } from "./textarea-CiA4IzMs.js";
+import { P as vt } from "./textinput-CrxjZNEq.js";
+import { P as bt } from "./select-DbRLz-7l.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
   return a && r && g(e, i, r), r;
 };
-let o = class extends f {
+let o = class extends h {
   constructor() {
     super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = m(), this.namedSlot = m(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
   }
@@ -106,7 +107,7 @@ s([
   n({ type: String })
 ], o.prototype, "string", 2);
 s([
-  n({ converter: h })
+  n({ converter: f })
 ], o.prototype, "strings", 2);
 s([
   n({ type: Boolean })
@@ -124,24 +125,25 @@ export {
   O as PktBackLink,
   T as PktButton,
   D as PktCalendar,
-  H as PktCard,
+  G as PktCard,
   U as PktCheckbox,
   K as PktCombobox,
   o as PktComponent,
   q as PktDatepicker,
+  Q as PktHeading,
   F as PktHelptext,
-  Q as PktIcon,
-  X as PktInputWrapper,
-  Z as PktLink,
-  et as PktLinkCard,
-  ot as PktLoader,
-  at as PktMessagebox,
-  it as PktModal,
-  lt as PktProgressbar,
-  mt as PktRadioButton,
-  dt as PktRadiobutton,
-  vt as PktSelect,
-  ft as PktTag,
-  ct as PktTextarea,
-  ut as PktTextinput
+  X as PktIcon,
+  Z as PktInputWrapper,
+  et as PktLink,
+  ot as PktLinkCard,
+  at as PktLoader,
+  it as PktMessagebox,
+  lt as PktModal,
+  mt as PktProgressbar,
+  ft as PktRadioButton,
+  ht as PktRadiobutton,
+  bt as PktSelect,
+  ct as PktTag,
+  ut as PktTextarea,
+  vt as PktTextinput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.34.3",
+  "version": "12.35.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -29,8 +29,8 @@
     "urlpattern-polyfill": "^10.0.0"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.30.1",
-    "@oslokommune/punkt-css": "^12.34.2",
+    "@oslokommune/punkt-assets": "^12.34.4",
+    "@oslokommune/punkt-css": "^12.35.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "c8bf7251b95598567b0db5c91d9d50dec1e0b1f5"
+  "gitHead": "897a80f0520cca735bc514c074d11a7e750079cc"
 }

package/src/components/heading/heading.ts

@@ -0,0 +1,59 @@
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { createRef, ref, Ref } from 'lit/directives/ref.js'
+
+export type TPktHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
+export type TPktHeadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
+
+export interface IPktHeading {
+  size?: TPktHeadingSize
+  level?: TPktHeadingLevel
+  spacing?: boolean
+  visuallyHidden?: boolean
+  textAlign?: 'start' | 'center' | 'end'
+}
+
+@customElement('pkt-heading')
+export class PktHeading extends PktElement<IPktHeading> implements IPktHeading {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  @property({ type: String, reflect: true }) size: TPktHeadingSize = 'medium'
+  @property({ type: Number, reflect: true }) level: TPktHeadingLevel = 2
+  @property({ type: Boolean, reflect: true }) noSpacing: boolean = true
+  @property({ type: Boolean, reflect: true }) visuallyHidden: boolean = false
+  @property({ type: String, reflect: true }) align: 'start' | 'center' | 'end' = 'start'
+
+  render() {
+    const classes = {
+      'pkt-heading': true,
+      [`pkt-heading--${this.size}`]: this.size,
+      'pkt-heading--noSpacing': this.noSpacing,
+      'pkt-sr-only': this.visuallyHidden,
+      [`pkt-heading--${this.align}`]: this.align,
+    }
+
+    switch (this.level) {
+      case 2:
+        return html`<h2 class=${classMap(classes)} ${ref(this.defaultSlot)}></h2>`
+      case 3:
+        return html`<h3 class=${classMap(classes)} ${ref(this.defaultSlot)}></h3>`
+      case 4:
+        return html`<h4 class=${classMap(classes)} ${ref(this.defaultSlot)}></h4>`
+      case 5:
+        return html`<h5 class=${classMap(classes)} ${ref(this.defaultSlot)}></h5>`
+      case 6:
+        return html`<h6 class=${classMap(classes)} ${ref(this.defaultSlot)}></h6>`
+      case 1:
+      default:
+        return html`<h1 class=${classMap(classes)} ${ref(this.defaultSlot)}></h1>`
+    }
+  }
+}

package/src/components/heading/index.ts

@@ -0,0 +1,6 @@
+import { PktHeading } from './heading'
+import type { IPktHeading, TPktHeadingSize, TPktHeadingLevel } from './heading'
+
+export { PktHeading }
+export type { IPktHeading, TPktHeadingSize, TPktHeadingLevel }
+export default PktHeading

package/src/components/index.ts

@@ -10,6 +10,7 @@ export { PktCheckbox } from '@/components/checkbox'
 export { PktComponent } from '../base-elements/component-template.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
 export { PktHelptext } from '@/components/helptext'
+export { PktHeading } from '@/components/heading'
 export { PktIcon } from '@/components/icon'
 export { PktInputWrapper } from '@/components/input-wrapper'
 export { PktLink } from '@/components/link'
@@ -55,6 +56,8 @@ export type {
   TPktComboboxTagPlacement,
 } from '@/components/combobox'
 
+export type { IPktHeading, TPktHeadingSize, TPktHeadingLevel } from '@/components/heading'
+
 export type { TTagSkin, TTagType } from '@/components/tag'
 
 export type { TSelectOption } from '@/components/select'