@swisspost/design-system-components 9.0.0-next.32 → 9.0.0-next.34

package/loaders/post-accordion-item2.js

@@ -2,6 +2,8 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { b as checkEmptyOrOneOf } from './index2.js';
+import './breakpoints.js';
+import { e as eventGuard } from './event-guard.js';
 import { n as nanoid } from './index.browser.js';
 import { d as defineCustomElement$3 } from './post-collapsible2.js';
 import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
@@ -20,8 +22,6 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         this.collapsed = false;
         this.headingLevel = undefined;
     }
-    collapsible;
-    get host() { return this; }
     validateHeadingLevel() {
         checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }
@@ -31,12 +31,11 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     componentDidLoad() {
         this.validateHeadingLevel();
     }
-    // capture to make sure the "collapsed" property is updated before the event is consumed
+    // Capture to make sure the "collapsed" property is updated before the event is consumed
     onCollapseToggle(event) {
-        if (event.target === this.host &&
-            event.target.localName === 'post-accordion-item') {
+        eventGuard(this.host, event, { targetLocalName: 'post-collapsible', delegatorSelector: 'post-accordion-item' }, () => {
             this.collapsed = !event.detail;
-        }
+        });
     }
     /**
      * Triggers the collapse programmatically.
@@ -53,11 +52,12 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: '4c4baf7ac22c632de6b0bc332ffc275e50bb4d71', id: this.id, "data-version": version }, h("div", { key: '576529323c3adca347ec685688c071e21a2f3a76', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: 'cc29c396173e55168a3bec963d5e101cb3fb17b2', for: `${this.id}--collapse` }, h(HeadingTag, { key: '76f8eed33f0c84bf6e1a534b04a8ccc0c69c6380', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'f56e67ffc94fea0452d1879d3410318b3b12c4bc', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'd5f23318d5c498e0cd9dd1f15c13a636e49b7817', class: {
+        return (h(Host, { key: '725d3710f7937f82c2382938d15770001e923b61', id: this.id, "data-version": version }, h("div", { key: '679d25d8278fbf9ae68546ee50c27a86ded95999', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '7c2af8dc6a1f5265b4ae2cad066be7d2e0bf6a78', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'a10e59a17fdb272fe6308d2ba98f37f90490fab8', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'e2b527850c8342a8adf99453d0ac330b6a94760f', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'b722a4bc51757546eefa58c7c3ea3a688838298a', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: '051d48cc4201e2d954f4d4bc25c836ddc8e24d0f', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'e9f687c79fab8bd3bd94e4da022b2aea7e0bba5c', name: "header" }), h("post-icon", { key: 'c1f3486254269ab50a89bd6acf8c714cbbced3b8', name: "2051" })))), h("post-collapsible", { key: '7f3788a90e59cdb4f985fd14c64286cb938a3c23', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'e17ae656614ac27d4f09ebba0a7bb547f88f5728', class: "accordion-body", part: "body" }, h("slot", { key: '0387ebe5ce518bbb8b78c66d919715a78b5ae558' }))))));
+            } }, h("slot", { key: '1a42494db72a7b437b1d98fa2e8159d73ece22fa', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '049865bb25f833780ef8e27fe8477e06476a2427', name: "header" }), h("post-icon", { key: 'da0cf7078e4f51710dbfd39c0afa90465fcb53c6', name: "2051" })))), h("post-collapsible", { key: '7c3b268e34d3e4f52820b11a6c090aefbc16e3b9', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '993a7fffbccb557aed2842305f3927e5c3b5047a', class: "accordion-body", part: "body" }, h("slot", { key: '580eb87b1cb4f88acd7dddddecaa1c1982b7f6e3' }))))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]
     }; }

package/loaders/post-accordion.js

@@ -2,6 +2,8 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { c as checkOneOf } from './check-one-of.js';
+import './breakpoints.js';
+import { e as eventGuard } from './event-guard.js';
 
 const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:not(:only-of-type):first-of-type){--post-accordion-button-border-top:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}";
 const PostAccordionStyle0 = postAccordionCss;
@@ -11,12 +13,10 @@ const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion ext
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.expandedItems = new Set();
         this.headingLevel = undefined;
         this.multiple = false;
     }
-    accordionItems;
-    expandedItems = new Set();
-    get host() { return this; }
     validateHeadingLevel(newValue = this.headingLevel) {
         if (!newValue)
             return;
@@ -30,10 +30,7 @@ const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion ext
         this.validateHeadingLevel();
     }
     collapseToggleHandler(event) {
-        event.stopPropagation();
-        const toggledItem = event.target;
-        const closestParentAccordion = toggledItem.closest('post-accordion');
-        if (closestParentAccordion === this.host && toggledItem.localName === 'post-accordion-item') {
+        eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion' }, () => {
             const toggledAccordionItem = event.target;
             const isClosing = this.expandedItems.has(toggledAccordionItem);
             if (isClosing) {
@@ -44,13 +41,13 @@ const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion ext
             }
             if (this.multiple || isClosing)
                 return;
-            // close other open accordion items to have only one opened at a time
+            // Close other open accordion items to ensure only one is open at a time
             Array.from(this.expandedItems.values())
                 .filter(item => item !== toggledAccordionItem)
                 .forEach(item => {
                 item.toggle(false);
             });
-        }
+        });
     }
     /**
      * Toggles the `post-accordion-item` with the given id.
@@ -96,8 +93,9 @@ const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion ext
         });
     }
     render() {
-        return (h(Host, { key: '9ec8ca1ceac6587be68272568f216c958460ac0a', "data-version": version }, h("div", { key: '99887626d105f0e8f86b24e211591e7be820738d', class: "accordion" }, h("slot", { key: '4d8a003377c3a90648818a00144fd5f3a65be084', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '80e15cf7835f213cfee1ca7cf83cc2fd24bba3ff', "data-version": version }, h("div", { key: '1cf03d4960115b52394b5cb07cd2286747c728dd', class: "accordion" }, h("slot", { key: 'b94328a45a3cba6a8d3b418061036eb8af2cf027', onSlotchange: () => this.registerAccordionItems() }))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]
     }; }

package/loaders/post-avatar.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
+import './breakpoints.js';
 
 const postAvatarCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.initials span:not(caption){position:absolute !important}";
 const PostAvatarStyle0 = postAvatarCss;
@@ -32,8 +33,6 @@ const PostAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H
         this.imageAlt = '';
         this.initials = '';
     }
-    static INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
-    get host() { return this; }
     validateFirstname() {
         checkNonEmpty(this, 'firstname');
     }
@@ -135,12 +134,13 @@ const PostAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H
         }, []);
         return (h(Host, { "data-version": version }, h("slot", { onSlotchange: this.onSlotDefaultChange.bind(this) }, this.avatarType === 'image' && h("img", { src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && h("div", { class: "initials" }, initials))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "firstname": ["validateFirstname"]
     }; }
     static get style() { return PostAvatarStyle0; }
 }, [1, "post-avatar", {
-        "firstname": [1],
+        "firstname": [513],
         "lastname": [1],
         "userid": [1],
         "email": [1],
@@ -152,6 +152,7 @@ const PostAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H
     }, undefined, {
         "firstname": ["validateFirstname"]
     }]);
+PostAvatar$1.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/loaders/post-back-to-top.js

@@ -3,9 +3,10 @@ import { s as slideDown, a as slideUp } from './slide.js';
 import { v as version } from './package.js';
 import { c as checkType } from './check-type.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
+import './breakpoints.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
-const postBackToTopCss = ":host{--post-floating-button-translate-y:calc(-1 * var(--post-core-dimension-112));position:fixed;inset-block-start:var(--post-device-position-4);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{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;box-shadow:var(--post-device-elevation-300);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{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 .back-to-top: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){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top: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){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const postBackToTopCss = ":host{--post-floating-button-position-top:var(--post-device-position-4);--post-back-to-top-position-top:calc( var(--post-header-height) + var(--post-floating-button-position-top) );--post-back-to-top-elevation:var(--post-device-elevation-300);position:fixed;inset-block-start:var(--post-back-to-top-position-top);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{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;box-shadow:var(--post-back-to-top-elevation);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{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 .back-to-top: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){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top: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){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 const PostBackToTopStyle0 = postBackToTopCss;
 
 const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop extends HTMLElement {
@@ -13,18 +14,16 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.handleScroll = () => {
+            this.belowFold = this.isBelowFold();
+        };
         this.label = undefined;
         this.belowFold = false;
     }
-    get host() { return this; }
-    translateY;
     isBelowFold() {
         return window.scrollY > window.innerHeight;
     }
-    handleScroll = () => {
-        this.belowFold = this.isBelowFold();
-    };
-    // Watch for changes in belowFold
+    /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
             slideDown(this.host, this.translateY);
@@ -36,12 +35,41 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     scrollToTop() {
         window.scrollTo({
             top: 0,
+            behavior: 'smooth',
         });
     }
+    getSecondPixelValue(parts) {
+        for (const part of parts) {
+            const pixelValues = part.match(/\b\d+px\b/g);
+            if (pixelValues && pixelValues.length > 1) {
+                return pixelValues[1];
+            }
+        }
+    }
+    animateButton() {
+        // Get the back-to-top button top postiion
+        const positionTop = window.getComputedStyle(this.host).getPropertyValue('top');
+        const buttonElement = this.host.shadowRoot.querySelector('button');
+        // Extract the elevation height from the back-to-top button elevation token
+        const elevation = getComputedStyle(buttonElement).getPropertyValue('--post-back-to-top-elevation');
+        const elevationParts = elevation.split(',');
+        const elevationHeight = this.getSecondPixelValue(elevationParts);
+        // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
+        this.translateY =
+            String((-1 * 100) / 100 -
+                parseFloat(positionTop.replace('px', '')) -
+                parseFloat(elevationHeight.replace('px', ''))) + 'px';
+        if (this.belowFold) {
+            slideDown(this.host, this.translateY);
+        }
+        if (!this.belowFold) {
+            this.host.style.transform = `translateY(${this.translateY})`;
+        }
+    }
     // Validate the label
     validateLabel() {
-        checkType(this, 'label', 'string');
         checkNonEmpty(this, 'label');
+        checkType(this, 'label', 'string');
     }
     // Set the initial state
     componentWillLoad() {
@@ -49,31 +77,23 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     }
     componentDidLoad() {
         window.addEventListener('scroll', this.handleScroll, false);
-        this.translateY = window
-            .getComputedStyle(this.host)
-            .getPropertyValue('--post-floating-button-translate-y');
-        if (!this.belowFold) {
-            this.host.style.transform = `translateY(${this.translateY})`;
-        }
-        // Initial load
-        if (this.belowFold) {
-            slideUp(this.host, this.translateY);
-        }
+        this.animateButton();
         this.validateLabel();
     }
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: '4d8c4e05ebcdd088c924ac0329b2238eb1d3c6ca', "data-version": version }, h("button", { key: 'fc37aff8558d7eb4b27a870f11133fc6984f4e11', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '4b978c44982ec0b02798ce75766b2acdd8497412', "aria-hidden": "true", name: "3026" }), h("span", { key: '4a899be348a6c8721696c634970773cd77f685d9', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: 'c1ab6c5e7619ad829d64aea16c59a923310cf091', "data-version": version }, h("button", { key: '99e10e4d16c8d82521b001c3b3d902d8ba47ee92', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '5a6a1b472b45fcc466127ece7091617e4700ee16', "aria-hidden": "true", name: "3026" }), h("span", { key: 'c8502e4822347d48034f6a936203e3314c7ae91e', class: "visually-hidden" }, this.label))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "belowFold": ["watchBelowFold"],
         "label": ["validateLabel"]
     }; }
     static get style() { return PostBackToTopStyle0; }
 }, [1, "post-back-to-top", {
-        "label": [1],
+        "label": [513],
         "belowFold": [32]
     }, undefined, {
         "belowFold": ["watchBelowFold"],

package/loaders/post-banner.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { v as version } from './package.js';
 import { f as fadeOut } from './fade.js';
 import { a as checkEmptyOrPattern, b as checkEmptyOrOneOf } from './index2.js';
+import './breakpoints.js';
 import { n as nanoid } from './index.browser.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 import { c as checkType } from './check-type.js';
@@ -28,7 +29,6 @@ const PostBanner$1 = /*@__PURE__*/ proxyCustomElement(class PostBanner extends H
         this.icon = undefined;
         this.type = 'neutral';
     }
