@oslokommune/punkt-elements 12.31.2 → 12.32.7

package/dist/select-BLDaK5Rd.js

@@ -0,0 +1,118 @@
+import { x as h, n as c, a as $ } from "./element-DiqKrDty.js";
+import { r as b } from "./state-CDwPbiQj.js";
+import { e as u, n as d } from "./ref-B70YZNXm.js";
+import { o as s } from "./if-defined-DeANa4n5.js";
+import { P as v } from "./input-element-C4mmTk6h.js";
+import { P as f } from "./pkt-options-controller-BkWE4pZe.js";
+import { P as m } from "./pkt-slot-controller-BtVLTZb7.js";
+import "./input-wrapper-P_oEi6dk.js";
+var g = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (e, t, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? C(t, i) : t, n = e.length - 1, p; n >= 0; n--)
+    (p = e[n]) && (r = (o ? p(t, i, r) : p(r)) || r);
+  return o && r && g(t, i, r), r;
+};
+let l = class extends v {
+  constructor() {
+    super(), this.inputRef = u(), this.helptextSlot = u(), this.options = [], this.value = "", this._options = [], this.optionsController = new f(this), this.slotController = new m(this, this.helptextSlot), this.slotController.skipOptions = !0;
+  }
+  // Used for initilization
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.options.length > 0, t = this.optionsController.nodes.length && this.optionsController.nodes.length > 0;
+    !e && t ? this.optionsController.nodes.forEach((i) => {
+      const o = {
+        value: i.getAttribute("value") || i.textContent || "",
+        label: i.textContent || i.getAttribute("value") || "",
+        disabled: !!i.getAttribute("disabled")
+      };
+      i.getAttribute("selected") && !this.value && (this.value = o.value), this._options.push(o);
+    }) : this._options = this.options;
+  }
+  attributeChangedCallback(e, t, i) {
+    e === "options" && (this._options = i ? JSON.parse(i) : []), e === "value" && this.value !== t && this.valueChanged(i, t), super.attributeChangedCallback(e, t, i);
+  }
+  updated(e) {
+    var t;
+    super.updated(e), e.has("value") && (this.counterCurrent = ((t = this.value) == null ? void 0 : t.length) || 0, this.valueChanged(this.value, e.get("value"))), e.has("id") && !this.name && this.id && (this.name = this.id);
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.options.length && (this._options = this.options);
+  }
+  render() {
+    const e = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
+    return h`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        ariaDescribedBy=${s(this.ariaDescribedBy)}
+        .counterCurrent=${this.counterCurrent}
+        .counterMaxLength=${this.counterMaxLength}
+        class="pkt-select"
+        errorMessage=${s(this.errorMessage)}
+        forId=${this.id + "-input"}
+        helptext=${s(this.helptext)}
+        helptextDropdown=${s(this.helptextDropdown)}
+        helptextDropdownButton=${s(this.helptextDropdownButton)}
+        label=${s(this.label)}
+        optionalText=${s(this.optionalText)}
+        requiredText=${s(this.requiredText)}
+      >
+        <select
+          class=${e}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${s(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id + "-input"}
+          name=${(this.name || this.id) + "-input"}
+          value=${this.value}
+          @change=${(t) => {
+      this.value = t.target.value, t.stopImmediatePropagation();
+    }}
+          @input=${(t) => {
+      this.onInput(), t.stopImmediatePropagation();
+    }}
+          @focus=${(t) => {
+      this.onFocus(), t.stopImmediatePropagation();
+    }}
+          @blur=${(t) => {
+      this.onBlur(), t.stopImmediatePropagation();
+    }}
+          ${d(this.inputRef)}
+        >
+          ${this._options.length > 0 && this._options.map(
+      (t) => h`<option
+                value=${t.value}
+                ?selected=${this.value == t.value}
+                ?disabled=${t.disabled}
+              >
+                ${t.label}
+              </option>`
+    )}
+        </select>
+        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      </pkt-input-wrapper>
+    `;
+  }
+};
+a([
+  c({ type: Array })
+], l.prototype, "options", 2);
+a([
+  c({ type: String, reflect: !0 })
+], l.prototype, "value", 2);
+a([
+  b()
+], l.prototype, "_options", 2);
+l = a([
+  $("pkt-select")
+], l);
+export {
+  l as P
+};

