@oslokommune/punkt-elements 12.26.2 → 12.27.0

package/dist/textarea-WWRAA1LV.cjs

@@ -0,0 +1,49 @@
+"use strict";const r=require("./element-B0UgldHm.cjs"),u=require("./state-CG-binsl.cjs"),n=require("./ref-DDYBJ4EB.cjs"),p=require("./class-map-aeZWY44S.cjs"),d=require("./input-element-Dnda8hac.cjs"),c=require("./pkt-slot-controller-Oc32unDk.cjs");require("./input-wrapper-DeCY6nta.cjs");require("./icon-PWn7rnfg.cjs");/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const $=r.e(class extends r.i{constructor(i){if(super(i),i.type!==r.t$1.PROPERTY&&i.type!==r.t$1.ATTRIBUTE&&i.type!==r.t$1.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!n.f(i))throw Error("`live` bindings can only contain a single expression")}render(i){return i}update(i,[e]){if(e===r.T||e===r.E)return e;const s=i.element,t=i.name;if(i.type===r.t$1.PROPERTY){if(e===s[t])return r.T}else if(i.type===r.t$1.BOOLEAN_ATTRIBUTE){if(!!e===s.hasAttribute(t))return r.T}else if(i.type===r.t$1.ATTRIBUTE&&s.getAttribute(t)===e+"")return r.T;return n.m(i),e}});var x=Object.defineProperty,T=Object.getOwnPropertyDescriptor,o=(i,e,s,t)=>{for(var a=t>1?void 0:t?T(e,s):e,l=i.length-1,h;l>=0;l--)(h=i[l])&&(a=(t?h(e,s,a):h(a))||a);return t&&a&&x(e,s,a),a};exports.PktTextarea=class extends d.PktInputElement{constructor(){super(),this.inputRef=n.e(),this.helptextSlot=n.e(),this.value="",this.autocomplete="off",this.placeholder="",this.rows=null,this.counterCurrent=0,this.slotController=new c.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(e,s,t){e==="value"&&this.value!==s&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,s)),super.attributeChangedCallback(e,s,t)}updated(e){var s;super.updated(e),e.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,e.get("value"))),e.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const e=p.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}),s=this.ariaLabelledby||`${this.id}-input-label`;return r.x`<pkt-input-wrapper
+      label=${this.label}
+      ?counter=${this.counter}
+      ?disabled=${this.disabled}
+      ?hasError=${this.hasError}
+      ?inline=${this.inline}
+      ?optionalTag=${this.optionalTag}
+      ?required=${this.required}
+      ?requiredTag=${this.requiredTag}
+      ?useWrapper=${this.useWrapper}
+      .ariaDescribedBy=${this.ariaDescribedBy}
+      .counterCurrent=${this.counterCurrent}
+      .counterMaxLength=${this.counterMaxLength}
+      .errorMessage=${this.errorMessage}
+      .forId="${this.id+"-input"}"
+      .helptext=${this.helptext}
+      .helptextDropdown=${this.helptextDropdown}
+      .helptextDropdownButton=${this.helptextDropdownButton}
+      .optionalText=${this.optionalText}
+      .requiredText=${this.requiredText}
+      class="pkt-textarea"
+    >
+      <div class="pkt-contents" ${n.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      <textarea
+        ${n.n(this.inputRef)}
+        class=${e}
+        id=${this.id+"-input"}
+        name=${(this.name||this.id)+"-input"}
+        placeholder=${this.placeholder??r.E}
+        .value=${$(this.value)}
+        minlength=${this.minlength||r.E}
+        maxlength=${this.maxlength||r.E}
+        ?readonly=${this.readonly}
+        autocomplete=${this.autocomplete}
+        aria-labelledby=${s}
+        aria-invalid=${this.hasError}
+        aria-errormessage=${`${this.id}-error`}
+        rows=${this.rows}
+        ?disabled=${this.disabled}
+        @input=${t=>{this.value=t.target.value,this.onInput(),t.stopImmediatePropagation()}}
+        @change=${t=>{t.stopImmediatePropagation()}}
+        @focus=${t=>{this.onFocus(),t.stopImmediatePropagation()}}
+        @blur=${t=>{this.value=t.target.value,this.onBlur(),t.stopImmediatePropagation()}}
+      ></textarea>
+    </pkt-input-wrapper>`}};o([r.n({type:String,reflect:!0})],exports.PktTextarea.prototype,"value",2);o([r.n({type:String})],exports.PktTextarea.prototype,"autocomplete",2);o([r.n({type:String})],exports.PktTextarea.prototype,"placeholder",2);o([r.n({type:Number})],exports.PktTextarea.prototype,"rows",2);o([u.r()],exports.PktTextarea.prototype,"counterCurrent",2);exports.PktTextarea=o([r.t("pkt-textarea")],exports.PktTextarea);

