@swisspost/design-system-components 9.0.0-next.2 → 9.0.0-next.21

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

@@ -5,10 +5,46 @@ let cardControlIds = 0;
 /**
  * @class PostCardControl - representing a stencil component
  *
- * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
- * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt">block content</a>.<p className="banner banner-sm banner-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
+ * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.<p className="banner banner-sm banner-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
  */
 export class PostCardControl {
+    EVENT_MAP = {
+        input: 'postInput',
+        change: 'postChange',
+    };
+    KEYCODES = {
+        SPACE: 'Space',
+        LEFT: 'ArrowLeft',
+        UP: 'ArrowUp',
+        RIGHT: 'ArrowRight',
+        DOWN: 'ArrowDown',
+    };
+    group = {
+        hosts: [],
+        members: [],
+        first: null,
+        last: null,
+        checked: null,
+        focused: null,
+    };
+    control;
+    controlId = `PostCardControl_${cardControlIds++}`;
+    initialChecked;
+    hasIcon;
+    host;
+    internals;
+    /**
+     * An event emitted whenever the components checked state is toggled.
+     * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
+     */
+    postInput;
+    /**
+     * An event emitted whenever the components checked state is toggled.
+     * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
+     * <span className="banner banner-sm banner-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
+     */
+    postChange;
     /**
      * A public method to reset the controls `checked` and `validity` state.
      * The validity state is set to `null`, so it's neither valid nor invalid.
@@ -25,11 +61,11 @@ export class PostCardControl {
             this.control.checked = this.checked = false;
         this.controlSetChecked(false);
     }
-    validateControlLabel(label = this.label) {
-        checkNonEmpty(label, 'The "post-card-control" element requires its "label" property to be set.');
+    validateControlLabel() {
+        checkNonEmpty(this, 'label');
     }
-    validateControlType(type = this.type) {
-        checkOneOf(type, ['checkbox', 'radio'], 'The "post-card-control" element requires its "type" prop to be one of either "checkbox" or "radio".');
+    validateControlType() {
+        checkOneOf(this, 'type', ['checkbox', 'radio']);
     }
     updateControlChecked(checked = this.checked) {
         this.controlSetChecked(checked);
@@ -38,26 +74,6 @@ export class PostCardControl {
         this.controlSetChecked(this.checked);
     }
     constructor() {
-        this.EVENT_MAP = {
-            input: 'postInput',
-            change: 'postChange',
-        };
-        this.KEYCODES = {
-            SPACE: 'Space',
-            LEFT: 'ArrowLeft',
-            UP: 'ArrowUp',
-            RIGHT: 'ArrowRight',
-            DOWN: 'ArrowDown',
-        };
-        this.group = {
-            hosts: [],
-            members: [],
-            first: null,
-            last: null,
-            checked: null,
-            focused: null,
-        };
-        this.controlId = `PostCardControl_${cardControlIds++}`;
         this.focused = false;
         this.label = undefined;
         this.description = null;
@@ -141,7 +157,6 @@ export class PostCardControl {
         }
     }
     groupCollectMembers() {
-        var _a, _b;
         if (this.type === 'radio' && this.name) {
             this.group.hosts = Array.from(document.querySelectorAll(`post-card-control[type="radio"][name="${this.name}"]`));
             this.group.members = this.group.hosts
@@ -150,9 +165,10 @@ export class PostCardControl {
             if (this.group.members.length > 1) {
                 this.group.first = this.group.members[0];
                 this.group.last = this.group.members[this.group.members.length - 1];
-                this.group.checked = (_a = this.group.members.find(m => m.checked)) !== null && _a !== void 0 ? _a : null;
+                this.group.checked = this.group.members.find(m => m.checked) ?? null;
                 this.group.focused =
-                    (_b = this.group.members.find(m => m.getRootNode().host === document.activeElement)) !== null && _b !== void 0 ? _b : this.group.first;
+                    this.group.members.find(m => m.getRootNode().host === document.activeElement) ??
+                        this.group.first;
                 const focusableMember = this.group.checked || this.group.focused || this.group.first;
                 this.group.members.forEach(m => {
                     m.tabIndex = m === focusableMember ? 0 : -1;
@@ -161,14 +177,12 @@ export class PostCardControl {
         }
     }
     groupGetPrev() {
-        var _a;
         const focusedIndex = this.group.members.findIndex(m => m.id === this.group.focused.id);
-        return (_a = this.group.members.find((_m, i) => i === focusedIndex - 1)) !== null && _a !== void 0 ? _a : this.group.last;
+        return this.group.members.find((_m, i) => i === focusedIndex - 1) ?? this.group.last;
     }
     groupGetNext() {
-        var _a;
         const focusedIndex = this.group.members.findIndex(m => m.id === this.group.focused.id);
-        return (_a = this.group.members.find((_m, i) => i === focusedIndex + 1)) !== null && _a !== void 0 ? _a : this.group.first;
+        return this.group.members.find((_m, i) => i === focusedIndex + 1) ?? this.group.first;
     }
     groupSetChecked(newChecked, e) {
         if (this.group.members.length > 1) {
@@ -204,8 +218,8 @@ export class PostCardControl {
         const possibleFromContexts = ['fieldset'];
         let element = this.host;
         while (element && (!bgContext || !formContext)) {
-            bgContext = bgContext !== null && bgContext !== void 0 ? bgContext : possibleBgContexts.find(selector => element.matches(selector));
-            formContext = formContext !== null && formContext !== void 0 ? formContext : possibleFromContexts.find(selector => element.matches(selector));
+            bgContext = bgContext ?? possibleBgContexts.find(selector => element.matches(selector));
+            formContext = formContext ?? possibleFromContexts.find(selector => element.matches(selector));
             element = element.parentElement;
         }
         const hostContext = [bgContext, formContext].filter(context => !!context).join(' ');
@@ -218,14 +232,14 @@ export class PostCardControl {
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: '9ae199f3c25ae7af1019f3c76baf43248b301f84', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'a2060187ccede9b8944e19f49ba292bab0c72635', class: {
+        return (h(Host, { key: '6d243226748befc5cdc25f567672859700b04825', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '0e974eed3c642ca13fa86883c27c0c1e6344d7fd', class: {
                 'card-control': true,
                 'is-checked': this.checked,
                 'is-disabled': this.disabled,
                 'is-focused': this.focused,
                 'is-valid': this.validity !== null && this.validity !== 'false',
                 'is-invalid': this.validity === 'false',
-            } }, h("input", { key: '2c819e61fff5d88f3a8b986c3e53c7248306d3ae', ref: el => (this.control = el), id: this.controlId, class: "card-control--input form-check-input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_label ${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: '721ebf89ff367795fbf754b8018a2d5d2b53c9ba', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label form-check-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: '5759571f6f0da53e4800c1e9dc79737624700782', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: 'f360a1a503e9a2b7cae0e0da05ee3b4bd8a22f69' })))));
+            } }, h("input", { key: 'bd2a44b835eef5ad2927b3d39721e430deccaf9d', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === 'false', onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: 'a05fc353909de0be2cde8c306bfdc6e7248a59bf', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: '348dc3bea78771041ad19530c7265fba2ea189dd', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '7e6198e8e3ec1d2aec677be55c5fe8828198e9d7' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -235,8 +249,6 @@ export class PostCardControl {
         this.validateControlLabel();
         this.validateControlType();
     }
-    // https://stenciljs.com/docs/form-associated
-    /* eslint-disable @stencil-community/own-methods-must-be-private */
     formAssociatedCallback() {
         this.controlSetChecked(this.checked);
     }
@@ -328,7 +340,7 @@ export class PostCardControl {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the `name` attribute of the control.\n<span className=\"alert alert-sm alert-info\">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>\n<span className=\"alert alert-sm alert-info\">This is a required property, when the control is used with type `radio`.</span>"
+                    "text": "Defines the `name` attribute of the control.\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
                 },
                 "attribute": "name",
                 "reflect": false,
@@ -346,7 +358,7 @@ export class PostCardControl {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the `value` attribute of the control. <span className=\"alert alert-sm alert-info\">This is a required property, when the control is used with type `radio`.</span>"
+                    "text": "Defines the `value` attribute of the control. <span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
                 },
                 "attribute": "value",
                 "reflect": false,
@@ -418,7 +430,7 @@ export class PostCardControl {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the icon `name` inside the card.\n<span className=\"alert alert-sm alert-info\">If not set the icon will not show up.</span>"
+                    "text": "Defines the icon `name` inside the card.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>"
                 },
                 "attribute": "icon",
                 "reflect": false,
@@ -455,7 +467,7 @@ export class PostCardControl {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<span className=\"alert alert-sm alert-info\">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>"
+                    "text": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<span className=\"banner banner-sm banner-info\">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>"
                 },
                 "complexType": {
                     "original": "{ state: boolean; value: string }",

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

@@ -0,0 +1,13 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+/**
+ * @slot default - Slot for placing visually hidden label in the close button.
+ */
+export class PostClosebutton {
+    host;
+    render() {
+        return (h(Host, { key: 'c03f50379252ba13992bc3d021989ac07dba9f79', "data-version": version }, h("button", { key: 'e97a86bb6e1eace89a1a3a78fb231047f065dd5e', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'aca522d4c251a8183c91c2bd4d810d0716a2fe13', "aria-hidden": "true", name: "closex" }), h("span", { key: '6873522961b1683d1261163b07ee022f93eed836', class: "visually-hidden" }, h("slot", { key: 'bf4b13356c9a0164f1481d1fedc3a78a53e5f8e0' })))));
+    }
+    static get is() { return "post-closebutton"; }
+    static get elementRef() { return "host"; }
+}

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

@@ -1 +1 @@
-:host{display:block;overflow:hidden}
+:host{display:block;position:relative;overflow:hidden}

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

@@ -7,14 +7,21 @@ import { checkEmptyOrType, isMotionReduced } from "../../utils/index";
  */
 export class PostCollapsible {
     constructor() {
-        this.isLoaded = false;
-        this.isOpen = true;
         this.collapsed = false;
     }
+    isLoaded = false;
+    isOpen = true;
+    host;
     collapsedChange() {
-        checkEmptyOrType(this.collapsed, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
+        checkEmptyOrType(this, 'collapsed', 'boolean');
         void this.toggle(!this.collapsed);
     }
+    /**
+     * An event emitted when the collapse element is shown or hidden, before the transition.
+     *
+     * The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
+     */
+    postToggle;
     componentDidLoad() {
         this.collapsedChange();
         this.isLoaded = true;
@@ -36,18 +43,20 @@ export class PostCollapsible {
         if (!this.isLoaded || isMotionReduced())
             animation.finish();
         await animation.finished;
-        animation.commitStyles();
+        const isHostRendered = this.host.offsetParent;
+        if (isHostRendered)
+            animation.commitStyles();
         return open;
     }
     /**
      * Update all post-collapsible-trigger elements referring to the collapsible
      */
     updateTriggers() {
-        const triggers = document.querySelectorAll(`post-collapsible-trigger[for=${this.host.id}]`);
+        const triggers = document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`);
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: '47ab19bf719a505dce35955d6250462acea47eee', "data-version": version }, h("slot", { key: 'd7fe5746afe1c343e9ec4c02878d8dead9360c26' })));
+        return (h(Host, { key: 'a43e25138933a758759b4adcca249757db75cc4b', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '2936f71a6fb3ddedda372e8da4a19dbceecaefa6' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,30 +2,18 @@ import { version } from "../../../../package";
 import { checkNonEmpty, checkType, debounce, getRoot } from "../../utils/index";
 export class PostCollapsibleTrigger {
     constructor() {
-        this.observer = new MutationObserver(() => this.setTrigger());
-        this.debouncedUpdate = debounce(() => {
-            var _a;
-            if (!this.trigger)
-                return;
-            // add the provided id to the aria-controls list
-            const ariaControls = this.trigger.getAttribute('aria-controls');
-            if (!(ariaControls === null || ariaControls === void 0 ? void 0 : ariaControls.includes(this.for))) {
-                const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
-                this.trigger.setAttribute('aria-controls', newAriaControls);
-            }
-            // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
-            const isCollapsed = (_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.collapsed;
-            const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
-            this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
-        });
         this.for = undefined;
     }
+    trigger;
+    observer = new MutationObserver(() => this.setTrigger());
+    root;
+    host;
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
     setAriaAttributes() {
-        checkNonEmpty(this.for, 'The post-collapsible-trigger "for" prop is required.');
-        checkType(this.for, 'string', 'The post-collapsible-trigger "for" prop should be a id.');
+        checkNonEmpty(this, 'for');
+        checkType(this, 'for', 'string', 'The post-collapsible-trigger "for" prop should be a id.');
         void this.update();
     }
     /**
@@ -67,12 +55,25 @@ export class PostCollapsibleTrigger {
     async update() {
         this.debouncedUpdate();
     }
+    debouncedUpdate = debounce(() => {
+        if (!this.trigger)
+            return;
+        // add the provided id to the aria-controls list
+        const ariaControls = this.trigger.getAttribute('aria-controls');
+        if (!ariaControls?.includes(this.for)) {
+            const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
+            this.trigger.setAttribute('aria-controls', newAriaControls);
+        }
+        // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
+        const isCollapsed = this.collapsible?.collapsed;
+        const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
+        this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
+    });
     /**
      * Toggle the post-collapsible controlled by the trigger
      */
     async toggleCollapsible() {
-        var _a;
-        await ((_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.toggle());
+        await this.collapsible?.toggle();
     }
     /**
      * Retrieve the post-collapsible controlled by the trigger

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

@@ -0,0 +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)}

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

@@ -0,0 +1,76 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { breakpoint } from "../../utils/breakpoints";
+/**
+ * @slot grid-{1|2|3|4}-title - Slot for the accordion headers (mobile).
+ * @slot grid-{1|2|3|4} - Slot for the accordion bodies (mobile) and the grid cells (tablet, desktop).
+ * @slot socialmedia - Slot for the social media links.
+ * @slot app - Slot for the app links.
+ * @slot businesssectors - Slot for the business sectors links.
+ * @slot meta - Slot for the meta links.
+ * @slot copyright - Slot for the copyright text.
+ */
+export class PostFooter {
+    constructor() {
+        this.label = undefined;
+        this.isMobile = breakpoint.get('name') === 'mobile';
+    }
+    host;
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    breakpointChange(e) {
+        this.isMobile = e.detail === 'mobile';
+    }
+    renderAccordion() {
+        return (h("div", { class: "footer-grid" }, h("post-accorddion", { "heading-level": "3", multiple: true }, h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-1-title" })), h("slot", { name: "grid-1" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-2-title" })), h("slot", { name: "grid-2" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-3-title" })), h("slot", { name: "grid-3" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-4-title" })), h("slot", { name: "grid-4" })))));
+    }
+    renderGrid() {
+        return (h("div", { class: "footer-grid" }, h("div", null, h("slot", { name: "grid-1" })), h("div", null, h("slot", { name: "grid-2" })), h("div", null, h("slot", { name: "grid-3" })), h("div", null, h("slot", { name: "grid-4" }))));
+    }
+    render() {
+        return (h(Host, { key: '14370a1cfd730a0b0353c88c95f265aefb57c480', "data-version": version }, h("footer", { key: '7208e9d465eb0b469887e7cfae66674db2092dbd' }, h("h2", { key: 'b392c866326374ae27704baaba0dd28c3001ee62', class: "visually-hidden" }, this.label), h("div", { key: '13411ad6e0b55ee17cf9bf77b155aa1c2810f057', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '4815ae94cd43eca92482ad3c93f107243b26890e', class: "footer-column" }, h("div", { key: 'edc787dc5fc96169c323f15254b6088024a6f19d', class: "footer-socialmedia" }, h("slot", { key: '0971e342ac6f3913c408a535ce0746080e3f57af', name: "socialmedia" })), h("div", { key: 'da583c9ed819181bf2732277f4e6ee22df2e3022', class: "footer-app" }, h("slot", { key: 'b6dab5cfa1f4dc9c049f24d3e08416ef5a27e0aa', name: "app" }))), h("div", { key: '53a5c04129d24dfb64eedd46e95b5c78142a3fd7', class: "footer-businesssectors" }, h("slot", { key: '470f4294778b8978bf6eb168e2b47ff29ef43d07', name: "businesssectors" })), h("div", { key: '45d734ded794352b951f2891bbdba081e05a99d5', class: "footer-meta" }, h("slot", { key: '4d0da53c2eb79e111f0f05278a0972f046eebfa9', name: "meta" })), h("div", { key: 'f95fb7ed3cc09218a3d4a554c619b6f379d5135d', class: "footer-copyright" }, h("slot", { key: '9cdcec805152413693dced0f0d55ac1b1121c70e', name: "copyright" }))))));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    static get is() { return "post-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label to add to the footer (visually hidden)."
+                },
+                "attribute": "label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1 @@
+*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}.global-sub{display:flex;align-items:center;gap:24px}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out;border-block-end:1px solid #e1e0dc}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:calc(-1*(var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height));padding-block-start:18px;box-shadow:var(--post-device-elevation-300)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:12px;flex-wrap:wrap;gap:16px}.local-header.local-header-mobile-extended{border-bottom:1px solid #e1e0dc}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:16px}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}::slotted(h1){margin:0 !important;flex-shrink:10;z-index:3}@media screen and (min-width: 600px){::slotted(h1){margin-inline-start:12px !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:8px !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:28px !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:20px !important;max-width:calc(100vw - 8px - 16px)}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--global-header-reduced-height)}.navigation::before{display:block;content:"";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:fixed;z-index:1;inset-inline:0;background:#fff;inset-block-end:calc(100dvh - var(--header-height))}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended{height:calc(100dvh - var(--header-height));display:flex;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:#fafafa;gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}