@swisspost/design-system-components 9.0.0-next.14 → 9.0.0-next.16

package/dist/collection/collection-manifest.json

@@ -38,8 +38,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.25.1",
-    "typescriptVersion": "5.5.4"
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
   },
   "collections": [],
   "bundles": []

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

@@ -6,13 +6,13 @@ import { checkOneOf } from "../../utils/index";
  * @slot default - Slot for placing post-accordion-item components.
  */
 export class PostAccordion {
+    constructor() {
+        this.headingLevel = undefined;
+        this.multiple = false;
+    }
     accordionItems;
     expandedItems = new Set();
     host;
-    /**
-     * Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.
-     */
-    headingLevel;
     validateHeadingLevel(newValue = this.headingLevel) {
         if (!newValue)
             return;
@@ -21,10 +21,6 @@ export class PostAccordion {
             item.setAttribute('heading-level', String(newValue));
         });
     }
-    /**
-     * If `true`, multiple `post-accordion-item` can be open at the same time.
-     */
-    multiple = false;
     componentWillLoad() {
         this.registerAccordionItems();
         this.validateHeadingLevel();
@@ -132,8 +128,6 @@ export class PostAccordion {
                     "tags": [],
                     "text": "Defines the hierarchical level of the `post-accordion-item` headers within the headings structure."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "heading-level",
                 "reflect": false
             },
@@ -151,8 +145,6 @@ export class PostAccordion {
                     "tags": [],
                     "text": "If `true`, multiple `post-accordion-item` can be open at the same time."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -11,19 +11,14 @@ import { nanoid } from "nanoid";
  * @slot default - Slot for placing content within the accordion item's body.
  */
 export class PostAccordionItem {
+    constructor() {
+        this.id = undefined;
+        this.slottedLogo = undefined;
+        this.collapsed = false;
+        this.headingLevel = undefined;
+    }
     collapsible;
     host;
-    id;
-    slottedLogo;
-    /**
-     * If `true`, the element is collapsed otherwise it is displayed.
-     */
-    collapsed = false;
-    /**
-     * Defines the hierarchical level of the accordion item header within the headings structure.
-     * @deprecated set the `heading-level` property on the parent `post-accordion` instead.
-     */
-    headingLevel;
     validateHeadingLevel(newValue = this.headingLevel) {
         checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }
@@ -88,8 +83,6 @@ export class PostAccordionItem {
                     "tags": [],
                     "text": "If `true`, the element is collapsed otherwise it is displayed."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "collapsed",
                 "reflect": false,
                 "defaultValue": "false"
@@ -117,8 +110,6 @@ export class PostAccordionItem {
                         }],
                     "text": "Defines the hierarchical level of the accordion item header within the headings structure."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "heading-level",
                 "reflect": false
             }

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

@@ -17,29 +17,19 @@ var AvatarType;
  * @slot default - Slot for inserting a custom image as avatar.
  */
 export class PostAvatar {
+    constructor() {
+        this.firstname = undefined;
+        this.lastname = undefined;
+        this.userid = undefined;
+        this.email = undefined;
+        this.slottedImage = undefined;
+        this.avatarType = null;
+        this.imageUrl = '';
+        this.imageAlt = '';
+        this.initials = '';
+    }
     static INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
     host;
-    /**
-     * Defines the users firstname.
-     */
-    firstname;
-    /**
-     * Defines the users lastname.
-     */
-    lastname;
-    /**
-     * Defines the company internal userId.<div className="mb-1 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
-     */
-    userid;
-    /**
-     * Defines the users email address associated with a gravatar profile picture.
-     */
-    email;
-    slottedImage;
-    avatarType = null;
-    imageUrl = '';
-    imageAlt = '';
-    initials = '';
     validateFirstname() {
         checkNonEmpty(this.firstname, 'The `firstname` property of the `post-avatar` is required!');
     }
@@ -169,8 +159,6 @@ export class PostAvatar {
                     "tags": [],
                     "text": "Defines the users firstname."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "firstname",
                 "reflect": false
             },
@@ -188,8 +176,6 @@ export class PostAvatar {
                     "tags": [],
                     "text": "Defines the users lastname."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "lastname",
                 "reflect": false
             },
@@ -207,8 +193,6 @@ export class PostAvatar {
                     "tags": [],
                     "text": "Defines the company internal userId.<div className=\"mb-1 banner banner-warning banner-sm\">Can only be used on post.ch domains!</div>"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "userid",
                 "reflect": false
             },
@@ -226,8 +210,6 @@ export class PostAvatar {
                     "tags": [],
                     "text": "Defines the users email address associated with a gravatar profile picture."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "email",
                 "reflect": false
             }

package/dist/collection/components/post-back-to-top/post-back-to-top.js

@@ -3,13 +3,11 @@ import { slideUp, slideDown } from "../../animations/slide";
 import { version } from "../../../../package";
 import { checkType, checkNonEmpty } from "../../utils/index";
 export class PostBackToTop {
+    constructor() {
+        this.label = undefined;
+        this.belowFold = false;
+    }
     el;
-    /**
-     * The label of the back-to-top button, intended solely for accessibility purposes.
-     * This label is always hidden from view.
-     **/
-    label;
-    belowFold = false;
     translateY;
     isBelowFold() {
         return window.scrollY > window.innerHeight;
@@ -88,8 +86,6 @@ export class PostBackToTop {
                     "tags": [],
                     "text": "The label of the back-to-top button, intended solely for accessibility purposes.\nThis label is always hidden from view."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "label",
                 "reflect": false
             }

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

@@ -10,42 +10,30 @@ import { nanoid } from "nanoid";
  * @slot default - Slot for placing the main content/message of the banner.
  */
 export class PostBanner {
+    constructor() {
+        this.bannerId = `p${nanoid(6)}`;
+        this.classes = undefined;
+        this.hasActions = undefined;
+        this.hasHeading = undefined;
+        this.onDismissButtonClick = () => this.dismiss();
+        this.dismissible = false;
+        this.dismissLabel = undefined;
+        this.icon = undefined;
+        this.type = 'neutral';
+    }
     host;
-    bannerId = `p${nanoid(6)}`;
-    classes;
-    hasActions;
-    hasHeading;
-    onDismissButtonClick = () => this.dismiss();
-    /**
-     * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
-     */
-    dismissible = false;
     validateDismissible(isDismissible = this.dismissible) {
         checkType(isDismissible, 'boolean', 'The post-banner "dismissible" prop should be a boolean.');
         setTimeout(() => this.validateDismissLabel());
     }
-    /**
-     * The label to use for the close button of a dismissible banner.
-     */
-    dismissLabel;
     validateDismissLabel(dismissLabel = this.dismissLabel) {
         if (this.dismissible) {
             checkNonEmpty(dismissLabel, 'Dismissible post-banner\'s require a "dismiss-label" prop.');
         }
     }
-    /**
-     * The icon to display in the banner. By default, the icon depends on the banner type.
-     *
-     * If `none`, no icon is displayed.
-     */
-    icon;
     validateIcon(icon = this.icon) {
         checkEmptyOrPattern(icon, /\d{4}|none/, 'The post-banner "icon" prop should be a 4-digits string.');
     }
-    /**
-     * The type of the banner.
-     */
-    type = 'neutral';
     validateType(type = this.type) {
         checkEmptyOrOneOf(type, BANNER_TYPES, `The post-banner requires a type form: ${BANNER_TYPES.join(', ')}`);
     }
@@ -118,8 +106,6 @@ export class PostBanner {
                     "tags": [],
                     "text": "If `true`, a close button (\u00D7) is displayed and the banner can be dismissed by the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "dismissible",
                 "reflect": false,
                 "defaultValue": "false"
@@ -138,8 +124,6 @@ export class PostBanner {
                     "tags": [],
                     "text": "The label to use for the close button of a dismissible banner."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "dismiss-label",
                 "reflect": false
             },
@@ -157,8 +141,6 @@ export class PostBanner {
                     "tags": [],
                     "text": "The icon to display in the banner. By default, the icon depends on the banner type.\n\nIf `none`, no icon is displayed."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "icon",
                 "reflect": false
             },
@@ -182,8 +164,6 @@ export class PostBanner {
                     "tags": [],
                     "text": "The type of the banner."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'neutral'"

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

@@ -2,18 +2,14 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { checkUrl, debounce } from "../../utils/index";
 export class PostBreadcrumb {
+    constructor() {
+        this.homeUrl = undefined;
+        this.homeText = 'Home';
+        this.breadcrumbItems = [];
+        this.isConcatenated = undefined;
+        this.lastWindowWidth = undefined;
+    }
     host;
-    /**
-     * The URL for the home breadcrumb item.
-     */
-    homeUrl;
-    /**
-     * The text label for the home breadcrumb item.
-     */
-    homeText = 'Home';
-    breadcrumbItems = [];
-    isConcatenated;
-    lastWindowWidth;
     breadcrumbNavRef;
     lastItem;
     validateUrl() {
@@ -127,8 +123,6 @@ export class PostBreadcrumb {
                     "tags": [],
                     "text": "The URL for the home breadcrumb item."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "home-url",
                 "reflect": false
             },
@@ -146,8 +140,6 @@ export class PostBreadcrumb {
                     "tags": [],
                     "text": "The text label for the home breadcrumb item."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "home-text",
                 "reflect": false,
                 "defaultValue": "'Home'"

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

@@ -5,11 +5,10 @@ import { checkEmptyOrUrl } from "../../utils/index";
  * @slot default - Slot for placing the text inside the breadcrumb item.
  */
 export class PostBreadcrumbItem {
+    constructor() {
+        this.url = undefined;
+    }
     host;
-    /**
-     * The optional URL to which the breadcrumb item will link.
-     */
-    url;
     validUrl;
     validateUrl() {
         try {
@@ -80,8 +79,6 @@ export class PostBreadcrumbItem {
                     "tags": [],
                     "text": "The optional URL to which the breadcrumb item will link."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "url",
                 "reflect": false
             }

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

@@ -33,48 +33,7 @@ export class PostCardControl {
     initialChecked;
     hasIcon;
     host;
-    focused = false;
     internals;
-    /**
-     * Defines the text in the control-label.
-     */
-    label;
-    /**
-     * Defines the description in the control-label.
-     */
-    description = null;
-    /**
-     * Defines the `type` attribute of the control.
-     */
-    type;
-    /**
-     * Defines the `name` attribute of the control.
-     * <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>
-     * <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
-     */
-    name = null;
-    /**
-     * 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>
-     */
-    value = null;
-    /**
-     * Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
-     */
-    checked = false;
-    /**
-     * Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
-     */
-    disabled = false;
-    /**
-     * Defines the validation `validity` of the control.
-     * To reset validity to an undefined state, simply remove the attribute from the control.
-     */
-    validity = null;
-    /**
-     * Defines the icon `name` inside the card.
-     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
-     */
-    icon = null;
     /**
      * 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.
@@ -115,6 +74,16 @@ export class PostCardControl {
         this.controlSetChecked(this.checked);
     }
     constructor() {
+        this.focused = false;
+        this.label = undefined;
+        this.description = null;
+        this.type = undefined;
+        this.name = null;
+        this.value = null;
+        this.checked = false;
+        this.disabled = false;
+        this.validity = null;
+        this.icon = null;
         this.cardClickHandler = this.cardClickHandler.bind(this);
         this.controlClickHandler = this.controlClickHandler.bind(this);
         this.controlChangeHandler = this.controlChangeHandler.bind(this);
@@ -321,8 +290,6 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the text in the control-label."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -340,8 +307,6 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the description in the control-label."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "description",
                 "reflect": false,
                 "defaultValue": "null"
@@ -360,8 +325,6 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `type` attribute of the control."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "type",
                 "reflect": false
             },
@@ -379,8 +342,6 @@ export class PostCardControl {
                     "tags": [],
                     "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>"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "null"
@@ -399,8 +360,6 @@ export class PostCardControl {
                     "tags": [],
                     "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>"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "null"
@@ -419,8 +378,6 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
@@ -439,8 +396,6 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -459,8 +414,6 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the validation `validity` of the control.\nTo reset validity to an undefined state, simply remove the attribute from the control."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "validity",
                 "reflect": false,
                 "defaultValue": "null"
@@ -479,8 +432,6 @@ export class PostCardControl {
                     "tags": [],
                     "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>"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "null"

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

@@ -6,13 +6,12 @@ import { checkEmptyOrType, isMotionReduced } from "../../utils/index";
  * @slot default - Slot for placing content within the collapsible element.
  */
 export class PostCollapsible {
+    constructor() {
+        this.collapsed = false;
+    }
     isLoaded = false;
     isOpen = true;
     host;
-    /**
-     * If `true`, the element is collapsed otherwise it is displayed.
-     */
-    collapsed = false;
     collapsedChange() {
         checkEmptyOrType(this.collapsed, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
         void this.toggle(!this.collapsed);
@@ -87,8 +86,6 @@ export class PostCollapsible {
                     "tags": [],
                     "text": "If `true`, the element is collapsed otherwise it is displayed."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "collapsed",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1,14 +1,13 @@
 import { version } from "../../../../package";
 import { checkNonEmpty, checkType, debounce, getRoot } from "../../utils/index";
 export class PostCollapsibleTrigger {
+    constructor() {
+        this.for = undefined;
+    }
     trigger;
     observer = new MutationObserver(() => this.setTrigger());
     root;
     host;
-    /**
-     * Link the trigger to a post-collapsible with this id
-     */
-    for;
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
@@ -114,8 +113,6 @@ export class PostCollapsibleTrigger {
                     "tags": [],
                     "text": "Link the trigger to a post-collapsible with this id"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "for",
                 "reflect": false
             }

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

@@ -11,12 +11,11 @@ import { breakpoint } from "../../utils/breakpoints";
  * @slot copyright - Slot for the copyright text.
  */
 export class PostFooter {
+    constructor() {
+        this.label = undefined;
+        this.isMobile = breakpoint.get('name') === 'mobile';
+    }
     host;
-    /**
-     * The label to add to the footer (visually hidden).
-     */
-    label;
-    isMobile = breakpoint.get('name') === 'mobile';
     connectedCallback() {
         window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
     }
@@ -63,8 +62,6 @@ export class PostFooter {
                     "tags": [],
                     "text": "The label to add to the footer (visually hidden)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "label",
                 "reflect": false
             }

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

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box}:host{z-index:1090;--global-header-height: 72px;--global-header-minimal-height: 24px;--local-header-height: 112px;--local-header-min-height: 56px;--header-height: calc(var(--global-header-height) + var(--local-header-height));z-index:1020;position:relative}@media screen and (min-width: 1024px){:host{--global-header-reduced-height: 24px;--main-navigation-height: 56px}}@media screen and (max-width: 1023.98px){:host{--global-header-height: 64px;--local-header-height: 48px;--local-header-min-height: 48px;--main-navigation-height: 0px}}:host(:not(:has([slot=title]))){--local-header-height: var(--main-navigation-height)}: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;align-items:center;position:sticky;padding-inline:var(--post-core-dimension-4);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:var(--post-core-dimension-12);inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24)}.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:var(--post-core-dimension-8);min-height:var(--local-header-min-height);background:var(--post-core-color-brand-white);transition:box-shadow .2s ease-in-out}@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:var(--post-core-dimension-18);box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:var(--post-core-dimension-9);flex-wrap:wrap}.local-header.local-header-mobile-extended{border-bottom:1px solid var(--post-core-color-sandgrey-012)}.local-header:not(.title-header-mobile-extended){box-shadow:var(--post-core-elevation-3)}}.local-sub{margin-inline-end:var(--post-core-dimension-16)}::slotted(.list-inline){margin:-8px 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:var(--post-core-dimension-12) !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:var(--post-core-dimension-8) !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:var(--post-core-font-size-20) !important;max-width:calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16))}}@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-minimal-height)}.navigation::before{display:block;content:"";position:absolute;inset:0;z-index:2;background:var(--post-core-color-brand-white)}}@media screen and (max-width: 1023.98px){.navigation{position:fixed;z-index:1;inset-inline:0;background:var(--post-core-color-brand-white);inset-block-end:calc(100vh - var(--header-height))}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended{height:calc(100vh - var(--header-height));display:flex;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:var(--post-core-dimension-16)}}
+*,::before,::after{box-sizing:border-box}:host{z-index:1090;--global-header-height: 72px;--global-header-minimal-height: 24px;--local-header-height: 112px;--local-header-min-height: 56px;--header-height: calc(var(--global-header-height) + var(--local-header-height));z-index:1020;position:relative}@media screen and (min-width: 1024px){:host{--global-header-reduced-height: 24px;--main-navigation-height: 56px}}@media screen and (max-width: 1023.98px){:host{--global-header-height: 64px;--local-header-height: 48px;--local-header-min-height: 48px;--main-navigation-height: 0px}}:host(:not(:has([slot=title]))){--local-header-height: var(--main-navigation-height)}: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:var(--post-core-dimension-4);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:var(--post-core-dimension-12);inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24)}.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:var(--post-core-dimension-8);min-height:var(--local-header-min-height);background:var(--post-core-color-brand-white);transition:box-shadow .2s ease-in-out}@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:var(--post-core-dimension-18);box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:var(--post-core-dimension-9);flex-wrap:wrap}.local-header.local-header-mobile-extended{border-bottom:1px solid var(--post-core-color-sandgrey-012)}.local-header:not(.title-header-mobile-extended){box-shadow:var(--post-core-elevation-3)}}.local-sub{margin-inline-end:var(--post-core-dimension-16)}::slotted(.list-inline){margin:-8px 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:var(--post-core-dimension-12) !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:var(--post-core-dimension-8) !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:var(--post-core-font-size-20) !important;max-width:calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16))}}@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-minimal-height)}.navigation::before{display:block;content:"";position:absolute;inset:0;z-index:2;background:var(--post-core-color-brand-white)}}@media screen and (max-width: 1023.98px){.navigation{position:fixed;z-index:1;inset-inline:0;background:var(--post-core-color-brand-white);inset-block-end:calc(100vh - var(--header-height))}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended{height:calc(100vh - var(--header-height));display:flex;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:var(--post-core-dimension-16)}}