@oslokommune/punkt-vue 12.33.0 → 12.34.0

package/CHANGELOG.md

@@ -5,6 +5,32 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.34.0](https://github.com/oslokommune/punkt/compare/12.33.1...12.34.0) (2025-04-16)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Accordion i Punkt Elements (#2327) (#2379). - AccordionItem can now be used standalone 💄📝
+  - Use <slot/> in pkt-accordion instead of SlotController
+  - Add `aria-labelledBy` to provide opportunity to connect a heading to the accordion. 
+  - We no longer need to send in `toggleProps: { isOpen, onToggleClick }` as a object. We pull it out into the interface together with other props. 
+  - Docs and code examples are updated. 
+  
+  ---------
+  
+  Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.32.4](https://github.com/oslokommune/punkt/compare/12.32.3...12.32.4) (2025-04-11)
 
 ### ⚠ BREAKING CHANGES

package/dist/Button-Bm6X0lD8.js

@@ -120,7 +120,7 @@ function _(t, n, e, S, P, r) {
       key: 0,
       class: "pkt-btn__icon pkt-btn__spinner",
       name: "spinner-blue",
-      path: "https://punkt-cdn.oslo.kommune.no/12.33/animations/"
+      path: "https://punkt-cdn.oslo.kommune.no/12.34/animations/"
     })) : l("", !0),
     e.variant !== "label-only" ? (s(), a(i, {
       key: 1,

package/dist/Button-D2xQdpZo.cjs

@@ -1 +1 @@
-"use strict";const o=require("./Icon-BLNK24NN.cjs"),e=require("vue"),r=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),u={name:"PktButton",components:{PktIcon:o.PktIcon},props:{disabled:{type:Boolean,required:!1,default:!1},iconName:{type:String,required:!1,default:"user"},secondIconName:{type:String,required:!1,default:"user"},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},skin:{type:String,default:"primary",validator:t=>["primary","secondary","tertiary"].includes(t)},color:{type:String,validator:t=>["blue","blue-outline","green","green-outline","green-dark","green-dark-outline","beige-light","beige-dark-outline","yellow","yellow-outline","red","red-outline"].includes(t)},text:{type:String,required:!1,default:"Trykk her"},variant:{type:String,default:"label-only",validator:t=>["label-only","icon-left","icon-right","icon-only","icons-right-and-left"].includes(t)},state:{type:String,required:!1,validator:t=>["normal","focus","hover","active"].includes(t)},type:{type:String,default:"button",validator:t=>["button","submit","reset"].includes(t)},isLoading:{type:Boolean,default:!1}},computed:{classes(){return["pkt-btn",this.sizeClass,this.skinClass,this.variantClass,this.colorClass,this.isLoadingClass,this.stateClass]},sizeClass(){return this.size!=="medium"?`pkt-btn--${this.size}`:""},skinClass(){return this.skin!=="primary"?`pkt-btn--${this.skin}`:""},colorClass(){return this.color?`pkt-btn--${this.color}`:""},stateClass(){return this.state?`pkt-btn--${this.state}`:""},variantClass(){return this.variant!=="label-only"?`pkt-btn--${this.variant}`:""},isLoadingClass(){return this.isLoading===!0?"pkt-btn--active":""}}},c=["type","disabled"],d={class:"pkt-btn__text"};function k(t,s,n,p,y,a){const i=e.resolveComponent("PktIcon");return e.openBlock(),e.createElementBlock("button",e.mergeProps(t.$attrs,{type:n.type,class:a.classes,onClick:s[0]||(s[0]=l=>t.$emit("onClick")),onKeyup:s[1]||(s[1]=e.withKeys(l=>t.$emit("onClick"),["enter"])),disabled:n.disabled}),[n.isLoading===!0?(e.openBlock(),e.createBlock(i,{key:0,class:"pkt-btn__icon pkt-btn__spinner",name:"spinner-blue",path:"https://punkt-cdn.oslo.kommune.no/12.33/animations/"})):e.createCommentVNode("",!0),n.variant!=="label-only"?(e.openBlock(),e.createBlock(i,{key:1,class:"pkt-btn__icon",name:n.iconName},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",d,[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(n.text),1)])]),n.variant==="icons-right-and-left"?(e.openBlock(),e.createBlock(i,{key:2,class:"pkt-btn__icon",name:n.secondIconName},null,8,["name"])):e.createCommentVNode("",!0)],16,c)}const m=r._export_sfc(u,[["render",k]]);exports.PktButton=m;
+"use strict";const o=require("./Icon-BLNK24NN.cjs"),e=require("vue"),r=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),u={name:"PktButton",components:{PktIcon:o.PktIcon},props:{disabled:{type:Boolean,required:!1,default:!1},iconName:{type:String,required:!1,default:"user"},secondIconName:{type:String,required:!1,default:"user"},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},skin:{type:String,default:"primary",validator:t=>["primary","secondary","tertiary"].includes(t)},color:{type:String,validator:t=>["blue","blue-outline","green","green-outline","green-dark","green-dark-outline","beige-light","beige-dark-outline","yellow","yellow-outline","red","red-outline"].includes(t)},text:{type:String,required:!1,default:"Trykk her"},variant:{type:String,default:"label-only",validator:t=>["label-only","icon-left","icon-right","icon-only","icons-right-and-left"].includes(t)},state:{type:String,required:!1,validator:t=>["normal","focus","hover","active"].includes(t)},type:{type:String,default:"button",validator:t=>["button","submit","reset"].includes(t)},isLoading:{type:Boolean,default:!1}},computed:{classes(){return["pkt-btn",this.sizeClass,this.skinClass,this.variantClass,this.colorClass,this.isLoadingClass,this.stateClass]},sizeClass(){return this.size!=="medium"?`pkt-btn--${this.size}`:""},skinClass(){return this.skin!=="primary"?`pkt-btn--${this.skin}`:""},colorClass(){return this.color?`pkt-btn--${this.color}`:""},stateClass(){return this.state?`pkt-btn--${this.state}`:""},variantClass(){return this.variant!=="label-only"?`pkt-btn--${this.variant}`:""},isLoadingClass(){return this.isLoading===!0?"pkt-btn--active":""}}},c=["type","disabled"],d={class:"pkt-btn__text"};function k(t,s,n,p,y,a){const i=e.resolveComponent("PktIcon");return e.openBlock(),e.createElementBlock("button",e.mergeProps(t.$attrs,{type:n.type,class:a.classes,onClick:s[0]||(s[0]=l=>t.$emit("onClick")),onKeyup:s[1]||(s[1]=e.withKeys(l=>t.$emit("onClick"),["enter"])),disabled:n.disabled}),[n.isLoading===!0?(e.openBlock(),e.createBlock(i,{key:0,class:"pkt-btn__icon pkt-btn__spinner",name:"spinner-blue",path:"https://punkt-cdn.oslo.kommune.no/12.34/animations/"})):e.createCommentVNode("",!0),n.variant!=="label-only"?(e.openBlock(),e.createBlock(i,{key:1,class:"pkt-btn__icon",name:n.iconName},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",d,[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(n.text),1)])]),n.variant==="icons-right-and-left"?(e.openBlock(),e.createBlock(i,{key:2,class:"pkt-btn__icon",name:n.secondIconName},null,8,["name"])):e.createCommentVNode("",!0)],16,c)}const m=r._export_sfc(u,[["render",k]]);exports.PktButton=m;

package/dist/punkt-vue-accordion.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./plugins-CMydO4oi.cjs"),e=require("vue"),m=require("./Icon-BLNK24NN.cjs"),s=e.defineComponent({__name:"Accordion",props:{className:{},compact:{type:Boolean,default:!1},skin:{default:"borderless"}},setup(n){const t=n;e.watchEffect(()=>{t.skin&&!["borderless","outlined","beige","blue"].includes(t.skin)&&console.warn(`Invalid prop: Expected "skin" to be one of ['borderless', 'outlined', 'beige', 'blue'], but got ${t.skin}`)});const i=e.ref(null),r=e.computed(()=>[t.className,"pkt-accordion",t.compact&&"pkt-accordion--compact",t.skin&&`pkt-accordion--${t.skin}`].filter(Boolean).join(" "));return(a,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.value),ref_key:"accordionRef",ref:i},[e.renderSlot(a.$slots,"default")],2))}}),f=["aria-controls","aria-expanded","id","open"],k=["aria-labelledby","id"],g=["id"],d=e.defineComponent({__name:"AccordionItem",props:{title:{default:""},className:{},id:{},defaultOpen:{type:Boolean,default:!1},toggleProps:{}},setup(n){const t=n;let i=e.ref(t.defaultOpen??!1),r=e.computed(()=>{var o;return((o=t.toggleProps)==null?void 0:o.isOpen)??i.value});const a=o=>o??void 0,l=o=>{o.preventDefault(),t.toggleProps!==void 0&&t.toggleProps.onToggleClick(t.id),i.value=!r.value},u=e.computed(()=>[t.className,"pkt-accordion-item",{"pkt-accordion-item--open":r.value}]);return(o,_)=>(e.openBlock(),e.createElementBlock("details",{"aria-controls":`pkt-accordion-item-content-${o.id}`,"aria-expanded":e.unref(r),class:e.normalizeClass(u.value),id:`pkt-accordion-item-header-${o.id}`,open:o.toggleProps?a(o.toggleProps.isOpen):a(e.unref(i))},[e.createElementVNode("summary",{"aria-labelledby":`pkt-accordion-item-header-${o.id}`,class:"pkt-accordion-item__title",id:`pkt-accordion-item-summary-${o.id}`,onClick:l},[e.createTextVNode(e.toDisplayString(o.title)+" ",1),e.createVNode(m.PktIcon,{name:"chevron-thin-down",class:"pkt-accordion-item__icon","aria-hidden":"true"})],8,k),e.createElementVNode("div",{id:`pkt-accordion-item-content-${o.id}`,role:"region",class:"pkt-accordion-item__content"},[e.renderSlot(o.$slots,"default")],8,g)],10,f))}}),p={install(n){c.registerComponent(n,s),c.registerComponent(n,d)}};c.use(p);exports.PktAccordion=s;exports.PktAccordionItem=d;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./plugins-CMydO4oi.cjs"),e=require("vue"),m=require("./Icon-BLNK24NN.cjs"),l=e.defineComponent({__name:"Accordion",props:{className:{},compact:{type:Boolean,default:!1},skin:{default:"borderless"}},setup(n){const o=n;e.watchEffect(()=>{o.skin&&!["borderless","outlined","beige","blue"].includes(o.skin)&&console.warn(`Invalid prop: Expected "skin" to be one of ['borderless', 'outlined', 'beige', 'blue'], but got ${o.skin}`)});const i=e.ref(null),a=e.computed(()=>[o.className,"pkt-accordion",o.compact&&"pkt-accordion--compact",o.skin&&`pkt-accordion--${o.skin}`].filter(Boolean).join(" "));return(c,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a.value),ref_key:"accordionRef",ref:i},[e.renderSlot(c.$slots,"default")],2))}}),k=["aria-controls","aria-expanded","id","open"],f=["aria-labelledby","id"],g=["id"],d=e.defineComponent({__name:"AccordionItem",props:{title:{default:""},className:{},id:{},defaultOpen:{type:Boolean,default:!1},toggleProps:{},skin:{},compact:{type:Boolean}},setup(n){const o=n;let i=e.ref(o.defaultOpen??!1),a=e.computed(()=>{var t;return((t=o.toggleProps)==null?void 0:t.isOpen)??i.value});const c=t=>t??void 0,s=t=>{t.preventDefault(),o.toggleProps!==void 0&&o.toggleProps.onToggleClick(o.id),i.value=!a.value},u=e.computed(()=>[o.className,"pkt-accordion-item",o.skin&&`pkt-accordion-item--${o.skin}`,o.compact&&"pkt-accordion-item--compact",{"pkt-accordion-item--open":a.value}]);return(t,_)=>(e.openBlock(),e.createElementBlock("details",{"aria-controls":`pkt-accordion-item-content-${t.id}`,"aria-expanded":e.unref(a),class:e.normalizeClass(u.value),id:`pkt-accordion-item-header-${t.id}`,open:t.toggleProps?c(t.toggleProps.isOpen):c(e.unref(i))},[e.createElementVNode("summary",{"aria-labelledby":`pkt-accordion-item-header-${t.id}`,class:"pkt-accordion-item__title",id:`pkt-accordion-item-summary-${t.id}`,onClick:s},[e.createTextVNode(e.toDisplayString(t.title)+" ",1),e.createVNode(m.PktIcon,{name:"chevron-thin-down",class:"pkt-accordion-item__icon","aria-hidden":"true"})],8,f),e.createElementVNode("div",{id:`pkt-accordion-item-content-${t.id}`,role:"region",class:"pkt-accordion-item__content"},[e.renderSlot(t.$slots,"default")],8,g)],10,k))}}),p={install(n){r.registerComponent(n,l),r.registerComponent(n,d)}};r.use(p);exports.PktAccordion=l;exports.PktAccordionItem=d;exports.default=p;

package/dist/punkt-vue-accordion.js

@@ -1,5 +1,5 @@
-import { u as b, a as c } from "./plugins-DQVoaMd9.js";
-import { defineComponent as p, watchEffect as v, ref as m, computed as r, createElementBlock as u, openBlock as f, normalizeClass as k, renderSlot as g, unref as l, createElementVNode as d, createTextVNode as h, createVNode as P, toDisplayString as $ } from "vue";
+import { u as b, a as r } from "./plugins-DQVoaMd9.js";
+import { defineComponent as p, watchEffect as v, ref as m, computed as c, createElementBlock as u, openBlock as k, normalizeClass as f, renderSlot as g, unref as l, createElementVNode as d, createTextVNode as h, createVNode as P, toDisplayString as $ } from "vue";
 import { P as y } from "./Icon-Z84h32lN.js";
 const C = /* @__PURE__ */ p({
   __name: "Accordion",
@@ -9,87 +9,91 @@ const C = /* @__PURE__ */ p({
     skin: { default: "borderless" }
   },
   setup(t) {
-    const o = t;
+    const e = t;
     v(() => {
-      o.skin && !["borderless", "outlined", "beige", "blue"].includes(o.skin) && console.warn(
-        `Invalid prop: Expected "skin" to be one of ['borderless', 'outlined', 'beige', 'blue'], but got ${o.skin}`
+      e.skin && !["borderless", "outlined", "beige", "blue"].includes(e.skin) && console.warn(
+        `Invalid prop: Expected "skin" to be one of ['borderless', 'outlined', 'beige', 'blue'], but got ${e.skin}`
       );
     });
-    const n = m(null), a = r(() => [
-      o.className,
+    const n = m(null), a = c(() => [
+      e.className,
       "pkt-accordion",
-      o.compact && "pkt-accordion--compact",
-      o.skin && `pkt-accordion--${o.skin}`
+      e.compact && "pkt-accordion--compact",
+      e.skin && `pkt-accordion--${e.skin}`
     ].filter(Boolean).join(" "));
-    return (i, s) => (f(), u("div", {
-      class: k(a.value),
+    return (i, s) => (k(), u("div", {
+      class: f(a.value),
       ref_key: "accordionRef",
       ref: n
     }, [
       g(i.$slots, "default")
     ], 2));
   }
-}), N = ["aria-controls", "aria-expanded", "id", "open"], I = ["aria-labelledby", "id"], O = ["id"], B = /* @__PURE__ */ p({
+}), N = ["aria-controls", "aria-expanded", "id", "open"], B = ["aria-labelledby", "id"], I = ["id"], O = /* @__PURE__ */ p({
   __name: "AccordionItem",
   props: {
     title: { default: "" },
     className: {},
     id: {},
     defaultOpen: { type: Boolean, default: !1 },
-    toggleProps: {}
+    toggleProps: {},
+    skin: {},
+    compact: { type: Boolean }
   },
   setup(t) {
-    const o = t;
-    let n = m(o.defaultOpen ?? !1), a = r(() => {
-      var e;
-      return ((e = o.toggleProps) == null ? void 0 : e.isOpen) ?? n.value;
+    const e = t;
+    let n = m(e.defaultOpen ?? !1), a = c(() => {
+      var o;
+      return ((o = e.toggleProps) == null ? void 0 : o.isOpen) ?? n.value;
     });
-    const i = (e) => e ?? void 0, s = (e) => {
-      e.preventDefault(), o.toggleProps !== void 0 && o.toggleProps.onToggleClick(o.id), n.value = !a.value;
-    }, _ = r(() => [
-      o.className,
+    const i = (o) => o ?? void 0, s = (o) => {
+      o.preventDefault(), e.toggleProps !== void 0 && e.toggleProps.onToggleClick(e.id), n.value = !a.value;
+    }, _ = c(() => [
+      e.className,
       "pkt-accordion-item",
+      e.skin && `pkt-accordion-item--${e.skin}`,
+      e.compact && "pkt-accordion-item--compact",
       {
         "pkt-accordion-item--open": a.value
       }
     ]);
-    return (e, A) => (f(), u("details", {
-      "aria-controls": `pkt-accordion-item-content-${e.id}`,
+    return (o, A) => (k(), u("details", {
+      "aria-controls": `pkt-accordion-item-content-${o.id}`,
       "aria-expanded": l(a),
-      class: k(_.value),
-      id: `pkt-accordion-item-header-${e.id}`,
-      open: e.toggleProps ? i(e.toggleProps.isOpen) : i(l(n))
+      class: f(_.value),
+      id: `pkt-accordion-item-header-${o.id}`,
+      open: o.toggleProps ? i(o.toggleProps.isOpen) : i(l(n))
     }, [
       d("summary", {
-        "aria-labelledby": `pkt-accordion-item-header-${e.id}`,
+        "aria-labelledby": `pkt-accordion-item-header-${o.id}`,
         class: "pkt-accordion-item__title",
-        id: `pkt-accordion-item-summary-${e.id}`,
+        id: `pkt-accordion-item-summary-${o.id}`,
         onClick: s
       }, [
-        h($(e.title) + " ", 1),
+        h($(o.title) + " ", 1),
         P(y, {
           name: "chevron-thin-down",
           class: "pkt-accordion-item__icon",
           "aria-hidden": "true"
         })
-      ], 8, I),
+      ], 8, B),
       d("div", {
-        id: `pkt-accordion-item-content-${e.id}`,
+        id: `pkt-accordion-item-content-${o.id}`,
         role: "region",
         class: "pkt-accordion-item__content"
       }, [
-        g(e.$slots, "default")
-      ], 8, O)
+        g(o.$slots, "default")
+      ], 8, I)
     ], 10, N));
   }
 }), T = {
   install(t) {
-    c(t, C), c(t, B);
+    r(t, C), r(t, O);
   }
 };
 b(T);
 export {
   C as PktAccordion,
-  B as PktAccordionItem,
+  O as PktAccordionItem,
   T as default
 };

package/dist/punkt-vue-header.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./Icon-BLNK24NN.cjs"),V=require("./Button-D2xQdpZo.cjs"),e=require("vue"),E=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),B=require("./plugins-CMydO4oi.cjs"),b={name:"PktHeader",components:{PktIcon:f.PktIcon,PktButton:V.PktButton},data(){return{hidden:!1,userMenuOpen:!1,userMenuClickInside:!1,lastScrollPosition:0}},props:{logoLink:{type:[String,Function],required:!1,default:"https://www.oslo.kommune.no/"},serviceName:{type:String,required:!1},fixed:{type:Boolean,default:!0},scrollToHide:{type:Boolean,default:!0},user:{type:Object,required:!1},userMenu:{type:Array,required:!1},representing:{type:Object,required:!1},userOptions:{type:Array,required:!1},userMenuFooter:{type:Array,required:!1},canChangeRepresentation:{type:Boolean,default:!0},showMenuButton:{type:Boolean,default:!1},showLogOutButton:{type:Boolean,default:!1}},computed:{lastLoggedIn(){return typeof this.user.lastLoggedIn=="string"?this.user.lastLoggedIn:user!=null&&user.lastLoggedIn?new Date(this.user.lastLoggedIn).toLocaleString("nb-NO",{year:"numeric",month:"long",day:"numeric"}):""}},methods:{openUserMenu(){this.userMenuOpen=!this.userMenuOpen},clickOutside(l){var o;(o=this.$refs.userMenu)!=null&&o.contains(l.target)||(this.userMenuOpen=!1)},onScroll(){if(this.scrollToHide){const l=window.pageYOffset||document.documentElement.scrollTop;if(l<0||Math.abs(l-this.lastScrollPosition)<60)return;this.hidden=l>this.lastScrollPosition,this.lastScrollPosition=l}}},watch:{hidden(l){l&&(this.userMenuOpen=!1)}},created(){this.__handlerRef__=this.clickOutside.bind(this),document.body.addEventListener("click",this.__handlerRef__),window.addEventListener("scroll",this.onScroll)},unmounted(){document.body.removeEventListener("click",this.__handlerRef__),window.removeEventListener("scroll",this.onScroll)}},C={class:"pkt-header__logo"},v=["href"],M={key:2,class:"pkt-header__logo-service",translate:"no"},O={class:"pkt-header__actions"},w={class:"pkt-header__actions-row"},S={key:0},L=["aria-expanded"],x={key:0,class:"pkt-header__user-fullname pkt-btn__text",translate:"no"},P={key:1,class:"pkt-header__user-shortname pkt-btn__text",translate:"no"},T={id:"pktUserDropdown",class:"pkt-header__dropdown pkt-user-menu"},D={key:0},I={class:"pkt-user-menu__name",translate:"no"},q={key:0,class:"pkt-user-menu__last-logged-in"},F={key:1},R={class:"pkt-list"},H=["href"],U=["onClick"],j={key:2},z={class:"pkt-user-menu__name",translate:"no"},A={key:0,class:"pkt-user-menu__org-number"},Y={class:"pkt-list mt-size-16"},G={key:0,class:"pkt-list"},J=["href"],K={key:0},Q={key:3,class:"footer"},W={class:"pkt-list-horizontal bordered"},X=["href"],Z=["onClick"],$={key:2};function ee(l,o,t,te,a,i){var k,u,d,m,p,g,_,h;const r=e.resolveComponent("PktIcon"),c=e.resolveComponent("PktButton");return e.openBlock(),e.createElementBlock("header",{id:"pkt-header","aria-label":"Topp",class:e.normalizeClass({"pkt-header":!0,"pkt-header--fixed":t.fixed,"pkt-header--scroll-to-hide":t.scrollToHide,"pkt-header--hidden":a.hidden})},[e.createElementVNode("div",C,[typeof t.logoLink=="string"?(e.openBlock(),e.createElementBlock("a",{key:0,"aria-label":"Tilbake til forside",class:"pkt-header__logo-link",href:t.logoLink},[e.createVNode(r,{name:"oslologo",class:"pkt-header__logo-svg","aria-hidden":"true",path:"https://punkt-cdn.oslo.kommune.no/12.33/logos/"})],8,v)):(e.openBlock(),e.createElementBlock("button",{key:1,"aria-label":"Tilbake til forside",class:"pkt-link-button pkt-link pkt-header__logo-link",onClick:o[0]||(o[0]=(...n)=>t.logoLink&&t.logoLink(...n))},[e.createVNode(r,{name:"oslologo",class:"pkt-header__logo-svg","aria-hidden":"true",path:"https://punkt-cdn.oslo.kommune.no/12.33/logos/"})])),t.serviceName?(e.openBlock(),e.createElementBlock("span",M,e.toDisplayString(t.serviceName),1)):e.createCommentVNode("",!0)]),e.createElementVNode("nav",O,[e.createElementVNode("ul",w,[t.showMenuButton?(e.openBlock(),e.createElementBlock("li",S,[e.createVNode(c,{class:"pkt-header__menu-btn",skin:"secondary",variant:"icon-right",iconName:"menu",onOnClick:o[1]||(o[1]=n=>l.$emit("openMenu"))},{default:e.withCtx(()=>o[7]||(o[7]=[e.createTextVNode("Meny")])),_:1})])):e.createCommentVNode("",!0),t.user||t.representing?(e.openBlock(),e.createElementBlock("li",{key:1,class:e.normalizeClass(["pkt-header--has-dropdown",{"pkt-header--open-dropdown":a.userMenuOpen}]),ref:"userMenu"},[e.createElementVNode("button",{class:"pkt-header__user-btn pkt-btn pkt-btn--secondary pkt-btn--icons-right-and-left",type:"button","aria-controls":"pktUserDropdown","aria-expanded":a.userMenuOpen,onClick:o[2]||(o[2]=(...n)=>i.openUserMenu&&i.openUserMenu(...n))},[e.createVNode(r,{name:"user",class:"pkt-btn__icon"}),(k=t.representing)!=null&&k.name||(u=t.user)!=null&&u.name?(e.openBlock(),e.createElementBlock("span",x,e.toDisplayString(((d=t.representing)==null?void 0:d.name)||((m=t.user)==null?void 0:m.name)),1)):e.createCommentVNode("",!0),(p=t.representing)!=null&&p.shortname||(g=t.user)!=null&&g.shortname?(e.openBlock(),e.createElementBlock("span",P,e.toDisplayString(((_=t.representing)==null?void 0:_.shortname)||((h=t.user)==null?void 0:h.shortname)),1)):e.createCommentVNode("",!0),e.createVNode(r,{name:"chevron-thin-down",class:"pkt-btn--closed"}),e.createVNode(r,{name:"chevron-thin-up",class:"pkt-btn--open"})],8,L),e.createElementVNode("ul",T,[t.user?(e.openBlock(),e.createElementBlock("li",D,[o[9]||(o[9]=e.createElementVNode("div",{class:"pkt-user-menu__label"},"Pålogget som",-1)),e.createElementVNode("div",I,e.toDisplayString(t.user.name),1),t.user.lastLoggedIn?(e.openBlock(),e.createElementBlock("div",q,[o[8]||(o[8]=e.createTextVNode(" Sist pålogget: ")),e.createElementVNode("time",null,e.toDisplayString(i.lastLoggedIn),1)])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),t.userMenu?(e.openBlock(),e.createElementBlock("li",F,[e.createElementVNode("ul",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.userMenu,(n,s)=>(e.openBlock(),e.createElementBlock("li",{key:`userMenu-${s}`},[typeof n.target=="string"?(e.openBlock(),e.createElementBlock("a",{key:0,href:n.target,class:"pkt-link"},[n.iconName?(e.openBlock(),e.createBlock(r,{key:0,name:n.iconName,class:"pkt-link__icon"},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(n.title),1)],8,H)):(e.openBlock(),e.createElementBlock("button",{key:1,class:"pkt-link-button pkt-link",onClick:n.target},[n.iconName?(e.openBlock(),e.createBlock(r,{key:0,name:n.iconName,class:"pkt-link__icon"},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(n.title),1)],8,U))]))),128))])])):e.createCommentVNode("",!0),t.representing||t.canChangeRepresentation?(e.openBlock(),e.createElementBlock("li",j,[t.representing?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[o[10]||(o[10]=e.createElementVNode("div",{class:"pkt-user-menu__label"},"Representerer",-1)),e.createElementVNode("div",z,e.toDisplayString(t.representing.name),1),t.representing.orgNumber?(e.openBlock(),e.createElementBlock("div",A," Org.nr. "+e.toDisplayString(t.representing.orgNumber),1)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0),e.createElementVNode("ul",Y,[e.createElementVNode("li",null,[t.canChangeRepresentation?(e.openBlock(),e.createElementBlock("button",{key:0,class:"pkt-link-button pkt-link",onClick:o[3]||(o[3]=n=>l.$emit("changeRepresentation"))},[e.createVNode(r,{name:"cogwheel",class:"pkt-link__icon"}),o[11]||(o[11]=e.createTextVNode(" Endre organisasjon "))])):e.createCommentVNode("",!0)])])])):e.createCommentVNode("",!0),e.createElementVNode("li",null,[t.userOptions||!t.showLogOutButton?(e.openBlock(),e.createElementBlock("ul",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.userOptions,(n,s)=>(e.openBlock(),e.createElementBlock("li",{key:`userOptions-${s}`},[typeof n.target=="string"?(e.openBlock(),e.createElementBlock("a",{key:0,href:n.target,class:"pkt-link"},[n.iconName?(e.openBlock(),e.createBlock(r,{key:0,name:n.iconName,class:"pkt-link__icon"},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(n.title),1)],8,J)):(e.openBlock(),e.createElementBlock("button",{key:1,class:"pkt-link-button pkt-link",onClick:o[4]||(o[4]=ne=>l.$emit("logOut"))},[n.iconName?(e.openBlock(),e.createBlock(r,{key:0,name:n.iconName,class:"pkt-link__icon"},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(n.title),1)]))]))),128)),t.showLogOutButton?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("li",K,[e.createElementVNode("button",{class:"pkt-link-button pkt-link",onClick:o[5]||(o[5]=n=>l.$emit("logOut"))},[e.createVNode(r,{name:"exit",class:"pkt-link__icon"}),o[12]||(o[12]=e.createTextVNode(" Logg ut "))])]))])):e.createCommentVNode("",!0)]),t.userMenuFooter?(e.openBlock(),e.createElementBlock("li",Q,[e.createElementVNode("ul",W,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.userMenuFooter,(n,s)=>(e.openBlock(),e.createElementBlock("li",{key:`userMenuFooter-${s}`},[typeof n.target=="string"?(e.openBlock(),e.createElementBlock("a",{key:0,href:n.target,class:"pkt-link"},e.toDisplayString(n.title),9,X)):(e.openBlock(),e.createElementBlock("button",{key:1,class:"pkt-link-button pkt-link",onClick:n.target},e.toDisplayString(n.title),9,Z))]))),128))])])):e.createCommentVNode("",!0)])],2)):e.createCommentVNode("",!0),t.showLogOutButton?(e.openBlock(),e.createElementBlock("li",$,[e.createVNode(c,{class:"pkt-header__user-btn pkt-header__user-btn-logout",iconName:"exit",onOnClick:o[6]||(o[6]=n=>l.$emit("logOut")),skin:"secondary",variant:"icon-right"},{default:e.withCtx(()=>o[13]||(o[13]=[e.createTextVNode(" Logg ut ")])),_:1})])):e.createCommentVNode("",!0)])])],2)}const y=E._export_sfc(b,[["render",ee]]),N={install(l){B.registerComponent(l,y)}};B.use(N);exports.PktHeader=y;exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./Icon-BLNK24NN.cjs"),V=require("./Button-D2xQdpZo.cjs"),e=require("vue"),E=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),B=require("./plugins-CMydO4oi.cjs"),b={name:"PktHeader",components:{PktIcon:f.PktIcon,PktButton:V.PktButton},data(){return{hidden:!1,userMenuOpen:!1,userMenuClickInside:!1,lastScrollPosition:0}},props:{logoLink:{type:[String,Function],required:!1,default:"https://www.oslo.kommune.no/"},serviceName:{type:String,required:!1},fixed:{type:Boolean,default:!0},scrollToHide:{type:Boolean,default:!0},user:{type:Object,required:!1},userMenu:{type:Array,required:!1},representing:{type:Object,required:!1},userOptions:{type:Array,required:!1},userMenuFooter:{type:Array,required:!1},canChangeRepresentation:{type:Boolean,default:!0},showMenuButton:{type:Boolean,default:!1},showLogOutButton:{type:Boolean,default:!1}},computed:{lastLoggedIn(){return typeof this.user.lastLoggedIn=="string"?this.user.lastLoggedIn:user!=null&&user.lastLoggedIn?new Date(this.user.lastLoggedIn).toLocaleString("nb-NO",{year:"numeric",month:"long",day:"numeric"}):""}},methods:{openUserMenu(){this.userMenuOpen=!this.userMenuOpen},clickOutside(l){var o;(o=this.$refs.userMenu)!=null&&o.contains(l.target)||(this.userMenuOpen=!1)},onScroll(){if(this.scrollToHide){const l=window.pageYOffset||document.documentElement.scrollTop;if(l<0||Math.abs(l-this.lastScrollPosition)<60)return;this.hidden=l>this.lastScrollPosition,this.lastScrollPosition=l}}},watch:{hidden(l){l&&(this.userMenuOpen=!1)}},created(){this.__handlerRef__=this.clickOutside.bind(this),document.body.addEventListener("click",this.__handlerRef__),window.addEventListener("scroll",this.onScroll)},unmounted(){document.body.removeEventListener("click",this.__handlerRef__),window.removeEventListener("scroll",this.onScroll)}},C={class:"pkt-header__logo"},v=["href"],M={key:2,class:"pkt-header__logo-service",translate:"no"},O={class:"pkt-header__actions"},w={class:"pkt-header__actions-row"},S={key:0},L=["aria-expanded"],x={key:0,class:"pkt-header__user-fullname pkt-btn__text",translate:"no"},P={key:1,class:"pkt-header__user-shortname pkt-btn__text",translate:"no"},T={id:"pktUserDropdown",class:"pkt-header__dropdown pkt-user-menu"},D={key:0},I={class:"pkt-user-menu__name",translate:"no"},q={key:0,class:"pkt-user-menu__last-logged-in"},F={key:1},R={class:"pkt-list"},H=["href"],U=["onClick"],j={key:2},z={class:"pkt-user-menu__name",translate:"no"},A={key:0,class:"pkt-user-menu__org-number"},Y={class:"pkt-list mt-size-16"},G={key:0,class:"pkt-list"},J=["href"],K={key:0},Q={key:3,class:"footer"},W={class:"pkt-list-horizontal bordered"},X=["href"],Z=["onClick"],$={key:2};function ee(l,o,t,te,a,i){var k,u,d,m,p,g,_,h;const r=e.resolveComponent("PktIcon"),c=e.resolveComponent("PktButton");return e.openBlock(),e.createElementBlock("header",{id:"pkt-header","aria-label":"Topp",class:e.normalizeClass({"pkt-header":!0,"pkt-header--fixed":t.fixed,"pkt-header--scroll-to-hide":t.scrollToHide,"pkt-header--hidden":a.hidden})},[e.createElementVNode("div",C,[typeof t.logoLink=="string"?(e.openBlock(),e.createElementBlock("a",{key:0,"aria-label":"Tilbake til forside",class:"pkt-header__logo-link",href:t.logoLink},[e.createVNode(r,{name:"oslologo",class:"pkt-header__logo-svg","aria-hidden":"true",path:"https://punkt-cdn.oslo.kommune.no/12.34/logos/"})],8,v)):(e.openBlock(),e.createElementBlock("button",{key:1,"aria-label":"Tilbake til forside",class:"pkt-link-button pkt-link pkt-header__logo-link",onClick:o[0]||(o[0]=(...n)=>t.logoLink&&t.logoLink(...n))},[e.createVNode(r,{name:"oslologo",class:"pkt-header__logo-svg","aria-hidden":"true",path:"https://punkt-cdn.oslo.kommune.no/12.34/logos/"})])),t.serviceName?(e.openBlock(),e.createElementBlock("span",M,e.toDisplayString(t.serviceName),1)):e.createCommentVNode("",!0)]),e.createElementVNode("nav",O,[e.createElementVNode("ul",w,[t.showMenuButton?(e.openBlock(),e.createElementBlock("li",S,[e.createVNode(c,{class:"pkt-header__menu-btn",skin:"secondary",variant:"icon-right",iconName:"menu",onOnClick:o[1]||(o[1]=n=>l.$emit("openMenu"))},{default:e.withCtx(()=>o[7]||(o[7]=[e.createTextVNode("Meny")])),_:1})])):e.createCommentVNode("",!0),t.user||t.representing?(e.openBlock(),e.createElementBlock("li",{key:1,class:e.normalizeClass(["pkt-header--has-dropdown",{"pkt-header--open-dropdown":a.userMenuOpen}]),ref:"userMenu"},[e.createElementVNode("button",{class:"pkt-header__user-btn pkt-btn pkt-btn--secondary pkt-btn--icons-right-and-left",type:"button","aria-controls":"pktUserDropdown","aria-expanded":a.userMenuOpen,onClick:o[2]||(o[2]=(...n)=>i.openUserMenu&&i.openUserMenu(...n))},[e.createVNode(r,{name:"user",class:"pkt-btn__icon"}),(k=t.representing)!=null&&k.name||(u=t.user)!=null&&u.name?(e.openBlock(),e.createElementBlock("span",x,e.toDisplayString(((d=t.representing)==null?void 0:d.name)||((m=t.user)==null?void 0:m.name)),1)):e.createCommentVNode("",!0),(p=t.representing)!=null&&p.shortname||(g=t.user)!=null&&g.shortname?(e.openBlock(),e.createElementBlock("span",P,e.toDisplayString(((_=t.representing)==null?void 0:_.shortname)||((h=t.user)==null?void 0:h.shortname)),1)):e.createCommentVNode("",!0),e.createVNode(r,{name:"chevron-thin-down",class:"pkt-btn--closed"}),e.createVNode(r,{name:"chevron-thin-up",class:"pkt-btn--open"})],8,L),e.createElementVNode("ul",T,[t.user?(e.openBlock(),e.createElementBlock("li",D,[o[9]||(o[9]=e.createElementVNode("div",{class:"pkt-user-menu__label"},"Pålogget som",-1)),e.createElementVNode("div",I,e.toDisplayString(t.user.name),1),t.user.lastLoggedIn?(e.openBlock(),e.createElementBlock("div",q,[o[8]||(o[8]=e.createTextVNode(" Sist pålogget: ")),e.createElementVNode("time",null,e.toDisplayString(i.lastLoggedIn),1)])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),t.userMenu?(e.openBlock(),e.createElementBlock("li",F,[e.createElementVNode("ul",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.userMenu,(n,s)=>(e.openBlock(),e.createElementBlock("li",{key:`userMenu-${s}`},[typeof n.target=="string"?(e.openBlock(),e.createElementBlock("a",{key:0,href:n.target,class:"pkt-link"},[n.iconName?(e.openBlock(),e.createBlock(r,{key:0,name:n.iconName,class:"pkt-link__icon"},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(n.title),1)],8,H)):(e.openBlock(),e.createElementBlock("button",{key:1,class:"pkt-link-button pkt-link",onClick:n.target},[n.iconName?(e.openBlock(),e.createBlock(r,{key:0,name:n.iconName,class:"pkt-link__icon"},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(n.title),1)],8,U))]))),128))])])):e.createCommentVNode("",!0),t.representing||t.canChangeRepresentation?(e.openBlock(),e.createElementBlock("li",j,[t.representing?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[o[10]||(o[10]=e.createElementVNode("div",{class:"pkt-user-menu__label"},"Representerer",-1)),e.createElementVNode("div",z,e.toDisplayString(t.representing.name),1),t.representing.orgNumber?(e.openBlock(),e.createElementBlock("div",A," Org.nr. "+e.toDisplayString(t.representing.orgNumber),1)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0),e.createElementVNode("ul",Y,[e.createElementVNode("li",null,[t.canChangeRepresentation?(e.openBlock(),e.createElementBlock("button",{key:0,class:"pkt-link-button pkt-link",onClick:o[3]||(o[3]=n=>l.$emit("changeRepresentation"))},[e.createVNode(r,{name:"cogwheel",class:"pkt-link__icon"}),o[11]||(o[11]=e.createTextVNode(" Endre organisasjon "))])):e.createCommentVNode("",!0)])])])):e.createCommentVNode("",!0),e.createElementVNode("li",null,[t.userOptions||!t.showLogOutButton?(e.openBlock(),e.createElementBlock("ul",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.userOptions,(n,s)=>(e.openBlock(),e.createElementBlock("li",{key:`userOptions-${s}`},[typeof n.target=="string"?(e.openBlock(),e.createElementBlock("a",{key:0,href:n.target,class:"pkt-link"},[n.iconName?(e.openBlock(),e.createBlock(r,{key:0,name:n.iconName,class:"pkt-link__icon"},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(n.title),1)],8,J)):(e.openBlock(),e.createElementBlock("button",{key:1,class:"pkt-link-button pkt-link",onClick:o[4]||(o[4]=ne=>l.$emit("logOut"))},[n.iconName?(e.openBlock(),e.createBlock(r,{key:0,name:n.iconName,class:"pkt-link__icon"},null,8,["name"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(n.title),1)]))]))),128)),t.showLogOutButton?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("li",K,[e.createElementVNode("button",{class:"pkt-link-button pkt-link",onClick:o[5]||(o[5]=n=>l.$emit("logOut"))},[e.createVNode(r,{name:"exit",class:"pkt-link__icon"}),o[12]||(o[12]=e.createTextVNode(" Logg ut "))])]))])):e.createCommentVNode("",!0)]),t.userMenuFooter?(e.openBlock(),e.createElementBlock("li",Q,[e.createElementVNode("ul",W,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.userMenuFooter,(n,s)=>(e.openBlock(),e.createElementBlock("li",{key:`userMenuFooter-${s}`},[typeof n.target=="string"?(e.openBlock(),e.createElementBlock("a",{key:0,href:n.target,class:"pkt-link"},e.toDisplayString(n.title),9,X)):(e.openBlock(),e.createElementBlock("button",{key:1,class:"pkt-link-button pkt-link",onClick:n.target},e.toDisplayString(n.title),9,Z))]))),128))])])):e.createCommentVNode("",!0)])],2)):e.createCommentVNode("",!0),t.showLogOutButton?(e.openBlock(),e.createElementBlock("li",$,[e.createVNode(c,{class:"pkt-header__user-btn pkt-header__user-btn-logout",iconName:"exit",onOnClick:o[6]||(o[6]=n=>l.$emit("logOut")),skin:"secondary",variant:"icon-right"},{default:e.withCtx(()=>o[13]||(o[13]=[e.createTextVNode(" Logg ut ")])),_:1})])):e.createCommentVNode("",!0)])])],2)}const y=E._export_sfc(b,[["render",ee]]),N={install(l){B.registerComponent(l,y)}};B.use(N);exports.PktHeader=y;exports.default=N;

package/dist/punkt-vue-header.js

@@ -168,7 +168,7 @@ function ke(l, s, e, he, g, m) {
           name: "oslologo",
           class: "pkt-header__logo-svg",
           "aria-hidden": "true",
-          path: "https://punkt-cdn.oslo.kommune.no/12.33/logos/"
+          path: "https://punkt-cdn.oslo.kommune.no/12.34/logos/"
         })
       ], 8, F)) : (t(), o("button", {
         key: 1,
@@ -180,7 +180,7 @@ function ke(l, s, e, he, g, m) {
           name: "oslologo",
           class: "pkt-header__logo-svg",
           "aria-hidden": "true",
-          path: "https://punkt-cdn.oslo.kommune.no/12.33/logos/"
+          path: "https://punkt-cdn.oslo.kommune.no/12.34/logos/"
         })
       ])),
       e.serviceName ? (t(), o("span", H, a(e.serviceName), 1)) : r("", !0)

package/dist/punkt-vue-loader.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("./Icon-BLNK24NN.cjs"),s=require("./plugins-CMydO4oi.cjs"),c=["aria-busy"],m={key:0},r={__name:"Loader",props:{message:String,size:{type:String,default:"medium",validator:a=>["small","medium","large"].includes(a)},inline:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!0},variant:{type:String,default:"rainbow",validator:a=>["blue","rainbow","shapes"].includes(a)},delay:{type:Number,default:0}},setup(a){const n=a,u=t=>t==="shapes"?"loader":t==="blue"?"spinner-blue":"spinner",{delay:l}=e.toRefs(n);let o=e.ref(!(l.value>0));return l.value>0&&setTimeout(()=>{o.value=!0},l.value),(t,k)=>(e.openBlock(),e.createElementBlock("div",{role:"status","aria-live":"polite","aria-busy":a.isLoading,class:e.normalizeClass(`pkt-loader--${a.inline?"inline":"box"}`)},[a.isLoading?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(`pkt-loader pkt-loader--${n.size}`),"data-testid":"pkt-loader"},[e.createVNode(d.PktIcon,{name:u(a.variant),"aria-label":"loading",path:"https://punkt-cdn.oslo.kommune.no/12.33/animations/",class:e.normalizeClass(`pkt-loader__svg pkt-loader__${a.variant}`)},null,8,["name","class"]),a.message?(e.openBlock(),e.createElementBlock("p",m,e.toDisplayString(a.message),1)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)],64)):e.renderSlot(t.$slots,"default",{key:1})],10,c))}},i={install(a){s.registerComponent(a,r)}};s.use(i);exports.PktLoader=r;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("./Icon-BLNK24NN.cjs"),s=require("./plugins-CMydO4oi.cjs"),c=["aria-busy"],m={key:0},r={__name:"Loader",props:{message:String,size:{type:String,default:"medium",validator:a=>["small","medium","large"].includes(a)},inline:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!0},variant:{type:String,default:"rainbow",validator:a=>["blue","rainbow","shapes"].includes(a)},delay:{type:Number,default:0}},setup(a){const n=a,u=t=>t==="shapes"?"loader":t==="blue"?"spinner-blue":"spinner",{delay:l}=e.toRefs(n);let o=e.ref(!(l.value>0));return l.value>0&&setTimeout(()=>{o.value=!0},l.value),(t,k)=>(e.openBlock(),e.createElementBlock("div",{role:"status","aria-live":"polite","aria-busy":a.isLoading,class:e.normalizeClass(`pkt-loader--${a.inline?"inline":"box"}`)},[a.isLoading?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(`pkt-loader pkt-loader--${n.size}`),"data-testid":"pkt-loader"},[e.createVNode(d.PktIcon,{name:u(a.variant),"aria-label":"loading",path:"https://punkt-cdn.oslo.kommune.no/12.34/animations/",class:e.normalizeClass(`pkt-loader__svg pkt-loader__${a.variant}`)},null,8,["name","class"]),a.message?(e.openBlock(),e.createElementBlock("p",m,e.toDisplayString(a.message),1)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)],64)):e.renderSlot(t.$slots,"default",{key:1})],10,c))}},i={install(a){s.registerComponent(a,r)}};s.use(i);exports.PktLoader=r;exports.default=i;

package/dist/punkt-vue-loader.js

@@ -48,7 +48,7 @@ const h = ["aria-busy"], L = { key: 0 }, S = {
           f(y, {
             name: d(e.variant),
             "aria-label": "loading",
-            path: "https://punkt-cdn.oslo.kommune.no/12.33/animations/",
+            path: "https://punkt-cdn.oslo.kommune.no/12.34/animations/",
             class: n(`pkt-loader__svg pkt-loader__${e.variant}`)
           }, null, 8, ["name", "class"]),
           e.message ? (l(), t("p", L, k(e.message), 1)) : r("", !0)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-vue",
-  "version": "12.33.0",
+  "version": "12.34.0",
   "description": "Vue komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.30.1",
-    "@oslokommune/punkt-css": "^12.33.0",
-    "@oslokommune/punkt-elements": "^12.33.0",
+    "@oslokommune/punkt-css": "^12.34.0",
+    "@oslokommune/punkt-elements": "^12.34.0",
     "@vitejs/plugin-vue": "^5.1.3",
     "edit-json-file": "^1.8.0",
     "sass": "^1.78.0",
@@ -67,5 +67,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "892989f59c2dd0af07cb234344ffdd828a652c7c"
+  "gitHead": "4ab2b5b6508cf1749c9b1a66d92c6d214f737b26"
 }

package/src/components/accordion/AccordionItem.vue

@@ -25,6 +25,22 @@
 import { ref, computed, withDefaults } from 'vue'
 import PktIcon from '../icon/Icon.vue'
 
+/**
+ * @component PktAccordionItem
+ *  An expandable/collapsible content section that can be used standalone or within an Accordion group
+ *
+ * Example usage:
+ * ```tsx
+ * <PktAccordionItem title="Title"  skin="blue">
+ *   <p>Content</p>
+ * </PktAccordionItem>
+ * ```
+ *
+ * @remarks
+ * The "skin" and "compact" props should only be used when using PktAccordionItem as a standalone component.
+ * For grouped accordion items, wrap items in the PktAccordion component instead to avoid inconsistent styling.
+ */
+
 interface IPktAccordionToggleProps {
   isOpen: boolean
   onToggleClick: (id: string) => void
@@ -36,6 +52,8 @@ interface IPktAccordionItem {
   id: string
   defaultOpen?: boolean
   toggleProps?: IPktAccordionToggleProps
+  skin?: 'borderless' | 'outlined' | 'beige' | 'blue'
+  compact?: boolean
 }
 const props = withDefaults(defineProps<IPktAccordionItem>(), {
   title: '',
@@ -61,6 +79,8 @@ const accordionItemClass = computed(() => {
   return [
     props.className,
     'pkt-accordion-item',
+    props.skin && `pkt-accordion-item--${props.skin}`,
+    props.compact && 'pkt-accordion-item--compact',
     {
       'pkt-accordion-item--open': openToggleProp.value,
     },