@postnord/pn-marketweb-components 4.3.6 → 4.3.7

package/umd/modules/@postnord/web-components/cjs/pn-search-field.cjs.entry.js

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var index$1 = require('./index.cjs.js');
 
 const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>';
@@ -30,38 +30,35 @@ const translations = {
     },
 };
 
-const pnSearchFieldCss = () => `${index.transformTag("pn-search-field")}{display:inline-block}${index.transformTag("pn-search-field")} .pn-search-field{display:flex;gap:0.5em}${index.transformTag("pn-search-field")} .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}${index.transformTag("pn-search-field")} .pn-search-field-input{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill,${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:hover,${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:focus,${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-search-field")} .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-search-field")} .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-search-field")} .pn-search-field-input{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){${index.transformTag("pn-search-field")} .pn-search-field-input{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-search-field")} .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-search-field")} .pn-search-field-input:hover{border-color:#005d92}${index.transformTag("pn-search-field")} .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-search-field")} .pn-search-field-input{min-height:3em;height:100%;width:100%;border-radius:3em}${index.transformTag("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button{display:none}${index.transformTag("pn-search-field")} .pn-search-field-inline{pointer-events:none;position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}${index.transformTag("pn-search-field")} .pn-search-field-inline ${index.transformTag("pn-button")}{position:absolute;left:50%;top:50%;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-search-field")} .pn-search-field-inline ${index.transformTag("pn-button")}{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-search-field")} .pn-search-field-inline ${index.transformTag("pn-button")}{transition-delay:0.2s;transform:translate(100%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field-submit{white-space:nowrap}${index.transformTag("pn-search-field")} .pn-search-field-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}${index.transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] ${index.transformTag("pn-button")}{transform:translate(100%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}${index.transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}${index.transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only][data-loading] .pn-button-bg{width:4em;height:4em}${index.transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}${index.transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}`;
+const pnSearchFieldCss = () => `${index.transformTag("pn-search-field")}{display:inline-block}${index.transformTag("pn-search-field")} .pn-search-field{display:flex;gap:0.5em}${index.transformTag("pn-search-field")} .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}${index.transformTag("pn-search-field")} .pn-search-field-input{min-height:3em;height:100%;width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:3em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill,${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:hover,${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:focus,${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-search-field")} .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-search-field")} .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-search-field")} .pn-search-field-input{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){${index.transformTag("pn-search-field")} .pn-search-field-input{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-search-field")} .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-search-field")} .pn-search-field-input:hover{border-color:#005d92}${index.transformTag("pn-search-field")} .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-search-field")} .pn-search-field-input::-webkit-calendar-picker-indicator,${index.transformTag("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button,${index.transformTag("pn-search-field")} .pn-search-field-input::-webkit-search-decoration{display:none !important}${index.transformTag("pn-search-field")} .pn-search-field-inline{pointer-events:none;position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}${index.transformTag("pn-search-field")} .pn-search-field-inline ${index.transformTag("pn-button")}{position:absolute;left:50%;top:50%;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-search-field")} .pn-search-field-inline ${index.transformTag("pn-button")}{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-search-field")} .pn-search-field-inline ${index.transformTag("pn-button")}{transition-delay:0.2s;transform:translate(100%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field-submit{white-space:nowrap}${index.transformTag("pn-search-field")} .pn-search-field-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}${index.transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] ${index.transformTag("pn-button")}{transform:translate(100%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}${index.transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}${index.transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only][data-loading] .pn-button-bg{width:4em;height:4em}${index.transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}${index.transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}`;
 
 const PnSearchField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.search = index.createEvent(this, "search");
-        this.update = index.createEvent(this, "update");
+        this.search = index.createEvent(this, "search", 7);
+        this.update = index.createEvent(this, "update", 7);
     }
     id = `pn-search-field-${index$1.uuidv4()}`;
-    searchElement;
     get hostElement() { return index.getElement(this); }
     /** Provide an aria-label for the search field. */
     label;
-    /** Set the value of the search field. */
+    /** Override the pntopbar language. */
+    language = undefined;
+    /** Set the value of the search field. @category Native attributes */
     value = '';
-    /** Set a search field placeholder. This is no replacement for a `label`. */
-    placeholder;
-    /** Set a unique ID for the search input. */
-    searchid = this.id;
-    /** Set HTML name of the search input. */
+    /** Set HTML name of the search input. @category Native attributes */
     name;
-    /** Allow the browser to autocomplete the search field. */
+    /** Set a search field placeholder. @category Native attributes */
+    placeholder;
+    /** Allow the browser to autocomplete the search field. @category Native attributes */
     autocomplete;
-    /** Point to a datalist element with this id. */
+    /** Point to a datalist element with this id. @category Native attributes */
     list;
-    /** Override the pntopbar language. */
-    language = null;
-    /** Disable the search field. @category State */
-    disabled = false;
-    /** Set the search field as required. @category State */
+    /** Set the search field as required. @category Native attributes */
     required = false;
-    /** Display loading animation. @category State */
+    /** Disable the search field. @category Native attributes */
+    disabled = false;
+    /** Display loading animation. @category Features */
     loading = false;
     /**
      * Button variant changes the visual of the search field:
@@ -72,20 +69,31 @@ const PnSearchField = class {
      *
      * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`.
      *
-     * @category Button
+     * @category Features
      */
     button = '';
