@oslokommune/punkt-vue 11.8.0 → 11.9.0

package/CHANGELOG.md

@@ -5,6 +5,100 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [11.9.0](https://github.com/oslokommune/punkt/compare/11.8.2...11.9.0) (2024-03-11)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* template for Forms (skjema mal) (#1580). * feat(react)-1406: ✨ add template for schema
+  
+  - Add all example fields except upload file and datepicker (no current components available).
+  - Add styling classes for responsive design on text sizes & spacing
+  - Use stylings vars for readability
+  - Add regex and validation functions for address, postalCode and postalArea (only to show an example of how it can be done)
+  - Set transportError to true to show example of radio button group with error
+  - Add summary of errors
+  
+  📝 Notes:
+  - Would like to have an alert message box without icons.
+  
+  * fix 🔧: radiobutton validation, schema --> form..
+  correct field id.
+  * feat(vue): ✨ add form template for Vue (#1555)
+* ✨ Add TemplateForm for vue. 
+* ✨ Add path and view for TemplateForm. 
+* adding the rest of the form. - dependency-name: ip
+    dependency-type: indirect
+  ...
+  
+  Signed-off-by: dependabot[bot] <support@github.com>
+  Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
+  
+  * chore(deps): bump undici from 5.28.2 to 5.28.3 (#1523)
+  
+  Bumps [undici](https://github.com/nodejs/undici) from 5.28.2 to 5.28.3.
+  - [Release notes](https://github.com/nodejs/undici/releases)
+  - [Commits](https://github.com/nodejs/undici/compare/v5.28.2...v5.28.3)
+  
+  ---
+  updated-dependencies:
+  - dependency-name: undici
+    dependency-type: indirect
+  ...
+  
+  * feat(docs): 🧾 legg til dokumentasjon for skjemamal (#1556)
+  * feat(docs): 🧾 Add code document for template form
+  * fix(docs): vis rendret eksempel av skjema mal
+  * Legg til skjema-mal mappe for bilder
+  * docs:#1525 Legg til dokumentasjon og mal
+  
+  
+  ---------
+  
+  Co-authored-by: My T. Nguyen <mythng94@gmail.com>
+  Co-authored-by: My T. Nguyen <my.nguyen@origo.oslo.kommune.no>
+  
+  ---------
+  
+  Co-authored-by: julielyng <35265191+julielyng@users.noreply.github.com>
+  
+  * Legge til nye bilder i svg i stedet for png
+  * Show svg pictures
+  
+  ---------
+  
+  Co-authored-by: julielyng <35265191+julielyng@users.noreply.github.com>
+
+
+### Bug Fixes
+* 🔧 TextInput: Allow additional classes. 
+
+
+### Chores
+Ingen
+
+---
+
+
+## [11.8.1](https://github.com/oslokommune/punkt/compare/11.8.0...11.8.1) (2024-03-06)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+* sort and set common formatter rules (#1571). 
+
+
+---
+
+
 ## [11.8.0](https://github.com/oslokommune/punkt/compare/11.7.1...11.8.0) (2024-03-04)
 
 ### ⚠ BREAKING CHANGES

package/dist/punkt-vue-select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./Icon-D5KXd1vV.cjs"),p=require("./Alert-4uYQ7-Zl.cjs"),f=require("./Button-PeCfDEXj.cjs"),g=require("./InputWrapper-u-5p8dsq.cjs"),t=require("vue"),l=require("./plugins-AiK__HqQ.cjs"),b={name:"PktSelect",components:{PktIcon:s.PktIcon,PktAlert:p.PktAlert,PktButton:f.PktButton,PktInputWrapper:g.PktInputWrapper},props:{label:{type:String,required:!0,default:"input"},helptext:{type:String,required:!1},helptextDropdown:{type:String,required:!1},helptextDropdownButton:{type:String,required:!1},optionalTag:{type:Boolean,required:!1,default:!1},optionalText:{type:String,required:!1},requiredTag:{type:Boolean,required:!1,default:!1},requiredText:{type:String,required:!1},hasError:{type:Boolean,required:!1},errorMessage:{type:String,required:!1},name:{type:String,required:!1},id:{type:String,required:!0},modelValue:{type:String,required:!1},disabled:{type:Boolean,required:!1,default:!1},inline:{type:Boolean,required:!1,default:!1},fullwidth:{type:Boolean,default:!1},ariaLabelledby:{type:String,required:!1},ariaDescribedby:{type:String,required:!1},useWrapper:{type:Boolean,default:!0}},emits:["update:modelValue"],computed:{labelledBy(){this.ariaLabelledby||`${this.id}`}}},q=["aria-invalid","aria-errormessage","aria-labelledby","disabled","id","name","value"];function y(r,a,e,c,m,o){const u=t.resolveComponent("PktInputWrapper");return t.openBlock(),t.createBlock(u,{class:"pkt-select",forId:e.id,label:e.label,helptext:e.helptext,helptextDropdown:e.helptextDropdown,helptextDropdownButton:e.helptextDropdownButton,optionalTag:e.optionalTag,optionalText:e.optionalText,requiredTag:e.requiredTag,requiredText:e.requiredText,hasError:e.hasError,errorMessage:e.errorMessage,disabled:e.disabled,inline:e.inline,ariaDescribedby:e.ariaDescribedby,useWrapper:e.useWrapper,onToggleHelpText:a[1]||(a[1]=i=>r.$emit("toggleHelpText"))},{default:t.withCtx(()=>[t.createElementVNode("select",t.mergeProps(r.$attrs,{onInput:a[0]||(a[0]=i=>r.$emit("update:modelValue",i.target.value)),class:{"pkt-input":!0,"pkt-input--fullwidth":e.fullwidth},"aria-invalid":e.hasError,"aria-errormessage":e.hasError?`${e.id}-error`:"","aria-labelledby":o.labelledBy,disabled:e.disabled,id:e.id,name:e.name||e.id,value:e.modelValue}),[t.renderSlot(r.$slots,"default")],16,q)]),_:3},8,["forId","label","helptext","helptextDropdown","helptextDropdownButton","optionalTag","optionalText","requiredTag","requiredText","hasError","errorMessage","disabled","inline","ariaDescribedby","useWrapper"])}const n=l._export_sfc(b,[["render",y]]),d={install(r){l.registerComponent(r,n)}};l.use(d);exports.PktSelect=n;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./Icon-D5KXd1vV.cjs"),p=require("./Alert-4uYQ7-Zl.cjs"),f=require("./Button-PeCfDEXj.cjs"),g=require("./InputWrapper-u-5p8dsq.cjs"),t=require("vue"),l=require("./plugins-AiK__HqQ.cjs"),b={name:"PktSelect",components:{PktIcon:s.PktIcon,PktAlert:p.PktAlert,PktButton:f.PktButton,PktInputWrapper:g.PktInputWrapper},props:{label:{type:String,required:!0,default:"input"},helptext:{type:String,required:!1},helptextDropdown:{type:String,required:!1},helptextDropdownButton:{type:String,required:!1},optionalTag:{type:Boolean,required:!1,default:!1},optionalText:{type:String,required:!1},requiredTag:{type:Boolean,required:!1,default:!1},requiredText:{type:String,required:!1},hasError:{type:Boolean,required:!1},errorMessage:{type:String,required:!1},name:{type:String,required:!1},id:{type:String,required:!0},modelValue:{type:String,required:!1},disabled:{type:Boolean,required:!1,default:!1},inline:{type:Boolean,required:!1,default:!1},fullwidth:{type:Boolean,default:!1},ariaLabelledby:{type:String,required:!1},ariaDescribedby:{type:String,required:!1},useWrapper:{type:Boolean,default:!0}},emits:["update:modelValue"],computed:{labelledBy(){this.ariaLabelledby||`${this.id}`}}},q=["aria-invalid","aria-errormessage","aria-labelledby","disabled","id","name","value"];function c(r,a,e,y,m,o){const u=t.resolveComponent("PktInputWrapper");return t.openBlock(),t.createBlock(u,{class:t.normalizeClass(["pkt-select",r.$attrs.class]),forId:e.id,label:e.label,helptext:e.helptext,helptextDropdown:e.helptextDropdown,helptextDropdownButton:e.helptextDropdownButton,optionalTag:e.optionalTag,optionalText:e.optionalText,requiredTag:e.requiredTag,requiredText:e.requiredText,hasError:e.hasError,errorMessage:e.errorMessage,disabled:e.disabled,inline:e.inline,ariaDescribedby:e.ariaDescribedby,useWrapper:e.useWrapper,onToggleHelpText:a[1]||(a[1]=i=>r.$emit("toggleHelpText"))},{default:t.withCtx(()=>[t.createElementVNode("select",t.mergeProps(r.$attrs,{onInput:a[0]||(a[0]=i=>r.$emit("update:modelValue",i.target.value)),class:{"pkt-input":!0,"pkt-input--fullwidth":e.fullwidth},"aria-invalid":e.hasError,"aria-errormessage":e.hasError?`${e.id}-error`:"","aria-labelledby":o.labelledBy,disabled:e.disabled,id:e.id,name:e.name||e.id,value:e.modelValue}),[t.renderSlot(r.$slots,"default")],16,q)]),_:3},8,["class","forId","label","helptext","helptextDropdown","helptextDropdownButton","optionalTag","optionalText","requiredTag","requiredText","hasError","errorMessage","disabled","inline","ariaDescribedby","useWrapper"])}const n=l._export_sfc(b,[["render",c]]),d={install(r){l.registerComponent(r,n)}};l.use(d);exports.PktSelect=n;exports.default=d;

package/dist/punkt-vue-select.js

@@ -1,12 +1,12 @@
 import { P as d } from "./Icon-f0Yu-X_2.js";
 import { P as o } from "./Alert-p-4l9NR1.js";
 import { P as n } from "./Button-ukohjG2J.js";
-import { P as u } from "./InputWrapper-Hb1mKt2g.js";
-import { resolveComponent as s, openBlock as p, createBlock as f, withCtx as g, createElementVNode as m, mergeProps as b, renderSlot as y } from "vue";
-import { _ as q, u as h, a as x } from "./plugins-IeJb3XDX.js";
-const c = {
+import { P as s } from "./InputWrapper-Hb1mKt2g.js";
+import { resolveComponent as u, openBlock as p, createBlock as f, normalizeClass as m, withCtx as g, createElementVNode as b, mergeProps as y, renderSlot as q } from "vue";
+import { _ as h, u as x, a as c } from "./plugins-IeJb3XDX.js";
+const T = {
   name: "PktSelect",
-  components: { PktIcon: d, PktAlert: o, PktButton: n, PktInputWrapper: u },
+  components: { PktIcon: d, PktAlert: o, PktButton: n, PktInputWrapper: s },
   props: {
     label: {
       type: String,
@@ -96,11 +96,11 @@ const c = {
       this.ariaLabelledby || `${this.id}`;
     }
   }
-}, T = ["aria-invalid", "aria-errormessage", "aria-labelledby", "disabled", "id", "name", "value"];
-function B(t, r, e, k, w, l) {
-  const i = s("PktInputWrapper");
+}, B = ["aria-invalid", "aria-errormessage", "aria-labelledby", "disabled", "id", "name", "value"];
+function S(t, r, e, w, D, l) {
+  const i = u("PktInputWrapper");
   return p(), f(i, {
-    class: "pkt-select",
+    class: m(["pkt-select", t.$attrs.class]),
     forId: e.id,
     label: e.label,
     helptext: e.helptext,
@@ -119,7 +119,7 @@ function B(t, r, e, k, w, l) {
     onToggleHelpText: r[1] || (r[1] = (a) => t.$emit("toggleHelpText"))
   }, {
     default: g(() => [
-      m("select", b(t.$attrs, {
+      b("select", y(t.$attrs, {
         onInput: r[0] || (r[0] = (a) => t.$emit("update:modelValue", a.target.value)),
         class: {
           "pkt-input": !0,
@@ -133,19 +133,19 @@ function B(t, r, e, k, w, l) {
         name: e.name || e.id,
         value: e.modelValue
       }), [
-        y(t.$slots, "default")
-      ], 16, T)
+        q(t.$slots, "default")
+      ], 16, B)
     ]),
     _: 3
-  }, 8, ["forId", "label", "helptext", "helptextDropdown", "helptextDropdownButton", "optionalTag", "optionalText", "requiredTag", "requiredText", "hasError", "errorMessage", "disabled", "inline", "ariaDescribedby", "useWrapper"]);
+  }, 8, ["class", "forId", "label", "helptext", "helptextDropdown", "helptextDropdownButton", "optionalTag", "optionalText", "requiredTag", "requiredText", "hasError", "errorMessage", "disabled", "inline", "ariaDescribedby", "useWrapper"]);
 }
-const S = /* @__PURE__ */ q(c, [["render", B]]), P = {
+const P = /* @__PURE__ */ h(T, [["render", S]]), k = {
   install(t) {
-    x(t, S);
+    c(t, P);
   }
 };
-h(P);
+x(k);
 export {
-  S as PktSelect,
-  P as default
+  P as PktSelect,
+  k as default
 };

package/dist/punkt-vue-textarea.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./Icon-D5KXd1vV.cjs"),p=require("./Alert-4uYQ7-Zl.cjs"),f=require("./Button-PeCfDEXj.cjs"),y=require("./InputWrapper-u-5p8dsq.cjs"),t=require("vue"),n=require("./plugins-AiK__HqQ.cjs"),m={name:"PktTextarea",components:{PktIcon:g.PktIcon,PktAlert:p.PktAlert,PktButton:f.PktButton,PktInputWrapper:y.PktInputWrapper},props:{label:{type:String,required:!0,default:"input"},helptext:{type:String,required:!1},helptextDropdown:{type:String,required:!1},helptextDropdownButton:{type:String,required:!1},optionalTag:{type:Boolean,required:!1,default:!1},optionalText:{type:String,required:!1},requiredTag:{type:Boolean,required:!1,default:!1},requiredText:{type:String,required:!1},hasError:{type:Boolean,required:!1},errorMessage:{type:String,required:!1},name:{type:String,required:!1},id:{type:String,required:!0},placeholder:{type:String,required:!1},modelValue:{type:String,required:!1},disabled:{type:Boolean,required:!1,default:!1},inline:{type:Boolean,required:!1,default:!1},fullwidth:{type:Boolean,default:!1},ariaLabelledby:{type:String,required:!1},ariaDescribedby:{type:String,required:!1},counter:{type:Boolean,default:!1},counterMaxLength:{type:Number,required:!1},rows:{type:Number,required:!1},useWrapper:{type:Boolean,default:!0}},emits:["update:modelValue"],computed:{labelledBy(){this.ariaLabelledby||`${this.id}`}}},b=["aria-invalid","aria-errormessage","aria-labelledby","disabled","id","name","placeholder","rows","value"],h={key:0,class:"pkt-input__counter","aria-live":"polite","aria-atomic":"true"};function q(r,a,e,x,k,d){const s=t.resolveComponent("PktInputWrapper");return t.openBlock(),t.createBlock(s,{class:"pkt-textarea",forId:e.id,label:e.label,helptext:e.helptext,helptextDropdown:e.helptextDropdown,helptextDropdownButton:e.helptextDropdownButton,optionalTag:e.optionalTag,optionalText:e.optionalText,requiredTag:e.requiredTag,requiredText:e.requiredText,hasError:e.hasError,errorMessage:e.errorMessage,disabled:e.disabled,inline:e.inline,ariaDescribedby:e.ariaDescribedby,useWrapper:e.useWrapper,onToggleHelpText:a[1]||(a[1]=l=>r.$emit("toggleHelpText"))},{default:t.withCtx(()=>{var l,i;return[t.createElementVNode("textarea",t.mergeProps(r.$attrs,{onInput:a[0]||(a[0]=c=>r.$emit("update:modelValue",c.target.value)),class:{"pkt-input":!0,"pkt-input--fullwidth":e.fullwidth,"pkt-input--counter-error":e.counterMaxLength&&((l=e.modelValue)==null?void 0:l.length)>e.counterMaxLength},"aria-invalid":e.hasError,"aria-errormessage":e.hasError?`${e.id}-error`:"","aria-labelledby":d.labelledBy,disabled:e.disabled,id:e.id,name:e.name||e.id,placeholder:e.placeholder,rows:e.rows,value:e.modelValue}),null,16,b),e.counter?(t.openBlock(),t.createElementBlock("div",h,[t.createTextVNode(t.toDisplayString(((i=e.modelValue)==null?void 0:i.length)||0),1),e.counterMaxLength?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createTextVNode("/"+t.toDisplayString(e.counterMaxLength),1)],64)):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0)]}),_:1},8,["forId","label","helptext","helptextDropdown","helptextDropdownButton","optionalTag","optionalText","requiredTag","requiredText","hasError","errorMessage","disabled","inline","ariaDescribedby","useWrapper"])}const o=n._export_sfc(m,[["render",q]]),u={install(r){n.registerComponent(r,o)}};n.use(u);exports.PktTextarea=o;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./Icon-D5KXd1vV.cjs"),p=require("./Alert-4uYQ7-Zl.cjs"),f=require("./Button-PeCfDEXj.cjs"),y=require("./InputWrapper-u-5p8dsq.cjs"),t=require("vue"),n=require("./plugins-AiK__HqQ.cjs"),m={name:"PktTextarea",components:{PktIcon:g.PktIcon,PktAlert:p.PktAlert,PktButton:f.PktButton,PktInputWrapper:y.PktInputWrapper},props:{label:{type:String,required:!0,default:"input"},helptext:{type:String,required:!1},helptextDropdown:{type:String,required:!1},helptextDropdownButton:{type:String,required:!1},optionalTag:{type:Boolean,required:!1,default:!1},optionalText:{type:String,required:!1},requiredTag:{type:Boolean,required:!1,default:!1},requiredText:{type:String,required:!1},hasError:{type:Boolean,required:!1},errorMessage:{type:String,required:!1},name:{type:String,required:!1},id:{type:String,required:!0},placeholder:{type:String,required:!1},modelValue:{type:String,required:!1},disabled:{type:Boolean,required:!1,default:!1},inline:{type:Boolean,required:!1,default:!1},fullwidth:{type:Boolean,default:!1},ariaLabelledby:{type:String,required:!1},ariaDescribedby:{type:String,required:!1},counter:{type:Boolean,default:!1},counterMaxLength:{type:Number,required:!1},rows:{type:Number,required:!1},useWrapper:{type:Boolean,default:!0}},emits:["update:modelValue"],computed:{labelledBy(){this.ariaLabelledby||`${this.id}`}}},b=["aria-invalid","aria-errormessage","aria-labelledby","disabled","id","name","placeholder","rows","value"],h={key:0,class:"pkt-input__counter","aria-live":"polite","aria-atomic":"true"};function q(r,a,e,x,k,d){const s=t.resolveComponent("PktInputWrapper");return t.openBlock(),t.createBlock(s,{class:t.normalizeClass(["pkt-textarea",r.$attrs.class]),forId:e.id,label:e.label,helptext:e.helptext,helptextDropdown:e.helptextDropdown,helptextDropdownButton:e.helptextDropdownButton,optionalTag:e.optionalTag,optionalText:e.optionalText,requiredTag:e.requiredTag,requiredText:e.requiredText,hasError:e.hasError,errorMessage:e.errorMessage,disabled:e.disabled,inline:e.inline,ariaDescribedby:e.ariaDescribedby,useWrapper:e.useWrapper,onToggleHelpText:a[1]||(a[1]=l=>r.$emit("toggleHelpText"))},{default:t.withCtx(()=>{var l,i;return[t.createElementVNode("textarea",t.mergeProps(r.$attrs,{onInput:a[0]||(a[0]=c=>r.$emit("update:modelValue",c.target.value)),class:{"pkt-input":!0,"pkt-input--fullwidth":e.fullwidth,"pkt-input--counter-error":e.counterMaxLength&&((l=e.modelValue)==null?void 0:l.length)>e.counterMaxLength},"aria-invalid":e.hasError,"aria-errormessage":e.hasError?`${e.id}-error`:"","aria-labelledby":d.labelledBy,disabled:e.disabled,id:e.id,name:e.name||e.id,placeholder:e.placeholder,rows:e.rows,value:e.modelValue}),null,16,b),e.counter?(t.openBlock(),t.createElementBlock("div",h,[t.createTextVNode(t.toDisplayString(((i=e.modelValue)==null?void 0:i.length)||0),1),e.counterMaxLength?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createTextVNode("/"+t.toDisplayString(e.counterMaxLength),1)],64)):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0)]}),_:1},8,["class","forId","label","helptext","helptextDropdown","helptextDropdownButton","optionalTag","optionalText","requiredTag","requiredText","hasError","errorMessage","disabled","inline","ariaDescribedby","useWrapper"])}const o=n._export_sfc(m,[["render",q]]),u={install(r){n.registerComponent(r,o)}};n.use(u);exports.PktTextarea=o;exports.default=u;

package/dist/punkt-vue-textarea.js

@@ -1,12 +1,12 @@
 import { P as m } from "./Icon-f0Yu-X_2.js";
 import { P as p } from "./Alert-p-4l9NR1.js";
-import { P as y } from "./Button-ukohjG2J.js";
-import { P as c } from "./InputWrapper-Hb1mKt2g.js";
-import { resolveComponent as h, openBlock as l, createBlock as x, withCtx as b, createElementVNode as q, mergeProps as T, createElementBlock as n, createTextVNode as o, toDisplayString as d, Fragment as k, createCommentVNode as u } from "vue";
-import { _ as B, u as w, a as P } from "./plugins-IeJb3XDX.js";
-const S = {
+import { P as c } from "./Button-ukohjG2J.js";
+import { P as y } from "./InputWrapper-Hb1mKt2g.js";
+import { resolveComponent as h, openBlock as l, createBlock as x, normalizeClass as b, withCtx as q, createElementVNode as T, mergeProps as k, createElementBlock as n, createTextVNode as o, toDisplayString as d, Fragment as B, createCommentVNode as u } from "vue";
+import { _ as w, u as P, a as S } from "./plugins-IeJb3XDX.js";
+const D = {
   name: "PktTextarea",
-  components: { PktIcon: m, PktAlert: p, PktButton: y, PktInputWrapper: c },
+  components: { PktIcon: m, PktAlert: p, PktButton: c, PktInputWrapper: y },
   props: {
     label: {
       type: String,
@@ -112,16 +112,16 @@ const S = {
       this.ariaLabelledby || `${this.id}`;
     }
   }
-}, D = ["aria-invalid", "aria-errormessage", "aria-labelledby", "disabled", "id", "name", "placeholder", "rows", "value"], _ = {
+}, _ = ["aria-invalid", "aria-errormessage", "aria-labelledby", "disabled", "id", "name", "placeholder", "rows", "value"], v = {
   key: 0,
   class: "pkt-input__counter",
   "aria-live": "polite",
   "aria-atomic": "true"
 };
-function v(t, r, e, E, I, s) {
+function M(t, r, e, I, L, s) {
   const f = h("PktInputWrapper");
   return l(), x(f, {
-    class: "pkt-textarea",
+    class: b(["pkt-textarea", t.$attrs.class]),
     forId: e.id,
     label: e.label,
     helptext: e.helptext,
@@ -139,10 +139,10 @@ function v(t, r, e, E, I, s) {
     useWrapper: e.useWrapper,
     onToggleHelpText: r[1] || (r[1] = (a) => t.$emit("toggleHelpText"))
   }, {
-    default: b(() => {
+    default: q(() => {
       var a, i;
       return [
-        q("textarea", T(t.$attrs, {
+        T("textarea", k(t.$attrs, {
           onInput: r[0] || (r[0] = (g) => t.$emit("update:modelValue", g.target.value)),
           class: {
             "pkt-input": !0,
@@ -158,25 +158,25 @@ function v(t, r, e, E, I, s) {
           placeholder: e.placeholder,
           rows: e.rows,
           value: e.modelValue
-        }), null, 16, D),
-        e.counter ? (l(), n("div", _, [
+        }), null, 16, _),
+        e.counter ? (l(), n("div", v, [
           o(d(((i = e.modelValue) == null ? void 0 : i.length) || 0), 1),
-          e.counterMaxLength ? (l(), n(k, { key: 0 }, [
+          e.counterMaxLength ? (l(), n(B, { key: 0 }, [
             o("/" + d(e.counterMaxLength), 1)
           ], 64)) : u("", !0)
         ])) : u("", !0)
       ];
     }),
     _: 1
-  }, 8, ["forId", "label", "helptext", "helptextDropdown", "helptextDropdownButton", "optionalTag", "optionalText", "requiredTag", "requiredText", "hasError", "errorMessage", "disabled", "inline", "ariaDescribedby", "useWrapper"]);
+  }, 8, ["class", "forId", "label", "helptext", "helptextDropdown", "helptextDropdownButton", "optionalTag", "optionalText", "requiredTag", "requiredText", "hasError", "errorMessage", "disabled", "inline", "ariaDescribedby", "useWrapper"]);
 }
-const M = /* @__PURE__ */ B(S, [["render", v]]), V = {
+const V = /* @__PURE__ */ w(D, [["render", M]]), E = {
   install(t) {
-    P(t, M);
+    S(t, V);
   }
 };
-w(V);
+P(E);
 export {
-  M as PktTextarea,
-  V as default
+  V as PktTextarea,
+  E as default
 };

package/dist/punkt-vue-textinput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./Icon-D5KXd1vV.cjs"),p=require("./Alert-4uYQ7-Zl.cjs"),f=require("./InputWrapper-u-5p8dsq.cjs"),t=require("vue"),n=require("./plugins-AiK__HqQ.cjs");require("./Button-PeCfDEXj.cjs");const g={name:"PktTextinput",components:{PktIcon:c.PktIcon,PktAlert:p.PktAlert,PktInputWrapper:f.PktInputWrapper},inheritAttrs:!1,props:{label:{type:String,required:!0,default:"input"},helptext:{type:String,required:!1},helptextDropdown:{type:String,required:!1},helptextDropdownButton:{type:String,required:!1},optionalTag:{type:Boolean,required:!1,default:!1},optionalText:{type:String,required:!1},requiredTag:{type:Boolean,required:!1,default:!1},requiredText:{type:String,required:!1},hasError:{type:Boolean,required:!1},errorMessage:{type:String,required:!1},name:{type:String,required:!1},id:{type:String,required:!0},placeholder:{type:String,required:!1},type:{type:String,required:!1,default:"text"},autocomplete:{type:String,required:!1,default:"off"},modelValue:{type:String,required:!1},suffix:{type:String,required:!1},prefix:{type:String,required:!1},iconNameRight:{type:String,required:!1},disabled:{type:Boolean,required:!1,default:!1},inline:{type:Boolean,required:!1,default:!1},fullwidth:{type:Boolean,default:!1},ariaLabelledby:{type:String,required:!1},ariaDescribedby:{type:String,required:!1},useWrapper:{type:Boolean,default:!0},omitSearchIcon:{type:Boolean,default:!1}},emits:["update:modelValue"],computed:{labelledBy(){this.ariaLabelledby||`${this.id}`},shouldShowSearchIcon(){return this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon}}},m={class:"pkt-input__container"},y={key:0,class:"pkt-input-prefix"},h=["type","name","id","placeholder","autocomplete","value","disabled","aria-invalid","aria-errormessage","aria-labelledby"],k={key:1,class:"pkt-input-suffix"};function x(r,a,e,q,b,i){const l=t.resolveComponent("pkt-icon"),s=t.resolveComponent("PktInputWrapper");return t.openBlock(),t.createBlock(s,{class:"pkt-textinput",forId:e.id,label:e.label,helptext:e.helptext,helptextDropdown:e.helptextDropdown,helptextDropdownButton:e.helptextDropdownButton,optionalTag:e.optionalTag,optionalText:e.optionalText,requiredTag:e.requiredTag,requiredText:e.requiredText,hasError:e.hasError,errorMessage:e.errorMessage,disabled:e.disabled,inline:e.inline,ariaDescribedby:e.ariaDescribedby,useWrapper:e.useWrapper,onToggleHelpText:a[1]||(a[1]=o=>r.$emit("toggleHelpText"))},{default:t.withCtx(()=>[t.createElementVNode("div",m,[e.prefix?(t.openBlock(),t.createElementBlock("div",y,t.toDisplayString(e.prefix),1)):t.createCommentVNode("",!0),t.createElementVNode("input",t.mergeProps(r.$attrs,{onInput:a[0]||(a[0]=o=>r.$emit("update:modelValue",o.target.value)),class:{"pkt-input":!0,"pkt-input--fullwidth":e.fullwidth},type:e.type,name:e.name||e.id,id:e.id,placeholder:e.placeholder,autocomplete:e.autocomplete,value:e.modelValue,disabled:e.disabled,"aria-invalid":e.hasError,"aria-errormessage":e.hasError?`${e.id}-error`:"","aria-labelledby":i.labelledBy,ref:"input"}),null,16,h),e.suffix?(t.openBlock(),t.createElementBlock("p",k,[t.createTextVNode(t.toDisplayString(e.suffix)+" ",1),e.iconNameRight?(t.openBlock(),t.createBlock(l,{key:0,class:"pkt-input-suffix-icon",name:e.iconNameRight},null,8,["name"])):i.shouldShowSearchIcon?(t.openBlock(),t.createBlock(l,{key:1,class:"pkt-input-suffix-icon",name:"magnifying-glass-big"})):t.createCommentVNode("",!0)])):e.iconNameRight?(t.openBlock(),t.createBlock(l,{key:2,class:"pkt-input-icon",name:e.iconNameRight},null,8,["name"])):i.shouldShowSearchIcon?(t.openBlock(),t.createBlock(l,{key:3,class:"pkt-input-icon",name:"magnifying-glass-big"})):t.createCommentVNode("",!0)])]),_:1},8,["forId","label","helptext","helptextDropdown","helptextDropdownButton","optionalTag","optionalText","requiredTag","requiredText","hasError","errorMessage","disabled","inline","ariaDescribedby","useWrapper"])}const u=n._export_sfc(g,[["render",x]]),d={install(r){n.registerComponent(r,u)}};n.use(d);exports.PktTextinput=u;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./Icon-D5KXd1vV.cjs"),p=require("./Alert-4uYQ7-Zl.cjs"),f=require("./InputWrapper-u-5p8dsq.cjs"),t=require("vue"),n=require("./plugins-AiK__HqQ.cjs");require("./Button-PeCfDEXj.cjs");const g={name:"PktTextinput",components:{PktIcon:c.PktIcon,PktAlert:p.PktAlert,PktInputWrapper:f.PktInputWrapper},inheritAttrs:!1,props:{label:{type:String,required:!0,default:"input"},helptext:{type:String,required:!1},helptextDropdown:{type:String,required:!1},helptextDropdownButton:{type:String,required:!1},optionalTag:{type:Boolean,required:!1,default:!1},optionalText:{type:String,required:!1},requiredTag:{type:Boolean,required:!1,default:!1},requiredText:{type:String,required:!1},hasError:{type:Boolean,required:!1},errorMessage:{type:String,required:!1},name:{type:String,required:!1},id:{type:String,required:!0},placeholder:{type:String,required:!1},type:{type:String,required:!1,default:"text"},autocomplete:{type:String,required:!1,default:"off"},modelValue:{type:String,required:!1},suffix:{type:String,required:!1},prefix:{type:String,required:!1},iconNameRight:{type:String,required:!1},disabled:{type:Boolean,required:!1,default:!1},inline:{type:Boolean,required:!1,default:!1},fullwidth:{type:Boolean,default:!1},ariaLabelledby:{type:String,required:!1},ariaDescribedby:{type:String,required:!1},useWrapper:{type:Boolean,default:!0},omitSearchIcon:{type:Boolean,default:!1}},emits:["update:modelValue"],computed:{labelledBy(){this.ariaLabelledby||`${this.id}`},shouldShowSearchIcon(){return this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon}}},m={class:"pkt-input__container"},y={key:0,class:"pkt-input-prefix"},h=["type","name","id","placeholder","autocomplete","value","disabled","aria-invalid","aria-errormessage","aria-labelledby"],k={key:1,class:"pkt-input-suffix"};function q(a,r,e,x,b,i){const l=t.resolveComponent("pkt-icon"),s=t.resolveComponent("PktInputWrapper");return t.openBlock(),t.createBlock(s,{class:t.normalizeClass(["pkt-textinput",a.$attrs.class]),forId:e.id,label:e.label,helptext:e.helptext,helptextDropdown:e.helptextDropdown,helptextDropdownButton:e.helptextDropdownButton,optionalTag:e.optionalTag,optionalText:e.optionalText,requiredTag:e.requiredTag,requiredText:e.requiredText,hasError:e.hasError,errorMessage:e.errorMessage,disabled:e.disabled,inline:e.inline,ariaDescribedby:e.ariaDescribedby,useWrapper:e.useWrapper,onToggleHelpText:r[1]||(r[1]=o=>a.$emit("toggleHelpText"))},{default:t.withCtx(()=>[t.createElementVNode("div",m,[e.prefix?(t.openBlock(),t.createElementBlock("div",y,t.toDisplayString(e.prefix),1)):t.createCommentVNode("",!0),t.createElementVNode("input",t.mergeProps(a.$attrs,{onInput:r[0]||(r[0]=o=>a.$emit("update:modelValue",o.target.value)),class:{"pkt-input":!0,"pkt-input--fullwidth":e.fullwidth},type:e.type,name:e.name||e.id,id:e.id,placeholder:e.placeholder,autocomplete:e.autocomplete,value:e.modelValue,disabled:e.disabled,"aria-invalid":e.hasError,"aria-errormessage":e.hasError?`${e.id}-error`:"","aria-labelledby":i.labelledBy,ref:"input"}),null,16,h),e.suffix?(t.openBlock(),t.createElementBlock("p",k,[t.createTextVNode(t.toDisplayString(e.suffix)+" ",1),e.iconNameRight?(t.openBlock(),t.createBlock(l,{key:0,class:"pkt-input-suffix-icon",name:e.iconNameRight},null,8,["name"])):i.shouldShowSearchIcon?(t.openBlock(),t.createBlock(l,{key:1,class:"pkt-input-suffix-icon",name:"magnifying-glass-big"})):t.createCommentVNode("",!0)])):e.iconNameRight?(t.openBlock(),t.createBlock(l,{key:2,class:"pkt-input-icon",name:e.iconNameRight},null,8,["name"])):i.shouldShowSearchIcon?(t.openBlock(),t.createBlock(l,{key:3,class:"pkt-input-icon",name:"magnifying-glass-big"})):t.createCommentVNode("",!0)])]),_:1},8,["class","forId","label","helptext","helptextDropdown","helptextDropdownButton","optionalTag","optionalText","requiredTag","requiredText","hasError","errorMessage","disabled","inline","ariaDescribedby","useWrapper"])}const u=n._export_sfc(g,[["render",q]]),d={install(a){n.registerComponent(a,u)}};n.use(d);exports.PktTextinput=u;exports.default=d;

package/dist/punkt-vue-textinput.js

@@ -1,10 +1,10 @@
 import { P as m } from "./Icon-f0Yu-X_2.js";
 import { P as g } from "./Alert-p-4l9NR1.js";
 import { P as h } from "./InputWrapper-Hb1mKt2g.js";
-import { resolveComponent as u, openBlock as t, createBlock as r, withCtx as y, createElementVNode as s, createElementBlock as f, toDisplayString as p, createCommentVNode as o, mergeProps as x, createTextVNode as b } from "vue";
-import { _ as q, u as k, a as S } from "./plugins-IeJb3XDX.js";
+import { resolveComponent as u, openBlock as t, createBlock as r, normalizeClass as y, withCtx as x, createElementVNode as s, createElementBlock as f, toDisplayString as p, createCommentVNode as o, mergeProps as b, createTextVNode as q } from "vue";
+import { _ as k, u as S, a as T } from "./plugins-IeJb3XDX.js";
 import "./Button-ukohjG2J.js";
-const T = {
+const B = {
   name: "PktTextinput",
   components: { PktIcon: m, PktAlert: g, PktInputWrapper: h },
   inheritAttrs: !1,
@@ -130,17 +130,17 @@ const T = {
       return this.type === "search" && !this.iconNameRight && !this.omitSearchIcon;
     }
   }
-}, _ = { class: "pkt-input__container" }, B = {
+}, _ = { class: "pkt-input__container" }, w = {
   key: 0,
   class: "pkt-input-prefix"
-}, w = ["type", "name", "id", "placeholder", "autocomplete", "value", "disabled", "aria-invalid", "aria-errormessage", "aria-labelledby"], D = {
+}, D = ["type", "name", "id", "placeholder", "autocomplete", "value", "disabled", "aria-invalid", "aria-errormessage", "aria-labelledby"], I = {
   key: 1,
   class: "pkt-input-suffix"
 };
-function I(a, i, e, N, E, n) {
+function P(a, i, e, E, V, n) {
   const l = u("pkt-icon"), c = u("PktInputWrapper");
   return t(), r(c, {
-    class: "pkt-textinput",
+    class: y(["pkt-textinput", a.$attrs.class]),
     forId: e.id,
     label: e.label,
     helptext: e.helptext,
@@ -158,10 +158,10 @@ function I(a, i, e, N, E, n) {
     useWrapper: e.useWrapper,
     onToggleHelpText: i[1] || (i[1] = (d) => a.$emit("toggleHelpText"))
   }, {
-    default: y(() => [
+    default: x(() => [
       s("div", _, [
-        e.prefix ? (t(), f("div", B, p(e.prefix), 1)) : o("", !0),
-        s("input", x(a.$attrs, {
+        e.prefix ? (t(), f("div", w, p(e.prefix), 1)) : o("", !0),
+        s("input", b(a.$attrs, {
           onInput: i[0] || (i[0] = (d) => a.$emit("update:modelValue", d.target.value)),
           class: {
             "pkt-input": !0,
@@ -178,9 +178,9 @@ function I(a, i, e, N, E, n) {
           "aria-errormessage": e.hasError ? `${e.id}-error` : "",
           "aria-labelledby": n.labelledBy,
           ref: "input"
-        }), null, 16, w),
-        e.suffix ? (t(), f("p", D, [
-          b(p(e.suffix) + " ", 1),
+        }), null, 16, D),
+        e.suffix ? (t(), f("p", I, [
+          q(p(e.suffix) + " ", 1),
           e.iconNameRight ? (t(), r(l, {
             key: 0,
             class: "pkt-input-suffix-icon",
@@ -202,15 +202,15 @@ function I(a, i, e, N, E, n) {
       ])
     ]),
     _: 1
-  }, 8, ["forId", "label", "helptext", "helptextDropdown", "helptextDropdownButton", "optionalTag", "optionalText", "requiredTag", "requiredText", "hasError", "errorMessage", "disabled", "inline", "ariaDescribedby", "useWrapper"]);
+  }, 8, ["class", "forId", "label", "helptext", "helptextDropdown", "helptextDropdownButton", "optionalTag", "optionalText", "requiredTag", "requiredText", "hasError", "errorMessage", "disabled", "inline", "ariaDescribedby", "useWrapper"]);
 }
-const P = /* @__PURE__ */ q(T, [["render", I]]), v = {
+const v = /* @__PURE__ */ k(B, [["render", P]]), N = {
   install(a) {
-    S(a, P);
+    T(a, v);
   }
 };
-k(v);
+S(N);
 export {
-  P as PktTextinput,
-  v as default
+  v as PktTextinput,
+  N as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-vue",
-  "version": "11.8.0",
+  "version": "11.9.0",
   "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.5.0",
-    "@oslokommune/punkt-css": "^11.7.0",
+    "@oslokommune/punkt-css": "^11.9.0",
     "@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": "510c43734ab24941a95c9e256abedbc30554bf3c"
+  "gitHead": "f9c10e09713a41530c52b4a836c9801dd1f527ac"
 }

package/src/components/select/Select.vue

@@ -1,6 +1,7 @@
 <template>
   <PktInputWrapper
     class="pkt-select"
+    :class="$attrs.class"
     :forId="id"
     :label="label"
     :helptext="helptext"

package/src/components/textarea/Textarea.vue

@@ -1,6 +1,7 @@
 <template>
   <PktInputWrapper
     class="pkt-textarea"
+    :class="$attrs.class"
     :forId="id"
     :label="label"
     :helptext="helptext"

package/src/components/textinput/Textinput.vue

@@ -1,6 +1,7 @@
 <template>
   <PktInputWrapper
     class="pkt-textinput"
+    :class="$attrs.class"
     :forId="id"
     :label="label"
     :helptext="helptext"