@postnord/pn-marketweb-components 4.3.5 → 4.3.7

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

@@ -8,8 +8,8 @@ import { Fragment, Host, forceUpdate, h, } from "@stencil/core";
  * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and
  * has support for most attributes.
  *
- * @slot helpertext - Set the helpertext via a slot instead of prop. Wrap the content like this: `<span slot="helpertext">`.
- * @slot error - Set the error message via a slot instead of prop. Wrap the content like this: `<span slot="error">`.
+ * @slot helpertext - Set the helpertext via a slot instead of prop. Wrap the content like this: `<span slot="helpertext" />`.
+ * @slot error - Set the error message via a slot instead of prop. Wrap the content like this: `<span slot="error" />`.
  *
  * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value.
  * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input).
@@ -41,51 +41,35 @@ export class PnRange {
     labelEnd;
     /** Set a helpertext for the range input. */
     helpertext = null;
-    /**
-     * Add markers. This will also render a `datalist` element with `options`.
-     * Omitting the `label` for a marker will use the `value` as label instead.
-     * Set `label` to `null` or `''` to hide it completely.
-     */
-    markers = [];
-    /** Set a prefix for the range/input field. */
-    textPrefix = null;
-    /** Set a suffix for the range/input field. */
-    textSuffix = null;
-    /** Set an icon for the range/input field. */
-    icon = null;
-    /** Set an icon at the end of the range or for the second input field when using `multiple`. */
-    iconEnd = null;
-    /** Set a custom HTML id. */
-    pnId = this.id;
-    /** Set a custom HTML id. */
-    pnIdEnd = this.idEnd;
-    /** The range input name. @category HTML Attributes */
+    /** The range input value. @category Native attributes */
+    value = 0;
+    /** The range end input value. @category Native attributes */
+    valueEnd = 0;
+    /** The range input name. @category Native attributes */
     name;
-    /** The range input name. @category HTML Attributes */
+    /** The range input name. @category Native attributes */
     nameEnd;
-    /** The range input min value. @category HTML Attributes */
+    /** The range input min value. @category Native attributes */
     min = 0;
-    /** The range input max value. @category HTML Attributes */
+    /** The range input max value. @category Native attributes */
     max = 100;
-    /** The range input value. @category HTML Attributes */
-    value = 0;
-    /** The range end input value. @category HTML Attributes */
-    valueEnd = 0;
-    /** Set a step value for the range input. @category HTML Attributes */
+    /** Set a step value for the range input. @category Native attributes */
     step = '';
+    /** Disable the range input. @category Native attributes */
+    disabled = false;
     /**
-     * Allow multiple values to be selected
+     * Add markers. This will also render a `datalist` element with `options`.
+     * Omitting the `label` for a marker will use the `value` as label instead.
+     * Set `label` to `null` or `''` to hide it completely.
      * @category Features
      */
-    multiple = false;
+    markers = [];
     /**
      * Display an input for the range value.
      * Allowing the user to type or use the slider to set the value.
      * @category Features
      */
     input = false;
-    /** Hide the tooltip. @category Features */
-    tooltipHide = false;
     /**
      * Range tooltip label template. Default is simply the value of the range input.
      * @example
@@ -94,12 +78,57 @@ export class PnRange {
      * @category Features
      */
     tooltipTemplate = this.tooltipDefault;
-    /** Disable the range input. @category State */
-    disabled = false;
-    /** Set an error message for the range input. @category State */
-    error = null;
-    /** Set the error visual for the range input, same as `error`, but without a message. @category State */
+    /** Hide the tooltip. @category Features */
+    tooltipHide = false;
+    /** Set a prefix for the range/input field. @category Features */
+    textPrefix = null;
+    /** Set a suffix for the range/input field. @category Features */
+    textSuffix = null;
+    /** Set an icon for the range/input field. @category Features */
+    icon = null;
+    /** Set an icon at the end of the range or for the second input field when using `multiple`. @category Features */
+    iconEnd = null;
+    /**
+     * Allow multiple values to be selected
+     * @category Features
+     */
+    multiple = false;
+    /** Set the error visual for the range input, same as `error`, but without a message. @category Features */
     invalid = false;
+    /** Set an error message for the range input. @category Features */
+    error = null;
+    /** Set a custom ID for the input. @category HTML attributes */
+    pnId = this.id;
+    /** Set a custom ID for the end input. @category HTML attributes */
+    pnIdEnd = this.idEnd;
+    /**
+     * 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 for the end input via an aria attribute.
+     * We strongly recommend you use the `label-end` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelEnd;
+    /**
+     * 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;
+    /**
+     * Provide the label for the end input from another element via its ID.
+     * We strongly recommend you use the `label-end` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledbyEnd;
     handleValue() {
         if (this.multiple && this.value > this.valueEnd) {
             this.valueEnd = this.value;
@@ -117,6 +146,8 @@ export class PnRange {
         requestAnimationFrame(() => this.hostElement.style.setProperty('--pn-range-progress-end', `${percentage}%`));
     }
     handleId() {
+        this.idInput = `${this.pnId}-input`;
+        this.idInputEnd = `${this.pnIdEnd}-input`;
         this.idHelpertext = `${this.pnId}-helpertext`;
         this.idError = `${this.pnId}-error`;
         this.idDatalist = `${this.pnId}-data`;
@@ -139,6 +170,16 @@ export class PnRange {
         if (this.mo)
             this.mo.disconnect();
     }
+    getAriaLabel(end) {
+        if (end)
+            return !this.labelEnd && !this.pnAriaLabelledbyEnd ? this.pnAriaLabelEnd : null;
+        return !this.label && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby(end) {
+        if (end)
+            return !this.labelEnd && !this.pnAriaLabelEnd ? this.pnAriaLabelledbyEnd : null;
+        return !this.label && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
     tooltipDirection(isEnd = false) {
         if (this.multiple) {
             const isSmall = this.hostElement.offsetWidth < 384;
@@ -169,7 +210,7 @@ export class PnRange {
     }
     /** 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;
     }
     checkSlottedHelper() {
         const slottedHelper = this.hostElement.querySelector('[slot=helpertext]')?.textContent;
@@ -280,13 +321,14 @@ export class PnRange {
         const label = isEnd ? this.labelEnd : this.label;
         const value = isEnd ? this.valueEnd : this.value;
         const idInput = isEnd ? this.idInputEnd : this.idInput;
-        return (h("pn-input", { class: "pn-range-field", label: label, type: "number", name: `${isEnd ? this.nameEnd : this.name}-input`, ...this.commonAttrs(), icon: isEnd ? this.iconEnd : this.icon, textPrefix: this.textPrefix, textSuffix: this.textSuffix, value: value?.toString(), inputid: idInput, invalid: this.hasError(), "data-single": !this.multiple, ...this.setListeners() }));
+        const name = isEnd ? (this.nameEnd ? `${this.nameEnd}-input` : null) : this.name ? `${this.name}-input` : null;
+        return (h("pn-input", { class: "pn-range-field", label: label, type: "number", name: name, ...this.commonAttrs(), icon: isEnd ? this.iconEnd : this.icon, textPrefix: this.textPrefix, textSuffix: this.textSuffix, value: value?.toString(), inputid: idInput, invalid: this.hasError(), "pn-aria-label": this.getAriaLabel(isEnd), "pn-aria-labelledby": this.getAriaLabelledby(isEnd), "data-single": !this.multiple, ...this.setListeners() }));
     }
     renderRangeInput(isEnd = false) {
         const id = isEnd ? this.pnIdEnd : this.pnId;
         const value = isEnd ? this.valueEnd : this.value;
         const customTooltip = this.tooltipDefault !== this.tooltipTemplate;
-        return (h("input", { id: id, class: "pn-range-input", type: "range", name: isEnd ? this.nameEnd : this.name, ...this.commonAttrs(), value: value, "aria-valuetext": customTooltip ? this.getTooltipLabel(isEnd) : null, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError().toString(), "data-start": isEnd ? null : true, "data-end": isEnd ? true : null, ...this.setListeners() }));
+        return (h("input", { id: id, class: "pn-range-input", type: "range", name: isEnd ? this.nameEnd : this.name, ...this.commonAttrs(), value: value, "aria-label": this.getAriaLabel(isEnd), "aria-labelledby": this.getAriaLabelledby(isEnd), "aria-valuetext": customTooltip ? this.getTooltipLabel(isEnd) : null, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError().toString(), "data-start": isEnd ? null : true, "data-end": isEnd ? true : null, ...this.setListeners() }));
     }
     renderTooltip(isEnd = false) {
         return (h("div", { class: "pn-range-thumb", "data-start": isEnd ? null : true, "data-end": isEnd ? true : null, "data-align": this.tooltipDirection(isEnd), "aria-hidden": "true" }, !this.tooltipHide && (h("div", { class: "pn-range-tooltip" }, h("span", { class: "pn-range-tooltip-label" }, this.getTooltipLabel(isEnd))))));
@@ -301,7 +343,7 @@ export class PnRange {
         this.setValue(numberValue, this.pressControl === 'end');
     }
     render() {
-        return (h(Host, { key: '0a79e6606d509d701b83da4a2c3d3636c7d73979' }, h("div", { key: 'f56834025691e3c67544e4ddb2b54630bfa46095', class: "pn-range", "data-markers": !!this.markers?.length, "data-input": this.input }, h("div", { key: 'e39b5994468fc6f50ad479c5b3875732a29a4761', class: "pn-range-header", "data-input": this.input }, h("label", { key: '724a16a534343838e392480163517afc7bd15b6f', htmlFor: this.pnId, class: "pn-range-label" }, h("span", { key: 'ebd27275aeb63e79df5f2f0f5f4d1f5d118cd137' }, this.label)), this.multiple && (h("label", { key: 'aebe4d8b124cc5a905b61624566dc4db52f1f4a0', htmlFor: this.pnIdEnd, class: "pn-range-label" }, h("span", { key: '7a90745fadc39d81bac3083d562c9d7fe47c1d00' }, this.labelEnd)))), this.renderPrefix(), h("div", { key: '28fcae728841f246bfac7ae488710459d468e4f2', class: "pn-range-group", "data-pressing": this.isPressing }, this.renderRangeInput(), this.multiple && (h(Fragment, { key: '87dae83eea2f5e4eb5318759767dfabc74a0f128' }, this.renderRangeInput(true), h("input", { key: 'aa461034dfe94c78310409f87c1efaa0a4fb0a4d', id: this.idInputHidden, type: "range", class: "pn-range-overlay-input", ...this.commonAttrs(), "aria-invalid": this.hasError().toString(), hidden: true, tabIndex: -1, ...this.setListeners(true) }))), h("div", { key: '3282ce9652ff135db9e5bfa533af1c7fd1d29adb', class: "pn-range-track", "data-multiple": this.multiple, "aria-hidden": "true" }), this.renderTooltip(), this.multiple && this.renderTooltip(true), !!this.markers?.length && (h("ul", { key: '1692843e137439b5bdedb5728104a3312d26ffc2', "aria-hidden": "true", class: "pn-range-markers" }, this.markers.map(({ label, value }) => (h("li", { class: "pn-range-markers-item", "data-min": this.calcPercentage(value) === this.min, "data-max": this.calcPercentage(value) === this.max, style: { '--pn-range-marker-position': `${this.calcPercentage(value)}%` } }, h("span", { class: "pn-range-markers-label", "data-active": this.isActiveMarker(value) }, this.getMarkerLabel({ value, label })))))))), this.renderSuffix(), !!this.markers?.length && (h("datalist", { key: 'ed0ea3e4e284366f3e4eaf94245a1a71ccf20a17', id: this.idDatalist }, this.markers.map(({ label, value }) => (h("option", { value: value, label: label === null ? null : label }))))), h("p", { key: '3dd6afe5a2f142b1df60fdd87c0c23f942d83a71', id: this.idHelpertext, class: "pn-range-message", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: '048797709bcb778a9c1f2d71ae1ee1b1eef665f0' }, this.helpertext), h("slot", { key: '2fabbbc425b643917415653f831126e9d7319efd', name: "helpertext" })), h("p", { key: '65061b23a86338d7490bbfc2759308c1326f5d4e', id: this.idError, class: "pn-range-message pn-range-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: 'a0be85a1e70ac6b07bb1447b6c8e9a04c72aade0' }, this.error), h("slot", { key: 'c13f70e99ec137373be96fa9d5a06b0266808fcf', name: "error" })))));
+        return (h(Host, { key: '9945b3c7f372134797de134a550106602a88a864' }, h("div", { key: 'd940ec70592f62a4a22f30fbee67ec9736b06560', class: "pn-range", "data-markers": !!this.markers?.length, "data-input": this.input }, h("div", { key: '9bcc2d50329ff1d77b6e60e32de8e6c7ff355271', class: "pn-range-header", "data-input": this.input }, this.label && (h("label", { key: '5888cd96c03e60f5311f877bf84e6aa62d47e97f', htmlFor: this.pnId, class: "pn-range-label" }, h("span", { key: '2072db6913d555fac653694a9e0d07c7d76fc695' }, this.label))), this.multiple && this.labelEnd && (h("label", { key: 'ae8dd61026a936c210c73ba6efe811e93760e60f', htmlFor: this.pnIdEnd, class: "pn-range-label" }, h("span", { key: '28bccee780ec10bd2b13b46f7e71ee0bcd68d559' }, this.labelEnd)))), this.renderPrefix(), h("div", { key: '278a597274b88d050ca240367e89677b5e302b97', class: "pn-range-group", "data-pressing": this.isPressing }, this.renderRangeInput(), this.multiple && (h(Fragment, { key: '840c4fc833463c6844157a3211707224777157ed' }, this.renderRangeInput(true), h("input", { key: '8eb75af8c97670d7cadb0fe91fd9f3314802953d', id: this.idInputHidden, type: "range", class: "pn-range-overlay-input", ...this.commonAttrs(), "aria-invalid": this.hasError().toString(), hidden: true, tabIndex: -1, ...this.setListeners(true) }))), h("div", { key: 'e2132f04eb0feca32916042bf0f3cd59f721dc8f', class: "pn-range-track", "data-multiple": this.multiple, "aria-hidden": "true" }), this.renderTooltip(), this.multiple && this.renderTooltip(true), !!this.markers?.length && (h("ul", { key: '9e49ca3fd348c9994b72129d6c10236935f14197', "aria-hidden": "true", class: "pn-range-markers" }, this.markers.map(({ label, value }) => (h("li", { class: "pn-range-markers-item", "data-min": this.calcPercentage(value) === this.min, "data-max": this.calcPercentage(value) === this.max, style: { '--pn-range-marker-position': `${this.calcPercentage(value)}%` } }, h("span", { class: "pn-range-markers-label", "data-active": this.isActiveMarker(value) }, this.getMarkerLabel({ value, label })))))))), this.renderSuffix(), !!this.markers?.length && (h("datalist", { key: '1de13cbec1006384d3ff3a00b1b04542f7202c41', id: this.idDatalist }, this.markers.map(({ label, value }) => (h("option", { value: value, label: label === null ? null : label }))))), h("p", { key: '2a188f9aedf5a406f61b76124a1d50439fff9113', id: this.idHelpertext, class: "pn-range-message", hidden: !this.hasHelperText() || this.hasErrorMessage() }, h("span", { key: '487bc4892db02156d88b683e96bb576897926b6a' }, this.helpertext), h("slot", { key: '5145e5f591e33da198650034c8d4dcf0e47d30a9', name: "helpertext" })), h("p", { key: '969947b6672fcd16c7b0947a2d2dc2faf58a9334', id: this.idError, class: "pn-range-message pn-range-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '5a0d01b2a9ca80f17cdf45329f3b900e1e1eabf7' }, this.error), h("slot", { key: '375f36337b860afd1d8b4c2b7bc8001d8653745f', name: "error" })))));
     }
     static get is() { return "pn-range"; }
     static get originalStyleUrls() {
@@ -324,8 +366,8 @@ export class PnRange {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Label for the range input."
@@ -344,7 +386,7 @@ export class PnRange {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Label for the range end input."
@@ -374,25 +416,53 @@ export class PnRange {
                 "attribute": "helpertext",
                 "defaultValue": "null"
             },
-            "markers": {
-                "type": "unknown",
-                "mutable": false,
+            "value": {
+                "type": "number",
+                "mutable": true,
                 "complexType": {
-                    "original": "{ value: number; label?: string }[]",
-                    "resolved": "{ value: number; label?: string; }[]",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Add markers. This will also render a `datalist` element with `options`.\nOmitting the `label` for a marker will use the `value` as label instead.\nSet `label` to `null` or `''` to hide it completely."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "The range input value."
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[]"
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "0"
             },
-            "textPrefix": {
+            "valueEnd": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "The range end input value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value-end",
+                "defaultValue": "0"
+            },
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -403,16 +473,18 @@ export class PnRange {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set a prefix for the range/input field."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "The range input name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "text-prefix",
-                "defaultValue": "null"
+                "attribute": "name"
             },
-            "textSuffix": {
+            "nameEnd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -423,101 +495,120 @@ export class PnRange {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set a suffix for the range/input field."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "The range input name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "text-suffix",
-                "defaultValue": "null"
+                "attribute": "name-end"
             },
-            "icon": {
-                "type": "string",
+            "min": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set an icon for the range/input field."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "The range input min value."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon",
-                "defaultValue": "null"
+                "attribute": "min",
+                "defaultValue": "0"
             },
-            "iconEnd": {
-                "type": "string",
+            "max": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set an icon at the end of the range or for the second input field when using `multiple`."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "The range input max value."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-end",
-                "defaultValue": "null"
+                "attribute": "max",
+                "defaultValue": "100"
             },
-            "pnId": {
+            "step": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "HTMLInputElement['step']",
                     "resolved": "string",
-                    "references": {}
+                    "references": {
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set a custom HTML id."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set a step value for the range input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "pn-id",
-                "defaultValue": "this.id"
+                "attribute": "step",
+                "defaultValue": "''"
             },
-            "pnIdEnd": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set a custom HTML id."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Disable the range input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "pn-id-end",
-                "defaultValue": "this.idEnd"
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
-            "name": {
-                "type": "string",
+            "markers": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "{ value: number; label?: string }[]",
+                    "resolved": "{ value: number; label?: string; }[]",
                     "references": {}
                 },
                 "required": false,
@@ -525,16 +616,38 @@ export class PnRange {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Attributes"
+                            "text": "Features"
                         }],
-                    "text": "The range input name."
+                    "text": "Add markers. This will also render a `datalist` element with `options`.\nOmitting the `label` for a marker will use the `value` as label instead.\nSet `label` to `null` or `''` to hide it completely."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "input": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Display an input for the range value.\nAllowing the user to type or use the slider to set the value."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "input",
+                "defaultValue": "false"
             },
-            "nameEnd": {
+            "tooltipTemplate": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -546,22 +659,26 @@ export class PnRange {
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "example",
+                            "text": "// Show a suffixed '%' in the tooltip with '{value} %'.\n<pn-range tooltip-template=\"{value} %\" value=\"25\" />"
+                        }, {
                             "name": "category",
-                            "text": "HTML Attributes"
+                            "text": "Features"
                         }],
-                    "text": "The range input name."
+                    "text": "Range tooltip label template. Default is simply the value of the range input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name-end"
+                "attribute": "tooltip-template",
+                "defaultValue": "this.tooltipDefault"
             },
-            "min": {
-                "type": "number",
+            "tooltipHide": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -569,22 +686,22 @@ export class PnRange {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Attributes"
+                            "text": "Features"
                         }],
-                    "text": "The range input min value."
+                    "text": "Hide the tooltip."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "min",
-                "defaultValue": "0"
+                "attribute": "tooltip-hide",
+                "defaultValue": "false"
             },
-            "max": {
-                "type": "number",
+            "textPrefix": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -592,22 +709,22 @@ export class PnRange {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Attributes"
+                            "text": "Features"
                         }],
-                    "text": "The range input max value."
+                    "text": "Set a prefix for the range/input field."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "max",
-                "defaultValue": "100"
+                "attribute": "text-prefix",
+                "defaultValue": "null"
             },
-            "value": {
-                "type": "number",
-                "mutable": true,
+            "textSuffix": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -615,22 +732,22 @@ export class PnRange {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Attributes"
+                            "text": "Features"
                         }],
-                    "text": "The range input value."
+                    "text": "Set a suffix for the range/input field."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "value",
-                "defaultValue": "0"
+                "reflect": false,
+                "attribute": "text-suffix",
+                "defaultValue": "null"
             },
-            "valueEnd": {
-                "type": "number",
-                "mutable": true,
+            "icon": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -638,43 +755,38 @@ export class PnRange {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Attributes"
+                            "text": "Features"
                         }],
-                    "text": "The range end input value."
+                    "text": "Set an icon for the range/input field."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "value-end",
-                "defaultValue": "0"
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "null"
             },
-            "step": {
+            "iconEnd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "HTMLInputElement['step']",
+                    "original": "string",
                     "resolved": "string",
-                    "references": {
-                        "HTMLInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLInputElement"
-                        }
-                    }
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Attributes"
+                            "text": "Features"
                         }],
-                    "text": "Set a step value for the range input."
+                    "text": "Set an icon at the end of the range or for the second input field when using `multiple`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "step",
-                "defaultValue": "''"
+                "attribute": "icon-end",
+                "defaultValue": "null"
             },
             "multiple": {
                 "type": "boolean",
@@ -699,7 +811,7 @@ export class PnRange {
                 "attribute": "multiple",
                 "defaultValue": "false"
             },
-            "input": {
+            "invalid": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -714,20 +826,20 @@ export class PnRange {
                             "name": "category",
                             "text": "Features"
                         }],
-                    "text": "Display an input for the range value.\nAllowing the user to type or use the slider to set the value."
+                    "text": "Set the error visual for the range input, same as `error`, but without a message."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "input",
+                "attribute": "invalid",
                 "defaultValue": "false"
             },
-            "tooltipHide": {
-                "type": "boolean",
+            "error": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -737,15 +849,15 @@ export class PnRange {
                             "name": "category",
                             "text": "Features"
                         }],
-                    "text": "Hide the tooltip."
+                    "text": "Set an error message for the range input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "tooltip-hide",
-                "defaultValue": "false"
+                "attribute": "error",
+                "defaultValue": "null"
             },
-            "tooltipTemplate": {
+            "pnId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -757,44 +869,91 @@ export class PnRange {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "example",
-                            "text": "// Show a suffixed '%' in the tooltip with '{value} %'.\n<pn-range tooltip-template=\"{value} %\" value=\"25\" />"
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id",
+                "defaultValue": "this.id"
+            },
+            "pnIdEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the end input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id-end",
+                "defaultValue": "this.idEnd"
+            },
+            "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": "Features"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Range tooltip label template. Default is simply the value of the range input."
+                    "text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "tooltip-template",
-                "defaultValue": "this.tooltipDefault"
+                "attribute": "pn-aria-label"
             },
-            "disabled": {
-                "type": "boolean",
+            "pnAriaLabelEnd": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Disable the range input."
+                    "text": "Provide the label for the end input via an aria attribute.\nWe strongly recommend you use the `label-end` prop instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "pn-aria-label-end"
             },
-            "error": {
+            "pnAriaLabelledby": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -806,39 +965,43 @@ export class PnRange {
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Set an error message for the range input."
+                    "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": "error",
-                "defaultValue": "null"
+                "attribute": "pn-aria-labelledby"
             },
-            "invalid": {
-                "type": "boolean",
+            "pnAriaLabelledbyEnd": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Set the error visual for the range input, same as `error`, but without a message."
+                    "text": "Provide the label for the end input from another element via its ID.\nWe strongly recommend you use the `label-end` prop instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid",
-                "defaultValue": "false"
+                "attribute": "pn-aria-labelledby-end"
             }
         };
     }
@@ -884,6 +1047,9 @@ export class PnRange {
                 }
             }, {
                 "propName": "pnId",
+                "methodName": "handleId"
+            }, {
+                "propName": "pnIdEnd",
                 "methodName": "handleId",
                 "handlerOptions": {
                     "immediate": true