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

package/dist/components/p-1ee1742f.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-91031e3b.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/p-2083ae2c.js

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

package/dist/components/{post-megadropdown-trigger2.js → p-27edc023.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 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdownTrigger extends HTMLElement {
+const PostMegadropdownTrigger = /*@__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 = /*@__PURE__*/ proxyCustomElement(class PostMegad
     }
     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 = /*@__PURE__*/ proxyCustomElement(class PostMegad
         }
     }
     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/dist/components/{post-tooltip2.js → p-2d9b46b4.js}

@@ -1,8 +1,8 @@
-import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
-import { v as version$1 } from './package.js';
-import { g as getAttributeObserver } from './attribute-observer.js';
-import { e as checkEmptyOrType } from './index2.js';
-import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version$1 } from './p-2083ae2c.js';
+import { g as getAttributeObserver } from './p-9748a355.js';
+import { e as checkEmptyOrType } from './p-eabb09ad.js';
+import { d as defineCustomElement$1 } from './p-60cf53cc.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -4864,18 +4864,29 @@ const patchAccessibilityFeatures = (trigger) => {
 };
 // Initialize a mutation observer for patching accessibility features
 const triggerObserver = getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
-const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends HTMLElement$1 {
+const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.placement = 'top';
-        this.arrow = true;
-        this.delayed = false;
     }
     popoverRef;
     wasOpenedByFocus = false;
     get host() { return this; }
+    /**
+     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Tooltips 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';
+    /**
+     * Wheter or not to display a little pointer arrow
+     */
+    arrow = true;
+    /**
+     * If `true`, the tooltip is displayed a few milliseconds after it is triggered
+     */
+    delayed = false;
     validateDelayed() {
         checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
     }
