@postnord/pn-marketweb-components 4.3.5 → 4.3.7

package/umd/modules/@postnord/web-components/collection/components/input/pn-input/pn-input.js

@@ -20,15 +20,14 @@ import { translations } from "./translations";
  */
 export class PnInput {
     id = `pn-input-${uuidv4()}`;
-    idMessage = `${this.id}-message`;
+    idHelper = `${this.id}-helper`;
+    idError = `${this.id}-error`;
     prefix;
     suffix;
     mo;
     hostElement;
     offsetLeft = 0;
     offsetRight = 0;
-    showHelperSlot = false;
-    showErrorSlot = false;
     showPassword = false;
     togglePassword() {
         this.showPassword = !this.showPassword;
@@ -37,70 +36,38 @@ export class PnInput {
     label;
     /** Text message placed underneath the input field. */
     helpertext;
-    /**
-     * Provide a unique HTML id to connect the input with the label.
-     * A unique uuid ID will be generated if this field is left empty.
-     **/
-    inputid = this.id;
-    /** Set the value of the input. */
-    value = '';
     /**
      * Set the language manually for the translations of show/hide/clear button text.
      * Not needed if you have the pntopbar on the page.
      **/
-    language = null;
-    /** Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time. @since v7.21.0 */
-    compact = false;
-    /**
-     * Select an icon to display before the input field value.
-     * `icon` takes precedence over the `text-prefix` prop.
-     *
-     * @see {@link textPrefix}
-     * @category Visual
-     **/
-    icon;
-    /**
-     * Set a small text before the input field value.
-     * Cannot be used together with an `icon` at the same time.
-     *
-     * @see {@link icon}
-     * @see {@link textSuffix}
-     * @category Visual
-     **/
-    textPrefix;
-    /**
-     * Set a small text after the input field value.
-     * Cannot be used with the `text-prefix` prop at the same time.
-     *
-     * @see {@link textPrefix}
-     * @category Visual
-     **/
-    textSuffix;
-    /** pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`. @category HTML input */
+    language = undefined;
+    /** Set the value of the input. @category Native attributes */
+    value = '';
+    /** pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`. @category Native attributes */
     type = 'text';
     /**
      * HTML input name. Setting a name will help the browser understand what type of data the input have
      * and can better assist with autofill data based on previous entires much better.
-     *
-     * @category HTML input
+     * @category Native attributes
      **/
     name;
     /**
      * Provide a placeholder text. Remember that this is no replacement for a label.
      * The placeholder should be a nice addition to the label/helpertext, not important information.
      *
-     * @category HTML input
+     * @category Native attributes
      **/
     placeholder;
     /**
      * Let the browser know what type of autocorrects the input should use.
-     * Works much better if a `name` and `inputid` is supplied.
+     * Works much better if a `name` and `pn-id` is supplied.
      * @see {@link name}
      * @see {@link inputid}
      *
-     * @category HTML input */
+     * @category Native attributes
+     */
     autocomplete;
-    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML input */
+    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category Native attributes */
     maxlength;
     /**
      * Hint the browser about what type of virtual keyboard should be used.
@@ -109,35 +76,62 @@ export class PnInput {
      *
      * Leave empty or with a `''` value if you want the browsers default behaviour (`text`).
      *
-     * @category HTML input
+     * @category Native attributes
      **/
     inputmode;
-    /** Point to a datalist element for this input. @category HTML input */
+    /** Point to a datalist element for this input. @category Native attributes */
     list;
-    /** Pattern prop. @category HTML input*/
+    /** Pattern prop. @category Native attributes */
     pattern;
-    /** Set the `min` value of the `number` input. @category HTML input */
+    /** Set the `min` value of the `number` input. @category Native attributes */
     min;
-    /** Set the `max` value of the `number` input. @category HTML input */
+    /** Set the `max` value of the `number` input. @category Native attributes */
     max;
-    /** Set a `step` for the number input. @category HTML input */
+    /** Set a `step` for the number input. @category Native attributes */
     step;
-    /** While you can use the `aria-label`, using a `label` is far more accessible. @category HTML input */
-    arialabel;
-    /** Set the ID of what this input controls. @category HTML input */
-    ariacontrols;
-    /** Set the input as `required`. @category State */
+    /** Set the input as `required`. @category Native attributes */
     required = false;
-    /** Set the input as `disabled`. @category State */
-    disabled = false;
-    /** Set the input as `readonly`. @category State */
+    /** Set the input as `readonly`. @category Native attributes */
     readonly = false;
-    /** Set the input as `valid`. Provides a green color and a check icon. @category Validation */
+    /** Set the input as `disabled`. @category Native attributes */
+    disabled = false;
+    /**
+     * Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time.
+     * @since v7.21.0
+     * @category Features
+     */
+    compact = false;
+    /**
+     * Select an icon to display before the input field value.
+     * `icon` takes precedence over the `text-prefix` prop.
+     *
+     * @see {@link textPrefix}
+     * @category Features
+     **/
+    icon;
+    /**
+     * Set a small text before the input field value.
+     * Cannot be used together with an `icon` at the same time.
+     *
+     * @see {@link icon}
+     * @see {@link textSuffix}
+     * @category Features
+     **/
+    textPrefix;
+    /**
+     * Set a small text after the input field value.
+     * Cannot be used with the `text-prefix` prop at the same time.
+     *
+     * @see {@link textPrefix}
+     * @category Features
+     **/
+    textSuffix;
+    /** Set the input as `valid`. Provides a green color and a check icon. @category Features */
     valid = false;
     /**
      * Set the input as `invalid`. Provides a red color and red warning icon.
      * @see{@link error Provide an error message.}
-     * @category Validation
+     * @category Features
      **/
     invalid = false;
     /**
@@ -145,9 +139,33 @@ export class PnInput {
      *
      * Error message; will take precedence over helpertext if both are provided.
      * @see{@link invalid Set invalid without an error message.}
-     * @category Validation
+     * @category Features
      **/
     error;
+    /** Set a custom ID for the input (default is a generated UUID). @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /** Set the ID of what this input controls. @since v7.25.0 @category HTML attributes */
+    pnAriaControls;
+    /** Set a custom ID for the input (default is a generated UUID). @deprecated Use `pn-id` instead. @category HTML attributes */
+    inputid;
+    /** While you can use the `aria-label`, using a `label` is far more accessible. @deprecated Use `pn-aria-label` instead. @category HTML attributes */
+    arialabel;
+    /** Set the ID of what this input controls. @deprecated Use `pn-aria-controls` instead. @category HTML attributes */
+    ariacontrols;
     handleOffset() {
         requestAnimationFrame(() => {
             const left = this.prefix?.clientWidth ? this.prefix.clientWidth + 8 : 0;
@@ -156,15 +174,14 @@ export class PnInput {
             this.offsetRight = right;
         });
     }
-    handleMessage() {
-        this.checkSlottedHelper();
-        this.checkSlottedError();
+    handleId() {
+        this.idHelper = `${this.getId()}-helper`;
+        this.idError = `${this.getId()}-error`;
     }
     connectedCallback() {
         this.mo = new MutationObserver(() => {
             forceUpdate(this.hostElement);
             this.handleOffset();
-            this.handleMessage();
         });
         this.mo.observe(this.hostElement, { childList: true, subtree: true });
     }
@@ -173,15 +190,15 @@ export class PnInput {
             this.mo.disconnect();
     }
     async componentWillLoad() {
-        this.handleMessage();
-        if (this.inputid !== this.id)
-            this.idMessage = `${this.inputid}-message`;
-        if (this.language === null)
+        if (this.language === undefined)
             await awaitTopbar(this.hostElement);
     }
     componentDidLoad() {
         this.handleOffset();
     }
+    getId() {
+        return this.pnId || this.inputid || this.id;
+    }
     setVal(event) {
         const target = event.composedPath?.()[0];
         this.value = target.value;
@@ -198,26 +215,26 @@ export class PnInput {
         return translations?.[prop]?.[this.language || en];
     }
     hasHelperText() {
-        return this.helpertext?.length > 0 || this.showHelperSlot;
+        return this.helpertext?.length > 0 || this.checkSlottedHelper();
     }
     hasErrorMessage() {
-        return this.error?.length > 0 || this.showErrorSlot;
+        return this.error?.length > 0 || this.checkSlottedError();
     }
     /** If any error is active, either via the prop `invalid` or `error` prop/slot. */
     hasError() {
-        return this.hasErrorMessage() || this.invalid || this.showErrorSlot;
+        return this.hasErrorMessage() || this.invalid;
     }
-    /** If any helpertext or error message is active. Checks both props and slots. */
-    hasMessage() {
-        return this.hasHelperText() || this.hasErrorMessage();
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
+    }
+    hideError() {
+        return !this.hasErrorMessage();
     }
     checkSlottedHelper() {
-        const slottedHelper = this.hostElement.querySelector('[slot=helpertext]')?.textContent;
-        this.showHelperSlot = !!slottedHelper?.length;
+        return !!this.hostElement.querySelector('[slot=helpertext]');
     }
     checkSlottedError() {
-        const slottedError = this.hostElement.querySelector('[slot=error]')?.textContent;
-        this.showErrorSlot = !!slottedError?.length;
+        return !!this.hostElement.querySelector('[slot=error]');
     }
     getInputType() {
         const types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email'];
@@ -275,14 +292,30 @@ export class PnInput {
     useCompactLabel() {
         return this.validLabel() && this.compact;
     }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() && !(this.pnAriaLabel || this.arialabel) ? this.pnAriaLabelledby : null;
+    }
+    getAriaDescribedby() {
+        if (this.hasErrorMessage())
+            return this.idError;
+        else if (this.hasHelperText())
+            return this.idHelper;
+        return null;
+    }
     renderLabel() {
-        return (h("label", { htmlFor: this.inputid, class: "pn-input-label", "data-compact": this.compact }, this.label && h("span", null, this.label), this.maxlength >= 0 && h("span", null, `${this.value.length}/${this.maxlength}`)));
+        return (h("label", { htmlFor: this.getId(), class: "pn-input-label", "data-compact": this.compact }, this.label && h("span", null, this.label), this.maxlength >= 0 && h("span", null, `${this.value.length}/${this.maxlength}`)));
     }
     render() {
-        return (h(Host, { key: '3250630450288d09811b7c78bca5091ba93ec7ab' }, h("div", { key: 'db673ba19f300966eaf5c38136fe7d6143aa661d', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError(), style: {
+        return (h(Host, { key: '800f4fb8490656e28657f7a4a041ba0c6dc46af2' }, h("div", { key: '8defa078a3e541509bc17278751f8e59f59f3bd7', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError(), style: {
                 '--pn-input-offset-left': `${this.offsetLeft}px`,
                 '--pn-input-offset-right': `${this.offsetRight}px`,
-            } }, this.useLabel() && this.renderLabel(), h("div", { key: 'b216b7f951be237aed6e46f1ccbcfd29b2a3cad1', class: "pn-input-group" }, h("input", { key: '4ee129c35c6a74a359df9d611b236132d7afac38', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), "data-compact": this.compact, "data-value": this.value?.length > 0, onInput: e => this.setVal(e) }), this.useCompactLabel() && this.renderLabel(), h("div", { key: '753a9abeaf5bfa5ffb3be10042a76aa7863bce9c', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: 'acf1a6e42c9d37cab6f6a0453d8ea674df1cd0c3', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: '70d2eb7e94e790d665a57557595c2bce4855b827', class: "pn-input-text" }, this.textPrefix)), h("div", { key: '1dcae3fb8489d2dc6aa7325baea693591acef31c', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: '05044f3fbea582d507de30a0ff751abaf1da3206', class: "pn-input-text" }, this.textSuffix), this.displayState() && h("pn-icon", { key: '727650c9e6c9b9da2ef43e933fab95b6adc8a6bb', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '4e28eddff11c9aea670a6764aeb0316bccba1c1c', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (h("pn-button", { key: '2181adb68c152d837ef03bf9b7e0eb66eb3ea6d2', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: 'b8b1039a61a23efd24ebd71285b15cce7bfc5ec0', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: '4433df6b700cc40ce2ae698d2474f57163b398a1', class: "pn-input-helper" }, this.helpertext), h("span", { key: '41c8fb1cbbc17b7c349922cac2ff42244a017e0c', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '5628bbc8db75161d18ad3e75c259bf3eb5fc9052', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: 'e41145d7fab9f3ae35dd428971c79673d0531301', class: "pn-input-error" }, this.error), h("span", { key: 'ae85a9420fcb449cc874eadc7a066dd772f097a9', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: 'bdd31ab2f706cac6e243562d035361a381ecfa43', name: "error" }))))));
+            } }, this.useLabel() && this.renderLabel(), h("div", { key: 'dc01fb7fdb2a60ee89473f0152d833243be4ff8d', class: "pn-input-group" }, h("input", { key: '32f63d4aa1c6edd2d10f8876ebd3371cff366eb7', type: this.getInputType(), id: this.getId(), class: "pn-input-element", name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.getAriaDescribedby(), "aria-controls": this.pnAriaControls || this.ariacontrols, "aria-invalid": this.hasError()?.toString(), "data-compact": this.compact, "data-value": this.value?.length > 0, onInput: e => this.setVal(e) }), this.useCompactLabel() && this.renderLabel(), h("div", { key: 'b52d9bfa61569635f422fedc22edd09c768ab9d8', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: 'e5035273e663855094ba88ed0b485a4e8ffed56c', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: '1d0e5355c5dbfecf3dbb693589726a233e3b7df6', class: "pn-input-text" }, this.textPrefix)), h("div", { key: 'e1faa82f19dcfdb6c427d5d2967bfb6694508675', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: '4c5ecf7c19bf64eea77b21b05d9ffe491bf4b91c', class: "pn-input-text" }, this.textSuffix), this.displayState() && h("pn-icon", { key: 'f7014e0c31faf3c563c846e4a7061c6f4b35a64a', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '21518c4f16245de370fcba302b177cfe04e91904', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (h("pn-button", { key: '60263a255ee8c8d3ed72ea89a26abfbe9be11d0d', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: 'd23165556ffcdbfcf7229a04f5c1ea8686432c97', id: this.idHelper, class: "pn-input-message", hidden: this.hideHelpertext() }, !!this.helpertext && h("span", { key: 'b7e31855d677953bbc7a4f65cb0b26a5eac8887b' }, this.helpertext), h("slot", { key: 'a6bbaeceb31e2cc38d1e110b900e13b4f0957c6e', name: "helpertext" })), h("p", { key: '3668fbc1a512f92d3f5a2c6f1f7d86cf04df148b', id: this.idError, class: "pn-input-message", role: "alert", hidden: this.hideError() }, !!this.error && h("span", { key: 'c14fb6ab8e17c7d17813c83c0993f95d079f8274' }, this.error), h("slot", { key: '75ba01e945315e6a3bbf2f5e5ac34c73fe7ab57f', name: "error" })))));
     }
     static get is() { return "pn-input"; }
     static get originalStyleUrls() {
@@ -305,8 +338,8 @@ export class PnInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Text label placed above the input field."
@@ -335,46 +368,6 @@ export class PnInput {
                 "reflect": false,
                 "attribute": "helpertext"
             },
-            "inputid": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Provide a unique HTML id to connect the input with the label.\nA unique uuid ID will be generated if this field is left empty."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "inputid",
-                "defaultValue": "this.id"
-            },
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set the value of the input."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
-            },
             "language": {
                 "type": "string",
                 "mutable": false,
@@ -400,87 +393,11 @@ export class PnInput {
                 "setter": false,
                 "reflect": false,
                 "attribute": "language",
-                "defaultValue": "null"
-            },
-            "compact": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "v7.21.0"
-                        }],
-                    "text": "Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "compact",
-                "defaultValue": "false"
-            },
-            "icon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "see",
-                            "text": "{@link textPrefix }"
-                        }, {
-                            "name": "category",
-                            "text": "Visual"
-                        }],
-                    "text": "Select an icon to display before the input field value.\n`icon` takes precedence over the `text-prefix` prop."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon"
-            },
-            "textPrefix": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "see",
-                            "text": "{@link icon }"
-                        }, {
-                            "name": "see",
-                            "text": "{@link textSuffix }"
-                        }, {
-                            "name": "category",
-                            "text": "Visual"
-                        }],
-                    "text": "Set a small text before the input field value.\nCannot be used together with an `icon` at the same time."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text-prefix"
+                "defaultValue": "undefined"
             },
-            "textSuffix": {
+            "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -490,18 +407,16 @@ export class PnInput {
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "see",
-                            "text": "{@link textPrefix }"
-                        }, {
                             "name": "category",
-                            "text": "Visual"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set a small text after the input field value.\nCannot be used with the `text-prefix` prop at the same time."
+                    "text": "Set the value of the input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "text-suffix"
+                "attribute": "value",
+                "defaultValue": "''"
             },
             "type": {
                 "type": "string",
@@ -516,7 +431,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`."
                 },
@@ -539,7 +454,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "HTML input name. Setting a name will help the browser understand what type of data the input have\nand can better assist with autofill data based on previous entires much better."
                 },
@@ -561,7 +476,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "Provide a placeholder text. Remember that this is no replacement for a label.\nThe placeholder should be a nice addition to the label/helpertext, not important information."
                 },
@@ -589,9 +504,9 @@ export class PnInput {
                             "text": "{@link inputid }"
                         }, {
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
-                    "text": "Let the browser know what type of autocorrects the input should use.\nWorks much better if a `name` and `inputid` is supplied."
+                    "text": "Let the browser know what type of autocorrects the input should use.\nWorks much better if a `name` and `pn-id` is supplied."
                 },
                 "getter": false,
                 "setter": false,
@@ -611,7 +526,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "The maximum number of characters the user should be able to add, also adds a visible counter."
                 },
@@ -633,7 +548,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "Hint the browser about what type of virtual keyboard should be used.\nThe browser will be able to decide this on its own most of the time,\nespecially if you use the `type`, `name` and `inputid` props.\n\nLeave empty or with a `''` value if you want the browsers default behaviour (`text`)."
                 },
@@ -655,7 +570,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "Point to a datalist element for this input."
                 },
@@ -677,7 +592,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "Pattern prop."
                 },
@@ -699,7 +614,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the `min` value of the `number` input."
                 },
@@ -721,7 +636,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the `max` value of the `number` input."
                 },
@@ -743,7 +658,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
                     "text": "Set a `step` for the number input."
                 },
@@ -752,51 +667,53 @@ export class PnInput {
                 "reflect": false,
                 "attribute": "step"
             },
-            "arialabel": {
-                "type": "string",
+            "required": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
-                    "text": "While you can use the `aria-label`, using a `label` is far more accessible."
+                    "text": "Set the input as `required`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "arialabel"
+                "attribute": "required",
+                "defaultValue": "false"
             },
-            "ariacontrols": {
-                "type": "string",
+            "readonly": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set the ID of what this input controls."
+                    "text": "Set the input as `readonly`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "ariacontrols"
+                "attribute": "readonly",
+                "defaultValue": "false"
             },
-            "required": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -809,17 +726,17 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set the input as `required`."
+                    "text": "Set the input as `disabled`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "disabled": {
+            "compact": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -828,42 +745,100 @@ export class PnInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "Set the input as `disabled`."
+                    "text": "Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
+                "attribute": "compact",
                 "defaultValue": "false"
             },
-            "readonly": {
-                "type": "boolean",
+            "icon": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "see",
+                            "text": "{@link textPrefix }"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "Set the input as `readonly`."
+                    "text": "Select an icon to display before the input field value.\n`icon` takes precedence over the `text-prefix` prop."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
+                "attribute": "icon"
+            },
+            "textPrefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "{@link icon }"
+                        }, {
+                            "name": "see",
+                            "text": "{@link textSuffix }"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Set a small text before the input field value.\nCannot be used together with an `icon` at the same time."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-prefix"
+            },
+            "textSuffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "{@link textPrefix }"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Set a small text after the input field value.\nCannot be used with the `text-prefix` prop at the same time."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-suffix"
             },
             "valid": {
                 "type": "boolean",
@@ -878,7 +853,7 @@ export class PnInput {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Validation"
+                            "text": "Features"
                         }],
                     "text": "Set the input as `valid`. Provides a green color and a check icon."
                 },
@@ -904,7 +879,7 @@ export class PnInput {
                             "text": "{@link error Provide an error message.}"
                         }, {
                             "name": "category",
-                            "text": "Validation"
+                            "text": "Features"
                         }],
                     "text": "Set the input as `invalid`. Provides a red color and red warning icon."
                 },
@@ -930,7 +905,7 @@ export class PnInput {
                             "text": "{@link invalid Set invalid without an error message.}"
                         }, {
                             "name": "category",
-                            "text": "Validation"
+                            "text": "Features"
                         }],
                     "text": "Set the input as `invalid` and display an error message (applies the same style as `invalid`).\n\nError message; will take precedence over helpertext if both are provided."
                 },
@@ -938,6 +913,181 @@ export class PnInput {
                 "setter": false,
                 "reflect": false,
                 "attribute": "error"
+            },
+            "pnId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the input (default is a generated UUID)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id"
+            },
+            "pnAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-label"
+            },
+            "pnAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-labelledby"
+            },
+            "pnAriaControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set the ID of what this input controls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-controls"
+            },
+            "inputid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the input (default is a generated UUID)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inputid"
+            },
+            "arialabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-aria-label` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "While you can use the `aria-label`, using a `label` is far more accessible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arialabel"
+            },
+            "ariacontrols": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-aria-controls` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set the ID of what this input controls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ariacontrols"
             }
         };
     }
@@ -945,8 +1095,6 @@ export class PnInput {
         return {
             "offsetLeft": {},
             "offsetRight": {},
-            "showHelperSlot": {},
-            "showErrorSlot": {},
             "showPassword": {}
         };
     }
@@ -959,11 +1107,14 @@ export class PnInput {
                 "propName": "textSuffix",
                 "methodName": "handleOffset"
             }, {
-                "propName": "helpertext",
-                "methodName": "handleMessage"
+                "propName": "inputid",
+                "methodName": "handleId"
             }, {
-                "propName": "error",
-                "methodName": "handleMessage"
+                "propName": "pnId",
+                "methodName": "handleId",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }];
     }
 }