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

package/dist/components/p-2e509a60.js

@@ -0,0 +1,237 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { t as throttle } from './p-f7b9f90a.js';
+import { d as defineCustomElement$1 } from './p-fcec301c.js';
+
+const postMainnavigationCss = "post-mainnavigation{flex:0 0 auto}post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}post-mainnavigation post-list-item post-megadropdown-trigger button{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}post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:var(--post-core-dimension-4)}post-mainnavigation .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:var(--post-core-font-size-16)}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:var(--post-core-font-size-14)}}@media screen and (min-width: 1024px){post-mainnavigation{display:block}post-mainnavigation nav{max-width:100vw;background:var(--post-core-color-brand-white);max-height:var(--main-navigation-height);user-select:none;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{position:absolute;inset-block:0;overflow:hidden}post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;background:var(--post-core-color-brand-white);padding:var(--post-core-dimension-16);box-shadow:var(--post-core-elevation-5);line-height:var(--post-core-line-height-100);height:100%}post-mainnavigation .left-scroll-button button post-icon,post-mainnavigation .right-scroll-button button post-icon{font-size:1rem}post-mainnavigation .left-scroll-button{inset-inline-start:0;padding-inline-end:2rem}post-mainnavigation .right-scroll-button{inset-inline-end:0;padding-inline-start:2rem}post-mainnavigation post-list{margin-inline:var(--post-core-dimension-4)}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:var(--post-core-dimension-12);height:var(--main-navigation-height);gap:var(--post-core-dimension-4);font-size:var(--post-core-font-size-16);border-block:0 solid rgba(0,0,0,0);border-block-end-color:currentColor}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:3}}@media screen and (min-width: 1024px)and (min-width: 1024px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:4}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{border-block-width:var(--post-core-dimension-2)}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{border-block-width:var(--post-core-dimension-4);font-weight:var(--post-core-font-weight-700)}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:var(--post-core-font-size-14)}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:var(--post-core-dimension-12);transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{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}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:currentColor;bottom:0;width:100%;height:var(--post-core-dimension-1);position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{height:var(--post-core-dimension-3)}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::after,post-mainnavigation post-megadropdown 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 (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{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}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:currentColor;bottom:0;width:100%;height:var(--post-core-dimension-1);position:absolute;left:0}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{height:var(--post-core-dimension-3)}post-mainnavigation post-list-item>a:hover::after,post-mainnavigation post-list-item>button:hover::after,post-mainnavigation post-list-item post-megadropdown-trigger button: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)}}post-mainnavigation .back-button .btn{padding-inline:0}";
+const PostMainnavigationStyle0 = postMainnavigationCss;
+
+const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
+const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
+const NAVIGATION_LIST_SELECTOR = 'post-list:not(post-megadropdown *) > [role="list"]';
+const NAVIGATION_ITEM_SELECTOR = ':is(post-list-item > a, post-list-item > post-megadropdown-trigger > button):not(post-megadropdown *)';
+const PostMainnavigation = /*@__PURE__*/ proxyCustomElement(class PostMainnavigation extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    header;
+    navbar;
+    rightScrollButton;
+    leftScrollButton;
+    scrollRepeatInterval;
+    navbarDisableTimer;
+    mutationObserver = new MutationObserver(async (mutations) => {
+        // Wait for all elements to be hydrated
+        await Promise.all(mutations
+            .flatMap((mutation) => Array.from(mutation.addedNodes))
+            .map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
+        // Recalculate scrollability after DOM changes
+        this.checkScrollability();
+    });
+    get host() { return this; }
+    canScrollLeft = false;
+    canScrollRight = false;
+    translateAmount = 0;
+    /**
+     * Update navbar translation when 'translateAmount' changes and recalculate scrollability
+     */
+    onTranslateAmountChanges(value) {
+        this.navbar.style.transform = `translateX(-${value}px)`;
+        this.checkScrollability();
+    }
+    /**
+     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+     * This ensures that we can interact with the header for mobile menu toggling.
+     */
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+    }
+    /**
+     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.header = null;
+        this.mutationObserver.disconnect();
+    }
+    componentDidLoad() {
+        setTimeout(() => this.checkScrollability()); // Initial check to determine if scrolling is needed
+        this.mutationObserver.observe(this.navigationList, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
+        window.addEventListener('resize', // Recheck scrollability on window resize
+        throttle(100, () => this.checkScrollability()));
+        // Handle focus changes and adjust scroll as needed
+        this.navbar.addEventListener('focusin', e => this.adjustTranslation(e));
+    }
+    handleBackButtonClick() {
+        if (this.header)
+            this.header.toggleMobileMenu();
+    }
+    /**
+     * Moves focus on the navbar and adjusts scrolling to bring focused element into view.
+     */
+    adjustTranslation(e) {
+        const focusedElement = e.target;
+        if (!this.canScroll || !focusedElement.matches(NAVIGATION_ITEM_SELECTOR))
+            return;
+        // We need to move the element into the view before it is focused to avoid browser default behavior
+        e.preventDefault();
+        this.withoutTransition(() => {
+            // Try scrolling in both directions, only the necessary translation will actually occur
+            this.translateRightTo(focusedElement);
+            this.translateLeftTo(focusedElement);
+            focusedElement.focus();
+        });
+    }
+    /**
+     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
+     */
+    checkScrollability() {
+        const { scrollWidth, clientWidth } = this.navbar;
+        const couldScroll = this.canScroll;
+        if (scrollWidth === clientWidth) {
+            // If scroll width equals client width, scrolling is disabled in both directions
+            this.canScrollLeft = this.canScrollRight = false;
+        }
+        else {
+            this.canScrollLeft = this.translateAmount !== 0; // Scrolling left is possible if not at the start
+            this.canScrollRight = clientWidth + this.translateAmount !== scrollWidth; // Scrolling right is possible if not at the end
+        }
+        if (couldScroll && !this.canScroll) {
+            this.withoutTransition(() => (this.translateAmount = 0));
+        }
+    }
+    /**
+     * Returns whether scrolling is enabled in either the left or right direction.
+     */
+    get canScroll() {
+        return this.canScrollLeft || this.canScrollRight;
+    }
+    /**
+     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
+     */
+    handleScrollButtonClick(direction) {
+        if (!this.canScroll)
+            return;
+        // Disable interaction with the navbar during scrolling
+        this.disableNavbar();
+        // Perform the initial scroll action
+        this.scroll(direction);
+        // Repeat the scrolling action while the button is held down
+        this.scrollRepeatInterval = setInterval(() => {
+            this.scroll(direction);
+        }, SCROLL_REPEAT_INTERVAL);
+    }
+    /**
+     * Stops the repeated scrolling when the mouse button is released.
+     */
+    stopScrolling() {
+        if (this.scrollRepeatInterval)
+            clearInterval(this.scrollRepeatInterval);
+    }
+    scroll(direction) {
+        const navigationItems = Array.from(this.navigationItems);
+        if (direction === 'left')
+            navigationItems.reverse();
+        for (const item of navigationItems) {
+            const couldScroll = direction === 'left' ? this.translateLeftTo(item) : this.translateRightTo(item);
+            if (couldScroll)
+                break;
+        }
+    }
+    translateRightTo(navigationItem) {
+        const itemRightEdgePosition = navigationItem.offsetLeft + navigationItem.offsetWidth + this.getFocusMargin(navigationItem);
+        const lastVisiblePosition = this.navbar.clientWidth + this.translateAmount;
+        // If the item is already fully visible, don't scroll
+        if (itemRightEdgePosition < lastVisiblePosition)
+            return false;
+        const maxTranslateAmount = this.navbar.scrollWidth - this.navbar.clientWidth;
+        const newRightEdgePosition = itemRightEdgePosition + this.rightScrollButton.clientWidth - this.navbar.clientWidth;
+        this.translateAmount = Math.min(maxTranslateAmount, newRightEdgePosition);
+        return true;
+    }
+    translateLeftTo(navigationItem) {
+        const itemLeftEdgePosition = navigationItem.offsetLeft - this.getFocusMargin(navigationItem);
+        const firstVisiblePosition = this.translateAmount;
+        // If the item is already fully visible, don't scroll
+        if (itemLeftEdgePosition > firstVisiblePosition)
+            return false;
+        const minTranslateAmount = 0;
+        const newRightEdgePosition = itemLeftEdgePosition - this.leftScrollButton.clientWidth;
+        this.translateAmount = Math.max(minTranslateAmount, newRightEdgePosition);
+        return true;
+    }
+    /**
+     * Calculate the margin required for focus outline around navigation items
+     */
+    getFocusMargin(navigationItem) {
+        const { outlineWidth, outlineOffset } = getComputedStyle(navigationItem);
+        return parseInt(outlineWidth) + parseInt(outlineOffset) + 1;
+    }
+    /**
+     * Returns the navigation list container element
+     */
+    get navigationList() {
+        return this.navbar.querySelector(NAVIGATION_LIST_SELECTOR);
+    }
+    /**
+     * Returns the navigation items
+     */
+    get navigationItems() {
+        return this.navbar.querySelectorAll(NAVIGATION_ITEM_SELECTOR);
+    }
+    /**
+     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
+     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
+     */
+    disableNavbar() {
+        if (this.navbarDisableTimer)
+            clearTimeout(this.navbarDisableTimer);
+        this.navbar.style.pointerEvents = 'none';
+        this.navbarDisableTimer = setTimeout(() => {
+            this.navbar.style.pointerEvents = 'initial';
+        }, NAVBAR_DISABLE_DURATION);
+    }
+    /**
+     * Allows to translate the navbar without a transition
+     */
+    withoutTransition(callback) {
+        const transition = this.navbar.style.transition;
+        this.navbar.style.transition = 'none';
+        callback();
+        setTimeout(() => {
+            this.navbar.style.transition = transition;
+        });
+    }
+    render() {
+        return (h(Host, { key: '3280c55d0f8e7aec6e1dc3f59744114b2557cb04', slot: "post-mainnavigation" }, h("div", { key: '446ede19ef62a21022a771edb8a6e8eb30a5c5d3', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '5e923b62133d3452676445349624157fd7d3d957', name: "back-button" })), h("nav", { key: 'd67723ba6b42ec2b083197091ec7226dc258897e', ref: el => (this.navbar = el) }, h("slot", { key: 'ea1a0fd7f76e02b89789713a49fc4d7fd6e8a022' })), h("div", { key: '1a3d640acfe23ae5c5f9ab26a7bca9c3c2bc4434', class: `left-scroll-button${this.canScrollLeft ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: 'a3260bba8104bf9155120e04fed6ba0aa102e529', type: "button", tabindex: "-1", ref: el => (this.leftScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('left') }, h("post-icon", { key: '0bba0a76f93098267be8432636391641f55d5df8', "aria-hidden": "true", name: "chevronleft" }))), h("div", { key: '401ef6821f258737d17ed54ae1c577cc4783a3f9', class: `right-scroll-button${this.canScrollRight ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: 'd964f4b74ad8fef86115b12fcda12cc54da936f3', type: "button", tabindex: "-1", ref: el => (this.rightScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('right') }, h("post-icon", { key: '5758f48df24b4a3ea241f43464b448878e31977d', "aria-hidden": "true", name: "chevronright" })))));
+    }
+    static get watchers() { return {
+        "translateAmount": ["onTranslateAmountChanges"]
+    }; }
+    static get style() { return PostMainnavigationStyle0; }
+}, [4, "post-mainnavigation", {
+        "canScrollLeft": [32],
+        "canScrollRight": [32],
+        "translateAmount": [32]
+    }, [[9, "mouseup", "stopScrolling"]], {
+        "translateAmount": ["onTranslateAmountChanges"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-mainnavigation", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-mainnavigation":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostMainnavigation);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostMainnavigation as P, defineCustomElement as d };

package/dist/components/{post-tab-header2.js → p-32b7a0a8.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-74e13cb1.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 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
+const PostTabHeader = /*@__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 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader exten
         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/dist/components/{post-togglebutton2.js → p-3385af29.js}

@@ -1,18 +1,21 @@
-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-74e13cb1.js';
+import { c as checkType } from './p-8562c7dc.js';
 
 const postTogglebuttonCss = ":host{cursor:pointer;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}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
 const PostTogglebuttonStyle0 = postTogglebuttonCss;
 
-const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
+const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.toggled = false;
     }
     get host() { return this; }
+    /**
+     * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+     */
+    toggled = false;
     validateToggled(value = this.toggled) {
         checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
     }
@@ -33,7 +36,7 @@ const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton
         }
     };
     render() {
-        return (h(Host, { key: '461f72ebada75a99921b7a166f67f2547aa6465e', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'cd5f4cc4df687cceacb3ea6c125b7b62f01b2712' })));
+        return (h(Host, { key: 'e4974336def6dbf244b3d63b9aa00e2e7bce1920', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'b1179664b0f0651865e973c7afe951102b048877' })));
     }
     static get watchers() { return {
         "toggled": ["validateToggled"]

package/dist/components/p-3aba7629.js

@@ -0,0 +1,29 @@
+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) *',
+    '[tabindex^="-"]',
+].join(',')})`;
+function getFocusableChildren(element) {
+    return element.querySelectorAll(`& > ${focusableSelector}:not(${focusDisablingSelector})`);
+}
+
+export { getFocusableChildren as g };