@postnord/pn-marketweb-components 4.3.6 → 4.3.7

package/umd/modules/@postnord/web-components/esm/pn-progress-bar.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
 import { c as check_circle } from './check_circle-D4GZ__oQ.js';
 import { uuidv4 } from './index.js';
@@ -74,7 +74,7 @@ const PnProgressBar = class {
         return 'green500';
     }
     render() {
-        return (h(Host, { key: '141fef1da768dc423cf53dfa8088f1b98429236c' }, this.hasLabel() && (h("p", { key: '294199499037e6ed0e816f8a68850dfede795884', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: 'f292e951e29878d186b7f7896d7346fd41677006' }, this.label), this.hasIcon() && h("pn-icon", { key: '47b8065b97a8cd0f0d3e57ea4f68b07ad09c12a5', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: '0dd5189948aad2e501ee10076ed212987a52e4d8', id: this.progressId, class: "pn-progress-bar-container", role: "progressbar", "aria-labelledby": this.idLabel, "aria-describedby": this.hasIcon() ? this.idText : null, "aria-valuenow": this.progress, "aria-valuetext": this.progressPercentage }, h("div", { key: '51ceae38d589385687dd3e25c86526b4758f2792', class: "pn-progress-bar-meter" }, h("div", { key: '714d0aa19a487bf625ae10bcdd68d21d54b6f48a', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: 'b540a56c9d7fdfae49f508472d315ce1eeda5e99', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: '35d515a823d117a6ab31e3cda778a2ada8093233' }, this.getSubtext()))));
+        return (h(Host, { key: '09b5b426ac2b3b5ac6da052516f02a37e86a5ae6' }, this.hasLabel() && (h("p", { key: 'f63e4d6fcf21e46e809866fa9f25e92975665c60', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: '731610df6161f9d7724f85e1fc849983dd2c9e30' }, this.label), this.hasIcon() && h("pn-icon", { key: 'a9a823e21c9a6192ecd476fa7f993e2dc508f292', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: 'b38c51cbc3bf30d73cc169053a97fd62acd95972', id: this.progressId, class: "pn-progress-bar-container", role: "progressbar", "aria-labelledby": this.idLabel, "aria-describedby": this.hasIcon() ? this.idText : null, "aria-valuenow": this.progress, "aria-valuetext": this.progressPercentage }, h("div", { key: '91f89839bf307d1b32f3735690ae6894b845fcc2', class: "pn-progress-bar-meter" }, h("div", { key: '01dd3151497db0d7a4bfaa401fb132e015708ca6', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: 'fe4122adfd2d4e1ea043f161bc217b59f3164cf0', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: '7094b7dd7cf15e29cec6f710927a3b62151d8709' }, this.getSubtext()))));
     }
     static get watchers() { return {
         "progress": [{

package/umd/modules/@postnord/web-components/esm/pn-progress-indicator-step.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, h, a as Host } from './index-XKg-ydzH.js';
 import { w as white } from './colors-C_nYl55V.js';
 
 const pnProgressIndicatorStepCss = () => `${transformTag("pn-progress-indicator-step")}{display:flex;flex:1 0 4em}${transformTag("pn-progress-indicator-step")}:first-child{flex:0 0 auto}${transformTag("pn-progress-indicator-step")}:first-child .progress-line{display:none}${transformTag("pn-progress-indicator-step")}:first-child .info-container{transform:translateX(-50%);left:50%}.pn-progress-indicator-step{position:relative;display:flex;flex:1 0 4em;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}.pn-progress-indicator-step .circle{width:1.5em;height:1.5em;padding:0.3rem;border-radius:50%;background-color:#f3f2f2;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .circle{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .info-container{position:absolute;bottom:-2.5em;right:0;transform:translateX(50%) translateX(-1.2rem);white-space:nowrap;color:#f3f2f2;display:flex;align-items:center;flex-direction:column;font-size:1em;font-weight:normal;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .info-container{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .info-container .pn-icon-svg{height:1.7em;width:1.7em;margin-bottom:0.1em}.pn-progress-indicator-step .info-container .pn-icon-svg path,.pn-progress-indicator-step .info-container .pn-icon-svg polygon{fill:#f3f2f2}.pn-progress-indicator-step .progress-line{flex:1 1 auto;margin:auto 4px;height:0.8rem;background-color:#f3f2f2;position:relative;overflow:hidden;pointer-events:none;border-radius:10rem}.pn-progress-indicator-step .progress-line:after{content:"";position:absolute;top:0;left:0;height:0.8rem;width:100%;background-color:#005d92;transform:translateX(-100%);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .progress-line:after{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .progress-line:after{transition-delay:0.2s}.pn-progress-indicator-step.active .info-container{color:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg path{fill:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg polygon{fill:#000000}.pn-progress-indicator-step.activated{cursor:pointer}.pn-progress-indicator-step.done .progress-line:after,.pn-progress-indicator-step.active .progress-line:after{transform:translateX(0)}.pn-progress-indicator-step.done .circle,.pn-progress-indicator-step.active .circle{background-color:#005d92}.pn-progress-indicator-step.done .checkmark-path{stroke-linecap:round;stroke-dasharray:27;stroke-dashoffset:-23;animation:dash 0.2s cubic-bezier(0.55, 0, 0.1, 1) both}@keyframes dash{to{stroke-dashoffset:0}}`;
@@ -10,7 +10,7 @@ const pnProgressIndicatorStepCss = () => `${transformTag("pn-progress-indicator-
 const PnProgressIndicatorStep = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.setactivestep = createEvent(this, "setactivestep");
+        this.setactivestep = createEvent(this, "setactivestep", 7);
     }
     activated;
     done;
@@ -62,7 +62,7 @@ const PnProgressIndicatorStep = class {
         return className;
     }
     render() {
-        return (h(Host, { key: 'e5518f2d8c21c889738beb3a42e6865e7c64ac76', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: 'b0f5f684ca12fda2b22b51945d3b0b41ab490fa3', class: "progress-line" }), h("div", { key: '8d05494d4cc77145e44270666b678cf48eb05a96', class: "info-container" }, h("slot", { key: '864bea1ce3dd348be1abadcc3f8fb3757ac009b9' }), this.name), h("div", { key: '7d8394e5a4919404a137fd30ce125dfda5ed3034', class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
+        return (h(Host, { key: '8e3e6d57379a0e7fbc4fa481ed58f320b0a7e270', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: 'f07ace31e400c93a84043d4402bff452b2f3a5ea', class: "progress-line" }), h("div", { key: '1b7b7fcdbcf11091b66a29f936cb144cb8d7b948', class: "info-container" }, h("slot", { key: '9e075b50e5c16f7313d0442c889cd7ccbc2cbac9' }), this.name), h("div", { key: '8240501b137f38915d3a42139e340593a1975977', class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
     }
 };
 PnProgressIndicatorStep.style = pnProgressIndicatorStepCss();

package/umd/modules/@postnord/web-components/esm/pn-progress-indicator.entry.js

@@ -2,14 +2,14 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, c as createEvent, g as getElement, t as transformTag, h } from './index-CAEP792y.js';
+import { r as registerInstance, c as createEvent, g as getElement, t as transformTag, h } from './index-XKg-ydzH.js';
 
 const pnProgressIndicatorCss = () => `.pn-progress-indicator{display:flex;padding:2.8em 1em 0}`;
 
 const PnProgressIndicator = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.progresschange = createEvent(this, "progresschange");
+        this.progresschange = createEvent(this, "progresschange", 7);
     }
     get hostElement() { return getElement(this); }
     /** Takes the index of the active step */
@@ -34,7 +34,7 @@ const PnProgressIndicator = class {
         });
     }
     render() {
-        return (h("div", { key: '1108f70edf525c6e7e0e45d34a6d58e69c5b9ab2', class: "pn-progress-indicator" }, h("slot", { key: 'c4035cf9fadb46f4e573c0225bebb2f8f7187da6' })));
+        return (h("div", { key: '55eb279175a09345ebcb087ac6b0f819d5032a1e', class: "pn-progress-indicator" }, h("slot", { key: '70f0273b605df274663752dadde8585411a74bd7' })));
     }
 };
 PnProgressIndicator.style = pnProgressIndicatorCss();

package/umd/modules/@postnord/web-components/esm/pn-progress-stepper.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4, en, awaitTopbar } from './index.js';
 
 const translations = {
@@ -101,7 +101,7 @@ const PnProgressStepper = class {
         return this.progressStepperId || this.id;
     }
     render() {
-        return (h(Host, { key: 'a93457e5c8ec35858e7f15e45578feb67ec37f4e' }, h("label", { key: '86a36ba455f7433f072a9b38b8af09c9fda45fc4', htmlFor: this.getId(), class: 'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '') }, h("span", { key: 'eeb9163062bd19b03c394fe6c936440f040dd246' }, this.getLabel(), " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: 'f43fd84597ee5adcee54f8d16c3cba9c4fe3f2cf' }, " - ", this.stepName)), h("progress", { key: '81658eb2942d0b1712bbbb4e22904d0b4c3a5229', id: this.getId(), class: "pn-progress-sr-only", max: "100", value: this.progressValue }), this.dots ? (h("div", { class: "pn-progress-dots", "aria-hidden": "true" }, [...Array(this.totalSteps)].map((_, i) => (h("div", { class: "pn-progress-dot", "data-active": i + 1 <= this.currentStep, key: i }))))) : (h("div", { "aria-hidden": "true", class: "pn-progress" }, h("div", { class: "pn-progress-value", "data-full": this.currentStep === this.totalSteps })))));
+        return (h(Host, { key: 'eae49d6f5d3085e714bff2e668694523185c6fb6' }, h("label", { key: 'd5ec64934b8e8eab33b771d20aa34cdfb595f600', htmlFor: this.getId(), class: 'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '') }, h("span", { key: 'a30465882d45cdc3ee6513c79a9b9a0cacb68a88' }, this.getLabel(), " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: 'fb4f2eb25ccd60c648c7a2d077dfce35b6888f52' }, " - ", this.stepName)), h("progress", { key: '6822b750b6d86644f5a77115d449c050b7be418d', id: this.getId(), class: "pn-progress-sr-only", max: "100", value: this.progressValue }), this.dots ? (h("div", { class: "pn-progress-dots", "aria-hidden": "true" }, [...Array(this.totalSteps)].map((_, i) => (h("div", { class: "pn-progress-dot", "data-active": i + 1 <= this.currentStep, key: i }))))) : (h("div", { "aria-hidden": "true", class: "pn-progress" }, h("div", { class: "pn-progress-value", "data-full": this.currentStep === this.totalSteps })))));
     }
     static get watchers() { return {
         "currentStep": [{

package/umd/modules/@postnord/web-components/esm/pn-radio-button.entry.js

@@ -2,16 +2,17 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, M as Mixin, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4 } from './index.js';
-import { a as animateHeightFactory } from './index-CosyroON.js';
+import { a as animateHeightFactory } from './index-DyhO6xPY.js';
 
-const pnRadioButtonCss = () => `${transformTag("pn-radio-button")}{position:relative;display:inline-block}${transformTag("pn-radio-button")} .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${transformTag("pn-radio-button")} .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${transformTag("pn-radio-button")} .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0}${transformTag("pn-radio-button")} .pn-radio-helpertext:last-child{margin:0}${transformTag("pn-radio-button")} .pn-radio-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${transformTag("pn-radio-button")} .pn-radio-button{display:flex;gap:0.75em;padding:0}${transformTag("pn-radio-button")} .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-radio-button")} .pn-radio-outer{transition-duration:0s;transition-delay:0s}}${transformTag("pn-radio-button")} .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-radio-button")} .pn-radio-inner{transition-duration:0s;transition-delay:0s}}${transformTag("pn-radio-button")} .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-radio-button")} .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}${transformTag("pn-radio-button")} .pn-radio[data-tile] .pn-radio-outer{outline:none}${transformTag("pn-radio-button")} .pn-radio[data-invalid]{border-color:#a70707}${transformTag("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}${transformTag("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}${transformTag("pn-radio-button")} .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${transformTag("pn-radio-button")} .pn-radio-container[data-open]{visibility:visible;overflow:unset}${transformTag("pn-radio-button")} .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}${transformTag("pn-radio-button")} .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${transformTag("pn-radio-button")} .pn-radio>${transformTag("pn-icon")}{margin-left:0.75em}${transformTag("pn-radio-button")}>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${transformTag("pn-radio-button")}>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}${transformTag("pn-radio-button")}>input[type=radio][data-expand]{top:1em;left:1em}${transformTag("pn-radio-button")}>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}${transformTag("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}${transformTag("pn-radio-button")}>input[type=radio]:disabled{pointer-events:none}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>${transformTag("pn-icon")}>.pn-icon-svg path{fill:#5e554a}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}`;
+const pnRadioButtonCss = () => `${transformTag("pn-radio-button")}{position:relative;display:inline-block}${transformTag("pn-radio-button")} .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${transformTag("pn-radio-button")} .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${transformTag("pn-radio-button")} .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0;display:flex;flex-direction:column}${transformTag("pn-radio-button")} .pn-radio-helpertext:last-child{margin:0}${transformTag("pn-radio-button")} .pn-radio-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${transformTag("pn-radio-button")} .pn-radio-button{display:flex;gap:0.75em;padding:0}${transformTag("pn-radio-button")} .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-radio-button")} .pn-radio-outer{transition-duration:0s;transition-delay:0s}}${transformTag("pn-radio-button")} .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-radio-button")} .pn-radio-inner{transition-duration:0s;transition-delay:0s}}${transformTag("pn-radio-button")} .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-radio-button")} .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}${transformTag("pn-radio-button")} .pn-radio[data-tile] .pn-radio-outer{outline:none}${transformTag("pn-radio-button")} .pn-radio[data-invalid]{border-color:#a70707}${transformTag("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}${transformTag("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}${transformTag("pn-radio-button")} .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${transformTag("pn-radio-button")} .pn-radio-container[data-open]{visibility:visible;overflow:unset}${transformTag("pn-radio-button")} .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}${transformTag("pn-radio-button")} .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${transformTag("pn-radio-button")} .pn-radio>${transformTag("pn-icon")}{margin-left:0.75em}${transformTag("pn-radio-button")}>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${transformTag("pn-radio-button")}>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}${transformTag("pn-radio-button")}>input[type=radio][data-expand]{top:1em;left:1em}${transformTag("pn-radio-button")}>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}${transformTag("pn-radio-button")}>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}${transformTag("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${transformTag("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}${transformTag("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}${transformTag("pn-radio-button")}>input[type=radio]:disabled{pointer-events:none}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>${transformTag("pn-icon")} .pn-icon-svg path{fill:#5e554a}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}${transformTag("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}`;
 
 const PnRadioButton = class extends Mixin(animateHeightFactory) {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
+        this.pnRadioChange = createEvent(this, "pnRadioChange", 3);
     }
     id = `pn-radio-${uuidv4()}`;
     idHelpertext = `${this.id}-helpertext`;
@@ -22,20 +23,16 @@ const PnRadioButton = class extends Mixin(animateHeightFactory) {
     label;
     /** This adds an optional helpertext under the label. */
     helpertext;
-    /** This will be emitted on change and input events. */
+    /** This will be emitted on change and input events. @category Native attributes */
     value;
-    /** The name of the radio group. */
+    /** The name of the radio group. @category Native attributes */
     name;
-    /** Check the radio. */
+    /** Programmatically check the input. @category Native attributes */
     checked = false;
-    /** A unique HTML ID for the radio. */
-    radioid = this.id;
-    /** Set the radio as required. @category State */
+    /** Set the radio as required. @category Native attributes */
     required = false;
-    /** Disable the radio. @category State */
+    /** Disable the radio. @category Native attributes */
     disabled = false;
-    /** If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio. @category State */
-    invalid = false;
     /**
      * Turn the radio into a clickable tile. A border and padding is added.
      *
@@ -43,7 +40,7 @@ const PnRadioButton = class extends Mixin(animateHeightFactory) {
      * An exception is made when using the `tile` + `expand` props together,
      * which allows you to use interactive elements.
      *
-     * @category Tile
+     * @category Features
      */
     tile = false;
     /**
@@ -53,17 +50,44 @@ const PnRadioButton = class extends Mixin(animateHeightFactory) {
      * The prop `tile` must be used at the same time.
      * @see {@link tile}
      * @since v7.17.0
-     * @category Tile
+     * @category Features
      */
     expand = false;
     /**
      * Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work.
      * @see {@link tile}
-     * @category Tile
+     * @category Features
      */
     icon = null;
+    /**
+     * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio.
+     * @category Features
+     */
+    invalid = false;
+    /** A unique HTML ID for the radio. @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;
+    /**
+     * A unique HTML ID for the radio.
+     * @deprecated Use `pn-id` instead.
+     * @category HTML attributes
+     */
+    radioid;
     handleId() {
-        this.idHelpertext = `${this.radioid}-helpertext`;
+        this.idHelpertext = `${this.getId()}-helpertext`;
     }
     handleChecked(checked) {
         this.checked = checked ?? this.radioInput.checked;
@@ -89,12 +113,20 @@ const PnRadioButton = class extends Mixin(animateHeightFactory) {
         if (isSameRadioGroup)
             this.checked = isSameRadio;
     }
-    componentWillLoad() {
-        this.handleId();
-    }
+    /**
+     * This is the same as the native `change` event, but without bubbling.
+     * This is useful when you want to listen to the event directly on the `pn-radio-button` element without
+     * having to worry about catching events from nested pn-radio-buttons.
+     *
+     * @since v7.25.0
+     **/
+    pnRadioChange;
     componentDidLoad() {
         requestAnimationFrame(() => this.displayContent() && this.checked && this.openDropdown(this.contentArea));
     }
+    getId() {
+        return this.pnId || this.radioid || this.id;
+    }
     uncheckOtherRadios() {
         if (!this.name)
             return;
@@ -121,13 +153,22 @@ const PnRadioButton = class extends Mixin(animateHeightFactory) {
     displayContent() {
         return this.tile && this.expand;
     }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
     render() {
-        return (h(Host, { key: 'f386b0de0377d3dbe6891a2396d32b91a808d53c' }, h("input", { key: '189e352a198275f4dbd733425166e9cb2ed417ef', type: "radio", id: this.radioid, class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, ref: el => (this.radioInput = el) }), h("div", { key: '710dcfe5b1660d25a9d98eb2c3739eb092f2ab4e', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '2d6bd1b03ee6565b88773c60a529ae2c5be89ffd', class: "pn-radio-button" }, h("div", { key: '8b15488acb65132b2498d361d320bb804af793de', class: "pn-radio-outer" }, h("div", { key: '64ebbe9b4d18f158a43bb5d82116ef4b19325ca1', class: "pn-radio-inner" }))), h("p", { key: '3b5ed02eeae60cff45b3b4999055c6d853a6c22f', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: 'd5f3c5f59630407a45cc48fcb26e60fe7419c73c', htmlFor: this.radioid, class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("span", { key: 'd4329417f178f6e7bcff365a1c051ebaa51b0447', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: 'defddc5970a0ea4c94c4f7b07e2cec3e7616d8c2', name: "helpertext" })), h("slot", { key: 'edaaf37351bb5d05bdc92696ac9ee2c8bc8e13f7' })), this.displayIcon() && h("pn-icon", { key: 'b9cd0ab07c691020efe39e8bb6ec39d02d5be826', icon: this.icon, color: "gray900" }), h("div", { key: '89655e67304498950e11c0388fddbbde350239a1', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'eeebaf7c0b1fe8327810faec62877888cb6ff95d', class: "pn-radio-area" }, h("slot", { key: 'c997ee7e8ef719ff4b830df30a414cea637a54ff', name: "content" }))))));
+        return (h(Host, { key: '4cc4729921eef5f9076bb2b3ce409d105c37e7fc' }, h("input", { key: '5081a5a1be4ebd3bfeca8559c3973b60e6257f6c', type: "radio", id: this.getId(), class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, onChange: event => this.pnRadioChange.emit(event), ref: el => (this.radioInput = el) }), h("div", { key: 'a933fc7fe850449df7c3c94ee387fa882b905fac', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '83f27a39013bd0674d1155aced4258da5c2cba58', class: "pn-radio-button" }, h("div", { key: 'fab4f7fbe57a2e9ae9c7cae444c2d603b23b6acb', class: "pn-radio-outer" }, h("div", { key: 'd672da19315841a7e1a46ada320739d8ced84a93', class: "pn-radio-inner" }))), h("div", { key: 'e863aa9e7396ccead7fed2227bbee45ca96c2187', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: '221ea43c549af80b6b8c54fc611b0b48fe709f17', htmlFor: this.getId(), class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("p", { key: '9a1cc75ef224d5d6830c35ee20742a14ef2268ba', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: 'fb77032b6ce781fbc45bc9a5914b7c64b6cb3fd5', name: "helpertext" })), h("slot", { key: '73d298a9ef742031d83de42b737f5a6289ec692d' })), this.displayIcon() && h("pn-icon", { key: '8850771543bb69709196805cb46096bd706d32f7', icon: this.icon, color: "gray900" }), h("div", { key: '9ac6ed23cc447f4f7ed1bd0ab5311a211fc2f25d', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'b952ea9f31572a6d5933f3ea3342283aaf9901e4', class: "pn-radio-area" }, h("slot", { key: '41e31f73b12b07ae647ccf89abcac486e5820592', name: "content" }))))));
     }
     static get watchers() { return {
         "radioid": [{
                 "handleId": 0
             }],
+        "pnId": [{
+                "handleId": 1
+            }],
         "checked": [{
                 "handleChecked": 0
             }]

package/umd/modules/@postnord/web-components/esm/pn-range.entry.js

@@ -2,15 +2,15 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, F as Fragment, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, F as Fragment, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4 } from './index.js';
 
-const pnRangeCss = () => `${transformTag("pn-range")}{display:block}${transformTag("pn-range")} .pn-range{color:#2d2013;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(0.25em, 5vw, 0.75em);align-items:center;container-type:inline-size}@container (max-width: 24em){${transformTag("pn-range")} .pn-range .pn-range-header[data-input]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${transformTag("pn-range")} .pn-range>${transformTag("pn-input")}{flex:1 1 100%}${transformTag("pn-range")} .pn-range>${transformTag("pn-input")} .pn-input-label{position:unset;height:unset;width:unset;overflow:unset;clip:unset;margin:0 0 0.25em 0;white-space:unset}}${transformTag("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${transformTag("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${transformTag("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${transformTag("pn-range")} .pn-range-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-label>span{font-size:0.875em}${transformTag("pn-range")} .pn-range-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left;flex:1 1 100%;width:100%}${transformTag("pn-range")} .pn-range-message[hidden],${transformTag("pn-range")} .pn-range-message>span[hidden]{display:none}${transformTag("pn-range")} .pn-range-error{color:#a70707}${transformTag("pn-range")} .pn-range-field{flex:0 0 auto}${transformTag("pn-range")} .pn-range-field .pn-input-label{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${transformTag("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${transformTag("pn-range")} .pn-range-group[data-pressing] *,${transformTag("pn-range")} .pn-range-group[data-pressing] *:before,${transformTag("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${transformTag("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${transformTag("pn-range")} .pn-range-input{z-index:1;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent}${transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${transformTag("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${transformTag("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${transformTag("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${transformTag("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${transformTag("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${transformTag("pn-range")} .pn-range-overlay-input{z-index:5;cursor:pointer;position:absolute;appearance:none;top:0;left:0;height:100%;width:100%;margin:0;padding:0;border:0;outline:0;opacity:0;display:block;-webkit-tap-highlight-color:transparent}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(0%);border-bottom-right-radius:0em}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(0%);border-bottom-left-radius:0em}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${transformTag("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${transformTag("pn-range")} .pn-range-track:before,${transformTag("pn-range")} .pn-range-track:after{content:"";z-index:0;position:absolute;right:100%;pointer-events:none;height:100%;width:100%;background-color:#005d92;transform:translateX(var(--pn-range-progress));transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-track:before,${transformTag("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-track:after{display:none}${transformTag("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${transformTag("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${transformTag("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${transformTag("pn-range")} .pn-range-thumb{pointer-events:none;position:absolute;height:100%;width:calc(100% - 1em);top:0;right:calc(100% - 0.5em);transform:translateX(var(--pn-range-progress));transition-property:transform, border-radius;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${transformTag("pn-range")} .pn-range-thumb:before{content:"";position:absolute;top:0.5em;right:-0.65625em;height:1.3125em;width:1.3125em;background-color:#005d92;border-radius:5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-tooltip{position:absolute;z-index:10;top:-85%;right:0;text-align:center;line-height:1.25em;white-space:nowrap;height:1.75em;min-width:2em;padding:0.25em 0.5em;border-radius:0.5em;background-color:#0d234b;color:#ffffff;transform:translateX(50%) translateY(10%);opacity:0;transition-property:opacity, transform, border-radius, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${transformTag("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${transformTag("pn-range")} .pn-range-tooltip:before{content:"";z-index:-1;position:absolute;left:50%;bottom:-0.25em;height:0.5em;width:0.5em;background-color:inherit;transform:translateX(-50%) translateY(0%) rotate(45deg);transition-property:left, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-markers{position:absolute;top:100%;left:0.5em;min-height:1em;width:calc(100% - 1em);padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap}${transformTag("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${transformTag("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${transformTag("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${transformTag("pn-range")} .pn-range-markers-item:before{content:"";position:absolute;left:0;top:-100%;border-left:0.0625em solid #d3cecb;height:1em;z-index:-1}${transformTag("pn-range")} .pn-range-markers-label{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:400;font-size:0.875em;color:#5e554a;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`;
+const pnRangeCss = () => `${transformTag("pn-range")}{display:block}${transformTag("pn-range")} .pn-range{color:#2d2013;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(0.25em, 5vw, 0.75em);align-items:center;container-type:inline-size}@container (max-width: 24em){${transformTag("pn-range")} .pn-range .pn-range-header[data-input]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${transformTag("pn-range")} .pn-range>${transformTag("pn-input")}{flex:1 1 100%}${transformTag("pn-range")} .pn-range>${transformTag("pn-input")} .pn-input-label{position:unset;height:unset;width:unset;overflow:unset;clip:unset;margin:0 0 0.25em 0;white-space:unset}}${transformTag("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${transformTag("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${transformTag("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${transformTag("pn-range")} .pn-range-header:empty{display:none}${transformTag("pn-range")} .pn-range-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-label>span{font-size:0.875em}${transformTag("pn-range")} .pn-range-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left;flex:1 1 100%;width:100%}${transformTag("pn-range")} .pn-range-message[hidden],${transformTag("pn-range")} .pn-range-message>span[hidden]{display:none}${transformTag("pn-range")} .pn-range-error{color:#a70707}${transformTag("pn-range")} .pn-range-field{flex:0 0 auto}${transformTag("pn-range")} .pn-range-field .pn-input-label{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${transformTag("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${transformTag("pn-range")} .pn-range-group[data-pressing] *,${transformTag("pn-range")} .pn-range-group[data-pressing] *:before,${transformTag("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${transformTag("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${transformTag("pn-range")} .pn-range-input{z-index:1;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent}${transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${transformTag("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${transformTag("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${transformTag("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${transformTag("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${transformTag("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${transformTag("pn-range")} .pn-range-overlay-input{z-index:5;cursor:pointer;position:absolute;appearance:none;top:0;left:0;height:100%;width:100%;margin:0;padding:0;border:0;outline:0;opacity:0;display:block;-webkit-tap-highlight-color:transparent}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(0%);border-bottom-right-radius:0em}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(0%);border-bottom-left-radius:0em}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${transformTag("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${transformTag("pn-range")} .pn-range-track:before,${transformTag("pn-range")} .pn-range-track:after{content:"";z-index:0;position:absolute;right:100%;pointer-events:none;height:100%;width:100%;background-color:#005d92;transform:translateX(var(--pn-range-progress));transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-track:before,${transformTag("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-track:after{display:none}${transformTag("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${transformTag("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${transformTag("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${transformTag("pn-range")} .pn-range-thumb{pointer-events:none;position:absolute;height:100%;width:calc(100% - 1em);top:0;right:calc(100% - 0.5em);transform:translateX(var(--pn-range-progress));transition-property:transform, border-radius;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${transformTag("pn-range")} .pn-range-thumb:before{content:"";position:absolute;top:0.5em;right:-0.65625em;height:1.3125em;width:1.3125em;background-color:#005d92;border-radius:5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-tooltip{position:absolute;z-index:10;top:-85%;right:0;text-align:center;line-height:1.25em;white-space:nowrap;height:1.75em;min-width:2em;padding:0.25em 0.5em;border-radius:0.5em;background-color:#0d234b;color:#ffffff;transform:translateX(50%) translateY(10%);opacity:0;transition-property:opacity, transform, border-radius, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${transformTag("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${transformTag("pn-range")} .pn-range-tooltip:before{content:"";z-index:-1;position:absolute;left:50%;bottom:-0.25em;height:0.5em;width:0.5em;background-color:inherit;transform:translateX(-50%) translateY(0%) rotate(45deg);transition-property:left, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-markers{position:absolute;top:100%;left:0.5em;min-height:1em;width:calc(100% - 1em);padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap}${transformTag("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${transformTag("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${transformTag("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${transformTag("pn-range")} .pn-range-markers-item:before{content:"";position:absolute;left:0;top:-100%;border-left:0.0625em solid #d3cecb;height:1em;z-index:-1}${transformTag("pn-range")} .pn-range-markers-label{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:400;font-size:0.875em;color:#5e554a;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`;
 
 const PnRange = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.rangeSelected = createEvent(this, "rangeSelected");
+        this.rangeSelected = createEvent(this, "rangeSelected", 7);
     }
     id = `pn-range-${uuidv4()}`;
     idEnd = `${this.id}-end`;
@@ -36,51 +36,35 @@ const PnRange = class {
     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
@@ -89,12 +73,57 @@ const PnRange = class {
      * @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;
@@ -112,6 +141,8 @@ const PnRange = class {
         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`;
@@ -134,6 +165,16 @@ const PnRange = class {
         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;
@@ -164,7 +205,7 @@ const PnRange = class {
     }
     /** 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;
@@ -275,13 +316,14 @@ const PnRange = class {
         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))))));
@@ -296,7 +338,7 @@ const PnRange = class {
         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 watchers() { return {
         "value": [{
@@ -306,6 +348,9 @@ const PnRange = class {
                 "handleValueEnd": 1
             }],
         "pnId": [{
+                "handleId": 0
+            }],
+        "pnIdEnd": [{
                 "handleId": 1
             }],
         "helpertext": [{

package/umd/modules/@postnord/web-components/esm/pn-read-only-button.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { awaitTopbar } from './index.js';
 
 const pnReadOnlyButtonCss = () => `${transformTag("pn-read-only-button")}{display:inline-block}${transformTag("pn-read-only-button")} button{cursor:not-allowed;color:#5e554a;background:#f3f2f2;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent}${transformTag("pn-read-only-button")} button ${transformTag("pn-icon")}{flex-shrink:0;margin:0 0 0 0.5em}${transformTag("pn-read-only-button")} button .button-tooltip{position:absolute;bottom:calc(100% + 0.35em);left:50%;background:#a70707;color:#ffffff;padding:0.25em 0.75em;font-size:0.875em;font-weight:300;border-radius:1em;box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:5;max-width:min(95vw, 40em);transform:translateX(-50%);width:max-content;pointer-events:none;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-read-only-button")} button .button-tooltip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-read-only-button")} button[data-tooltip-open] .button-tooltip{opacity:1}${transformTag("pn-read-only-button")} button.pn-button-left-icon{flex-direction:row-reverse}${transformTag("pn-read-only-button")} button.pn-button-left-icon ${transformTag("pn-icon")}{margin:0 0.5em 0 0}${transformTag("pn-read-only-button")} button.icon-only{width:3em;min-width:0}${transformTag("pn-read-only-button")} button.icon-only ${transformTag("pn-icon")}{margin:0}${transformTag("pn-read-only-button")} button.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}${transformTag("pn-read-only-button")} button.icon-only span.read-only-icon-only{display:none}${transformTag("pn-read-only-button")} button.pn-button-small{font-size:0.875em;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}${transformTag("pn-read-only-button")} button.pn-button-small ${transformTag("pn-icon")} .pn-icon-svg{height:1.28em;width:1.28em}`;