@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

package/dist/components/p-1KLiMO0w.js

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

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

@@ -0,0 +1,105 @@
+/**
+ * Validates if an event should be processed based on target and nesting criteria
+ * @param event - The event to validate
+ * @param tag - The expected local name of the event target
+ * @param host - The host element for nested component checking
+ * @param ignoreNestedComponents - Whether to ignore events from nested components
+ * @returns true if the event should be processed, false otherwise
+ */
+function shouldProcessEvent(event, tag, host, ignoreNestedComponents) {
+    if (!(event instanceof CustomEvent && event.target instanceof HTMLElement))
+        return false;
+    const eventTarget = event.target;
+    if (eventTarget.localName !== tag)
+        return false;
+    if (ignoreNestedComponents) {
+        // Find the closest parent with the same tag as the host
+        const closestParentWithSameTag = findClosestParentWithTag(eventTarget, host.localName);
+        if (closestParentWithSameTag !== host)
+            return false;
+    }
+    return true;
+}
+/**
+ * Decorator that guards event handlers to only execute when the event meets certain criteria.
+ * @param tag - The local name of the element that should be the target of the event
+ * @param option - Configuration options for the event guard
+ * @param option.ignoreNestedComponents - Whether to ignore events from nested components
+ */
+function EventFrom(tag, option = { ignoreNestedComponents: true }) {
+    return function (target, propertyKey, descriptor) {
+        if (descriptor) {
+            const originalMethod = descriptor.value;
+            descriptor.value = function (event) {
+                if (!shouldProcessEvent(event, tag, this.host, option.ignoreNestedComponents)) {
+                    return;
+                }
+                return originalMethod.call(this, event);
+            };
+        }
+        else {
+            // Creates a hidden storage property for the original method using a 
+            // modified key format (__[property]_original) to avoid naming conflicts
+            const privateKey = `__${propertyKey}_original`;
+            // Create hidden storage for original method
+            Object.defineProperty(target, privateKey, {
+                writable: true,
+                configurable: true
+            });
+            // Replace property with getter/setter
+            Object.defineProperty(target, propertyKey, {
+                // Getter returns original method
+                get() {
+                    return this[privateKey];
+                },
+                // Setter wraps original method with extra code
+                set(originalFunction) {
+                    if (typeof originalFunction === 'function') {
+                        // Store original and add new behavior
+                        this[privateKey] = (event) => {
+                            if (!shouldProcessEvent(event, tag, this.host, option.ignoreNestedComponents)) {
+                                return;
+                            }
+                            return originalFunction.call(this, event);
+                        };
+                    }
+                    else {
+                        this[privateKey] = originalFunction;
+                    }
+                },
+                configurable: true,
+                enumerable: true
+            });
+        }
+    };
+}
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) to find the closest ancestor
+ * that matches the specified tag name.
+ * @param element - The starting element
+ * @param tagName - The tag name to match (e.g., 'post-accordion')
+ * @returns The closest matching ancestor or null if none found
+ */
+function findClosestParentWithTag(element, tagName) {
+    let current = element;
+    while (current) {
+        if (current.localName === tagName) {
+            return current;
+        }
+        // Check regular parent first
+        if (current.parentElement) {
+            current = current.parentElement;
+        }
+        // If no parentElement, check if we're in a shadow root
+        else if (current.parentNode instanceof ShadowRoot) {
+            current = current.parentNode.host;
+        }
+        // No more parents to check
+        else {
+            current = null;
+        }
+    }
+    return null;
+}
+
+export { EventFrom as E };

package/dist/components/{post-menu2.js → p-BLhBouGz.js}

@@ -1,21 +1,30 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './post-popovercontainer2.js';
-import { v as version } from './package.js';
-import { g as getFocusableChildren } from './get-focusable-children.js';
-import { a as checkEmptyOrOneOf } from './index2.js';
-import './breakpoints.js';
-import { e as eventGuard } from './event-guard.js';
-import { g as getRoot } from './get-root.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-elg4VvHg.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { g as getFocusableChildren } from './p-C35MCWIp.js';
+import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { E as EventFrom } from './p-8U5GFtQP.js';
+import { g as getRoot } from './p-DBHo9yGF.js';
 
