@oslokommune/punkt-elements 13.6.3 → 13.6.4

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.6.4](https://github.com/oslokommune/punkt/compare/13.6.3...13.6.4) (2025-09-19)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.6.1](https://github.com/oslokommune/punkt/compare/13.6.0...13.6.1) (2025-09-18)
 
 ### ⚠ BREAKING CHANGES

package/dist/{card-BwLe5f50.cjs → card-B9RPShvV.cjs}

@@ -1,4 +1,4 @@
-"use strict";const p=require("./class-map-CG3vIaNm.cjs"),h=require("./if-defined-CkVc_RJD.cjs"),t=require("./element-D62wHiNU.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-BfgcOXko.cjs");require("./icon-__Hjt2XZ.cjs");require("./tag-BKq07hGI.cjs");require("./heading-BBzoDZGk.cjs");const k={layout:{default:"vertical"},skin:{type:["outlined","outlined-beige","gray","blue","beige","green"],default:"outlined"},padding:{default:"default"}},o={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(i,a,s,n)=>{for(var r=n>1?void 0:n?m(a,s):a,d=i.length-1,l;d>=0;d--)(l=i[d])&&(r=(n?l(a,s,r):l(r))||r);return n&&r&&u(a,s,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=o.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=o.props.padding.default,this.skin=o.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,d;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},s=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),n=((d=this.ariaLabel)==null?void 0:d.trim())||(this.heading?this.heading:"kort");return t.x`
+"use strict";const p=require("./class-map-CG3vIaNm.cjs"),h=require("./if-defined-CkVc_RJD.cjs"),t=require("./element-D62wHiNU.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-BfgcOXko.cjs");require("./icon-__Hjt2XZ.cjs");require("./tag-BKq07hGI.cjs");require("./heading-H_FWjo2k.cjs");const k={layout:{default:"vertical"},skin:{type:["outlined","outlined-beige","gray","blue","beige","green"],default:"outlined"},padding:{default:"default"}},o={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(i,a,s,n)=>{for(var r=n>1?void 0:n?m(a,s):a,d=i.length-1,l;d>=0;d--)(l=i[d])&&(r=(n?l(a,s,r):l(r))||r);return n&&r&&u(a,s,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=o.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=o.props.padding.default,this.skin=o.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,d;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},s=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),n=((d=this.ariaLabel)==null?void 0:d.trim())||(this.heading?this.heading:"kort");return t.x`
       <article
         class=${p.e(a)}
         aria-label=${h.o(this.clickCardLink?s:n)}

package/dist/{card-DpUEM1tU.js → card-en2KhOPO.js}

@@ -5,7 +5,7 @@ import { P as $ } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as y, n as _ } from "./ref-BCGCor-j.js";
 import "./icon-B1-mkmwB.js";
 import "./tag-NZ5oeGfw.js";
-import "./heading-CfxZa1QR.js";
+import "./heading-DQ0R34j4.js";
 const b = {
   layout: {
     default: "vertical"

package/dist/heading-DQ0R34j4.js

@@ -0,0 +1,76 @@
+import { b as u, x as p, n as d, a as o } from "./element-DJZPsA_J.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, i, t, r) => {
+  for (var s = r > 1 ? void 0 : r ? v(i, t) : i, h = e.length - 1, n; h >= 0; h--)
+    (n = e[h]) && (s = (r ? n(i, t, s) : n(s)) || s);
+  return r && s && g(i, t, s), s;
+};
+let l = class extends u {
+  constructor() {
+    super(...arguments), this.size = void 0, this.level = 2, this.visuallyHidden = !1, this.align = void 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "heading"), this.setAttribute("aria-level", String(this.level)), this.updateHostClasses();
+  }
+  attributeChangedCallback(e, i, t) {
+    super.attributeChangedCallback(e, i, t), e === "level" && t && this.setLevel(Number(t)), e === "visuallyHidden" && (this.visuallyHidden = t !== null && t !== "false"), (e === "size" || e === "visuallyHidden" || e === "align") && this.updateHostClasses();
+  }
+  updated(e) {
+    super.updated(e), e.has("level") && (this.setLevel(this.level), this.hasAttribute("size") || (this.size = this.defaultSizeForLevel)), !this.hasAttribute("size") && (e.has("level") || this.size === void 0) && (this.size = this.defaultSizeForLevel), (e.has("size") || e.has("visuallyHidden") || e.has("align")) && this.updateHostClasses();
+  }
+  setLevel(e) {
+    e >= 1 && e <= 6 ? (this.level = e, this.setAttribute("aria-level", String(e))) : console.warn(`Invalid heading level: ${e}. Must be between 1 and 6.`);
+  }
+  get defaultSizeForLevel() {
+    switch (this.level) {
+      case 1:
+        return "xlarge";
+      case 2:
+        return "large";
+      case 3:
+        return "medium";
+      case 4:
+        return "small";
+      case 5:
+        return "xsmall";
+      case 6:
+        return "xsmall";
+      default:
+        return "medium";
+    }
+  }
+  updateHostClasses() {
+    this.classList.remove(
+      "pkt-heading",
+      "pkt-heading--xsmall",
+      "pkt-heading--small",
+      "pkt-heading--medium",
+      "pkt-heading--large",
+      "pkt-heading--xlarge",
+      "pkt-sr-only",
+      "pkt-heading--start",
+      "pkt-heading--center",
+      "pkt-heading--end"
+    ), this.classList.add("pkt-heading"), this.size && this.classList.add(`pkt-heading--${this.size}`), this.visuallyHidden && this.classList.add("pkt-sr-only"), this.align && this.classList.add(`pkt-heading--${this.align}`);
+  }
+  render() {
+    return p`<slot></slot>`;
+  }
+};
+a([
+  d({ type: String, reflect: !0 })
+], l.prototype, "size", 2);
+a([
+  d({ type: Number, reflect: !0 })
+], l.prototype, "level", 2);
+a([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "visuallyHidden", 2);
+a([
+  d({ type: String, reflect: !0 })
+], l.prototype, "align", 2);
+l = a([
+  o("pkt-heading")
+], l);
+export {
+  l as P
+};

package/dist/heading-H_FWjo2k.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("./element-D62wHiNU.cjs");var h=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a=(n,e,l,t)=>{for(var s=t>1?void 0:t?u(e,l):e,r=n.length-1,d;r>=0;r--)(d=n[r])&&(s=(t?d(e,l,s):d(s))||s);return t&&s&&h(e,l,s),s};exports.PktHeading=class extends i.PktShadowElement{constructor(){super(...arguments),this.size=void 0,this.level=2,this.visuallyHidden=!1,this.align=void 0}connectedCallback(){super.connectedCallback(),this.setAttribute("role","heading"),this.setAttribute("aria-level",String(this.level)),this.updateHostClasses()}attributeChangedCallback(e,l,t){super.attributeChangedCallback(e,l,t),e==="level"&&t&&this.setLevel(Number(t)),e==="visuallyHidden"&&(this.visuallyHidden=t!==null&&t!=="false"),(e==="size"||e==="visuallyHidden"||e==="align")&&this.updateHostClasses()}updated(e){super.updated(e),e.has("level")&&(this.setLevel(this.level),this.hasAttribute("size")||(this.size=this.defaultSizeForLevel)),!this.hasAttribute("size")&&(e.has("level")||this.size===void 0)&&(this.size=this.defaultSizeForLevel),(e.has("size")||e.has("visuallyHidden")||e.has("align"))&&this.updateHostClasses()}setLevel(e){e>=1&&e<=6?(this.level=e,this.setAttribute("aria-level",String(e))):console.warn(`Invalid heading level: ${e}. Must be between 1 and 6.`)}get defaultSizeForLevel(){switch(this.level){case 1:return"xlarge";case 2:return"large";case 3:return"medium";case 4:return"small";case 5:return"xsmall";case 6:return"xsmall";default:return"medium"}}updateHostClasses(){this.classList.remove("pkt-heading","pkt-heading--xsmall","pkt-heading--small","pkt-heading--medium","pkt-heading--large","pkt-heading--xlarge","pkt-sr-only","pkt-heading--start","pkt-heading--center","pkt-heading--end"),this.classList.add("pkt-heading"),this.size&&this.classList.add(`pkt-heading--${this.size}`),this.visuallyHidden&&this.classList.add("pkt-sr-only"),this.align&&this.classList.add(`pkt-heading--${this.align}`)}render(){return i.x`<slot></slot>`}};a([i.n({type:String,reflect:!0})],exports.PktHeading.prototype,"size",2);a([i.n({type:Number,reflect:!0})],exports.PktHeading.prototype,"level",2);a([i.n({type:Boolean,reflect:!0})],exports.PktHeading.prototype,"visuallyHidden",2);a([i.n({type:String,reflect:!0})],exports.PktHeading.prototype,"align",2);exports.PktHeading=a([i.t("pkt-heading")],exports.PktHeading);

package/dist/index.d.ts

@@ -749,14 +749,15 @@ declare class PktElement<T = {}> extends PktShadowElement<T> {
 }
 
 export declare class PktHeading extends PktShadowElement<IPktHeading> implements IPktHeading {
-    size: TPktHeadingSize;
+    size: TPktHeadingSize | undefined;
     level: TPktHeadingLevel;
     visuallyHidden: boolean;
-    align: 'start' | 'center' | 'end';
+    align: 'start' | 'center' | 'end' | undefined;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     protected updated(_changedProperties: PropertyValues): void;
     private setLevel;
+    private get defaultSizeForLevel();
     private updateHostClasses;
     render(): TemplateResult<1>;
 }

package/dist/pkt-card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-BwLe5f50.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-B9RPShvV.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-DpUEM1tU.js";
+import { P as a } from "./card-en2KhOPO.js";
 const r = a;
 export {
   a as PktCard,

package/dist/pkt-heading.cjs

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

package/dist/pkt-heading.js

@@ -1,4 +1,4 @@
-import { P as a } from "./heading-CfxZa1QR.js";
+import { P as a } from "./heading-DQ0R34j4.js";
 const e = a;
 export {
   a as PktHeading,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-CL9O0tLP.cjs"),g=require("./card-BwLe5f50.cjs"),h=require("./combobox-COuxR036.cjs"),f=require("./consent-DFrsiYGQ.cjs"),y=require("./checkbox-CH8xeK-0.cjs"),t=require("./element-D62wHiNU.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BfgcOXko.cjs"),j=require("./class-map-CG3vIaNm.cjs"),k=require("./datepicker-CV73pLqD.cjs"),q=require("./helptext-D1fkGmfT.cjs"),x=require("./heading-BBzoDZGk.cjs"),C=require("./icon-__Hjt2XZ.cjs"),v=require("./input-wrapper-C9rZEgju.cjs"),S=require("./link-CyiVlb-7.cjs"),$=require("./linkcard-fH9uydjS.cjs"),L=require("./loader-C-3l7kb9.cjs"),T=require("./messagebox---xPIAwR.cjs"),_=require("./modal-IjDRQfX1.cjs"),A=require("./progressbar-DJzEC7cx.cjs"),p=require("./radiobutton-DEboKECm.cjs"),B=require("./tag-BKq07hGI.cjs"),I=require("./textarea-CXu8UUsY.cjs"),D=require("./textinput-C6wccDhZ.cjs"),M=require("./select-Cf1RWSsI.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 O.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 d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-CL9O0tLP.cjs"),g=require("./card-B9RPShvV.cjs"),h=require("./combobox-COuxR036.cjs"),f=require("./consent-DFrsiYGQ.cjs"),y=require("./checkbox-CH8xeK-0.cjs"),t=require("./element-D62wHiNU.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BfgcOXko.cjs"),j=require("./class-map-CG3vIaNm.cjs"),k=require("./datepicker-CV73pLqD.cjs"),q=require("./helptext-D1fkGmfT.cjs"),x=require("./heading-H_FWjo2k.cjs"),C=require("./icon-__Hjt2XZ.cjs"),v=require("./input-wrapper-C9rZEgju.cjs"),S=require("./link-CyiVlb-7.cjs"),$=require("./linkcard-fH9uydjS.cjs"),L=require("./loader-C-3l7kb9.cjs"),T=require("./messagebox---xPIAwR.cjs"),_=require("./modal-IjDRQfX1.cjs"),A=require("./progressbar-DJzEC7cx.cjs"),p=require("./radiobutton-DEboKECm.cjs"),B=require("./tag-BKq07hGI.cjs"),I=require("./textarea-CXu8UUsY.cjs"),D=require("./textinput-C6wccDhZ.cjs"),M=require("./select-Cf1RWSsI.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 O.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="${j.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -4,7 +4,7 @@ import { P as E } from "./backlink-Bq8O2bt8.js";
 import { P as O } from "./button-x6Xw-5w0.js";
 import { c as d } from "./calendar-ChphTIhk.js";
 import { P as j } from "./calendar-ChphTIhk.js";
-import { P as G } from "./card-DpUEM1tU.js";
+import { P as G } from "./card-en2KhOPO.js";
 import { P as K } from "./combobox-D3aPvdrE.js";
 import { P as U } from "./consent-CXp0bLvg.js";
 import { P as q } from "./checkbox-DSAcMC-D.js";
@@ -14,7 +14,7 @@ import { e as m, n as k } from "./ref-BCGCor-j.js";
 import { e as u } from "./class-map-Dw6Wrxwi.js";
 import { P as F, a as J } from "./datepicker-Ca552mbJ.js";
 import { P as V } from "./helptext-8ykxyegi.js";
-import { P as Y } from "./heading-CfxZa1QR.js";
+import { P as Y } from "./heading-DQ0R34j4.js";
 import { P as tt } from "./icon-B1-mkmwB.js";
 import { P as rt } from "./input-wrapper-D_JdEqcO.js";
 import { P as st } from "./link-DSSJYrtn.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.6.3",
+  "version": "13.6.4",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -40,7 +40,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.6.3",
-    "@oslokommune/punkt-css": "^13.6.3",
+    "@oslokommune/punkt-css": "^13.6.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@vitest/ui": "^1.0.0",
     "jest-axe": "^9.0.0",
@@ -72,5 +72,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "b58d1ae17c67067c2cd94a585d1362a9b27483b0"
+  "gitHead": "e5cb812d5161777cf03a2a2ed532490446d6d5a9"
 }

package/src/components/heading/heading.test.ts

@@ -42,10 +42,9 @@ describe('PktHeading', () => {
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.size).toBe('medium')
       expect(heading.level).toBe(2)
       expect(heading.visuallyHidden).toBe(false)
-      expect(heading.align).toBe('start')
+      expect(heading.align).toBe(undefined)
     })
 
     test('renders content in shadow DOM slot', async () => {
@@ -65,10 +64,10 @@ describe('PktHeading', () => {
       const heading = container.querySelector('pkt-heading') as PktHeading
       await heading.updateComplete
 
-      expect(heading.getAttribute('size')).toBe('medium')
+      expect(heading.getAttribute('size')).toBe('large')
       expect(heading.getAttribute('level')).toBe('2')
       expect(heading.getAttribute('visually-hidden')).toBe(null)
-      expect(heading.getAttribute('align')).toBe('start')
+      expect(heading.getAttribute('align')).toBe(null)
     })
 
     test('sets size property correctly', async () => {
@@ -130,8 +129,8 @@ describe('PktHeading', () => {
       await heading.updateComplete
 
       expect(heading.classList.contains('pkt-heading')).toBe(true)
-      expect(heading.classList.contains('pkt-heading--medium')).toBe(true)
-      expect(heading.classList.contains('pkt-heading--start')).toBe(true)
+      expect(heading.classList.contains('pkt-heading--medium')).toBe(false)
+      expect(heading.classList.contains('pkt-heading--start')).toBe(false)
     })
 
     test('applies size-specific CSS classes', async () => {
@@ -451,7 +450,7 @@ describe('PktHeading', () => {
 
       // Verify second heading is unaffected
       expect(heading2.size).toBe('small')
-      expect(heading2.align).toBe('start')
+      expect(heading2.align).toBe(undefined)
       expect(heading1.size).toBe('xlarge')
       expect(heading1.align).toBe('center')
     })

package/src/components/heading/heading.ts

@@ -14,15 +14,17 @@ export interface IPktHeading {
 
 @customElement('pkt-heading')
 export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHeading {
-  @property({ type: String, reflect: true }) size: TPktHeadingSize = 'medium'
+  @property({ type: String, reflect: true }) size: TPktHeadingSize | undefined = undefined
   @property({ type: Number, reflect: true }) level: TPktHeadingLevel = 2
   @property({ type: Boolean, reflect: true }) visuallyHidden: boolean = false
-  @property({ type: String, reflect: true }) align: 'start' | 'center' | 'end' = 'start'
+  @property({ type: String, reflect: true }) align: 'start' | 'center' | 'end' | undefined =
+    undefined
 
   connectedCallback(): void {
     super.connectedCallback()
     this.setAttribute('role', 'heading')
     this.setAttribute('aria-level', String(this.level))
+
     this.updateHostClasses()
   }
 
@@ -43,7 +45,18 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
     super.updated(_changedProperties)
     if (_changedProperties.has('level')) {
       this.setLevel(this.level)
+
+      if (!this.hasAttribute('size')) {
+        this.size = this.defaultSizeForLevel
+      }
     }
+    if (
+      !this.hasAttribute('size') &&
+      (_changedProperties.has('level') || this.size === undefined)
+    ) {
+      this.size = this.defaultSizeForLevel
+    }
+
     if (
       _changedProperties.has('size') ||
       _changedProperties.has('visuallyHidden') ||
@@ -62,6 +75,25 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
     }
   }
 
+  private get defaultSizeForLevel(): TPktHeadingSize {
+    switch (this.level) {
+      case 1:
+        return 'xlarge'
+      case 2:
+        return 'large'
+      case 3:
+        return 'medium'
+      case 4:
+        return 'small'
+      case 5:
+        return 'xsmall'
+      case 6:
+        return 'xsmall'
+      default:
+        return 'medium'
+    }
+  }
+
   private updateHostClasses() {
     // Remove all possible classes first
     this.classList.remove(

package/dist/heading-BBzoDZGk.cjs

@@ -1 +0,0 @@
-"use strict";const i=require("./element-D62wHiNU.cjs");var h=Object.defineProperty,p=Object.getOwnPropertyDescriptor,l=(n,t,a,e)=>{for(var s=e>1?void 0:e?p(t,a):t,d=n.length-1,r;d>=0;d--)(r=n[d])&&(s=(e?r(t,a,s):r(s))||s);return e&&s&&h(t,a,s),s};exports.PktHeading=class extends i.PktShadowElement{constructor(){super(...arguments),this.size="medium",this.level=2,this.visuallyHidden=!1,this.align="start"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","heading"),this.setAttribute("aria-level",String(this.level)),this.updateHostClasses()}attributeChangedCallback(t,a,e){super.attributeChangedCallback(t,a,e),t==="level"&&e&&this.setLevel(Number(e)),t==="visuallyHidden"&&(this.visuallyHidden=e!==null&&e!=="false"),(t==="size"||t==="visuallyHidden"||t==="align")&&this.updateHostClasses()}updated(t){super.updated(t),t.has("level")&&this.setLevel(this.level),(t.has("size")||t.has("visuallyHidden")||t.has("align"))&&this.updateHostClasses()}setLevel(t){t>=1&&t<=6?(this.level=t,this.setAttribute("aria-level",String(t))):console.warn(`Invalid heading level: ${t}. Must be between 1 and 6.`)}updateHostClasses(){this.classList.remove("pkt-heading","pkt-heading--xsmall","pkt-heading--small","pkt-heading--medium","pkt-heading--large","pkt-heading--xlarge","pkt-sr-only","pkt-heading--start","pkt-heading--center","pkt-heading--end"),this.classList.add("pkt-heading"),this.size&&this.classList.add(`pkt-heading--${this.size}`),this.visuallyHidden&&this.classList.add("pkt-sr-only"),this.align&&this.classList.add(`pkt-heading--${this.align}`)}render(){return i.x`<slot></slot>`}};l([i.n({type:String,reflect:!0})],exports.PktHeading.prototype,"size",2);l([i.n({type:Number,reflect:!0})],exports.PktHeading.prototype,"level",2);l([i.n({type:Boolean,reflect:!0})],exports.PktHeading.prototype,"visuallyHidden",2);l([i.n({type:String,reflect:!0})],exports.PktHeading.prototype,"align",2);exports.PktHeading=l([i.t("pkt-heading")],exports.PktHeading);

package/dist/heading-CfxZa1QR.js

@@ -1,58 +0,0 @@
-import { b as p, x as u, n, a as o } from "./element-DJZPsA_J.js";
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (t, i, e, d) => {
-  for (var s = d > 1 ? void 0 : d ? f(i, e) : i, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (s = (d ? h(i, e, s) : h(s)) || s);
-  return d && s && g(i, e, s), s;
-};
-let l = class extends p {
-  constructor() {
-    super(...arguments), this.size = "medium", this.level = 2, this.visuallyHidden = !1, this.align = "start";
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "heading"), this.setAttribute("aria-level", String(this.level)), this.updateHostClasses();
-  }
-  attributeChangedCallback(t, i, e) {
-    super.attributeChangedCallback(t, i, e), t === "level" && e && this.setLevel(Number(e)), t === "visuallyHidden" && (this.visuallyHidden = e !== null && e !== "false"), (t === "size" || t === "visuallyHidden" || t === "align") && this.updateHostClasses();
-  }
-  updated(t) {
-    super.updated(t), t.has("level") && this.setLevel(this.level), (t.has("size") || t.has("visuallyHidden") || t.has("align")) && this.updateHostClasses();
-  }
-  setLevel(t) {
-    t >= 1 && t <= 6 ? (this.level = t, this.setAttribute("aria-level", String(t))) : console.warn(`Invalid heading level: ${t}. Must be between 1 and 6.`);
-  }
-  updateHostClasses() {
-    this.classList.remove(
-      "pkt-heading",
-      "pkt-heading--xsmall",
-      "pkt-heading--small",
-      "pkt-heading--medium",
-      "pkt-heading--large",
-      "pkt-heading--xlarge",
-      "pkt-sr-only",
-      "pkt-heading--start",
-      "pkt-heading--center",
-      "pkt-heading--end"
-    ), this.classList.add("pkt-heading"), this.size && this.classList.add(`pkt-heading--${this.size}`), this.visuallyHidden && this.classList.add("pkt-sr-only"), this.align && this.classList.add(`pkt-heading--${this.align}`);
-  }
-  render() {
-    return u`<slot></slot>`;
-  }
-};
-a([
-  n({ type: String, reflect: !0 })
-], l.prototype, "size", 2);
-a([
-  n({ type: Number, reflect: !0 })
-], l.prototype, "level", 2);
-a([
-  n({ type: Boolean, reflect: !0 })
-], l.prototype, "visuallyHidden", 2);
-a([
-  n({ type: String, reflect: !0 })
-], l.prototype, "align", 2);
-l = a([
-  o("pkt-heading")
-], l);
-export {
-  l as P
-};