-    get host() { return this; }
     validateDismissible() {
         checkType(this, 'dismissible', 'boolean');
         setTimeout(() => this.validateDismissLabel());
@@ -44,11 +44,6 @@ const PostBanner$1 = /*@__PURE__*/ proxyCustomElement(class PostBanner extends H
     validateType() {
         checkEmptyOrOneOf(this, 'type', BANNER_TYPES);
     }
-    /**
-     * An event emitted when the banner element is dismissed, after the transition.
-     * It has no payload and only relevant for dismissible banners.
-     */
-    postDismissed;
     componentDidLoad() {
         this.validateDismissible();
         this.validateIcon();
@@ -85,6 +80,7 @@ const PostBanner$1 = /*@__PURE__*/ proxyCustomElement(class PostBanner extends H
         ];
         return (h(Host, { key: 'ec72012fa82e03b0dca2368025449e1942731c21', "data-version": version }, h("div", { key: 'acae7ac34af951ca9176769ab4bcdc388d769931', role: "alert", class: this.classes, part: this.classes }, this.dismissible && (h("button", { key: '23cc4d77c2825bc76cedcdc321b80b9b0f333e71', class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { key: '2f0753d49fc86f19df743f33a086c14b2a0686f7', class: "visually-hidden" }, this.dismissLabel))), this.icon && this.icon !== 'none' && (h("post-icon", { key: `${this.bannerId}-icon`, name: this.icon })), this.hasActions ? actionBannerContent : defaultBannerContent)));
     }
+    get host() { return this; }
     static get watchers() { return {
         "dismissible": ["validateDismissible"],
         "dismissLabel": ["validateDismissLabel"],

package/loaders/post-breadcrumb-item2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { e as checkEmptyOrUrl } from './index2.js';
+import './breakpoints.js';
 import { d as defineCustomElement$1 } from './post-icon2.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}}";
@@ -14,8 +15,6 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
         this.url = undefined;
         this.fullUrl = undefined;
     }
-    get host() { return this; }
-    validUrl;
     validateUrl() {
         try {
             this.validUrl = this.constructUrl(this.url);
@@ -50,6 +49,7 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
         return (h(Host, { key: 'd0444118aa031f4cf6f5161d7aa21900e9768348', "data-version": version }, h("post-icon", { key: '719a76e6e86bbb02526c4610acefb3ad253454af', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '3f5ffb9c77567dba35efa7938029cd519de55474', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'bb1be29905c1533f2238a47a346fb35d6a7645fd' }))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "url": ["validateUrl"]
     }; }

package/loaders/post-breadcrumb.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { d as checkUrl } from './index2.js';
-import { d as debounce } from './debounce.js';
+import './breakpoints.js';
 import { d as defineCustomElement$7 } from './post-breadcrumb-item2.js';
 import { d as defineCustomElement$6 } from './post-icon2.js';
 import { d as defineCustomElement$5 } from './post-menu2.js';
@@ -9,6 +9,16 @@ import { d as defineCustomElement$4 } from './post-menu-item2.js';
 import { d as defineCustomElement$3 } from './post-menu-trigger2.js';
 import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
 
+function debounce(callback, timeout = 200) {
+    let id;
+    return (...args) => {
+        if (id) {
+            clearTimeout(id);
+        }
+        id = setTimeout(callback, timeout, ...args);
+    };
+}
+
 const postBreadcrumbCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:flex;align-items:center}.breadcrumbs-nav{display:flex;align-items:center}.hidden-items{gap:var(--post-device-spacing-gap-inline-4);position:absolute;height:0;overflow:hidden;white-space:nowrap}.breadcrumbs-list{display:flex;flex-wrap:nowrap;position:relative;margin:0;padding:0;list-style:none;align-items:center;height:100%;gap:var(--post-device-spacing-gap-inline-4)}post-icon{display:inline-block;box-sizing:border-box;color:var(--post-scheme-color-interactive-primary-enabled-fg1);height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.breadcrumb-item-icon{padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}li a{display:flex;align-items:center}li a{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}li a: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){li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){li a: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){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}li a:focus{border-radius:var(--post-device-border-radius-focus)}li a .home-icon{padding-block:var(--post-device-spacing-padding-4);padding-inline:var(--post-device-spacing-padding-4)}li a .home-icon:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a .home-icon a,li a .home-icon:focus,li a .home-icon:hover{color:CanvasText !important}}.menu-trigger-wrapper{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.actual-menu{display:flex;align-items:center}post-menu-trigger{display:flex;align-items:center;padding-block:var(--post-device-spacing-padding-block-7)}post-menu-trigger{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-menu-trigger: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-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-trigger: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-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-menu-trigger:focus{border-radius:var(--post-device-border-radius-focus)}post-menu-trigger button{background:none;border:none;line-height:150%;font-size:var(--post-device-font-size-6);cursor:pointer;padding:0;color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-menu-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger button a,post-menu-trigger button:focus,post-menu-trigger button:hover{color:LinkText !important}}post-menu::part(popover-container){display:flex;flex-direction:column;align-items:start;padding:.6rem;gap:var(--post-device-spacing-gap-inline-4)}post-menu::part(popover-container) ::slotted(post-menu-item:not(:last-child)){margin-block-end:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;justify-content:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item a{text-decoration:none;color:var(--post-scheme-color-surface-default-fg);line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);font-size:var(--post-device-font-size-6)}.breadcrumb-item a{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 a: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 a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item a: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 a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item a:focus-visible{border-radius:var(--post-device-border-radius-focus)}.breadcrumb-item span:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item span: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 a,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}post-breadcrumb-item:last-of-type{pointer-events:none;color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}post-breadcrumb-item:last-of-type:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}";
 const PostBreadcrumbStyle0 = postBreadcrumbCss;
 
@@ -17,15 +27,28 @@ const PostBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb e
         super();
         this.__registerHost();
         this.__attachShadow();
+        // Waits for breadcrumb navigation reference to be available
+        this.waitForBreadcrumbRef = debounce(() => {
+            if (this.breadcrumbNavRef?.clientWidth > 0) {
+                this.checkConcatenation();
+            }
+            else {
+                this.waitForBreadcrumbRef();
+            }
+        }, 50);
+        // Handles resizing to check concatenation
+        this.handleResize = () => {
+            if (window.innerWidth === this.lastWindowWidth)
+                return;
+            this.lastWindowWidth = window.innerWidth;
+            this.checkConcatenation();
+        };
         this.homeUrl = undefined;
         this.homeText = 'Home';
         this.breadcrumbItems = [];
         this.isConcatenated = undefined;
         this.lastWindowWidth = undefined;
     }
-    get host() { return this; }
-    breadcrumbNavRef;
-    lastItem;
     validateUrl() {
         checkUrl(this, 'homeUrl');
     }
@@ -39,15 +62,6 @@ const PostBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb e
     disconnectedCallback() {
         window.removeEventListener('resize', this.handleResize);
     }
-    // Waits for breadcrumb navigation reference to be available
-    waitForBreadcrumbRef = debounce(() => {
-        if (this.breadcrumbNavRef?.clientWidth > 0) {
-            this.checkConcatenation();
-        }
-        else {
-            this.waitForBreadcrumbRef();
-        }
-    }, 50);
     // Updates breadcrumb items and sets the last item
     updateBreadcrumbItems() {
         this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
@@ -56,13 +70,6 @@ const PostBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb e
         }));
         this.lastItem = this.breadcrumbItems[this.breadcrumbItems.length - 1];
     }
