@swisspost/design-system-components 9.0.0-next.13 → 9.0.0-next.14

package/loaders/post-megadropdown-trigger.js

@@ -1,18 +1,24 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkType } from './check-type.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { c as checkType } from './p-8562c7dc.js';
 
-const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%}";
+const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}";
 const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
 
-const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdownTrigger extends HTMLElement {
+const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdownTrigger extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.for = undefined;
-        this.ariaExpanded = false;
     }
+    /**
+     * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
+     */
+    for;
     get host() { return this; }
+    /**
+     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
+     */
+    ariaExpanded = false;
     /**
      * Reference to the slotted button within the trigger, if present.
      * Used to manage click and key events for mega dropdown control.
@@ -33,7 +39,7 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
     }
     handleToggle() {
         if (this.megadropdown) {
-            this.megadropdown.toggle(this.host);
+            this.megadropdown.toggle();
         }
         else {
             console.warn(`No post-megadropdown found with ID: ${this.for}`);
@@ -62,7 +68,7 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
         }
     }
     render() {
-        return (h(Host, { key: 'ba9b6922d4f4eac596f7d1310a5a1bf534b156d8', "data-version": version, "tab-index": "-1" }, h("button", { key: '5fe4ea7f385897606f472ea72be84399e76550e2' }, h("slot", { key: '333f583f0db191599c4be9be9647789b2ea1ecaf' }))));
+        return (h(Host, { key: '2e009cb0dbfd81785d3a8ce5802a4fab0e84a52e', "data-version": version, "tab-index": "-1" }, h("button", { key: 'd77d9a5eb5786a63cf7453c639647adc705892bc' }, h("slot", { key: '19f4b17dc2d073b0770c33d6acfb763c1e47735a' }))));
     }
     static get watchers() { return {
         "for": ["validateControlFor"]

package/loaders/post-megadropdown.js

@@ -1,110 +1,167 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3e8554e7.js';
+import { g as getFocusableChildren } from './p-3aba7629.js';
 
-const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}*,::before,::after{box-sizing:border-box}post-popovercontainer{background-color:#fafafa;border:none;border-top:1px solid #e1e0dc;width:100%;border-radius:0;box-shadow:0 8px 6px rgba(0,0,0,.16)}@media screen and (max-width: 1023.99px){post-popovercontainer{position:absolute;top:var(--header-height) !important;bottom:0;left:0;width:100%;height:auto;border-top:unset}post-popovercontainer.slide-in{animation:slide-in;animation-duration:350ms;animation-fill-mode:forwards}post-popovercontainer.slide-out{animation:slide-out;animation-duration:350ms;animation-fill-mode:forwards}}.megadropdown{padding:31px 40px 40px}@media screen and (max-width: 1023.99px){.megadropdown{padding:16px 32px 24px}}@media screen and (max-width: 599.99px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.99px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.99px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.99px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)){padding:15px 12px 14px 8px;border-bottom:1px solid #050400}.megadropdown post-list .list-title h3 a{padding-block:15px 14px;padding-inline-start:8px;border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;height:var(--post-core-dimension-48);padding-inline-end:calc(var(--post-core-dimension-6) + var(--post-core-dimension-24) + var(--post-core-dimension-16));gap:var(--post-core-dimension-16);font-weight:var(--post-core-font-weight-400);position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:currentColor;bottom:0;width:100%;height:var(--post-core-dimension-1);position:absolute;left:0}.megadropdown post-list .list-title h3 a:hover::before{height:var(--post-core-dimension-3)}.megadropdown post-list .list-title h3 a:hover::after{content:\"\";display:block;margin-right:calc((var(--post-core-dimension-24) + var(--post-core-dimension-16))*-1);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m31.95 16-9.11 9.11c-.2.2-.45.29-.71.29s-.51-.1-.71-.29a.996.996 0 0 1 0-1.41l6.69-6.69H-.05v-2h28.17l-6.69-6.69a.996.996 0 1 1 1.41-1.41l9.11 9.11Z'%3E%3C/path%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-20);min-width:var(--post-core-dimension-20);height:var(--post-core-dimension-20)}@media screen and (max-width: 1023.99px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)){padding:15px 12px 14px 8px;border-bottom:1px solid #050400}}@media screen and (max-width: 599.99px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;height:auto;min-height:48px}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.99px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.99px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-bottom:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.99px){.megadropdown .back-button{display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.99px){.megadropdown .close-button{display:none}}";
+const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{--post-main-header-height:56px;--post-global-header-height:72px;--post-header-height:calc(var(--post-global-header-height) + var(--post-main-header-height));box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;border-top:1px solid #e1e0dc;width:100%;top:100%;left:0;border-radius:0}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{--post-global-header-height:64px;z-index:4;top:0 !important;left:0;width:100%;position:fixed;height:calc(100vh - var(--post-header-height));max-height:calc(100vh - var(--header-height));border-top:unset;overflow:auto}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)){padding:15px 12px 14px 8px;border-bottom:1px solid #050400}.megadropdown post-list .list-title h3 a{padding-block:15px 14px;padding-inline-start:8px;border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:var(--post-core-dimension-48);padding-inline-end:calc(var(--post-core-dimension-6) + var(--post-core-dimension-24) + var(--post-core-dimension-16));gap:var(--post-core-dimension-16);font-weight:var(--post-core-font-weight-400);position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:currentColor;bottom:0;width:100%;height:var(--post-core-dimension-1);position:absolute;left:0}.megadropdown post-list .list-title h3 a:hover::before{height:var(--post-core-dimension-3)}.megadropdown post-list .list-title h3 a:hover::after{content:\"\";display:block;margin-right:calc((var(--post-core-dimension-24) + var(--post-core-dimension-16))*-1);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m31.95 16-9.11 9.11c-.2.2-.45.29-.71.29s-.51-.1-.71-.29a.996.996 0 0 1 0-1.41l6.69-6.69H-.05v-2h28.17l-6.69-6.69a.996.996 0 1 1 1.41-1.41l9.11 9.11Z'%3E%3C/path%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-20);min-width:var(--post-core-dimension-20);height:var(--post-core-dimension-20)}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)){padding:15px 12px 14px 8px;border-bottom:1px solid #050400}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-bottom:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
 const PostMegadropdownStyle0 = postMegadropdownCss;
 
-const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends HTMLElement {
+const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends H {
     constructor() {
         super();
         this.__registerHost();
         this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
-        this.isVisible = false;
-        this.animationClass = null;
     }
-    popoverRef;
+    header;
+    firstFocusableEl;
+    lastFocusableEl;
+    device;
     get host() { return this; }
+    /** Tracks the currently active dropdown instance. */
+    static activeDropdown = null;
+    /**
+     * Holds the current visibility state of the dropdown.
+     * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
+     * and updates automatically when the dropdown is toggled.
+     */
+    isVisible = false;
+    /** Holds the current animation class. */
+    animationClass = null;
     /**
      * Emits when the dropdown is shown or hidden.
      * The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
      **/
     postToggleMegadropdown;
