@swisspost/design-system-components 1.7.0 → 2.0.0

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

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-81591ad0.js";export{s as setNonce}from"./p-81591ad0.js";const l=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};l().then((e=>a([["p-65c8bd5c",[[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-05e85f2b",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]}]]],["p-ed73d4c0",[[1,"post-tooltip",{placement:[1],show:[64],hide:[64],toggle:[64]}]]],["p-38d97f62",[[1,"post-accordion",{multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"collapseChange","collapseChangeHandler"]]]]],["p-4c188911",[[1,"post-collapsible",{collapsed:[4],headingLevel:[2,"heading-level"],id:[32],isOpen:[32],hasHeader:[32],headingTag:[32],toggle:[64]},null,{collapsed:["validateCollapsed"],headingLevel:["validateHeadingLevel"]}]]],["p-1e9ec4a9",[[1,"post-tab-header",{panel:[1],tabId:[32]},null,{panel:["validateFor"]}]]],["p-08abd53e",[[1,"post-tab-panel",{name:[1],panelId:[32]}]]],["p-c5858d52",[[1,"post-tabs",{activePanel:[1,"active-panel"],show:[64]}]]],["p-568bb469",[[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"]}]]],["p-30c60b6c",[[1,"post-popovercontainer",{placement:[1],arrow:[4],show:[64],hide:[64],toggle:[64]}]]]],e)));
+import{p as e,b as a}from"./p-b4f01350.js";export{s as setNonce}from"./p-b4f01350.js";const l=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};l().then((e=>a([["p-78589fac",[[1,"post-accordion-item",{collapsed:[4],headingLevel:[2,"heading-level"],id:[32],isOpen:[32],toggle:[64]},[[0,"collapseChange","onCollapseChange"]],{headingLevel:["validateHeadingLevel"]}]]],["p-88481640",[[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-6d0226cd",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]}]]],["p-775859cc",[[1,"post-tooltip",{placement:[1],arrow:[4],show:[64],hide:[64],toggle:[64]}]]],["p-299a3e41",[[1,"post-accordion",{multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"collapseChange","collapseChangeHandler"]]]]],["p-3241987a",[[1,"post-tab-header",{panel:[1],tabId:[32]},null,{panel:["validateFor"]}]]],["p-fe7650bc",[[1,"post-tab-panel",{name:[1],panelId:[32]}]]],["p-8f37921c",[[1,"post-tabs",{activePanel:[1,"active-panel"],show:[64]}]]],["p-83cedb31",[[1,"post-collapsible",{collapsed:[4],id:[32],isOpen:[32],toggle:[64]},null,{collapsed:["validateCollapsed"]}]]],["p-503ac49b",[[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"]}]]],["p-d96fbe33",[[1,"post-popovercontainer",{placement:[1],arrow:[4],show:[64],hide:[64],toggle:[64]}]]]],e)));
 //# sourceMappingURL=post-components.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","dismissible","dismissLabel","fixed","icon","type","alertId","classes","hasActions","hasHeading","onDismissButtonClick","dismiss","placement","closeButtonCaption","arrow","show","hide","toggle","multiple","expandAll","collapseAll","collapsed","headingLevel","id","isOpen","hasHeader","headingTag","panel","tabId","name","panelId","activePanel","animation","base","flipH","flipV","rotate","scale","svgStyles","svgOutput"],"sources":["../../node_modules/.pnpm/@stencil+core@4.9.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.9.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,GAEXC,EAAc,gCAA8B,CAAAC,YAAS,IAAAC,aAAA,oBAAAC,MAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,QAAA,KAAAC,QAAA,KAAAC,WAAA,KAAAC,WAAA,KAAAC,qBAAA,KAAAC,QAAA,YAAAV,YAAA,wBAAAC,aAAA,yBAAAC,MAAA,kBAAAC,KAAA,iBAAAC,KAAA,uDAAAO,UAAA,IAAAC,mBAAA,2BAAAC,MAAA,IAAAC,KAAA,KAAAC,KAAA,KAAAC,OAAA,2CAAAL,UAAA,IAAAG,KAAA,KAAAC,KAAA,KAAAC,OAAA,6CAAAC,SAAA,IAAAD,OAAA,KAAAE,UAAA,KAAAC,YAAA,8FAAAC,UAAA,IAAAC,aAAA,oBAAAC,GAAA,KAAAC,OAAA,KAAAC,UAAA,KAAAC,WAAA,KAAAT,OAAA,YAAAI,UAAA,sBAAAC,aAAA,kEAAAK,MAAA,IAAAC,MAAA,YAAAD,MAAA,wDAAAE,KAAA,IAAAC,QAAA,wCAAAC,YAAA,mBAAAhB,KAAA,wCAAAiB,UAAA,IAAAC,KAAA,IAAAC,MAAA,aAAAC,MAAA,aAAAN,KAAA,IAAAO,OAAA,IAAAC,MAAA,IAAAC,UAAA,KAAAC,UAAA,YAAAP,UAAA,sBAAAC,KAAA,iBAAAC,MAAA,kBAAAC,MAAA,kBAAAN,KAAA,iBAAAO,OAAA,mBAAAC,MAAA,iEAAAzB,UAAA,IAAAE,MAAA,IAAAC,KAAA,KAAAC,KAAA,KAAAC,OAAA,UAAAlB"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","collapsed","headingLevel","id","isOpen","toggle","dismissible","dismissLabel","fixed","icon","type","alertId","classes","hasActions","hasHeading","onDismissButtonClick","dismiss","placement","closeButtonCaption","arrow","show","hide","multiple","expandAll","collapseAll","panel","tabId","name","panelId","activePanel","animation","base","flipH","flipV","rotate","scale","svgStyles","svgOutput"],"sources":["../../node_modules/.pnpm/@stencil+core@4.10.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.10.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,GAEXC,EAAc,yCAAuC,CAAAC,UAAA,IAAAC,aAAA,oBAAAC,GAAA,KAAAC,OAAA,KAAAC,OAAA,iDAAAH,aAAA,6DAAAI,YAAA,IAAAC,aAAA,oBAAAC,MAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,QAAA,KAAAC,QAAA,KAAAC,WAAA,KAAAC,WAAA,KAAAC,qBAAA,KAAAC,QAAA,YAAAV,YAAA,wBAAAC,aAAA,yBAAAC,MAAA,kBAAAC,KAAA,iBAAAC,KAAA,uDAAAO,UAAA,IAAAC,mBAAA,2BAAAC,MAAA,IAAAC,KAAA,KAAAC,KAAA,KAAAhB,OAAA,2CAAAY,UAAA,IAAAE,MAAA,IAAAC,KAAA,KAAAC,KAAA,KAAAhB,OAAA,6CAAAiB,SAAA,IAAAjB,OAAA,KAAAkB,UAAA,KAAAC,YAAA,6FAAAC,MAAA,IAAAC,MAAA,YAAAD,MAAA,wDAAAE,KAAA,IAAAC,QAAA,wCAAAC,YAAA,mBAAAT,KAAA,+CAAAnB,UAAA,IAAAE,GAAA,KAAAC,OAAA,KAAAC,OAAA,YAAAJ,UAAA,yDAAA6B,UAAA,IAAAC,KAAA,IAAAC,MAAA,aAAAC,MAAA,aAAAN,KAAA,IAAAO,OAAA,IAAAC,MAAA,IAAAC,UAAA,KAAAC,UAAA,YAAAP,UAAA,sBAAAC,KAAA,iBAAAC,MAAA,kBAAAC,MAAA,kBAAAN,KAAA,iBAAAO,OAAA,mBAAAC,MAAA,iEAAAlB,UAAA,IAAAE,MAAA,IAAAC,KAAA,KAAAC,KAAA,KAAAhB,OAAA,UAAAN"}

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

