@postnord/pn-marketweb-components 4.3.6 → 4.3.8

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

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4, awaitTopbar, en } from './index.js';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
 import { c as check } from './check-BpI8peGn.js';
@@ -38,22 +38,21 @@ const translations = {
     },
 };
 
-const pnInputCss = () => `${transformTag("pn-input")}{display:inline-flex;flex-direction:column}${transformTag("pn-input")} .pn-input{--pn-input-offset-left:0em;--pn-input-offset-right:0em}${transformTag("pn-input")} .pn-input-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-input")} .pn-input-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-input")} .pn-input-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${transformTag("pn-input")} .pn-input-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${transformTag("pn-input")} .pn-input-label>span{font-size:0.875em}${transformTag("pn-input")} .pn-input-group{position:relative}${transformTag("pn-input")} .pn-input-element{width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${transformTag("pn-input")} .pn-input-element:-webkit-autofill,${transformTag("pn-input")} .pn-input-element:-webkit-autofill:hover,${transformTag("pn-input")} .pn-input-element:-webkit-autofill:focus,${transformTag("pn-input")} .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-input")} .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-input")} .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("pn-input")} .pn-input-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-input")} .pn-input-element{transition-duration:0s;transition-delay:0s}}${transformTag("pn-input")} .pn-input-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${transformTag("pn-input")} .pn-input-element[data-compact]::placeholder{color:transparent}${transformTag("pn-input")} .pn-input-element[data-compact]:focus+.pn-input-label,${transformTag("pn-input")} .pn-input-element[data-compact]:not(:placeholder-shown)+.pn-input-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${transformTag("pn-input")} .pn-input-element::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-input")} .pn-input-element:hover{border-color:#005d92}${transformTag("pn-input")} .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-input")} .pn-input-element:read-only{border-color:#ffffff}${transformTag("pn-input")} .pn-input-element:disabled~.pn-input-eyecandy>${transformTag("pn-icon")}>.pn-icon-svg>path{fill:#969087}${transformTag("pn-input")} .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none !important}${transformTag("pn-input")} .pn-input-element::-webkit-textfield-decoration-container,${transformTag("pn-input")} .pn-input-element::-webkit-search-cancel-button,${transformTag("pn-input")} .pn-input-element::-webkit-inner-spin-button,${transformTag("pn-input")} .pn-input-element::-webkit-outer-spin-button,${transformTag("pn-input")} .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${transformTag("pn-input")} .pn-input-element[type=number]{appearance:textfield}${transformTag("pn-input")} .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}${transformTag("pn-input")} .pn-input-eyecandy[data-prefix]{left:0.75em}${transformTag("pn-input")} .pn-input-eyecandy[data-suffix]{right:0.75em}${transformTag("pn-input")} .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}${transformTag("pn-input")} .pn-input-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${transformTag("pn-input")} .pn-input-message[hidden],${transformTag("pn-input")} .pn-input-message>span[hidden]{display:none}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-label{color:#a70707}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill,${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-label{color:#005e41}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill,${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}`;
+const pnInputCss = () => `${transformTag("pn-input")}{display:inline-flex;flex-direction:column}${transformTag("pn-input")} .pn-input{--pn-input-offset-left:0em;--pn-input-offset-right:0em}${transformTag("pn-input")} .pn-input-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-input")} .pn-input-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-input")} .pn-input-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${transformTag("pn-input")} .pn-input-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${transformTag("pn-input")} .pn-input-label>span{font-size:0.875em}${transformTag("pn-input")} .pn-input-group{position:relative}${transformTag("pn-input")} .pn-input-element{width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${transformTag("pn-input")} .pn-input-element:-webkit-autofill,${transformTag("pn-input")} .pn-input-element:-webkit-autofill:hover,${transformTag("pn-input")} .pn-input-element:-webkit-autofill:focus,${transformTag("pn-input")} .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-input")} .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-input")} .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("pn-input")} .pn-input-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-input")} .pn-input-element{transition-duration:0s;transition-delay:0s}}${transformTag("pn-input")} .pn-input-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${transformTag("pn-input")} .pn-input-element[data-compact]::placeholder{color:transparent}${transformTag("pn-input")} .pn-input-element[data-compact]:focus+.pn-input-label,${transformTag("pn-input")} .pn-input-element[data-compact]:not(:placeholder-shown)+.pn-input-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${transformTag("pn-input")} .pn-input-element::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-input")} .pn-input-element:hover{border-color:#005d92}${transformTag("pn-input")} .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-input")} .pn-input-element:read-only{border-color:#ffffff}${transformTag("pn-input")} .pn-input-element:disabled~.pn-input-eyecandy>${transformTag("pn-icon")} .pn-icon-svg>path{fill:#969087}${transformTag("pn-input")} .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none !important}${transformTag("pn-input")} .pn-input-element::-webkit-textfield-decoration-container,${transformTag("pn-input")} .pn-input-element::-webkit-search-cancel-button,${transformTag("pn-input")} .pn-input-element::-webkit-inner-spin-button,${transformTag("pn-input")} .pn-input-element::-webkit-outer-spin-button,${transformTag("pn-input")} .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${transformTag("pn-input")} .pn-input-element[type=number]{appearance:textfield}${transformTag("pn-input")} .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}${transformTag("pn-input")} .pn-input-eyecandy[data-prefix]{left:0.75em}${transformTag("pn-input")} .pn-input-eyecandy[data-suffix]{right:0.75em}${transformTag("pn-input")} .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}${transformTag("pn-input")} .pn-input-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${transformTag("pn-input")} .pn-input-message[hidden],${transformTag("pn-input")} .pn-input-message>span[hidden]{display:none}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-label{color:#a70707}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill,${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-input")} .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-label{color:#005e41}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill,${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}`;
 
 const PnInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     id = `pn-input-${uuidv4()}`;
