@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

package/dist/collection/components/post-banner/post-banner.js

@@ -10,7 +10,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Host, h, } from "@stencil/core";
 import { version } from "../../../../package";
-import { fadeOut } from "../../animations/index";
+import { fade } from "../../animations/index";
 import { checkEmptyOrOneOf, EventFrom } from "../../utils/index";
 import { BANNER_TYPES } from "./banner-types";
 /**
@@ -45,7 +45,7 @@ export class PostBanner {
      * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
      */
     async dismiss() {
-        const dismissal = fadeOut(this.host);
+        const dismissal = fade(this.host, 'out');
         await dismissal.finished;
         this.host.remove();
         this.postDismissed.emit();
@@ -57,7 +57,7 @@ export class PostBanner {
         this.hasActions = this.host.querySelectorAll('[slot="actions"]').length > 0;
     }
     render() {
-        return (h(Host, { key: 'fbaf407e5bb79e3e9ab141fe7e8c9cd30c623020', "data-version": version, role: "alert" }, h("slot", { key: 'c33efd8785392e5ffb037cded176f0c9d15405df', name: "close-button" }), h("slot", { key: '762de4f8c6996f43c88ca02968b70dbd980cde00', name: "heading" }), h("slot", { key: 'e46bb26c3b85795cbd3fcb854efcba7456062d56' }), this.hasActions && (h("div", { key: '7c38eb6721cf1a0e427d6e096260d9b4a0523295', class: "actions" }, h("slot", { key: '7ae6ecbb21f63629ed779373ce60c7cedfb988a4', name: "actions" })))));
+        return (h(Host, { key: 'fd14b1f298bdc6cf2d53712cec07da43804caf4b', "data-version": version, role: "alert" }, h("slot", { key: '267a1f0a34b0787697d38ca483dcfbc40098fe09', name: "close-button" }), h("slot", { key: '104cf7d30e84747f1c76844cc36a9ef45e2568c6', name: "heading" }), h("slot", { key: 'cfa306ee64458b457d9bc792f46b92a60608aa4c' }), this.hasActions && (h("div", { key: 'dc2d9a30e6f53569e44c9ca7d587c3277db9a2db', class: "actions" }, h("slot", { key: '42b481df3fa4b4d495f90f160c9f604a3eeeba90', name: "actions" })))));
     }
     static get is() { return "post-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -75,7 +75,6 @@ export class PostBanner {
         return {
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "BannerType",
@@ -84,7 +83,8 @@ export class PostBanner {
                         "BannerType": {
                             "location": "import",
                             "path": "./banner-types",
-                            "id": "src/components/post-banner/banner-types.ts::BannerType"
+                            "id": "src/components/post-banner/banner-types.ts::BannerType",
+                            "referenceLocation": "BannerType"
                         }
                     }
                 },
@@ -97,6 +97,7 @@ export class PostBanner {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "type",
                 "defaultValue": "'info'"
             }
         };

package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js

@@ -37,7 +37,7 @@ export class PostBreadcrumbItem {
     }
     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' }))));
     }
     static get is() { return "post-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }
@@ -55,7 +55,6 @@ export class PostBreadcrumbItem {
         return {
             "url": {
                 "type": "string",
-                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string | URL",
@@ -75,7 +74,8 @@ export class PostBreadcrumbItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "url"
             }
         };
     }

package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.js

@@ -24,23 +24,23 @@ export 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();
     }