-    componentDidLoad() {
-        this.popoverRef.addEventListener('postToggle', (event) => {
-            this.isVisible = event.detail;
-            this.postToggleMegadropdown.emit(this.isVisible);
-        });
-        this.popoverRef.addEventListener('animationend', () => {
-            if (this.animationClass === 'slide-out') {
-                this.hide();
-            }
-        });
+    disconnectedCallback() {
+        this.removeOutsideClickListener();
+        if (PostMegadropdown.activeDropdown === this) {
+            PostMegadropdown.activeDropdown = null;
+        }
+    }
+    componentWillRender() {
+        this.getFocusableElements();
     }
     /**
      * Toggles the dropdown visibility based on its current state.
      */
-    async toggle(target) {
+    async toggle() {
         if (this.isVisible) {
             this.hide();
         }
         else {
-            await this.show(target);
+            await this.show();
         }
     }
     /**
-     * Displays the popover dropdown
-     *
-     * @param target - The HTML element relative to which the popover dropdown should be displayed.
+     * Displays the dropdown.
      */
-    async show(target) {
-        if (this.popoverRef) {
-            await this.popoverRef.show(target);
-            this.animationClass = 'slide-in';
+    async show() {
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
         }
-        else {
-            console.error('show: popoverRef is null or undefined');
+        this.isVisible = true;
+        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
+        this.animationClass = 'slide-in';
+        PostMegadropdown.activeDropdown = this;
+        this.postToggleMegadropdown.emit(this.isVisible);
+        this.addOutsideClickListener();
+    }
+    /**
+     * Hides the dropdown with an animation.
+     */
+    async hide() {
+        this.animationClass = 'slide-out';
+        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
+    }
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+        if (this.header) {
+            this.header.addEventListener('postUpdateDevice', (event) => (this.device = event.detail));
         }
     }
     /**
-     * Hides the popover dropdown
+     * Forces the dropdown to close without animation.
      */
-    hide() {
-        if (this.popoverRef) {
-            this.popoverRef.hide();
+    forceClose() {
+        this.isVisible = false;
+        this.animationClass = null;
+        this.postToggleMegadropdown.emit(this.isVisible);
+        this.removeOutsideClickListener();
+    }
+    handleAnimationEnd() {
+        if (this.animationClass === 'slide-out') {
+            this.isVisible = false;
+            this.animationClass = null;
+            this.postToggleMegadropdown.emit(this.isVisible);
+            this.removeOutsideClickListener();
         }
-        else {
-            console.error('hide: popoverRef is null or undefined');
+    }
+    handleClickOutside = (event) => {
+        const target = event.target;
+        if (this.host.contains(target)) {
+            return;
+        }
+        if (target instanceof H) {
+            const trigger = target.closest('post-megadropdown-trigger');
+            if (trigger) {
+                const targetDropdownId = trigger.getAttribute('for');
+                if (targetDropdownId !== this.host.id) {
+                    return;
+                }
+            }
         }
+        this.hide();
+    };
+    addOutsideClickListener() {
+        document.addEventListener('mousedown', this.handleClickOutside);
     }
-    handleBackButtonClick() {
-        this.animationClass = 'slide-out';
+    removeOutsideClickListener() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
     }
-    handleCloseButtonClick() {
-        this.popoverRef.hide();
+    getFocusableElements() {
+        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
+        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
     }
-    handleFocusout(event) {
-        const relatedTarget = event.relatedTarget;
-        const megadropdown = this.popoverRef.querySelector('.megadropdown');
-        if (!megadropdown.contains(relatedTarget)) {
-            this.hide();
+    // Loop through the focusable children
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.device !== 'desktop') {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
         }
     }
     render() {
-        return (h(Host, { key: 'b6a687738e91a7eaac3dcd909952985798d2140b' }, h("post-popovercontainer", { key: '74a0361d028eea3ddab6d54c5ab0da8d40b0b84f', class: this.animationClass, placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '4aece57642f113594530c4247cd428de4efe1762', class: "megadropdown", onFocusout: e => this.handleFocusout(e) }, h("div", { key: '298ee3b65149cafcd258ebf124d8e3e937019605', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '5d9f50fb2b7b7659f48969888df0a3b773556aed', name: "back-button" })), h("div", { key: 'cd1870f410464d52d2f242751fb917f377ab1b06', onClick: () => this.handleCloseButtonClick(), class: "close-button" }, h("slot", { key: '6016c5b95668fa764c645c62e9170a803b7a129e', name: "close-button" })), h("slot", { key: '0ed98dc5c769edabfcebb6198aa454f3ac57c436', name: "megadropdown-title" }), h("div", { key: 'd7b6cbcfd6471f8009f940c298ef5bbc993cbe13', class: "megadropdown-content" }, h("slot", { key: 'cb1df5a62550afe3a35a50b28d221af8b28e5d96' }))))));
+        const containerStyle = this.isVisible ? {} : { display: 'none' };
+        return (h(Host, { key: '5aa08b01be715325182c245e1b0ae2456bcc5df6' }, h("div", { key: '0737c9368ecbffac59bbdf47fabac3f3b94ae7bb', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'efe49f3f9cdcd99e2feca78b772c944405e19f21', class: "megadropdown" }, h("div", { key: '14dd7ff2f7e7b1eb91f2673a25d7ccafffe4f9d0', onClick: () => this.hide(), class: "back-button" }, h("slot", { key: '554e30e6408c0bef0549f5e2c31dcd8b90ceee40', name: "back-button" })), h("div", { key: '4e7335152d7b6649918adf075213ebbf8b8ddeaa', onClick: () => this.hide(), class: "close-button" }, h("slot", { key: 'db90f3a5334ce723c0ee672a96167197ca25b545', name: "close-button" })), h("slot", { key: 'b11b1d16147f88103f2eb24c8dd21394de53f69c', name: "megadropdown-title" }), h("div", { key: '6d837c1a70f66f00097fb531058750fbac6fd41a', class: "megadropdown-content" }, h("slot", { key: 'be685185f04e44d867167f918494d086856b5928' }))))));
     }
     static get style() { return PostMegadropdownStyle0; }
 }, [4, "post-megadropdown", {
+        "device": [32],
         "isVisible": [32],
         "animationClass": [32],
         "toggle": [64],
-        "show": [64]
+        "show": [64],
+        "hide": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["post-megadropdown", "post-popovercontainer"];
+    const components = ["post-megadropdown"];
     components.forEach(tagName => { switch (tagName) {
         case "post-megadropdown":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PostMegadropdown$1);
             }
             break;
-        case "post-popovercontainer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 

package/loaders/post-menu-item.js

@@ -1,4 +1,4 @@
-import { P as PostMenuItem$1, d as defineCustomElement$1 } from './post-menu-item2.js';
+import { P as PostMenuItem$1, d as defineCustomElement$1 } from './p-ccccf0c3.js';
 
 const PostMenuItem = PostMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

package/loaders/post-menu-trigger.js

@@ -1,4 +1,4 @@
-import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './post-menu-trigger2.js';
+import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './p-8b053fd5.js';
 
 const PostMenuTrigger = PostMenuTrigger$1;
 const defineCustomElement = defineCustomElement$1;

package/loaders/post-menu.js

@@ -1,4 +1,4 @@
-import { P as PostMenu$1, d as defineCustomElement$1 } from './post-menu2.js';
+import { P as PostMenu$1, d as defineCustomElement$1 } from './p-91882483.js';
 
 const PostMenu = PostMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/loaders/post-popover.js

@@ -1,7 +1,7 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { g as getAttributeObserver } from './attribute-observer.js';
-import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { g as getAttributeObserver } from './p-9748a355.js';
+import { d as defineCustomElement$2 } from './p-60cf53cc.js';
 
 const postPopoverCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:#999}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px;max-width:100%}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}";
 const PostPopoverStyle0 = postPopoverCss;
@@ -26,17 +26,29 @@ const triggerObserver = getAttributeObserver(popoverTargetAttribute, trigger =>
     const force = trigger.hasAttribute(popoverTargetAttribute);
     trigger.setAttribute('aria-expanded', force ? 'false' : null);
 });
-const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends HTMLElement {
+const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H {
     popoverRef;
     localBeforeToggleHandler;
     get host() { return this; }
+    /**
+     * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Popoverss are automatically flipped to the opposite side if there is not enough available space and are shifted
+     * towards the viewport if they would overlap edge boundaries.
+     */
+    placement = 'top';
+    /**
+     * Define the caption of the close button for assistive technology
+     */
+    closeButtonCaption;
+    /**
+     * Show a little indicator arrow
+     */
+    // eslint-disable-next-line @stencil-community/ban-default-true
+    arrow = true;
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.placement = 'top';
-        this.closeButtonCaption = undefined;
-        this.arrow = true;
         this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
     }
     connectedCallback() {
@@ -99,7 +111,7 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (h(Host, { key: 'c2f53a7ac9d6bbcca8c220d9b8a5ed0dda360cf9', "data-version": version }, h("post-popovercontainer", { key: 'fa5a32cfd4263fcabed5405f2b6bb2ab0ca93c9a', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '4799da001d006a47d93be1393618744a0b393841', class: "popover-container" }, h("div", { key: '7a28ea59e07591c8b835dd10157bc5e9b85793c6', class: "popover-content" }, h("slot", { key: '1ba6533577817d1fc2b7762654b5639596b16422' })), h("button", { key: 'f1446964325e49b79bc0fe26a05bb4f12a140c61', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'dd056bb988df548e8cae61ba226c1d9e124bc32b', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: 'a7976e6c960015ed9b318c75fc8a74afc2337661', "data-version": version }, h("post-popovercontainer", { key: '1b71f4bce3a6866e19c3900c0e82f814508f8144', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'b15e45e7fd31edc36fa4c912332984daf0ce9cbc', class: "popover-container" }, h("div", { key: 'adc170a2738c7f88c60e8885d8ee84f10fa1d546', class: "popover-content" }, h("slot", { key: '235dbd1a184353de8d8da038c8c31e3dd7f6dab7' })), h("button", { key: '679fccf088d5589b548ec2186facc6c767aace93', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'e8f61719cc6e9b6ddf85756005f17b9103406055', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     static get style() { return PostPopoverStyle0; }
 }, [1, "post-popover", {

package/loaders/post-popovercontainer.js

@@ -1,4 +1,4 @@
-import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './post-popovercontainer2.js';
+import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './p-60cf53cc.js';
 
 const PostPopovercontainer = PostPopovercontainer$1;
 const defineCustomElement = defineCustomElement$1;

package/loaders/post-rating.js

@@ -1,13 +1,31 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { d as defineCustomElement$2 } from './post-icon2.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { d as defineCustomElement$2 } from './p-f7177e26.js';
 
 const postRatingCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
 const PostRatingStyle0 = postRatingCss;
 
-const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends HTMLElement {
+const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H {
     hasChanged = false;
     get host() { return this; }
+    hoveredIndex;
+    /**
+     * Defines a hidden label for the component.
+     */
+    label = 'Rating';
+    /**
+     * Defines the total amount of stars rendered in the component.
+     */
+    stars = 5;
+    /**
+     * Defines the rating that the component should show.
+     */
+    currentRating = 0;
+    /**
+     * Defines if the component is readonly or not.
+     * This usually should be used together with the `currentRating` property.
+     */
+    readonly = false;
     /**
      * An event emitted whenever the component's value has changed (on input).
      * The event payload can be used like so: `event.detail.value`.
@@ -24,11 +42,6 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         this.__attachShadow();
         this.postInput = createEvent(this, "postInput", 7);
         this.postChange = createEvent(this, "postChange", 7);
-        this.hoveredIndex = undefined;
-        this.label = 'Rating';
-        this.stars = 5;
-        this.currentRating = 0;
-        this.readonly = false;
         this.keydownHandler = this.keydownHandler.bind(this);
         this.blurHandler = this.blurHandler.bind(this);
         this.hoverHandler = this.hoverHandler.bind(this);
@@ -85,7 +98,7 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         }
     }
     render() {
-        return (h(Host, { key: 'bb4ab7c2ae609e8e288c62516be93f0b96926eff', "data-version": version }, h("div", { key: '0176474611f998938aef0b267c118478d6623fbc', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: '64891ff9f0ef8f7bc2be5df9e989577830b35ffc', "data-version": version }, h("div", { key: 'b4e7050864265e33e08b88fc3d5c8eea3cf6ab0e', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

package/loaders/post-tab-header.js

@@ -1,20 +1,23 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
-import { n as nanoid } from './index.browser.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { c as checkNonEmpty } from './p-b095519d.js';
+import { n as nanoid } from './p-5959f2bd.js';
 
 const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:#000}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}";
 const PostTabHeaderStyle0 = postTabHeaderCss;
 
-const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
+const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.tabId = undefined;
-        this.panel = undefined;
     }
     get host() { return this; }
+    tabId;
+    /**
+     * The name of the panel controlled by the tab header.
+     */
+    panel;
     validateFor(newValue) {
         checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
     }
@@ -22,7 +25,7 @@ const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader ext
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '9b12878498f63da83113c081f81a749b4ee47ef4', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '3a2e7f3657110d707b49af911e9dd3a4ef323e36' })));
+        return (h(Host, { key: 'f7383136476f3d32a79c39f7cadef8bcde0630f7', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: 'b88f3ce360da891793e31b84c4bfd4f59511d88a' })));
     }
     static get watchers() { return {
         "panel": ["validateFor"]

package/loaders/post-tab-panel.js

@@ -1,25 +1,28 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { n as nanoid } from './index.browser.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { n as nanoid } from './p-5959f2bd.js';
 
 const postTabPanelCss = ":host{display:none}";
 const PostTabPanelStyle0 = postTabPanelCss;
 
-const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends HTMLElement {
+const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.panelId = undefined;
-        this.name = undefined;
     }
     get host() { return this; }
+    panelId;
+    /**
+     * The name of the panel, used to associate it with a tab header.
+     */
+    name;
     componentWillLoad() {
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '9e8f9c5dc0c1c3d1b7e63cbb9e9cbb0cf116da9b', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '3ece42346845324cfa0fb9af5721efab2b71e2f1' })));
+        return (h(Host, { key: '9d35c9ceec54f1c2983600342e5e63a49ca93aef', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '8db185ca7a2030343df512962126a91f64840a64' })));
     }
     static get style() { return PostTabPanelStyle0; }
 }, [1, "post-tab-panel", {

package/loaders/post-tabs.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { f as fadeOut, a as fadeIn } from './fade.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { f as fadeOut, a as fadeIn } from './p-64e3de38.js';
 
 /**
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
@@ -26,13 +26,12 @@ function customOnReady(callback) {
 const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}";
 const PostTabsStyle0 = postTabsCss;
 
-const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
+const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.postChange = createEvent(this, "postChange", 7);
-        this.activePanel = undefined;
     }
     activeTab;
     showing;
@@ -42,6 +41,13 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
     get host() { return this; }
+    /**
+     * The name of the panel that is initially shown.
+     * If not specified, it defaults to the panel associated with the first tab.
+     *
+     * **Changing this value after initialization has no effect.**
+     */
+    activePanel;
     /**
      * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
      * The payload is the name of the newly shown panel.
@@ -172,7 +178,7 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '697174a68f4eedabd9170bcad93e60539f0dc778', "data-version": version }, h("div", { key: 'ae39c8fd62edd28113dea0f013ffdd3a76bea739', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'a638044b8b6ab2d3c2d6e6b59a2e9a02fd137e0d', class: "tabs", role: "tablist" }, h("slot", { key: '2ea6eb60f7d1edcc59eea994cc2fde91c900c286', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '6900fd1914df01fbe5901378611ed0a359bc13f6', class: "tab-content", part: "content" }, h("slot", { key: '464bb9fa7450ddd22517a0e41f692876d6e8bf5b', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '7c81cd091603a01d960ecc2aed9653d0031dd16e', "data-version": version }, h("div", { key: '716a9f1e05a7ffeca8459e6a88ce4b56364b50ec', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'b41b35b26e0e1ef1e285719975841aefbdc4a8e1', class: "tabs", role: "tablist" }, h("slot", { key: '065b3a6ecfba2710a344b44cc6d5e73beb0655df', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'f30ce2c568071c8f144ba50e62b48a1294207c63', class: "tab-content", part: "content" }, h("slot", { key: 'c71155abdf95343990b2ee85592e7a995f58d05e', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     static get style() { return PostTabsStyle0; }
 }, [1, "post-tabs", {

package/loaders/post-tag.js

@@ -1,20 +1,31 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { d as defineCustomElement$2 } from './post-icon2.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { d as defineCustomElement$2 } from './p-f7177e26.js';
 
 const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
 const PostTagStyle0 = postTagCss;
 
-const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLElement {
+const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends H {
     get host() { return this; }
+    classes;
+    /**
+     * Defines the color variant of the component.
+     */
+    variant;
+    /**
+     * Defines the size of the component.
+     */
+    size = null;
+    /**
+     * Defines the icon `name` inside of the component.
+     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+     * To learn which icons are available, please visit our <a href="/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs">icon library</a>.
+     */
+    icon = null;
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.classes = undefined;
-        this.variant = undefined;
-        this.size = null;
-        this.icon = null;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {
@@ -36,7 +47,7 @@ const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEle
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: 'cda93c397ec81e289c843eaae7694bbba6f3c297', "data-version": version }, h("div", { key: '7fa71d9c0ca5393bc188e5e09107ec931943ed66', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '8d36933c00910e9f36759d101f43b628c0fbf185', class: "tag-text" }, h("slot", { key: '49e2e9dd66cb85df4615c512d8dc0d7cad6606b8' })))));
+        return (h(Host, { key: 'fd03781bfdcfaa3776677f8d95e8b1a74de24c1e', "data-version": version }, h("div", { key: '0a22b98ea9c75d4a09680e2abe980bd0e4935172', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: 'ddda0c15ce644e311b8061283d83619667264ec4', class: "tag-text" }, h("slot", { key: '30fb04c5e80f46e7cb560f9489791d8bcd7b45b0' })))));
     }
     static get watchers() { return {
         "variant": ["variantChanged"],