@@ -1,28 +1,28 @@
 export declare class PostAccordion {
-    private collapsibles;
-    private expandedCollapsibles;
+    private accordionItems;
+    private expandedItems;
     host: HTMLPostAccordionElement;
     /**
-     * If `true`, multiple `post-collapsible` can be open at the same time.
+     * If `true`, multiple `post-accordion-item` can be open at the same time.
      */
     readonly multiple: boolean;
     componentWillLoad(): void;
     /**
-     * Toggles the `post-collapsible` children with the given id.
+     * Toggles the `post-accordion-item` with the given id.
      */
     toggle(id: string): Promise<void>;
-    collapseChangeHandler(event: CustomEvent): void;
+    collapseChangeHandler(event: CustomEvent<boolean>): void;
     /**
-     * Expands all `post-collapsible` children.
+     * Expands all `post-accordion-item`.
      *
      * If `close-others` is `true` and all items are closed, it will open the first one.
      * Otherwise, it will keep the opened one.
      */
     expandAll(): Promise<void>;
     /**
-     * Collapses all `post-collapsible` children.
+     * Collapses all `post-accordion-item`.
      */
     collapseAll(): Promise<void>;
-    private registerCollapsibles;
+    private registerAccordionItems;
     render(): any;
 }

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

@@ -0,0 +1,24 @@
+import { HeadingLevel } from './heading-levels';
+export declare class PostAccordionItem {
+    private collapsible;
+    host: HTMLPostAccordionItemElement;
+    id: string;
+    isOpen: boolean;
+    /**
+     * If `true`, the element is initially collapsed otherwise it is displayed.
+     */
+    readonly collapsed?: boolean;
+    /**
+     * Defines the hierarchical level of the accordion item header within the headings structure.
+     */
+    readonly headingLevel?: HeadingLevel;
+    validateHeadingLevel(newValue?: 1 | 2 | 3 | 4 | 5 | 6): void;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    onCollapseChange(event: CustomEvent<boolean>): void;
+    /**
+     * Triggers the collapse programmatically.
+     */
+    toggle(force?: boolean): Promise<boolean>;
+    render(): any;
+}

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

@@ -1,27 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { HeadingLevel } from './heading-levels';
 export declare class PostCollapsible {
     private isLoaded;
     private collapsible;
     host: HTMLPostCollapsibleElement;
     id: string;
     isOpen: boolean;
-    hasHeader: boolean;
-    headingTag: string;
     /**
      * If `true`, the element is initially collapsed otherwise it is displayed.
      */
     readonly collapsed?: boolean;
     validateCollapsed(newValue?: boolean): void;
     /**
-     * Defines the hierarchical level of the collapsible header within the headings structure.
-     */
-    readonly headingLevel?: HeadingLevel;
-    validateHeadingLevel(newValue?: 6 | 1 | 2 | 3 | 4 | 5): void;
-    /**
-     * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.
+     * 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.
      */
-    collapseChange: EventEmitter<void>;
+    collapseChange: EventEmitter<boolean>;
     connectedCallback(): void;
     componentWillRender(): void;
     componentDidLoad(): void;

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

@@ -11,6 +11,10 @@ export declare class PostTooltip {
      * towards the viewport if they would overlap edge boundaries.
      */
     readonly placement?: Placement;
+    /**
+     * Wheter or not to display a little pointer arrow
+     */
+    readonly arrow?: boolean;
     constructor();
     connectedCallback(): void;
     /**

package/dist/types/components.d.ts

@@ -5,31 +5,45 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { HeadingLevel } from "./components/post-accordion-item/heading-levels";
 import { AlertType } from "./components/post-alert/alert-types";
-import { HeadingLevel } from "./components/post-collapsible/heading-levels";
 import { Placement } from "@floating-ui/dom";
+export { HeadingLevel } from "./components/post-accordion-item/heading-levels";
 export { AlertType } from "./components/post-alert/alert-types";
-export { HeadingLevel } from "./components/post-collapsible/heading-levels";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface PostAccordion {
         /**
-          * Collapses all `post-collapsible` children.
+          * Collapses all `post-accordion-item`.
          */
         "collapseAll": () => Promise<void>;
         /**
-          * Expands all `post-collapsible` children.  If `close-others` is `true` and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
+          * Expands all `post-accordion-item`.  If `close-others` is `true` and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
          */
         "expandAll": () => Promise<void>;
         /**
-          * If `true`, multiple `post-collapsible` can be open at the same time.
+          * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
         "multiple": boolean;
         /**
-          * Toggles the `post-collapsible` children with the given id.
+          * Toggles the `post-accordion-item` with the given id.
          */
         "toggle": (id: string) => Promise<void>;
     }
+    interface PostAccordionItem {
+        /**
+          * If `true`, the element is initially collapsed otherwise it is displayed.
+         */
+        "collapsed"?: boolean;
+        /**
+          * Defines the hierarchical level of the accordion item header within the headings structure.
+         */
+        "headingLevel"?: HeadingLevel;
+        /**
+          * Triggers the collapse programmatically.
+         */
+        "toggle": (force?: boolean) => Promise<boolean>;
+    }
     interface PostAlert {
         /**
           * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
@@ -61,10 +75,6 @@ export namespace Components {
           * If `true`, the element is initially collapsed otherwise it is displayed.
          */
         "collapsed"?: boolean;
-        /**
-          * Defines the hierarchical level of the collapsible header within the headings structure.
-         */
-        "headingLevel"?: HeadingLevel;
         /**
           * Triggers the collapse programmatically.  If there is a collapsing transition running already, it will be reversed.
          */
@@ -180,6 +190,10 @@ export namespace Components {
         "show": (panelName: string) => Promise<void>;
     }
     interface PostTooltip {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
         /**
           * Programmatically hide this tooltip
          */
@@ -224,6 +238,12 @@ declare global {
         prototype: HTMLPostAccordionElement;
         new (): HTMLPostAccordionElement;
     };
+    interface HTMLPostAccordionItemElement extends Components.PostAccordionItem, HTMLStencilElement {
+    }
+    var HTMLPostAccordionItemElement: {
+        prototype: HTMLPostAccordionItemElement;
+        new (): HTMLPostAccordionItemElement;
+    };
     interface HTMLPostAlertElementEventMap {
         "dismissed": void;
     }
@@ -242,7 +262,7 @@ declare global {
         new (): HTMLPostAlertElement;
     };
     interface HTMLPostCollapsibleElementEventMap {
-        "collapseChange": void;
+        "collapseChange": boolean;
     }
     interface HTMLPostCollapsibleElement extends Components.PostCollapsible, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostCollapsibleElementEventMap>(type: K, listener: (this: HTMLPostCollapsibleElement, ev: PostCollapsibleCustomEvent<HTMLPostCollapsibleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -327,6 +347,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "post-accordion": HTMLPostAccordionElement;
+        "post-accordion-item": HTMLPostAccordionItemElement;
         "post-alert": HTMLPostAlertElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-icon": HTMLPostIconElement;
@@ -341,10 +362,20 @@ declare global {
 declare namespace LocalJSX {
     interface PostAccordion {
         /**
-          * If `true`, multiple `post-collapsible` can be open at the same time.
+          * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
         "multiple"?: boolean;
     }
+    interface PostAccordionItem {
+        /**
+          * If `true`, the element is initially collapsed otherwise it is displayed.
+         */
+        "collapsed"?: boolean;
+        /**
+          * Defines the hierarchical level of the accordion item header within the headings structure.
+         */
+        "headingLevel"?: HeadingLevel;
+    }
     interface PostAlert {
         /**
           * The label to use for the close button of a dismissible alert.
@@ -377,13 +408,9 @@ declare namespace LocalJSX {
          */
         "collapsed"?: boolean;
         /**
-          * Defines the hierarchical level of the collapsible header within the headings structure.
-         */
-        "headingLevel"?: HeadingLevel;
-        /**
-          * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.
+          * 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.
          */
-        "onCollapseChange"?: (event: PostCollapsibleCustomEvent<void>) => void;
+        "onCollapseChange"?: (event: PostCollapsibleCustomEvent<boolean>) => void;
     }
     /**
      * @class PostIcon - representing a stencil component
@@ -469,6 +496,10 @@ declare namespace LocalJSX {
         "onTabChange"?: (event: PostTabsCustomEvent<HTMLPostTabPanelElement['name']>) => void;
     }
     interface PostTooltip {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
         /**
           * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
          */
@@ -476,6 +507,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "post-accordion": PostAccordion;
+        "post-accordion-item": PostAccordionItem;
         "post-alert": PostAlert;
         "post-collapsible": PostCollapsible;
         "post-icon": PostIcon;
@@ -492,6 +524,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "post-accordion": LocalJSX.PostAccordion & JSXBase.HTMLAttributes<HTMLPostAccordionElement>;
+            "post-accordion-item": LocalJSX.PostAccordionItem & JSXBase.HTMLAttributes<HTMLPostAccordionItemElement>;
             "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "loader/index.cjs.js",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.5.4",
     "@oddbird/popover-polyfill": "0.2.3",
-    "@swisspost/design-system-styles": "6.5.1",
+    "@swisspost/design-system-styles": "6.6.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.4.6"
   },
@@ -34,7 +34,7 @@
     "@percy/cli": "1.27.7",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.1",
-    "@stencil/core": "4.9.0",
+    "@stencil/core": "4.10.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.8",
     "@types/jest": "29.5.11",
@@ -54,6 +54,14 @@
     "ts-jest": "29.1.1",
     "typescript": "4.9.5"
   },
+  "keywords": [
+    "components",
+    "web-components",
+    "stencil",
+    "design-system",
+    "ui",
+    "frontend"
+  ],
   "scripts": {
     "dev": "stencil build --serve --port 9200 --watch --docs-readme",
     "start": "stencil build --watch --docs-readme",