@@ -4991,7 +5002,7 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '492f3f8b1b323417304ffba6c93f277c18f5b3d8', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '1b25c36c8351f0471e9acdf1fdf3073fa59683da', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '0c1f7d6c81e214155976d1fb6151ec0f97724724' }))));
+        return (h(Host, { key: 'bda6e8f41cc55d14f11bd76d7a5bde9c3d7e8817', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '090506a3d10cafa28d296113b09dfd1a2965dfa5', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '9d8ff88355510ec1a56169158e3cf503a8ef8482' }))));
     }
     static get watchers() { return {
         "delayed": ["validateDelayed"]

package/dist/components/{post-card-control2.js → p-38778a14.js}

@@ -1,14 +1,14 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as checkOneOf } from './check-one-of.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
-import { v as version } from './package.js';
-import { d as defineCustomElement$1 } from './post-icon2.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3e8554e7.js';
+import { c as checkOneOf } from './p-bacd3e2c.js';
+import { c as checkNonEmpty } from './p-b095519d.js';
+import { v as version } from './p-2083ae2c.js';
+import { d as defineCustomElement$1 } from './p-91031e3b.js';
 
 const postCardControlCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.form-check{display:flex;flex-wrap:wrap;align-items:flex-start;width:fit-content;border-radius:var(--post-device-border-radius-focus)}.form-check-inline{display:inline-flex;vertical-align:top}fieldset>.form-check-inline:not(:last-of-type){margin-right:var(--post-core-dimension-24)}.form-check:has(>input:not(:only-child)){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}.form-check:has(>input:not(:only-child)):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){.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-check:has(>input:not(:only-child)):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){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:has(>input:not(:only-child))>input{outline:none !important}.form-check:has(input[type=checkbox]):not(.form-switch){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=checkbox]):not(.form-switch):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:GrayText}}.form-check.form-switch>input[type=checkbox]~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check.form-switch>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check.form-switch>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox][disabled]~label{color:GrayText}}.form-check:has(input[type=radio]){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=radio]):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=radio])>input[type=radio]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=radio])>input[type=radio]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:GrayText}}.form-check>label{transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);flex:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>label{transition:none}}:where(.form-check>input[type=checkbox]){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}:where(.form-check>input[type=checkbox]):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){:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=checkbox]):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){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:not(.form-switch):has(input[type=checkbox])>input{appearance:none;flex:none;display:inline-flex;margin:var(--post-device-spacing-padding-1);margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-core-dimension-2);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]){cursor:pointer}.form-check:not(.form-switch):has(input[type=checkbox])>input::after{display:block;content:\"\";width:100%;height:100%;mask-size:var(--post-device-sizing-interactive-icon-size);mask-repeat:no-repeat;mask-position:center}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate{background-color:SelectedItem}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:currentColor}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:SelectedItemText}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:indeterminate::after{background-color:Highlight}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after{mask-image:url(\"data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>\")}.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{mask-image:url(\"data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>\")}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:Field;border-color:GrayText}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:indeterminate::after{background-color:GrayText}}:where(.form-check>input[type=radio]){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}:where(.form-check>input[type=radio]):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){:where(.form-check>input[type=radio]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=radio]):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){:where(.form-check>input[type=radio]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check>input[type=radio]{appearance:none;flex:none;display:inline-flex;justify-content:center;align-items:center;margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));margin-inline:var(--post-device-spacing-padding-1);width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-device-border-radius-round);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check>input[type=radio]:not([disabled]){cursor:pointer}.form-check>input[type=radio]::after{display:block;content:\"\";width:var(--post-device-sizing-icon-3);height:var(--post-device-sizing-icon-3);border-radius:inherit}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked{background-color:SelectedItem}.form-check>input[type=radio]:checked::after{background-color:SelectedItemText !important}}.form-check>input[type=radio]:checked::after{background-color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked::after{background-color:FieldText}}.form-check>input[type=radio]:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:Highlight !important}}.form-check>input[type=radio][disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}.form-check>input[type=radio][disabled]:checked::after{background-color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio][disabled]{background-color:Field;border-color:GrayText}.form-check>input[type=radio][disabled]:checked::after{background-color:GrayText}}:host{--post-card-control-bg-context:.bg-yellow, .bg-white, .bg-light, .bg-gray, .bg-warning, .bg-info, .bg-success-background, .bg-warning-background, .bg-error-background, .bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-error;display:flex;width:100%}:host-context(fieldset):host(:not(:last-child)) .card-control{margin-bottom:var(--post-core-dimension-16)}.card-control{--post-card-control-border-color:hsl(0, 0%, 40%);--post-card-control-bg:#fff;--post-card-control-color:hsl(0, 0%, 20%);--post-card-control-input-border-color:hsl(0, 0%, 20%);--post-card-control-input-bg:#fff;flex-basis:100%;display:grid;grid-template:\"input label icon\" \"input content content\"/min-content auto min-content;align-items:center;gap:0 var(--post-core-dimension-8);margin:0;padding:var(--post-core-dimension-12);background-color:var(--post-card-control-bg);border:var(--post-core-dimension-2) solid var(--post-card-control-border-color);border-radius:4px;color:var(--post-card-control-color) !important;cursor:pointer}.card-control .card-control--input{grid-area:input;margin:var(--post-core-dimension-4) 0;background-color:var(--post-card-control-input-bg) !important;border-color:var(--post-card-control-input-border-color) !important;color:var(--post-card-control-input-border-color) !important;cursor:inherit;transition:none;outline:none !important}.card-control .card-control--input:hover:not([disabled]),.card-control .card-control--input:hover:not([disabled])~label.form-check-label{color:#000;background-color:rgba(0,0,0,0)}.card-control .card-control--input:focus,.card-control .card-control--input:focus-visible{box-shadow:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control .card-control--input::after{forced-color-adjust:none;border-color:rgba(0,0,0,0)}}.card-control .card-control--label{grid-area:label;margin:var(--post-core-dimension-4) 0;padding:0 !important;color:inherit !important;pointer-events:none;transition:none}.card-control .card-control--label:not(:has(+.card-control--icon)){grid-area:1/label/1/icon}.card-control .card-control--description{grid-area:label;font-size:.75rem}.card-control .card-control--content{grid-area:content}.card-control .card-control--icon{grid-area:icon;width:var(--post-core-dimension-32);height:var(--post-core-dimension-32);pointer-events:none}.card-control .card-control--icon>slot>*{width:100%;height:100%}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color:#000;--post-card-control-bg:#fc0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled).is-checked{--post-card-control-border-color:FieldText;--post-card-control-bg:SelectedItem;--post-card-control-color:SelectedItemText;--post-card-control-input-border-color:SelectedItemText;--post-card-control-input-bg:SelectedItem}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:var(--post-card-control-color) !important}}.card-control:not(.is-disabled).is-invalid{--post-card-control-border-color:#a51728;--post-card-control-color:#a51728;--post-card-control-input-border-color:#a51728}.card-control:not(.is-disabled):hover{--post-card-control-border-color:hsl(0, 0%, 20%);--post-card-control-bg:hsl(0, 0%, 40%);--post-card-control-color:#fff;--post-card-control-input-border-color:#000}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled):hover{--post-card-control-border-color:Highlight;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:Highlight;--post-card-control-input-bg:Field}.card-control:not(.is-disabled):hover .card-control--input::after{color:FieldText}}.card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.card-control.is-disabled{--post-card-control-border-color:hsl(0, 0%, 40%);--post-card-control-bg:transparent;--post-card-control-color:hsl(0, 0%, 40%);--post-card-control-input-border-color:hsl(0, 0%, 40%);--post-card-control-input-bg:transparent;border-style:dashed;cursor:default}.card-control.is-disabled .card-control--input{padding:2px;border-style:dashed}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color:FieldText;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:FieldText;--post-card-control-input-bg:Field;outline:var(--post-core-dimension-2) solid Field;outline-offset:calc(var(--post-core-dimension-2)*-2)}.card-control .card-control--input{outline:var(--post-core-dimension-2) solid Field}.card-control .card-control--input[type]{background-color:Field !important}.card-control .card-control--input::after{border-color:Field !important}.card-control .card-control--label,.card-control .card-control--content{background-color:var(--post-card-control-bg) !important}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color:FieldText;--post-card-control-bg:SelectedItem;--post-card-control-color:SelectedItemText;--post-card-control-input-border-color:FieldText}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:FieldText !important}.card-control:not(.is-disabled):hover{--post-card-control-border-color:Highlight;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:Highlight}.card-control.is-disabled{--post-card-control-border-color:GrayText;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:GrayText;--post-card-control-input-bg:Field}.card-control.is-disabled .card-control--input{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%'  fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='88' /%3e%3c/svg%3e\")}.card-control.is-disabled .card-control--input[type=radio]{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' rx='100' ry='100' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='4 2' /%3e%3c/svg%3e\")}.card-control.is-disabled.is-checked{--post-card-control-bg:SelectedItem;--post-card-control-color:SelectedItemText;position:relative;background-color:Field}.card-control.is-disabled.is-checked::before{display:block;content:\"\";position:absolute;inset:var(--post-core-dimension-2);background-color:SelectedItem;z-index:1}.card-control.is-disabled.is-checked>*{position:relative;z-index:2}.card-control.is-disabled.is-checked .card-control--input::after{background-color:FieldText !important}}@media (forced-colors: active)and (forced-colors: active),(forced-colors: active)and (-ms-high-contrast: active),(forced-colors: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: active)and (forced-colors: active),(-ms-high-contrast: active)and (-ms-high-contrast: active),(-ms-high-contrast: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: white-on-black)and (forced-colors: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color:GrayText;--post-card-control-color:GrayText;--post-card-control-input-border-color:GrayText}.card-control.is-checked{--post-card-control-input-bg:field;position:relative}.card-control.is-checked::before{display:block;content:\"\";position:absolute;inset:var(--post-core-dimension-2);border-radius:calc(var(--post-core-dimension-2)*.5);background-color:SelectedItem}.card-control.is-checked>*{position:relative}.card-control.is-checked .card-control--input{outline:var(--post-core-dimension-2) solid Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color:#fff;--post-card-control-bg:transparent;--post-card-control-color:#fff;--post-card-control-input-border-color:#fff;--post-card-control-input-bg:transparent}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color:#fc0;--post-card-control-bg:#fc0;--post-card-control-color:hsl(0, 0%, 20%);--post-card-control-input-border-color:hsl(0, 0%, 20%);--post-card-control-input-bg:#fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color:#a51728;--post-card-control-bg:#ffdade;--post-card-control-color:#a51728;--post-card-control-input-border-color:#a51728;--post-card-control-input-bg:#fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg:#fc0}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color:#000;--post-card-control-bg:hsl(0, 0%, 80%);--post-card-control-color:#000;--post-card-control-input-border-color:#000;--post-card-control-input-bg:#fff}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color:Highlight;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:Highlight;--post-card-control-input-bg:Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color:post.$white-alpha-80;--post-card-control-bg:transparent;--post-card-control-color:post.$white-alpha-80;--post-card-control-input-border-color:post.$white-alpha-80;--post-card-control-input-bg:transparent}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color:GrayText;--post-card-control-color:GrayText;--post-card-control-input-border-color:GrayText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-input-bg:Field}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color:FieldText;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:FieldText;--post-card-control-input-bg:Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color:FieldText;--post-card-control-bg:SelectedItem;--post-card-control-color:SelectedItemText;--post-card-control-input-border-color:FieldText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color:Highlight;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:Highlight}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color:GrayText;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:GrayText;--post-card-control-input-bg:Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-bg:SelectedItem;--post-card-control-color:SelectedItemText}}:host(:not([data-context])){display:none}:host([data-context*=fieldset]:not(:last-child)) .card-control{margin-bottom:var(--post-core-dimension-16)}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control{--post-card-control-border-color:#fff;--post-card-control-bg:transparent;--post-card-control-color:#fff;--post-card-control-input-border-color:#fff;--post-card-control-input-bg:transparent}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color:#fc0;--post-card-control-bg:#fc0;--post-card-control-color:hsl(0, 0%, 20%);--post-card-control-input-border-color:hsl(0, 0%, 20%);--post-card-control-input-bg:#fff}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color:#a51728;--post-card-control-bg:#ffdade;--post-card-control-color:#a51728;--post-card-control-input-border-color:#a51728;--post-card-control-input-bg:#fff}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg:#fc0}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color:#000;--post-card-control-bg:hsl(0, 0%, 80%);--post-card-control-color:#000;--post-card-control-input-border-color:#000;--post-card-control-input-bg:#fff}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color:Highlight;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:Highlight;--post-card-control-input-bg:Field}}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control.is-disabled{--post-card-control-border-color:post.$white-alpha-80;--post-card-control-bg:transparent;--post-card-control-color:post.$white-alpha-80;--post-card-control-input-border-color:post.$white-alpha-80;--post-card-control-input-bg:transparent}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control.is-disabled{--post-card-control-border-color:GrayText;--post-card-control-color:GrayText;--post-card-control-input-border-color:GrayText}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control.is-disabled.is-checked{--post-card-control-input-bg:Field}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control{--post-card-control-border-color:FieldText;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:FieldText;--post-card-control-input-bg:Field}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color:FieldText;--post-card-control-bg:SelectedItem;--post-card-control-color:SelectedItemText;--post-card-control-input-border-color:FieldText}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color:Highlight;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:Highlight}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control.is-disabled{--post-card-control-border-color:GrayText;--post-card-control-bg:Field;--post-card-control-color:FieldText;--post-card-control-input-border-color:GrayText;--post-card-control-input-bg:Field}:host(:is([data-context*=\".bg-dark\"],[data-context*=\".bg-black\"],[data-context*=\".bg-primary\"],[data-context*=\".bg-secondary\"],[data-context*=\".bg-success\"],[data-context*=\".bg-error\"])) .card-control.is-disabled.is-checked{--post-card-control-bg:SelectedItem;--post-card-control-color:SelectedItemText}}";
 const PostCardControlStyle0 = postCardControlCss;
 
 let cardControlIds = 0;
-const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl extends HTMLElement {
+const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl extends H {
     EVENT_MAP = {
         input: 'postInput',
         change: 'postChange',
@@ -33,7 +33,48 @@ const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl e
     initialChecked;
     hasIcon;
     get host() { return this; }
+    focused = false;
     internals;
+    /**
+     * Defines the text in the control-label.
+     */
+    label;
+    /**
+     * Defines the description in the control-label.
+     */
+    description = null;
+    /**
+     * Defines the `type` attribute of the control.
+     */
+    type;
+    /**
+     * Defines the `name` attribute of the control.
+     * <span className="banner banner-sm banner-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>
+     * <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+     */
+    name = null;
+    /**
+     * Defines the `value` attribute of the control. <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+     */
+    value = null;
+    /**
+     * Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
+     */
+    checked = false;
+    /**
+     * Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
+     */
+    disabled = false;
+    /**
+     * Defines the validation `validity` of the control.
+     * To reset validity to an undefined state, simply remove the attribute from the control.
+     */
+    validity = null;
+    /**
+     * Defines the icon `name` inside the card.
+     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+     */
+    icon = null;
     /**
      * An event emitted whenever the components checked state is toggled.
      * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
@@ -80,16 +121,6 @@ const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl e
         this.postInput = createEvent(this, "postInput", 7);
         this.postChange = createEvent(this, "postChange", 7);
         this.internals = this.attachInternals();
-        this.focused = false;
-        this.label = undefined;
-        this.description = null;
-        this.type = undefined;
-        this.name = null;
-        this.value = null;
-        this.checked = false;
-        this.disabled = false;
-        this.validity = null;
-        this.icon = null;
         this.cardClickHandler = this.cardClickHandler.bind(this);
         this.controlClickHandler = this.controlClickHandler.bind(this);
         this.controlChangeHandler = this.controlChangeHandler.bind(this);
@@ -236,14 +267,14 @@ const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl e
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: 'd5a554358103f47b5294dc5f6e21e41a78ec383f', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'd9bd511744e04792f456ab2e22c0f48ea8f3234b', class: {
+        return (h(Host, { key: 'a62b814d2579038654a8fef11c6d136e03381320', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '34e5f1092cd886bd5dc69542728a3c406e11cd51', class: {
                 'card-control': true,
                 'is-checked': this.checked,
                 'is-disabled': this.disabled,
                 'is-focused': this.focused,
                 'is-valid': this.validity !== null && this.validity !== 'false',
                 'is-invalid': this.validity === 'false',
-            } }, h("input", { key: '37a7bc7d656aa5527037303daacdb8b8ee26b973', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === 'false', onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: '9482a54b665dc2f2fe254f2656af9cb57cb0fb4b', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: '1b2a1fdb408ea8dcb4649fd76ae848685474f7b5', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '5b9f15b75920c0956730686b52959a9b21a64857' })))));
+            } }, h("input", { key: 'ca21d9eba6b998b26615ae7d92f105b6fe0c2f9f', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === 'false', onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: 'f9b336f63f5f83143bdf2b3b8b2d85a57723b036', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: '813f81b01385aa7721d35c7edbd1494fc178dc4d', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '95658d0b41b293a8fafbef79b3f2c6fa50c95534' })))));
     }
     componentDidRender() {
         this.setHostContext();

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 };

package/dist/components/{post-togglebutton2.js → p-3cee636a.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-2083ae2c.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"]