@@ -88,18 +88,18 @@ export class PostBreadcrumbs {
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: '114ba932649aef6b3abda10be0a2a83b4d54c691', "data-version": version }, h("nav", { key: 'db7a6e0b36e5d71a2848dbf7de83e8b7e0f293bf', "aria-label": this.label, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '71c3fac84dcf413da3c597a0204329b2f9945add', class: "no-list breadcrumbs-list" }, h("li", { key: 'd58de53b3a28e9ba4ec80f01b040a90035d0eae6' }, h("a", { key: '5c51451d2bd12da70eee2a5a4b22499340bf34e3', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: 'c106e7663bf75d971e86915edcd669defb886a48', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'f723202508f4a00e19a3ead136934b8fadc10061', 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: 'a615757d04c4d20ba5fea30ffb936392158b051a', "aria-current": "page" }, h("post-breadcrumb-item", { key: '979be47b183c2c84b142e68ed9f224d9b74c6b62', url: this.lastItem.url, tabindex: -1 }, this.lastItem.text)))), h("div", { key: 'f15ed4ba71b7c42711b09f4dee0ef81f08ef7b87', class: "hidden-items" }, h("a", { key: '52fde1b41eb7aa49a1bb5c2bfffcb0e97a16b7af', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'fe3ebb1bf3e8142e269142da1f5350b667752e63', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'b48e08fdf3f39268812a6dfb79af2d337d1955cf', 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)))))));
     }
     static get is() { return "post-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -117,7 +117,6 @@ export class PostBreadcrumbs {
         return {
             "homeUrl": {
                 "type": "string",
-                "attribute": "home-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -132,11 +131,11 @@ export class PostBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "home-url"
             },
-            "homeText": {
+            "textHome": {
                 "type": "string",
-                "attribute": "home-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -151,11 +150,11 @@ export class PostBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "text-home"
             },
-            "label": {
+            "textBreadcrumbs": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -170,11 +169,11 @@ export class PostBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "text-breadcrumbs"
             },
-            "menuLabel": {
+            "textMoreItems": {
                 "type": "string",
-                "attribute": "menu-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -189,7 +188,8 @@ export class PostBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "text-more-items"
             }
         };
     }
@@ -206,14 +206,14 @@ export class PostBreadcrumbs {
                 "propName": "homeUrl",
                 "methodName": "validateHomeUrl"
             }, {
-                "propName": "homeText",
-                "methodName": "validateHomeText"
+                "propName": "textHome",
+                "methodName": "validateTextHome"
             }, {
-                "propName": "label",
-                "methodName": "validateLabel"
+                "propName": "textBreadcrumbs",
+                "methodName": "validateTextBreadcrumbs"
             }, {
-                "propName": "menuLabel",
-                "methodName": "validateMenuLabel"
+                "propName": "textMoreItems",
+                "methodName": "validateTextMoreItems"
             }];
     }
 }

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