-    // Handles resizing to check concatenation
-    handleResize = () => {
-        if (window.innerWidth === this.lastWindowWidth)
-            return;
-        this.lastWindowWidth = window.innerWidth;
-        this.checkConcatenation();
-    };
     // Determines parent width for concatenation logic
     getParentWidth() {
         let parent = this.host.parentNode;
@@ -109,6 +116,7 @@ const PostBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb e
                 }
             } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '31d86d933720b5f6f6928ccfd251443261e9479e', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '3248d32aa6a73c97c3071be85174fb8634d4e722', class: "hidden-items" }, h("a", { key: '05b0231d3a5793588aa9ede628a7b1e6d2e2faf0', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '15a63a894124717cfb2be61779c3971772c38397', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '6c893c56b6a34f311fa66d71c4cb523b00535458', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "homeUrl": ["validateUrl"]
     }; }

package/loaders/post-card-control.js

@@ -1,6 +1,7 @@
 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 './breakpoints.js';
 import { v as version } from './package.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
@@ -9,42 +10,6 @@ const PostCardControlStyle0 = postCardControlCss;
 
 let cardControlIds = 0;
 const PostCardControl$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl extends HTMLElement {
-    EVENT_MAP = {
-        input: 'postInput',
-        change: 'postChange',
-    };
-    KEYCODES = {
-        SPACE: 'Space',
-        LEFT: 'ArrowLeft',
-        UP: 'ArrowUp',
-        RIGHT: 'ArrowRight',
-        DOWN: 'ArrowDown',
-    };
-    group = {
-        hosts: [],
-        members: [],
-        first: null,
-        last: null,
-        checked: null,
-        focused: null,
-    };
-    control;
-    controlId = `PostCardControl_${cardControlIds++}`;
-    initialChecked;
-    hasIcon;
-    get host() { return this; }
-    internals;
-    /**
-     * 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.
-     */
-    postInput;
-    /**
-     * 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.
-     * <span className="banner banner-sm banner-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
-     */
-    postChange;
     /**
      * A public method to reset the controls `checked` and `validity` state.
      * The validity state is set to `null`, so it's neither valid nor invalid.
@@ -80,6 +45,26 @@ const PostCardControl$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
         this.postInput = createEvent(this, "postInput", 7);
         this.postChange = createEvent(this, "postChange", 7);
         this.internals = this.attachInternals();
+        this.EVENT_MAP = {
+            input: 'postInput',
+            change: 'postChange',
+        };
+        this.KEYCODES = {
+            SPACE: 'Space',
+            LEFT: 'ArrowLeft',
+            UP: 'ArrowUp',
+            RIGHT: 'ArrowRight',
+            DOWN: 'ArrowDown',
+        };
+        this.group = {
+            hosts: [],
+            members: [],
+            first: null,
+            last: null,
+            checked: null,
+            focused: null,
+        };
+        this.controlId = `PostCardControl_${cardControlIds++}`;
         this.focused = false;
         this.label = undefined;
         this.description = null;
@@ -236,14 +221,14 @@ const PostCardControl$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: '6d243226748befc5cdc25f567672859700b04825', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '0e974eed3c642ca13fa86883c27c0c1e6344d7fd', class: {
+        return (h(Host, { key: '9172642a4424a3393c0738feba3a3ef8dcea43e8', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'd6e47613dfe9d33647fd2379010275d70cbcbdcb', 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: 'bd2a44b835eef5ad2927b3d39721e430deccaf9d', 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: 'a05fc353909de0be2cde8c306bfdc6e7248a59bf', 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: '348dc3bea78771041ad19530c7265fba2ea189dd', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '7e6198e8e3ec1d2aec677be55c5fe8828198e9d7' })))));
+            } }, h("input", { key: '44b0e5d5c2c6a759300979a5c33c2a65afaaa27d', 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: 'fd3106562bfcb5ca0e7e5704272f927bfb201af5', 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: 'ebfa245a0e2b6e45384586408614ce85494fbc58', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '99b406bc58fbfcd054f1b551a453a7ac1f4276f6' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -266,6 +251,7 @@ const PostCardControl$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
         this.reset();
     }
     static get formAssociated() { return true; }
+    get host() { return this; }
     static get watchers() { return {
         "label": ["validateControlLabel"],
         "type": ["validateControlType"],
@@ -274,7 +260,7 @@ const PostCardControl$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
     }; }
     static get style() { return PostCardControlStyle0; }
 }, [65, "post-card-control", {
-        "label": [1],
+        "label": [513],
         "description": [1],
         "type": [1],
         "name": [1],

package/loaders/post-closebutton.js

@@ -2,16 +2,21 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
+const postClosebuttonCss = ".btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const PostClosebuttonStyle0 = postClosebuttonCss;
+
 const PostClosebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostClosebutton extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
     }
-    get host() { return this; }
     render() {
-        return (h(Host, { key: 'c03f50379252ba13992bc3d021989ac07dba9f79', "data-version": version }, h("button", { key: 'e97a86bb6e1eace89a1a3a78fb231047f065dd5e', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'aca522d4c251a8183c91c2bd4d810d0716a2fe13', "aria-hidden": "true", name: "closex" }), h("span", { key: '6873522961b1683d1261163b07ee022f93eed836', class: "visually-hidden" }, h("slot", { key: 'bf4b13356c9a0164f1481d1fedc3a78a53e5f8e0' })))));
+        return (h(Host, { key: 'cfa55f799fdf9ad0f3ac1eb296e063b5001de997', "data-version": version }, h("button", { key: '7c8a084f6d7278329ddfb5fc4b2b8f992a185666', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'fc74ccb4f0c4c091a02a41cdef918d6c3b065c8c', "aria-hidden": "true", name: "closex" }), h("span", { key: '98478b013714df6d82c6c2f533ac8ecd2abae778', class: "visually-hidden" }, h("slot", { key: '109e2bca4436986dd037d8c29088cc79395bc200' })))));
     }
-}, [4, "post-closebutton"]);
+    get host() { return this; }
+    static get style() { return PostClosebuttonStyle0; }
+}, [1, "post-closebutton"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;