@oslokommune/punkt-elements 12.31.2 → 12.32.7

package/dist/{textinput-VD74aGzx.js → textinput-CxRSSYaN.js}

@@ -1,40 +1,41 @@
-import { x as p, E as h, n as o, a as $ } from "./element-C7XjZtLU.js";
-import { o as c } from "./if-defined-eRX4e5zO.js";
-import { r as f } from "./state-CDQk0DFQ.js";
-import { e as d, n as m } from "./ref-DbOSDQbk.js";
-import { e as g } from "./class-map-DWtqmIRS.js";
-import { P as x } from "./input-element-BK8UkQli.js";
-import { P as y } from "./pkt-slot-controller-Clbye6cM.js";
-import "./input-wrapper-DaZZq8c0.js";
-import "./icon-BEUgV9Wo.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (i, e, r, t) => {
-  for (var a = t > 1 ? void 0 : t ? b(e, r) : e, l = i.length - 1, u; l >= 0; l--)
-    (u = i[l]) && (a = (t ? u(e, r, a) : u(a)) || a);
-  return t && a && v(e, r, a), a;
+import { E as p, x as h, n as o, a as $ } from "./element-DiqKrDty.js";
+import { o as c } from "./if-defined-DeANa4n5.js";
+import { r as f } from "./state-CDwPbiQj.js";
+import { e as d, n as m } from "./ref-B70YZNXm.js";
+import { e as g } from "./class-map-D4tSZX70.js";
+import { P as x } from "./input-element-C4mmTk6h.js";
+import { P as y } from "./pkt-slot-controller-BtVLTZb7.js";
+import "./input-wrapper-P_oEi6dk.js";
+import "./icon-BdY52BIt.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (e, i, r, t) => {
+  for (var a = t > 1 ? void 0 : t ? b(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 && v(i, r, a), a;
 };
 let s = class extends x {
   constructor() {
-    super(), this.inputRef = d(), this.helptextSlot = d(), 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 y(this, this.helptextSlot);
+    super(), this.inputRef = d(), this.helptextSlot = d(), 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 y(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 = g({
       "pkt-input": !0,
       "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 p`
+    return h`
       <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}
@@ -54,20 +55,20 @@ let s = class extends x {
       >
         <div class="pkt-contents" ${m(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-input__container">
-          ${this.prefix ? p`<div class="pkt-input-prefix">${this.prefix}</div>` : h}
+          ${this.prefix ? h`<div class="pkt-input-prefix">${this.prefix}</div>` : p}
           <input
             ${m(this.inputRef)}
-            class=${e}
+            class=${i}
             type=${this.type}
             name=${(this.name || this.id) + "-input"}
             id=${this.id + "-input"}
             placeholder=${c(this.placeholder)}
             aria-labelledby=${r}
-            autocomplete=${this.autocomplete}
+            autocomplete=${this.autocomplete || "off"}
             minlength=${c(this.minlength)}
             maxlength=${c(this.maxlength)}
             ?readonly=${this.readonly}
-            size=${this.size || h}
+            size=${this.size || p}
             .value=${this.value}
             ?disabled=${this.disabled}
             aria-invalid=${this.hasError}
@@ -85,19 +86,19 @@ let s = class extends x {
       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>` : h}
-                ${i ? p`<pkt-icon
+                    ></pkt-icon>` : p}
+                ${e ? h`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name="magnifying-glass-big"
-                    ></pkt-icon>` : h}
-              </div>` : h}
-          ${!this.suffix && this.iconNameRight ? p`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : h}
-          ${!this.suffix && i ? p`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : h}
+                    ></pkt-icon>` : p}
+              </div>` : p}
+          ${!this.suffix && this.iconNameRight ? h`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : p}
+          ${!this.suffix && e ? h`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : p}
         </div>
       </pkt-input-wrapper>
     `;

package/dist/textinput.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.31.2",
+  "version": "12.32.7",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -30,10 +30,10 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.30.1",
-    "@oslokommune/punkt-css": "^12.31.0",
+    "@oslokommune/punkt-css": "^12.32.1",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
-    "vite": "^5.4.4",
+    "vite": "^5.4.18",
     "vite-plugin-dts": "^4.2.1",
     "vite-plugin-web-components-hmr": "^0.1.3"
   },
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "bb030d6ba98fa9e45a95cf3092d95b46a750a730"
+  "gitHead": "001ce7fd764b33b5f4c7d90ad5418a62a4d780a6"
 }

package/src/components/button/button.ts

@@ -47,6 +47,7 @@ export interface IPktButton {
 export class PktButton extends PktElement<IPktButton> implements IPktButton {
   static formAssociated = true
   private internals = this.attachInternals()
+  slotController: PktSlotController
   defaultSlot: Ref<HTMLElement> = createRef()
 
   constructor() {
@@ -94,7 +95,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
         this.setAttribute('tabindex', '0')
       }
       if (this.getAttribute('aria-disabled') !== 'false') {
-        this.setAttribute('aria-disabled', 'false')
+        this.removeAttribute('aria-disabled')
       }
     }
     if (this.isLoading) {
@@ -114,7 +115,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
 
   render() {
     return html`
-      <div class="pkt-btn__element-content">
+      <div class="pkt-contents">
         ${this.isLoading
           ? html`<pkt-icon
               class="pkt-btn__icon pkt-btn__spinner"