-    idMessage = `${this.id}-message`;
+    idHelper = `${this.id}-helper`;
+    idError = `${this.id}-error`;
     prefix;
     suffix;
     mo;
     get hostElement() { return getElement(this); }
     offsetLeft = 0;
     offsetRight = 0;
-    showHelperSlot = false;
-    showErrorSlot = false;
     showPassword = false;
     togglePassword() {
         this.showPassword = !this.showPassword;
@@ -62,70 +61,38 @@ const PnInput = class {
     label;
     /** Text message placed underneath the input field. */
     helpertext;
-    /**
-     * Provide a unique HTML id to connect the input with the label.
-     * A unique uuid ID will be generated if this field is left empty.
-     **/
-    inputid = this.id;
-    /** Set the value of the input. */
-    value = '';
     /**
      * Set the language manually for the translations of show/hide/clear button text.
      * Not needed if you have the pntopbar on the page.
      **/
-    language = null;
-    /** Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time. @since v7.21.0 */
-    compact = false;
-    /**
-     * Select an icon to display before the input field value.
-     * `icon` takes precedence over the `text-prefix` prop.
-     *
-     * @see {@link textPrefix}
-     * @category Visual
-     **/
-    icon;
-    /**
-     * Set a small text before the input field value.
-     * Cannot be used together with an `icon` at the same time.
-     *
-     * @see {@link icon}
-     * @see {@link textSuffix}
-     * @category Visual
-     **/
-    textPrefix;
-    /**
-     * Set a small text after the input field value.
-     * Cannot be used with the `text-prefix` prop at the same time.
-     *
-     * @see {@link textPrefix}
-     * @category Visual
-     **/
-    textSuffix;
-    /** pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`. @category HTML input */
+    language = undefined;
+    /** Set the value of the input. @category Native attributes */
+    value = '';
+    /** pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`. @category Native attributes */
     type = 'text';
     /**
      * HTML input name. Setting a name will help the browser understand what type of data the input have
      * and can better assist with autofill data based on previous entires much better.
-     *
-     * @category HTML input
+     * @category Native attributes
      **/
     name;
     /**
      * Provide a placeholder text. Remember that this is no replacement for a label.
      * The placeholder should be a nice addition to the label/helpertext, not important information.
      *
-     * @category HTML input
+     * @category Native attributes
      **/
     placeholder;
     /**
      * Let the browser know what type of autocorrects the input should use.
-     * Works much better if a `name` and `inputid` is supplied.
+     * Works much better if a `name` and `pn-id` is supplied.
      * @see {@link name}
      * @see {@link inputid}
      *
-     * @category HTML input */
+     * @category Native attributes
+     */
     autocomplete;
-    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML input */
+    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category Native attributes */
     maxlength;
     /**
      * Hint the browser about what type of virtual keyboard should be used.
@@ -134,35 +101,62 @@ const PnInput = class {
      *
      * Leave empty or with a `''` value if you want the browsers default behaviour (`text`).
      *
-     * @category HTML input
+     * @category Native attributes
      **/
     inputmode;
-    /** Point to a datalist element for this input. @category HTML input */
+    /** Point to a datalist element for this input. @category Native attributes */
     list;
-    /** Pattern prop. @category HTML input*/
+    /** Pattern prop. @category Native attributes */
     pattern;
-    /** Set the `min` value of the `number` input. @category HTML input */
+    /** Set the `min` value of the `number` input. @category Native attributes */
     min;
-    /** Set the `max` value of the `number` input. @category HTML input */
+    /** Set the `max` value of the `number` input. @category Native attributes */
     max;
-    /** Set a `step` for the number input. @category HTML input */
+    /** Set a `step` for the number input. @category Native attributes */
     step;
-    /** While you can use the `aria-label`, using a `label` is far more accessible. @category HTML input */
-    arialabel;
-    /** Set the ID of what this input controls. @category HTML input */
-    ariacontrols;
-    /** Set the input as `required`. @category State */
+    /** Set the input as `required`. @category Native attributes */
     required = false;
-    /** Set the input as `disabled`. @category State */
-    disabled = false;
-    /** Set the input as `readonly`. @category State */
+    /** Set the input as `readonly`. @category Native attributes */
     readonly = false;
-    /** Set the input as `valid`. Provides a green color and a check icon. @category Validation */
+    /** Set the input as `disabled`. @category Native attributes */
+    disabled = false;
+    /**
+     * Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time.
+     * @since v7.21.0
+     * @category Features
+     */
+    compact = false;
+    /**
+     * Select an icon to display before the input field value.
+     * `icon` takes precedence over the `text-prefix` prop.
+     *
+     * @see {@link textPrefix}
+     * @category Features
+     **/
+    icon;
+    /**
+     * Set a small text before the input field value.
+     * Cannot be used together with an `icon` at the same time.
+     *
+     * @see {@link icon}
+     * @see {@link textSuffix}
+     * @category Features
+     **/
+    textPrefix;
+    /**
+     * Set a small text after the input field value.
+     * Cannot be used with the `text-prefix` prop at the same time.
+     *
+     * @see {@link textPrefix}
+     * @category Features
+     **/
+    textSuffix;
+    /** Set the input as `valid`. Provides a green color and a check icon. @category Features */
     valid = false;
     /**
      * Set the input as `invalid`. Provides a red color and red warning icon.
      * @see{@link error Provide an error message.}
-     * @category Validation
+     * @category Features
      **/
     invalid = false;
     /**
@@ -170,9 +164,33 @@ const PnInput = class {
      *
      * Error message; will take precedence over helpertext if both are provided.
      * @see{@link invalid Set invalid without an error message.}
-     * @category Validation
+     * @category Features
      **/
     error;
+    /** Set a custom ID for the input (default is a generated UUID). @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /** Set the ID of what this input controls. @since v7.25.0 @category HTML attributes */
+    pnAriaControls;
+    /** Set a custom ID for the input (default is a generated UUID). @deprecated Use `pn-id` instead. @category HTML attributes */
+    inputid;
+    /** While you can use the `aria-label`, using a `label` is far more accessible. @deprecated Use `pn-aria-label` instead. @category HTML attributes */
+    arialabel;
+    /** Set the ID of what this input controls. @deprecated Use `pn-aria-controls` instead. @category HTML attributes */
+    ariacontrols;
     handleOffset() {
         requestAnimationFrame(() => {
             const left = this.prefix?.clientWidth ? this.prefix.clientWidth + 8 : 0;
@@ -181,15 +199,14 @@ const PnInput = class {
             this.offsetRight = right;
         });
     }
-    handleMessage() {
-        this.checkSlottedHelper();
-        this.checkSlottedError();
+    handleId() {
+        this.idHelper = `${this.getId()}-helper`;
+        this.idError = `${this.getId()}-error`;
     }
     connectedCallback() {
         this.mo = new MutationObserver(() => {
             forceUpdate(this.hostElement);
             this.handleOffset();
-            this.handleMessage();
         });
         this.mo.observe(this.hostElement, { childList: true, subtree: true });
     }
@@ -198,15 +215,15 @@ const PnInput = class {
             this.mo.disconnect();
     }
     async componentWillLoad() {
-        this.handleMessage();
-        if (this.inputid !== this.id)
-            this.idMessage = `${this.inputid}-message`;
-        if (this.language === null)
+        if (this.language === undefined)
             await awaitTopbar(this.hostElement);
     }
     componentDidLoad() {
         this.handleOffset();
     }
+    getId() {
+        return this.pnId || this.inputid || this.id;
+    }
     setVal(event) {
         const target = event.composedPath?.()[0];
         this.value = target.value;
@@ -223,26 +240,26 @@ const PnInput = class {
         return translations?.[prop]?.[this.language || en];
     }
     hasHelperText() {
-        return this.helpertext?.length > 0 || this.showHelperSlot;
+        return this.helpertext?.length > 0 || this.checkSlottedHelper();
     }
     hasErrorMessage() {
-        return this.error?.length > 0 || this.showErrorSlot;
+        return this.error?.length > 0 || this.checkSlottedError();
     }
     /** If any error is active, either via the prop `invalid` or `error` prop/slot. */
     hasError() {
-        return this.hasErrorMessage() || this.invalid || this.showErrorSlot;
+        return this.hasErrorMessage() || this.invalid;
+    }
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
     }
-    /** If any helpertext or error message is active. Checks both props and slots. */
-    hasMessage() {
-        return this.hasHelperText() || this.hasErrorMessage();
+    hideError() {
+        return !this.hasErrorMessage();
     }
     checkSlottedHelper() {
-        const slottedHelper = this.hostElement.querySelector('[slot=helpertext]')?.textContent;
-        this.showHelperSlot = !!slottedHelper?.length;
+        return !!this.hostElement.querySelector('[slot=helpertext]');
     }
     checkSlottedError() {
-        const slottedError = this.hostElement.querySelector('[slot=error]')?.textContent;
-        this.showErrorSlot = !!slottedError?.length;
+        return !!this.hostElement.querySelector('[slot=error]');
     }
     getInputType() {
         const types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email'];
@@ -300,14 +317,30 @@ const PnInput = class {
     useCompactLabel() {
         return this.validLabel() && this.compact;
     }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() && !(this.pnAriaLabel || this.arialabel) ? this.pnAriaLabelledby : null;
+    }
+    getAriaDescribedby() {
+        if (this.hasErrorMessage())
+            return this.idError;
+        else if (this.hasHelperText())
+            return this.idHelper;
+        return null;
+    }
     renderLabel() {
-        return (h("label", { htmlFor: this.inputid, class: "pn-input-label", "data-compact": this.compact }, this.label && h("span", null, this.label), this.maxlength >= 0 && h("span", null, `${this.value.length}/${this.maxlength}`)));
+        return (h("label", { htmlFor: this.getId(), class: "pn-input-label", "data-compact": this.compact }, this.label && h("span", null, this.label), this.maxlength >= 0 && h("span", null, `${this.value.length}/${this.maxlength}`)));
     }
     render() {
-        return (h(Host, { key: '3250630450288d09811b7c78bca5091ba93ec7ab' }, h("div", { key: 'db673ba19f300966eaf5c38136fe7d6143aa661d', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError(), style: {
+        return (h(Host, { key: '800f4fb8490656e28657f7a4a041ba0c6dc46af2' }, h("div", { key: '8defa078a3e541509bc17278751f8e59f59f3bd7', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError(), style: {
                 '--pn-input-offset-left': `${this.offsetLeft}px`,
                 '--pn-input-offset-right': `${this.offsetRight}px`,
-            } }, this.useLabel() && this.renderLabel(), h("div", { key: 'b216b7f951be237aed6e46f1ccbcfd29b2a3cad1', class: "pn-input-group" }, h("input", { key: '4ee129c35c6a74a359df9d611b236132d7afac38', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), "data-compact": this.compact, "data-value": this.value?.length > 0, onInput: e => this.setVal(e) }), this.useCompactLabel() && this.renderLabel(), h("div", { key: '753a9abeaf5bfa5ffb3be10042a76aa7863bce9c', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: 'acf1a6e42c9d37cab6f6a0453d8ea674df1cd0c3', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: '70d2eb7e94e790d665a57557595c2bce4855b827', class: "pn-input-text" }, this.textPrefix)), h("div", { key: '1dcae3fb8489d2dc6aa7325baea693591acef31c', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: '05044f3fbea582d507de30a0ff751abaf1da3206', class: "pn-input-text" }, this.textSuffix), this.displayState() && h("pn-icon", { key: '727650c9e6c9b9da2ef43e933fab95b6adc8a6bb', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '4e28eddff11c9aea670a6764aeb0316bccba1c1c', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (h("pn-button", { key: '2181adb68c152d837ef03bf9b7e0eb66eb3ea6d2', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: 'b8b1039a61a23efd24ebd71285b15cce7bfc5ec0', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: '4433df6b700cc40ce2ae698d2474f57163b398a1', class: "pn-input-helper" }, this.helpertext), h("span", { key: '41c8fb1cbbc17b7c349922cac2ff42244a017e0c', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '5628bbc8db75161d18ad3e75c259bf3eb5fc9052', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: 'e41145d7fab9f3ae35dd428971c79673d0531301', class: "pn-input-error" }, this.error), h("span", { key: 'ae85a9420fcb449cc874eadc7a066dd772f097a9', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: 'bdd31ab2f706cac6e243562d035361a381ecfa43', name: "error" }))))));
+            } }, this.useLabel() && this.renderLabel(), h("div", { key: 'dc01fb7fdb2a60ee89473f0152d833243be4ff8d', class: "pn-input-group" }, h("input", { key: '32f63d4aa1c6edd2d10f8876ebd3371cff366eb7', type: this.getInputType(), id: this.getId(), class: "pn-input-element", name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.getAriaDescribedby(), "aria-controls": this.pnAriaControls || this.ariacontrols, "aria-invalid": this.hasError()?.toString(), "data-compact": this.compact, "data-value": this.value?.length > 0, onInput: e => this.setVal(e) }), this.useCompactLabel() && this.renderLabel(), h("div", { key: 'b52d9bfa61569635f422fedc22edd09c768ab9d8', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: 'e5035273e663855094ba88ed0b485a4e8ffed56c', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: '1d0e5355c5dbfecf3dbb693589726a233e3b7df6', class: "pn-input-text" }, this.textPrefix)), h("div", { key: 'e1faa82f19dcfdb6c427d5d2967bfb6694508675', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: '4c5ecf7c19bf64eea77b21b05d9ffe491bf4b91c', class: "pn-input-text" }, this.textSuffix), this.displayState() && h("pn-icon", { key: 'f7014e0c31faf3c563c846e4a7061c6f4b35a64a', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '21518c4f16245de370fcba302b177cfe04e91904', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (h("pn-button", { key: '60263a255ee8c8d3ed72ea89a26abfbe9be11d0d', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: 'd23165556ffcdbfcf7229a04f5c1ea8686432c97', id: this.idHelper, class: "pn-input-message", hidden: this.hideHelpertext() }, !!this.helpertext && h("span", { key: 'b7e31855d677953bbc7a4f65cb0b26a5eac8887b' }, this.helpertext), h("slot", { key: 'a6bbaeceb31e2cc38d1e110b900e13b4f0957c6e', name: "helpertext" })), h("p", { key: '3668fbc1a512f92d3f5a2c6f1f7d86cf04df148b', id: this.idError, class: "pn-input-message", role: "alert", hidden: this.hideError() }, !!this.error && h("span", { key: 'c14fb6ab8e17c7d17813c83c0993f95d079f8274' }, this.error), h("slot", { key: '75ba01e945315e6a3bbf2f5e5ac34c73fe7ab57f', name: "error" })))));
     }
     static get watchers() { return {
         "textPrefix": [{
@@ -316,11 +349,11 @@ const PnInput = class {
         "textSuffix": [{
                 "handleOffset": 0
             }],
-        "helpertext": [{
-                "handleMessage": 0
+        "inputid": [{
+                "handleId": 0
             }],
-        "error": [{
-                "handleMessage": 0
+        "pnId": [{
+                "handleId": 1
             }]
     }; }
 };

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

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, a as Host } from './index-XKg-ydzH.js';
 import { reduceMotion, awaitTopbar, en, isSmallScreen } from './index.js';
 import { c as close } from './close-BvuWkoyY.js';
 
@@ -16,14 +16,15 @@ const translations = {
     },
 };
 
-const pnModalCss = () => `${transformTag("pn-modal")} .pn-modal{--pn-modal-max-width:45em;z-index:10000;position:fixed;top:0;inset-block-start:0;inset-block-end:0;margin:auto;padding:0;max-width:var(--pn-modal-max-width);overflow:hidden;border:0;border-radius:1.5em;box-shadow:0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);background-color:#ffffff;display:none;opacity:0;transform:translate(0%, 20%);outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-modal")} .pn-modal:focus-visible{outline-color:#ffffff}${transformTag("pn-modal")} .pn-modal{transition-property:opacity, overlay, display, transform, outline-color, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-modal")} .pn-modal{transition-duration:0s;transition-delay:0s}}${transformTag("pn-modal")} .pn-modal{transition-behavior:allow-discrete}${transformTag("pn-modal")} .pn-modal[data-allow-overflow]{overflow:unset}${transformTag("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-container{overflow:unset}${transformTag("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-picture{border-top-right-radius:1.5em}${transformTag("pn-modal")} .pn-modal[data-image]{padding-top:0}${transformTag("pn-modal")} .pn-modal[data-sheet]{margin:0 0 0 auto;height:100%;max-height:unset;border-radius:1.5em 0 0 1.5em;transform:translate(20%, 0%)}${transformTag("pn-modal")} .pn-modal[data-sheet] .pn-modal-container{max-height:unset}${transformTag("pn-modal")} .pn-modal[open]{display:flex;opacity:1;transform:translate(0%, 0%)}@starting-style{${transformTag("pn-modal")} .pn-modal[open]{display:flex;opacity:0;transform:translate(0%, 20%)}}${transformTag("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(0%, 0%)}@starting-style{${transformTag("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(20%, 0%)}}${transformTag("pn-modal")} .pn-modal::backdrop{background-color:rgba(0, 0, 0, 0);transition-property:opacity, background-color, overlay, display;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-modal")} .pn-modal::backdrop{transition-duration:0s;transition-delay:0s}}${transformTag("pn-modal")} .pn-modal::backdrop{transition-behavior:allow-discrete}${transformTag("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0.55)}@starting-style{${transformTag("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0)}}${transformTag("pn-modal")} .pn-modal-container{max-height:85vh;display:flex;flex-direction:column;align-items:stretch;overflow:hidden auto}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-corner,${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-button{display:none}${transformTag("pn-modal")} .pn-modal-close-button{position:absolute;z-index:10;right:0.75em;top:0.75em}${transformTag("pn-modal")} .pn-modal-header{display:flex;flex-direction:column;gap:0.5em;padding:clamp(1em, 5vw, 1.5em)}${transformTag("pn-modal")} .pn-modal-header[hidden]{display:none}${transformTag("pn-modal")} .pn-modal-header:not([hidden])+.pn-modal-content:not([hidden]){padding-top:0}${transformTag("pn-modal")} .pn-modal-label{line-height:1.5;padding-right:1.5em;margin:0}${transformTag("pn-modal")} .pn-modal-text{margin:0}${transformTag("pn-modal")} .pn-modal-content{padding:clamp(1em, 5vw, 1.5em)}${transformTag("pn-modal")} .pn-modal-image{position:relative;display:flex;flex-direction:column}${transformTag("pn-modal")} .pn-modal-image[hidden]{display:none}${transformTag("pn-modal")} .pn-modal-picture{margin:0;padding:0;display:block;overflow:hidden;border-radius:1.5em 0 0 0}${transformTag("pn-modal")} .pn-modal-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${transformTag("pn-modal")} .pn-modal-buttons{background-color:#ffffff;border-top:0.0625em solid #d3cecb;padding:clamp(1em, 5vw, 1.5em);display:flex;justify-content:flex-end;gap:0.5em;border-radius:0 0 1.5em 1.5em}${transformTag("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${transformTag("pn-button")}){display:flex;justify-content:flex-end;gap:0.5em}${transformTag("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${transformTag("pn-button")})>[data-left]{margin-right:auto}${transformTag("pn-modal")} .pn-modal-buttons>[data-left]{margin-right:auto}${transformTag("pn-modal")} .pn-modal-buttons:empty{display:none}@media (max-width: 55em){${transformTag("pn-modal")} .pn-modal{max-height:95vh;margin-bottom:0;bottom:0;transform:translate(0%, 20%);border-bottom-left-radius:0;border-bottom-right-radius:0}}`;
+const pnModalCss = () => `${transformTag("pn-modal")} .pn-modal{--pn-modal-max-width:45em;z-index:10000;position:fixed;top:0;inset-block-start:0;inset-block-end:0;margin:auto;padding:0;max-width:var(--pn-modal-max-width);overflow:hidden;border:0;border-radius:1.5em;box-shadow:0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);background-color:#ffffff;display:none;opacity:0;transform:translate(0%, 20%);outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-modal")} .pn-modal:focus-visible{outline-color:#ffffff}${transformTag("pn-modal")} .pn-modal{transition-property:opacity, overlay, display, transform, outline-color, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-modal")} .pn-modal{transition-duration:0s;transition-delay:0s}}${transformTag("pn-modal")} .pn-modal{transition-behavior:allow-discrete}${transformTag("pn-modal")} .pn-modal[data-allow-overflow]{overflow:unset}${transformTag("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-container{overflow:unset}${transformTag("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-picture{border-top-right-radius:1.5em}${transformTag("pn-modal")} .pn-modal[data-image]{padding-top:0}${transformTag("pn-modal")} .pn-modal[data-sheet]{margin:0 0 0 auto;height:100%;max-height:unset;border-radius:1.5em 0 0 1.5em;transform:translate(20%, 0%)}${transformTag("pn-modal")} .pn-modal[data-sheet] .pn-modal-container{max-height:unset}${transformTag("pn-modal")} .pn-modal[open]{display:flex;opacity:1;transform:translate(0%, 0%)}@starting-style{${transformTag("pn-modal")} .pn-modal[open]{display:flex;opacity:0;transform:translate(0%, 20%)}}${transformTag("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(0%, 0%)}@starting-style{${transformTag("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(20%, 0%)}}${transformTag("pn-modal")} .pn-modal::backdrop{background-color:rgba(0, 0, 0, 0);transition-property:opacity, background-color, overlay, display;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-modal")} .pn-modal::backdrop{transition-duration:0s;transition-delay:0s}}${transformTag("pn-modal")} .pn-modal::backdrop{transition-behavior:allow-discrete}${transformTag("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0.55)}@starting-style{${transformTag("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0)}}${transformTag("pn-modal")} .pn-modal-container{max-height:85vh;display:flex;flex-direction:column;align-items:stretch;overflow:hidden auto}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-corner,${transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-button{display:none}${transformTag("pn-modal")} .pn-modal-close-button{position:absolute;z-index:10;right:0.75em;top:0.75em}${transformTag("pn-modal")} .pn-modal-header{display:flex;flex-direction:column;gap:0.5em;padding:clamp(1em, 5vw, 1.5em)}${transformTag("pn-modal")} .pn-modal-header[hidden]{display:none}${transformTag("pn-modal")} .pn-modal-header:not([hidden])+.pn-modal-content:not([hidden]){padding-top:0}${transformTag("pn-modal")} .pn-modal-label{line-height:1.5;padding-right:1.5em;margin:0}${transformTag("pn-modal")} .pn-modal-text{margin:0}${transformTag("pn-modal")} .pn-modal-content{padding:clamp(1em, 5vw, 1.5em)}${transformTag("pn-modal")} .pn-modal-image{position:relative;display:flex;flex-direction:column}${transformTag("pn-modal")} .pn-modal-image[hidden]{display:none}${transformTag("pn-modal")} .pn-modal-picture{margin:0;padding:0;display:block;overflow:hidden;border-radius:1.5em 0 0 0}${transformTag("pn-modal")} .pn-modal-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${transformTag("pn-modal")} .pn-modal-buttons{background-color:#ffffff;padding:clamp(1em, 5vw, 1.5em);display:flex;justify-content:flex-end;gap:0.5em;border-radius:0 0 1.5em 1.5em}${transformTag("pn-modal")} .pn-modal-buttons[data-divider]{border-top:0.0625em solid #d3cecb;margin-top:auto}${transformTag("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${transformTag("pn-button")}){display:flex;justify-content:flex-end;gap:0.5em}${transformTag("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${transformTag("pn-button")})>[data-left]{margin-right:auto}${transformTag("pn-modal")} .pn-modal-buttons>[data-left]{margin-right:auto}${transformTag("pn-modal")} .pn-modal-buttons:empty{display:none}@media (max-width: 55em){${transformTag("pn-modal")} .pn-modal{max-height:95vh;margin-bottom:0;bottom:0;transform:translate(0%, 20%);border-bottom-left-radius:0;border-bottom-right-radius:0}}`;
 
 const PnModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.modalToggle = createEvent(this, "modalToggle");
-        this.modalVisiblity = createEvent(this, "modalVisiblity");
-        this.close = createEvent(this, "close");
+        this.modalToggle = createEvent(this, "modalToggle", 7);
+        this.modalVisibility = createEvent(this, "modalVisibility", 7);
+        this.modalVisiblity = createEvent(this, "modalVisiblity", 7);
+        this.close = createEvent(this, "close", 7);
     }
     mo;
     standardAnimationDuration = 400;
@@ -43,7 +44,9 @@ const PnModal = class {
     helpertext;
     /** Set the language. @since v7.14.0 */
     language = null;
-    /** Bind to this property if you want to control the visibility of the modal from your own data. @category Features */
+    /** Set a custom HTML id. @since v7.24.0 */
+    pnId = null;
+    /** Use this prop if you want to control the visibility of the modal programmatically. @category Features */
     open = false;
     /**
      * Prevent users from closing the modal by clicking on the backdrop or the `ESC` key.
@@ -52,19 +55,20 @@ const PnModal = class {
      */
     persistent = false;
     /**
-     * Hide the close button. If you disable this, make sure you build your own cancel button.
+     * Hide the close button. If you enable this, make sure you build your own cancel button.
      * @since v7.14.0
      * @category Features
      */
     hideClose = false;
     /**
-     * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.
-     * Do not use if you have a lot of conditional rendering inside the modal.
+     * Allow overflow *when* it is possible.
+     * Do not use if you have a lot of conditional rendering inside the modal as it can cause layout shifts.
      * @since v7.14.0
+     * @category Features
      */
     allowOverflow = false;
     /**
-     * Use the `sheet` visual. Aligns the modal to the right.
+     * Use the `sheet` visual. Aligns the modal to the right instead of the center.
      * @since v7.14.0
      * @category Visual
      */
@@ -92,7 +96,9 @@ const PnModal = class {
             this.animationDuration = this.standardAnimationDuration;
         this.modalTimeout = setTimeout(() => {
             this.isClosing = false;
+            /** @todo remove in v8.0.0 */
             this.modalVisiblity.emit({ visible: this.open });
+            this.modalVisibility.emit({ visible: this.open });
         }, this.animationDuration);
     }
     handleMaxWidth() {
@@ -105,7 +111,13 @@ const PnModal = class {
     }
     /** This event is fired when the modal is toggled. {@since v7.14.0} */
     modalToggle;
-    /** This event is dispatched after the opening/closing animation has finished playing. {@since v7.14.0} */
+    /** This event is dispatched after the opening/closing animation has finished playing. {@since v7.22.0} */
+    modalVisibility;
+    /**
+     * This event is dispatched after the opening/closing animation has finished playing.
+     * @since v7.14.0
+     * @deprecated v7.22.0. Use `modalVisibility` instead due to typo.
+     */
     modalVisiblity;
     /**
      * Event fired when the modal is closed, either by clicking on the dark background or by clicking on the close button.
@@ -180,7 +192,7 @@ const PnModal = class {
         this.open = state ?? !this.open;
     }
     render() {
-        return (h(Host, { key: 'd965a05833b311fed1f1f7ba245c9401ab77b765' }, h("dialog", { key: 'd60d253a75dd3f82b684fce659a9a917d6181c62', class: "pn-modal", "data-closing": this.isClosing, "data-sheet": this.sheet, "data-image": this.showImage(), "data-allow-overflow": this.removeOverflow, onClose: () => this.setModalClose(), onCancel: () => this.setModalClose(), onToggle: () => this.modalToggle.emit({ open: this.open }), onKeyDown: event => this.handleKeyboard(event), onClick: event => this.clickModalBackground(event), ref: el => (this.modalElement = el) }, !this.hideClose && (h("pn-button", { key: '4d25a2e559a8aca6286a9fc7a94f82285bd8ad4e', small: true, class: "pn-modal-close-button", icon: close, iconOnly: true, arialabel: this.translate('CLOSE_MODAL'), appearance: "light", variant: "borderless", type: "button", onPnClick: () => this.setModalClose() })), h("div", { key: '3953eef2505ccda4786177c01ae9af92874d65a1', class: "pn-modal-container", ref: el => (this.modalContainer = el) }, h("div", { key: 'de0730ef36d305f2ff2652510838df85bdbdee5e', class: "pn-modal-image", hidden: !this.showImage() }, h("picture", { key: 'c26ae160c243b630d7a1ba71a8d4cac523096cfd', class: "pn-modal-picture", ref: el => (this.modalPicture = el) }, h("slot", { key: '4d2425b17367b4ccd2215e54cfedbee6731a9daf', name: "image" }))), h("header", { key: '815bef72c5b9a2982b7dd62059314ef120221ee0', class: "pn-modal-header", hidden: !this.showHeader() }, this.label && h("h2", { key: '41ae0e9a7d8adca27764bf6be026d0bc59df9b90', class: "pn-modal-label" }, this.label), this.helpertext && h("p", { key: '4fac7c6daf49eaff4a56b7c217f49e7f0507299f', class: "pn-modal-text" }, this.helpertext), h("slot", { key: '8ce017defaa66a4bfec5ef38398b3104ed0ff7f9', name: "header" })), h("section", { key: '3ad1dc180db0ad42a4fa99dc6c9a17fc153af362', class: "pn-modal-content" }, h("slot", { key: 'bddef9aa3cd8b78be3facd5ebd3e88d72b9eb219' })), h("nav", { key: 'edc771b8ca813ed6c9b20f688847c9c22072f0a1', class: "pn-modal-buttons" }, h("slot", { key: '75dcf50e07c985f95836251881b8c214bc1b58c6', name: "buttons" }))))));
+        return (h(Host, { key: '5b50fca359ed20cebcbdead766d08c2439463b4c' }, h("dialog", { key: '43eb7bb4f09c6ce9a665f7478f25b1ae4a253562', id: this.pnId, class: "pn-modal", "data-closing": this.isClosing, "data-sheet": this.sheet, "data-image": this.showImage(), "data-allow-overflow": this.removeOverflow, onClose: () => this.setModalClose(), onCancel: () => this.setModalClose(), onToggle: () => this.modalToggle.emit({ open: this.open }), onKeyDown: event => this.handleKeyboard(event), onClick: event => this.clickModalBackground(event), ref: el => (this.modalElement = el) }, !this.hideClose && (h("pn-button", { key: '0bdc665fe32c8531edb073166fe8940d12360661', small: true, class: "pn-modal-close-button", icon: close, iconOnly: true, arialabel: this.translate('CLOSE_MODAL'), appearance: "light", variant: "borderless", type: "button", onPnClick: () => this.setModalClose() })), h("div", { key: 'ce9529f76b572f6681e1b75528bcab67e3246dbd', class: "pn-modal-container", ref: el => (this.modalContainer = el) }, h("div", { key: 'a2addec74c8af3fc9084a0d6faba9053a255bf86', class: "pn-modal-image", hidden: !this.showImage() }, h("picture", { key: '4341ae13d01268cc0f9df74bf417522116bed2d9', class: "pn-modal-picture", ref: el => (this.modalPicture = el) }, h("slot", { key: '99a643af231cdcd76ad2dafbcdbaf4fbabac5390', name: "image" }))), h("header", { key: '849eea60adcfb7c3bbba8687dc49edf752004617', class: "pn-modal-header", hidden: !this.showHeader() }, this.label && h("h2", { key: 'e57185ebd04cd622ceca5acb81c6606747afa6f9', class: "pn-modal-label" }, this.label), this.helpertext && h("p", { key: '2e0290387a2b96f3eb70db67dd7ac349c5c4fe9e', class: "pn-modal-text" }, this.helpertext), h("slot", { key: 'e05316839bfc8883a2e8f4c5079054e9edcd3859', name: "header" })), h("section", { key: 'd59b818c18159c106df1f6c3b2b3f747f1b6af29', class: "pn-modal-content" }, h("slot", { key: 'c740eb0b7909c9fa5878caecb66887f5bb9b2b73' })), h("nav", { key: '22971631737901988e27f4f01c311d2d76839c6a', class: "pn-modal-buttons", "data-divider": this.sheet }, h("slot", { key: '3c0e8e66db96d8abc8f718270d94e09b2ad90320', name: "buttons" }))))));
     }
     static get watchers() { return {
         "open": [{