@postnord/pn-marketweb-components 4.3.6 → 4.3.7

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

@@ -9,6 +9,8 @@ import { translations } from "./translations";
 /**
  * The `pn-counter` is an input with a button on each side that can be used to increase and decrease the input value.
  *
+ * @slot helpertext - Use this slot to add custom HTML inside of the helpertext element. Recommended if you need a link. {@since v7.25.0}
+ *
  * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
  * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
  */
@@ -24,42 +26,60 @@ export class PnCounter {
     /** Prevent double events when reaching min/max values. */
     lastDispatchedValue;
     interactType;
-    /** Label for the counter */
+    /** Label for the counter. This is required for the counter to be 100% accessible out of the box. */
     label;
     /** Set a helpertext for the counter. */
     helpertext;
-    /** Set a predefined value */
+    /** Set the language manually for the built in translations.  */
+    language = undefined;
+    /** Set a predefined value. @category Native attributes */
     value = 0;
-    /** Set a unique HTML ID for the counter */
-    counterid = this.id;
-    /** Use the compact label variant. @since v7.21.0 */
-    compact = false;
-    /** Set the language manually for the built in translations. */
-    language = null;
-    /** Text for the decrease button. Default is "Decrease". @category Translation */
-    labelDecrease;
-    /** Text for the increase button. Default is "Increase". @category Translation */
-    labelIncrease;
-    /** Set a message that shows below input when user wants to set a value that is below `min`. Default is "Minimum value is x" @category Translation */
-    minMessage;
-    /** Set a message that shows below input when user wants to set a value that is above `max`. Default is "Maximum value is x"  @category Translation */
-    maxMessage;
-    /** HTML input name. @category HTML input */
+    /** HTML input name. @category Native attributes */
     name;
-    /** Minimum value. @category HTML input */
+    /** Minimum value. @category Native attributes */
     min;
-    /** Maximum value. @category HTML input */
+    /** Maximum value. @category Native attributes */
     max;
-    /** Increase/decrease the value in steps, default is 1. @category HTML input */
+    /** Increase/decrease the value in steps, default is 1. @category Native attributes */
     step = 1;
-    /** Suggest values for the counter input. @category HTML input */
+    /** Suggest values for the counter input. @category Native attributes */
     list;
-    /** Set the counter as required. @category State */
+    /** Set the counter as required. @category Native attributes */
     required = false;
-    /** Set the counter as readonly. @category State */
+    /** Set the counter as readonly. @category Native attributes */
     readonly = false;
-    /** Set the counter as disabled. @category State */
+    /** Set the counter as disabled. @category Native attributes */
     disabled = false;
+    /** Use the compact label variant. @since v7.21.0 @category Features */
+    compact = false;
+    /** Text for the decrease button. Default is "Decrease". @category Features */
+    labelDecrease;
+    /** Text for the increase button. Default is "Increase". @category Features */
+    labelIncrease;
+    /** Hide the tooltips for the increase/decrease button. @since v7.25.0 @category Features */
+    hideTooltips = false;
+    /** Set a message that shows below input when user wants to set a value that is below `min`. Default is "Minimum value is x" @category Features */
+    minMessage;
+    /** Set a message that shows below input when user wants to set a value that is above `max`. Default is "Maximum value is x"  @category Features */
+    maxMessage;
+    /** Set a unique HTML ID for the counter. @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 a unique HTML ID for the counter. @deprecated Use `pn-id` instead. @category HTML attributes */
+    counterid;
     /**
      * Instead of listening to multiple input, change and/or click events, we bundled them into one.
      * - `value` is the current counter value.
@@ -89,15 +109,16 @@ export class PnCounter {
         this.lastDispatchedValue = this.value;
     }
     handleId() {
-        this.idLabel = `${this.counterid}-label`;
-        this.idText = `${this.counterid}-text`;
-        this.idAmount = `${this.counterid}-count`;
+        this.idLabel = `${this.getId()}-label`;
+        this.idText = `${this.getId()}-text`;
+        this.idAmount = `${this.getId()}-count`;
     }
     async componentWillLoad() {
-        this.handleId();
-        if (this.language)
-            return;
-        await awaitTopbar(this.hostElement);
+        if (this.language === undefined)
+            await awaitTopbar(this.hostElement);
+    }
+    getId() {
+        return this.pnId || this.counterid || this.id;
     }
     setVal(event) {
         const { valueAsNumber } = event.target;
@@ -120,6 +141,12 @@ export class PnCounter {
     hasMax() {
         return typeof this.max === 'number';
     }
+    getAriaLabel() {
+        return !this.label && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.label && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
     decreaseAmount() {
         if (this.hasMin() && this.value <= this.min)
             this.showMinMaxMessage = true;
@@ -163,9 +190,13 @@ export class PnCounter {
             return this.toggleMinMaxMessage();
         return showValue ? this.value.toString() : this.helpertext;
     }
+    hideHelpertext() {
+        const slotHelpertext = this.hostElement.querySelector('[slot="helpertext"]');
+        return !(this.getTextMessage() || !!slotHelpertext?.textContent);
+    }
     describedbyIds() {
         const list = [];
-        if (this.helpertext)
+        if (!this.hideHelpertext())
             list.push(this.idText);
         if (this.displaySrValue)
             list.push(this.idAmount);
@@ -180,16 +211,18 @@ export class PnCounter {
         return this.disabled || this.readonly;
     }
     renderLabel() {
-        return (h("label", { htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel, "data-compact": this.compact }, h("span", null, this.label)));
+        if (!this.label)
+            return null;
+        return (h("label", { htmlFor: this.getId(), class: "pn-counter-label", id: this.idLabel, "data-compact": this.compact }, h("span", null, this.label)));
     }
     renderButton(increase = false) {
         const label = increase
             ? this.labelIncrease || this.translate('INCREASE')
             : this.labelDecrease || this.translate('DECREASE');
-        return (h("pn-button", { "data-increase": increase ? true : null, "data-decrease": increase ? null : true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: increase ? plus : minus, iconOnly: true, tooltip: label, onPnClick: () => (increase ? this.increaseAmount() : this.decreaseAmount()) }));
+        return (h("pn-button", { "data-increase": increase ? true : null, "data-decrease": increase ? null : true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: increase ? plus : minus, iconOnly: true, tooltip: this.hideTooltips ? null : label, arialabel: this.hideTooltips ? label : null, onPnClick: () => (increase ? this.increaseAmount() : this.decreaseAmount()) }));
     }
     render() {
-        return (h(Host, { key: '8f8a1d6f9cf41e43a17146796bdbadfabb5421da' }, h("div", { key: '1de06de8544eeb0efcdd940da16fd7cb39620897', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, !this.compact && this.renderLabel(), h("div", { key: '83280bb5e207a2a226e7174f5819ef0f375f06c6', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, this.renderButton(), h("div", { key: '6f3cc4e8987d526be974bd561f2e3413e83cc35f', class: "pn-counter-input" }, h("input", { key: 'f2cb0054546017a768e68503aaf7fd93b55c5885', id: this.counterid, class: "pn-counter-element", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.compact ? ' ' : null, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), "data-compact": this.compact, onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), this.compact && this.renderLabel()), this.renderButton(true)), !!this.getTextMessage() && (h("p", { key: 'cb64255f574b4d9fc7ba0098d9f7353c5c639956', id: this.idText, class: "pn-counter-helpertext" }, h("span", { key: '76a5d077b53f2a60c1d39f42b34e8312ae250d86' }, this.getTextMessage()))), h("p", { key: '37d61e40910bb4cd0cc072772c3dd5414fe31574', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
+        return (h(Host, { key: 'f1ff6cf51a77b28c5375f80c686106f82026eda8' }, h("div", { key: 'a6080106e0bf5ca0246e5a47a114c5ba967be4ef', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, !this.compact && this.renderLabel(), h("div", { key: 'ef3c419277ca2f2a2f8fe8cefad5633c893b4736', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, this.renderButton(), h("div", { key: 'c130e8c0d812eaad1cf794e9417ab62d3c12e1a7', class: "pn-counter-input" }, h("input", { key: '908746fc89d2d70fb6f26f0f13bbe99961d66222', id: this.getId(), class: "pn-counter-element", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.compact ? ' ' : null, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.describedbyIds(), "data-compact": this.compact, onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), this.compact && this.renderLabel()), this.renderButton(true)), h("p", { key: 'a25cd6e9abdb9fe8077e345cef828e187a11d260', id: this.idText, class: "pn-counter-helpertext", hidden: this.hideHelpertext() }, h("span", { key: '533d9836452f3b21a176eb594c225ad44c21956e' }, this.getTextMessage()), h("slot", { key: '35f10d13c8a1c65e6fc7b1a75b864e1cfd268837', name: "helpertext" })), h("p", { key: '1009ba0ea75131d6c19e3fb8960c39fc9d565d16', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
     }
     static get is() { return "pn-counter"; }
     static get originalStyleUrls() {
@@ -212,11 +245,11 @@ export class PnCounter {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Label for the counter"
+                    "text": "Label for the counter. This is required for the counter to be 100% accessible out of the box."
                 },
                 "getter": false,
                 "setter": false,
@@ -242,6 +275,33 @@ export class PnCounter {
                 "reflect": false,
                 "attribute": "helpertext"
             },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PnLanguages",
+                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
+                    "references": {
+                        "PnLanguages": {
+                            "location": "import",
+                            "path": "@/globals/types",
+                            "id": "src/globals/types.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the language manually for the built in translations."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "undefined"
+            },
             "value": {
                 "type": "number",
                 "mutable": true,
@@ -253,8 +313,11 @@ export class PnCounter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set a predefined value"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set a predefined value."
                 },
                 "getter": false,
                 "setter": false,
@@ -262,7 +325,7 @@ export class PnCounter {
                 "attribute": "value",
                 "defaultValue": "0"
             },
-            "counterid": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -271,90 +334,87 @@ export class PnCounter {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set a unique HTML ID for the counter"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "HTML input name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "counterid",
-                "defaultValue": "this.id"
+                "attribute": "name"
             },
-            "compact": {
-                "type": "boolean",
+            "min": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "since",
-                            "text": "v7.21.0"
+                            "name": "category",
+                            "text": "Native attributes"
                         }],
-                    "text": "Use the compact label variant."
+                    "text": "Minimum value."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "compact",
-                "defaultValue": "false"
+                "attribute": "min"
             },
-            "language": {
-                "type": "string",
+            "max": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "PnLanguages",
-                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
-                    "references": {
-                        "PnLanguages": {
-                            "location": "import",
-                            "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnLanguages",
-                            "referenceLocation": "PnLanguages"
-                        }
-                    }
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set the language manually for the built in translations."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Maximum value."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "language",
-                "defaultValue": "null"
+                "attribute": "max"
             },
-            "labelDecrease": {
-                "type": "string",
+            "step": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Translation"
+                            "text": "Native attributes"
                         }],
-                    "text": "Text for the decrease button. Default is \"Decrease\"."
+                    "text": "Increase/decrease the value in steps, default is 1."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label-decrease"
+                "attribute": "step",
+                "defaultValue": "1"
             },
-            "labelIncrease": {
+            "list": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -367,38 +427,111 @@ export class PnCounter {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Translation"
+                            "text": "Native attributes"
                         }],
-                    "text": "Text for the increase button. Default is \"Increase\"."
+                    "text": "Suggest values for the counter input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label-increase"
+                "attribute": "list"
             },
-            "minMessage": {
-                "type": "string",
+            "required": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set the counter as required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set the counter as readonly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set the counter as disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }, {
                             "name": "category",
-                            "text": "Translation"
+                            "text": "Features"
                         }],
-                    "text": "Set a message that shows below input when user wants to set a value that is below `min`. Default is \"Minimum value is x\""
+                    "text": "Use the compact label variant."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "min-message"
+                "attribute": "compact",
+                "defaultValue": "false"
             },
-            "maxMessage": {
+            "labelDecrease": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -411,16 +544,16 @@ export class PnCounter {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Translation"
+                            "text": "Features"
                         }],
-                    "text": "Set a message that shows below input when user wants to set a value that is above `max`. Default is \"Maximum value is x\""
+                    "text": "Text for the decrease button. Default is \"Decrease\"."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "max-message"
+                "attribute": "label-decrease"
             },
-            "name": {
+            "labelIncrease": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -433,83 +566,86 @@ export class PnCounter {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Features"
                         }],
-                    "text": "HTML input name."
+                    "text": "Text for the increase button. Default is \"Increase\"."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "label-increase"
             },
-            "min": {
-                "type": "number",
+            "hideTooltips": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Features"
                         }],
-                    "text": "Minimum value."
+                    "text": "Hide the tooltips for the increase/decrease button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "min"
+                "attribute": "hide-tooltips",
+                "defaultValue": "false"
             },
-            "max": {
-                "type": "number",
+            "minMessage": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Features"
                         }],
-                    "text": "Maximum value."
+                    "text": "Set a message that shows below input when user wants to set a value that is below `min`. Default is \"Minimum value is x\""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "max"
+                "attribute": "min-message"
             },
-            "step": {
-                "type": "number",
+            "maxMessage": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "Features"
                         }],
-                    "text": "Increase/decrease the value in steps, default is 1."
+                    "text": "Set a message that shows below input when user wants to set a value that is above `max`. Default is \"Maximum value is x\""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "step",
-                "defaultValue": "1"
+                "attribute": "max-message"
             },
-            "list": {
+            "pnId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -521,84 +657,93 @@ export class PnCounter {
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "HTML input"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Suggest values for the counter input."
+                    "text": "Set a unique HTML ID for the counter."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "list"
+                "attribute": "pn-id"
             },
-            "required": {
-                "type": "boolean",
+            "pnAriaLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Set the counter as required."
+                    "text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
+                "attribute": "pn-aria-label"
             },
-            "readonly": {
-                "type": "boolean",
+            "pnAriaLabelledby": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Set the counter as readonly."
+                    "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": "readonly",
-                "defaultValue": "false"
+                "attribute": "pn-aria-labelledby"
             },
-            "disabled": {
-                "type": "boolean",
+            "counterid": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Set the counter as disabled."
+                    "text": "Set a unique HTML ID for the counter."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "counterid"
             }
         };
     }
@@ -637,6 +782,12 @@ export class PnCounter {
             }, {
                 "propName": "counterid",
                 "methodName": "handleId"
+            }, {
+                "propName": "pnId",
+                "methodName": "handleId",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }];
     }
 }