@swisspost/design-system-components 9.0.0-next.1 → 9.0.0-next.11

package/dist/post-components/p-e1dc7f01.entry.js

@@ -0,0 +1 @@
+export{P as post_rating}from"./p-8e808ae6.js";import"./p-0e216cc4.js";import"./p-0a74bc53.js";

package/dist/post-components/p-e533625e.js

@@ -0,0 +1 @@
+import{r as e,h as o,H as t,g as s}from"./p-0e216cc4.js";import{v as i}from"./p-0a74bc53.js";import{g as r}from"./p-6adeaa6c.js";let a=0;const n="data-popover-target",c=e=>{const o=e.target;if(!o||!("getAttribute"in o))return;const t=o.getAttribute(n);if(!t||"key"in e&&"Enter"!==e.key)return;const s=document.getElementById(t);null==s||s.toggle(o)},d=r(n,(e=>{const o=e.hasAttribute(n);e.setAttribute("aria-expanded",o?"false":null)})),l=class{constructor(o){e(this,o),this.placement="top",this.closeButtonCaption=void 0,this.arrow=!0,this.localBeforeToggleHandler=this.beforeToggleHandler.bind(this)}connectedCallback(){0===a&&(window.addEventListener("pointerup",c),window.addEventListener("keydown",c),d.observe(document.body,{subtree:!0,childList:!0,attributeFilter:[n]})),a++,this.triggers.forEach((e=>e.setAttribute("aria-expanded","false")))}componentDidLoad(){this.popoverRef.addEventListener("beforetoggle",this.localBeforeToggleHandler)}disconnectedCallback(){a--,0===a&&(window.removeEventListener("click",c),window.removeEventListener("keydown",c),d.disconnect()),this.popoverRef.removeEventListener("beforetoggle",this.localBeforeToggleHandler),this.triggers.forEach((e=>e.removeAttribute("aria-expanded")))}async show(e){this.popoverRef.show(e),e.setAttribute("aria-expanded","true")}async hide(){this.popoverRef.hide(),this.triggers.forEach((e=>e.setAttribute("aria-expanded","false")))}async toggle(e,o){const t=await this.popoverRef.toggle(e,o);this.triggers.forEach((e=>e.setAttribute("aria-expanded","false"))),e.setAttribute("aria-expanded",`${t}`)}get triggers(){return document.querySelectorAll(`[${n}="${this.host.id}"]`)}beforeToggleHandler(){this.triggers.forEach((e=>e.setAttribute("aria-expanded","false")))}render(){return o(t,{key:"c2f53a7ac9d6bbcca8c220d9b8a5ed0dda360cf9","data-version":i},o("post-popovercontainer",{key:"fa5a32cfd4263fcabed5405f2b6bb2ab0ca93c9a",arrow:this.arrow,placement:this.placement,ref:e=>this.popoverRef=e},o("div",{key:"4799da001d006a47d93be1393618744a0b393841",class:"popover-container"},o("div",{key:"7a28ea59e07591c8b835dd10157bc5e9b85793c6",class:"popover-content"},o("slot",{key:"1ba6533577817d1fc2b7762654b5639596b16422"})),o("button",{key:"f1446964325e49b79bc0fe26a05bb4f12a140c61",class:"btn-close",onClick:()=>this.hide()},o("span",{key:"dd056bb988df548e8cae61ba226c1d9e124bc32b",class:"visually-hidden"},this.closeButtonCaption)))))}get host(){return s(this)}};l.style="/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{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}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:var(--post-gray-40)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px;max-width:100%}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}";export{l as P}

package/dist/post-components/p-f0da081f.entry.js

@@ -0,0 +1 @@
+export{P as post_tooltip}from"./p-d45f8861.js";import"./p-0e216cc4.js";import"./p-0a74bc53.js";import"./p-6adeaa6c.js";import"./p-5467b223.js";import"./p-440193f4.js";import"./p-611b3c41.js";import"./p-4a3f67ab.js";import"./p-b22656b1.js";

package/dist/post-components/p-f380a026.entry.js

@@ -0,0 +1 @@
+export{P as post_collapsible,a as post_collapsible_trigger}from"./p-fbcc89be.js";import"./p-0e216cc4.js";import"./p-0a74bc53.js";import"./p-5467b223.js";import"./p-440193f4.js";import"./p-611b3c41.js";import"./p-4a3f67ab.js";import"./p-b22656b1.js";import"./p-b095519d.js";import"./p-d4f93f2b.js";import"./p-fc91cbc2.js";

package/dist/post-components/p-fbcc89be.js

@@ -0,0 +1 @@
+import{r as t,c as s,h as i,H as o,g as e}from"./p-0e216cc4.js";import{v as r}from"./p-0a74bc53.js";import{d as a}from"./p-5467b223.js";import{c as h}from"./p-4a3f67ab.js";import{c as l}from"./p-b095519d.js";import{d as c}from"./p-d4f93f2b.js";import{g as n}from"./p-fc91cbc2.js";const d={height:"0",overflow:"hidden"},p={duration:350,easing:"ease",fill:"forwards"},g=class{constructor(i){t(this,i),this.postToggle=s(this,"postToggle",7),this.isLoaded=!1,this.isOpen=!0,this.collapsed=!1}collapsedChange(){a(this.collapsed,"boolean","The `collapsed` property of the `post-collapsible` must be a boolean."),this.toggle(!this.collapsed)}componentDidLoad(){this.collapsedChange(),this.isLoaded=!0,this.updateTriggers()}async toggle(t=!this.isOpen){if(t===this.isOpen)return t;this.isOpen=t,this.collapsed=!t,this.isLoaded&&this.postToggle.emit(t);const s=t?(i=this.host).animate([d,{height:`${i.scrollHeight}px`,offset:1},{height:"auto"}],p):(t=>{const s={height:window.getComputedStyle(t).height};return t.animate([s,d],p)})(this.host);var i;return this.isLoaded&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches||s.finish(),await s.finished,this.host.offsetParent&&s.commitStyles(),t}updateTriggers(){document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`).forEach((t=>t.update()))}render(){return i(o,{key:"fd2402bcf9dee7753da3d9dc78e48e7410a774c2","data-version":r,tabindex:this.collapsed?-1:void 0},i("slot",{key:"7119a56492d6ed3fea4c5be8a34d8af60f18fe0a"}))}get host(){return e(this)}static get watchers(){return{collapsed:["collapsedChange"]}}};g.style=":host{display:block;overflow:hidden}";const u=class{constructor(s){t(this,s),this.observer=new MutationObserver((()=>this.setTrigger())),this.debouncedUpdate=c((()=>{var t;if(!this.trigger)return;const s=this.trigger.getAttribute("aria-controls");(null==s?void 0:s.includes(this.for))||this.trigger.setAttribute("aria-controls",s?`${s} ${this.for}`:this.for);const i=null===(t=this.collapsible)||void 0===t?void 0:t.collapsed;this.trigger.setAttribute("aria-expanded",`${void 0!==i?!i:void 0}`)})),this.for=void 0}setAriaAttributes(){l(this.for,'The post-collapsible-trigger "for" prop is required.'),h(this.for,"string",'The post-collapsible-trigger "for" prop should be a id.'),this.update()}connectedCallback(){this.observer.observe(this.host,{childList:!0,subtree:!0})}componentWillLoad(){this.root=n(this.host),this.root.addEventListener("postToggle",(t=>{this.trigger&&t.target.isEqualNode(this.collapsible)&&this.trigger.setAttribute("aria-expanded",`${t.detail}`)}))}componentDidLoad(){this.host.setAttribute("data-version",r),this.setTrigger(),this.trigger||console.warn("The post-collapsible-trigger must contain a button.")}disconnectedCallback(){this.observer.disconnect()}async update(){this.debouncedUpdate()}async toggleCollapsible(){var t;await(null===(t=this.collapsible)||void 0===t?void 0:t.toggle())}get collapsible(){const t=this.root.getElementById(this.for);return t&&"post-collapsible"===t.localName?t:null}setTrigger(){const t=this.host.querySelector("button");!t||this.trigger&&t.isEqualNode(this.trigger)||(this.trigger=t,this.trigger.addEventListener("click",(()=>this.toggleCollapsible())),this.setAriaAttributes())}get host(){return e(this)}static get watchers(){return{for:["setAriaAttributes"]}}};export{g as P,u as a}

package/dist/post-components/p-fc91cbc2.js

@@ -0,0 +1 @@
+function t(t){const e=t.getRootNode();if(e instanceof Document||e instanceof ShadowRoot)return e;throw new Error("Attempting to access root node before the element is attached to the document or shadow tree.")}export{t as g}

package/dist/post-components/post-components.esm.js

@@ -1 +1 @@
-import{p as e,b as a}from"./p-d2f9de94.js";export{s as setNonce}from"./p-d2f9de94.js";import{g as l}from"./p-e1255160.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await l(),a([["p-b8db0e0a",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}]]],["p-2180e02d",[[1,"post-alert",{dismissible:[4],dismissLabel:[1,"dismiss-label"],fixed:[4],icon:[1],type:[1],alertId:[32],classes:[32],hasActions:[32],hasHeading:[32],onDismissButtonClick:[32],dismiss:[64]},null,{dismissible:["validateDismissible"],dismissLabel:["validateDismissLabel"],fixed:["validateFixed"],icon:["validateIcon"],type:["validateType"]}]]],["p-15c6739e",[[65,"post-card-control",{label:[1],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1025],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],type:["validateControlType"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-e7c67ff0",[[4,"post-popovercontainer",{placement:[1],arrow:[4],show:[64],hide:[64],toggle:[64]}]]],["p-22ec06ae",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]}]]],["p-26bbd8e5",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]}]]],["p-79a40235",[[1,"post-tag",{variant:[1],size:[1],icon:[1],classes:[32]},null,{variant:["variantChanged"],size:["sizeChanged"]}]]],["p-9eb27378",[[1,"post-tooltip",{placement:[1],arrow:[4],delayed:[4],show:[64],hide:[64],toggle:[64]},null,{delayed:["validateDelayed"]}]]],["p-bcd5843c",[[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-78407640",[[1,"post-logo",{url:[1]},null,{url:["validateUrl"]}]]],["p-464ce10a",[[1,"post-tab-header",{panel:[1],tabId:[32]},null,{panel:["validateFor"]}]]],["p-0e0c11f9",[[1,"post-tab-panel",{name:[1],panelId:[32]}]]],["p-65031b20",[[1,"post-tabs",{activePanel:[1,"active-panel"],show:[64]}]]],["p-f10e2bb1",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[0,"post-collapsible-trigger",{for:[1],update:[64]},null,{for:["setAriaAttributes"]}]]],["p-586f7f53",[[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[1],rotate:[2],scale:[2],svgStyles:[32],svgOutput:[32]},null,{animation:["validateAnimation"],base:["validateBase"],flipH:["validateFlipH"],flipV:["validateFlipV"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]]],e))));
+import{p as e,b as a}from"./p-0e216cc4.js";export{s as setNonce}from"./p-0e216cc4.js";import{g as l}from"./p-e1255160.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await l(),a([["p-ad770600",[[1,"post-breadcrumb",{homeUrl:[1,"home-url"],homeText:[1,"home-text"],breadcrumbItems:[32],isConcatenated:[32],lastWindowWidth:[32]},null,{homeUrl:["validateUrl"]}]]],["p-61cff5d9",[[1,"post-footer",{label:[1],isMobile:[32]}]]],["p-dc11a5d5",[[1,"post-back-to-top",{label:[1],belowFold:[32]},null,{belowFold:["watchBelowFold"],label:["validateLabel"]}]]],["p-af48ed67",[[1,"post-banner",{dismissible:[4],dismissLabel:[1,"dismiss-label"],icon:[1],type:[1],bannerId:[32],classes:[32],hasActions:[32],hasHeading:[32],onDismissButtonClick:[32],dismiss:[64]},null,{dismissible:["validateDismissible"],dismissLabel:["validateDismissLabel"],icon:["validateIcon"],type:["validateType"]}]]],["p-99b12d43",[[65,"post-card-control",{label:[1],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1025],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],type:["validateControlType"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-0addae0c",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]}]]],["p-e1dc7f01",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]}]]],["p-18b84db7",[[1,"post-tag",{variant:[1],size:[1],icon:[1],classes:[32]},null,{variant:["variantChanged"],size:["sizeChanged"]}]]],["p-f0da081f",[[1,"post-tooltip",{placement:[1],arrow:[4],delayed:[4],show:[64],hide:[64],toggle:[64]},null,{delayed:["validateDelayed"]}]]],["p-92611da2",[[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-2571a1be",[[1,"post-avatar",{firstname:[1],lastname:[1],userid:[1],email:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32]},null,{firstname:["validateFirstname"]}]]],["p-9fbb33c2",[[1,"post-tab-header",{panel:[1],tabId:[32]},null,{panel:["validateFor"]}]]],["p-13ae0f4d",[[1,"post-tab-panel",{name:[1],panelId:[32]}]]],["p-42ef1d9f",[[1,"post-tabs",{activePanel:[1,"active-panel"],show:[64]}]]],["p-f380a026",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[0,"post-collapsible-trigger",{for:[1],update:[64]},null,{for:["setAriaAttributes"]}]]],["p-189a07cf",[[1,"post-language-switch",{caption:[1],description:[1],variant:[1],activeLang:[32]},null,{caption:["validateCaption"],description:["validateDescription"],variant:["validateVariant"]}],[4,"post-closebutton"],[4,"post-megadropdown",{isVisible:[32],animationClass:[32],toggle:[64],show:[64]}],[1,"post-header",{device:[32],mobileMenuExtended:[32],toggleMobileMenu:[64]},null,{mobileMenuExtended:["frozeBody"]}],[4,"post-language-option",{code:[1],active:[1540],variant:[1],name:[1],url:[1],select:[64]},null,{code:["validateCode"],active:["validateActiveProp"],name:["validateName"],url:["validateUrl"]}],[4,"post-list",{titleHidden:[4,"title-hidden"],horizontal:[516],titleId:[32]}],[1,"post-list-item"],[1,"post-logo",{url:[1]},null,{url:["validateUrl"]}],[4,"post-mainnavigation"],[4,"post-megadropdown-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[1,"post-togglebutton",{toggled:[1028]},null,{toggled:["validateToggled"]}],[1,"post-menu",{placement:[1],isVisible:[32],toggle:[64],show:[64],hide:[64]}],[4,"post-menu-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[4,"post-popovercontainer",{placement:[1],edgeGap:[2,"edge-gap"],arrow:[4],show:[64],hide:[64],toggle:[64]}],[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[1],rotate:[2],scale:[2]},null,{animation:["validateAnimation"],base:["validateBase"],flipH:["validateFlipH"],flipV:["validateFlipV"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]],["p-723ad003",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}]]],["p-465e9eee",[[1,"post-breadcrumb-item",{url:[1]},null,{url:["validateUrl"]}],[4,"post-menu-item"]]]],e))));

package/dist/types/animations/slide.d.ts

@@ -0,0 +1,2 @@
+export declare const slideUp: (el: HTMLElement, translateSize?: string) => Animation;
+export declare const slideDown: (el: HTMLElement, translateSize?: string) => Animation;

package/dist/types/components/post-accordion-item/post-accordion-item.d.ts

@@ -1,5 +1,8 @@
 import { HeadingLevel } from "../../types/index";
 /**
+ * @part button - The pseudo-element, used to override styles on the components internal header `button` element.
+ * @part body - The pseudo-element, used to override styles on the components internal `body` element.
+ * @slot logo - Slot for the placing a logo before the header.
  * @slot header - Slot for placing custom content within the accordion item's header.
  * @slot default - Slot for placing content within the accordion item's body.
  */
@@ -7,6 +10,7 @@ export declare class PostAccordionItem {
     private collapsible;
     host: HTMLPostAccordionItemElement;
     id: string;
+    slottedLogo: HTMLElement;
     /**
      * If `true`, the element is collapsed otherwise it is displayed.
      */
@@ -17,12 +21,14 @@ export declare class PostAccordionItem {
      */
     readonly headingLevel?: HeadingLevel;
     validateHeadingLevel(newValue?: 1 | 2 | 3 | 4 | 5 | 6): void;
-    connectedCallback(): void;
     componentWillLoad(): void;
+    componentDidLoad(): void;
     onCollapseToggle(event: CustomEvent<boolean>): void;
     /**
      * Triggers the collapse programmatically.
      */
     toggle(force?: boolean): Promise<boolean>;
+    private onSlotLogoChange;
+    componentWillRender(): void;
     render(): any;
 }

package/dist/types/components/post-avatar/post-avatar.d.ts

@@ -0,0 +1,51 @@
+declare enum AvatarType {
+    Slotted = "slotted",
+    Image = "image",
+    Initials = "initials",
+    Null
+}
+/**
+ * @slot default - Slot for inserting a custom image as avatar.
+ */
+export declare class PostAvatar {
+    private static INTERNAL_USERID_IMAGE_SRC;
+    host: HTMLPostAvatarElement;
+    /**
+     * Defines the users firstname.
+     */
+    readonly firstname: string;
+    /**
+     * Defines the users lastname.
+     */
+    readonly lastname?: string;
+    /**
+     * Defines the company internal userId.<div className="mb-1 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
+     */
+    readonly userid?: string;
+    /**
+     * Defines the users email address associated with a gravatar profile picture.
+     */
+    readonly email?: string;
+    slottedImage: HTMLImageElement;
+    avatarType: AvatarType;
+    imageUrl: string;
+    imageAlt: string;
+    initials: string;
+    validateFirstname(): void;
+    private getAvatar;
+    private getImageByProp;
+    private fetchImageByUserId;
+    private fetchImageByEmail;
+    private getAvatarByInitials;
+    private getNames;
+    private getInitials;
+    private getStorageItem;
+    private setStorageItem;
+    private removeStorageItem;
+    private cryptify;
+    private onSlotDefaultChange;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    render(): any;
+}
+export {};

package/dist/types/components/post-back-to-top/post-back-to-top.d.ts

@@ -0,0 +1,19 @@
+export declare class PostBackToTop {
+    el: HTMLPostBackToTopElement;
+    /**
+     * The label of the back-to-top button, intended solely for accessibility purposes.
+     * This label is always hidden from view.
+     **/
+    label: string;
+    belowFold: boolean;
+    private translateY;
+    private isBelowFold;
+    private handleScroll;
+    watchBelowFold(newValue: boolean): void;
+    private scrollToTop;
+    validateLabel(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/post-banner/banner-types.d.ts

@@ -0,0 +1,2 @@
+export declare const BANNER_TYPES: readonly ["neutral", "success", "warning", "danger", "info"];
+export type BannerType = (typeof BANNER_TYPES)[number];

package/dist/types/components/post-banner/post-banner.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { BannerType } from './banner-types';
+/**
+ * @slot heading - Slot for placing custom content within the banner's heading.
+ * @slot actions - Slot for placing custom actions (buttons, links, etc.) within the banner.
+ * @slot default - Slot for placing the main content/message of the banner.
+ */
+export declare class PostBanner {
+    host: HTMLPostBannerElement;
+    bannerId: string;
+    classes: string;
+    hasActions: boolean;
+    hasHeading: boolean;
+    onDismissButtonClick: () => Promise<void>;
+    /**
+     * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
+     */
+    readonly dismissible: boolean;
+    validateDismissible(isDismissible?: boolean): void;
+    /**
+     * The label to use for the close button of a dismissible banner.
+     */
+    readonly dismissLabel: string;
+    validateDismissLabel(dismissLabel?: string): void;
+    /**
+     * The icon to display in the banner. By default, the icon depends on the banner type.
+     *
+     * If `none`, no icon is displayed.
+     */
+    readonly icon: string;
+    validateIcon(icon?: string): void;
+    /**
+     * The type of the banner.
+     */
+    readonly type: BannerType;
+    validateType(type?: "neutral" | "success" | "warning" | "danger" | "info"): void;
+    /**
+     * An event emitted when the banner element is dismissed, after the transition.
+     * It has no payload and only relevant for dismissible banners.
+     */
+    postDismissed: EventEmitter<void>;
+    componentDidLoad(): void;
+    componentWillRender(): void;
+    /**
+     * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
+     */
+    dismiss(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/post-breadcrumb/post-breadcrumb.d.ts

@@ -0,0 +1,30 @@
+export declare class PostBreadcrumb {
+    host: HTMLPostBreadcrumbElement;
+    /**
+     * The URL for the home breadcrumb item.
+     */
+    homeUrl: string;
+    /**
+     * The text label for the home breadcrumb item.
+     */
+    homeText: string;
+    breadcrumbItems: {
+        url: string;
+        text: string;
+    }[];
+    isConcatenated: boolean;
+    lastWindowWidth: number;
+    private breadcrumbNavRef?;
+    private lastItem;
+    validateUrl(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private waitForBreadcrumbRef;
+    private updateBreadcrumbItems;
+    private handleResize;
+    private getParentWidth;
+    private checkConcatenation;
+    private handleBreadcrumbItemClick;
+    render(): any;
+}

package/dist/types/components/post-breadcrumb-item/post-breadcrumb-item.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @slot default - Slot for placing the text inside the breadcrumb item.
+ */
+export declare class PostBreadcrumbItem {
+    host: HTMLPostBreadcrumbItemElement;
+    /**
+     * The optional URL to which the breadcrumb item will link.
+     */
+    url?: string | URL;
+    private validUrl?;
+    validateUrl(): void;
+    private constructUrl;
+    connectedCallback(): void;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/post-card-control/post-card-control.d.ts

@@ -2,8 +2,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @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 declare class PostCardControl {
     private readonly EVENT_MAP;
@@ -30,12 +30,12 @@ export declare class PostCardControl {
     readonly type: 'checkbox' | 'radio';
     /**
      * Defines the `name` attribute of the control.
-     * <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>
-     * <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span>
+     * <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>
      */
     readonly name: string;
     /**
-     * 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>
+     * 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>
      */
     readonly value: string;
     /**
@@ -53,7 +53,7 @@ export declare class PostCardControl {
     validity: null | 'true' | 'false';
     /**
      * Defines the icon `name` inside the card.
-     * <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
+     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
      */
     readonly icon: string;
     /**
@@ -67,7 +67,7 @@ export declare class PostCardControl {
     /**
      * 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="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>
+     * <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: EventEmitter<{
         state: boolean;

package/dist/types/components/post-closebutton/post-closebutton.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @slot default - Slot for placing visually hidden label in the close button.
+ */
+export declare class PostClosebutton {
+    host: HTMLPostClosebuttonElement;
+    render(): any;
+}

package/dist/types/components/post-footer/post-footer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @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 declare class PostFooter {
+    host: HTMLPostFooterElement;
+    /**
+     * The label to add to the footer (visually hidden).
+     */
+    readonly label: string;
+    isMobile: boolean;
+    connectedCallback(): void;
+    private breakpointChange;
+    private renderAccordion;
+    private renderGrid;
+    render(): any;
+    disconnectedCallback(): void;
+}

package/dist/types/components/post-header/post-header.d.ts

@@ -0,0 +1,33 @@
+type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;
+/**
+ * @slot post-logo - Should be used together with the `<post-logo>` component.
+ * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
+ * @slot post-togglebutton - Holds the mobile menu toggler.
+ * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
+ * @slot title - Holds the application title.
+ * @slot default - Custom controls or content, right aligned in the local header.
+ * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
+ */
+export declare class PostHeader {
+    private scrollParent;
+    private mobileMenu;
+    private mobileMenuAnimation;
+    private throttledScroll;
+    private throttledResize;
+    componentWillRender(): void;
+    host: HTMLPostHeaderElement;
+    device: DEVICE_SIZE;
+    mobileMenuExtended: boolean;
+    frozeBody(isMobileMenuExtended: boolean): void;
+    /**
+     * Toggles the mobile navigation.
+     */
+    toggleMobileMenu(): Promise<void>;
+    private handleScrollEvent;
+    private getScrollParent;
+    private isScrollable;
+    private handleResize;
+    private switchLanguageSwitchMode;
+    render(): any;
+}
+export {};

package/dist/types/components/post-icon/post-icon.d.ts

@@ -4,10 +4,7 @@ type Animation = (typeof ANIMATION_NAMES)[number];
  * @class PostIcon - representing a stencil component
  */
 export declare class PostIcon {
-    private path;
     host: HTMLPostIconElement;
-    svgStyles: string;
-    svgOutput: string;
     /**
      * The name of the animation.
      */
@@ -43,9 +40,9 @@ export declare class PostIcon {
      */
     readonly scale?: number | null;
     validateScale(newValue?: number): void;
-    componentWillLoad(): void;
-    componentWillRender(): void;
-    private setPath;
+    private getPath;
+    private getStyles;
+    componentDidLoad(): void;
     render(): any;
 }
 export {};

package/dist/types/components/post-language-option/post-language-option.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SwitchVariant } from '../post-language-switch/switch-variants';
+/**
+ * @slot default - Slot for placing the content inside the anchor or button.
+ */
+export declare class PostLanguageOption {
+    host: HTMLPostLanguageOptionElement;
+    /**
+     *  The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
+     */
+    code: string;
+    validateCode(value?: string): void;
+    /**
+     * If set to `true`, the language option is considered the current language for the page.
+     */
+    active: boolean;
+    validateActiveProp(value?: boolean): void;
+    /**
+     * The variant of the post-language-switch parent (dynamically set by the parent)
+     */
+    variant?: SwitchVariant | null;
+    /**
+     * The full name of the language. For example, "Deutsch".
+     */
+    name: string;
+    validateName(value?: string): void;
+    /**
+     * The URL used for the href attribute of the internal anchor.
+     * This field is optional; if not provided, a button will be used internally instead of an anchor.
+     */
+    url: string;
+    validateUrl(value?: string): void;
+    componentDidLoad(): void;
+    /**
+     * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
+     */
+    postChange: EventEmitter<string>;
+    /**
+     * Selects the language option programmatically.
+     */
+    select(): Promise<void>;
+    private emitChange;
+    private isNameRequired;
+    render(): any;
+}

package/dist/types/components/post-language-switch/post-language-switch.d.ts

@@ -0,0 +1,31 @@
+import { SwitchVariant } from './switch-variants';
+export declare class PostLanguageSwitch {
+    host: HTMLPostLanguageSwitchElement;
+    /**
+     * A title for the list of language options
+     */
+    caption: string;
+    validateCaption(value?: string): void;
+    /**
+     * A descriptive text for the list of language options
+     */
+    description: string;
+    validateDescription(value?: string): void;
+    /**
+     * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
+     */
+    variant: SwitchVariant;
+    validateVariant(value?: "list" | "menu"): void;
+    /**
+     * The active language of the language switch
+     */
+    activeLang: string;
+    connectedCallback(): void;
+    private updateChildrenVariant;
+    componentWillUpdate(): void;
+    componentDidLoad(): void;
+    private menuId;
+    private renderList;
+    private renderDropdown;
+    render(): any;
+}

package/dist/types/components/post-language-switch/switch-variants.d.ts

@@ -0,0 +1,2 @@
+export declare const SWITCH_VARIANTS: readonly ["list", "menu"];
+export type SwitchVariant = (typeof SWITCH_VARIANTS)[number];

package/dist/types/components/post-list/post-list.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @slot default - Slot for placing the list title.
+ * @slot post-list-item - Slot for placing post-list-item components.
+ */
+export declare class PostList {
+    host: HTMLPostListElement;
+    /**
+     * The unique title of the list that is also referenced in the labelledby
+     */
+    titleId: string;
+    /**
+     * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+     */
+    readonly titleHidden: boolean;
+    /**
+     * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+     */
+    readonly horizontal: boolean;
+    private titleEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private checkTitle;
+    render(): any;
+}

package/dist/types/components/post-list-item/post-list-item.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @slot default- Slot for placing the content of the list item.
+ */
+export declare class PostListItem {
+    host: HTMLPostListItemElement;
+    connectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/post-logo/post-logo.d.ts

@@ -8,7 +8,7 @@ export declare class PostLogo {
      */
     url: string | URL;
     validateUrl(): void;
-    connectedCallback(): void;
+    componentDidLoad(): void;
     private checkDescription;
     render(): any;
 }

package/dist/types/components/post-mainnavigation/post-mainnavigation.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PostMainnavigation {
+    private header;
+    host: HTMLPostMainnavigationElement;
+    /**
+     * Gets emitted when a user closes the main navigation on mobile
+     */
+    postToggle: EventEmitter;
+    /**
+     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     */
+    disconnectedCallback(): void;
+    private handleBackButtonClick;
+    render(): any;
+}

package/dist/types/components/post-megadropdown/post-megadropdown.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PostMegadropdown {
+    private popoverRef;
+    host: HTMLPostMegadropdownElement;
+    /**
+     * Holds the current visibility state of the dropdown.
+     * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
+     * and updates automatically when the dropdown is toggled.
+     */
+    isVisible: boolean;
+    animationClass: string | null;
+    /**
+     * Emits when the dropdown is shown or hidden.
+     * The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
+     **/
+    postToggleMegadropdown: EventEmitter<boolean>;
+    componentDidLoad(): void;
+    /**
+     * Toggles the dropdown visibility based on its current state.
+     */
+    toggle(target: HTMLElement): Promise<void>;
+    /**
+     * Displays the popover dropdown
+     *
+     * @param target - The HTML element relative to which the popover dropdown should be displayed.
+     */
+    show(target: HTMLElement): Promise<void>;
+    /**
+     * Hides the popover dropdown
+     */
+    private hide;
+    private handleBackButtonClick;
+    private handleCloseButtonClick;
+    private handleFocusout;
+    render(): any;
+}

package/dist/types/components/post-megadropdown-trigger/post-megadropdown-trigger.d.ts

@@ -0,0 +1,25 @@
+export declare class PostMegadropdownTrigger {
+    /**
+     * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
+     */
+    for: string;
+    host: HTMLPostMegadropdownTriggerElement;
+    /**
+     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
+     */
+    ariaExpanded: boolean;
+    /**
+     * Reference to the slotted button within the trigger, if present.
+     * Used to manage click and key events for mega dropdown control.
+     */
+    private slottedButton;
+    /**
+     * Watch for changes to the `for` property to validate its type and ensure it is a string.
+     * @param forValue - The new value of the `for` property.
+     */
+    validateControlFor(forValue?: string): void;
+    private get megadropdown();
+    private handleToggle;
+    componentDidLoad(): void;
+    render(): any;
+}