@@ -229,14 +229,14 @@ export class PostCardControl {
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: '0470b9fc76aff7a9a9dd653ddc341cdea5a3415e', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'ea805dc02529b0fcd50ed8492e5b2ad644f8cc16', 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: '85e1731187a23168e41f6363cca308d3787f8aef', 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: '8709e6122631d3a57978a1902fcfbb99f56552c4', 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: '4734cefea7fd9497190a800298566ec092278800', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '610e3d926336d7984fafed199102fdf5e314b654' })))));
+            } }, 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();
@@ -279,7 +279,6 @@ export class PostCardControl {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -294,11 +293,11 @@ export class PostCardControl {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label"
             },
             "description": {
                 "type": "string",
-                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -313,11 +312,11 @@ export class PostCardControl {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "description"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'checkbox' | 'radio'",
@@ -332,11 +331,11 @@ export class PostCardControl {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "type"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -351,11 +350,11 @@ export class PostCardControl {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -370,11 +369,11 @@ export class PostCardControl {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -390,11 +389,11 @@ export class PostCardControl {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -410,11 +409,11 @@ export class PostCardControl {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "validity": {
                 "type": "boolean",
-                "attribute": "validity",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -429,11 +428,11 @@ export class PostCardControl {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "validity"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -448,7 +447,8 @@ export class PostCardControl {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             }
         };
     }

package/dist/collection/components/post-closebutton/post-closebutton.css

@@ -1 +1 @@
-.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}}
+.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}}

package/dist/collection/components/post-closebutton/post-closebutton.js

@@ -38,7 +38,7 @@ export class PostClosebutton {
         }
     }
     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' })))));
     }
     static get is() { return "post-closebutton"; }
     static get originalStyleUrls() {
@@ -55,7 +55,6 @@ export class PostClosebutton {
         return {
             "buttonType": {
                 "type": "string",
-                "attribute": "button-type",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonType",
@@ -64,7 +63,8 @@ export class PostClosebutton {
                         "ButtonType": {
                             "location": "import",
                             "path": "./button-types",
-                            "id": "src/components/post-closebutton/button-types.ts::ButtonType"
+                            "id": "src/components/post-closebutton/button-types.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -77,6 +77,7 @@ export class PostClosebutton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "button-type",
                 "defaultValue": "'button'"
             }
         };

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

@@ -1,14 +1,12 @@
 import { h, Host, } from "@stencil/core";
 import { version } from "../../../../package";
-import { collapse, expand } from "../../animations/collapse";
-import { checkEmptyOrType, isMotionReduced } from "../../utils/index";
+import { collapsedKeyframe, collapse, expand } from "../../animations/collapse";
+import { IS_BROWSER, checkEmptyOrType } from "../../utils/index";
 /**
  * @slot default - Slot for placing content within the collapsible element.
  */
 export class PostCollapsible {
     constructor() {
-        this.isLoaded = false;
-        this.isOpen = true;
         /**
          * If `true`, the element is collapsed otherwise it is displayed.
          */
@@ -16,34 +14,36 @@ export class PostCollapsible {
     }
     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
@@ -53,7 +53,7 @@ export class PostCollapsible {
         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' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -71,7 +71,6 @@ export class PostCollapsible {
         return {
             "collapsed": {
                 "type": "boolean",
-                "attribute": "collapsed",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -87,6 +86,7 @@ export class PostCollapsible {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "collapsed",
                 "defaultValue": "false"
             }
         };
@@ -100,7 +100,7 @@ export class PostCollapsible {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "An event emitted when the collapse element is shown or hidden, before the transition.\n\nThe event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed."
+                    "text": "An event emitted when the collapse element is shown or hidden, before the transition.\n\nThe event payload is a boolean: `true` if the collapsible is expanded, `false` if it is collapsed."
                 },
                 "complexType": {
                     "original": "boolean",
@@ -113,9 +113,9 @@ export class PostCollapsible {
         return {
             "toggle": {
                 "complexType": {
-                    "signature": "(open?: boolean) => Promise<boolean>",
+                    "signature": "(shouldExpand?: boolean) => Promise<boolean>",
                     "parameters": [{
-                            "name": "open",
+                            "name": "shouldExpand",
                             "type": "boolean",
                             "docs": ""
                         }],
@@ -128,7 +128,7 @@ export class PostCollapsible {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Triggers the collapse programmatically.\n\nIf there is a collapsing transition running already, it will be reversed.",
+                    "text": "Triggers the collapse programmatically.\nIf there is a collapsing transition running already, it will be reversed.\nIf no parameter is provided, the current state (this.isExpanded) will be toggled.",
                     "tags": []
                 }
             }

package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js

@@ -97,7 +97,7 @@ export class PostCollapsibleTrigger {
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: '1cd00cfdb29b9ce191b8eb1fe6a91ddab412d006', "data-version": version }, h("slot", { key: 'b0625b4f2074852609d4a3dd700c04e01fa34d0a' })));
+        return (h(Host, { key: 'f5055d5970eb900d345957f306c9a373680f257a', "data-version": version }, h("slot", { key: 'cf63bdbca00602b9c4e2a81f28723bd274561045' })));
     }
     static get is() { return "post-collapsible-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -105,7 +105,6 @@ export class PostCollapsibleTrigger {
         return {
             "for": {
                 "type": "string",
-                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -120,7 +119,8 @@ export class PostCollapsibleTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "for"
             }
         };
     }

package/dist/collection/components/post-footer/post-footer.css

@@ -1 +1 @@
-: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}
+: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}