package/dist/{textinput-C9pkRR6S.cjs → textinput-CE5AzOur.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-B0UgldHm.cjs"),h=require("./state-CG-binsl.cjs"),o=require("./ref-DDYBJ4EB.cjs"),l=require("./class-map-aeZWY44S.cjs"),c=require("./input-element-Dnda8hac.cjs");require("./input-wrapper-nvacN4EY.cjs");require("./icon-PWn7rnfg.cjs");var d=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(p,i,n,s)=>{for(var e=s>1?void 0:s?x(i,n):i,a=p.length-1,u;a>=0;a--)(u=p[a])&&(e=(s?u(i,n,e):u(e))||e);return s&&e&&d(i,n,e),e};exports.PktTextinput=class extends c.PktInputElement{constructor(){super(...arguments),this.value="",this.type="text",this.size=null,this.autocomplete="off",this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.inputRef=o.e()}attributeChangedCallback(i,n,s){i==="value"&&this.value!==n&&(this.counterCurrent=s?s.length:0,this.valueChanged(s,n)),super.attributeChangedCallback(i,n,s)}updated(i){var n;super.updated(i),i.has("value")&&(this.counterCurrent=((n=this.value)==null?void 0:n.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,n=l.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}),s=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
+"use strict";const t=require("./element-B0UgldHm.cjs"),u=require("./state-CG-binsl.cjs"),p=require("./ref-DDYBJ4EB.cjs"),l=require("./class-map-aeZWY44S.cjs"),c=require("./input-element-Dnda8hac.cjs"),x=require("./pkt-slot-controller-Oc32unDk.cjs");require("./input-wrapper-DeCY6nta.cjs");require("./icon-PWn7rnfg.cjs");var d=Object.defineProperty,$=Object.getOwnPropertyDescriptor,r=(o,i,n,s)=>{for(var e=s>1?void 0:s?$(i,n):i,a=o.length-1,h;a>=0;a--)(h=o[a])&&(e=(s?h(i,n,e):h(e))||e);return s&&e&&d(i,n,e),e};exports.PktTextinput=class extends c.PktInputElement{constructor(){super(),this.inputRef=p.e(),this.helptextSlot=p.e(),this.value="",this.type="text",this.size=null,this.autocomplete="off",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,n,s){i==="value"&&this.value!==n&&(this.counterCurrent=s?s.length:0,this.valueChanged(s,n)),super.attributeChangedCallback(i,n,s)}updated(i){var n;super.updated(i),i.has("value")&&(this.counterCurrent=((n=this.value)==null?void 0:n.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,n=l.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}),s=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -21,10 +21,11 @@
         .requiredText=${this.requiredText}
         class="pkt-textinput"
       >
+        <div class="pkt-contents" ${p.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-input__container">
           ${this.prefix?t.x`<div class="pkt-input-prefix">${this.prefix}</div>`:t.E}
           <input
-            ${o.n(this.inputRef)}
+            ${p.n(this.inputRef)}
             class=${n}
             type=${this.type}
             name=${(this.name||this.id)+"-input"}
@@ -60,4 +61,4 @@
           ${!this.suffix&&i?t.x`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>`:t.E}
         </div>
       </pkt-input-wrapper>
-    `}};r([t.n({type:String,reflect:!0})],exports.PktTextinput.prototype,"value",2);r([t.n({type:String})],exports.PktTextinput.prototype,"type",2);r([t.n({type:Number})],exports.PktTextinput.prototype,"size",2);r([t.n({type:String})],exports.PktTextinput.prototype,"autocomplete",2);r([t.n({type:String})],exports.PktTextinput.prototype,"iconNameRight",2);r([t.n({type:String})],exports.PktTextinput.prototype,"prefix",2);r([t.n({type:String})],exports.PktTextinput.prototype,"suffix",2);r([t.n({type:Boolean})],exports.PktTextinput.prototype,"omitSearchIcon",2);r([h.r()],exports.PktTextinput.prototype,"counterCurrent",2);exports.PktTextinput=r([t.t("pkt-textinput")],exports.PktTextinput);
+    `}};r([t.n({type:String,reflect:!0})],exports.PktTextinput.prototype,"value",2);r([t.n({type:String})],exports.PktTextinput.prototype,"type",2);r([t.n({type:Number})],exports.PktTextinput.prototype,"size",2);r([t.n({type:String})],exports.PktTextinput.prototype,"autocomplete",2);r([t.n({type:String})],exports.PktTextinput.prototype,"iconNameRight",2);r([t.n({type:String})],exports.PktTextinput.prototype,"prefix",2);r([t.n({type:String})],exports.PktTextinput.prototype,"suffix",2);r([t.n({type:Boolean})],exports.PktTextinput.prototype,"omitSearchIcon",2);r([u.r()],exports.PktTextinput.prototype,"counterCurrent",2);exports.PktTextinput=r([t.t("pkt-textinput")],exports.PktTextinput);

package/dist/{textinput-Buj2CAKl.js → textinput-CZIE3v3S.js}

@@ -1,28 +1,29 @@
-import { x as h, E as n, n as o, t as c } from "./element-BKrU5soj.js";
-import { r as d } from "./state-C36ZmZgt.js";
-import { e as $, n as m } from "./ref-D5qG7OFB.js";
-import { e as g } from "./class-map-CQzsZCwS.js";
-import { P as f } from "./input-element-URKBm_vS.js";
-import "./input-wrapper-CWvzXs6X.js";
+import { x as h, E as n, n as p, t as $ } from "./element-BKrU5soj.js";
+import { r as m } from "./state-C36ZmZgt.js";
+import { e as c, n as d } from "./ref-D5qG7OFB.js";
+import { e as f } from "./class-map-CQzsZCwS.js";
+import { P as g } from "./input-element-URKBm_vS.js";
+import { P as x } from "./pkt-slot-controller-Clbye6cM.js";
+import "./input-wrapper-Df18_PvD.js";
 import "./icon-Bsb0MB2h.js";
-var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (i, e, r, t) => {
-  for (var p = t > 1 ? void 0 : t ? y(e, r) : e, u = i.length - 1, l; u >= 0; u--)
-    (l = i[u]) && (p = (t ? l(e, r, p) : l(p)) || p);
-  return t && p && x(e, r, p), p;
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, i, r, t) => {
+  for (var a = t > 1 ? void 0 : t ? v(i, r) : i, l = e.length - 1, u; l >= 0; l--)
+    (u = e[l]) && (a = (t ? u(i, r, a) : u(a)) || a);
+  return t && a && y(i, r, a), a;
 };
-let s = class extends f {
+let s = class extends g {
   constructor() {
-    super(...arguments), this.value = "", this.type = "text", this.size = null, this.autocomplete = "off", this.iconNameRight = null, this.prefix = null, this.suffix = null, this.omitSearchIcon = !1, this.counterCurrent = 0, this.inputRef = $();
+    super(), this.inputRef = c(), this.helptextSlot = c(), this.value = "", this.type = "text", this.size = null, this.autocomplete = "off", this.iconNameRight = null, this.prefix = null, this.suffix = null, this.omitSearchIcon = !1, this.counterCurrent = 0, this.slotController = new x(this, this.helptextSlot);
   }
-  attributeChangedCallback(i, e, r) {
-    i === "value" && this.value !== e && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, e)), super.attributeChangedCallback(i, e, r);
+  attributeChangedCallback(e, i, r) {
+    e === "value" && this.value !== i && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, i)), super.attributeChangedCallback(e, i, r);
   }
-  updated(i) {
-    var e;
-    super.updated(i), i.has("value") && (this.counterCurrent = ((e = this.value) == null ? void 0 : e.length) || 0, this.valueChanged(this.value, i.get("value"))), i.has("id") && !this.name && this.id && (this.name = this.id);
+  updated(e) {
+    var i;
+    super.updated(e), e.has("value") && (this.counterCurrent = ((i = this.value) == null ? void 0 : i.length) || 0, this.valueChanged(this.value, e.get("value"))), e.has("id") && !this.name && this.id && (this.name = this.id);
   }
   render() {
-    const i = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, e = g({
+    const e = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, i = f({
       "pkt-input": !0,
       "pkt-input--fullwidth": this.fullwidth,
       "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
@@ -50,11 +51,12 @@ let s = class extends f {
         .requiredText=${this.requiredText}
         class="pkt-textinput"
       >
+        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-input__container">
           ${this.prefix ? h`<div class="pkt-input-prefix">${this.prefix}</div>` : n}
           <input
-            ${m(this.inputRef)}
-            class=${e}
+            ${d(this.inputRef)}
+            class=${i}
             type=${this.type}
             name=${(this.name || this.id) + "-input"}
             id=${this.id + "-input"}
@@ -88,47 +90,47 @@ let s = class extends f {
                       class="pkt-input-suffix-icon"
                       name=${this.iconNameRight}
                     ></pkt-icon>` : n}
-                ${i ? h`<pkt-icon
+                ${e ? h`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name="magnifying-glass-big"
                     ></pkt-icon>` : n}
               </div>` : n}
           ${!this.suffix && this.iconNameRight ? h`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : n}
-          ${!this.suffix && i ? h`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : n}
+          ${!this.suffix && e ? h`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : n}
         </div>
       </pkt-input-wrapper>
     `;
   }
 };
-a([
-  o({ type: String, reflect: !0 })
+o([
+  p({ type: String, reflect: !0 })
 ], s.prototype, "value", 2);
-a([
-  o({ type: String })
+o([
+  p({ type: String })
 ], s.prototype, "type", 2);
-a([
-  o({ type: Number })
+o([
+  p({ type: Number })
 ], s.prototype, "size", 2);
-a([
-  o({ type: String })
+o([
+  p({ type: String })
 ], s.prototype, "autocomplete", 2);
-a([
-  o({ type: String })
+o([
+  p({ type: String })
 ], s.prototype, "iconNameRight", 2);
-a([
-  o({ type: String })
+o([
+  p({ type: String })
 ], s.prototype, "prefix", 2);
-a([
-  o({ type: String })
+o([
+  p({ type: String })
 ], s.prototype, "suffix", 2);
-a([
-  o({ type: Boolean })
+o([
+  p({ type: Boolean })
 ], s.prototype, "omitSearchIcon", 2);
-a([
-  d()
+o([
+  m()
 ], s.prototype, "counterCurrent", 2);
-s = a([
-  c("pkt-textinput")
+s = o([
+  $("pkt-textinput")
 ], s);
 export {
   s as P

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.26.2",
+  "version": "12.27.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.23.0",
-    "@oslokommune/punkt-css": "^12.26.0",
+    "@oslokommune/punkt-css": "^12.27.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "40edb9d3d4eab9308ced03492923de706deff59d"
+  "gitHead": "3f9b61a0e5d35866d6bc44088e4793798632d0e0"
 }

package/src/components/datepicker/datepicker.ts

@@ -13,6 +13,7 @@ import '@/components/calendar'
 import '@/components/icon'
 import '@/components/input-wrapper'
 import '@/components/tag'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 @customElement('pkt-datepicker')
@@ -82,6 +83,11 @@ export class PktDatepicker extends PktInputElement {
    * Housekeeping / lifecycle methods
    */
 
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.helptextSlot)
+  }
+
   async connectedCallback() {
     super.connectedCallback()
 
@@ -179,6 +185,7 @@ export class PktDatepicker extends PktInputElement {
   btnRef: Ref<HTMLButtonElement> = createRef()
   calRef: Ref<PktCalendar> = createRef()
   popupRef: Ref<HTMLDivElement> = createRef()
+  helptextSlot: Ref<HTMLElement> = createRef()
 
   /**
    * Rendering
@@ -518,6 +525,7 @@ export class PktDatepicker extends PktInputElement {
         .ariaDescribedBy=${this.ariaDescribedBy}
         class="pkt-datepicker"
       >
+        <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
         ${this.multiple ? this.renderTags() : nothing}
         <div
           class="pkt-datepicker__inputs ${this.range && this.showRangeLabels

package/src/components/helptext/helptext.ts

@@ -1,28 +1,33 @@
 import { PktElement } from '@/base-elements/element'
 import { html, nothing } from 'lit'
+import { createRef, ref, Ref } from 'lit/directives/ref.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { uuidish } from '@/utils/stringutils'
 import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/icon'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
 
 @customElement('pkt-helptext')
 export class PktHelptext extends PktElement {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
   constructor() {
     super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
   }
 
   @property({ type: String, reflect: true })
   forId: string = uuidish()
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   helptext: string = ''
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   helptextDropdown: string = ''
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   helptextDropdownButton: string = specs.props.helptextDropdownButton.default
 
   @state() isHelpTextOpen: boolean = false
@@ -39,44 +44,45 @@ export class PktHelptext extends PktElement {
       )
     }
 
-    const helptextElement = () => {
-      if (this.helptext || this.helptextDropdown) {
-        return html`<div>
-          ${this.helptext
-            ? html`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
-                ${unsafeHTML(this.helptext)}
-              </div>`
-            : nothing}
-          ${this.helptextDropdown
-            ? html`<div class="pkt-inputwrapper__helptext-expandable">
-                <button
-                  class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
-                  type="button"
-                  @click=${toggleDropdown}
-                >
-                  <pkt-icon
-                    class="pkt-btn__icon"
-                    name="${this.isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}"
-                  ></pkt-icon>
-                  <span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton)}</span>
-                </button>
-                <div
-                  class="${classMap({
-                    'pkt-inputwrapper__helptext': true,
-                    'pkt-inputwrapper__helptext-expandable-open': this.isHelpTextOpen,
-                    'pkt-inputwrapper__helptext-expandable-closed': !this.isHelpTextOpen,
-                  })}"
-                >
-                  ${unsafeHTML(this.helptextDropdown)}
-                </div>
-              </div>`
-            : nothing}
+    const helptextDropdown = () => {
+      if (this.helptextDropdown) {
+        return html`<div class="pkt-inputwrapper__helptext-expandable">
+          <button
+            class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
+            type="button"
+            @click=${toggleDropdown}
+          >
+            <pkt-icon
+              class="pkt-btn__icon"
+              name="${this.isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}"
+            ></pkt-icon>
+            <span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton)}</span>
+          </button>
+          <div
+            class="${classMap({
+              'pkt-inputwrapper__helptext': true,
+              'pkt-inputwrapper__helptext-expandable-open': this.isHelpTextOpen,
+              'pkt-inputwrapper__helptext-expandable-closed': !this.isHelpTextOpen,
+            })}"
+          >
+            ${unsafeHTML(this.helptextDropdown)}
+          </div>
         </div>`
       } else {
         return nothing
       }
     }
 
+    const helptextElement = () => {
+      return html`<div>
+        <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
+          <div class="pkt-contents" ${ref(this.defaultSlot)} name="helptext"></div>
+          ${this.helptext && unsafeHTML(this.helptext)}
+        </div>
+        ${helptextDropdown()}
+      </div>`
+    }
+
     return html`${helptextElement()}`
   }
 }

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

@@ -1,10 +1,10 @@
 import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref, Ref, createRef } from 'lit/directives/ref.js'
-import { html, nothing } from 'lit'
+import { html, nothing, PropertyValues } from 'lit'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { classMap } from 'lit/directives/class-map.js'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { uuidish } from '@/utils/stringutils'
 import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/helptext'
@@ -13,10 +13,12 @@ import '@/components/icon'
 @customElement('pkt-input-wrapper')
 export class PktInputWrapper extends PktElement {
   defaultSlot: Ref<HTMLElement> = createRef()
+  helptextSlot: Ref<HTMLElement> = createRef()
+  @state() hasHelptextSlot: boolean = false
 
   constructor() {
     super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
+    this.slotController = new PktSlotController(this, this.defaultSlot, this.helptextSlot)
   }
 
   /**
@@ -43,6 +45,15 @@ export class PktInputWrapper extends PktElement {
   @property({ type: Boolean }) useWrapper: boolean = specs.props.useWrapper.default
   @property({ type: String, reflect: true }) role: string | null = 'group'
 
+  public updateSlots(): void {
+    this.hasHelptextSlot = this.slotController.filledSlots.has('helptext')
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    this.updateSlots()
+    super.updated(changedProperties)
+  }
+
   render() {
     const classes = {
       'pkt-inputwrapper': true,
@@ -111,22 +122,20 @@ export class PktInputWrapper extends PktElement {
     }
 
     const helptextElement = () => {
-      if (this.useWrapper && (this.helptext || this.helptextDropdown)) {
-        return html`
-          <pkt-helptext
-            .forId=${this.forId}
-            .helptext=${this.helptext}
-            .helptextDropdown=${this.helptextDropdown}
-            .helptextDropdownButton=${this.helptextDropdownButton ||
-            specs.props.helptextDropdownButton.default}
-            @toggleHelpText=${(e: CustomEvent) => {
-              this.toggleDropdown(e)
-            }}
-          ></pkt-helptext>
-        `
-      } else {
-        return nothing
-      }
+      return html`
+        <pkt-helptext
+          .forId=${this.forId}
+          .helptext=${this.helptext}
+          .helptextDropdown=${this.helptextDropdown}
+          .helptextDropdownButton=${this.helptextDropdownButton ||
+          specs.props.helptextDropdownButton.default}
+          @toggleHelpText=${(e: CustomEvent) => {
+            this.toggleDropdown(e)
+          }}
+          ${ref(this.helptextSlot)}
+          name="helptext"
+        ></pkt-helptext>
+      `
     }
 
     const counterElement = () => {

package/src/components/select/select.ts

@@ -4,6 +4,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { PktInputElement } from '@/base-elements/input-element'
 import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import '@/components/input-wrapper'
 
 export type TSelectOption = {
@@ -31,17 +32,19 @@ export interface IPktSelect {
 
 @customElement('pkt-select')
 export class PktSelect extends PktInputElement implements IPktSelect {
-  private selectRef: Ref<HTMLSelectElement> = createRef()
-  defaultSlot: Ref<HTMLElement> = createRef()
+  private inputRef: Ref<HTMLSelectElement> = createRef()
+  private helptextSlot: Ref<HTMLElement> = createRef()
 
   @property({ type: Array }) options: TSelectOption[] = []
-  @property({ type: String }) value: string = ''
+  @property({ type: String, reflect: true }) value: string = ''
 
   @state() private _options: TSelectOption[] = []
 
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)
+    this.slotController = new PktSlotController(this, this.helptextSlot)
+    this.slotController.skipOptions = true
   }
 
   // Used for initilization
@@ -73,9 +76,23 @@ export class PktSelect extends PktInputElement implements IPktSelect {
     if (name === 'options') {
       this._options = value ? JSON.parse(value) : []
     }
+    if (name === 'value' && this.value !== _old) {
+      this.valueChanged(value, _old)
+    }
     super.attributeChangedCallback(name, _old, value)
   }
 
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties)
+    if (changedProperties.has('value')) {
+      this.counterCurrent = this.value?.length || 0
+      this.valueChanged(this.value, changedProperties.get('value'))
+    }
+    if (changedProperties.has('id')) {
+      !this.name && this.id && (this.name = this.id)
+    }
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties)
     if (this.options.length) {
@@ -100,7 +117,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
         .counterMaxLength=${this.counterMaxLength}
         class="pkt-select"
         errorMessage=${ifDefined(this.errorMessage)}
-        forId=${this.id}
+        forId=${this.id + '-input'}
         helptext=${ifDefined(this.helptext)}
         helptextDropdown=${ifDefined(this.helptextDropdown)}
         helptextDropdownButton=${ifDefined(this.helptextDropdownButton)}
@@ -114,11 +131,26 @@ export class PktSelect extends PktInputElement implements IPktSelect {
           aria-errormessage=${`${this.id}-error`}
           aria-labelledby=${ifDefined(this.ariaLabelledby)}
           ?disabled=${this.disabled}
-          id=${this.id}
-          name=${this.name || this.id}
+          id=${this.id + '-input'}
+          name=${(this.name || this.id) + '-input'}
           value=${this.value}
-          ${ref(this.selectRef)}
-          ${ref(this.defaultSlot)}
+          @change=${(e: Event) => {
+            this.value = (e.target as HTMLSelectElement).value
+            e.stopImmediatePropagation()
+          }}
+          @input=${(e: Event) => {
+            this.onInput()
+            e.stopImmediatePropagation()
+          }}
+          @focus=${(e: FocusEvent) => {
+            this.onFocus()
+            e.stopImmediatePropagation()
+          }}
+          @blur=${(e: FocusEvent) => {
+            this.onBlur()
+            e.stopImmediatePropagation()
+          }}
+          ${ref(this.inputRef)}
         >
           ${this._options.length > 0 &&
           this._options.map(
@@ -132,6 +164,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
               </option>`,
           )}
         </select>
+        <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
       </pkt-input-wrapper>
     `
   }

package/src/components/textarea/textarea.ts

@@ -4,12 +4,16 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { live } from 'lit/directives/live.js'
 import { PktInputElement } from '@/base-elements/input-element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
 
 import '@/components/input-wrapper'
 import '@/components/icon'
 
 @customElement('pkt-textarea')
 export class PktTextarea extends PktInputElement {
+  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  private helptextSlot: Ref<HTMLElement> = createRef()
+
   @property({ type: String, reflect: true })
   value: string = ''
 
@@ -24,7 +28,10 @@ export class PktTextarea extends PktInputElement {
 
   @state() counterCurrent = 0
 
-  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.helptextSlot)
+  }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
     if (name === 'value' && this.value !== _old) {
@@ -79,6 +86,7 @@ export class PktTextarea extends PktInputElement {
       .requiredText=${this.requiredText}
       class="pkt-textarea"
     >
+      <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
       <textarea
         ${ref(this.inputRef)}
         class=${inputClasses}

package/src/components/textinput/textinput.ts

@@ -3,11 +3,16 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { PktInputElement } from '@/base-elements/input-element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+
 import '@/components/input-wrapper'
 import '@/components/icon'
 
 @customElement('pkt-textinput')
 export class PktTextinput extends PktInputElement {
+  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  private helptextSlot: Ref<HTMLElement> = createRef()
+
   @property({ type: String, reflect: true })
   value: string = ''
 
@@ -34,7 +39,10 @@ export class PktTextinput extends PktInputElement {
 
   @state() counterCurrent = 0
 
-  private inputRef: Ref<HTMLInputElement> = createRef()
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.helptextSlot)
+  }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
     if (name === 'value' && this.value !== _old) {
@@ -92,6 +100,7 @@ export class PktTextinput extends PktInputElement {
         .requiredText=${this.requiredText}
         class="pkt-textinput"
       >
+        <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-input__container">
           ${this.prefix ? html`<div class="pkt-input-prefix">${this.prefix}</div>` : nothing}
           <input