@oslokommune/punkt-vue 11.14.0 → 11.14.2

package/CHANGELOG.md

@@ -5,6 +5,43 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [11.15.0](https://github.com/oslokommune/punkt/compare/11.14.1...11.15.0) (2024-07-12)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* update deploys 🚀 (#1788). 
+* update deploys to include "Feature*". 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [11.14.1](https://github.com/oslokommune/punkt/compare/11.14.0...11.14.1) (2024-06-26)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+* Legg til grå variant av LinkCard, pluss hovereffekter (#1774). 
+
+
+---
+
+
 ## [11.14.0](https://github.com/oslokommune/punkt/compare/11.13.14...11.14.0) (2024-06-26)
 
 ### ⚠ BREAKING CHANGES

package/dist/punkt-vue-index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("./punkt-vue-alert.cjs"),t=require("./punkt-vue-accordion.cjs"),a=require("./punkt-vue-backlink.cjs"),r=require("./punkt-vue-breadcrumbs.cjs"),g=require("./punkt-vue-button.cjs"),o=require("./punkt-vue-checkbox.cjs"),l=require("./punkt-vue-footer.cjs"),u=require("./punkt-vue-footersimple.cjs"),d=require("./punkt-vue-header.cjs"),x=require("./punkt-vue-icon.cjs"),m=require("./punkt-vue-inputwrapper.cjs"),n=require("./punkt-vue-messagebox.cjs"),c=require("./punkt-vue-linkcard.cjs"),i=require("./punkt-vue-loader.cjs"),k=require("./punkt-vue-progressbar.cjs"),s=require("./punkt-vue-radiobutton.cjs"),b=require("./punkt-vue-select.cjs"),e=require("./punkt-vue-table.cjs"),f=require("./punkt-vue-tabs.cjs"),B=require("./punkt-vue-tag.cjs"),P=require("./punkt-vue-textarea.cjs"),T=require("./punkt-vue-textinput.cjs"),I=require("./plugins-IAlvxbZ2.cjs"),L=require("./Alert-VmiRg_3U.cjs"),S=require("./Button-fJVVmqZU.cjs"),y=require("./Icon-7iwiZOEn.cjs"),F=require("./InputWrapper-tRopywnC.cjs"),R=require("./Tag-1MK-d3wL.cjs");require("vue");require("./_plugin-vue_export-helper-jfW5FsfF.cjs");const p=Object.freeze(Object.defineProperty({__proto__:null,Accordion:t.default,AccordionItem:t.default,Alert:q.default,BackLink:a.default,Breadcrumbs:r.default,Button:g.default,Checkbox:o.default,Footer:l.default,FooterSimple:u.default,Header:d.default,Icon:x.default,InputWrapper:m.default,Linkcard:c.default,Loader:i.default,Messagebox:n.default,Progressbar:k.default,Radiobutton:s.default,Select:b.default,Table:e.default,TableBody:e.default,TableDataCell:e.default,TableHeader:e.default,TableHeaderCell:e.default,TableRow:e.default,Tabs:f.default,Tag:B.default,Textarea:P.default,Textinput:T.default},Symbol.toStringTag,{value:"Module"})),A={install(C,M={}){for(const H in p)I.registerPlugin(C,p[H])}};I.use(A);exports.Alert=q.default;exports.Accordion=t.default;exports.AccordionItem=t.default;exports.PktAccordion=t.PktAccordion;exports.PktAccordionItem=t.PktAccordionItem;exports.BackLink=a.default;exports.PktBackLink=a.PktBackLink;exports.Breadcrumbs=r.default;exports.PktBreadcrumbs=r.PktBreadcrumbs;exports.Button=g.default;exports.Checkbox=o.default;exports.PktCheckbox=o.PktCheckbox;exports.Footer=l.default;exports.PktFooter=l.PktFooter;exports.FooterSimple=u.default;exports.PktFooterSimple=u.PktFooterSimple;exports.Header=d.default;exports.PktHeader=d.PktHeader;exports.Icon=x.default;exports.InputWrapper=m.default;exports.Messagebox=n.default;exports.PktMessagebox=n.PktMessagebox;exports.Linkcard=c.default;exports.PktLinkcard=c.PktLinkcard;exports.Loader=i.default;exports.PktLoader=i.PktLoader;exports.PktProgressbar=k.PktProgressbar;exports.Progressbar=k.default;exports.PktRadiobutton=s.PktRadiobutton;exports.Radiobutton=s.default;exports.PktSelect=b.PktSelect;exports.Select=b.default;exports.PktTable=e.PktTable;exports.PktTableBody=e.PktTableBody;exports.PktTableDataCell=e.PktTableDataCell;exports.PktTableHeader=e.PktTableHeader;exports.PktTableHeaderCell=e.PktTableHeaderCell;exports.PktTableRow=e.PktTableRow;exports.Table=e.default;exports.TableBody=e.default;exports.TableDataCell=e.default;exports.TableHeader=e.default;exports.TableHeaderCell=e.default;exports.TableRow=e.default;exports.PktTabs=f.PktTabs;exports.Tabs=f.default;exports.Tag=B.default;exports.PktTextarea=P.PktTextarea;exports.Textarea=P.default;exports.PktTextinput=T.PktTextinput;exports.Textinput=T.default;exports.PktAlert=L.PktAlert;exports.PktButton=S.PktButton;exports.PktIcon=y.PktIcon;exports.PktInputWrapper=F.PktInputWrapper;exports.PktTag=R.Tag;exports.default=A;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("./punkt-vue-alert.cjs"),t=require("./punkt-vue-accordion.cjs"),a=require("./punkt-vue-backlink.cjs"),r=require("./punkt-vue-breadcrumbs.cjs"),g=require("./punkt-vue-button.cjs"),o=require("./punkt-vue-checkbox.cjs"),l=require("./punkt-vue-footer.cjs"),u=require("./punkt-vue-footersimple.cjs"),d=require("./punkt-vue-header.cjs"),x=require("./punkt-vue-icon.cjs"),m=require("./punkt-vue-inputwrapper.cjs"),n=require("./punkt-vue-messagebox.cjs"),c=require("./punkt-vue-linkcard.cjs"),i=require("./punkt-vue-loader.cjs"),k=require("./punkt-vue-progressbar.cjs"),s=require("./punkt-vue-radiobutton.cjs"),P=require("./punkt-vue-select.cjs"),e=require("./punkt-vue-table.cjs"),b=require("./punkt-vue-tabs.cjs"),B=require("./punkt-vue-tag.cjs"),f=require("./punkt-vue-textarea.cjs"),p=require("./punkt-vue-textinput.cjs"),S=require("./plugins-IAlvxbZ2.cjs"),I=require("./punkt-vue-stepper.cjs"),L=require("./Alert-VmiRg_3U.cjs"),y=require("./Button-fJVVmqZU.cjs"),F=require("./Icon-7iwiZOEn.cjs"),R=require("./InputWrapper-tRopywnC.cjs"),M=require("./Tag-1MK-d3wL.cjs");require("vue");require("./_plugin-vue_export-helper-jfW5FsfF.cjs");const T=Object.freeze(Object.defineProperty({__proto__:null,Accordion:t.default,AccordionItem:t.default,Alert:q.default,BackLink:a.default,Breadcrumbs:r.default,Button:g.default,Checkbox:o.default,Footer:l.default,FooterSimple:u.default,Header:d.default,Icon:x.default,InputWrapper:m.default,Linkcard:c.default,Loader:i.default,Messagebox:n.default,Progressbar:k.default,Radiobutton:s.default,Select:P.default,Table:e.default,TableBody:e.default,TableDataCell:e.default,TableHeader:e.default,TableHeaderCell:e.default,TableRow:e.default,Tabs:b.default,Tag:B.default,Textarea:f.default,Textinput:p.default},Symbol.toStringTag,{value:"Module"})),A={install(C,h={}){for(const H in T)S.registerPlugin(C,T[H])}};S.use(A);exports.Alert=q.default;exports.Accordion=t.default;exports.AccordionItem=t.default;exports.PktAccordion=t.PktAccordion;exports.PktAccordionItem=t.PktAccordionItem;exports.BackLink=a.default;exports.PktBackLink=a.PktBackLink;exports.Breadcrumbs=r.default;exports.PktBreadcrumbs=r.PktBreadcrumbs;exports.Button=g.default;exports.Checkbox=o.default;exports.PktCheckbox=o.PktCheckbox;exports.Footer=l.default;exports.PktFooter=l.PktFooter;exports.FooterSimple=u.default;exports.PktFooterSimple=u.PktFooterSimple;exports.Header=d.default;exports.PktHeader=d.PktHeader;exports.Icon=x.default;exports.InputWrapper=m.default;exports.Messagebox=n.default;exports.PktMessagebox=n.PktMessagebox;exports.Linkcard=c.default;exports.PktLinkcard=c.PktLinkcard;exports.Loader=i.default;exports.PktLoader=i.PktLoader;exports.PktProgressbar=k.PktProgressbar;exports.Progressbar=k.default;exports.PktRadiobutton=s.PktRadiobutton;exports.Radiobutton=s.default;exports.PktSelect=P.PktSelect;exports.Select=P.default;exports.PktTable=e.PktTable;exports.PktTableBody=e.PktTableBody;exports.PktTableDataCell=e.PktTableDataCell;exports.PktTableHeader=e.PktTableHeader;exports.PktTableHeaderCell=e.PktTableHeaderCell;exports.PktTableRow=e.PktTableRow;exports.Table=e.default;exports.TableBody=e.default;exports.TableDataCell=e.default;exports.TableHeader=e.default;exports.TableHeaderCell=e.default;exports.TableRow=e.default;exports.PktTabs=b.PktTabs;exports.Tabs=b.default;exports.Tag=B.default;exports.PktTextarea=f.PktTextarea;exports.Textarea=f.default;exports.PktTextinput=p.PktTextinput;exports.Textinput=p.default;exports.PktStep=I.PktStep;exports.PktStepper=I.PktStepper;exports.PktAlert=L.PktAlert;exports.PktButton=y.PktButton;exports.PktIcon=F.PktIcon;exports.PktInputWrapper=R.PktInputWrapper;exports.PktTag=M.Tag;exports.default=A;

package/dist/punkt-vue-index.js

@@ -1,6 +1,6 @@
 import m from "./punkt-vue-alert.js";
 import r from "./punkt-vue-accordion.js";
-import { PktAccordion as eo, PktAccordionItem as to } from "./punkt-vue-accordion.js";
+import { PktAccordion as to, PktAccordionItem as eo } from "./punkt-vue-accordion.js";
 import i from "./punkt-vue-backlink.js";
 import { PktBackLink as mo } from "./punkt-vue-backlink.js";
 import l from "./punkt-vue-breadcrumbs.js";
@@ -23,29 +23,30 @@ import { PktLinkcard as To } from "./punkt-vue-linkcard.js";
 import g from "./punkt-vue-loader.js";
 import { PktLoader as Bo } from "./punkt-vue-loader.js";
 import x from "./punkt-vue-progressbar.js";
-import { PktProgressbar as Co } from "./punkt-vue-progressbar.js";
+import { PktProgressbar as Ao } from "./punkt-vue-progressbar.js";
 import d from "./punkt-vue-radiobutton.js";
-import { PktRadiobutton as Io } from "./punkt-vue-radiobutton.js";
+import { PktRadiobutton as Ho } from "./punkt-vue-radiobutton.js";
 import T from "./punkt-vue-select.js";
-import { PktSelect as So } from "./punkt-vue-select.js";
+import { PktSelect as Lo } from "./punkt-vue-select.js";
 import o from "./punkt-vue-table.js";
 import { PktTable as Fo, PktTableBody as Ro, PktTableDataCell as ho, PktTableHeader as Mo, PktTableHeaderCell as _o, PktTableRow as jo } from "./punkt-vue-table.js";
 import $ from "./punkt-vue-tabs.js";
 import { PktTabs as Do } from "./punkt-vue-tabs.js";
 import B from "./punkt-vue-tag.js";
-import A from "./punkt-vue-textarea.js";
+import S from "./punkt-vue-textarea.js";
 import { PktTextarea as Oo } from "./punkt-vue-textarea.js";
-import C from "./punkt-vue-textinput.js";
+import A from "./punkt-vue-textinput.js";
 import { PktTextinput as zo } from "./punkt-vue-textinput.js";
-import { u as H, r as I } from "./plugins-UPM181Xt.js";
-import { P as qo } from "./Alert-LNP7MGFo.js";
-import { P as Go } from "./Button-5obh_jeA.js";
-import { P as No } from "./Icon-8MjQJfqx.js";
-import { P as Uo } from "./InputWrapper-aBvhZpl8.js";
-import { T as Xo } from "./Tag-jpZpXEPw.js";
+import { u as C, r as H } from "./plugins-UPM181Xt.js";
+import { PktStep as qo, PktStepper as Eo } from "./punkt-vue-stepper.js";
+import { P as Jo } from "./Alert-LNP7MGFo.js";
+import { P as Qo } from "./Button-5obh_jeA.js";
+import { P as Vo } from "./Icon-8MjQJfqx.js";
+import { P as Yo } from "./InputWrapper-aBvhZpl8.js";
+import { T as or } from "./Tag-jpZpXEPw.js";
 import "vue";
 import "./_plugin-vue_export-helper-hUChTQA_.js";
-const e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Accordion: r,
   AccordionItem: r,
@@ -73,15 +74,15 @@ const e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   TableRow: o,
   Tabs: $,
   Tag: B,
-  Textarea: A,
-  Textinput: C
-}, Symbol.toStringTag, { value: "Module" })), L = {
-  install(t, S = {}) {
-    for (const a in e)
-      I(t, e[a]);
+  Textarea: S,
+  Textinput: A
+}, Symbol.toStringTag, { value: "Module" })), I = {
+  install(e, L = {}) {
+    for (const a in t)
+      H(e, t[a]);
   }
 };