-    /** Label for the button element. @category Button */
+    /** Label for the button element. @category Features */
     buttonLabel;
-    /** Add a tooltip to the search button. @category Button */
+    /** Add a tooltip to the search button. @category Features */
     buttonTooltip;
     /**
      * Light instead of dark search button.
      *
      * @deprecated The color is now set automatically based on the button prop.
-     * @category Button
+     * @category Features
      */
     buttonLight = false;
+    /** Set a custom ID for the search input. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /** Set a unique ID for the search input. @deprecated Use `pn-id` instead. @category HTML attributes  */
+    searchid;
     /** This is emitted on search submission both with keyboard and mouse. */
     search;
     /** Custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */
@@ -94,9 +102,12 @@ const PnSearchField = class {
         this.update.emit(this.value);
     }
     async componentWillLoad() {
-        if (this.language === null)
+        if (this.language === undefined)
             await index$1.awaitTopbar(this.hostElement);
     }
+    getId() {
+        return this.pnId || this.searchid || this.id;
+    }
     translate(prop) {
         return translations?.[prop]?.[this.language || index$1.en];
     }
@@ -116,6 +127,12 @@ const PnSearchField = class {
         this.update.emit(this.value);
         this.hostElement.querySelector('input').focus();
     }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() ? this.pnAriaLabelledby : null;
+    }
     getButtonLabel() {
         return this.buttonLabel || this.translate('SEARCH');
     }
