@postnord/pn-marketweb-components 4.3.6 → 4.3.8

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

@@ -6,7 +6,7 @@ import { h, Host, Mixin } from "@stencil/core";
 import { animateHeightFactory } from "../../../globals/mixins/index";
 import { translations } from "./translations";
 import { close, alert_exclamation_circle, chevron_down } from "pn-design-assets/pn-assets/icons.js";
-import { uuidv4, awaitTopbar, ripple, en, getTotalHeightOffset } from "../../../index";
+import { uuidv4, awaitTopbar, ripple, en, getMenuWidth, getTotalHeightOffset } from "../../../index";
 /**
  * The `pn-multiselect` gets its options via javascript.
  *
@@ -15,6 +15,9 @@ import { uuidv4, awaitTopbar, ripple, en, getTotalHeightOffset } from "../../../
  *
  * @nativeChange The `pn-multiselect` is built with `input[type=checkbox]` elements, so the `change` event works. However, we recommend the customEvents described above.
  *
+ * @slot helpertext - You can use this slot instead of the prop `helpertext`. Recommended, only if you need to include additional HTML markup. Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.25.0}
+ * @slot error - You can use this slot instead of the prop `error`. Recommended, only if you need to include additional HTML markup. Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.25.0}
+ *
  * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-input-multiselect--docs#pn-multiselect%20(options) Options documentation}
  */
 export class PnMultiselect extends Mixin(animateHeightFactory) {
@@ -26,6 +29,7 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
     idButton = `${this.id}-button`;
     idOptions = `${this.id}-options`;
     idHelper = `${this.id}-text`;
+    idError = `${this.id}-error`;
     idChips = `${this.id}-chips`;
     idSr = `${this.id}-sr`;
     elGroup;
@@ -44,28 +48,32 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
     label;
     /** Display a helper text underneath the select */
     helpertext;
+    /** Manually set the language, not needed if you have the pnTopbar available */
+    language = undefined;
+    /** HTML name of the checkbox elements. Used for each checkbox inside the multiselect. @category Native attributes */
+    name;
+    /** HTML name of the input element. @category Native attributes*/
+    selectName;
     /**
      * This is what will be shown on load if no value is used.
      * The `placeholder` will override the default text used if you have the `search` prop active.
+     * @category Native attributes
      */
     placeholder;
-    /** HTML name of the checkbox elements. Used for each checkbox inside the multiselect. */
-    name;
-    /** Select HTML id */
-    selectId = this.id;
-    /** HTML name of the input element.*/
-    selectName;
-    /** Display an icon to the left of the select input */
-    icon;
-    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 */
-    compact = false;
-    /** Manually set the language, not needed if you have the pnTopbar available */
-    language = null;
+    /** Set the select as required. @category Native attributes */
+    required = false;
+    /** Disable the select. @category Native attributes */
+    disabled = false;
     /**
-     * Array of options.
-     * @hide true
+     * The array of `PnMultiselectOption` objects.
+     * @see {@link PnMultiselectOption} for the option object properties.
+     * @category Features
      **/
     options;
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 @category Features */
+    compact = false;
+    /** Display an icon to the left of the select input @category Features */
+    icon;
     /**
      * Adds a "Select all" option into the list.
      * If you use the search feature at the same time, clicking this option will only toggle the options found.
@@ -100,8 +108,7 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
      **/
     itemCount = 5;
     /**
-     * Use a custom max-height for the dropdown list.
-     * @description The component will automatically set the max height of the dropdown list on its own.
+     * The component will automatically set the max height of the dropdown list on its own.
      * It takes the `pn-topbar` into account and will open in the direction that fits best.
      * Use this prop to override this behaviour and use a custom max-height.
      * @category Features
@@ -117,20 +124,34 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
      * @category Features
      **/
     bottom = false;
-    /** Set the select as required. @category Validation */
-    required = false;
-    /** Disable the select. @category Validation */
-    disabled = false;
-    /** Trigger the invalid state. @category Validation */
+    /** Trigger the invalid state. @category Features */
     invalid = false;
-    /** Display an error message and trigger the invalid state. @category Validation */
+    /** Display an error message and trigger the invalid state. @category Features */
     error;
+    /** Set a custom ID for the select. @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;
+    /** Select HTML id @deprecated Use `pn-id` instead. @category HTML attributes */
+    selectId;
     handleOpen() {
         if (this.open) {
             this.addGlobalEventListeners();
             this.handleDirection();
             this.handleMaxHeight();
-            this.handleWidth();
+            this.handleOffset();
         }
         else {
             this.removeGlobalEventListeners();
@@ -156,11 +177,12 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
             this.handleInputSearch();
     }
     handleSelectId() {
-        const id = this.selectId;
+        const id = this.getId();
         this.idLegend = `${id}-legend`;
         this.idButton = `${id}-button`;
         this.idOptions = `${id}-options`;
         this.idHelper = `${id}-text`;
+        this.idError = `${id}-error`;
         this.idChips = `${id}-chips`;
         this.idSr = `${id}-sr`;
     }
@@ -172,8 +194,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
         if (!this.open)
             return;
         this.toggleOpen(false);
-        this.elList.style.removeProperty('--pn-select-options-width');
-        this.elList.style.removeProperty('--pn-select-max-height');
+        this.elGroup.style.removeProperty('--pn-select-max-height');
+        this.elGroup.style.removeProperty('--pn-select-options-offset');
     }
     /** Dispatched everytime the multiselect is opened or closed. */
     toggleSelect;
@@ -192,19 +214,44 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
      **/
     searchInput;
     async componentWillLoad() {
-        this.handleSelectId();
-        if (this.language === null)
+        if (this.language === undefined)
             await awaitTopbar(this.hostElement);
     }
     componentDidLoad() {
         if (!!this.searchQuery?.length)
             this.handleSearchQuery();
     }
+    getId() {
+        return this.pnId || this.selectId || this.id;
+    }
+    hasHelperText() {
+        return this.helpertext?.length > 0 || this.checkSlottedHelper();
+    }
+    /** If any `error` text is present, either via prop/slot. */
+    hasErrorMessage() {
+        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;
+    }
+    checkSlottedHelper() {
+        return !!this.hostElement.querySelector('[slot=helpertext]');
+    }
+    checkSlottedError() {
+        return !!this.hostElement.querySelector('[slot=error]');
+    }
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
+    }
+    hideError() {
+        return !this.hasErrorMessage();
+    }
     globalEvents = (event) => {
         const target = event.target;
-        const isWithinCalendar = target?.closest(this.hostElement.localName);
-        if (!isWithinCalendar)
+        if (!this.hostElement.contains(target) || event?.key === 'Escape') {
             this.toggleOpen(false);
+        }
     };
     addGlobalEventListeners() {
         const root = this.hostElement.getRootNode();
@@ -397,9 +444,21 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
         const maxHeight = this.upwards ? inputHeight - offset : window.innerHeight - inputHeight - offset;
         this.elGroup.style.setProperty('--pn-select-max-height', `${Math.ceil(maxHeight)}px`);
     }
