@swisspost/design-system-components 10.0.0-next.54 → 10.0.0-next.56

package/dist/components/post-breadcrumb-item2.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { a as checkEmptyOrUrl } from './index2.js';
-import './breakpoints.js';
+import { a as checkEmptyOrUrl } from './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}}";
@@ -44,7 +43,7 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
     }
     render() {
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: '9ccdcf67335a106fd70e1d756a941736827454c0', "data-version": version }, h("post-icon", { key: 'c2061015e34cc3c37d343abd872bd8bd3cc82615', name: "chevronright", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '3e9659ac705d801699167864a06cde461bc84185', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'e86e3333db8b0636a9a9635a5f11960c7d839e3d' }))));
+        return (h(Host, { key: 'ea3421ed24d2db8fc8c647eeafd04032996a4ae5', "data-version": version }, h("post-icon", { key: 'f2278fc5c68bbf509a44e53ec7f789d396bd75f1', name: "chevronright", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '60d899795489fdbe9246fda24623289b5994af72', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: '7d87b12cba90f865ef02e1c66fd600703c00456e' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-breadcrumbs.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { g as checkRequiredAndUrl, c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
+import { f as checkRequiredAndUrl, c as checkRequiredAndType } from './breakpoints.js';
+import { d as debounce } from './debounce.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,16 +9,6 @@ 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 postBreadcrumbsCss = ":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 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}}li[aria-current=page] post-breadcrumb-item{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)}li[aria-current=page] post-breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
 const PostBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs extends HTMLElement {
@@ -47,23 +37,23 @@ const PostBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs
     validateHomeUrl() {
         checkRequiredAndUrl(this, 'homeUrl');
     }
-    validateHomeText() {
-        checkRequiredAndType(this, 'homeText', 'string');
+    validateTextHome() {
+        checkRequiredAndType(this, 'textHome', 'string');
     }
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
+    validateTextBreadcrumbs() {
+        checkRequiredAndType(this, 'textBreadcrumbs', 'string');
     }
-    validateMenuLabel() {
-        checkRequiredAndType(this, 'menuLabel', 'string');
+    validateTextMoreItems() {
+        checkRequiredAndType(this, 'textMoreItems', 'string');
     }
     componentWillLoad() {
         this.updateBreadcrumbItems();
     }
     componentDidLoad() {
         this.validateHomeUrl();
-        this.validateHomeText();
-        this.validateLabel();
-        this.validateMenuLabel();
+        this.validateTextHome();
+        this.validateTextBreadcrumbs();
+        this.validateTextMoreItems();
         window.addEventListener('resize', this.handleResize);
         this.waitForBreadcrumbsRef();
     }
@@ -111,40 +101,40 @@ const PostBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: '0c98c8ea09e4f17781fd8c404d445bd42aaacad5', "data-version": version }, h("nav", { key: 'aefa39943fd6ccbfcb2f01b19266785644bb4e32', "aria-label": this.label, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: 'd9542316f160f5fc98ca1ddadc27db5f24df78a1', class: "no-list breadcrumbs-list" }, h("li", { key: '3b4c9798492ffa8a6cbc65081efa08c3793a1325' }, h("a", { key: 'f7fd7c962d548a372198b5b1640a9f63fa36a809', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '3aa94c9eca27de39a9e564ec719eea4d821a6692', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '04e54f7e16c21dcf0dcee0d9a8753e09d1382605', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("li", { class: "menu-trigger-wrapper" }, h("post-icon", { name: "chevronright", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0, onKeyDown: e => {
+        return (h(Host, { key: 'f3c59a174634a6ca6d3b9beceb455563275d04a6', "data-version": version }, h("nav", { key: 'cdc7cd4bbad53c57cdcbb735804b548f20b39523', "aria-label": this.textBreadcrumbs, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '419658d8f58822c3fbf8e58bfc0069f629fc46d9', class: "no-list breadcrumbs-list" }, h("li", { key: '52348e55a01f3236957e23fc502cce6cbb4eadb9' }, h("a", { key: '8d1d8acff9f33c52e82ff4ce920c3f6a8418cdaa', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '1aca58d1afb96580f4b2f744dd972a1556fd9ad3', class: "visually-hidden" }, this.textHome), h("post-icon", { key: 'dfe6d8b330f718408ac82024ebd89e13382119bf', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("li", { class: "menu-trigger-wrapper" }, h("post-icon", { name: "chevronright", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleBreadcrumbItemClick();
                 }
-            } }, h("button", { class: "btn", tabIndex: -1 }, "...")), h("post-menu", { id: "breadcrumb-menu", label: this.menuLabel }, visibleItems.map(item => (h("post-menu-item", { key: item.url || item.text, class: "breadcrumb-item", onKeyDown: e => {
+            } }, h("button", { class: "btn", tabIndex: -1 }, "...")), h("post-menu", { id: "breadcrumb-menu", label: this.textMoreItems }, visibleItems.map(item => (h("post-menu-item", { key: item.url || item.text, class: "breadcrumb-item", onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     const linkElement = e.currentTarget.querySelector('a');
                     linkElement?.click();
                     e.preventDefault();
                 }
-            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("li", null, h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text))))), this.lastItem && (h("li", { key: '5209d2ddf74d62f792bb472825f699acaf30bc07', "aria-current": "page" }, h("post-breadcrumb-item", { key: '0b8aa3f765e776c2fa971f7c8762280194cc1b0f', url: this.lastItem.url, tabindex: -1 }, this.lastItem.text)))), h("div", { key: '704affacb1515b48e4b129f1ef2c2d314ddd00d6', class: "hidden-items" }, h("a", { key: '2562e65299bff39a0d1c8d4b20d2ecc4d6747f4c', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '75d352977ecd05fc5fa2bb5f26ed40e809961c3d', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'b24fbc251d0a519fa03f85dd36413f3c79ece47c', 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)))))));
+            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("li", null, h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text))))), this.lastItem && (h("li", { key: '13d8b9834218f995a2e7404227c288ef6e87f583', "aria-current": "page" }, h("post-breadcrumb-item", { key: 'eb1b375fa201d81fa84a3b30cff0f64f58bfd3a4', url: this.lastItem.url, tabindex: -1 }, this.lastItem.text)))), h("div", { key: '5527023bc4109b42b20202404246a74bd3120eff', class: "hidden-items" }, h("a", { key: '0a7d14bb5d482790011c816599ddf663a2b32e80', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '715281201fd630b00306add80d68c87ade21f83c', class: "visually-hidden" }, this.textHome), h("post-icon", { key: 'e8c78c08c0eff93d180e927d4ebe6c7e4b5fd224', 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": ["validateHomeUrl"],
-        "homeText": ["validateHomeText"],
-        "label": ["validateLabel"],
-        "menuLabel": ["validateMenuLabel"]
+        "textHome": ["validateTextHome"],
+        "textBreadcrumbs": ["validateTextBreadcrumbs"],
+        "textMoreItems": ["validateTextMoreItems"]
     }; }
     static get style() { return postBreadcrumbsCss; }
 }, [1, "post-breadcrumbs", {
-        "homeUrl": [1, "home-url"],
-        "homeText": [1, "home-text"],
-        "label": [1],
-        "menuLabel": [1, "menu-label"],
+        "homeUrl": [513, "home-url"],
+        "textHome": [513, "text-home"],
+        "textBreadcrumbs": [513, "text-breadcrumbs"],
+        "textMoreItems": [513, "text-more-items"],
         "breadcrumbItems": [32],
         "isConcatenated": [32],
         "lastWindowWidth": [32]
     }, undefined, {
         "homeUrl": ["validateHomeUrl"],
-        "homeText": ["validateHomeText"],
-        "label": ["validateLabel"],
-        "menuLabel": ["validateMenuLabel"]
+        "textHome": ["validateTextHome"],
+        "textBreadcrumbs": ["validateTextBreadcrumbs"],
+        "textMoreItems": ["validateTextMoreItems"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/post-card-control.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as checkRequiredAndType, e as checkEmptyOrType, b as checkRequiredAndOneOf } from './index2.js';
-import './breakpoints.js';
+import { c as checkRequiredAndType, e as checkEmptyOrType, b as checkRequiredAndOneOf } from './breakpoints.js';
 import { v as version } from './package.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
@@ -232,14 +231,14 @@ const PostCardControl$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: '8d037d8e16b06d1e72d3d6ee4f61a80e9c54a78a', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '650cbbdad994689e633b60c04d905306d4ff954e', class: {
+        return (h(Host, { key: 'fd29968b1e13437fdfab8d7737c4a05c74ab7552', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '13e185a9a15cebb1b0337e13864492e542b1b2cc', class: {
                 'card-control': true,
                 'is-checked': this.checked,
                 'is-disabled': this.disabled,
                 'is-focused': this.focused,
                 'is-valid': this.validity !== undefined && this.validity !== false,
                 'is-invalid': this.validity === false,
-            } }, h("input", { key: 'ba744035982e0ea02294a254d887083ef6c33308', 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: 'a853126a4b04abacf9c7ef0285cb42f99f294db2', 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: '4bd2a280659e0f48a5c92d71eb287617130170d1', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: 'cfab67b8e8dc9ecea3f5a18cbe95e835bf5aba44' })))));
+            } }, h("input", { key: 'f6d81341736cb5742e915a3ae1dffbc3721ddeda', 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: '95c090b9f79138a09f2d43a23f027f0bfccf6b89', 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: 'a0098faf5e3e13c2c6c75ea4c16458a875737e16', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: 'b62d747027b2839912bbd90f13028847845aa00b' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -281,7 +280,7 @@ const PostCardControl$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
 }, [65, "post-card-control", {
         "label": [513],
         "description": [1],
-        "type": [1],
+        "type": [513],
         "name": [1],
         "value": [1],
         "checked": [1028],

package/dist/components/post-closebutton2.js

@@ -1,12 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { d as checkEmptyOrOneOf } from './index2.js';
-import './breakpoints.js';
+import { d as checkEmptyOrOneOf } from './breakpoints.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
 
 const BUTTON_TYPES = ['button', 'submit', 'reset'];
 
-const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{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);display:flex;align-items:center;justify-content:center}post-closebutton .btn>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)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.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){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
+const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{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);display:flex;align-items:center;justify-content:center}post-closebutton .btn>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)}post-closebutton .btn{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-closebutton .btn: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-closebutton .btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-closebutton .btn: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-closebutton .btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.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){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
 
 const PostClosebutton = /*@__PURE__*/ proxyCustomElement(class PostClosebutton extends HTMLElement {
     constructor() {
@@ -43,7 +42,7 @@ const PostClosebutton = /*@__PURE__*/ proxyCustomElement(class PostClosebutton e
         }
     }
     render() {
-        return (h(Host, { key: '9b5bb7e95c6cf3039119ce485e963ac672834bc3', "data-version": version }, h("button", { key: '084709a7c632a8c665905a667fa6498cae1972a6', class: "btn", type: this.buttonType }, h("post-icon", { key: 'e19209e0c8de59d3e187531e0185d8f2d5c85408', "aria-hidden": "true", name: "closex" }), h("span", { key: '233184a45391e5a9b89635345f2324a87f5e9558', class: "visually-hidden" }, h("slot", { key: 'c213ac1dbdd98d83a8b2dc1b74c85926404ad1c1' })))));
+        return (h(Host, { key: '6965a8cb5fb765b4fcec0439ceeafe19d34970c2', "data-version": version }, h("button", { key: '7e718f70b0a4ac79e9439784dac46bd1ffd60fd1', class: "btn", type: this.buttonType }, h("post-icon", { key: '70acda3fbe6c9420f0be708fde6b29a7d5337d13', "aria-hidden": "true", name: "closex" }), h("span", { key: '899b3814c0898b521e4166e1cd951af628558e78', class: "visually-hidden" }, h("slot", { key: 'b13d0e95fd567c86e93e5185389909c7c0e7107d' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-collapsible-trigger2.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
+import { c as checkRequiredAndType } from './breakpoints.js';
 import { E as EventFrom } from './event-from.js';
 import { g as getRoot } from './get-root.js';
 
@@ -16,18 +15,19 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.observer = new MutationObserver(() => this.setTrigger());
-    }
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
     validateAriaAttributes() {
         checkRequiredAndType(this, 'for', 'string');
     }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.observer = new MutationObserver(() => this.setTrigger());
+        this.handlePostToggle = this.handlePostToggle.bind(this);
+    }
     /**
      * Initiate a mutation observer that updates the trigger whenever necessary
      */
@@ -44,7 +44,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
     }
     disconnectedCallback() {
         this.observer.disconnect();
-        this.root.removeEventListener('postToggle', this.handlePostToggle);
+        this.root?.removeEventListener('postToggle', this.handlePostToggle);
     }
     /**
      * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
@@ -103,7 +103,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: 'd0851c032e622f4a182e1321331e84eaa0440245', "data-version": version }, h("slot", { key: 'd495c42f409de0f9230c01031ecddab69cead1b7' })));
+        return (h(Host, { key: 'f5055d5970eb900d345957f306c9a373680f257a', "data-version": version }, h("slot", { key: 'cf63bdbca00602b9c4e2a81f28723bd274561045' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-collapsible2.js

@@ -1,17 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { e as checkEmptyOrType } from './index2.js';
+import { I as IS_BROWSER } from './environment.js';
+import { e as checkEmptyOrType } from './breakpoints.js';
 
 function isMotionReduced() {
-    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
+    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;
 }
 
 const collapseDuration = 350;
 const collapseEasing = 'ease';
 const collapsedKeyframe = { height: '0', overflow: 'hidden' };
 const animationOptions = {
-    duration: collapseDuration,
+    duration: isMotionReduced() ? 0 : collapseDuration,
     easing: collapseEasing,
     fill: 'forwards',
 };
@@ -34,8 +34,6 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         this.__registerHost();
         this.__attachShadow();
         this.postToggle = createEvent(this, "postToggle", 7);
-        this.isLoaded = false;
-        this.isOpen = true;
         /**
          * If `true`, the element is collapsed otherwise it is displayed.
          */
@@ -43,34 +41,36 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
     }
     collapsedChange() {
         checkEmptyOrType(this, 'collapsed', 'boolean');
-        void this.toggle(!this.collapsed);
+    }
+    get isExpanded() {
+        return !this.collapsed;
     }
     componentDidLoad() {
         this.collapsedChange();
-        this.isLoaded = true;
         this.updateTriggers();
     }
     /**
      * Triggers the collapse programmatically.
-     *
      * If there is a collapsing transition running already, it will be reversed.
+     * If no parameter is provided, the current state (this.isExpanded) will be toggled.
      */
-    async toggle(open = !this.isOpen) {
-        if (open === this.isOpen)
-            return open;
-        this.isOpen = open;
-        this.collapsed = !open;
-        if (this.isLoaded)
-            this.postToggle.emit(open);
-        const animation = open ? expand(this.host) : collapse(this.host);
-        if (!this.isLoaded || isMotionReduced())
-            animation.finish();
-        await animation.finished;
-        const isHostRendered = this.host.offsetParent;
-        if (isHostRendered)
+    async toggle(shouldExpand = !this.isExpanded) {
+        // if the parameter (shouldExpand) is set during the call (e.g. `document.querySelector('post-collapsible').toggle(true)`)
+        // and it matches the current state, the current state is returned and the function exits early
+        if (shouldExpand === this.isExpanded)
+            return this.isExpanded;
+        // applying the new state to this.collapsed will also indirectly update this.isExpanded,
+        // due to its implementation with the getter, which returns !this.collapsed
+        this.collapsed = !shouldExpand;
+        const isExpanded = this.isExpanded;
+        if (IS_BROWSER) {
+            const animation = isExpanded ? expand(this.host) : collapse(this.host);
+            await animation.finished;
             animation.commitStyles();
-        this.updateTriggers();
-        return open;
+            this.updateTriggers();
+            this.postToggle.emit(isExpanded);
+        }
+        return isExpanded;
     }
     /**
      * Update all post-collapsible-trigger elements referring to the collapsible
@@ -80,7 +80,7 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: '3a11f1a60c536544881def998bcdf81f6d248837', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '6ea66375cdffefd02c8293aa1542c4cbfce905a4' })));
+        return (h(Host, { key: '06400647373d6c66398e6f81561ab2c60b748af1', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '63653d2d89b80b03c7f139b1370eaf18fe839409' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/{post-list.d.ts → post-env-test.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface PostList extends Components.PostList, HTMLElement {}
-export const PostList: {
-    prototype: PostList;
-    new (): PostList;
+interface PostEnvTest extends Components.PostEnvTest, HTMLElement {}
+export const PostEnvTest: {
+    prototype: PostEnvTest;
+    new (): PostEnvTest;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/post-env-test.js

@@ -0,0 +1,31 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as IS_SERVER, I as IS_BROWSER } from './environment.js';
+
+const PostEnvTest$1 = /*@__PURE__*/ proxyCustomElement(class PostEnvTest extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return h("div", { key: '65b18a8e4890205313601723d25f938ac3c6f4a8', "data-browser": String(IS_BROWSER), "data-server": String(IS_SERVER) });
+    }
+}, [1, "post-env-test"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-env-test"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-env-test":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostEnvTest$1);
+            }
+            break;
+    } });
+}
+
+const PostEnvTest = PostEnvTest$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostEnvTest, defineCustomElement };

package/dist/components/post-footer.js

@@ -1,19 +1,18 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkRequiredAndType } from './index2.js';
-import { b as breakpoint } from './breakpoints.js';
+import { c as checkRequiredAndType, g as breakpoint } from './breakpoints.js';
 import { d as defineCustomElement$6 } from './post-accordion2.js';
 import { d as defineCustomElement$5 } from './post-accordion-item2.js';
 import { d as defineCustomElement$4 } from './post-collapsible2.js';
 import { d as defineCustomElement$3 } from './post-collapsible-trigger2.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
-const postFooterCss = ":host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block:32px;--post-footer-container-padding-inline:16px;--post-footer-container-max-width:1200px;--post-footer-grid-template:auto / auto;--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:0;--post-footer-grid-margin-block-end:24px;--post-footer-grid-padding-block-end:0;--post-footer-column-flex-direction:column;--post-footer-column-align-items:start;--post-footer-column-gap:0;--post-footer-post-list-flex-direction:column;--post-footer-post-list-gap:8px;--post-footer-post-list-align-items:start;--post-footer-socialmedia-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end:16px;--post-footer-meta-font-size:inherit;--post-footer-copyright-font-size:var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block:40px;--post-footer-grid-template:repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap:32px;--post-footer-grid-column-gap:16px;--post-footer-grid-margin-block-end:32px;--post-footer-grid-padding-block-end:32px;--post-footer-post-list-flex-direction:row;--post-footer-post-list-gap:16px;--post-footer-post-list-align-items:center;--post-footer-meta-margin-block-end:8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline:40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block:56px;--post-footer-grid-template:auto / repeat(4, auto);--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:24px;--post-footer-grid-margin-block-end:40px;--post-footer-column-flex-direction:row;--post-footer-column-align-items:center;--post-footer-column-gap:32px;--post-footer-post-list-gap:24px;--post-footer-businesssectors-margin-block-end:24px;--post-footer-meta-font-size:16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}";
+const postFooterCss = ":host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block:32px;--post-footer-container-padding-inline:16px;--post-footer-container-max-width:1200px;--post-footer-grid-template:auto / auto;--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:0;--post-footer-grid-margin-block-end:24px;--post-footer-grid-padding-block-end:0;--post-footer-column-flex-direction:column;--post-footer-column-align-items:start;--post-footer-column-gap:0;--post-footer-list-flex-direction:column;--post-footer-list-gap:8px;--post-footer-list-align-items:start;--post-footer-socialmedia-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end:16px;--post-footer-meta-font-size:inherit;--post-footer-copyright-font-size:var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block:40px;--post-footer-grid-template:repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap:32px;--post-footer-grid-column-gap:16px;--post-footer-grid-margin-block-end:32px;--post-footer-grid-padding-block-end:32px;--post-footer-list-flex-direction:row;--post-footer-list-gap:16px;--post-footer-list-align-items:center;--post-footer-meta-margin-block-end:8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline:40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block:56px;--post-footer-grid-template:auto / repeat(4, auto);--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:24px;--post-footer-grid-margin-block-end:40px;--post-footer-column-flex-direction:row;--post-footer-column-align-items:center;--post-footer-column-gap:32px;--post-footer-list-gap:24px;--post-footer-businesssectors-margin-block-end:24px;--post-footer-meta-font-size:16px}}:is(h3,.h3){margin:0;font-size:var(--post-device-font-size-6);line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black);text-wrap:balance}::slotted(ul){list-style:none;padding:0;margin:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(div),.footer-app ::slotted(div),.footer-businesssectors ::slotted(div),.footer-meta ::slotted(div){display:flex !important;flex-direction:var(--post-footer-list-flex-direction) !important;gap:var(--post-footer-list-gap) !important;align-items:var(--post-footer-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}";
 
 const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
 const PostFooter$1 = /*@__PURE__*/ proxyCustomElement(class PostFooter extends HTMLElement {
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
+    validateTextFooter() {
+        checkRequiredAndType(this, 'textFooter', 'string');
     }
     constructor() {
         super();
@@ -24,18 +23,13 @@ const PostFooter$1 = /*@__PURE__*/ proxyCustomElement(class PostFooter extends H
         this.breakpointChange = (e) => {
             this.device = e.detail;
         };
-        this.handleGridSlotChange = (...devices) => (e) => {
-            if (devices.includes(this.device) && e.target instanceof HTMLSlotElement) {
-                this.updateGridSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
-            }
-        };
         this.handleGridSlotChange = this.handleGridSlotChange.bind(this);
     }
     connectedCallback() {
         window.addEventListener('postBreakpoint:device', this.breakpointChange);
     }
     componentWillLoad() {
-        this.validateLabel();
+        this.validateTextFooter();
         // initialize grid visibility by checking the content of each slot
         GRID_SLOTS.forEach(slotName => {
             const assignedElements = this.host.querySelectorAll(`[slot="${slotName}"]`);
@@ -45,6 +39,13 @@ const PostFooter$1 = /*@__PURE__*/ proxyCustomElement(class PostFooter extends H
     disconnectedCallback() {
         window.removeEventListener('postBreakpoint:device', this.breakpointChange);
     }
+    handleGridSlotChange(...devices) {
+        return (e) => {
+            if (devices.includes(this.device) && e.target instanceof HTMLSlotElement) {
+                this.updateGridSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
+            }
+        };
+    }
     updateGridSlotDisplay(slotName, hasContent) {
         if (this.gridSlotDisplayed[slotName] !== hasContent) {
             this.gridSlotDisplayed = { ...this.gridSlotDisplayed, [slotName]: hasContent };
@@ -54,22 +55,22 @@ const PostFooter$1 = /*@__PURE__*/ proxyCustomElement(class PostFooter extends H
         return (h("post-accordion", { headingLevel: 3, multiple: true }, GRID_SLOTS.map(slotName => (h("post-accordion-item", { class: { 'd-none': !this.gridSlotDisplayed[slotName] }, collapsed: true }, h("span", { slot: "header" }, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('mobile'), name: slotName }))))));
     }
     renderColumns() {
-        return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
+        return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("h3", null, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
     }
     render() {
-        return (h(Host, { key: '36aa67b511dd3fdb9c0244b89f80c24feb86b3a6', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '0b4accb1d39734fda0b2ae7e602ae05618d1f6f8' }, h("h2", { key: '3b6147bb75772338192b17da5086e33d45f0cc4e', class: "visually-hidden" }, this.label), h("div", { key: '3ae237e599d226c8413bd785540f2706a61f130f', class: "footer-container" }, h("div", { key: 'c844467c43a718b117cc863beb75ac1ffccc7286', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'ab0859972f61a8a0b28184654b0b8a7da5d6d199', class: "footer-column" }, h("div", { key: '9356dc60f36a614718b1e668aa6c8f988e611305', class: "footer-socialmedia" }, h("slot", { key: 'aeea4c639ae1b092a90816cebfc892e7ae9608ac', name: "socialmedia" })), h("div", { key: '6404adf8c76f4756c729c453a4f5285577973596', class: "footer-app" }, h("slot", { key: 'ebfbf7f1b5db296b1de165035156819043d2a329', name: "app" }))), h("div", { key: '38017619c9da0f5abd0b34e9406f94e239e54b99', class: "footer-businesssectors" }, h("slot", { key: '93f13e71cbd102074b6f2a55c369470f66b3ae8d', name: "businesssectors" })), h("div", { key: '88c077c96627d557a47d3136a65196b67fafc2c1', class: "footer-meta" }, h("slot", { key: '9c0f64a2f2d715d6b420938efa63c861415376bd', name: "meta" })), h("div", { key: '1dc3cdbe0cb628d7e688c15de5959758e8837489', class: "footer-copyright" }, h("slot", { key: 'b62fe042ac7b098747bb21605fed2fa6883dbb23', name: "copyright" }))))));
+        return (h(Host, { key: 'e7a0cce19d579c46f60417cfa817ece8c2245ca7', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '492f1c264ecd72d18adca6e4ca8bc806a00c1643' }, h("h2", { key: '7e08d975715e3e303e61eccead938b09845adc96', class: "visually-hidden" }, this.textFooter), h("div", { key: '77e9434cd41864e2cfb845925ec3354d82db1ced', class: "footer-container" }, h("div", { key: '2260e6da042d4fb489eacd0c7660fcd988b057c4', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'cf6e31f98324dfb4cfed0dcb47fcfa031d235125', class: "footer-column" }, h("div", { key: 'c4d1f3d153e1a28ae3a4e8b3752892515d9f1e11', class: "footer-socialmedia" }, h("slot", { key: '7577106b20b768a97a1bb778493419242dab2c4a', name: "socialmedia" })), h("div", { key: 'd91dbf22ee099b5604d1fb093fe9109889f1f7a0', class: "footer-app" }, h("slot", { key: '0818814f5d2e286b6b1b6d917a3aeb08350a5ac2', name: "app" }))), h("div", { key: '928110b46617a18411987d1596135b0a5cc9a908', class: "footer-businesssectors" }, h("slot", { key: 'e0ca79bdfcf044641e0181435928951c8f91b719', name: "businesssectors" })), h("div", { key: '67fa6022ce1a0a85d8184c80ffc6d6d9a442a7ff', class: "footer-meta" }, h("slot", { key: 'dd45f04ba9dab63396ea62517dc993b495c406f0', name: "meta" })), h("div", { key: 'de0a6d29504b6456bb75dc265dbb9ad68f1d305e', class: "footer-copyright" }, h("slot", { key: 'ef8a1baffbf26fa05e53370d6bb4df78030c9963', name: "copyright" }))))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "label": ["validateLabel"]
+        "textFooter": ["validateTextFooter"]
     }; }
     static get style() { return postFooterCss; }
 }, [1, "post-footer", {
-        "label": [1],
+        "textFooter": [513, "text-footer"],
         "device": [32],
         "gridSlotDisplayed": [32]
     }, undefined, {
-        "label": ["validateLabel"]
+        "textFooter": ["validateTextFooter"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {