@swisspost/design-system-components 9.0.0-next.4 → 9.0.0-next.5

package/dist/cjs/post-menu-54fa65d3.js

@@ -0,0 +1,176 @@
+'use strict';
+
+const index = require('./index-e1f32cce.js');
+const _package = require('./package-53892d3d.js');
+
+const focusableSelector = `:where(${[
+    'button',
+    'input:not([type="hidden"])',
+    '[tabindex]',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    'a[href]',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    'area[href]',
+    'details > summary:first-of-type',
+].join(',')})`;
+const focusDisablingSelector = `:where(${[
+    '[inert]',
+    '[inert] *',
+    ':disabled',
+    'dialog:not([open]) *',
+    '[popover]:not(:popover-open) *',
+    'details:not([open]) > *:not(details > summary:first-of-type)',
+    'details:not([open]) > *:not(details > summary:first-of-type) *',
+].join(',')})`;
+const isFocusable = (element) => {
+    return (element === null || element === void 0 ? void 0 : element.matches(focusableSelector)) && !(element === null || element === void 0 ? void 0 : element.matches(focusDisablingSelector));
+};
+
+const postMenuCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}";
+const PostMenuStyle0 = postMenuCss;
+
+const PostMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggleMenu = index.createEvent(this, "toggleMenu", 7);
+        this.lastFocusedElement = null;
+        this.KEYCODES = {
+            SPACE: ' ',
+            ENTER: 'Enter',
+            UP: 'ArrowUp',
+            DOWN: 'ArrowDown',
+            TAB: 'Tab',
+            HOME: 'Home',
+            END: 'End',
+            ESCAPE: 'Escape'
+        };
+        this.handleKeyDown = (e) => {
+            e.stopPropagation();
+            if (e.key === this.KEYCODES.ESCAPE) {
+                this.toggle(this.host);
+                return;
+            }
+            if (Object.values(this.KEYCODES).includes(e.key)) {
+                this.controlKeyDownHandler(e);
+            }
+        };
+        this.handleClick = (e) => {
+            const target = e.target;
+            if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+                this.toggle(this.host);
+            }
+        };
+        this.placement = 'bottom';
+        this.isVisible = false;
+    }
+    connectedCallback() {
+        this.host.addEventListener('keydown', this.handleKeyDown);
+        this.host.addEventListener('click', this.handleClick);
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('keydown', this.handleKeyDown);
+        this.host.removeEventListener('click', this.handleClick);
+    }
+    componentDidLoad() {
+        this.popoverRef.addEventListener('postToggle', (event) => {
+            this.isVisible = event.detail;
+            this.toggleMenu.emit(this.isVisible);
+        });
+    }
+    /**
+     * Toggles the menu visibility based on its current state.
+     */
+    async toggle(target) {
+        this.isVisible ? await this.hide() : await this.show(target);
+    }
+    /**
+     * Displays the popover menu, focusing the first menu item.
+     *
+     * @param target - The HTML element relative to which the popover menu should be displayed.
+     */
+    async show(target) {
+        if (this.popoverRef) {
+            await this.popoverRef.show(target);
+            this.lastFocusedElement = document.activeElement;
+            const menuItems = this.getSlottedItems();
+            if (menuItems.length > 0) {
+                menuItems[0].focus();
+            }
+        }
+        else {
+            console.error('show: popoverRef is null or undefined');
+        }
+    }
+    /**
+     * Hides the popover menu and restores focus to the previously focused element.
+     */
+    async hide() {
+        if (this.popoverRef) {
+            await this.popoverRef.hide();
+            if (this.lastFocusedElement) {
+                this.lastFocusedElement.focus();
+            }
+        }
+        else {
+            console.error('hide: popoverRef is null or undefined');
+        }
+    }
+    controlKeyDownHandler(e) {
+        const menuItems = this.getSlottedItems();
+        if (!menuItems.length) {
+            return;
+        }
+        const currentFocusedElement = document.activeElement;
+        let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
+        switch (e.key) {
+            case this.KEYCODES.UP:
+                e.preventDefault();
+                currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
+                break;
+            case this.KEYCODES.DOWN:
+                e.preventDefault();
+                currentIndex = (currentIndex + 1) % menuItems.length;
+                break;
+            case this.KEYCODES.HOME:
+                currentIndex = 0;
+                break;
+            case this.KEYCODES.END:
+                currentIndex = menuItems.length - 1;
+                break;
+            case this.KEYCODES.SPACE:
+            case this.KEYCODES.ENTER:
+                this.toggle(this.host);
+                return;
+            case this.KEYCODES.TAB:
+                this.toggle(this.host);
+                break;
+        }
+        if (menuItems[currentIndex]) {
+            menuItems[currentIndex].focus();
+        }
+    }
+    getSlottedItems() {
+        const slot = this.host.shadowRoot.querySelector('slot');
+        const slottedElements = slot ? slot.assignedElements() : [];
+        const menuItems = slottedElements
+            .filter(el => el.tagName === 'POST-MENU-ITEM')
+            .map(el => {
+            const slot = el.shadowRoot.querySelector('slot');
+            const assignedElements = slot ? slot.assignedElements() : [];
+            return assignedElements.filter(isFocusable);
+        })
+            .flat();
+        return menuItems;
+    }
+    render() {
+        return (index.h(index.Host, { key: '4447ff6878a1b0f38b533196466b33217f9499d4', "data-version": _package.version }, index.h("post-popovercontainer", { key: '918e2b8a662cdb64972cb0729b8b077e1bca5e0a', placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '40b04b6c0d65cc3c10f6b8b037ec3ff24d1b907b', class: "popover-container" }, index.h("slot", { key: 'e836fdb9e29961f3b6c6c13261e8eef0f874cfb6' })))));
+    }
+    get host() { return index.getElement(this); }
+};
+PostMenu.style = PostMenuStyle0;
+
+exports.PostMenu = PostMenu;

package/dist/cjs/post-menu-item-8c3090b1.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const index = require('./index-e1f32cce.js');
+const _package = require('./package-53892d3d.js');
+
+const postMenuItemCss = ":host{display:block}";
+const PostMenuItemStyle0 = postMenuItemCss;
+
+const PostMenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '7984d6be0ae981f54618b4c0d7a80bfcc71f16a3', role: "menuitem", "data-version": _package.version }, index.h("slot", { key: '7fbb20f1586676b1c8f933e0f067144bbcca825f' })));
+    }
+    get host() { return index.getElement(this); }
+};
+PostMenuItem.style = PostMenuItemStyle0;
+
+exports.PostMenuItem = PostMenuItem;

package/dist/cjs/post-menu-item.cjs.entry.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const postMenuItem = require('./post-menu-item-8c3090b1.js');
+require('./index-e1f32cce.js');
+require('./package-53892d3d.js');
+
+
+
+exports.post_menu_item = postMenuItem.PostMenuItem;

package/dist/cjs/post-menu-trigger-71449876.js

@@ -0,0 +1,73 @@
+'use strict';
+
+const index = require('./index-e1f32cce.js');
+const _package = require('./package-53892d3d.js');
+const checkType = require('./check-type-64af82a9.js');
+
+const postMenuTriggerCss = ":host{display:inline-block}";
+const PostMenuTriggerStyle0 = postMenuTriggerCss;
+
+const PostMenuTrigger = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Reference to the slotted button within the trigger, if present.
+         * Used to manage click and key events for menu control.
+         */
+        this.slottedButton = null;
+        this.handleKeyDown = (e) => {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.handleToggle();
+            }
+        };
+        this.for = undefined;
+        this.ariaExpanded = false;
+    }
+    /**
+     * Watch for changes to the `for` property to validate its type and ensure it is a string.
+     * @param forValue - The new value of the `for` property.
+     */
+    validateControlFor(forValue = this.for) {
+        checkType.checkType(forValue, 'string', 'The "for" property is required and should be a string.');
+    }
+    get menu() {
+        const ref = document.getElementById(this.for);
+        return ref && ref.localName === 'post-menu' ? ref : null;
+    }
+    handleToggle() {
+        const menu = this.menu;
+        if (menu && this.slottedButton) {
+            this.ariaExpanded = !this.ariaExpanded;
+            this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+            menu.toggle(this.host);
+        }
+        else {
+            console.warn(`No post-menu found with ID: ${this.for}`);
+        }
+    }
+    componentDidLoad() {
+        this.validateControlFor();
+        this.slottedButton = this.host.querySelector('button');
+        if (this.slottedButton) {
+            this.slottedButton.setAttribute('aria-haspopup', 'menu');
+            this.slottedButton.addEventListener('click', () => {
+                this.handleToggle();
+            });
+            this.slottedButton.addEventListener('keydown', this.handleKeyDown);
+        }
+        else {
+            console.warn('No button found within post-menu-trigger');
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ce2a30260fae6eecae5b2feb0538ac2ce66b989c', "data-version": _package.version, "tab-index": "-1" }, index.h("slot", { key: 'a69d7dc4a1a798332bd9881cedb216ef82d279ab' })));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "for": ["validateControlFor"]
+    }; }
+};
+PostMenuTrigger.style = PostMenuTriggerStyle0;
+
+exports.PostMenuTrigger = PostMenuTrigger;