-const postMenuCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}.popover-container{display:flex;flex-direction:column}";
-const PostMenuStyle0 = postMenuCss;
+const postMenuCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}";
 
-const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLElement {
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.toggleMenu = createEvent(this, "toggleMenu", 7);
+        this.toggleMenu = createEvent(this, "toggleMenu");
         this.lastFocusedElement = null;
         this.KEYCODES = {
             SPACE: ' ',
@@ -27,6 +36,18 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             END: 'End',
             ESCAPE: 'Escape',
         };
+        /**
+         * Defines the position of the menu relative to its trigger.
+         * Menus 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.
+         * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+         */
+        this.placement = 'bottom';
+        /**
+         * Holds the current visibility state of the menu.
+         * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
+         * and updates automatically when the menu is toggled.
+         */
+        this.isVisible = false;
         this.handleKeyDown = (e) => {
             e.stopPropagation();
             if (e.key === this.KEYCODES.ESCAPE) {
@@ -38,21 +59,19 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             }
         };
         this.handlePostToggle = (event) => {
-            eventGuard(this.host, event, { targetLocalName: 'post-popovercontainer', delegatorSelector: 'post-menu' }, () => {
-                this.isVisible = event.detail;
-                this.toggleMenu.emit(this.isVisible);
-                requestAnimationFrame(() => {
-                    if (this.isVisible) {
-                        this.lastFocusedElement = this.root?.activeElement;
-                        const menuItems = this.getSlottedItems();
-                        if (menuItems.length > 0) {
-                            menuItems[0].focus();
-                        }
-                    }
-                    else if (this.lastFocusedElement) {
-                        this.lastFocusedElement.focus();
+            this.isVisible = event.detail;
+            this.toggleMenu.emit(this.isVisible);
+            requestAnimationFrame(() => {
+                if (this.isVisible) {
+                    this.lastFocusedElement = this.root?.activeElement;
+                    const menuItems = this.getSlottedItems();
+                    if (menuItems.length > 0) {
+                        menuItems[0].focus();
                     }
-                });
+                }
+                else if (this.lastFocusedElement) {
+                    this.lastFocusedElement.focus();
+                }
             });
         };
         this.handleClick = (e) => {
@@ -61,8 +80,6 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
                 this.toggle(this.host);
             }
         };
-        this.placement = 'bottom';
-        this.isVisible = false;
     }
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -164,13 +181,13 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: '6d23cab02632b003891301577900c484825f4021', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: '4a0e4ed73449f62ffc1e4bd1c1d3fd73718072bc', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'cabe298c9aeeb6a8d12aaa638a82ac8a2eb2d320', class: "popover-container", part: "popover-container" }, h("slot", { key: 'fe27a3ceda1720b64a77735ef7fe280a4a3d59d9' })))));
+        return (h(Host, { key: 'bca8873f7f98b03d3e6952bce4990d1c435bd5ec', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: '805c1e528c4af6e35b7881395b2f9de9e430f8c8', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'f534119e208f2bb387f39824736aee766f550fa8', part: "menu" }, h("slot", { key: 'ec9ae42dab9aebd93aafdbebd15d8c39736c84df' })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "placement": ["validatePlacement"]
     }; }
-    static get style() { return PostMenuStyle0; }
+    static get style() { return postMenuCss; }
 }, [1, "post-menu", {
         "placement": [1],
         "isVisible": [32],
@@ -180,6 +197,9 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
     }, undefined, {
         "placement": ["validatePlacement"]
     }]);
+__decorate([
+    EventFrom('post-popovercontainer')
+], PostMenu.prototype, "handlePostToggle", void 0);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -198,5 +218,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostMenu as P, defineCustomElement as d };

package/dist/{esm/index-ffccd040.js → components/p-CV7fm1rW.js}

@@ -85,4 +85,4 @@ const checkRequiredAndOneOf = requiredAnd(checkOneOf);
 const checkRequiredAndType = requiredAnd(checkType);
 const checkRequiredAndUrl = requiredAnd(checkUrl);
 
-export { checkEmptyOrOneOf as a, checkRequiredAndType as b, checkRequiredAndOneOf as c, checkEmptyOrType as d, checkEmptyOrPattern as e, checkRequiredAndUrl as f, checkEmptyOrUrl as g };
+export { checkEmptyOrUrl as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkEmptyOrType as e, checkEmptyOrPattern as f, checkRequiredAndUrl as g };

package/dist/components/{post-menu-trigger2.js → p-CaPj3whI.js}

@@ -1,16 +1,19 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-import { g as getRoot } from './get-root.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { g as getRoot } from './p-DBHo9yGF.js';
 
 const postMenuTriggerCss = ":host{display:inline-block}";
-const PostMenuTriggerStyle0 = postMenuTriggerCss;
 
-const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger extends HTMLElement {
+const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger extends H {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
+         */
+        this.ariaExpanded = false;
         /**
          * Reference to the slotted button within the trigger, if present.
          * Used to manage click and key events for menu control.
@@ -22,8 +25,6 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
                 this.handleToggle();
             }
         };
-        this.for = undefined;
-        this.ariaExpanded = false;
     }
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
@@ -53,7 +54,7 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         // Check if the slottedButton is within a web component
         if (!this.slottedButton) {
             const webComponent = this.host.querySelector('.menu-trigger-webc');
-            if (webComponent.shadowRoot) {
+            if (webComponent?.shadowRoot) {
                 const slottedButton = webComponent.shadowRoot.querySelector('button');
                 if (slottedButton) {
                     this.slottedButton = slottedButton;
@@ -79,13 +80,13 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: '4c3732f46a6f1882d38e646b5d23f6c29ad9f4c8', "data-version": version, "tab-index": "-1" }, h("slot", { key: '456dbe219d56fe0826bc208201573c9f977f7f79' })));
+        return (h(Host, { key: '76b3c59cdae5c78cefaaf1ea2a9668a77bddd37e', "data-version": version, "tab-index": "-1" }, h("slot", { key: '3835d87c3795e694f7493ceb735bd638bdd2dea1' })));
     }
     get host() { return this; }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }
-    static get style() { return PostMenuTriggerStyle0; }
+    static get style() { return postMenuTriggerCss; }
 }, [4, "post-menu-trigger", {
         "for": [513],
         "ariaExpanded": [32]
@@ -105,5 +106,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostMenuTrigger as P, defineCustomElement as d };

package/dist/components/{post-breadcrumb-item2.js → p-Cpaqct04.js}

@@ -1,19 +1,16 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { g as checkEmptyOrUrl } from './index2.js';
-import './breakpoints.js';
-import { d as defineCustomElement$1 } from './post-icon2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { a as checkEmptyOrUrl } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { d as defineCustomElement$1 } from './p-fmA57Ivd.js';
 
 const postBreadcrumbItemCss = ":host{display:flex;align-items:center;justify-content:start;gap:var(--post-device-spacing-gap-inline-5)}:host post-icon{box-sizing:border-box;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}.breadcrumb-item{white-space:nowrap;line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item{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}.breadcrumb-item: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){.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item: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){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}";
-const PostBreadcrumbItemStyle0 = postBreadcrumbItemCss;
 
-const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbItem extends HTMLElement {
+const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbItem extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.url = undefined;
-        this.fullUrl = undefined;
     }
     validateUrl() {
         try {
@@ -47,13 +44,13 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
     }
     render() {
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: '8db753265537822996e971b6910284246ed0c9b2', "data-version": version }, h("post-icon", { key: '5a40f01b5876337f6dff6117b61d0138b0c85d1e', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '8a023863726927eca0f222a27f9b8946bc6c3b57', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'f98dd0552ff91b845bb838518cc619d613f57e5c' }))));
+        return (h(Host, { key: '872c34ab9464ab8c48ad3e3f8af3f44b4c3dcd54', "data-version": version }, h("post-icon", { key: '7637ec79d84bb72ed8066789f3e5b07925e1ca9a', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: 'fd3f54306a49821af4267596a308f6043d4d4ac3', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: '09e41b58cba991ec5ce4e15aa248aba49f459592' }))));
     }
     get host() { return this; }
     static get watchers() { return {
         "url": ["validateUrl"]
     }; }
-    static get style() { return PostBreadcrumbItemStyle0; }
+    static get style() { return postBreadcrumbItemCss; }
 }, [1, "post-breadcrumb-item", {
         "url": [1],
         "fullUrl": [32]
@@ -78,5 +75,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostBreadcrumbItem as P, defineCustomElement as d };

package/dist/components/p-CtNCtg2z.js

@@ -0,0 +1,114 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
+import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { E as EventFrom } from './p-8U5GFtQP.js';
+import { n as nanoid } from './p-BLchVpF6.js';
+import { d as defineCustomElement$3 } from './p-DphlfQse.js';
+import { d as defineCustomElement$2 } from './p-D3LhzIrC.js';
+import { d as defineCustomElement$1 } from './p-fmA57Ivd.js';
+
+const postAccordionItemCss = ".accordion-item::after{display:block;content:\"\";margin-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-item:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-item:has(.accordion-button:hover)::after{border-color:Highlight}}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{display:block;position:absolute;content:\"\";inset:0;inset-block-end:auto;border-block-start-width:var(--post-accordion-button-border-top-width, var(--post-device-border-width-default));border-block-start-style:var(--post-core-border-style-solid);border-block-start-color:var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-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}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * If `true`, the element is collapsed otherwise it is displayed.
+         */
+        this.collapsed = false;
+    }
+    validateHeadingLevel() {
+        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS);
+    }
+    componentWillLoad() {
+        this.id = this.host.id || `p${nanoid(6)}`;
+    }
+    componentDidLoad() {
+        this.validateHeadingLevel();
+    }
+    // Capture to make sure the "collapsed" property is updated before the event is consumed
+    onCollapseToggle(event) {
+        this.collapsed = !event.detail;
+    }
+    /**
+     * Triggers the collapse programmatically.
+     */
+    async toggle(force) {
+        return this.collapsible.toggle(force);
+    }
+    onSlotLogoChange() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
+    componentWillRender() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
+    render() {
+        const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
+        const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
+        return (h(Host, { key: 'd7176f314fa0f907bd5b69555a2f25561f3875cf', id: this.id, "data-version": version }, h("div", { key: '978c451798e5bafe38ef57be29818f02ccf49dab', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '615da8a2ad5fb3c3fd1e5e0c2c8ee9a260a34263', for: `${this.id}--collapse` }, h(HeadingTag, { key: '9c270ded36f1e1b1b466ba8c4ca529ab26368d5c', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'ddf278d1ccf6d78932ae4c6a9617d5852fb73064', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '3989145bdbe0a313c6ed10220d2089c89688d613', class: {
+                'logo-container': true,
+                'has-image': !!this.slottedLogo,
+            } }, h("slot", { key: 'dd053bf73234db3bac772bf730003b4f2cc030cb', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '9ac06513d55828a9d7a3552aa66c9946fde7c793', name: "header" }), h("post-icon", { key: 'fb46c528581e1a149706fd9e124857cc288747f8', name: "2051" })))), h("post-collapsible", { key: '996887d6a0098a37dbac8d5edb950900f57d15f7', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '21fa64a007cf0da4e0c0cf56f5862641d016517a', class: "accordion-body", part: "body" }, h("slot", { key: '2a9f7731183e35c37523e079d437612dbda1a01b' }))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "headingLevel": ["validateHeadingLevel"]
+    }; }
+    static get style() { return postAccordionItemCss; }
+}, [1, "post-accordion-item", {
+        "collapsed": [1028],
+        "headingLevel": [2, "heading-level"],
+        "id": [32],
+        "slottedLogo": [32],
+        "toggle": [64]
+    }, [[2, "postToggle", "onCollapseToggle"]], {
+        "headingLevel": ["validateHeadingLevel"]
+    }]);
+__decorate([
+    EventFrom('post-accordion-item')
+], PostAccordionItem.prototype, "onCollapseToggle", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostAccordionItem);
+            }
+            break;
+        case "post-collapsible":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-collapsible-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { PostAccordionItem as P, defineCustomElement as d };