package/dist/select-Dvds7MzS.cjs

@@ -0,0 +1,49 @@
+"use strict";const r=require("./element-DJpGVXjq.cjs"),u=require("./state-C4LdlTYO.cjs"),l=require("./ref-CLqTsViF.cjs"),o=require("./if-defined-CoBDkDGb.cjs"),d=require("./input-element-VNai8bsq.cjs"),c=require("./pkt-options-controller-TJ1apYGF.cjs"),$=require("./pkt-slot-controller-plQxXRvV.cjs");require("./input-wrapper-DWOw7Yn-.cjs");var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(a,e,t,i)=>{for(var s=i>1?void 0:i?v(e,t):e,p=a.length-1,h;p>=0;p--)(h=a[p])&&(s=(i?h(e,t,s):h(s))||s);return i&&s&&b(e,t,s),s};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=l.e(),this.helptextSlot=l.e(),this.options=[],this.value="",this._options=[],this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new $.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const e=this.options.length>0,t=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!e&&t?this.optionsController.nodes.forEach(i=>{const s={value:i.getAttribute("value")||i.textContent||"",label:i.textContent||i.getAttribute("value")||"",disabled:!!i.getAttribute("disabled")};i.getAttribute("selected")&&!this.value&&(this.value=s.value),this._options.push(s)}):this._options=this.options}attributeChangedCallback(e,t,i){e==="options"&&(this._options=i?JSON.parse(i):[]),e==="value"&&this.value!==t&&this.valueChanged(i,t),super.attributeChangedCallback(e,t,i)}updated(e){var t;super.updated(e),e.has("value")&&(this.counterCurrent=((t=this.value)==null?void 0:t.length)||0,this.valueChanged(this.value,e.get("value"))),e.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(e){super.firstUpdated(e),this.options.length&&(this._options=this.options)}render(){const e=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return r.x`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        ariaDescribedBy=${o.o(this.ariaDescribedBy)}
+        .counterCurrent=${this.counterCurrent}
+        .counterMaxLength=${this.counterMaxLength}
+        class="pkt-select"
+        errorMessage=${o.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)}
+      >
+        <select
+          class=${e}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${o.o(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id+"-input"}
+          name=${(this.name||this.id)+"-input"}
+          value=${this.value}
+          @change=${t=>{this.value=t.target.value,t.stopImmediatePropagation()}}
+          @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
+          @focus=${t=>{this.onFocus(),t.stopImmediatePropagation()}}
+          @blur=${t=>{this.onBlur(),t.stopImmediatePropagation()}}
+          ${l.n(this.inputRef)}
+        >
+          ${this._options.length>0&&this._options.map(t=>r.x`<option
+                value=${t.value}
+                ?selected=${this.value==t.value}
+                ?disabled=${t.disabled}
+              >
+                ${t.label}
+              </option>`)}
+        </select>
+        <div class="pkt-contents" ${l.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      </pkt-input-wrapper>
+    `}};n([r.n({type:Array})],exports.PktSelect.prototype,"options",2);n([r.n({type:String,reflect:!0})],exports.PktSelect.prototype,"value",2);n([u.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=n([r.t("pkt-select")],exports.PktSelect);

package/dist/select.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +15,31 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{state-HNj0_316.cjs → state-C4LdlTYO.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./element-CzFXQBoS.cjs");/**
+"use strict";const e=require("./element-DJpGVXjq.cjs");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{state-CDQk0DFQ.js → state-CDwPbiQj.js}

@@ -1,4 +1,4 @@
-import { n as r } from "./element-C7XjZtLU.js";
+import { n as r } from "./element-DiqKrDty.js";
 /**
  * @license
  * Copyright 2017 Google LLC

package/dist/tag-C52KeBmR.cjs

@@ -0,0 +1,18 @@
+"use strict";const u=require("./class-map-DvBKxTiW.cjs"),t=require("./element-DJpGVXjq.cjs"),k=require("./state-C4LdlTYO.cjs"),g=require("./pkt-slot-controller-plQxXRvV.cjs"),c=require("./ref-CLqTsViF.cjs");require("./icon-UtDKPH3R.cjs");const h=require("./if-defined-CoBDkDGb.cjs"),f={closeTag:{default:!1},size:{default:"medium"},skin:{default:"blue"},type:{default:"button"}},r={props:f};var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(n,e,o,a)=>{for(var s=a>1?void 0:a?y(e,o):e,l=n.length-1,p;l>=0;l--)(p=n[l])&&(s=(a?p(e,o,s):p(s))||s);return a&&s&&d(e,o,s),s};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closeTag=r.props.closeTag.default,this.size=r.props.size.default,this.skin=r.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=r.props.type.default,this.ariaLabel=null,this._isClosed=!1,this._ariaDescription=null,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new g.PktSlotController(this,this.defaultSlot),this._isClosed=!1}firstUpdated(e){var o,a;if(super.firstUpdated(e),this.closeTag&&!this.ariaLabel){const s=(a=(o=this.defaultSlot.value)==null?void 0:o.textContent)==null?void 0:a.trim();s&&(this._ariaDescription=`Klikk for å fjerne ${s}`)}}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},o={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.x`
+        <button
+          class=${u.e(o)}
+          type=${this.type}
+          @click=${this.close}
+          aria-label=${h.o(this.ariaLabel||void 0)}
+          aria-description=${h.o(this._ariaDescription||void 0)}
+        >
+          ${this.iconName&&t.x`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          <span ${c.n(this.defaultSlot)}></span>
+          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        </button>
+      `:t.x`
+        <span class=${u.e(e)}>
+          ${this.iconName&&t.x`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          <span ${c.n(this.defaultSlot)}></span>
+        </span>
+      `}};i([t.n({type:Boolean,reflect:!0})],exports.PktTag.prototype,"closeTag",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"size",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"skin",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"textStyle",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"iconName",2);i([t.n({type:String})],exports.PktTag.prototype,"type",2);i([t.n({type:String})],exports.PktTag.prototype,"ariaLabel",2);i([k.r()],exports.PktTag.prototype,"_isClosed",2);i([k.r()],exports.PktTag.prototype,"_ariaDescription",2);exports.PktTag=i([t.t("pkt-tag")],exports.PktTag);

package/dist/{tag-CmFcSdOV.js → tag-DoS5S2Bq.js}

@@ -1,81 +1,32 @@
-import { e as h } from "./class-map-DWtqmIRS.js";
-import { P as y, x as p, n as r, a as g } from "./element-C7XjZtLU.js";
-import { r as m } from "./state-CDQk0DFQ.js";
-import { P as k } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as b, n as f } from "./ref-DbOSDQbk.js";
-import "./icon-BEUgV9Wo.js";
-import { o as d } from "./if-defined-eRX4e5zO.js";
-const _ = "pkt-tag", $ = !0, S = {
+import { e as u } from "./class-map-D4tSZX70.js";
+import { P as m, x as l, n as r, a as g } from "./element-DiqKrDty.js";
+import { r as k } from "./state-CDwPbiQj.js";
+import { P as y } from "./pkt-slot-controller-BtVLTZb7.js";
+import { e as b, n as f } from "./ref-B70YZNXm.js";
+import "./icon-BdY52BIt.js";
+import { o as d } from "./if-defined-DeANa4n5.js";
+const _ = {
   closeTag: {
-    type: "boolean",
-    required: !1,
     default: !1
   },
   size: {
-    required: !1,
-    default: "medium",
-    type: [
-      "small",
-      "medium",
-      "large"
-    ]
-  },
-  iconName: {
-    type: "icon",
-    required: !1
+    default: "medium"
   },
   skin: {
-    required: !1,
-    default: "blue",
-    type: [
-      "blue",
-      "blue-light",
-      "blue-dark",
-      "green",
-      "red",
-      "beige",
-      "yellow",
-      "gray"
-    ]
-  },
-  textStyle: {
-    required: !1,
-    default: "normal-text",
-    type: [
-      "thin-text",
-      "normal-text"
-    ]
+    default: "blue"
   },
   type: {
-    required: !1,
-    default: "button",
-    type: [
-      "button",
-      "submit",
-      "reset"
-    ]
-  },
-  ariaLabel: {
-    type: "string",
-    required: !1
-  }
-}, x = {
-  default: {
-    description: "Teksten til tag"
+    default: "button"
   }
 }, n = {
-  name: _,
-  "css-class": "pkt-tag",
-  isElement: $,
-  props: S,
-  slots: x
+  props: _
 };
-var v = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, i, l, o) => {
-  for (var a = o > 1 ? void 0 : o ? C(i, l) : i, c = s.length - 1, u; c >= 0; c--)
-    (u = s[c]) && (a = (o ? u(i, l, a) : u(a)) || a);
-  return o && a && v(i, l, a), a;
+var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, i, p, o) => {
+  for (var a = o > 1 ? void 0 : o ? S(i, p) : i, c = s.length - 1, h; c >= 0; c--)
+    (h = s[c]) && (a = (o ? h(i, p, a) : h(a)) || a);
+  return o && a && $(i, p, a), a;
 };
-let t = class extends y {
+let t = class extends m {
   constructor() {
     super(), this.defaultSlot = b(), this.closeTag = n.props.closeTag.default, this.size = n.props.size.default, this.skin = n.props.skin.default, this.textStyle = null, this.iconName = void 0, this.type = n.props.type.default, this.ariaLabel = null, this._isClosed = !1, this._ariaDescription = null, this.close = (s) => {
       this._isClosed = !0, this.dispatchEvent(
@@ -83,15 +34,15 @@ let t = class extends y {
       ), this.dispatchEvent(
         new CustomEvent("on-close", { detail: { origin: s }, bubbles: !0, composed: !0 })
       );
-    }, this.slotController = new k(this, this.defaultSlot), this._isClosed = !1;
+    }, this.slotController = new y(this, this.defaultSlot), this._isClosed = !1;
   }
   /**
    * Lifecycle
    */
   firstUpdated(s) {
-    var i, l;
+    var i, p;
     if (super.firstUpdated(s), this.closeTag && !this.ariaLabel) {
-      const o = (l = (i = this.defaultSlot.value) == null ? void 0 : i.textContent) == null ? void 0 : l.trim();
+      const o = (p = (i = this.defaultSlot.value) == null ? void 0 : i.textContent) == null ? void 0 : p.trim();
       o && (this._ariaDescription = `Klikk for å fjerne ${o}`);
     }
   }
@@ -111,21 +62,21 @@ let t = class extends y {
       "pkt-btn--icons-right-and-left": this.closeTag && !!this.iconName,
       "pkt-hide": this._isClosed
     };
-    return this.closeTag ? p`
+    return this.closeTag ? l`
         <button
-          class=${h(i)}
+          class=${u(i)}
           type=${this.type}
           @click=${this.close}
           aria-label=${d(this.ariaLabel || void 0)}
           aria-description=${d(this._ariaDescription || void 0)}
         >
-          ${this.iconName && p`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          ${this.iconName && l`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
           <span ${f(this.defaultSlot)}></span>
           <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
         </button>
-      ` : p`
-        <span class=${h(s)}>
-          ${this.iconName && p`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+      ` : l`
+        <span class=${u(s)}>
+          ${this.iconName && l`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
           <span ${f(this.defaultSlot)}></span>
         </span>
       `;
@@ -153,10 +104,10 @@ e([
   r({ type: String })
 ], t.prototype, "ariaLabel", 2);
 e([
-  m()
+  k()
 ], t.prototype, "_isClosed", 2);
 e([
-  m()
+  k()
 ], t.prototype, "_ariaDescription", 2);
 t = e([
   g("pkt-tag")

package/dist/tag.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +15,31 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{textarea-BPqWCymU.js → textarea-C9EvdPGi.js}

@@ -1,22 +1,23 @@
-import { T as l, E as $, x as f, n as d, a as g } from "./element-C7XjZtLU.js";
-import { o as u } from "./if-defined-eRX4e5zO.js";
-import { r as x } from "./state-CDQk0DFQ.js";
-import { f as v, m as b, e as c, n as m } from "./ref-DbOSDQbk.js";
-import { e as T } from "./class-map-DWtqmIRS.js";
-import { e as y, i as w, t as a } from "./directive-B76A7YXI.js";
-import { P as C } from "./input-element-BK8UkQli.js";
-import { P as E } from "./pkt-slot-controller-Clbye6cM.js";
-import "./input-wrapper-DaZZq8c0.js";
-import "./icon-BEUgV9Wo.js";
+import { T as l, E as $, x as f, n as d, a as g } from "./element-DiqKrDty.js";
+import { o as u } from "./if-defined-DeANa4n5.js";
+import { r as x } from "./state-CDwPbiQj.js";
+import { e as m, n as c } from "./ref-B70YZNXm.js";
+import { e as v } from "./class-map-D4tSZX70.js";
+import { e as b, i as T, t as a } from "./directive-oAbCiebi.js";
+import { f as y, m as w } from "./directive-helpers-BmXIK-1b.js";
+import { P as C } from "./input-element-C4mmTk6h.js";
+import { P as E } from "./pkt-slot-controller-BtVLTZb7.js";
+import "./input-wrapper-P_oEi6dk.js";
+import "./icon-BdY52BIt.js";
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const P = y(class extends w {
+const P = b(class extends T {
   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 (!v(t)) throw Error("`live` bindings can only contain a single expression");
+    if (!y(t)) throw Error("`live` bindings can only contain a single expression");
   }
   render(t) {
     return t;
@@ -29,7 +30,7 @@ const P = y(class extends w {
     } else if (t.type === a.BOOLEAN_ATTRIBUTE) {
       if (!!r === e.hasAttribute(i)) return l;
     } else if (t.type === a.ATTRIBUTE && e.getAttribute(i) === r + "") return l;
-    return b(t), r;
+    return w(t), r;
   }
 });
 var B = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, r, e, i) => {
@@ -39,7 +40,7 @@ var B = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, r, e
 };
 let o = class extends C {
   constructor() {
-    super(), this.inputRef = c(), this.helptextSlot = c(), this.value = "", this.autocomplete = "off", this.rows = null, this.counterCurrent = 0, this.slotController = new E(this, this.helptextSlot);
+    super(), this.inputRef = m(), this.helptextSlot = m(), this.value = "", this.autocomplete = "off", this.rows = null, this.counterCurrent = 0, this.slotController = new E(this, this.helptextSlot);
   }
   attributeChangedCallback(t, r, e) {
     t === "value" && this.value !== r && (this.counterCurrent = e ? e.length : 0, this.valueChanged(e, r)), super.attributeChangedCallback(t, r, e);
@@ -49,7 +50,7 @@ let o = class extends C {
     super.updated(t), t.has("value") && (this.counterCurrent = ((r = this.value) == null ? void 0 : r.length) || 0, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
   }
   render() {
-    const t = T({
+    const t = v({
       "pkt-input": !0,
       "pkt-input--fullwidth": this.fullwidth,
       "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
@@ -76,9 +77,9 @@ let o = class extends C {
       .requiredText=${this.requiredText}
       class="pkt-textarea"
     >
-      <div class="pkt-contents" ${m(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      <div class="pkt-contents" ${c(this.helptextSlot)} name="helptext" slot="helptext"></div>
       <textarea
-        ${m(this.inputRef)}
+        ${c(this.inputRef)}
         class=${t}
         id=${this.id + "-input"}
         name=${(this.name || this.id) + "-input"}

package/dist/{textarea-VG-UTMLP.cjs → textarea-DJvNBmEL.cjs}

@@ -1,8 +1,8 @@
-"use strict";const s=require("./element-CzFXQBoS.cjs"),p=require("./if-defined-CpIkv1A4.cjs"),d=require("./state-HNj0_316.cjs"),o=require("./ref-2anvRHT4.cjs"),c=require("./class-map-Dj5mbCUg.cjs"),a=require("./directive-C_VV3qwo.cjs"),$=require("./input-element-Dtyuf6s8.cjs"),x=require("./pkt-slot-controller-Oc32unDk.cjs");require("./input-wrapper-Bo2_t6pA.cjs");require("./icon-BOKusjAA.cjs");/**
+"use strict";const s=require("./element-DJpGVXjq.cjs"),p=require("./if-defined-CoBDkDGb.cjs"),c=require("./state-C4LdlTYO.cjs"),l=require("./ref-CLqTsViF.cjs"),$=require("./class-map-DvBKxTiW.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-donnvcEO.cjs"),x=require("./input-element-VNai8bsq.cjs"),T=require("./pkt-slot-controller-plQxXRvV.cjs");require("./input-wrapper-DWOw7Yn-.cjs");require("./icon-UtDKPH3R.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const T=a.e(class extends a.i{constructor(r){if(super(r),r.type!==a.t.PROPERTY&&r.type!==a.t.ATTRIBUTE&&r.type!==a.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!o.f(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(r,[e]){if(e===s.T||e===s.E)return e;const i=r.element,t=r.name;if(r.type===a.t.PROPERTY){if(e===i[t])return s.T}else if(r.type===a.t.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(t))return s.T}else if(r.type===a.t.ATTRIBUTE&&i.getAttribute(t)===e+"")return s.T;return o.m(r),e}});var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(r,e,i,t)=>{for(var n=t>1?void 0:t?f(e,i):e,u=r.length-1,h;u>=0;u--)(h=r[u])&&(n=(t?h(e,i,n):h(n))||n);return t&&n&&g(e,i,n),n};exports.PktTextarea=class extends $.PktInputElement{constructor(){super(),this.inputRef=o.e(),this.helptextSlot=o.e(),this.value="",this.autocomplete="off",this.rows=null,this.counterCurrent=0,this.slotController=new x.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(e,i,t){e==="value"&&this.value!==i&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,i)),super.attributeChangedCallback(e,i,t)}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 e=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}),i=this.ariaLabelledby||`${this.id}-input-label`;return s.x`<pkt-input-wrapper
+ */const g=a.e(class extends a.i{constructor(r){if(super(r),r.type!==a.t.PROPERTY&&r.type!==a.t.ATTRIBUTE&&r.type!==a.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!d.f(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(r,[e]){if(e===s.T||e===s.E)return e;const i=r.element,t=r.name;if(r.type===a.t.PROPERTY){if(e===i[t])return s.T}else if(r.type===a.t.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(t))return s.T}else if(r.type===a.t.ATTRIBUTE&&i.getAttribute(t)===e+"")return s.T;return d.m(r),e}});var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(r,e,i,t)=>{for(var n=t>1?void 0:t?f(e,i):e,u=r.length-1,h;u>=0;u--)(h=r[u])&&(n=(t?h(e,i,n):h(n))||n);return t&&n&&v(e,i,n),n};exports.PktTextarea=class extends x.PktInputElement{constructor(){super(),this.inputRef=l.e(),this.helptextSlot=l.e(),this.value="",this.autocomplete="off",this.rows=null,this.counterCurrent=0,this.slotController=new T.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(e,i,t){e==="value"&&this.value!==i&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,i)),super.attributeChangedCallback(e,i,t)}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 e=$.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}),i=this.ariaLabelledby||`${this.id}-input-label`;return s.x`<pkt-input-wrapper
       label=${this.label}
       ?counter=${this.counter}
       ?disabled=${this.disabled}
@@ -24,14 +24,14 @@
       .requiredText=${this.requiredText}
       class="pkt-textarea"
     >
-      <div class="pkt-contents" ${o.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      <div class="pkt-contents" ${l.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
       <textarea
-        ${o.n(this.inputRef)}
+        ${l.n(this.inputRef)}
         class=${e}
         id=${this.id+"-input"}
         name=${(this.name||this.id)+"-input"}
         placeholder=${p.o(this.placeholder)}
-        .value=${T(this.value)}
+        .value=${g(this.value)}
         minlength=${p.o(this.minlength)}
         maxlength=${p.o(this.maxlength)}
         ?readonly=${this.readonly}
@@ -46,4 +46,4 @@
         @focus=${t=>{this.onFocus(),t.stopImmediatePropagation()}}
         @blur=${t=>{this.value=t.target.value,this.onBlur(),t.stopImmediatePropagation()}}
       ></textarea>
-    </pkt-input-wrapper>`}};l([s.n({type:String,reflect:!0})],exports.PktTextarea.prototype,"value",2);l([s.n({type:String})],exports.PktTextarea.prototype,"autocomplete",2);l([s.n({type:Number})],exports.PktTextarea.prototype,"rows",2);l([d.r()],exports.PktTextarea.prototype,"counterCurrent",2);exports.PktTextarea=l([s.t("pkt-textarea")],exports.PktTextarea);
+    </pkt-input-wrapper>`}};o([s.n({type:String,reflect:!0})],exports.PktTextarea.prototype,"value",2);o([s.n({type:String})],exports.PktTextarea.prototype,"autocomplete",2);o([s.n({type:Number})],exports.PktTextarea.prototype,"rows",2);o([c.r()],exports.PktTextarea.prototype,"counterCurrent",2);exports.PktTextarea=o([s.t("pkt-textarea")],exports.PktTextarea);

package/dist/textarea.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +15,31 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{textinput-CEP7QA3E.cjs → textinput-Cg3ObBuw.cjs}

@@ -1,9 +1,10 @@
-"use strict";const t=require("./element-CzFXQBoS.cjs"),u=require("./if-defined-CpIkv1A4.cjs"),l=require("./state-HNj0_316.cjs"),p=require("./ref-2anvRHT4.cjs"),c=require("./class-map-Dj5mbCUg.cjs"),x=require("./input-element-Dtyuf6s8.cjs"),d=require("./pkt-slot-controller-Oc32unDk.cjs");require("./input-wrapper-Bo2_t6pA.cjs");require("./icon-BOKusjAA.cjs");var $=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(o,i,n,s)=>{for(var e=s>1?void 0:s?g(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&&$(i,n,e),e};exports.PktTextinput=class extends x.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 d.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=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}),s=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
+"use strict";const t=require("./element-DJpGVXjq.cjs"),u=require("./if-defined-CoBDkDGb.cjs"),l=require("./state-C4LdlTYO.cjs"),p=require("./ref-CLqTsViF.cjs"),c=require("./class-map-DvBKxTiW.cjs"),d=require("./input-element-VNai8bsq.cjs"),x=require("./pkt-slot-controller-plQxXRvV.cjs");require("./input-wrapper-DWOw7Yn-.cjs");require("./icon-UtDKPH3R.cjs");var $=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(o,i,s,n)=>{for(var e=n>1?void 0:n?g(i,s):i,a=o.length-1,h;a>=0;a--)(h=o[a])&&(e=(n?h(i,s,e):h(e))||e);return n&&e&&$(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=p.e(),this.helptextSlot=p.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}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
         ?inline=${this.inline}
         ?optionalTag=${this.optionalTag}
         ?required=${this.required}
@@ -26,13 +27,13 @@
           ${this.prefix?t.x`<div class="pkt-input-prefix">${this.prefix}</div>`:t.E}
           <input
             ${p.n(this.inputRef)}
-            class=${n}
+            class=${s}
             type=${this.type}
             name=${(this.name||this.id)+"-input"}
             id=${this.id+"-input"}
             placeholder=${u.o(this.placeholder)}
-            aria-labelledby=${s}
-            autocomplete=${this.autocomplete}
+            aria-labelledby=${n}
+            autocomplete=${this.autocomplete||"off"}
             minlength=${u.o(this.minlength)}
             maxlength=${u.o(this.maxlength)}
             ?readonly=${this.readonly}