package/dist/cjs/post-menu-trigger.cjs.entry.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const postMenuTrigger = require('./post-menu-trigger-71449876.js');
+require('./index-e1f32cce.js');
+require('./package-53892d3d.js');
+require('./check-type-64af82a9.js');
+
+
+
+exports.post_menu_trigger = postMenuTrigger.PostMenuTrigger;

package/dist/cjs/post-menu.cjs.entry.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const postMenu = require('./post-menu-54fa65d3.js');
+require('./index-e1f32cce.js');
+require('./package-53892d3d.js');
+
+
+
+exports.post_menu = postMenu.PostMenu;

package/dist/cjs/{post-popover-4457dd58.js → post-popover-5f639e4f.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-3f706795.js');
+const _package = require('./package-53892d3d.js');
 const attributeObserver = require('./attribute-observer-10f08c04.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:var(--post-gray-80);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{-webkit-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\");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:1.5rem;width:1.5rem}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-close{color:var(--post-contrast-color)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}@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{--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51;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}@media (max-width: 599.98px){.popover-container{max-width:100%}}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}";
@@ -95,7 +95,7 @@ const PostPopover = class {
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (index.h(index.Host, { key: 'aef49582e78865ac209f1983d255b44e4e3a4c0a', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'cd2db53a82b34ea3c6aa3aab07670c6e198f9360', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: 'df037f6f7848e0ef87affa73de6a9c2a6af9eade', class: "popover-container" }, index.h("div", { key: '48c1e44e42c7cc3daf198456f7b49041d86a8e83', class: "popover-content" }, index.h("slot", { key: '8f4dc6f558bcaa9b83a342fea3a7843c185fc43e' })), index.h("button", { key: 'e78527134e8e5cbeed240b742aeab7bf0ea41d5b', class: "btn-close", onClick: () => this.hide() }, index.h("span", { key: 'f56f4c3aa17dd11818d1abd7b422e7c45902c593', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (index.h(index.Host, { key: '22964a2be347979d1ebaaec468edfd4b079776ff', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'a108ed03721a453ce73a850913d93b8bfaf83922', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '943f1a914ada58c3f8b085613b47ed4b7c55e591', class: "popover-container" }, index.h("div", { key: 'a6a8dec53c9190c48d1b3b217c979d78b2f32995', class: "popover-content" }, index.h("slot", { key: '555bc4537d6bd62b60186db9700588eb3ec38ac2' })), index.h("button", { key: 'db0826565312bba9bc48a88cd84636a903eeb94f', class: "btn-close", onClick: () => this.hide() }, index.h("span", { key: 'aef92ba6e586e02924a09d459e4d753ad18f72f7', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-popover.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postPopover = require('./post-popover-4457dd58.js');
+const postPopover = require('./post-popover-5f639e4f.js');
 require('./index-e1f32cce.js');
-require('./package-3f706795.js');
+require('./package-53892d3d.js');
 require('./attribute-observer-10f08c04.js');
 
 

package/dist/cjs/{post-rating-236273be.js → post-rating-3d166fed.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-3f706795.js');
+const _package = require('./package-53892d3d.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 -0.25rem;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:2px;outline:2px 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;
@@ -73,7 +73,7 @@ const PostRating = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e303ed62ef2f76033e0ca9b693dfe447984a92c7', "data-version": _package.version }, index.h("div", { key: '7e392823716b6d4d243198a66a637001f5f86690', 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) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: '0202a629d68bc85d00fb3ccae63073938fb174d3', "data-version": _package.version }, index.h("div", { key: '7de2c78d498957dbd988472729fde2ea04162490', 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) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

package/dist/cjs/post-rating.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postRating = require('./post-rating-236273be.js');
+const postRating = require('./post-rating-3d166fed.js');
 require('./index-e1f32cce.js');
-require('./package-3f706795.js');
+require('./package-53892d3d.js');
 
 
 

package/dist/cjs/{post-tab-header-bce47e34.js → post-tab-header-03b20f24.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-3f706795.js');
+const _package = require('./package-53892d3d.js');
 const checkNonEmpty = require('./check-non-empty-eeaa8f77.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:var(--post-contrast-color);text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);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:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=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,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=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:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-secondary .tab-title{background-color:#666}.bg-secondary .tab-title.active{background-color:#666}.bg-secondary .nav-item{background-color:#666}.bg-success .tab-title{background-color:#2c871d}.bg-success .tab-title.active{background-color:#2c871d}.bg-success .nav-item{background-color:#2c871d}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-error .tab-title{background-color:#a51728}.bg-error .tab-title.active{background-color:#a51728}.bg-error .nav-item{background-color:#a51728}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!\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}";
@@ -20,7 +20,7 @@ const PostTabHeader = class {
         this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (index.h(index.Host, { key: '3f6c519aeb28ba7f22de7b7bbb04589bc7c9fc59', id: this.tabId, role: "tab", "data-version": _package.version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, index.h("slot", { key: '2df9413b24b32956361708d2ef009584ea151c8c' })));
+        return (index.h(index.Host, { key: 'f105dabe8a61308d5aa361a6aeaad2f938cf7656', id: this.tabId, role: "tab", "data-version": _package.version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, index.h("slot", { key: '3abc0c8fab0a0ab1dd538e20831980b4672ae79a' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tab-header.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabHeader = require('./post-tab-header-bce47e34.js');
+const postTabHeader = require('./post-tab-header-03b20f24.js');
 require('./index-e1f32cce.js');
-require('./package-3f706795.js');
+require('./package-53892d3d.js');
 require('./check-non-empty-eeaa8f77.js');
 require('./constants-238701d3.js');
 

package/dist/cjs/{post-tab-panel-e25974be.js → post-tab-panel-e5685f3d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-3f706795.js');
+const _package = require('./package-53892d3d.js');
 
 const postTabPanelCss = ":host{display:none}";
 const PostTabPanelStyle0 = postTabPanelCss;
@@ -17,7 +17,7 @@ const PostTabPanel = class {
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (index.h(index.Host, { key: 'be6aea34d94b371364912bc3b20efb33f844b736', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: 'aa4b546f2461819b47a8b14b326c79cc13f5f3d2' })));
+        return (index.h(index.Host, { key: '9018d11d85d1ce0b83e74987f8fb96eb1b873a40', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '45e2214fbeb5d4c2b4e5e35eb5ad74d99033a0a3' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tab-panel.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabPanel = require('./post-tab-panel-e25974be.js');
+const postTabPanel = require('./post-tab-panel-e5685f3d.js');
 require('./index-e1f32cce.js');
-require('./package-3f706795.js');
+require('./package-53892d3d.js');
 
 
 

package/dist/cjs/{post-tabs-dc99bddf.js → post-tabs-e871c911.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-3f706795.js');
+const _package = require('./package-53892d3d.js');
 const fade = require('./fade-35a3633a.js');
 
 /**
@@ -164,7 +164,7 @@ const PostTabs = class {
         nextTab.focus();
     }
     render() {
-        return (index.h(index.Host, { key: '8f50b5d2575a248e0a7dc57add5e343e562db015', "data-version": _package.version }, index.h("div", { key: 'e640efed73aefdb9ff4cd2f138b7bd7a3c64b885', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: '2394820f9d187e4d9f123156dec49e5620e0dfcc', class: "tabs", role: "tablist" }, index.h("slot", { key: 'c2800a38891140881227a01706cfa43095c769ba', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: '836b9b2bf4ba05df3e91bc5d3d71e3f2363dea88', class: "tab-content", part: "content" }, index.h("slot", { key: 'd6cad1f86d39d854b5595ee467f29474b21965ba', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (index.h(index.Host, { key: '3c9d7351fa09531238892f0bd05447379f46fdb4', "data-version": _package.version }, index.h("div", { key: '1eff106f6324302155e809a58cd3367bb7bdbd76', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: 'fc5917d92b577f99fb19fa80ecd1a863ffeaa4d8', class: "tabs", role: "tablist" }, index.h("slot", { key: 'af35884271ca9d75dbbd113e05fd052c4691c53e', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: '4908774e2306e432af65b94a9dd5e1d257569652', class: "tab-content", part: "content" }, index.h("slot", { key: 'c0eb44e39b0cffe57c42c51dd74e605e74241f70', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tabs.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabs = require('./post-tabs-dc99bddf.js');
+const postTabs = require('./post-tabs-e871c911.js');
 require('./index-e1f32cce.js');
-require('./package-3f706795.js');
+require('./package-53892d3d.js');
 require('./fade-35a3633a.js');
 
 

package/dist/cjs/{post-tag-a28852a8.js → post-tag-62f31d0e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-3f706795.js');
+const _package = require('./package-53892d3d.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:.25rem;padding:0 .5rem;max-width:100%;background-color:var(--post-tag-bg);border:1px solid rgba(0,0,0,0);border-radius:.25rem;font-size:1rem;line-height:1.875rem;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:1.5rem}.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:var(--post-contrast-color)}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;
@@ -34,7 +34,7 @@ const PostTag = class {
         this.setClasses();
     }
     render() {
-        return (index.h(index.Host, { key: '5058456392690e1973575edfe7e8c72f909a80b5', "data-version": _package.version }, index.h("div", { key: '0995e847c0239d540f1adfb7d1bb8eba3b026a2f', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: '7e62db84243af09f7f8aee28cb1a542599e01579', class: "tag-text" }, index.h("slot", { key: '235b5b43062f41497d246a838e351282d324b060' })))));
+        return (index.h(index.Host, { key: '01f369b7c6803f710fb0b5eae652d6d1beb340ed', "data-version": _package.version }, index.h("div", { key: 'bba40e4deaa43e64c9bc32c2ad4a3e3515bdf8dd', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: '9addb054f9555c9a97d8825a148958b2e2b863a7', class: "tag-text" }, index.h("slot", { key: '315cf79690fa489c61edd6ce6b304b94a3866b8c' })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tag.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTag = require('./post-tag-a28852a8.js');
+const postTag = require('./post-tag-62f31d0e.js');
 require('./index-e1f32cce.js');
-require('./package-3f706795.js');
+require('./package-53892d3d.js');
 
 
 

package/dist/cjs/{post-tooltip-78e4129b.js → post-tooltip-851c342c.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-3f706795.js');
+const _package = require('./package-53892d3d.js');
 const attributeObserver = require('./attribute-observer-10f08c04.js');
-const index$1 = require('./index-01f30442.js');
+const index$1 = require('./index-824d2b71.js');
 
 function timeout(delay) {
     return new Promise(resolve => setTimeout(resolve, delay));
@@ -4976,7 +4976,7 @@ const PostTooltip = class {
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (index.h(index.Host, { key: 'ad55746e219ca6f52779605a16e0002f18062351', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: 'd80bf2dbd80cd71ea0d1ce09dd95e362d8f768f3', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: 'c58554b173253a65ddba2d06255c955c8223a5ff' }))));
+        return (index.h(index.Host, { key: '8e2bd1f11a44a0d39ad797f12b880338d59ea006', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: 'ff4fdbf72ca4b95d5f4e925fedbfbcf7e281410f', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '770a98cff11b963ec37559683a27a216250e8bde' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tooltip.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTooltip = require('./post-tooltip-78e4129b.js');
+const postTooltip = require('./post-tooltip-851c342c.js');
 require('./index-e1f32cce.js');
-require('./package-3f706795.js');
+require('./package-53892d3d.js');
 require('./attribute-observer-10f08c04.js');
-require('./index-01f30442.js');
+require('./index-824d2b71.js');
 require('./constants-238701d3.js');
 require('./check-one-of-f4f5d0c0.js');
+require('./check-type-64af82a9.js');
 
 
 

package/dist/collection/collection-manifest.json

@@ -12,6 +12,9 @@
     "components/post-icon/post-icon.js",
     "components/post-language-option/post-language-option.js",
     "components/post-logo/post-logo.js",
+    "components/post-menu/post-menu.js",
+    "components/post-menu-trigger/post-menu-trigger.js",
+    "components/post-menu-item/post-menu-item.js",
     "components/post-popover/post-popover.js",
     "components/post-popovercontainer/post-popovercontainer.js",
     "components/post-rating/post-rating.js",
@@ -21,7 +24,11 @@
     "components/post-tooltip/post-tooltip.js",
     "components/post-tag/post-tag.js",
     "components/post-list/post-list.js",
-    "components/post-list-item/post-list-item.js"
+    "components/post-list-item/post-list-item.js",
+    "components/post-header/post-header.js",
+    "components/post-mainnavigation/post-mainnavigation.js",
+    "components/post-megadropdown/post-megadropdown.js",
+    "components/post-megadropdown-trigger/post-megadropdown-trigger.js"
   ],
   "compiler": {
     "name": "@stencil/core",