@swisspost/design-system-components 10.0.0-next.47 → 10.0.0-next.48

package/hydrate/index.mjs

@@ -3227,7 +3227,7 @@ var registerHost = (elm, cmpMeta) => {
 };
 var styles = /* @__PURE__ */ new Map();
 
-const version$1 = "10.0.0-next.47";
+const version$1 = "10.0.0-next.48";
 
 const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
 
@@ -3608,7 +3608,7 @@ function debounce(callback, timeout = 200) {
  * @returns true if the event should be processed, false otherwise
  */
 function shouldProcessEvent(event, tag, host, ignoreNestedComponents) {
-    if (!(event instanceof CustomEvent && event.target instanceof HTMLElement))
+    if (!(event instanceof Event && event.target instanceof HTMLElement))
         return false;
     const eventTarget = event.target;
     if (eventTarget.localName !== tag)
@@ -3639,7 +3639,7 @@ function EventFrom(tag, option = { ignoreNestedComponents: true }) {
             };
         }
         else {
-            // Creates a hidden storage property for the original method using a 
+            // Creates a hidden storage property for the original method using a
             // modified key format (__[property]_original) to avoid naming conflicts
             const privateKey = `__${propertyKey}_original`;
             // Create hidden storage for original method
@@ -3881,9 +3881,9 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * @part button - The pseudo-element, used to override styles on the components internal header `button` element.
- * @part body - The pseudo-element, used to override styles on the components internal `body` element.
- * @slot logo - Slot for the placing a logo before the header.
+ * @part button - The element that toggles the accordion item (header button).
+ * @part body - The container element that holds the accordion item's content.
+ * @slot logo - Slot for placing a logo in the accordion item’s header, before the content.
  * @slot header - Slot for placing custom content within the accordion item's header.
  * @slot default - Slot for placing content within the accordion item's body.
  */
@@ -3923,10 +3923,10 @@ class PostAccordionItem {
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (hAsync(Host, { key: 'd7176f314fa0f907bd5b69555a2f25561f3875cf', id: this.id, "data-version": version$1 }, hAsync("div", { key: '978c451798e5bafe38ef57be29818f02ccf49dab', part: "accordion-item", class: "accordion-item" }, hAsync("post-collapsible-trigger", { key: '615da8a2ad5fb3c3fd1e5e0c2c8ee9a260a34263', for: `${this.id}--collapse` }, hAsync(HeadingTag, { key: '9c270ded36f1e1b1b466ba8c4ca529ab26368d5c', class: "accordion-header", id: `${this.id}--header` }, hAsync("button", { key: 'ddf278d1ccf6d78932ae4c6a9617d5852fb73064', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, hAsync("span", { key: '3989145bdbe0a313c6ed10220d2089c89688d613', class: {
+        return (hAsync(Host, { key: 'b98847d19894430b6f65130aebf8673a45afd1e6', id: this.id, "data-version": version$1 }, hAsync("div", { key: 'f26f9d3a4a1f59db23b4698b321e28e112c3eed0', part: "accordion-item", class: "accordion-item" }, hAsync("post-collapsible-trigger", { key: '14bdacce04d67a03655f600feeaeec065e0fc198', for: `${this.id}--collapse` }, hAsync(HeadingTag, { key: '7a07a70d172306ce37f8bd0143b21ed7ec0cab8a', class: "accordion-header", id: `${this.id}--header` }, hAsync("button", { key: '5ad0698a62df5c4b2c0a77ff622090b20f348e9c', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, hAsync("span", { key: '6e5fcb0c9efa8a57e05fd162c72b9c170a8210c6', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, hAsync("slot", { key: 'dd053bf73234db3bac772bf730003b4f2cc030cb', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), hAsync("slot", { key: '9ac06513d55828a9d7a3552aa66c9946fde7c793', name: "header" }), hAsync("post-icon", { key: 'fb46c528581e1a149706fd9e124857cc288747f8', name: "2051" })))), hAsync("post-collapsible", { key: '996887d6a0098a37dbac8d5edb950900f57d15f7', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, hAsync("div", { key: '21fa64a007cf0da4e0c0cf56f5862641d016517a', class: "accordion-body", part: "body" }, hAsync("slot", { key: '2a9f7731183e35c37523e079d437612dbda1a01b' }))))));
+            } }, hAsync("slot", { key: '41a1409f723bf52de893324ce45d4e7f31eb8908', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), hAsync("slot", { key: '7186adfe4a4fe67f4dbaeb7569820d0d06c18428', name: "header" }), hAsync("post-icon", { key: 'fbfcbdc9947a8c7cf80d861aba3a77be0dff91d1', name: "2051" })))), hAsync("post-collapsible", { key: '5de19aab5eb0134b7c3e7f43e5c2da0cb8413908', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, hAsync("div", { key: '5112ba8604ea177af4d88033f682c2a4cc6c4ffd', class: "accordion-body", part: "body" }, hAsync("slot", { key: 'd70ab76842fced3f7dec812471685071e377bc61' }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -3952,13 +3952,14 @@ __decorate$6([
     EventFrom('post-accordion-item')
 ], PostAccordionItem.prototype, "onCollapseToggle", null);
 
-const postAvatarCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-
 // https://docs.gravatar.com/api/avatars/images/
 const GRAVATAR_DEFAULT = '404';
 const GRAVATAR_RATING = 'g';
 const GRAVATAR_SIZE = 80;
 const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
+
+const postAvatarCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var AvatarType;
 (function (AvatarType) {
@@ -3977,6 +3978,8 @@ class PostAvatar {
         this.imageUrl = '';
         this.imageAlt = '';
         this.initials = '';
+        // To handle email or userid updates and reset the storage item
+        this.storageKey = '';
     }
     validateFirstname() {
         checkRequiredAndType(this, 'firstname', 'string');
@@ -3984,47 +3987,67 @@ class PostAvatar {
     validateLastname() {
         checkEmptyOrType(this, 'lastname', 'string');
     }
-    validateUserid() {
+    updateUserid() {
+        this.validateUserId();
+        this.getAvatarImage();
+    }
+    updateEmail() {
+        this.validateEmail();
+        this.getAvatarImage();
+    }
+    validateUserId() {
         checkEmptyOrType(this, 'userid', 'string');
     }
     validateEmail() {
         if (this.email)
             checkEmptyOrPattern(this, 'email', emailPattern);
     }
-    async getAvatar() {
-        if (this.slottedImage !== null) {
-            this.avatarType = AvatarType.Slotted;
-        }
-        else {
-            let imageLoaded = false;
-            if (!imageLoaded && this.userid)
+    async getAvatarImage() {
+        let imageLoaded = false;
+        this.slottedImage = this.host.querySelector('img');
+        const imageUrl = this.slottedImage?.getAttribute('src');
+        if (!imageUrl) {
+            if (this.userid) {
                 imageLoaded = await this.getImageByProp(this.userid, this.fetchImageByUserId.bind(this));
-            if (!imageLoaded && this.email)
+            }
+            if (!imageLoaded && this.email?.match(emailPattern)) {
                 imageLoaded = await this.getImageByProp(this.email, this.fetchImageByEmail.bind(this));
-            if (!imageLoaded)
-                this.getAvatarByInitials();
+            }
+            if (!imageLoaded) {
+                this.getAvatarInitials();
+            }
+        }
+        else {
+            const slottedImageLoaded = await this.getImageByProp(imageUrl, this.fetchSlottedImage.bind(this));
+            if (!slottedImageLoaded) {
+                this.slottedImage.style.display = 'none';
+                this.getAvatarInitials();
+            }
+            else {
+                this.slottedImage.style.display = 'block';
+            }
         }
     }
     async getImageByProp(prop, fetchImage) {
         if (!prop)
             return false;
-        const imageResponse = (await this.getStorageItem(prop)) ?? { ok: false, url: '' };
-        if (!imageResponse.ok) {
-            try {
-                const r = await fetchImage();
-                imageResponse.ok = r.ok;
-                imageResponse.url = r.url;
-                this.imageUrl = imageResponse.url;
-                this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
-                this.avatarType = AvatarType.Image;
-                this.setStorageItem(this.userid, JSON.stringify(imageResponse));
-            }
-            catch (error) {
-                this.removeStorageItem(prop);
-                console.info(`Loading avatar by type "${AvatarType.Image}" failed.`);
-            }
+        let imageResponse;
+        try {
+            imageResponse = await fetchImage(prop);
+        }
+        catch (error) {
+            console.info('Loading avatar image failed.', error);
+            return false;
+        }
+        if (!imageResponse?.ok) {
+            return false;
+        }
+        else {
+            this.imageUrl = imageResponse.url;
+            this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
+            this.avatarType = AvatarType.Image;
+            return true;
         }
-        return imageResponse.ok;
     }
     async fetchImageByUserId() {
         return await fetch(PostAvatar.INTERNAL_USERID_IMAGE_SRC.replace('{userid}', encodeURIComponent(this.userid)));
@@ -4034,7 +4057,10 @@ class PostAvatar {
         const imageUrl = GRAVATAR_BASE_URL.replace('{email}', email);
         return await fetch(imageUrl);
     }
-    getAvatarByInitials() {
+    async fetchSlottedImage(imageUrl) {
+        return await fetch(imageUrl, { method: 'HEAD' });
+    }
+    getAvatarInitials() {
         this.initials = this.getInitials();
         this.avatarType = AvatarType.Initials;
     }
@@ -4047,19 +4073,6 @@ class PostAvatar {
             .join('')
             .trim();
     }
-    async getStorageItem(keyToken) {
-        const key = await this.cryptify(keyToken);
-        const value = window?.sessionStorage?.getItem(key);
-        return value ? JSON.parse(value) : null;
-    }
-    async setStorageItem(keyToken, value) {
-        const key = await this.cryptify(keyToken);
-        window?.sessionStorage?.setItem(key, value);
-    }
-    async removeStorageItem(keyToken) {
-        const key = await this.cryptify(keyToken);
-        window?.sessionStorage?.removeItem(key);
-    }
     async cryptify(key) {
         return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
             return Array.from(new Uint8Array(buffer))
@@ -4067,18 +4080,42 @@ class PostAvatar {
                 .join('');
         });
     }
-    onSlotDefaultChange() {
-        this.slottedImage = this.host.querySelector('img');
-        this.getAvatar();
+    slotChanged() {
+        const slot = this.host.shadowRoot.querySelector('slot');
+        const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+        assignedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.tagName === 'IMG') {
+                    this.observeImageSrcChanges(el);
+                }
+            }
+        });
+        this.getAvatarImage();
     }
-    componentWillRender() {
-        this.slottedImage = this.host.querySelector('img');
-        this.getAvatar();
+    // Observe the Slotted image src attribute and update the image
+    observeImageSrcChanges(img) {
+        if (this.slottedImageObserver) {
+            this.slottedImageObserver.disconnect();
+        }
+        this.slottedImageObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
+                    this.getAvatarImage();
+                }
+            });
+        });
+        this.slottedImageObserver.observe(img, { attributes: true, attributeFilter: ['src'] });
+    }
+    connectedCallback() {
+        //This provides a fallback by showing the initials while the image is still loading or delayed.
+        this.getAvatarInitials();
+        this.getAvatarImage();
     }
     componentDidLoad() {
         this.validateFirstname();
         this.validateLastname();
-        this.validateUserid();
+        this.validateUserId();
         this.validateEmail();
     }
     render() {
@@ -4090,14 +4127,14 @@ class PostAvatar {
             // eslint-disable-next-line @stencil-community/render-returns-host
             return acc;
         }, []);
-        return (hAsync(Host, { "data-version": version$1 }, hAsync("slot", { onSlotchange: this.onSlotDefaultChange.bind(this) }, this.avatarType === 'image' && hAsync("img", { src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && hAsync("div", { class: "initials" }, initials))));
+        return (hAsync(Host, { "data-version": version$1 }, hAsync("span", { class: this.avatarType === 'slotted' ? '' : 'd-none' }, hAsync("slot", { onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && hAsync("img", { src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && hAsync("div", { class: "initials" }, initials)));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "firstname": ["validateFirstname"],
         "lastname": ["validateLastname"],
-        "userid": ["validateUserid"],
-        "email": ["validateEmail"]
+        "userid": ["updateUserid"],
+        "email": ["updateEmail"]
     }; }
     static get style() { return postAvatarCss; }
     static get cmpMeta() { return {
@@ -4112,7 +4149,8 @@ class PostAvatar {
             "avatarType": [32],
             "imageUrl": [32],
             "imageAlt": [32],
-            "initials": [32]
+            "initials": [32],
+            "storageKey": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -4310,7 +4348,7 @@ class PostBanner {
         this.hasActions = this.host.querySelectorAll('[slot="actions"]').length > 0;
     }
     render() {
-        return (hAsync(Host, { key: 'fc9507a57b443c485cf9496be4e04f66c04d7eaf', "data-version": version$1, role: "alert" }, hAsync("slot", { key: '1f59c2d63144990f148a37046d70b2155280abd6', name: "close-button" }), hAsync("slot", { key: '65d0e3c723cb474498d40d26f7f369b7d3abb41e', name: "heading" }), hAsync("slot", { key: '03ff96159a3066a64a7a474d9e6a5450937f8c84' }), this.hasActions && (hAsync("div", { key: '641ad34505cd5141133e5ef788f7e38ab0f977c8', class: "actions" }, hAsync("slot", { key: '242f388c40d71f37a25f2af3fe3eb622a9ab2796', name: "actions" })))));
+        return (hAsync(Host, { key: 'e15185f83fd0da3aa39b2b5272e4326ecd77ee9d', "data-version": version$1, role: "alert" }, hAsync("slot", { key: '328dd1643a38643593ef79b5416b6f4b49e4eeef', name: "close-button" }), hAsync("slot", { key: '37ba09740a254eb559e5035dc2611849c1d01993', name: "heading" }), hAsync("slot", { key: '705fe8a24b3d31cce0637bea745128393aeee121' }), this.hasActions && (hAsync("div", { key: '296f89787a5f497fc835d88931b0784ab9c7ace9', class: "actions" }, hAsync("slot", { key: '7a3c6c574ef61890ebd8d038d491b56e65a22129', name: "actions" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -4325,7 +4363,7 @@ class PostBanner {
             "hasActions": [32],
             "dismiss": [64]
         },
-        "$listeners$": [[0, "postClick", "onCloseButtonClick"]],
+        "$listeners$": [[0, "click", "onCloseButtonClick"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["type", "type"]]
     }; }
@@ -4831,7 +4869,6 @@ const postClosebuttonCss = ".btn-icon-close{padding:0;border:unset;min-height:un
 class PostClosebutton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.postClick = createEvent(this, "postClick");
     }
     componentDidLoad() {
         this.checkHiddenLabel();
@@ -4842,7 +4879,7 @@ class PostClosebutton {
         }
     }
     render() {
-        return (hAsync(Host, { key: '639599ff890ccf96684035e80449a99dcad7de85', "data-version": version$1 }, hAsync("button", { key: '0cc95e3c46a6d91ec3d31fff498b4c0b784de272', class: "btn btn-icon-close", type: "button", onClick: () => this.postClick.emit() }, hAsync("post-icon", { key: 'e30566a7734bb6a64a03f8983da015e7e7ec8c90', "aria-hidden": "true", name: "closex" }), hAsync("span", { key: '549ef38de408b6af78605f5e2f6f5c9aa291c04b', class: "visually-hidden" }, hAsync("slot", { key: '0325e4b54cfa8cfea9ddf243c1c25730d9a4b88f', onSlotchange: () => this.checkHiddenLabel() })))));
+        return (hAsync(Host, { key: 'a8db3ecbefea609234c4c8c29dbf085637592c2c', "data-version": version$1 }, hAsync("button", { key: '58cef7f32f6ec89d46a1ea57b5497089a96aebf3', class: "btn btn-icon-close", type: "button" }, hAsync("post-icon", { key: '023a67437b69bb9966d08b027cc5f10d68baac40', "aria-hidden": "true", name: "closex" }), hAsync("span", { key: 'b1a21810b6179ddd8d66b426a3149966c1972f59', class: "visually-hidden" }, hAsync("slot", { key: '2a2417bedbcb57c75993722d3267342c7df7381d', onSlotchange: () => this.checkHiddenLabel() })))));
     }
     get host() { return getElement(this); }
     static get style() { return postClosebuttonCss; }
@@ -6423,6 +6460,9 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/**
+ * @part menu - The container element that holds the list of menu items.
+*/
 class PostMenu {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -6583,7 +6623,7 @@ class PostMenu {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (hAsync(Host, { key: 'bca8873f7f98b03d3e6952bce4990d1c435bd5ec', "data-version": version$1, role: "menu" }, hAsync("post-popovercontainer", { key: '805c1e528c4af6e35b7881395b2f9de9e430f8c8', placement: this.placement, ref: e => (this.popoverRef = e) }, hAsync("div", { key: 'f534119e208f2bb387f39824736aee766f550fa8', part: "menu" }, hAsync("slot", { key: 'ec9ae42dab9aebd93aafdbebd15d8c39736c84df' })))));
+        return (hAsync(Host, { key: 'ee365a30646247563fccd55556f7667cb1591d02', "data-version": version$1, role: "menu" }, hAsync("post-popovercontainer", { key: 'c649841d408d3f35dfed959cdc6b041163ff80d3', placement: this.placement, ref: e => (this.popoverRef = e) }, hAsync("div", { key: '9f4f145b80c716d27dc51f4bcb0d269b2b2678a8', part: "menu" }, hAsync("slot", { key: '72b53c8f154a4a91541799a789e8618a8d1a9c2c' })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -10058,8 +10098,8 @@ const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;b
 /**
  * @slot tabs - Slot for placing tab headers. Each tab header should be a <post-tab-header> element.
  * @slot default - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
- * @part tabs - Add custom styles for the tab header container.
- * @part content - Add custom styles for the tab panel container.
+ * @part tabs - The container element that holds the set of tabs.
+ * @part content - The container element that displays the content of the currently active tab.
  */
 class PostTabs {
     constructor(hostRef) {
@@ -10200,7 +10240,7 @@ class PostTabs {
         nextTab.focus();
     }
     render() {
-        return (hAsync(Host, { key: '467959e964a6d7f44ac3eee09f9c7d2b501af4fe', "data-version": version$1 }, hAsync("div", { key: '7ce4c0428360124f6937d123a4664d6f22e1110c', class: "tabs-wrapper", part: "tabs" }, hAsync("div", { key: 'c41b073b855cb12a789c8656d12b0f6e9e20ea6f', class: "tabs", role: "tablist" }, hAsync("slot", { key: '37935aa4c4d1ca4e71931e9e50d91e77075d2b64', name: "tabs", onSlotchange: () => this.enableTabs() }))), hAsync("div", { key: 'bb84a728572c00256e219b5dd28322cbab699932', class: "tab-content", part: "content" }, hAsync("slot", { key: 'e2aa9cf6a9faa9f5ded6018def77b9b818b2b986', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (hAsync(Host, { key: 'dc7228c840d65e3546e0d13e5bcaa78819b5aeb9', "data-version": version$1 }, hAsync("div", { key: '377d592f7c00f3ec0c7aba2a4a8ca2b88cd37927', class: "tabs-wrapper", part: "tabs" }, hAsync("div", { key: '6e79f33d6cd82d55ba9fad2f09f6163ce7e0a372', class: "tabs", role: "tablist" }, hAsync("slot", { key: '65fbf3cb6525f2f2ae97eb60dad313811db4c585', name: "tabs", onSlotchange: () => this.enableTabs() }))), hAsync("div", { key: '675a59a27e79bad06ea2b70c4fc7b0a6f4b020ff', class: "tab-content", part: "content" }, hAsync("slot", { key: 'b559af0fa652e352673fbabb6829a62a5630e809', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return getElement(this); }
     static get style() { return postTabsCss; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "10.0.0-next.47",
+  "version": "10.0.0-next.48",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -19,7 +19,6 @@
   },
   "files": [
     "dist/",
-    "loader/",
     "hydrate/"
   ],
   "type": "module",
@@ -34,19 +33,30 @@
     "./post-components.css": "./dist/post-components/post-components.css",
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/post-components/post-components.esm.js",
+      "import": "./dist/esm/post-components.js",
       "require": "./dist/cjs/post-components.cjs.js"
     },
     "./dist/*": {
       "default": "./dist/*"
     },
+    "./loader": {
+      "types": "./dist/loader/index.d.ts",
+      "import": "./dist/loader/index.js",
+      "require": "./dist/loader/index.cjs.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
     "./components/*": {
       "default": "./dist/components/*"
     },
-    "./loader": {
-      "types": "./loader/index.d.ts",
-      "import": "./loader/index.js",
-      "require": "./loader/index.cjs.js"
+    "./react": {
+      "types": "./dist/components/react/index.d.ts",
+      "default": "./dist/components/react/index.js"
+    },
+    "./react/*": {
+      "default": "./dist/components/react/*"
     },
     "./hydrate": {
       "types": "./hydrate/index.d.ts",
@@ -58,8 +68,8 @@
   "dependencies": {
     "@floating-ui/dom": "1.7.3",
     "@oddbird/popover-polyfill": "0.6.0",
-    "@swisspost/design-system-icons": "10.0.0-next.47",
-    "@swisspost/design-system-styles": "10.0.0-next.47",
+    "@swisspost/design-system-icons": "10.0.0-next.48",
+    "@swisspost/design-system-styles": "10.0.0-next.48",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.1.5"

package/dist/components/p-Z01QMrov.js

@@ -1,3 +0,0 @@
-const version = "10.0.0-next.47";
-
-export { version as v };

package/dist/esm/package-Z01QMrov.js

@@ -1,3 +0,0 @@
-const version = "10.0.0-next.47";
-
-export { version as v };

package/dist/post-components/p-7b8ab026.entry.js

@@ -1 +0,0 @@
-import{r as t,h as a,H as s,a as e}from"./p-C8a0ddDa.js";import{v as r}from"./p-Z01QMrov.js";import{n as o}from"./p-BLchVpF6.js";import{c as i}from"./p-BWC0gtGU.js";import"./p-_0G7tavk.js";const n=class{constructor(a){t(this,a)}validateName(){i(this,"name","string")}componentWillLoad(){this.validateName(),this.panelId=`panel-${this.host.id||o(6)}`}render(){return a(s,{key:"609dd2b8bf26e58e92a1dbc827e4479ac416d95b","data-version":r,id:this.panelId,role:"tabpanel"},a("slot",{key:"121538878e0298f1f16f6e20eeb15d5da8a5ba9c"}))}get host(){return e(this)}static get watchers(){return{name:["validateName"]}}};n.style=":host{display:none}";export{n as post_tab_panel}

package/dist/post-components/p-8U5GFtQP.js

@@ -1 +0,0 @@
-function n(n,t,e,i){if(!(n instanceof CustomEvent&&n.target instanceof HTMLElement))return!1;const o=n.target;return o.localName===t&&(!i||function(n,t){let e=n;for(;e;){if(e.localName===t)return e;e=e.parentElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}return null}(o,e.localName)===e)}function t(t,e={ignoreNestedComponents:!0}){return function(i,o,r){if(r){const i=r.value;r.value=function(o){if(n(o,t,this.host,e.ignoreNestedComponents))return i.call(this,o)}}else{const r=`__${o}_original`;Object.defineProperty(i,r,{writable:!0,configurable:!0}),Object.defineProperty(i,o,{get(){return this[r]},set(i){this[r]="function"==typeof i?o=>{if(n(o,t,this.host,e.ignoreNestedComponents))return i.call(this,o)}:i},configurable:!0,enumerable:!0})}}}export{t as E}

package/dist/post-components/p-Z01QMrov.js

@@ -1 +0,0 @@
-const t="10.0.0-next.47";export{t as v}