@oslokommune/punkt-elements 12.17.0 → 12.17.2

package/dist/{textarea-oZpJKjwI.js → textarea-BTpJjEhO.js}

@@ -1,15 +1,15 @@
-import { T as u, E as d, r as c, a as $, x as f, n as l } from "./index-BXyp3qCS.js";
-import { e as g, i as m, a as n, t as b } from "./custom-element-CWfU4dcr.js";
-import { f as v, m as T, e as x, n as y } from "./ref-B5hXBqpP.js";
-import { e as w } from "./class-map-d4EVPLBg.js";
-import "./input-wrapper-BbLHt2GC.js";
-import "./index-BPPtpQWt.js";
+import { T as l, E as h, r as c, a as $, x as g, n as p } from "./index-CFDwiDTU.js";
+import { e as m, i as f, a as n, t as b } from "./custom-element-CWfU4dcr.js";
+import { f as v, m as x, e as T, n as y } from "./ref-CaiKp3S2.js";
+import { e as w } from "./class-map-CBvUV2N3.js";
+import "./input-wrapper-6vTrKtsW.js";
+import "./index-RwtTBIhT.js";
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const E = g(class extends m {
+const E = m(class extends f {
   constructor(t) {
     if (super(t), t.type !== n.PROPERTY && t.type !== n.ATTRIBUTE && t.type !== n.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
     if (!v(t)) throw Error("`live` bindings can only contain a single expression");
@@ -18,24 +18,24 @@ const E = g(class extends m {
     return t;
   }
   update(t, [r]) {
-    if (r === u || r === d) return r;
+    if (r === l || r === h) return r;
     const e = t.element, i = t.name;
     if (t.type === n.PROPERTY) {
-      if (r === e[i]) return u;
+      if (r === e[i]) return l;
     } else if (t.type === n.BOOLEAN_ATTRIBUTE) {
-      if (!!r === e.hasAttribute(i)) return u;
-    } else if (t.type === n.ATTRIBUTE && e.getAttribute(i) === r + "") return u;
-    return T(t), r;
+      if (!!r === e.hasAttribute(i)) return l;
+    } else if (t.type === n.ATTRIBUTE && e.getAttribute(i) === r + "") return l;
+    return x(t), r;
   }
 });
 var C = Object.defineProperty, B = Object.getOwnPropertyDescriptor, o = (t, r, e, i) => {
-  for (var a = i > 1 ? void 0 : i ? B(r, e) : r, p = t.length - 1, h; p >= 0; p--)
-    (h = t[p]) && (a = (i ? h(r, e, a) : h(a)) || a);
+  for (var a = i > 1 ? void 0 : i ? B(r, e) : r, u = t.length - 1, d; u >= 0; u--)
+    (d = t[u]) && (a = (i ? d(r, e, a) : d(a)) || a);
   return i && a && C(r, e, a), a;
 };
 let s = class extends $ {
   constructor() {
-    super(...arguments), this.value = "", this.autocomplete = "off", this.placeholder = "", this.rows = null, this.counterCurrent = 0, this.inputRef = x();
+    super(...arguments), this.value = "", this.autocomplete = "off", this.placeholder = "", this.rows = null, this.counterCurrent = 0, this.inputRef = T();
   }
   attributeChangedCallback(t, r, e) {
     t === "value" && this.value !== r && (this.counterCurrent = e ? e.length : 0, this.valueChanged(e, r)), super.attributeChangedCallback(t, r, e);
@@ -50,7 +50,7 @@ let s = class extends $ {
       "pkt-input--fullwidth": this.fullwidth,
       "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
     }), r = this.ariaLabelledby || `${this.id}-input-label`;
-    return f`<pkt-input-wrapper
+    return g`<pkt-input-wrapper
       label="${this.label}"
       ?counter=${this.counter}
       ?disabled=${this.disabled}
@@ -73,11 +73,15 @@ let s = class extends $ {
       class="pkt-textarea"
     >
       <textarea
+        ${y(this.inputRef)}
         class=${t}
         id=${this.id + "-input"}
         name=${(this.name || this.id) + "-input"}
-        placeholder=${this.placeholder ?? d}
+        placeholder=${this.placeholder ?? h}
         .value=${E(this.value)}
+        minlength=${this.minlength || h}
+        maxlength=${this.maxlength || h}
+        ?readonly=${this.readonly}
         autocomplete=${this.autocomplete}
         aria-labelledby=${r}
         aria-invalid=${this.hasError}
@@ -96,22 +100,21 @@ let s = class extends $ {
         @blur=${(e) => {
       this.value = e.target.value, this.onBlur(), e.stopImmediatePropagation();
     }}
-        ${y(this.inputRef)}
       ></textarea>
     </pkt-input-wrapper>`;
   }
 };
 o([
-  l({ type: String, reflect: !0 })
+  p({ type: String, reflect: !0 })
 ], s.prototype, "value", 2);
 o([
-  l({ type: String })
+  p({ type: String })
 ], s.prototype, "autocomplete", 2);
 o([
-  l({ type: String, reflect: !0 })
+  p({ type: String })
 ], s.prototype, "placeholder", 2);
 o([
-  l({ type: Number, reflect: !0 })
+  p({ type: Number })
 ], s.prototype, "rows", 2);
 o([
   c()

package/dist/{textinput-BD4p3Biy.cjs → textinput-BIhQEr8z.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./index-BsgcXRmM.cjs"),h=require("./custom-element-B-TlBwRu.cjs"),o=require("./ref-DPUgHtT0.cjs"),l=require("./class-map-C92zObAn.cjs");require("./input-wrapper-Bv0JBG3z.cjs");require("./index-D2toJo-e.cjs");var c=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(p,i,n,s)=>{for(var e=s>1?void 0:s?d(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&&c(i,n,e),e};exports.PktTextinput=class extends t.PktInputElement{constructor(){super(...arguments),this.value="",this.type="text",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("./index-CR7t1zY9.cjs"),h=require("./custom-element-B-TlBwRu.cjs"),o=require("./ref-C2yPtMJA.cjs"),l=require("./class-map-a5HUzP83.cjs");require("./input-wrapper-DX41tnbj.cjs");require("./index-CmTjXoAb.cjs");var c=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(p,i,n,s)=>{for(var e=s>1?void 0:s?d(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&&c(i,n,e),e};exports.PktTextinput=class extends t.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`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -29,9 +29,13 @@
             type=${this.type}
             name=${(this.name||this.id)+"-input"}
             id=${this.id+"-input"}
-            placeholder=${this.placeholder??t.E}
+            placeholder=${this.placeholder||t.E}
             aria-labelledby=${s}
             autocomplete=${this.autocomplete}
+            minlength=${this.minlength||t.E}
+            maxlength=${this.maxlength||t.E}
+            ?readonly=${this.readonly}
+            size=${this.size||t.E}
             .value=${this.value}
             ?disabled=${this.disabled}
             aria-invalid=${this.hasError}
@@ -56,4 +60,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,reflect:!0})],exports.PktTextinput.prototype,"type",2);r([t.n({type:String,reflect:!0})],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([t.r()],exports.PktTextinput.prototype,"counterCurrent",2);exports.PktTextinput=r([h.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([t.r()],exports.PktTextinput.prototype,"counterCurrent",2);exports.PktTextinput=r([h.t("pkt-textinput")],exports.PktTextinput);

package/dist/{textinput-ToIpNAvm.js → textinput-CVo5wG14.js}

@@ -1,32 +1,32 @@
-import { r as c, a as d, x as p, E as o, n as h } from "./index-BXyp3qCS.js";
-import { t as f } from "./custom-element-CWfU4dcr.js";
-import { e as $, n as g } from "./ref-B5hXBqpP.js";
-import { e as m } from "./class-map-d4EVPLBg.js";
-import "./input-wrapper-BbLHt2GC.js";
-import "./index-BPPtpQWt.js";
-var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (i, e, s, t) => {
-  for (var a = t > 1 ? void 0 : t ? v(e, s) : e, u = i.length - 1, l; u >= 0; u--)
-    (l = i[u]) && (a = (t ? l(e, s, a) : l(a)) || a);
-  return t && a && x(e, s, a), a;
+import { r as c, a as d, x as h, E as n, n as p } from "./index-CFDwiDTU.js";
+import { t as $ } from "./custom-element-CWfU4dcr.js";
+import { e as g, n as m } from "./ref-CaiKp3S2.js";
+import { e as f } from "./class-map-CBvUV2N3.js";
+import "./input-wrapper-6vTrKtsW.js";
+import "./index-RwtTBIhT.js";
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (i, e, r, t) => {
+  for (var o = t > 1 ? void 0 : t ? y(e, r) : e, u = i.length - 1, l; u >= 0; u--)
+    (l = i[u]) && (o = (t ? l(e, r, o) : l(o)) || o);
+  return t && o && x(e, r, o), o;
 };
-let r = class extends d {
+let s = class extends d {
   constructor() {
-    super(...arguments), this.value = "", this.type = "text", this.autocomplete = "off", this.iconNameRight = null, this.prefix = null, this.suffix = null, this.omitSearchIcon = !1, this.counterCurrent = 0, this.inputRef = $();
+    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 = g();
   }
-  attributeChangedCallback(i, e, s) {
-    i === "value" && this.value !== e && (this.counterCurrent = s ? s.length : 0, this.valueChanged(s, e)), super.attributeChangedCallback(i, e, s);
+  attributeChangedCallback(i, e, r) {
+    i === "value" && this.value !== e && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, e)), super.attributeChangedCallback(i, e, 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);
   }
   render() {
-    const i = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, e = m({
+    const i = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, e = 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
-    }), s = this.ariaLabelledby || `${this.id}-input-label`;
-    return p`
+    }), r = this.ariaLabelledby || `${this.id}-input-label`;
+    return h`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -50,16 +50,20 @@ let r = class extends d {
         class="pkt-textinput"
       >
         <div class="pkt-input__container">
-          ${this.prefix ? p`<div class="pkt-input-prefix">${this.prefix}</div>` : o}
+          ${this.prefix ? h`<div class="pkt-input-prefix">${this.prefix}</div>` : n}
           <input
-            ${g(this.inputRef)}
+            ${m(this.inputRef)}
             class=${e}
             type=${this.type}
             name=${(this.name || this.id) + "-input"}
             id=${this.id + "-input"}
-            placeholder=${this.placeholder ?? o}
-            aria-labelledby=${s}
+            placeholder=${this.placeholder || n}
+            aria-labelledby=${r}
             autocomplete=${this.autocomplete}
+            minlength=${this.minlength || n}
+            maxlength=${this.maxlength || n}
+            ?readonly=${this.readonly}
+            size=${this.size || n}
             .value=${this.value}
             ?disabled=${this.disabled}
             aria-invalid=${this.hasError}
@@ -77,51 +81,54 @@ let r = class extends d {
       this.value = t.target.value, this.onBlur(), t.stopImmediatePropagation();
     }}
           />
-          ${this.suffix ? p`<div class="pkt-input-suffix">
+          ${this.suffix ? h`<div class="pkt-input-suffix">
                 ${this.suffix}
-                ${this.iconNameRight ? p`<pkt-icon
+                ${this.iconNameRight ? h`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name=${this.iconNameRight}
-                    ></pkt-icon>` : o}
-                ${i ? p`<pkt-icon
+                    ></pkt-icon>` : n}
+                ${i ? h`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name="magnifying-glass-big"
-                    ></pkt-icon>` : o}
-              </div>` : o}
-          ${!this.suffix && this.iconNameRight ? p`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : o}
-          ${!this.suffix && i ? p`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : o}
+                    ></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}
         </div>
       </pkt-input-wrapper>
     `;
   }
 };
-n([
-  h({ type: String, reflect: !0 })
-], r.prototype, "value", 2);
-n([
-  h({ type: String, reflect: !0 })
-], r.prototype, "type", 2);
-n([
-  h({ type: String, reflect: !0 })
-], r.prototype, "autocomplete", 2);
-n([
-  h({ type: String })
-], r.prototype, "iconNameRight", 2);
-n([
-  h({ type: String })
-], r.prototype, "prefix", 2);
-n([
-  h({ type: String })
-], r.prototype, "suffix", 2);
-n([
-  h({ type: Boolean })
-], r.prototype, "omitSearchIcon", 2);
-n([
+a([
+  p({ type: String, reflect: !0 })
+], s.prototype, "value", 2);
+a([
+  p({ type: String })
+], s.prototype, "type", 2);
+a([
+  p({ type: Number })
+], s.prototype, "size", 2);
+a([
+  p({ type: String })
+], s.prototype, "autocomplete", 2);
+a([
+  p({ type: String })
+], s.prototype, "iconNameRight", 2);
+a([
+  p({ type: String })
+], s.prototype, "prefix", 2);
+a([
+  p({ type: String })
+], s.prototype, "suffix", 2);
+a([
+  p({ type: Boolean })
+], s.prototype, "omitSearchIcon", 2);
+a([
   c()
-], r.prototype, "counterCurrent", 2);
-r = n([
-  f("pkt-textinput")
-], r);
+], s.prototype, "counterCurrent", 2);
+s = a([
+  $("pkt-textinput")
+], s);
 export {
-  r as P
+  s as P
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.17.0",
+  "version": "12.17.2",
   "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.14.0",
-    "@oslokommune/punkt-css": "^12.15.0",
+    "@oslokommune/punkt-css": "^12.17.1",
     "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": "dbe0cf072e3e48f6295734c4debc9d999c116289"
+  "gitHead": "998cf96281840a47cba5ba3e0c76e6fa1d2ed10e"
 }

package/src/components/calendar/index.ts

@@ -304,6 +304,7 @@ export class PktCalendar extends PktElement {
             class="pkt-input pkt-input-compact"
             id="${this.id}-monthnav"
             @change=${(e: any) => {
+              e.stopImmediatePropagation()
               this.changeMonth(this.year, e.target.value)
             }}
           >
@@ -321,6 +322,7 @@ export class PktCalendar extends PktElement {
             size="4"
             placeholder="0000"
             @change=${(e: any) => {
+              e.stopImmediatePropagation()
               this.changeMonth(e.target.value, this.month)
             }}
             .value=${this.year}
@@ -516,13 +518,11 @@ export class PktCalendar extends PktElement {
   }
 
   private changeMonth(year: number, month: number) {
-    this.year = year
-    this.month = month
+    this.year = typeof year === 'string' ? parseInt(year) : year
+    this.month = typeof month === 'string' ? parseInt(month) : month
     this.tabIndexSet = 0
     this.focusedDate = null
     this.selectableDates = []
-
-    this.requestUpdate()
   }
 
   private isInRange(date: TZDate | Date) {

package/src/components/datepicker/index.ts

@@ -246,11 +246,11 @@ export class PktDatepicker extends PktInputElement {
         .value=${this._value[0] ?? ''}
         min=${this.min}
         max=${this.max}
+        ?disabled=${this.disabled}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
           this.showCalendar()
         }}
-        ?disabled=${this.disabled}
         @keydown=${(e: KeyboardEvent) => {
           if (e.key === ',' || e.key === 'Enter') {
             this.inputRef.value?.blur()
@@ -301,12 +301,11 @@ export class PktDatepicker extends PktInputElement {
         .value=${this._value[1] ?? ''}
         min=${this.min}
         max=${this.max}
-        aria-labelledby="${this.id}-to-label"
+        ?disabled=${this.disabled}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
           this.showCalendar()
         }}
-        ?disabled=${this.disabled}
         @keydown=${(e: KeyboardEvent) => {
           if (e.key === ',' || e.key === 'Enter') {
             this.inputRefTo.value?.blur()
@@ -370,6 +369,7 @@ export class PktDatepicker extends PktInputElement {
         id="${this.id}-input"
         min=${this.min || nothing}
         max=${this.max || nothing}
+        ?disabled=${this.disabled || (this.maxlength && this._value.length >= this.maxlength)}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
           this.showCalendar()
@@ -400,7 +400,6 @@ export class PktDatepicker extends PktInputElement {
             this.toggleCalendar(e)
           }
         }}
-        ?disabled=${this.disabled || (this.maxlength && this._value.length >= this.maxlength)}
         @change=${(e: Event) => {
           e.stopImmediatePropagation()
         }}

package/src/components/element/index.ts

@@ -99,6 +99,9 @@ export class PktInputElement extends PktElement {
   @property({ type: String, reflect: true })
   pattern: string = ''
 
+  @property({ type: Boolean, reflect: true })
+  readonly: boolean = false
+
   @property({ type: String })
   ariaLabelledby: string | null = null
 
@@ -151,6 +154,12 @@ export class PktInputElement extends PktElement {
   @property({ type: Boolean })
   useWrapper: boolean = true
 
+  @property({ type: String, attribute: 'data-testid' })
+  dataTestid: string = ''
+
+  @property({ type: Boolean })
+  skipForwardTestid: boolean = false
+
   @state() touched: boolean = false
 
   constructor() {
@@ -317,6 +326,17 @@ export class PktInputElement extends PktElement {
     this.internals.reportValidity()
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has('dataTestid') && this.dataTestid && this.inputRef.value) {
+      if (!this.skipForwardTestid) {
+        this.inputRef.value.dataset.testid = this.dataTestid
+        this.removeAttribute('data-testid')
+      } else if (!this.hasAttribute('data-testid')) {
+        this.setAttribute('data-testid', this.dataTestid)
+      }
+    }
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties)
 

package/src/components/textarea/textarea.ts

@@ -15,10 +15,10 @@ export class PktTextarea extends PktInputElement {
   @property({ type: String })
   autocomplete: string = 'off'
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   placeholder: string = ''
 
-  @property({ type: Number, reflect: true })
+  @property({ type: Number })
   rows: number | null = null
 
   @state() counterCurrent = 0
@@ -79,11 +79,15 @@ export class PktTextarea extends PktInputElement {
       class="pkt-textarea"
     >
       <textarea
+        ${ref(this.inputRef)}
         class=${inputClasses}
         id=${this.id + '-input'}
         name=${(this.name || this.id) + '-input'}
         placeholder=${this.placeholder ?? nothing}
         .value=${live(this.value)}
+        minlength=${this.minlength || nothing}
+        maxlength=${this.maxlength || nothing}
+        ?readonly=${this.readonly}
         autocomplete=${this.autocomplete}
         aria-labelledby=${labelledBy}
         aria-invalid=${this.hasError}
@@ -107,7 +111,6 @@ export class PktTextarea extends PktInputElement {
           this.onBlur()
           e.stopImmediatePropagation()
         }}
-        ${ref(this.inputRef)}
       ></textarea>
     </pkt-input-wrapper>`
   }

package/src/components/textinput/textinput.ts

@@ -11,10 +11,13 @@ export class PktTextinput extends PktInputElement {
   @property({ type: String, reflect: true })
   value: string = ''
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   type: string = 'text'
 
-  @property({ type: String, reflect: true })
+  @property({ type: Number })
+  size: number | null = null
+
+  @property({ type: String })
   autocomplete: string = 'off'
 
   @property({ type: String })
@@ -97,9 +100,13 @@ export class PktTextinput extends PktInputElement {
             type=${this.type}
             name=${(this.name || this.id) + '-input'}
             id=${this.id + '-input'}
-            placeholder=${this.placeholder ?? nothing}
+            placeholder=${this.placeholder || nothing}
             aria-labelledby=${labelledBy}
             autocomplete=${this.autocomplete}
+            minlength=${this.minlength || nothing}
+            maxlength=${this.maxlength || nothing}
+            ?readonly=${this.readonly}
+            size=${this.size || nothing}
             .value=${this.value}
             ?disabled=${this.disabled}
             aria-invalid=${this.hasError}