-    handleWidth() {
-        const { width } = this.getRect(this.elInput);
-        this.elGroup.style.setProperty('--pn-select-options-width', `${Math.ceil(width)}px`);
+    handleOffset() {
+        this.elGroup.style.removeProperty('--pn-select-options-offset');
+        requestAnimationFrame(() => {
+            const { left, right } = this.getRect(this.elList);
+            const menuWidth = getMenuWidth();
+            const leftBoundary = menuWidth + 8;
+            const rightBoundary = window.innerWidth - 8;
+            let offset = 0;
+            if (left < leftBoundary)
+                offset = leftBoundary - left;
+            else if (right > rightBoundary)
+                offset = rightBoundary - right;
+            if (offset !== 0)
+                this.elGroup.style.setProperty('--pn-select-options-offset', `${Math.floor(offset)}px`);
+        });
     }
     setFocus() {
         if (this.search)
@@ -407,12 +466,6 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
         else
             this.elButton.focus({ preventScroll: true });
     }
-    hasError() {
-        return this.invalid || !!this.error;
-    }
-    hasMessage() {
-        return !!this.helpertext || !!this.error;
-    }
     toggleOpen(state) {
         if (typeof state === 'boolean' && state === this.open)
             return;
@@ -533,14 +586,45 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
         const single = `MORE_OPTION${count === 1 ? '' : 'S'}`;
         return `${count} ${this.translate(single)}`;
     }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    /**
+     * If you use a label (technically a legend), use the `idLegend` to point to it.
+     * If not, make sure there is no pnAriaLabel and use pnAriaLabelledby.
+     * This is to make sure there are no double label/labelledby.
+     */
+    getAriaLabelledby() {
+        return this.displayLabel() ? this.idLegend : !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
     describedBy() {
-        const list = [this.search && this.idChips, this.srMessage && this.idSr, !!this.helpertext && this.idHelper].filter(Boolean);
+        const list = [];
+        if (this.search)
+            list.push(this.idChips);
+        if (this.srMessage)
+            list.push(this.idSr);
+        if (this.hasHelperText() && !this.hasErrorMessage())
+            list.push(this.idHelper);
+        if (this.hasErrorMessage())
+            list.push(this.idError);
         if (list.length)
             return list.join(' ');
         return null;
     }
-    renderOption({ label, value, checked, helpertext, icon, id = `${this.selectId}-${value || label}`, invalid, disabled, hide, group, }, indexGroup, indexNested) {
-        return (h("li", { class: "pn-multiselect-option", key: id, hidden: hide }, h("input", { type: "checkbox", id: id, class: "pn-multiselect-option-input", checked: checked ?? this.optionSelected(value), indeterminate: indexNested === undefined && this.isIndeterminate(indexGroup), name: this.name, value: value, disabled: this.disabled || disabled, required: this.required, "aria-invalid": invalid ? 'true' : null, "aria-describedby": helpertext ? `${id}-helper` : null, onClick: (event) => this.ripple(event), onKeyDown: (event) => this.checkboxNav(event, value), onBlur: (event) => this.handleBlur(event) }), h("div", { class: "pn-multiselect-option-content" }, !!icon && h("pn-icon", { icon: icon, color: "blue900" }), h("div", { class: "pn-multiselect-option-text" }, h("label", { class: "pn-multiselect-option-label", htmlFor: id }, h("span", null, label)), helpertext && (h("p", { class: "pn-multiselect-option-helper", id: `${id}-helper` }, helpertext))), h("div", { class: "pn-multiselect-option-checkbox" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "pn-multiselect-option-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { class: "pn-multiselect-option-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))), group?.length && (h("ul", { class: "pn-multiselect-optgroup" }, group?.map((option, i) => this.renderOption(option, indexGroup, i))))));
+    /**
+     * This is to prevent a rare issue with rendering flag icons.
+     * Flags use a set ID to identify gradient colors. If the icon is rendered while the dropdown is closed,
+     * the ID is not unique and the icon will not be rendered for other pn-icons using it.
+     * This is a temp fix to address the root issue which is how the flags SVG styling is built.
+     */
+    renderItemIcon(icon, hide) {
+        return (this.open || this.isMoving()) && !!icon && !hide;
+    }
+    renderOption({ label, value, checked, helpertext, icon, id = `${this.getId()}-${value || label}`, invalid, disabled, hide, group, }, indexGroup, indexNested) {
+        return (h("li", { class: "pn-multiselect-option", key: id, hidden: hide }, h("input", { type: "checkbox", id: id, class: "pn-multiselect-option-input", checked: checked ?? this.optionSelected(value), indeterminate: indexNested === undefined && this.isIndeterminate(indexGroup), name: this.name, value: value, disabled: this.disabled || disabled, required: this.required, "aria-invalid": invalid ? 'true' : null, "aria-describedby": helpertext ? `${id}-helper` : null, onClick: (event) => this.ripple(event), onKeyDown: (event) => this.checkboxNav(event, value), onBlur: (event) => this.handleBlur(event) }), h("div", { class: "pn-multiselect-option-content" }, this.renderItemIcon(icon, hide) && h("pn-icon", { icon: icon, color: "blue900" }), h("div", { class: "pn-multiselect-option-text" }, h("label", { class: "pn-multiselect-option-label", htmlFor: id }, h("span", null, label)), helpertext && (h("p", { class: "pn-multiselect-option-helper", id: `${id}-helper` }, helpertext))), h("div", { class: "pn-multiselect-option-checkbox" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "pn-multiselect-option-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { class: "pn-multiselect-option-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))), group?.length && (h("ul", { class: "pn-multiselect-optgroup" }, group?.map((option, i) => this.renderOption(option, indexGroup, i))))));
     }
     renderOptions() {
         return (h("ul", { id: this.idOptions, class: "pn-multiselect-options", "data-open": this.open, "data-upwards": this.upwards, onChange: (event) => this.handleChange(event), style: { height: '0px' }, ref: el => (this.elList = el) }, this.showSelectAll() &&
@@ -551,7 +635,7 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
             }), this.options?.map((option, index) => this.renderOption(option, index)), this.showEmptyOption() && (h("li", { class: "pn-multiselect-option" }, h("div", { class: "pn-multiselect-option-content", role: "alert" }, h("div", { class: "pn-multiselect-option-text" }, h("span", { class: "pn-multiselect-option-label" }, this.translate(this.isEmpty() ? 'NO_OPTIONS' : 'NO_SEARCH_RESULTS'))))))));
     }
     renderChips() {
-        return (h("ul", { id: this.idChips, class: "pn-multiselect-chips", "aria-label": this.translate('SELECTED_OPTIONS'), ref: el => (this.elChips = el) }, this.optionsCheckedPreview()?.map(({ label, value }, index) => (h("li", { class: "pn-multiselect-chip", "aria-setsize": this.optionsCheckedTotal(), "aria-posinset": index + 1, key: `${label}-${value}` }, h("span", { class: "pn-multiselect-chip-label" }, label), h("button", { type: "button", class: "pn-multiselect-chip-button", "aria-label": `${this.translate('REMOVE')} ${label}`, onClick: () => this.optionSelect({ val: value, checked: false, chip: index }) }, h("pn-icon", { icon: close, small: true, color: "blue700" }))))), this.optionsCheckedTotal() > this.itemCount && (h("li", { class: "pn-multiselect-chip", "data-count": true }, h("span", { class: "pn-multiselect-chip-label" }, "+ ", this.additonalOptions())))));
+        return (h("ul", { id: this.idChips, class: "pn-multiselect-chips", "aria-label": this.translate('SELECTED_OPTIONS'), ref: el => (this.elChips = el) }, this.optionsCheckedPreview()?.map(({ label, value, icon }, index) => (h("li", { class: "pn-multiselect-chip", "aria-setsize": this.optionsCheckedTotal(), "aria-posinset": index + 1, key: `${label}-${value}` }, !!icon && h("pn-icon", { icon: icon, small: true }), h("span", { class: "pn-multiselect-chip-label" }, label), h("button", { type: "button", class: "pn-multiselect-chip-button", "aria-label": `${this.translate('REMOVE')} ${label}`, onClick: () => this.optionSelect({ val: value, checked: false, chip: index }) }, h("pn-icon", { icon: close, small: true, color: "blue700" }))))), this.optionsCheckedTotal() > this.itemCount && (h("li", { class: "pn-multiselect-chip", "data-count": true }, h("span", { class: "pn-multiselect-chip-label" }, "+ ", this.additonalOptions())))));
     }
     renderLabel(compactLabel = false) {
         if (!this.label)
@@ -562,7 +646,7 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
         return (h(Tag, { id: id, class: { 'pn-multiselect-label': true, 'pn-multiselect-sr-only': this.compact && !compactLabel }, "data-compact": this.compact, ...attrs }, h("span", null, this.label), !!this.optionsChecked()?.length && (h("span", null, this.optionsCheckedTotal(), "/", this.optionsTotal()))));
     }
     render() {
-        return (h(Host, { key: '55af777ec6dd7165b4d16bdad6ec784fe81b8f20' }, h("fieldset", { key: '41a5e9a45b3460a96676d606c458a062efe6ab80', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.renderLabel(), h("div", { key: 'fb6874e8d17a70ec0e1e21bf3474575b01c3e669', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: 'ab6aa995337f5a80e2026d98fe69399571249c24', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '0d9495e8864e266a6ababc752781b6e9c75595c3', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '6b5adbc27ab64b9cdb7f53a99d2f4cd9a2185e47', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.selectId, class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-labelledby": this.idLegend, "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, "data-compact": this.compact, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.compact && this.renderLabel(true), this.hasError() && (h("pn-icon", { key: '36e6f1e307758cdec5f9eda59413b8a0c28af78c', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '6197b7545b8646fecbd5a12e540e3011303f660c', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.selectId, "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: 'f9ddba2705b7782606897f6374f5963833bde76e', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (h("p", { key: 'd9fb544f999b9d779362f13090e9653bbd22fd4e', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, h("span", { key: 'ed1426909307379ba22c06a6870ad867f5a7cdad' }, this.error || this.helpertext))), this.search && this.renderChips(), h("slot", { key: 'd0bc44a9160fa4151e6f74c05fa3102189710454' }), this.search && (h("p", { key: '0d8c04c19227c1461a18ccc21a9fd7412a2f6ee1', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '610fc47f9a032c6e8931745e6b6d0b418eadd5ee' }, this.srMessage))))));
+        return (h(Host, { key: '326b1351c1600920a89b49a4ca04fb48af112bb7' }, h("fieldset", { key: '069b0689d499ad99b65f29597cc3968a47a3fc86', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.renderLabel(), h("div", { key: '0a96f922421c6a1adb664714ec0d593cfdf950e5', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: '3c6cadb7ff3dbc67fb8bab786133d64ad330c5d7', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '20bb5b6b273bea94903648a3465e14cf8dad2f77', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '905179f50885d27bc7f41df667be93731dd5e4be', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.getId(), class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, "data-compact": this.compact, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.compact && this.renderLabel(true), this.hasError() && (h("pn-icon", { key: '635d97c6b8f780e6bd6daab225a97d1057b4bf0d', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '77e9862561cd9ed80c5aa1b386ae772476a34e76', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.getId(), "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: '28092398e64c04af103142d8f459579eb2b70a1b', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), h("p", { key: '17d396f1b3175b502ce8d54c6ec059588bbe8128', id: this.idHelper, class: "pn-multiselect-text", hidden: this.hideHelpertext() }, h("span", { key: '693ba0a687b9b9766249e6703d0252beeeb762e9' }, this.helpertext), h("slot", { key: 'a70b1dff00b4ec936461f73354ebe18ce1a0a0c1', name: "helpertext" })), h("p", { key: '94c44db96a270fd7d3180c6dfddb53a46e85c2aa', id: this.idError, class: "pn-multiselect-text", role: "alert", hidden: this.hideError() }, h("span", { key: '0297ed1e18f374c0c3f0909a1ee5685b75c73a7c' }, this.error), h("slot", { key: '9c545b960d440978e46858b69ac86ad0112510c7', name: "error" })), this.search && this.renderChips(), h("slot", { key: '9551563c6a72fa6e06ce473eadbc73a0428b551e' }), this.search && (h("p", { key: '96863325f57e613f0272d652e05a70e1c5c35dde', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '21b84e0522ca16702a9ccabb071d30c0317631ef' }, this.srMessage))))));
     }
     static get is() { return "pn-multiselect"; }
     static get originalStyleUrls() {
@@ -585,8 +669,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Label placed above the select"
@@ -615,24 +699,32 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "reflect": false,
                 "attribute": "helpertext"
             },
-            "placeholder": {
+            "language": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "PnLanguages",
+                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
+                    "references": {
+                        "PnLanguages": {
+                            "location": "import",
+                            "path": "@/index",
+                            "id": "src/index.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "This is what will be shown on load if no value is used.\nThe `placeholder` will override the default text used if you have the `search` prop active."
+                    "text": "Manually set the language, not needed if you have the pnTopbar available"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "placeholder"
+                "attribute": "language",
+                "defaultValue": "undefined"
             },
             "name": {
                 "type": "string",
@@ -645,7 +737,10 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
                     "text": "HTML name of the checkbox elements. Used for each checkbox inside the multiselect."
                 },
                 "getter": false,
@@ -653,26 +748,6 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "reflect": false,
                 "attribute": "name"
             },
-            "selectId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Select HTML id"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "select-id",
-                "defaultValue": "this.id"
-            },
             "selectName": {
                 "type": "string",
                 "mutable": false,
@@ -684,7 +759,10 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
                     "text": "HTML name of the input element."
                 },
                 "getter": false,
@@ -692,7 +770,7 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "reflect": false,
                 "attribute": "select-name"
             },
-            "icon": {
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -703,15 +781,18 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Display an icon to the left of the select input"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "This is what will be shown on load if no value is used.\nThe `placeholder` will override the default text used if you have the `search` prop active."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon"
+                "attribute": "placeholder"
             },
-            "compact": {
+            "required": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -723,43 +804,39 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "since",
-                            "text": "v7.21.0"
+                            "name": "category",
+                            "text": "Native attributes"
                         }],
-                    "text": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
+                    "text": "Set the select as required."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "compact",
+                "attribute": "required",
                 "defaultValue": "false"
             },
-            "language": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "PnLanguages",
-                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
-                    "references": {
-                        "PnLanguages": {
-                            "location": "import",
-                            "path": "@/index",
-                            "id": "src/index.ts::PnLanguages",
-                            "referenceLocation": "PnLanguages"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Manually set the language, not needed if you have the pnTopbar available"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Disable the select."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "language",
-                "defaultValue": "null"
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
             "options": {
                 "type": "unknown",
@@ -780,14 +857,65 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "hide",
-                            "text": "true"
+                            "name": "see",
+                            "text": "{@link PnMultiselectOption } for the option object properties."
+                        }, {
+                            "name": "category",
+                            "text": "Features"
                         }],
-                    "text": "Array of options."
+                    "text": "The array of `PnMultiselectOption` objects."
                 },
                 "getter": false,
                 "setter": false
             },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Display an icon to the left of the select input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
             "selectAll": {
                 "type": "boolean",
                 "mutable": false,
@@ -927,13 +1055,10 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "description",
-                            "text": "The component will automatically set the max height of the dropdown list on its own.\nIt takes the `pn-topbar` into account and will open in the direction that fits best.\nUse this prop to override this behaviour and use a custom max-height."
-                        }, {
                             "name": "category",
                             "text": "Features"
                         }],
-                    "text": "Use a custom max-height for the dropdown list."
+                    "text": "The component will automatically set the max height of the dropdown list on its own.\nIt takes the `pn-topbar` into account and will open in the direction that fits best.\nUse this prop to override this behaviour and use a custom max-height."
                 },
                 "getter": false,
                 "setter": false,
@@ -986,7 +1111,7 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "attribute": "bottom",
                 "defaultValue": "false"
             },
-            "required": {
+            "invalid": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -999,22 +1124,22 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Validation"
+                            "text": "Features"
                         }],
-                    "text": "Set the select as required."
+                    "text": "Trigger the invalid state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
+                "attribute": "invalid",
                 "defaultValue": "false"
             },
-            "disabled": {
-                "type": "boolean",
+            "error": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -1022,40 +1147,41 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Validation"
+                            "text": "Features"
                         }],
-                    "text": "Disable the select."
+                    "text": "Display an error message and trigger the invalid state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "error"
             },
-            "invalid": {
-                "type": "boolean",
+            "pnId": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "Validation"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Trigger the invalid state."
+                    "text": "Set a custom ID for the select."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid",
-                "defaultValue": "false"
+                "attribute": "pn-id"
             },
-            "error": {
+            "pnAriaLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1067,15 +1193,68 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "Validation"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Display an error message and trigger the invalid state."
+                    "text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error"
+                "attribute": "pn-aria-label"
+            },
+            "pnAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-labelledby"
+            },
+            "selectId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Select HTML id"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-id"
             }
         };
     }
@@ -1207,6 +1386,12 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
             }, {
                 "propName": "selectId",
                 "methodName": "handleSelectId"
+            }, {
+                "propName": "pnId",
+                "methodName": "handleSelectId",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }];
     }
     static get listeners() {