@oslokommune/punkt-elements 16.3.0 → 16.5.0

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.5.0](https://github.com/oslokommune/punkt/compare/16.4.0...16.5.0) (2026-03-27)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.3.0](https://github.com/oslokommune/punkt/compare/16.2.0...16.3.0) (2026-03-24)
 
 ### ⚠ BREAKING CHANGES

package/dist/breadcrumbs.d.ts

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

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { IAriaAttributes } from '../../../../../shared-types';
 import { IDatepickerStrings } from '../../../../../shared-types/datepicker';
 import { IPktComboboxOption } from '../../../../../shared-types/combobox';
 import { LitElement } from 'lit';
+import { nothing } from 'lit';
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
 import { PropertyValues } from 'lit';
 import { ReactiveController } from 'lit';
@@ -154,6 +155,11 @@ declare class ComboboxValue extends ComboboxBase {
  */
 declare type ElementProps<Element, PropKeys extends keyof Element> = Partial<Pick<Element, PropKeys>>;
 
+export declare interface IBreadcrumbItem {
+    text: string;
+    href: string;
+}
+
 export declare interface IPktAccordion {
     compact?: boolean;
     skin?: TPktAccordionSkin;
@@ -194,6 +200,10 @@ export declare interface IPktBackLink {
     ariaLabel?: string;
 }
 
+export declare interface IPktBreadcrumbs {
+    breadcrumbs: IBreadcrumbItem[];
+}
+
 export declare interface IPktButton {
     iconName?: PktIconName;
     secondIconName?: PktIconName;
@@ -530,6 +540,12 @@ export declare class PktBackLink extends PktElement<IPktBackLink> implements IPk
     render(): TemplateResult<1>;
 }
 
+export declare class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
+    breadcrumbs: IBreadcrumbItem[];
+    private handleLinkClick;
+    render(): typeof nothing | TemplateResult<1>;
+}
+
 export declare class PktButton extends PktElementWithSlot<IPktButton> implements IPktButton {
     iconName: string;
     secondIconName: string;

package/dist/pkt-breadcrumbs.cjs

@@ -0,0 +1,43 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./element-CMTfByxQ.cjs");require("./icon-Dj0oZZSa.cjs");var l=Object.defineProperty,p=Object.getOwnPropertyDescriptor,i=(n,e,t,s)=>{for(var r=s>1?void 0:s?p(e,t):e,c=n.length-1,b;c>=0;c--)(b=n[c])&&(r=(s?b(e,t,r):b(r))||r);return s&&r&&l(e,t,r),r};exports.PktBreadcrumbs=class extends a.PktElement{constructor(){super(...arguments),this.breadcrumbs=[]}handleLinkClick(e,t,s){const r=new CustomEvent("navigate",{detail:{item:t,index:s,originalEvent:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r)||e.preventDefault()}render(){if(!this.breadcrumbs||this.breadcrumbs.length===0)return a.A;const e=this.breadcrumbs[this.breadcrumbs.length-2];return a.b`
+      <nav class="pkt-breadcrumbs" aria-label="brødsmulemeny">
+        <ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
+          ${this.breadcrumbs.map((t,s)=>s===this.breadcrumbs.length-1?a.b`
+                  <li class="pkt-breadcrumbs__item">
+                    <span class="pkt-breadcrumbs__label" aria-current="true">
+                      <span class="pkt-breadcrumbs__text">${t.text}</span>
+                    </span>
+                  </li>
+                `:a.b`
+                  <li class="pkt-breadcrumbs__item">
+                    <a
+                      class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
+                      href=${t.href}
+                      @click=${r=>this.handleLinkClick(r,t,s)}
+                    >
+                      <pkt-icon
+                        class="pkt-icon pkt-breadcrumbs__icon pkt-link__icon"
+                        name="chevron-thin-right"
+                        aria-hidden="true"
+                      ></pkt-icon>
+                      <span class="pkt-breadcrumbs__text">${t.text}</span>
+                    </a>
+                  </li>
+                `)}
+        </ol>
+
+        ${e?a.b`
+              <a
+                class="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile"
+                href=${e.href}
+                @click=${t=>this.handleLinkClick(t,e,this.breadcrumbs.length-2)}
+              >
+                <pkt-icon
+                  class="pkt-back-link__icon pkt-icon pkt-link__icon"
+                  name="chevron-thin-left"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <span class="pkt-breadcrumbs__text">${e.text}</span>
+              </a>
+            `:a.A}
+      </nav>
+    `}};i([a.n({type:Array})],exports.PktBreadcrumbs.prototype,"breadcrumbs",2);exports.PktBreadcrumbs=i([a.t("pkt-breadcrumbs")],exports.PktBreadcrumbs);

package/dist/pkt-breadcrumbs.js

@@ -0,0 +1,79 @@
+import { P as k, A as l, b as c, n as u, t as d } from "./element-CV9utnHJ.js";
+import "./icon-D0IQAVwS.js";
+var m = Object.defineProperty, o = Object.getOwnPropertyDescriptor, p = (e, t, r, s) => {
+  for (var a = s > 1 ? void 0 : s ? o(t, r) : t, n = e.length - 1, i; n >= 0; n--)
+    (i = e[n]) && (a = (s ? i(t, r, a) : i(a)) || a);
+  return s && a && m(t, r, a), a;
+};
+let b = class extends k {
+  constructor() {
+    super(...arguments), this.breadcrumbs = [];
+  }
+  handleLinkClick(e, t, r) {
+    const s = new CustomEvent("navigate", {
+      detail: { item: t, index: r, originalEvent: e },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    this.dispatchEvent(s) || e.preventDefault();
+  }
+  render() {
+    if (!this.breadcrumbs || this.breadcrumbs.length === 0) return l;
+    const e = this.breadcrumbs[this.breadcrumbs.length - 2];
+    return c`
+      <nav class="pkt-breadcrumbs" aria-label="brødsmulemeny">
+        <ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
+          ${this.breadcrumbs.map(
+      (t, r) => r === this.breadcrumbs.length - 1 ? c`
+                  <li class="pkt-breadcrumbs__item">
+                    <span class="pkt-breadcrumbs__label" aria-current="true">
+                      <span class="pkt-breadcrumbs__text">${t.text}</span>
+                    </span>
+                  </li>
+                ` : c`
+                  <li class="pkt-breadcrumbs__item">
+                    <a
+                      class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
+                      href=${t.href}
+                      @click=${(s) => this.handleLinkClick(s, t, r)}
+                    >
+                      <pkt-icon
+                        class="pkt-icon pkt-breadcrumbs__icon pkt-link__icon"
+                        name="chevron-thin-right"
+                        aria-hidden="true"
+                      ></pkt-icon>
+                      <span class="pkt-breadcrumbs__text">${t.text}</span>
+                    </a>
+                  </li>
+                `
+    )}
+        </ol>
+
+        ${e ? c`
+              <a
+                class="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile"
+                href=${e.href}
+                @click=${(t) => this.handleLinkClick(t, e, this.breadcrumbs.length - 2)}
+              >
+                <pkt-icon
+                  class="pkt-back-link__icon pkt-icon pkt-link__icon"
+                  name="chevron-thin-left"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <span class="pkt-breadcrumbs__text">${e.text}</span>
+              </a>
+            ` : l}
+      </nav>
+    `;
+  }
+};
+p([
+  u({ type: Array })
+], b.prototype, "breadcrumbs", 2);
+b = p([
+  d("pkt-breadcrumbs")
+], b);
+export {
+  b as PktBreadcrumbs
+};

package/dist/pkt-index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./alert-C95U_RZ0.cjs"),t=require("./accordionitem-D7sWqDM_.cjs"),a=require("./backlink-CQoNgoa-.cjs"),P=require("./button-BXN_JPaH.cjs"),i=require("./calendar-43Y_6FD8.cjs"),c=require("./card-DfHo45CG.cjs"),b=require("./combobox-TKL44xnV.cjs"),k=require("./consent-CIhFwuFO.cjs"),d=require("./checkbox-mmn3v9ry.cjs"),r=require("./datepicker-oN9L0Wnm.cjs"),e=require("./pkt-header.cjs"),l=require("./helptext-B366oeR9.cjs"),s=require("./heading-B0XRE0lq.cjs"),p=require("./icon-Dj0oZZSa.cjs"),g=require("./input-wrapper-BdFdJU-k.cjs"),m=require("./link-DLjXMpvi.cjs"),f=require("./linkcard-C20WC6Nw.cjs"),y=require("./loader-DxAGCcNF.cjs"),j=require("./messagebox-B8LW0PSQ.cjs"),O=require("./modal-mWn5pjs8.cjs"),q=require("./progressbar-CC9Qr82_.cjs"),n=require("./radiobutton-BUDQYAH-.cjs"),x=require("./tag-DeE1OpmF.cjs"),o=require("./tabitem-Jenus4Qd.cjs"),T=require("./textarea-DtiYQWjy.cjs"),C=require("./textinput-cKrjvbJW.cjs"),H=require("./select-PuEeK4jQ.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>u.PktAlert});exports.PktAccordion=t.PktAccordion;exports.PktAccordionItem=t.PktAccordionItem_default;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>a.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>P.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>i.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>c.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>b.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>k.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>d.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>r.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>r.PktDatepicker});Object.defineProperty(exports,"PktHeader",{enumerable:!0,get:()=>e.PktHeader});Object.defineProperty(exports,"PktHeaderService",{enumerable:!0,get:()=>e.PktHeaderService});Object.defineProperty(exports,"PktHeaderUserMenu",{enumerable:!0,get:()=>e.PktHeaderUserMenu});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>l.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>s.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>p.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>g.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>m.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>f.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>y.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>j.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>O.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>q.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>n.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>n.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>x.PktTag});exports.PktTabItem=o.PktTabItem_default;exports.PktTabs=o.PktTabs;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>T.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>C.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>H.PktSelect});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./alert-C95U_RZ0.cjs"),t=require("./accordionitem-D7sWqDM_.cjs"),a=require("./backlink-CQoNgoa-.cjs"),P=require("./pkt-breadcrumbs.cjs"),c=require("./button-BXN_JPaH.cjs"),i=require("./calendar-43Y_6FD8.cjs"),b=require("./card-DfHo45CG.cjs"),k=require("./combobox-TKL44xnV.cjs"),d=require("./consent-CIhFwuFO.cjs"),s=require("./checkbox-mmn3v9ry.cjs"),r=require("./datepicker-oN9L0Wnm.cjs"),e=require("./pkt-header.cjs"),l=require("./helptext-B366oeR9.cjs"),p=require("./heading-B0XRE0lq.cjs"),g=require("./icon-Dj0oZZSa.cjs"),m=require("./input-wrapper-BdFdJU-k.cjs"),f=require("./link-DLjXMpvi.cjs"),y=require("./linkcard-C20WC6Nw.cjs"),j=require("./loader-DxAGCcNF.cjs"),O=require("./messagebox-B8LW0PSQ.cjs"),q=require("./modal-mWn5pjs8.cjs"),x=require("./progressbar-CC9Qr82_.cjs"),n=require("./radiobutton-BUDQYAH-.cjs"),T=require("./tag-DeE1OpmF.cjs"),o=require("./tabitem-Jenus4Qd.cjs"),C=require("./textarea-DtiYQWjy.cjs"),H=require("./textinput-cKrjvbJW.cjs"),B=require("./select-PuEeK4jQ.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>u.PktAlert});exports.PktAccordion=t.PktAccordion;exports.PktAccordionItem=t.PktAccordionItem_default;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>a.PktBackLink});Object.defineProperty(exports,"PktBreadcrumbs",{enumerable:!0,get:()=>P.PktBreadcrumbs});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>c.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>i.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>b.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>k.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>d.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>s.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>r.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>r.PktDatepicker});Object.defineProperty(exports,"PktHeader",{enumerable:!0,get:()=>e.PktHeader});Object.defineProperty(exports,"PktHeaderService",{enumerable:!0,get:()=>e.PktHeaderService});Object.defineProperty(exports,"PktHeaderUserMenu",{enumerable:!0,get:()=>e.PktHeaderUserMenu});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>l.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>p.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>g.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>m.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>f.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>y.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>j.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>O.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>q.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>x.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>n.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>n.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>T.PktTag});exports.PktTabItem=o.PktTabItem_default;exports.PktTabs=o.PktTabs;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>C.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>H.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>B.PktSelect});

package/dist/pkt-index.js

@@ -1,62 +1,64 @@
-import { P as r } from "./alert-ca_hFi-u.js";
+import { P as o } from "./alert-ca_hFi-u.js";
 import { P as e, a } from "./accordionitem-Cj74XruR.js";
 import { P as s } from "./backlink-C68H4Z3b.js";
-import { P as x } from "./button-BRovt5nm.js";
-import { P as f } from "./calendar-B5Xwl8mV.js";
-import { P as d } from "./card-DvgCTN4B.js";
-import { P as c } from "./combobox-CwW0md6G.js";
-import { P as u } from "./consent-CgS1L1xF.js";
-import { P as T } from "./checkbox-CbIUMIYt.js";
-import { P as l, a as H } from "./datepicker-qRWWzmbo.js";
-import { PktHeader as L, PktHeaderService as A, PktHeaderUserMenu as B } from "./pkt-header.js";
-import { P as D } from "./helptext-DepcDYFV.js";
-import { P as S } from "./heading-D9R5UBcv.js";
-import { P as v } from "./icon-D0IQAVwS.js";
-import { P as W } from "./input-wrapper-B__6jW4U.js";
-import { P as q } from "./link-oGYvBLYL.js";
-import { P as y } from "./linkcard-BhVIc18n.js";
-import { P as E } from "./loader-BHt9i5Xp.js";
-import { P as G } from "./messagebox-DkspcMQg.js";
-import { P as K } from "./modal-D3u6ueP5.js";
-import { P as O } from "./progressbar-CcX-xiPI.js";
-import { P as V, P as X } from "./radiobutton-RW3h0tJj.js";
-import { P as Z } from "./tag-CIWBLpjv.js";
-import { P as $, a as tt } from "./tabitem-DZSzwag2.js";
-import { P as rt } from "./textarea-DR9lVDN-.js";
-import { P as et } from "./textinput-0Bttvt9V.js";
-import { P as kt } from "./select-iXKeM3yz.js";
+import { PktBreadcrumbs as x } from "./pkt-breadcrumbs.js";
+import { P as f } from "./button-BRovt5nm.js";
+import { P as d } from "./calendar-B5Xwl8mV.js";
+import { P as i } from "./card-DvgCTN4B.js";
+import { P as u } from "./combobox-CwW0md6G.js";
+import { P as T } from "./consent-CgS1L1xF.js";
+import { P as l } from "./checkbox-CbIUMIYt.js";
+import { P as B, a as I } from "./datepicker-qRWWzmbo.js";
+import { PktHeader as A, PktHeaderService as M, PktHeaderUserMenu as D } from "./pkt-header.js";
+import { P as S } from "./helptext-DepcDYFV.js";
+import { P as v } from "./heading-D9R5UBcv.js";
+import { P as W } from "./icon-D0IQAVwS.js";
+import { P as q } from "./input-wrapper-B__6jW4U.js";
+import { P as y } from "./link-oGYvBLYL.js";
+import { P as E } from "./linkcard-BhVIc18n.js";
+import { P as G } from "./loader-BHt9i5Xp.js";
+import { P as K } from "./messagebox-DkspcMQg.js";
+import { P as O } from "./modal-D3u6ueP5.js";
+import { P as V } from "./progressbar-CcX-xiPI.js";
+import { P as Y, P as Z } from "./radiobutton-RW3h0tJj.js";
+import { P as $ } from "./tag-CIWBLpjv.js";
+import { P as rt, a as ot } from "./tabitem-DZSzwag2.js";
+import { P as et } from "./textarea-DR9lVDN-.js";
+import { P as kt } from "./textinput-0Bttvt9V.js";
+import { P as pt } from "./select-iXKeM3yz.js";
 export {
   e as PktAccordion,
   a as PktAccordionItem,
-  r as PktAlert,
+  o as PktAlert,
   s as PktBackLink,
-  x as PktButton,
-  f as PktCalendar,
-  d as PktCard,
-  T as PktCheckbox,
-  c as PktCombobox,
-  u as PktConsent,
-  l as PktDateTags,
-  H as PktDatepicker,
-  L as PktHeader,
-  A as PktHeaderService,
-  B as PktHeaderUserMenu,
-  S as PktHeading,
-  D as PktHelptext,
-  v as PktIcon,
-  W as PktInputWrapper,
-  q as PktLink,
-  y as PktLinkCard,
-  E as PktLoader,
-  G as PktMessagebox,
-  K as PktModal,
-  O as PktProgressbar,
-  V as PktRadioButton,
-  X as PktRadiobutton,
-  kt as PktSelect,
-  $ as PktTabItem,
-  tt as PktTabs,
-  Z as PktTag,
-  rt as PktTextarea,
-  et as PktTextinput
+  x as PktBreadcrumbs,
+  f as PktButton,
+  d as PktCalendar,
+  i as PktCard,
+  l as PktCheckbox,
+  u as PktCombobox,
+  T as PktConsent,
+  B as PktDateTags,
+  I as PktDatepicker,
+  A as PktHeader,
+  M as PktHeaderService,
+  D as PktHeaderUserMenu,
+  v as PktHeading,
+  S as PktHelptext,
+  W as PktIcon,
+  q as PktInputWrapper,
+  y as PktLink,
+  E as PktLinkCard,
+  G as PktLoader,
+  K as PktMessagebox,
+  O as PktModal,
+  V as PktProgressbar,
+  Y as PktRadioButton,
+  Z as PktRadiobutton,
+  pt as PktSelect,
+  rt as PktTabItem,
+  ot as PktTabs,
+  $ as PktTag,
+  et as PktTextarea,
+  kt as PktTextinput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.3.0",
+  "version": "16.5.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -42,7 +42,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^16.0.0",
-    "@oslokommune/punkt-css": "^16.3.0",
+    "@oslokommune/punkt-css": "^16.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
@@ -79,5 +79,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "3561a39e6329e3fc85d558d89cf20b58aa410d24"
+  "gitHead": "81940eb91344498b82fc74316684b452f9fcc82c"
 }

package/src/components/breadcrumbs/breadcrumbs.test.ts

@@ -0,0 +1,208 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
+
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import type { CustomElementFor } from '../../tests/component-registry'
+import './breadcrumbs'
+
+expect.extend(toHaveNoViolations)
+
+interface BreadcrumbsTestConfig extends BaseTestConfig {
+  breadcrumbs?: { text: string; href: string }[]
+}
+
+const defaultBreadcrumbs = [
+  { text: 'Hjem', href: '/' },
+  { text: 'Produkter', href: '/produkter' },
+  { text: 'Detaljer', href: '/produkter/detaljer' },
+]
+
+const createBreadcrumbsTest = async (config: BreadcrumbsTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-breadcrumbs'>,
+    BreadcrumbsTestConfig
+  >('pkt-breadcrumbs', config)
+
+  if (config.breadcrumbs) {
+    element.breadcrumbs = config.breadcrumbs
+    await element.updateComplete
+  }
+
+  return { container, breadcrumbs: element }
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktBreadcrumbs', () => {
+  describe('Rendering', () => {
+    test('renders without errors', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      expect(breadcrumbs).toBeInTheDocument()
+    })
+
+    test('renders all breadcrumb items', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const items = breadcrumbs.querySelectorAll('.pkt-breadcrumbs__item')
+      expect(items).toHaveLength(3)
+    })
+
+    test('renders nothing when breadcrumbs array is empty', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: [] })
+      const nav = breadcrumbs.querySelector('nav')
+      expect(nav).not.toBeInTheDocument()
+    })
+
+    test('renders correctly when breadcrumbs are set as JSON attribute', async () => {
+      const container = document.createElement('div')
+      document.body.appendChild(container)
+      container.innerHTML = `<pkt-breadcrumbs breadcrumbs='${JSON.stringify(defaultBreadcrumbs)}'></pkt-breadcrumbs>`
+
+      const element = container.querySelector('pkt-breadcrumbs') as CustomElementFor<'pkt-breadcrumbs'>
+      await customElements.whenDefined('pkt-breadcrumbs')
+      await element.updateComplete
+
+      const items = element.querySelectorAll('.pkt-breadcrumbs__item')
+      expect(items).toHaveLength(3)
+
+      const links = element.querySelectorAll('.pkt-breadcrumbs__link')
+      expect(links).toHaveLength(2)
+      expect(links[0]).toHaveAttribute('href', '/')
+    })
+
+    test('last item has aria-current and no link', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const items = breadcrumbs.querySelectorAll('.pkt-breadcrumbs__item')
+      const lastItem = items[items.length - 1]
+
+      const span = lastItem.querySelector('[aria-current="true"]')
+      expect(span).toBeInTheDocument()
+
+      const link = lastItem.querySelector('a')
+      expect(link).not.toBeInTheDocument()
+    })
+
+    test('non-last items render as links with correct href', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const links = breadcrumbs.querySelectorAll('.pkt-breadcrumbs__link')
+
+      expect(links).toHaveLength(2)
+      expect(links[0]).toHaveAttribute('href', '/')
+      expect(links[1]).toHaveAttribute('href', '/produkter')
+    })
+
+    test('renders breadcrumb text correctly', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const texts = breadcrumbs.querySelectorAll('.pkt-breadcrumbs__text')
+
+      // 3 desktop + 1 mobile back-link
+      expect(texts).toHaveLength(4)
+      expect(texts[0]).toHaveTextContent('Hjem')
+      expect(texts[1]).toHaveTextContent('Produkter')
+      expect(texts[2]).toHaveTextContent('Detaljer')
+    })
+
+    test('renders desktop list with correct classes', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const list = breadcrumbs.querySelector('.pkt-breadcrumbs--desktop')
+      expect(list).toBeInTheDocument()
+    })
+
+    test('renders mobile back-link pointing to second-to-last item', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const mobileLink = breadcrumbs.querySelector('.pkt-breadcrumbs--mobile')
+
+      expect(mobileLink).toBeInTheDocument()
+      expect(mobileLink).toHaveAttribute('href', '/produkter')
+      expect(mobileLink).toHaveTextContent('Produkter')
+    })
+
+    test('renders chevron-right icons on desktop links', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const desktopIcons = breadcrumbs.querySelectorAll(
+        '.pkt-breadcrumbs--desktop pkt-icon[name="chevron-thin-right"]',
+      )
+      expect(desktopIcons).toHaveLength(2)
+    })
+
+    test('renders chevron-left icon on mobile back-link', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const mobileIcon = breadcrumbs.querySelector(
+        '.pkt-breadcrumbs--mobile pkt-icon[name="chevron-thin-left"]',
+      )
+      expect(mobileIcon).toBeInTheDocument()
+    })
+  })
+
+  describe('Events', () => {
+    test('dispatches navigate event on link click', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const navigateSpy = vi.fn()
+      breadcrumbs.addEventListener('navigate', navigateSpy)
+
+      const link = breadcrumbs.querySelector('.pkt-breadcrumbs__link') as HTMLAnchorElement
+      fireEvent.click(link)
+
+      expect(navigateSpy).toHaveBeenCalledTimes(1)
+      expect(navigateSpy.mock.calls[0][0].detail.item).toEqual({ text: 'Hjem', href: '/' })
+      expect(navigateSpy.mock.calls[0][0].detail.index).toBe(0)
+    })
+
+    test('dispatches navigate event on mobile back-link click', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const navigateSpy = vi.fn()
+      breadcrumbs.addEventListener('navigate', navigateSpy)
+
+      const mobileLink = breadcrumbs.querySelector('.pkt-breadcrumbs--mobile') as HTMLAnchorElement
+      fireEvent.click(mobileLink)
+
+      expect(navigateSpy).toHaveBeenCalledTimes(1)
+      expect(navigateSpy.mock.calls[0][0].detail.item).toEqual({
+        text: 'Produkter',
+        href: '/produkter',
+      })
+      expect(navigateSpy.mock.calls[0][0].detail.index).toBe(1)
+    })
+
+    test('preventDefault on navigate event prevents default link behavior', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      breadcrumbs.addEventListener('navigate', (e: Event) => {
+        e.preventDefault()
+      })
+
+      const link = breadcrumbs.querySelector('.pkt-breadcrumbs__link') as HTMLAnchorElement
+      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true })
+      const preventDefaultSpy = vi.spyOn(clickEvent, 'preventDefault')
+
+      link.dispatchEvent(clickEvent)
+
+      expect(preventDefaultSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has nav with aria-label', async () => {
+      const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const nav = breadcrumbs.querySelector('nav')
+      expect(nav).toHaveAttribute('aria-label', 'brødsmulemeny')
+    })
+
+    test('has no WCAG violations', async () => {
+      // Suppress jsdom "Not implemented: navigation" error triggered by axe-core
+      const originalError = console.error
+      console.error = (...args: unknown[]) => {
+        if (typeof args[0] === 'string' && args[0].includes('Not implemented: navigation')) return
+        originalError(...args)
+      }
+
+      const { container } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+
+      console.error = originalError
+    })
+  })
+})

package/src/components/breadcrumbs/breadcrumbs.ts

@@ -0,0 +1,95 @@
+import { customElement, property } from 'lit/decorators.js'
+import { html, nothing } from 'lit'
+import { PktElement } from '@/base-elements/element'
+
+import '@/components/icon'
+
+export interface IBreadcrumbItem {
+  text: string
+  href: string
+}
+
+export interface IPktBreadcrumbs {
+  breadcrumbs: IBreadcrumbItem[]
+}
+
+@customElement('pkt-breadcrumbs')
+export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
+  @property({ type: Array }) breadcrumbs: IBreadcrumbItem[] = []
+
+  private handleLinkClick(event: MouseEvent, item: IBreadcrumbItem, index: number) {
+    const navigateEvent = new CustomEvent('navigate', {
+      detail: { item, index, originalEvent: event },
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    })
+
+    const dispatched = this.dispatchEvent(navigateEvent)
+
+    // dispatchEvent returnerer false når en lytter kaller preventDefault() på navigate-eventet.
+    // Vi viderefører dette til den opprinnelige klikk-eventen for å hindre nettleseren i å navigere.
+    if (!dispatched) {
+      event.preventDefault()
+    }
+  }
+
+  render() {
+    if (!this.breadcrumbs || this.breadcrumbs.length === 0) return nothing
+
+    const backLink = this.breadcrumbs[this.breadcrumbs.length - 2]
+
+    return html`
+      <nav class="pkt-breadcrumbs" aria-label="brødsmulemeny">
+        <ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
+          ${this.breadcrumbs.map((item, index) =>
+            index === this.breadcrumbs.length - 1
+              ? html`
+                  <li class="pkt-breadcrumbs__item">
+                    <span class="pkt-breadcrumbs__label" aria-current="true">
+                      <span class="pkt-breadcrumbs__text">${item.text}</span>
+                    </span>
+                  </li>
+                `
+              : html`
+                  <li class="pkt-breadcrumbs__item">
+                    <a
+                      class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
+                      href=${item.href}
+                      @click=${(e: MouseEvent) => this.handleLinkClick(e, item, index)}
+                    >
+                      <pkt-icon
+                        class="pkt-icon pkt-breadcrumbs__icon pkt-link__icon"
+                        name="chevron-thin-right"
+                        aria-hidden="true"
+                      ></pkt-icon>
+                      <span class="pkt-breadcrumbs__text">${item.text}</span>
+                    </a>
+                  </li>
+                `,
+          )}
+        </ol>
+
+        ${backLink
+          ? html`
+              <a
+                class="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile"
+                href=${backLink.href}
+                @click=${(e: MouseEvent) =>
+                  this.handleLinkClick(e, backLink, this.breadcrumbs.length - 2)}
+              >
+                <pkt-icon
+                  class="pkt-back-link__icon pkt-icon pkt-link__icon"
+                  name="chevron-thin-left"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <span class="pkt-breadcrumbs__text">${backLink.text}</span>
+              </a>
+            `
+          : nothing}
+      </nav>
+    `
+  }
+}
+
+export default PktBreadcrumbs

package/src/components/breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { PktBreadcrumbs } from './breadcrumbs'
+export type { IBreadcrumbItem, IPktBreadcrumbs } from './breadcrumbs'

package/src/components/index.ts

@@ -2,6 +2,7 @@
 export { PktAlert } from '@/components/alert'
 export { PktAccordion, PktAccordionItem } from '@/components/accordion'
 export { PktBackLink } from '@/components/backlink'
+export { PktBreadcrumbs } from '@/components/breadcrumbs'
 export { PktButton } from '@/components/button'
 export { PktCalendar } from '@/components/calendar'
 export { PktCard } from '@/components/card'
@@ -81,6 +82,8 @@ export type { TSelectOption } from '@/components/select'
 
 export type { IPktBackLink } from '@/components/backlink'
 
+export type { IPktBreadcrumbs, IBreadcrumbItem } from '@/components/breadcrumbs'
+
 export type { IPktLoader, TPktLoaderVariant } from '@/components/loader'
 
 export type { IPktConsent } from '@/components/consent'