@oslokommune/punkt-elements 13.0.0 → 13.1.2

package/dist/{select-BwwF5Gki.cjs → select-DUeTm8ac.cjs}

@@ -1,4 +1,4 @@
-"use strict";const r=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),o=require("./if-defined-Cni-RHLS.cjs"),d=require("./input-element-CHjLWeKt.cjs"),c=require("./pkt-options-controller-CiuBG6Lt.cjs"),v=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-BND8tUg_.cjs");var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(u,t,e,s)=>{for(var i=s>1?void 0:s?b(t,e):t,l=u.length-1,n;l>=0;l--)(n=u[l])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&f(t,e,i),i};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.options=[],this.value="",this._options=[],this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new v.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.hasAttribute("value")?s.getAttribute("value")??"":s.textContent??"",label:s.textContent||s.getAttribute("value")||"",disabled:s.hasAttribute("disabled"),hidden:s.hasAttribute("data-hidden")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):(this._options=this.options,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){var s,i,l;(s=this.inputRef.value)==null||s.add(t,e),this._options.push({value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled}),t.selected&&(this.value=t.value||t.text,this.selectedIndex=this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex),this.selectedOptions=(l=this.inputRef.value)==null?void 0:l.selectedOptions),this.requestUpdate()}remove(t){var e,s;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),(s=this.inputRef.value)==null||s.remove(t))}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){var t;(t=this.inputRef.value)==null||t.showPicker()}attributeChangedCallback(t,e,s){var i,l;t==="options"&&(this._options=s?JSON.parse(s):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex):this.options.findIndex(n=>n.value===s),this.selectedOptions=(l=this.inputRef.value)==null?void 0:l.selectedOptions,this.valueChanged(s,e)),super.attributeChangedCallback(t,e,s)}update(t){var e,s;super.update(t),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this.options.findIndex(i=>i.value===this.value),this.selectedOptions=(s=this.inputRef.value)==null?void 0:s.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this.options.length&&(this._options=this.options),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return r.x`
+"use strict";const r=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),l=require("./if-defined-Cni-RHLS.cjs"),d=require("./input-element-C4xJoM-X.cjs"),c=require("./pkt-options-controller-CiuBG6Lt.cjs"),v=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(u,t,e,s)=>{for(var i=s>1?void 0:s?b(t,e):t,o=u.length-1,n;o>=0;o--)(n=u[o])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&f(t,e,i),i};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.options=[],this.value="",this._options=[],this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new v.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.hasAttribute("value")?s.getAttribute("value")??"":s.textContent??"",label:s.textContent||s.getAttribute("value")||"",disabled:s.hasAttribute("disabled"),hidden:s.hasAttribute("data-hidden")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):(this._options=this.options,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){var s,i,o;(s=this.inputRef.value)==null||s.add(t,e),this._options.push({value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled}),t.selected&&(this.value=t.value||t.text,this.selectedIndex=this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions),this.requestUpdate()}remove(t){var e,s;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),(s=this.inputRef.value)==null||s.remove(t))}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){var t;(t=this.inputRef.value)==null||t.showPicker()}attributeChangedCallback(t,e,s){var i,o;t==="options"&&(this._options=s?JSON.parse(s):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex):this.options.findIndex(n=>n.value===s),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions,this.valueChanged(s,e)),super.attributeChangedCallback(t,e,s)}update(t){var e,s;super.update(t),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this.options.findIndex(i=>i.value===this.value),this.selectedOptions=(s=this.inputRef.value)==null?void 0:s.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this.options.length&&(this._options=this.options),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return r.x`
       <pkt-input-wrapper
         ?counter=${this.counter}
         ?disabled=${this.disabled}
@@ -8,22 +8,23 @@
         ?optionalTag=${this.optionalTag}
         ?requiredTag=${this.requiredTag}
         ?useWrapper=${this.useWrapper}
-        ariaDescribedBy=${o.o(this.ariaDescribedBy)}
+        ariaDescribedBy=${l.o(this.ariaDescribedBy)}
         class="pkt-select"
-        errorMessage=${o.o(this.errorMessage)}
+        errorMessage=${l.o(this.errorMessage)}
         forId=${this.id+"-input"}
-        helptext=${o.o(this.helptext)}
-        helptextDropdown=${o.o(this.helptextDropdown)}
-        helptextDropdownButton=${o.o(this.helptextDropdownButton)}
-        label=${o.o(this.label)}
-        optionalText=${o.o(this.optionalText)}
-        requiredText=${o.o(this.requiredText)}
+        helptext=${l.o(this.helptext)}
+        helptextDropdown=${l.o(this.helptextDropdown)}
+        helptextDropdownButton=${l.o(this.helptextDropdownButton)}
+        label=${l.o(this.label)}
+        optionalText=${l.o(this.optionalText)}
+        requiredText=${l.o(this.requiredText)}
+        tagText=${l.o(this.tagText)}
       >
         <select
           class=${t}
           aria-invalid=${this.hasError}
           aria-errormessage=${`${this.id}-error`}
-          aria-labelledby=${o.o(this.ariaLabelledby)}
+          aria-labelledby=${l.o(this.ariaLabelledby)}
           ?disabled=${this.disabled}
           id=${this.id+"-input"}
           name=${(this.name||this.id)+"-input"}

package/dist/{textarea-BrW98O-a.js → textarea-BZL8Mkm0.js}

@@ -3,18 +3,18 @@ import { o as u } from "./if-defined-CmuO4Vz9.js";
 import { r as x } from "./state-Bo2bck5_.js";
 import { e as m, n as c } from "./ref-BBYSqgeW.js";
 import { e as v } from "./class-map-BpTj9gtz.js";
-import { e as b, i as T, t as a } from "./directive-oAbCiebi.js";
+import { e as T, i as b, t as a } from "./directive-oAbCiebi.js";
 import { f as y, m as w } from "./directive-helpers-r-kOS_Mf.js";
-import { P as C } from "./input-element-Cco4PA2M.js";
+import { P as C } from "./input-element-NnrDmp4r.js";
 import { P as E } from "./pkt-slot-controller-BPGj-LC5.js";
-import "./input-wrapper-_Lk9HzHU.js";
+import "./input-wrapper-Dr__Sxql.js";
 import "./icon-CC1js8eR.js";
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const P = b(class extends T {
+const P = T(class extends b {
   constructor(t) {
     if (super(t), t.type !== a.PROPERTY && t.type !== a.ATTRIBUTE && t.type !== a.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
     if (!y(t)) throw Error("`live` bindings can only contain a single expression");
@@ -75,6 +75,7 @@ let o = class extends C {
       .helptextDropdownButton=${this.helptextDropdownButton}
       .optionalText=${this.optionalText}
       .requiredText=${this.requiredText}
+      .tagText=${this.tagText}
       class="pkt-textarea"
     >
       <div class="pkt-contents" ${c(this.helptextSlot)} name="helptext" slot="helptext"></div>

package/dist/{textarea-PHo1w92l.cjs → textarea-CPXsMFUq.cjs}

@@ -1,4 +1,4 @@
-"use strict";const s=require("./element-6DBpyGQm.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),c=require("./state-DPobt-Yz.cjs"),l=require("./ref-iJtiv3o2.cjs"),$=require("./class-map-BBG2gMX4.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-BBbxqP2W.cjs"),x=require("./input-element-CHjLWeKt.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-BND8tUg_.cjs");require("./icon-B_ryAy4Q.cjs");/**
+"use strict";const s=require("./element-6DBpyGQm.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),c=require("./state-DPobt-Yz.cjs"),l=require("./ref-iJtiv3o2.cjs"),$=require("./class-map-BBG2gMX4.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-BBbxqP2W.cjs"),x=require("./input-element-C4xJoM-X.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -22,6 +22,7 @@
       .helptextDropdownButton=${this.helptextDropdownButton}
       .optionalText=${this.optionalText}
       .requiredText=${this.requiredText}
+      .tagText=${this.tagText}
       class="pkt-textarea"
     >
       <div class="pkt-contents" ${l.n(this.helptextSlot)} name="helptext" slot="helptext"></div>

package/dist/{textinput-BrBGjHZc.js → textinput-DjPhmmkB.js}

@@ -3,9 +3,9 @@ import { o as u } from "./if-defined-CmuO4Vz9.js";
 import { r as f } from "./state-Bo2bck5_.js";
 import { e as d, n as m } from "./ref-BBYSqgeW.js";
 import { e as g } from "./class-map-BpTj9gtz.js";
-import { P as x } from "./input-element-Cco4PA2M.js";
+import { P as x } from "./input-element-NnrDmp4r.js";
 import { P as v } from "./pkt-slot-controller-BPGj-LC5.js";
-import "./input-wrapper-_Lk9HzHU.js";
+import "./input-wrapper-Dr__Sxql.js";
 import "./icon-CC1js8eR.js";
 var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (i, e, r, t) => {
   for (var n = t > 1 ? void 0 : t ? b(e, r) : e, l = i.length - 1, c; l >= 0; l--)
@@ -51,6 +51,7 @@ let s = class extends x {
         .helptextDropdownButton=${this.helptextDropdownButton}
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         class="pkt-textinput"
       >
         <div class="pkt-contents" ${m(this.helptextSlot)} name="helptext" slot="helptext"></div>

package/dist/{textinput-CS0OHykQ.cjs → textinput-aNI5kibM.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-6DBpyGQm.cjs"),a=require("./if-defined-Cni-RHLS.cjs"),l=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),c=require("./class-map-BBG2gMX4.cjs"),d=require("./input-element-CHjLWeKt.cjs"),x=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-BND8tUg_.cjs");require("./icon-B_ryAy4Q.cjs");var $=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?f(i,s):i,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&$(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.value="",this.type="text",this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.slotController=new x.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(i,s,n){i==="value"&&this.value!==s&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,s)),super.attributeChangedCallback(i,s,n)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=c.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),n=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
+"use strict";const t=require("./element-6DBpyGQm.cjs"),a=require("./if-defined-Cni-RHLS.cjs"),l=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),c=require("./class-map-BBG2gMX4.cjs"),d=require("./input-element-C4xJoM-X.cjs"),x=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");var $=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?f(i,s):i,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&$(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.value="",this.type="text",this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.slotController=new x.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(i,s,n){i==="value"&&this.value!==s&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,s)),super.attributeChangedCallback(i,s,n)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=c.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),n=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -20,6 +20,7 @@
         .helptextDropdownButton=${this.helptextDropdownButton}
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         class="pkt-textinput"
       >
         <div class="pkt-contents" ${h.n(this.helptextSlot)} name="helptext" slot="helptext"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.0.0",
+  "version": "13.1.2",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^13.0.0",
-    "@oslokommune/punkt-css": "^13.0.0",
+    "@oslokommune/punkt-css": "^13.1.2",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
@@ -58,5 +58,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "8012adb5b795a7ab26d844a3311435fef05121c4"
+  "gitHead": "cb98f3d45e891775f449eb4b78b3ae8cab40725f"
 }

package/src/components/checkbox/checkbox.ts

@@ -18,6 +18,11 @@ export class PktCheckbox extends PktInputElement {
   @property({ type: Boolean }) hideLabel: boolean = false
   @property({ type: Boolean, reflect: true }) checked: boolean | string | null = null
   @property({ type: String, reflect: true }) type: string = 'checkbox'
+  @property({ type: String }) tagText: string | null = null
+  @property({ type: Boolean }) optionalTag: boolean = false
+  @property({ type: String }) optionalText: string = 'Valgfritt'
+  @property({ type: Boolean }) requiredTag: boolean = false
+  @property({ type: String }) requiredText: string = 'Må fylles ut'
 
   connectedCallback() {
     super.connectedCallback()
@@ -60,10 +65,26 @@ export class PktCheckbox extends PktInputElement {
       'pkt-sr-only': this.hideLabel,
     })
 
+    const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
+
+    const tags = () => {
+      return html`
+        ${this.tagText
+          ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
+          : nothing}
+        ${this.optionalTag
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          : nothing}
+        ${this.requiredTag
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          : nothing}
+      `
+    }
+
     const labelAndHelptext = () => {
       return html`
         <label class=${labelClasses} for=${this.id + '-internal'}>
-          ${this.label}
+          ${this.label} ${tags()}
           ${this.checkHelptext
             ? html`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`
             : nothing}

package/src/components/combobox/combobox.ts

@@ -55,6 +55,7 @@ export interface IPktCombobox {
   requiredText?: string
   searchPlaceholder?: string
   tagPlacement?: TPktComboboxTagPlacement | null
+  tagText?: string | null
   value?: string | string[]
 }
 
@@ -248,6 +249,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
         .optionalText=${this.optionalText}
         ?requiredTag=${this.requiredTag}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         ?useWrapper=${this.useWrapper}
         .forId=${this.allowUserInput || this.typeahead ? this.id + '-input' : this.id + '-arrow'}
         class="pkt-combobox__wrapper"

package/src/components/datepicker/datepicker.ts

@@ -552,6 +552,7 @@ export class PktDatepicker extends PktInputElement {
         ?useWrapper=${this.useWrapper}
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         .errorMessage=${this.errorMessage}
         .helptext=${this.helptext}
         .helptextDropdown=${this.helptextDropdown}

package/src/components/input-wrapper/input-wrapper.ts

@@ -27,6 +27,7 @@ type Props = ElementProps<
   | 'optionalText'
   | 'requiredTag'
   | 'requiredText'
+  | 'tagText'
   | 'hasError'
   | 'errorMessage'
   | 'disabled'
@@ -81,6 +82,7 @@ export class PktInputWrapper extends PktElement<Props> {
   @property({ type: String }) optionalText: string = specs.props.optionalText.default
   @property({ type: Boolean }) requiredTag: boolean = specs.props.requiredTag.default
   @property({ type: String }) requiredText: string = specs.props.requiredText.default
+  @property({ type: String }) tagText: string | null = null
   @property({ type: Boolean }) hasError: boolean = specs.props.hasError.default
   @property({ type: String }) errorMessage: string = ''
   @property({ type: Boolean }) disabled: boolean = specs.props.disabled.default
@@ -103,13 +105,7 @@ export class PktInputWrapper extends PktElement<Props> {
       'pkt-inputwrapper--inline': this.inline,
     }
 
-    const tagClasses = {
-      'pkt-tag': true,
-      'pkt-tag--small': true,
-      'pkt-tag--thin-text': true,
-      'pkt-tag--blue-light': this.optionalTag,
-      'pkt-tag--beige': !this.optionalTag && this.requiredTag,
-    }
+    const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
     const describedBy = this.ariaDescribedby
       ? this.ariaDescribedby
@@ -118,17 +114,17 @@ export class PktInputWrapper extends PktElement<Props> {
         : nothing
 
     const tagElement = () => {
-      if (this.optionalTag || this.requiredTag) {
-        return html`<span class=${classMap(tagClasses)}
-          >${this.optionalTag
-            ? this.optionalText
-            : this.requiredTag
-              ? this.requiredText
-              : nothing}</span
-        >`
-      } else {
-        return nothing
-      }
+      return html`
+        ${this.tagText
+          ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
+          : nothing}
+        ${this.optionalTag
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          : nothing}
+        ${this.requiredTag
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          : nothing}
+      `
     }
 
     const labelElement = () => {

package/src/components/radiobutton/radiobutton.ts

@@ -15,6 +15,11 @@ export class PktRadioButton extends PktInputElement {
   @property({ type: Boolean }) hasTile: boolean = false
   @property({ type: Boolean, reflect: true }) checked: boolean | string | null = null
   @property({ type: String, reflect: true }) type: string = 'radio'
+  @property({ type: String }) tagText: string | null = null
+  @property({ type: Boolean }) optionalTag: boolean = false
+  @property({ type: String }) optionalText: string = 'Valgfritt'
+  @property({ type: Boolean }) requiredTag: boolean = false
+  @property({ type: String }) requiredText: string = 'Må fylles ut'
 
   @state() _checked: boolean = false
 
@@ -50,10 +55,26 @@ export class PktRadioButton extends PktInputElement {
       'pkt-sr-only': this.hideLabel,
     })
 
+    const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
+
+    const tags = () => {
+      return html`
+        ${this.tagText
+          ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
+          : nothing}
+        ${this.optionalTag
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          : nothing}
+        ${this.requiredTag
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          : nothing}
+      `
+    }
+
     const labelAndHelptext = () => {
       return html`
         <label class=${labelClasses} for=${this.id + '-internal'}>
-          ${this.label}
+          ${this.label} ${tags()}
           ${this.checkHelptext
             ? html`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`
             : nothing}

package/src/components/select/select.ts

@@ -199,6 +199,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
         label=${ifDefined(this.label)}
         optionalText=${ifDefined(this.optionalText)}
         requiredText=${ifDefined(this.requiredText)}
+        tagText=${ifDefined(this.tagText)}
       >
         <select
           class=${inputClass}

package/src/components/textarea/textarea.ts

@@ -77,6 +77,7 @@ export class PktTextarea extends PktInputElement {
       .helptextDropdownButton=${this.helptextDropdownButton}
       .optionalText=${this.optionalText}
       .requiredText=${this.requiredText}
+      .tagText=${this.tagText}
       class="pkt-textarea"
     >
       <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>

package/src/components/textinput/textinput.ts

@@ -98,6 +98,7 @@ export class PktTextinput extends PktInputElement<Props> {
         .helptextDropdownButton=${this.helptextDropdownButton}
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         class="pkt-textinput"
       >
         <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>

package/dist/checkbox-CJ4tK9RC.cjs

@@ -1,26 +0,0 @@
-"use strict";const e=require("./element-6DBpyGQm.cjs"),a=require("./input-element-CHjLWeKt.cjs"),k=require("./ref-iJtiv3o2.cjs"),o=require("./class-map-BBG2gMX4.cjs");var r=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=(l,t,s,h)=>{for(var i=h>1?void 0:h?u(t,s):t,n=l.length-1,p;n>=0;n--)(p=l[n])&&(i=(h?p(t,s,i):p(i))||i);return h&&i&&r(t,s,i),i};exports.PktCheckbox=class extends a.PktInputElement{constructor(){super(...arguments),this.inputRef=k.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.type="checkbox"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(t,s,h){t==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),t==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(t,s,h)}firstUpdated(t){t.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(t)}render(){const t=o.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),s=o.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),h=o.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),i=()=>e.x`
-        <label class=${h} for=${this.id+"-internal"}>
-          ${this.label}
-          ${this.checkHelptext?e.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.E}
-        </label>
-      `;return e.x`
-      <div class="pkt-input-check">
-        <div class=${t}>
-          ${this.labelPosition==="left"?i():e.E}
-          <input
-            id=${this.id+"-internal"}
-            class=${s}
-            type="checkbox"
-            ?disabled=${this.disabled}
-            name=${this.name+"-internal"}
-            ${k.n(this.inputRef)}
-            @change=${this.toggleChecked}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-            role=${this.isSwitch?"switch":"checkbox"}
-          />
-          ${this.labelPosition==="right"?i():e.E}
-        </div>
-      </div>
-    `}toggleChecked(t){t.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(":checked"),this.valueChecked(this.checked))}};c([e.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"value",2);c([e.n({type:String})],exports.PktCheckbox.prototype,"checkHelptext",2);c([e.n({type:Boolean})],exports.PktCheckbox.prototype,"defaultChecked",2);c([e.n({type:Boolean})],exports.PktCheckbox.prototype,"hasTile",2);c([e.n({type:Boolean})],exports.PktCheckbox.prototype,"isSwitch",2);c([e.n({type:String})],exports.PktCheckbox.prototype,"labelPosition",2);c([e.n({type:Boolean})],exports.PktCheckbox.prototype,"hideLabel",2);c([e.n({type:Boolean,reflect:!0})],exports.PktCheckbox.prototype,"checked",2);c([e.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"type",2);exports.PktCheckbox=c([e.t("pkt-checkbox")],exports.PktCheckbox);

package/dist/checkbox-cD_5LDzV.js

@@ -1,101 +0,0 @@
-import { E as n, x as r, n as s, a as d } from "./element-CgEWt74-.js";
-import { P as k } from "./input-element-Cco4PA2M.js";
-import { e as b, n as f } from "./ref-BBYSqgeW.js";
-import { e as u } from "./class-map-BpTj9gtz.js";
-var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, h, c, l) => {
-  for (var p = l > 1 ? void 0 : l ? y(h, c) : h, a = e.length - 1, o; a >= 0; a--)
-    (o = e[a]) && (p = (l ? o(h, c, p) : o(p)) || p);
-  return l && p && _(h, c, p), p;
-};
-let t = class extends k {
-  constructor() {
-    super(...arguments), this.inputRef = b(), this.value = "", this.checkHelptext = null, this.defaultChecked = !1, this.hasTile = !1, this.isSwitch = !1, this.labelPosition = "right", this.hideLabel = !1, this.checked = null, this.type = "checkbox";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  attributeChangedCallback(e, h, c) {
-    e === "defaultChecked" && !this.checked && (this.checked = this.defaultChecked), e === "checked" && (this.checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.attributeChangedCallback(e, h, c);
-  }
-  firstUpdated(e) {
-    e.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), super.firstUpdated(e);
-  }
-  render() {
-    const e = u({
-      "pkt-input-check__input": !0,
-      "pkt-input-check__input--tile": this.hasTile,
-      "pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
-    }), h = u({
-      "pkt-input-check__input-checkbox": !0,
-      "pkt-input-check__input-checkbox--error": this.hasError
-    }), c = u({
-      "pkt-input-check__input-label": !0,
-      "pkt-input-check__input-label--disabled": this.disabled,
-      "pkt-input-check__input-label--left": this.labelPosition === "left",
-      "pkt-input-check__input-label--right": this.labelPosition === "right",
-      "pkt-sr-only": this.hideLabel
-    }), l = () => r`
-        <label class=${c} for=${this.id + "-internal"}>
-          ${this.label}
-          ${this.checkHelptext ? r`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : n}
-        </label>
-      `;
-    return r`
-      <div class="pkt-input-check">
-        <div class=${e}>
-          ${this.labelPosition === "left" ? l() : n}
-          <input
-            id=${this.id + "-internal"}
-            class=${h}
-            type="checkbox"
-            ?disabled=${this.disabled}
-            name=${this.name + "-internal"}
-            ${f(this.inputRef)}
-            @change=${this.toggleChecked}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-            role=${this.isSwitch ? "switch" : "checkbox"}
-          />
-          ${this.labelPosition === "right" ? l() : n}
-        </div>
-      </div>
-    `;
-  }
-  toggleChecked(e) {
-    e.stopImmediatePropagation(), this.touched = !0, this.inputRef.value && (this.checked = this.inputRef.value.matches(":checked"), this.valueChecked(this.checked));
-  }
-};
-i([
-  s({ type: String, reflect: !0 })
-], t.prototype, "value", 2);
-i([
-  s({ type: String })
-], t.prototype, "checkHelptext", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "defaultChecked", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "hasTile", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "isSwitch", 2);
-i([
-  s({ type: String })
-], t.prototype, "labelPosition", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "hideLabel", 2);
-i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "checked", 2);
-i([
-  s({ type: String, reflect: !0 })
-], t.prototype, "type", 2);
-t = i([
-  d("pkt-checkbox")
-], t);
-export {
-  t as P
-};