-H(L);
+C(I);
 export {
   r as Accordion,
   r as AccordionItem,
@@ -98,24 +99,26 @@ export {
   c as Linkcard,
   g as Loader,
   b as Messagebox,
-  eo as PktAccordion,
-  to as PktAccordionItem,
-  qo as PktAlert,
+  to as PktAccordion,
+  eo as PktAccordionItem,
+  Jo as PktAlert,
   mo as PktBackLink,
   lo as PktBreadcrumbs,
-  Go as PktButton,
+  Qo as PktButton,
   no as PktCheckbox,
   Po as PktFooter,
   uo as PktFooterSimple,
   bo as PktHeader,
-  No as PktIcon,
-  Uo as PktInputWrapper,
+  Vo as PktIcon,
+  Yo as PktInputWrapper,
   To as PktLinkcard,
   Bo as PktLoader,
   go as PktMessagebox,
-  Co as PktProgressbar,
-  Io as PktRadiobutton,
-  So as PktSelect,
+  Ao as PktProgressbar,
+  Ho as PktRadiobutton,
+  Lo as PktSelect,
+  qo as PktStep,
+  Eo as PktStepper,
   Fo as PktTable,
   Ro as PktTableBody,
   ho as PktTableDataCell,
@@ -123,7 +126,7 @@ export {
   _o as PktTableHeaderCell,
   jo as PktTableRow,
   Do as PktTabs,
-  Xo as PktTag,
+  or as PktTag,
   Oo as PktTextarea,
   zo as PktTextinput,
   x as Progressbar,
@@ -137,7 +140,7 @@ export {
   o as TableRow,
   $ as Tabs,
   B as Tag,
-  A as Textarea,
-  C as Textinput,
-  L as default
+  S as Textarea,
+  A as Textinput,
+  I as default
 };

package/dist/punkt-vue-linkcard.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./Icon-7iwiZOEn.cjs"),e=require("vue"),c=require("./_plugin-vue_export-helper-jfW5FsfF.cjs"),l=require("./plugins-IAlvxbZ2.cjs"),s={name:"PktLinkcard",components:{PktIcon:i.PktIcon},props:{skin:{type:String,default:"normal",validator(n){return["normal","blue","beige","beige-outline","green","grey-outline"].includes(n)}},title:{type:String,default:""},href:{type:String,default:""},iconName:{type:String,default:""},openInNewTab:{type:Boolean,default:!1},external:{type:Boolean,default:!1}},methods:{}},d=["href","target","rel"],u={class:"pkt-linkcard__content"},k={class:"pkt-linkcard__text"};function _(n,p,t,f,m,g){const a=e.resolveComponent("PktIcon");return e.openBlock(),e.createElementBlock("a",{href:t.href,class:e.normalizeClass(["pkt-linkcard pkt-link",t.skin?`pkt-linkcard--${this.skin}`:"normal"]),target:t.openInNewTab?"_blank":"_self",rel:t.openInNewTab?"noopener noreferrer":void 0},[e.createVNode(a,{class:"pkt-link__icon",name:t.iconName},null,8,["name"]),e.createElementVNode("div",u,[e.createElementVNode("div",{class:e.normalizeClass(["pkt-linkcard__title",{"pkt-link pkt-link--external":t.external}])},e.toDisplayString(t.title),3),e.createElementVNode("div",k,[e.renderSlot(n.$slots,"default")])])],10,d)}const o=c._export_sfc(s,[["render",_]]),r={install(n){l.registerComponent(n,o)}};l.use(r);exports.PktLinkcard=o;exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./Icon-7iwiZOEn.cjs"),e=require("vue"),c=require("./_plugin-vue_export-helper-jfW5FsfF.cjs"),l=require("./plugins-IAlvxbZ2.cjs"),s={name:"PktLinkcard",components:{PktIcon:i.PktIcon},props:{skin:{type:String,default:"normal",validator(n){return["normal","blue","beige","beige-outline","green","grey","grey-outline"].includes(n)}},title:{type:String,default:""},href:{type:String,default:""},iconName:{type:String,default:""},openInNewTab:{type:Boolean,default:!1},external:{type:Boolean,default:!1}},methods:{}},d=["href","target","rel"],u={class:"pkt-linkcard__content"},k={class:"pkt-linkcard__text"};function _(n,p,t,f,m,g){const a=e.resolveComponent("PktIcon");return e.openBlock(),e.createElementBlock("a",{href:t.href,class:e.normalizeClass(["pkt-linkcard pkt-link",t.skin?`pkt-linkcard--${this.skin}`:"normal"]),target:t.openInNewTab?"_blank":"_self",rel:t.openInNewTab?"noopener noreferrer":void 0},[e.createVNode(a,{class:"pkt-link__icon",name:t.iconName},null,8,["name"]),e.createElementVNode("div",u,[e.createElementVNode("div",{class:e.normalizeClass(["pkt-linkcard__title",{"pkt-link pkt-link--external":t.external}])},e.toDisplayString(t.title),3),e.createElementVNode("div",k,[e.renderSlot(n.$slots,"default")])])],10,d)}const r=c._export_sfc(s,[["render",_]]),o={install(n){l.registerComponent(n,r)}};l.use(o);exports.PktLinkcard=r;exports.default=o;

package/dist/punkt-vue-linkcard.js

@@ -12,7 +12,7 @@ const p = {
       type: String,
       default: "normal",
       validator(t) {
-        return ["normal", "blue", "beige", "beige-outline", "green", "grey-outline"].includes(t);
+        return ["normal", "blue", "beige", "beige-outline", "green", "grey", "grey-outline"].includes(t);
       }
     },
     title: {

package/dist/punkt-vue-stepper.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./plugins-IAlvxbZ2.cjs"),e=require("vue"),i=e.defineComponent({__name:"Stepper",props:{className:{},hideNonActiveStepsContent:{type:Boolean,default:!1},orientation:{default:"vertical"}},setup(s){const t=s,n=e.ref(null),l=e.computed(()=>[t.className,"pkt-stepper",t.orientation==="horizontal"?"pkt-stepper--horizontal":"pkt-stepper--vertical"].filter(Boolean).join(" "));return e.provide("hideNonActiveStepsContent",t.hideNonActiveStepsContent),(o,r)=>(e.openBlock(),e.createElementBlock("ol",{class:e.normalizeClass(l.value),ref_key:"stepperRef",ref:n},[e.renderSlot(o.$slots,"default")],2))}}),u=e.createElementVNode("span",{class:"pkt-step__line pkt-step__line--1"},null,-1),_=e.createElementVNode("span",{class:"pkt-step__line pkt-step__line--2"},null,-1),m=["innerHTML"],h=e.createElementVNode("span",{class:"pkt-step__line pkt-step__line--3",role:"separator"},null,-1),f={class:"pkt-step__wrapper"},v={class:"pkt-step__title"},g={class:"pkt-step__content"},k='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle cx="12" cy="12" r="7" style="fill: var(--pkt-color-grays-grey-200, #CCC);" /></svg>',S='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle opacity=".15" cx="12" cy="12" r="12" fill="#2A2859" /><circle cx="12" cy="12" r="6" fill="#2A2859" /></svg>',w='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#2A2859" d="M3 3h18v18H3z" /><path d="m10.34 16-1.11-1.14L7 12.58l1.11-1.15 2.23 2.28L15.88 8 17 9.15l-5.55 5.71L10.34 16Z" fill="#F1FDFF" /></svg>',a=e.defineComponent({__name:"Step",props:{title:{},className:{},status:{default:"incomplete"}},setup(s){const t=s,n=e.inject("hideNonActiveStepsContent"),l=()=>!!(n&&t.status!=="current"),o=e.computed(()=>["pkt-step",t.className,`pkt-step--${t.status}`,{"pkt-step--hidden":l()}]),r=e.computed(()=>{switch(t.status){case"current":return S;case"completed":return w;default:return k}});return(c,C)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(o.value),"data-testid":"pkt-step"},[u,_,e.createElementVNode("span",{class:"pkt-step__indicator",innerHTML:r.value},null,8,m),h,e.createElementVNode("div",f,[e.createElementVNode("div",v,e.toDisplayString(c.title),1),e.createElementVNode("div",g,[e.renderSlot(c.$slots,"default")])])],2))}}),d={install(s){p.registerComponent(s,i),p.registerComponent(s,a)}};p.use(d);exports.PktStep=a;exports.PktStepper=i;exports.default=d;

package/dist/punkt-vue-stepper.js

@@ -0,0 +1,79 @@
+import { u as f, a } from "./plugins-UPM181Xt.js";
+import { defineComponent as c, ref as m, computed as p, provide as v, openBlock as _, createElementBlock as d, normalizeClass as u, renderSlot as h, inject as k, createElementVNode as e, toDisplayString as g } from "vue";
+const S = /* @__PURE__ */ c({
+  __name: "Stepper",
+  props: {
+    className: {},
+    hideNonActiveStepsContent: { type: Boolean, default: !1 },
+    orientation: { default: "vertical" }
+  },
+  setup(s) {
+    const t = s, n = m(null), l = p(() => [
+      t.className,
+      "pkt-stepper",
+      t.orientation === "horizontal" ? "pkt-stepper--horizontal" : "pkt-stepper--vertical"
+    ].filter(Boolean).join(" "));
+    return v("hideNonActiveStepsContent", t.hideNonActiveStepsContent), (o, i) => (_(), d("ol", {
+      class: u(l.value),
+      ref_key: "stepperRef",
+      ref: n
+    }, [
+      h(o.$slots, "default")
+    ], 2));
+  }
+}), w = /* @__PURE__ */ e("span", { class: "pkt-step__line pkt-step__line--1" }, null, -1), C = /* @__PURE__ */ e("span", { class: "pkt-step__line pkt-step__line--2" }, null, -1), y = ["innerHTML"], N = /* @__PURE__ */ e("span", {
+  class: "pkt-step__line pkt-step__line--3",
+  role: "separator"
+}, null, -1), A = { class: "pkt-step__wrapper" }, x = { class: "pkt-step__title" }, L = { class: "pkt-step__content" }, z = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle cx="12" cy="12" r="7" style="fill: var(--pkt-color-grays-grey-200, #CCC);" /></svg>', B = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle opacity=".15" cx="12" cy="12" r="12" fill="#2A2859" /><circle cx="12" cy="12" r="6" fill="#2A2859" /></svg>', F = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#2A2859" d="M3 3h18v18H3z" /><path d="m10.34 16-1.11-1.14L7 12.58l1.11-1.15 2.23 2.28L15.88 8 17 9.15l-5.55 5.71L10.34 16Z" fill="#F1FDFF" /></svg>', G = /* @__PURE__ */ c({
+  __name: "Step",
+  props: {
+    title: {},
+    className: {},
+    status: { default: "incomplete" }
+  },
+  setup(s) {
+    const t = s, n = k("hideNonActiveStepsContent"), l = () => !!(n && t.status !== "current"), o = p(() => [
+      "pkt-step",
+      t.className,
+      `pkt-step--${t.status}`,
+      { "pkt-step--hidden": l() }
+    ]), i = p(() => {
+      switch (t.status) {
+        case "current":
+          return B;
+        case "completed":
+          return F;
+        default:
+          return z;
+      }
+    });
+    return (r, V) => (_(), d("li", {
+      class: u(o.value),
+      "data-testid": "pkt-step"
+    }, [
+      w,
+      C,
+      e("span", {
+        class: "pkt-step__indicator",
+        innerHTML: i.value
+      }, null, 8, y),
+      N,
+      e("div", A, [
+        e("div", x, g(r.title), 1),
+        e("div", L, [
+          h(r.$slots, "default")
+        ])
+      ])
+    ], 2));
+  }
+}), H = {
+  install(s) {
+    a(s, S), a(s, G);
+  }
+};
+f(H);
+export {
+  G as PktStep,
+  S as PktStepper,
+  H as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-vue",
-  "version": "11.14.0",
+  "version": "11.14.2",
   "description": "Vue komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^11.13.14",
-    "@oslokommune/punkt-css": "^11.14.0",
+    "@oslokommune/punkt-css": "^11.14.2",
     "@vitejs/plugin-vue": "^4.5.2",
     "edit-json-file": "^1.7.0",
     "sass": "^1.69.5",
@@ -65,5 +65,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "bb16f0f94234a0251ca4b9ebec68f65385cd7fa4"
+  "gitHead": "817b273dbc62a68c7c9bf259e08bacd26bc538a1"
 }

package/src/components/accordion/Accordion.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect } from 'vue'
+import { ref, computed, watchEffect, withDefaults } from 'vue'
 
 interface IAccordionItemProps {
   className?: string

package/src/components/linkcard/Linkcard.vue

@@ -30,7 +30,7 @@ export default {
       type: String,
       default: 'normal',
       validator(value) {
-        return ['normal', 'blue', 'beige', 'beige-outline', 'green', 'grey-outline'].includes(value)
+        return ['normal', 'blue', 'beige', 'beige-outline', 'green', 'grey', 'grey-outline'].includes(value)
       },
     },
     title: {

package/src/components/stepper/Step.vue

@@ -0,0 +1,63 @@
+<template>
+  <li :class="stepClasses" data-testid="pkt-step">
+    <span class="pkt-step__line pkt-step__line--1"></span>
+    <span class="pkt-step__line pkt-step__line--2"></span>
+    <span class="pkt-step__indicator" v-html="statusSVG"> </span>
+    <span class="pkt-step__line pkt-step__line--3" role="separator"></span>
+    <div class="pkt-step__wrapper">
+      <div class="pkt-step__title">{{ title }}</div>
+      <div class="pkt-step__content">
+        <slot />
+      </div>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { computed, withDefaults, inject } from 'vue'
+
+export type TStepStatus = 'completed' | 'incomplete' | 'current'
+
+interface IStepProps {
+  title: string
+  className?: string
+  status: TStepStatus
+}
+
+const props = withDefaults(defineProps<IStepProps>(), {
+  status: 'incomplete',
+})
+
+// Inject hideNonActiveStepsContent from parent Stepper component to access the variable
+const hideNonActiveStepsContent = inject<boolean>('hideNonActiveStepsContent')
+const shouldHideContent = (): boolean => {
+  return hideNonActiveStepsContent && props.status !== 'current' ? true : false
+}
+
+const incompleteStepSVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle cx="12" cy="12" r="7" style="fill: var(--pkt-color-grays-grey-200, #CCC);" /></svg>'
+const currentStepSVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle opacity=".15" cx="12" cy="12" r="12" fill="#2A2859" /><circle cx="12" cy="12" r="6" fill="#2A2859" /></svg>'
+const completedStepSVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#2A2859" d="M3 3h18v18H3z" /><path d="m10.34 16-1.11-1.14L7 12.58l1.11-1.15 2.23 2.28L15.88 8 17 9.15l-5.55 5.71L10.34 16Z" fill="#F1FDFF" /></svg>'
+
+const stepClasses = computed(() => [
+  'pkt-step',
+  props.className,
+  `pkt-step--${props.status}`,
+  { 'pkt-step--hidden': shouldHideContent() },
+])
+
+const statusSVG = computed(() => {
+  switch (props.status) {
+    case 'current':
+      return currentStepSVG
+    case 'completed':
+      return completedStepSVG
+    default:
+      return incompleteStepSVG
+  }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/stepper/Stepper.vue

@@ -0,0 +1,37 @@
+<template>
+  <ol :class="stylingClasses" ref="stepperRef">
+    <slot></slot>
+  </ol>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, withDefaults, defineProps, provide } from 'vue'
+
+interface IStepperProps {
+  className?: string
+  hideNonActiveStepsContent?: boolean
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const props = withDefaults(defineProps<IStepperProps>(), {
+  hideNonActiveStepsContent: false,
+  orientation: 'vertical',
+})
+
+const stepperRef = ref<HTMLOListElement | null>(null)
+
+const stylingClasses = computed(() => {
+  return [
+    props.className,
+    'pkt-stepper',
+    props.orientation === 'horizontal' ? 'pkt-stepper--horizontal' : 'pkt-stepper--vertical',
+  ]
+    .filter(Boolean)
+    .join(' ')
+})
+
+// Make hideNonActiveStepsContent available to all children
+provide('hideNonActiveStepsContent', props.hideNonActiveStepsContent)
+</script>
+
+<style lang="scss"></style>