@@ -137,7 +154,7 @@ const PnSearchField = class {
         return this.searchSimple() ? 'outlined' : null;
     }
     render() {
-        return (index.h(index.Host, { key: 'd6e76c457e99f83b3d47a4b0c951168c6b5fc086' }, index.h("div", { key: '203055449e80dfd9bf19d94f340e4081d358a7b5', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, index.h("div", { key: 'bb86197c5f7e88c162eac8c899557bb5941ed6c6', class: "pn-search-field-container" }, index.h("input", { key: 'ba497f96d2afd9554e842010edf8cef656a994fc', class: "pn-search-field-input", type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), index.h("div", { key: 'bd11b1ec64b10dbc3b93fd0bcc163d5d120766cf', class: "pn-search-field-inline" }, this.searchAuto() && (index.h("pn-button", { key: 'c8961cb53609cc7d290b528af7e23a363a348833', class: "pn-search-field-button", type: "button", appearance: "light", small: true, icon: search, iconOnly: true, arialabel: this.getButtonLabel(), noTab: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })), !this.disabled && (index.h("pn-button", { key: '45197b884106304f5e3a4dc66b58333d8b79d4cb', small: true, class: "pn-search-field-clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: !this.value || this.loading, onPnClick: () => this.clearInput() })), this.searchAuto() && index.h("pn-spinner", { key: 'f681e4d08d66c9658f09b9cd947b70e4cd0f0837', class: "pn-search-field-spinner" }))), !this.searchAuto() && (index.h("pn-button", { key: '8498355d5d49c64755c58ce4d599938e3e25c84b', class: "pn-search-field-submit", label: this.getButtonLabel(), tooltip: this.buttonTooltip, appearance: this.searchButtonAppearance(), variant: this.searchButtonVariant(), icon: search, iconOnly: this.searchSimple() || this.searchJumbo(), arialabel: this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })))));
+        return (index.h(index.Host, { key: '5ffa0c58cd54c1a6588147e5ec9a72e0045e16aa' }, index.h("div", { key: 'd18a2bdaef46229ff87fe1612d39489443fd70cc', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, index.h("div", { key: '1a7c9e872e0c7696f0d1d84a3420eade2b1cd2ed', class: "pn-search-field-container" }, index.h("input", { key: '3ff3e9809123283f66ea933f7bc9fb5a92489e51', class: "pn-search-field-input", id: this.getId(), type: "search", value: this.value, name: this.name, placeholder: this.placeholder, autocomplete: this.autocomplete, list: this.list, required: this.required, disabled: this.disabled, "aria-label": this.label, "aria-labelledby": this.getAriaLabelledby(), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), index.h("div", { key: 'eeb6d382c93f98da5561b30219ef829c668eab54', class: "pn-search-field-inline" }, this.searchAuto() && (index.h("pn-button", { key: '65d7049753656a7f4bce29e7e8c99305e99f15e2', class: "pn-search-field-button", type: "button", appearance: "light", small: true, icon: search, iconOnly: true, arialabel: this.getButtonLabel(), noTab: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })), !this.disabled && (index.h("pn-button", { key: '58bae5e2fc05c66cee21081e71904530ca75a0b9', small: true, class: "pn-search-field-clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: !this.value || this.loading, onPnClick: () => this.clearInput() })), this.searchAuto() && index.h("pn-spinner", { key: 'd3955278766f786897eb0024c7523179a2ad78c4', class: "pn-search-field-spinner" }))), !this.searchAuto() && (index.h("pn-button", { key: 'fd46d299cfd9600e671e827daa4a00675a6bd25b', class: "pn-search-field-submit", label: this.getButtonLabel(), tooltip: this.buttonTooltip, appearance: this.searchButtonAppearance(), variant: this.searchButtonVariant(), icon: search, iconOnly: this.searchSimple() || this.searchJumbo(), arialabel: this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })))));
     }
 };
 PnSearchField.style = pnSearchFieldCss();

package/umd/modules/@postnord/web-components/cjs/pn-segment.cjs.entry.js

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var index$1 = require('./index.cjs.js');
 
 const pnSegmentCss = () => `${index.transformTag("pn-segment")}{position:relative;color:#005d92;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}${index.transformTag("pn-segment")}:last-of-type{margin-right:0}${index.transformTag("pn-segment")} .pn-segment{cursor:pointer;margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-segment")} .pn-segment:disabled{cursor:not-allowed}${index.transformTag("pn-segment")} .pn-segment:disabled~.pn-segment-label{color:#5e554a}${index.transformTag("pn-segment")} .pn-segment:disabled~.pn-segment-label ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#5e554a}${index.transformTag("pn-segment")} .pn-segment-label{height:100%;width:100%;padding:0.5em;border-radius:3em;font-weight:500;border:0.0625em solid transparent;display:inline-flex;gap:0.5em;align-items:center;-webkit-tap-highlight-color:transparent}`;
@@ -12,31 +12,36 @@ const pnSegmentCss = () => `${index.transformTag("pn-segment")}{position:relativ
 const PnSegment = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.segmentHover = index.createEvent(this, "segmentHover");
+        this.segmentHover = index.createEvent(this, "segmentHover", 7);
     }
     id = `pn-segment-${index$1.uuidv4()}`;
     get hostElement() { return index.getElement(this); }
     /** The segment label, same as the slot. @since v7.7.0 */
     label;
-    /** The segment controller name. */
-    name;
-    /** The segment value. */
+    /** The segment value. @category Native attributes */
     value;
+    /** The segment controller name. @category Native attributes */
+    name;
+    /** Disable the segment. @since v7.7.0 @category Native attributes */
+    disabled = false;
     /** Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. @hide true */
     selected = false;
-    /** A unique HTML id. */
-    segmentid = this.id;
-    /** The SVG content of the icon you want. */
+    /** The SVG content of the icon you want. @category Features */
     icon;
-    /** Disable the segment. @since v7.7.0 */
-    disabled = false;
+    /** Set a custom ID for the segment. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /** Set a custom ID for the segment. @deprecated Use `pn-id` instead. @category HTML attributes */
+    segmentid;
     /** This event is used by the `pn-segmented-control` component. Do not use manually. */
     segmentHover;
     handleHover(mouse) {
         this.segmentHover.emit(mouse);
     }
+    getId() {
+        return this.pnId || this.segmentid || this.id;
+    }
     render() {
-        return (index.h(index.Host, { key: 'b98bb414de20d14fc2ee9d087be192d5f17bf1f9', onMouseEnter: (event) => this.handleHover(event) }, index.h("input", { key: '0b6117d85bb547c249a402cc26494355f3dc3e95', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), index.h("label", { key: '8570c7c62ccfcfdd5dca9d8e1a6e016ca9c6a304', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && index.h("pn-icon", { key: 'e10a1ea4ca26f71e6caadbeeda6bf5d68cfc266f', icon: this.icon, color: "blue700" }), index.h("span", { key: '8ec12157e0ca6f62772743e06beefc677f9f9f87', class: "pn-segment-text" }, this.label, index.h("slot", { key: '6342dfb17f71cae05318a3c19a19fdb6e46bb157' })))));
+        return (index.h(index.Host, { key: 'c1ca80ac494bc4b75dea79723d12650d18c47e98', onMouseEnter: (event) => this.handleHover(event) }, index.h("input", { key: 'c3bdb057f6ecb46a0a343da3c54331375a6c0e35', class: "pn-segment", id: this.getId(), name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), index.h("label", { key: '06f7c91d9440c867a98642246a7ef9c958f2eb1b', htmlFor: this.getId(), class: "pn-segment-label" }, this.icon && index.h("pn-icon", { key: 'caf831966dd81f60ac72f2c3a18ca1afd085d07c', icon: this.icon, color: "blue700" }), index.h("span", { key: '0d14699fcadef37bcb33d43464db9e5217d0d202', class: "pn-segment-text" }, this.label, index.h("slot", { key: '7e7398bba9a088764e844dc7856aec2ec325161b' })))));
     }
 };
 PnSegment.style = pnSegmentCss();

package/umd/modules/@postnord/web-components/cjs/pn-segmented-control.cjs.entry.js

@@ -4,11 +4,11 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var arrow_left = require('./arrow_left-Crkz484c.js');
 var arrow_right = require('./arrow_right-CABi9Wkp.js');
 
-const pnSegmentedControlCss = () => `${index.transformTag("pn-segmented-control")}{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;transform:translateZ(0);transition-property:outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-segmented-control")}{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-segmented-control")}{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-segmented-control")}:focus-within,${index.transformTag("pn-segmented-control")}:active{outline-color:#005d92}${index.transformTag("pn-segmented-control")} .pn-segmented-control{display:flex;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}${index.transformTag("pn-segmented-control")} .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}${index.transformTag("pn-segmented-control")} .pn-segmented-control::-webkit-scrollbar{display:none}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;transition-property:width, transform, background-color, opacity, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-active]{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);border:0.0625em solid #005d92;background-color:#ffffff;z-index:1}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${index.transformTag("pn-segmented-control")} .pn-sc-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}${index.transformTag("pn-segmented-control")} .pn-sc-arrows svg{width:1.5em}${index.transformTag("pn-segmented-control")} .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}${index.transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{cursor:pointer;pointer-events:all;width:2.5em;height:2.5em;background:#ffffff;border:none;outline:none;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;transition-property:transform, opacity, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-left{transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${index.transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-right{transform:translateX(100%);border-radius:50% 0 0 50%;box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${index.transformTag("pn-segmented-control")} .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,${index.transformTag("pn-segmented-control")} .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;transform:translateX(0)}`;
+const pnSegmentedControlCss = () => `${index.transformTag("pn-segmented-control")}{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;transform:translateZ(0);transition-property:outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-segmented-control")}{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-segmented-control")}{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-segmented-control")}:focus-within,${index.transformTag("pn-segmented-control")}:active{outline-color:#005d92}${index.transformTag("pn-segmented-control")} .pn-segmented-control{display:flex;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}${index.transformTag("pn-segmented-control")} .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}${index.transformTag("pn-segmented-control")} .pn-segmented-control::-webkit-scrollbar{display:none}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;transition-property:width, transform, background-color, opacity, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-active]{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);border:0.0625em solid #005d92;background-color:#ffffff;z-index:1}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${index.transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${index.transformTag("pn-segmented-control")} .pn-sc-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}${index.transformTag("pn-segmented-control")} .pn-sc-arrows svg{width:1.5em}${index.transformTag("pn-segmented-control")} .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}${index.transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{cursor:pointer;pointer-events:all;width:2.5em;height:2.5em;background:#ffffff;border:none;outline:none;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;transition-property:transform, opacity, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-left{transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${index.transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-right{transform:translateX(100%);border-radius:50% 0 0 50%;box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${index.transformTag("pn-segmented-control")} .pn-sc-arrows[data-left] .pn-sc-arrow-left,${index.transformTag("pn-segmented-control")} .pn-sc-arrows[data-right] .pn-sc-arrow-right{opacity:1;transform:translateX(0)}`;
 
 const PnSegmentedControl = class {
     constructor(hostRef) {
@@ -43,18 +43,24 @@ const PnSegmentedControl = class {
         const { target } = event.detail;
         this.calcHighlight(target, true);
     }
-    componentDidLoad() {
-        if (this.mo)
-            this.mo.disconnect();
+    connectedCallback() {
         this.mo = new MutationObserver(() => {
             index.forceUpdate(this.hostElement);
             this.setSegments();
         });
-        this.mo.observe(this.hostElement, { childList: true });
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
+    componentDidLoad() {
         this.setSegments();
     }
     setSegments() {
-        this.segments = Array.from(this.hostElement.querySelectorAll(`${index.transformTag("pn-segment")}`));
+        const segmentTag = index.transformTag('pn-segment');
+        const list = this.hostElement.querySelectorAll(segmentTag);
+        this.segments = Array.from(list);
         this.setActiveSegment();
     }
     setActiveSegment() {
@@ -77,7 +83,8 @@ const PnSegmentedControl = class {
         const chip = hover ? this.hoverBg : this.activeBg;
         requestAnimationFrame(() => {
             const el = element || this.segments.find(({ value }) => value === this.value);
-            const elSegment = el?.closest(`${index.transformTag("pn-segment")}`);
+            const segmentTag = index.transformTag('pn-segment');
+            const elSegment = el?.closest(segmentTag);
             if (!elSegment)
                 return;
             const elRect = elSegment.getBoundingClientRect();
@@ -104,11 +111,12 @@ const PnSegmentedControl = class {
             const distanceToStart = this.segmentContainer.scrollLeft;
             this.showLeftArrow = distanceToStart > 0;
             this.showRightArrow = distanceToEnd > 0;
-            return;
         }
-        this.showLeftArrow = false;
-        this.showRightArrow = false;
-        this.showScrollArrows = false;
+        else {
+            this.showLeftArrow = false;
+            this.showRightArrow = false;
+            this.showScrollArrows = false;
+        }
     }
     scroll(val) {
         let amount = this.segmentContainer.scrollLeft + val;
@@ -117,17 +125,9 @@ const PnSegmentedControl = class {
             behavior: 'smooth',
         });
     }
-    scrollArrowClasses() {
-        const list = ['pn-sc-arrows'];
-        if (this.showLeftArrow)
-            list.push('pn-sc-left-visible');
-        if (this.showRightArrow)
-            list.push('pn-sc-right-visible');
-        return list.join(' ');
-    }
     /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
     render() {
-        return (index.h(index.Host, { key: '4ff48c9a0556397894d55f7d3dc0a266349ef8fc' }, index.h("div", { key: '82ef8456eda4724b55705f9a662577eb172df89d', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, index.h("slot", { key: '9b2949cf6e7976795543f6f8a67c126bee02e59d' }), index.h("div", { key: '42ab10791de502f48aac3a16766425b435c1c52e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), index.h("div", { key: '24060bf183aabe485b7ff66bbad9b44a7704df12', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), index.h("div", { key: '31790d3f9fccd0c4242b5584ba2ff6ee32df4297', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, index.h("button", { key: '8ffa7498550bc0f052b77f5297b349b84efbccb8', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, index.h("pn-icon", { key: '89d4ee843ade39e7264e08c31ad83c2dd32f7931', icon: arrow_left.arrow_left })), index.h("button", { key: '8f1707b0e2debb84451210d03187b51eba3f2897', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, index.h("pn-icon", { key: '4fa0fcd57eb268e3c9cd9e42f5d4e84b433fafee', icon: arrow_right.arrow_right })))));
+        return (index.h(index.Host, { key: 'e50018a767b5280ce0144544f3fb213b8f025944' }, index.h("div", { key: '8f9f4beedc7b07d2431fde84456a96d501bdbf15', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, index.h("slot", { key: '1caffca6e2cd27adcb2c5bfa5b45f52043c85829' }), index.h("div", { key: '3ef184c6e26f194aa3b5e3ef284313f73aa03a6e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), index.h("div", { key: '90c56a3f631557e062f70b4ef98231eafc1f46d7', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), index.h("div", { key: '371d10511a314e69613a195858dba3073f7ca920', class: "pn-sc-arrows", "data-left": this.showLeftArrow, "data-right": this.showRightArrow, hidden: !this.showScrollArrows }, index.h("button", { key: 'e698d859b989e8fde8864185d3fdce81584280da', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, index.h("pn-icon", { key: 'e82f3b0257bd48dc281a6c113cecbd0cb551fd53', icon: arrow_left.arrow_left })), index.h("button", { key: '8eba509c3c48304c372d543e51edecaaf41cf564', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, index.h("pn-icon", { key: '0ed1d7cd2b88a619f21e2ee8075c864f9bdcf561', icon: arrow_right.arrow_right })))));
     }
     static get watchers() { return {
         "value": [{

package/umd/modules/@postnord/web-components/cjs/pn-select.cjs.entry.js

@@ -4,78 +4,133 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');
 var chevron_down = require('./chevron_down-BLU6_yOG.js');
 var index$1 = require('./index.cjs.js');
 
-const pnSelectCss = () => `${index.transformTag("pn-select")}{display:inline-block}${index.transformTag("pn-select")} .pn-select-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){${index.transformTag("pn-select")} .pn-select-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-select")} .pn-select-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}${index.transformTag("pn-select")} .pn-select-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${index.transformTag("pn-select")} .pn-select-label>span{font-size:0.875em}${index.transformTag("pn-select")} .pn-select-label[data-compact][data-icon]{--pn-input-offset-left:calc(2em)}${index.transformTag("pn-select")} .pn-select-input{position:relative}${index.transformTag("pn-select")} .pn-select-icon{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;border-radius:50%;background-color:transparent}${index.transformTag("pn-select")} .pn-select-icon[data-default]{right:1em}${index.transformTag("pn-select")} .pn-select-icon[data-custom]{left:0.75em}${index.transformTag("pn-select")} .pn-select-icon[data-custom]~.pn-select-element{padding-left:2.75em}${index.transformTag("pn-select")} .pn-select-icon[data-error]{right:3.5em}${index.transformTag("pn-select")} .pn-select-icon[data-error]~.pn-select-element{padding-right:5.5em}${index.transformTag("pn-select")} .pn-select-icon>.pn-icon-svg{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-select")} .pn-select-icon>.pn-icon-svg{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-select")} .pn-select-element{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;text-overflow:ellipsis;white-space:nowrap;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3em 0.75em 0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill,${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill:hover,${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill:focus,${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-select")} .pn-select-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-select")} .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-select")} .pn-select-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){${index.transformTag("pn-select")} .pn-select-element{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-select")} .pn-select-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${index.transformTag("pn-select")} .pn-select-element[data-compact]::placeholder{color:transparent}${index.transformTag("pn-select")} .pn-select-element[data-compact]:focus+.pn-select-label,${index.transformTag("pn-select")} .pn-select-element[data-compact]:not(:placeholder-shown)+.pn-select-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${index.transformTag("pn-select")} .pn-select-element::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-select")} .pn-select-element:hover{border-color:#005d92}${index.transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-select")} .pn-select-element:open~.pn-select-icon .pn-icon-svg{transform:rotate(180deg)}${index.transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-select")} .pn-select-element[data-placeholder]{color:#5e554a;font-weight:normal}${index.transformTag("pn-select")} .pn-select-element:hover{color:#2d2013;background-color:#effbff}${index.transformTag("pn-select")} .pn-select-no-results{margin:0;padding:0.75em}${index.transformTag("pn-select")} .pn-select-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${index.transformTag("pn-select")} .pn-select-helper[role=alert]{color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-label{color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill,${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:hover,${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:focus,${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}`;
+const pnSelectCss = () => `${index.transformTag("pn-select")}{display:inline-block}${index.transformTag("pn-select")} .pn-select-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){${index.transformTag("pn-select")} .pn-select-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-select")} .pn-select-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}${index.transformTag("pn-select")} .pn-select-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${index.transformTag("pn-select")} .pn-select-label>span{font-size:0.875em}${index.transformTag("pn-select")} .pn-select-label[data-compact][data-icon]{--pn-input-offset-left:calc(2em)}${index.transformTag("pn-select")} .pn-select-input{position:relative}${index.transformTag("pn-select")} .pn-select-icon{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;border-radius:50%;background-color:transparent}${index.transformTag("pn-select")} .pn-select-icon .pn-icon-svg{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-select")} .pn-select-icon .pn-icon-svg{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-select")} .pn-select-icon[data-default]{right:1em}${index.transformTag("pn-select")} .pn-select-icon[data-custom]{left:0.75em}${index.transformTag("pn-select")} .pn-select-icon[data-custom]~.pn-select-element{padding-left:2.75em}${index.transformTag("pn-select")} .pn-select-icon[data-error]{right:3.5em}${index.transformTag("pn-select")} .pn-select-icon[data-error]~.pn-select-element{padding-right:5.5em}${index.transformTag("pn-select")} .pn-select-element{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;text-overflow:ellipsis;white-space:nowrap;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3em 0.75em 0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill,${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill:hover,${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill:focus,${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-select")} .pn-select-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-select")} .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-select")} .pn-select-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){${index.transformTag("pn-select")} .pn-select-element{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-select")} .pn-select-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${index.transformTag("pn-select")} .pn-select-element[data-compact]::placeholder{color:transparent}${index.transformTag("pn-select")} .pn-select-element[data-compact]:focus+.pn-select-label,${index.transformTag("pn-select")} .pn-select-element[data-compact]:not(:placeholder-shown)+.pn-select-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${index.transformTag("pn-select")} .pn-select-element::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-select")} .pn-select-element:hover{border-color:#005d92}${index.transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-select")} .pn-select-element:open~.pn-select-icon .pn-icon-svg{transform:rotate(180deg)}${index.transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${index.transformTag("pn-select")} .pn-select-element:disabled:hover{background-color:#f3f2f2}${index.transformTag("pn-select")} .pn-select-element:has(option[value=""]:checked){color:#5e554a;font-weight:normal}${index.transformTag("pn-select")} .pn-select-element:hover{color:#2d2013;background-color:#effbff}${index.transformTag("pn-select")} .pn-select-no-results{margin:0;padding:0.75em}${index.transformTag("pn-select")} .pn-select-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${index.transformTag("pn-select")} .pn-select-text[role=alert]{color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-label{color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill,${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:hover,${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:focus,${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}`;
 
 const PnSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     id = `pn-select-${index$1.uuidv4()}`;
-    idHelpertext = `${this.id}-text`;
-    select;
+    idHelper = `${this.id}-text`;
+    idError = `${this.id}-error`;
     mo;
     get hostElement() { return index.getElement(this); }
     /** Label placed above the select. */
     label;
     /** Display a helper text underneath the select. */
     helpertext;
-    /** Select HTML id */
-    selectId = this.id;
-    /** Display an icon to the left of the select input. */
-    icon;
-    /** Use the compact label variant. @since v7.21.0 */
-    compact = false;
-    /** HTML select name. @category HTML */
+    /** HTML select name. @category Native attributes */
     name;
-    /** HTML form name. @category HTML */
+    /** HTML form name. @category Native attributes */
     form;
-    /** HTML autocomplete. @category HTML */
+    /** HTML autocomplete. @category Native attributes */
     autocomplete;
-    /**
-     * Set the select as required.
-     * @category Validation
-     */
+    /** Set the select as required. @category Native attributes */
     required = false;
-    /**
-     * Disable the select.
-     * @category Validation
-     */
+    /** Disable the select. @category Native attributes */
     disabled = false;
+    /** Use the compact label variant. @since v7.21.0 @category Features */
+    compact = false;
+    /** Display an icon to the left of the select input. @category Features */
+    icon;
+    /** Trigger the invalid state. @category Features */
+    invalid = false;
+    /** 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;
     /**
-     * Trigger the invalid state.
-     * @category Validation
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
      */
-    invalid = false;
+    pnAriaLabel;
     /**
-     * Display an error message and trigger the invalid state.
-     * @category Validation
+     * 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
      */
-    error;
-    componentDidLoad() {
-        if (this.mo)
-            this.mo.disconnect();
+    pnAriaLabelledby;
+    /** Set a custom ID for the select. @deprecated Use `pn-id` instead. @category HTML attributes */
+    selectId;
+    handleId() {
+        this.idHelper = `${this.getId()}-text`;
+        this.idError = `${this.getId()}-error`;
+    }
+    connectedCallback() {
         this.mo = new MutationObserver(() => index.forceUpdate(this.hostElement));
         this.mo.observe(this.hostElement, { childList: true, subtree: true });
     }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
+    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.invalid || !!this.error;
+        return this.hasErrorMessage() || this.invalid || this.checkSlottedError();
+    }
+    checkSlottedHelper() {
+        return !!this.hostElement.querySelector('[slot=helpertext]');
+    }
+    checkSlottedError() {
+        return !!this.hostElement.querySelector('[slot=error]');
+    }
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
+    }
+    hideError() {
+        return !this.hasErrorMessage();
+    }
+    getId() {
+        return this.pnId || this.selectId || this.id;
+    }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
     }
-    hasMessage() {
-        return !!this.helpertext || !!this.error;
+    getAriaDescribedby() {
+        const list = [];
+        if (this.hasErrorMessage())
+            list.push(this.idError);
+        else if (this.hasHelperText())
+            list.push(this.idHelper);
+        return list.length ? list.join(' ') : null;
     }
     renderLabel() {
         if (!this.label)
             return null;
-        return (index.h("label", { htmlFor: this.selectId, class: "pn-select-label", "data-compact": this.compact, "data-icon": !!this.icon }, index.h("span", null, this.label)));
+        return (index.h("label", { htmlFor: this.getId(), class: "pn-select-label", "data-compact": this.compact, "data-icon": !!this.icon }, index.h("span", null, this.label)));
     }
     render() {
-        return (index.h(index.Host, { key: '59c8dba79bf97e55cdf0bb63242bab619729e182' }, index.h("div", { key: '08ee599ef117480e98506e6594bb798931dade58', class: "pn-select", "data-error": this.hasError() }, !this.compact && this.renderLabel(), index.h("div", { key: '4416853996ab6849ef128f3abd7d53861e3d6bbe', class: "pn-select-input" }, this.icon && index.h("pn-icon", { key: '8af79d8f23f6e7b9853130ca77d2ac00f264afe7', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (index.h("pn-icon", { key: 'ad674903cc8cefb0864b425a4f6bd6540b5164f3', class: "pn-select-icon", icon: alert_exclamation_circle.alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), index.h("select", { key: 'fc84d7571dc544030770dd8ea88c87e3a1d58bc5', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', "data-compact": this.compact, ref: el => (this.select = el) }, index.h("slot", { key: '1cca39bd8954649b1a558876d31509c3be0f4763' })), this.compact && this.renderLabel(), index.h("pn-icon", { key: 'a5efd954143ce705d806a1a7a1b37b09714d1657', class: "pn-select-icon", icon: chevron_down.chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (index.h("p", { key: '54e7855163fc3c91cb2bdac99aaa7ed9bfd14fc9', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, index.h("span", { key: '21397e124292c51dfe3113b526626059dc9b513d' }, this.error || this.helpertext))))));
+        return (index.h(index.Host, { key: 'dfd4d3814426a88b975bd86948c7ac2207255f4b' }, index.h("div", { key: '5423289d1771840d08ab1de18ab3af4a31cb98f1', class: "pn-select", "data-error": this.hasError() }, !this.compact && this.renderLabel(), index.h("div", { key: '164933a196821353cf7ca31d6d12b65a84da012a', class: "pn-select-input" }, this.icon && index.h("pn-icon", { key: 'da732b9152cba5035039a9761f38471d5885ddb1', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (index.h("pn-icon", { key: '3370ffc0f4f6de399762bf5d854433020830ff2e', class: "pn-select-icon", icon: alert_exclamation_circle.alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), index.h("select", { key: '2a31f44242dd230d68c8d10ed461aeb25f8ec231', id: this.getId(), class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.getAriaDescribedby(), "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-compact": this.compact }, index.h("slot", { key: '8130b7ac6969e2fa0c801e0b10a47e97cf6505bf' })), this.compact && this.renderLabel(), index.h("pn-icon", { key: 'c2167ea78e00914296efd758d044a9ea24e428da', class: "pn-select-icon", icon: chevron_down.chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), index.h("p", { key: '528f5a13255b52009b6b291eff57a164b3650f07', id: this.idHelper, class: "pn-select-text", hidden: this.hideHelpertext() }, index.h("span", { key: '0a802a236cef453ef78783a051b29ccfd0efd997' }, this.helpertext), index.h("slot", { key: 'b23ef510ec48ac499ab6c589d0be1b71517a9496', name: "helpertext" })), index.h("p", { key: '026c3978d58c24193731048373e83510002dd116', id: this.idError, class: "pn-select-text", role: "alert", hidden: this.hideError() }, index.h("span", { key: 'b8724dfc973607a0f4776aa40846c2c86c33c8af' }, this.error), index.h("slot", { key: '90b29ba6d58e629783c4c8264c9aeaf3d84ffce8', name: "error" })))));
     }
+    static get watchers() { return {
+        "selectId": [{
+                "handleId": 0
+            }],
+        "pnId": [{
+                "handleId": 1
+            }]
+    }; }
 };
 PnSelect.style = pnSelectCss();
 

package/umd/modules/@postnord/web-components/cjs/pn-tab.cjs.entry.js

@@ -4,17 +4,17 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var index$1 = require('./index.cjs.js');
 
-const pnTabCss = () => `${index.transformTag("pn-tab")}{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}${index.transformTag("pn-tab")} .pn-tab{position:relative;cursor:pointer;margin:1em 0.25em;padding:0 0.25em;border:none;border-radius:0.5em;color:#2d2013;background-color:transparent;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;display:flex;gap:0.5em;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-tab")} .pn-tab .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${index.transformTag("pn-tab")} .pn-tab{transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-tab")} .pn-tab{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-tab")} .pn-tab{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-tab")} .pn-tab-label{line-height:1.5em}${index.transformTag("pn-tab")} .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}${index.transformTag("pn-tab")} .pn-tab[aria-selected=true],${index.transformTag("pn-tab")} .pn-tab[aria-current=page]{color:#005d92}${index.transformTag("pn-tab")} .pn-tab[aria-selected=true]:focus,${index.transformTag("pn-tab")} .pn-tab[aria-current=page]:focus{color:#0d234b}${index.transformTag("pn-tab")} .pn-tab[aria-selected=true]:focus ${index.transformTag("pn-icon")}>.pn-icon-svg path,${index.transformTag("pn-tab")} .pn-tab[aria-selected=true]:focus ${index.transformTag("pn-icon")}>.pn-icon-svg polygon,${index.transformTag("pn-tab")} .pn-tab[aria-current=page]:focus ${index.transformTag("pn-icon")}>.pn-icon-svg path,${index.transformTag("pn-tab")} .pn-tab[aria-current=page]:focus ${index.transformTag("pn-icon")}>.pn-icon-svg polygon{fill:#0d234b}`;
+const pnTabCss = () => `${index.transformTag("pn-tab")}{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}${index.transformTag("pn-tab")} .pn-tab{position:relative;cursor:pointer;margin:1em 0.25em;padding:0 0.25em;border:none;border-radius:0.5em;color:#2d2013;background-color:transparent;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;display:flex;gap:0.5em;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-tab")} .pn-tab .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${index.transformTag("pn-tab")} .pn-tab{transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-tab")} .pn-tab{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-tab")} .pn-tab{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-tab")} .pn-tab-label{line-height:1.5em}${index.transformTag("pn-tab")} .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}${index.transformTag("pn-tab")} .pn-tab[aria-selected=true],${index.transformTag("pn-tab")} .pn-tab[aria-current=page]{color:#005d92}${index.transformTag("pn-tab")} .pn-tab[aria-selected=true]:focus,${index.transformTag("pn-tab")} .pn-tab[aria-current=page]:focus{color:#0d234b}${index.transformTag("pn-tab")} .pn-tab[aria-selected=true]:focus ${index.transformTag("pn-icon")} .pn-icon-svg path,${index.transformTag("pn-tab")} .pn-tab[aria-selected=true]:focus ${index.transformTag("pn-icon")} .pn-icon-svg polygon,${index.transformTag("pn-tab")} .pn-tab[aria-current=page]:focus ${index.transformTag("pn-icon")} .pn-icon-svg path,${index.transformTag("pn-tab")} .pn-tab[aria-current=page]:focus ${index.transformTag("pn-icon")} .pn-icon-svg polygon{fill:#0d234b}`;
 
 const PnTab = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.setActiveTab = index.createEvent(this, "setActiveTab");
-        this.tabEnter = index.createEvent(this, "tabEnter");
-        this.tabLeave = index.createEvent(this, "tabLeave");
+        this.setActiveTab = index.createEvent(this, "setActiveTab", 7);
+        this.tabEnter = index.createEvent(this, "tabEnter", 7);
+        this.tabLeave = index.createEvent(this, "tabLeave", 7);
     }
     mo;
     tag = 'button';
@@ -74,10 +74,14 @@ const PnTab = class {
     arrowKeyNav(event) {
         if (!/^(ArrowRight|ArrowLeft|Home|End)$/.test(event.key))
             return;
+        const tabName = index.transformTag('pn-tab');
+        const tablistName = index.transformTag('pn-tablist');
         event.preventDefault();
         // Get tablist parent
-        const parent = event.target.closest(`${index.transformTag("pn-tablist")}`);
-        const list = Array.from(parent.querySelectorAll(`${index.transformTag("pn-tab")}`));
+        const parent = event.target.closest(tablistName);
+        if (!parent)
+            return;
+        const list = Array.from(parent.querySelectorAll(tabName));
         const first = list[0];
         const last = list[list.length - 1];
         const nextElement = this.hostElement.nextElementSibling;
@@ -99,8 +103,9 @@ const PnTab = class {
         return this.activeTab === this.value;
     }
     tabTag() {
-        const isMenu = this.hostElement.closest(`${index.transformTag("pn-tablist")}`);
-        this.tag = isMenu.slot === 'menu' ? 'a' : 'button';
+        const tablistName = index.transformTag('pn-tablist');
+        const isMenu = this.hostElement.closest(tablistName);
+        this.tag = isMenu?.slot === 'menu' ? 'a' : 'button';
     }
     renderProperties() {
         return this.tag === 'a'
@@ -125,7 +130,7 @@ const PnTab = class {
     }
     render() {
         const Tag = this.tag;
-        return (index.h(index.Host, { key: 'a3d1810848574a33819d13fa281d85eb08f1ce80' }, index.h(Tag, { key: '08548598375643778185f9ea3900b6b16e079c23', id: this.tabid, class: "pn-tab", ...this.renderProperties(), onClick: (e) => this.handleClick(e), onMouseEnter: (e) => this.triggerEnter(e), onFocus: (e) => this.triggerEnter(e), onMouseLeave: (e) => this.triggerLeave(e), onBlur: (e) => this.triggerLeave(e), onKeyDown: (e) => this.arrowKeyNav(e) }, !!this.icon && index.h("pn-icon", { key: 'ed1076eaf2ea4fc6f56ae86e2947b656808d1c02', icon: this.icon, color: this.iconColor() }), index.h("slot", { key: '48a7a902e8e2712b0595ac88f3b906149703f92c' }), index.h("span", { key: 'cde1646f13a5fe4f553dcfa919268f62286d3f5c', class: "pn-tab-label" }, this.label))));
+        return (index.h(index.Host, { key: '37a1d2234aa0d4fe1f5f1af6f8334f9e4109eff6' }, index.h(Tag, { key: '17e8e25c54b556f65b7c98ac4eaef07f1bc131ac', id: this.tabid, class: "pn-tab", ...this.renderProperties(), onClick: (e) => this.handleClick(e), onMouseEnter: (e) => this.triggerEnter(e), onFocus: (e) => this.triggerEnter(e), onMouseLeave: (e) => this.triggerLeave(e), onBlur: (e) => this.triggerLeave(e), onKeyDown: (e) => this.arrowKeyNav(e) }, !!this.icon && index.h("pn-icon", { key: '42c7473fd8b573ec47e8e2074a4ded3ff3e40249', icon: this.icon, color: this.iconColor() }), index.h("slot", { key: 'c39be583c461850d49f7e5a96c071c80b7b132da' }), index.h("span", { key: 'ce995d860775c71e8fda7dc4e94c2a7896759f62', class: "pn-tab-label" }, this.label))));
     }
 };
 PnTab.style = pnTabCss();