@swisspost/design-system-components 2.1.0 → 7.1.0

package/dist/cjs/{post-tab-panel-6a9c4a4f.js → post-tab-panel-25bd8c74.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-f243643b.js');
-const _package = require('./package-96a46572.js');
+const index = require('./index-de783b23.js');
+const _package = require('./package-dacf5ec2.js');
 
 const postTabPanelCss = ":host{display:none}";
 const PostTabPanelStyle0 = postTabPanelCss;
@@ -17,7 +17,7 @@ const PostTabPanel = class {
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (index.h(index.Host, { key: '08148fe9b221905fbeab99bdb14f4d040deda959', "data-version": _package.version }, index.h("div", { key: '04ad9fba5b296902fc75e0e36f7cefd91d0b6948', class: "tab-pane", id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '840a5242e071f47b102340738f31b3f8b3c10052' }))));
+        return (index.h(index.Host, { key: 'cd74acf8889af916b9b32b57b483bbd74d5a6e20', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '9d2c3f42b1dd9214aeeee35efc1179372851af13' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tab-panel.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabPanel = require('./post-tab-panel-6a9c4a4f.js');
-require('./index-f243643b.js');
-require('./package-96a46572.js');
+const postTabPanel = require('./post-tab-panel-25bd8c74.js');
+require('./index-de783b23.js');
+require('./package-dacf5ec2.js');
 
 
 

package/dist/cjs/{post-tabs-2eb6f376.js → post-tabs-4e4ee252.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-const index = require('./index-f243643b.js');
-const _package = require('./package-96a46572.js');
+const index = require('./index-de783b23.js');
+const _package = require('./package-dacf5ec2.js');
 const fade = require('./fade-35a3633a.js');
 
-const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(var(--post-contrast-color-rgb), 0.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-primary .tabs-wrapper{background-color:#333}.bg-white .tabs-wrapper{background-color:#fff}.bg-black .tabs-wrapper{background-color:#000}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success .tabs-wrapper{background-color:#2c911c}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-danger .tabs-wrapper{background-color:#a51728}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}.bg-success-green .tabs-wrapper{background-color:#2c871d}.bg-error-red .tabs-wrapper{background-color:#a51728}.bg-warning-orange .tabs-wrapper{background-color:#f49e00}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-error-background .tabs-wrapper{background-color:#ffdade}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}:host{display:block}";
+const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(var(--post-contrast-color-rgb), 0.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-white .tabs-wrapper{background-color:#fff}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-black .tabs-wrapper{background-color:#000}.bg-primary .tabs-wrapper{background-color:#333}.bg-secondary .tabs-wrapper{background-color:#666}.bg-success .tabs-wrapper{background-color:#2c871d}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-error .tabs-wrapper{background-color:#a51728}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}.bg-error-background .tabs-wrapper{background-color:#ffdade}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}:host{display:block}";
 const PostTabsStyle0 = postTabsCss;
 
 const PostTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.tabChange = index.createEvent(this, "tabChange", 7);
+        this.postChange = index.createEvent(this, "postChange", 7);
         this.isLoaded = false;
         this.activePanel = undefined;
     }
@@ -55,7 +55,7 @@ const PostTabs = class {
         if (this.showing) {
             await this.showing.finished;
         }
-        this.tabChange.emit(this.activeTab.panel);
+        this.postChange.emit(this.activeTab.panel);
     }
     moveMisplacedTabs() {
         if (!this.tabs)
@@ -71,16 +71,21 @@ const PostTabs = class {
             return;
         this.tabs.forEach(async (tab) => {
             await tab.componentOnReady();
-            const tabTitle = tab.shadowRoot.querySelector('.tab-title');
             // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
-            if (tabTitle.getAttribute('aria-controls'))
+            if (tab.getAttribute('aria-controls'))
                 return;
-            const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');
-            tabTitle.setAttribute('aria-controls', tabPanel.id);
-            tabPanel.setAttribute('aria-labelledby', tabTitle.id);
+            const tabPanel = this.getPanel(tab.panel);
+            tab.setAttribute('aria-controls', tabPanel.id);
+            tabPanel.setAttribute('aria-labelledby', tab.id);
             tab.addEventListener('click', () => {
                 void this.show(tab.panel);
             });
+            tab.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    void this.show(tab.panel);
+                }
+            });
             tab.addEventListener('keydown', ({ key }) => {
                 if (key === 'ArrowRight' || key === 'ArrowLeft')
                     this.navigateTabs(tab, key);
@@ -93,15 +98,13 @@ const PostTabs = class {
     }
     activateTab(tab) {
         if (this.activeTab) {
-            const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');
-            tabTitle.setAttribute('aria-selected', 'false');
-            tabTitle.setAttribute('tabindex', '-1');
-            tabTitle.classList.remove('active');
+            this.activeTab.setAttribute('aria-selected', 'false');
+            this.activeTab.setAttribute('tabindex', '-1');
+            this.activeTab.classList.remove('active');
         }
-        const tabTitle = tab.shadowRoot.querySelector('.tab-title');
-        tabTitle.setAttribute('aria-selected', 'true');
-        tabTitle.removeAttribute('tabindex');
-        tabTitle.classList.add('active');
+        tab.setAttribute('aria-selected', 'true');
+        tab.setAttribute('tabindex', '0');
+        tab.classList.add('active');
         this.activeTab = tab;
     }
     hidePanel(panelName) {
@@ -139,11 +142,10 @@ const PostTabs = class {
         }
         if (!nextTab)
             return;
-        const nextTabTitle = nextTab.shadowRoot.querySelector('.tab-title');
-        nextTabTitle.focus();
+        nextTab.focus();
     }
     render() {
-        return (index.h(index.Host, { key: '474b7d00c23aec2a44a202c09b8a75a9dc12b4a8', "data-version": _package.version }, index.h("div", { key: '2fe1b6cad96fd868cbaa7e775d185537a37228fd', class: "tabs-wrapper" }, index.h("div", { key: 'ef70af3ddd337cefb719d183d603eb93fb033e25', class: "tabs", role: "tablist" }, index.h("slot", { key: '360909ea07bbbca523cb21b71daa8b4b02f60bed', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: 'ba44b0e8484e63d9b48f66933f37d854eb648854', class: "tab-content" }, index.h("slot", { key: 'cd22488448be508393fcb9f9428d3f712c9b659b', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (index.h(index.Host, { key: '38a0e3f686dab8cc1ea9dc23cc6e275fe0e6b45d', "data-version": _package.version }, index.h("div", { key: 'c67273069e5d3ba858bd6c5da8684bbd2f8c398b', class: "tabs-wrapper" }, index.h("div", { key: 'fc3e725607107f3b5d3c969e4107c229ca8f8c66', class: "tabs", role: "tablist" }, index.h("slot", { key: 'caf8d1a6901327d0b8faebb36ce239d7368e2a22', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: 'f8cf7c8c8cbb3fd308cebc34513b16926f8e5c81', class: "tab-content" }, index.h("slot", { key: '7f7ff954545f85e6caab71d7265017607e25262b', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tabs.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabs = require('./post-tabs-2eb6f376.js');
-require('./index-f243643b.js');
-require('./package-96a46572.js');
+const postTabs = require('./post-tabs-4e4ee252.js');
+require('./index-de783b23.js');
+require('./package-dacf5ec2.js');
 require('./fade-35a3633a.js');
 
 

package/dist/cjs/post-tag-cbc458ed.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const index = require('./index-de783b23.js');
+const _package = require('./package-dacf5ec2.js');
+
+const postTagCss = "/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *//*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:.25rem;padding:0 .5rem;max-width:18.5rem;background-color:var(--post-tag-bg);border:1px solid rgba(0,0,0,0);border-radius:.25rem;font-size:1rem;line-height:1.875rem;white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:1.5rem}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:var(--post-contrast-color)}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
+const PostTagStyle0 = postTagCss;
+
+const PostTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.classes = undefined;
+        this.variant = undefined;
+        this.size = null;
+        this.icon = null;
+        this.setClasses = this.setClasses.bind(this);
+    }
+    variantChanged() {
+        this.setClasses();
+    }
+    sizeChanged() {
+        this.setClasses();
+    }
+    setClasses() {
+        this.classes = [
+            'tag',
+            this.size ? `tag-${this.size}` : null,
+            this.variant ? `tag-${this.variant}` : null,
+        ]
+            .filter(c => c !== null)
+            .join(' ');
+    }
+    connectedCallback() {
+        this.setClasses();
+    }
+    render() {
+        return (index.h(index.Host, { key: '932992b2aa41e1082bf1617c7f6c74419febb143', "data-version": _package.version }, index.h("div", { key: '3d5b82975cf95f1439299326347886a8b74e2d3d', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: '96dac1715f1ddfe799cb2cb443f57d2a4082d90e', class: "tag-text" }, index.h("slot", { key: 'bb886b44ae76b71096c9938dacd708d80b602790' })))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "variant": ["variantChanged"],
+        "size": ["sizeChanged"]
+    }; }
+};
+PostTag.style = PostTagStyle0;
+
+exports.PostTag = PostTag;

package/dist/cjs/post-tag.cjs.entry.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const postTag = require('./post-tag-cbc458ed.js');
+require('./index-de783b23.js');
+require('./package-dacf5ec2.js');
+
+
+
+exports.post_tag = postTag.PostTag;

package/dist/cjs/{post-tooltip-260d0627.js → post-tooltip-805bc0c0.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-f243643b.js');
-const _package = require('./package-96a46572.js');
+const index = require('./index-de783b23.js');
+const _package = require('./package-dacf5ec2.js');
 const attributeObserver = require('./attribute-observer-10f08c04.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -4766,6 +4766,7 @@ const isFocusable = /*@__PURE__*/getDefaultExportFromCjs(focusable.exports);
     document.addEventListener(mouseMove, mouseMoveHandler, true);
     document.addEventListener('wheel', clearLongPressTimer, true);
     document.addEventListener('scroll', clearLongPressTimer, true);
+    document.addEventListener('contextmenu', clearLongPressTimer, true);
 
     // hook events that can trigger a long press event
     document.addEventListener(mouseDown, mouseDownHandler, true); // <- start
@@ -4784,6 +4785,7 @@ const PostTooltipStyle0 = postTooltipCss;
 let tooltipInstances = 0;
 let hideTooltipTimeout = null;
 const tooltipTargetAttribute = 'data-tooltip-target';
+const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
 /**
  * Global event listener to show tooltips. This is globalized so that triggers that are rendered
  * async will still work without the need to set listeners on the element itself
@@ -4791,14 +4793,14 @@ const tooltipTargetAttribute = 'data-tooltip-target';
  * @returns
  */
 const globalInterestHandler = (e) => {
-    const target = e.target;
-    if (!target || !('getAttribute' in target))
+    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
+    if (!targetElement || !('getAttribute' in targetElement))
         return;
-    const tooltipTarget = target.getAttribute(tooltipTargetAttribute);
+    const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
     if (!tooltipTarget || tooltipTarget === '')
         return;
     const tooltip = document.getElementById(tooltipTarget);
-    tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(target);
+    void (tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(targetElement));
     if (hideTooltipTimeout) {
         window.clearTimeout(hideTooltipTimeout);
         hideTooltipTimeout = null;
@@ -4811,8 +4813,10 @@ const globalInterestHandler = (e) => {
  * @returns
  */
 const globalInterestLostHandler = (e) => {
-    const target = e.target;
-    const tooltipTarget = target.getAttribute(tooltipTargetAttribute);
+    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
+    if (!targetElement || !('getAttribute' in targetElement))
+        return;
+    const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
     if (!tooltipTarget || tooltipTarget === '')
         return;
     const tooltip = document.getElementById(tooltipTarget);
@@ -4938,7 +4942,7 @@ const PostTooltip = class {
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (index.h(index.Host, { key: '63124ebabffbe5fe857bcc61eecf4133f2952e85', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: '42e1b5e0ab8cbb3a1b805ccf5b40232b071cf5ad', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: 'bf414a19c044f3c608ab3141bb93736dd7dea723' }))));
+        return (index.h(index.Host, { key: '07eb6b63076ce7803c58dfb6749553b636570b86', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: 'b0256a56e1814b4f83999f3267d3c39d874f515d', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '9432e38bab0d14ea835aee0f7567ee9795067491' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tooltip.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTooltip = require('./post-tooltip-260d0627.js');
-require('./index-f243643b.js');
-require('./package-96a46572.js');
+const postTooltip = require('./post-tooltip-805bc0c0.js');
+require('./index-de783b23.js');
+require('./package-dacf5ec2.js');
 require('./attribute-observer-10f08c04.js');
 
 

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "components/post-accordion/post-accordion.js",
     "components/post-accordion-item/post-accordion-item.js",
     "components/post-alert/post-alert.js",
+    "components/post-card-control/post-card-control.js",
     "components/post-collapsible/post-collapsible.js",
     "components/post-icon/post-icon.js",
     "components/post-popover/post-popover.js",
@@ -11,12 +12,13 @@
     "components/post-tabs/post-tabs.js",
     "components/post-tab-header/post-tab-header.js",
     "components/post-tab-panel/post-tab-panel.js",
-    "components/post-tooltip/post-tooltip.js"
+    "components/post-tooltip/post-tooltip.js",
+    "components/post-tag/post-tag.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.0",
-    "typescriptVersion": "5.3.3"
+    "version": "4.18.0",
+    "typescriptVersion": "5.4.5"
   },
   "collections": [],
   "bundles": []

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

@@ -1,15 +1,48 @@
 import { h, Host } from "@stencil/core";
-import { version } from "../../../package.json";
+import { version } from "../../../../package";
+import { HEADING_LEVELS } from "../../types/index";
+import { checkOneOf } from "../../utils/index";
 /**
  * @slot default - Slot for placing post-accordion-item components.
  */
 export class PostAccordion {
     constructor() {
         this.expandedItems = new Set();
+        this.headingLevel = undefined;
         this.multiple = false;
     }
+    validateHeadingLevel(newValue = this.headingLevel) {
+        if (!newValue)
+            return;
+        checkOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion` must be a number between 1 and 6.');
+        this.accordionItems.forEach(item => {
+            item.setAttribute('heading-level', String(newValue));
+        });
+    }
     componentWillLoad() {
         this.registerAccordionItems();
+        this.validateHeadingLevel();
+    }
+    collapseToggleHandler(event) {
+        if (event.target.localName === 'post-accordion-item') {
+            event.stopPropagation();
+            const toggledItem = event.target;
+            const isClosing = this.expandedItems.has(toggledItem);
+            if (isClosing) {
+                this.expandedItems.delete(toggledItem);
+            }
+            else {
+                this.expandedItems.add(toggledItem);
+            }
+            if (this.multiple || isClosing)
+                return;
+            // close other open accordion items to have only one opened at a time
+            Array.from(this.expandedItems.values())
+                .filter(item => item !== toggledItem)
+                .forEach(item => {
+                item.toggle(false);
+            });
+        }
     }
     /**
      * Toggles the `post-accordion-item` with the given id.
@@ -20,29 +53,10 @@ export class PostAccordion {
             throw new Error(`No post-accordion-item found with id #${id}.`);
         await itemToToggle.toggle();
     }
-    collapseChangeHandler(event) {
-        event.stopPropagation();
-        const toggledItem = event.target;
-        const isClosing = this.expandedItems.has(toggledItem);
-        if (isClosing) {
-            this.expandedItems.delete(toggledItem);
-        }
-        else {
-            this.expandedItems.add(toggledItem);
-        }
-        if (this.multiple || isClosing)
-            return;
-        // close other open accordion items to have only one opened at a time
-        Array.from(this.expandedItems.values())
-            .filter(item => item !== toggledItem)
-            .forEach(item => {
-            item.toggle(false);
-        });
-    }
     /**
      * Expands all `post-accordion-item`.
      *
-     * If `close-others` is `true` and all items are closed, it will open the first one.
+     * If `multiple="true"` is not set and all items are closed, it will open the first one.
      * Otherwise, it will keep the opened one.
      */
     async expandAll() {
@@ -74,7 +88,7 @@ export class PostAccordion {
         });
     }
     render() {
-        return (h(Host, { key: '08d0661a81fef59f3b74cbceceff49920cbfda0c', "data-version": version }, h("div", { key: '2625963e5f2952fd5bd5b4f05a14142a501b272c', class: "accordion" }, h("slot", { key: 'f2514ed051562c17fe852bd2bf39c10282915bfb', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: 'db4caaa1a64791d3a1dc622cf865a162b3cfd733', "data-version": version }, h("div", { key: '62ebf7e00b534b9b68137ac4ab57b92bd290bc21', class: "accordion" }, h("slot", { key: '61c69386c1ba9e7f53dd3465dd7eb06ac646e35b', onSlotchange: () => this.registerAccordionItems() }))));
     }
     static get is() { return "post-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -90,6 +104,29 @@ export class PostAccordion {
     }
     static get properties() {
         return {
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeadingLevel",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "HeadingLevel": {
+                            "location": "import",
+                            "path": "@/types",
+                            "id": "src/types/index.ts::HeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the hierarchical level of the `post-accordion-item` headers within the headings structure."
+                },
+                "attribute": "heading-level",
+                "reflect": false
+            },
             "multiple": {
                 "type": "boolean",
                 "mutable": false,
@@ -146,7 +183,7 @@ export class PostAccordion {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Expands all `post-accordion-item`.\n\nIf `close-others` is `true` and all items are closed, it will open the first one.\nOtherwise, it will keep the opened one.",
+                    "text": "Expands all `post-accordion-item`.\n\nIf `multiple=\"true\"` is not set and all items are closed, it will open the first one.\nOtherwise, it will keep the opened one.",
                     "tags": []
                 }
             },
@@ -170,10 +207,16 @@ export class PostAccordion {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "headingLevel",
+                "methodName": "validateHeadingLevel"
+            }];
+    }
     static get listeners() {
         return [{
-                "name": "collapseChange",
-                "method": "collapseChangeHandler",
+                "name": "postToggle",
+                "method": "collapseToggleHandler",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -1 +1 @@
-post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-danger post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.bg-success-green post-accordion-item::part(accordion-item),.bg-error-red post-accordion-item::part(accordion-item),.bg-warning-orange post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-primary .accordion-item,.bg-white .accordion-item,.bg-black .accordion-item,.bg-info .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-danger .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item,.bg-success-green .accordion-item,.bg-error-red .accordion-item,.bg-warning-orange .accordion-item,.bg-success-background .accordion-item,.bg-error-background .accordion-item,.bg-warning-background .accordion-item{--post-bg-opacity: 1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-danger post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.bg-success-green post-accordion-item::part(accordion-item),.bg-error-red post-accordion-item::part(accordion-item),.bg-warning-orange post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-primary .accordion-item,.bg-white .accordion-item,.bg-black .accordion-item,.bg-info .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-danger .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item,.bg-success-green .accordion-item,.bg-error-red .accordion-item,.bg-warning-orange .accordion-item,.bg-success-background .accordion-item,.bg-error-background .accordion-item,.bg-warning-background .accordion-item{--post-contrast-color: #000;--post-contrast-color-inverted: #fff;--post-gray-10: hsl(0, 0%, 90%);--post-gray-20: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-60: hsl(0, 0%, 40%);--post-gray-80: hsl(0, 0%, 20%);--post-yellow: #fc0;--post-light: #faf9f8;--post-gray: #f4f3f1;--post-dark: hsl(0, 0%, 20%);--post-primary: hsl(0, 0%, 20%);--post-white: #fff;--post-black: #000;--post-info: #cce4ee;--post-success: #2c911c;--post-warning: #f49e00;--post-danger: #a51728;--post-nightblue: #004976;--post-nightblue-bright: #0076a8;--post-petrol: #006d68;--post-petrol-bright: #00968f;--post-coral: #9e2a2f;--post-coral-bright: #e03c31;--post-olive: #716135;--post-olive-bright: #aa9d2e;--post-purple: #80276c;--post-purple-bright: #c5299b;--post-aubergine: #523178;--post-aubergine-bright: #7566a0;--post-success-green: #2c871d;--post-error-red: #a51728;--post-warning-orange: #f49e00;--post-success-background: #c0debb;--post-error-background: #ffdade;--post-warning-background: #fce2b2;--post-contrast-color-rgb: 0, 0, 0;--post-contrast-color-inverted-rgb: 255, 255, 255;--post-gray-10-rgb: 230, 230, 230;--post-gray-20-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-60-rgb: 102, 102, 102;--post-gray-80-rgb: 51, 51, 51;--post-yellow-rgb: 255, 204, 0;--post-light-rgb: 250, 249, 248;--post-gray-rgb: 244, 243, 241;--post-dark-rgb: 51, 51, 51;--post-primary-rgb: 51, 51, 51;--post-white-rgb: 255, 255, 255;--post-black-rgb: 0, 0, 0;--post-info-rgb: 204, 228, 238;--post-success-rgb: 44, 145, 28;--post-warning-rgb: 244, 158, 0;--post-danger-rgb: 165, 23, 40;--post-nightblue-rgb: 0, 73, 118;--post-nightblue-bright-rgb: 0, 118, 168;--post-petrol-rgb: 0, 109, 104;--post-petrol-bright-rgb: 0, 150, 143;--post-coral-rgb: 158, 42, 47;--post-coral-bright-rgb: 224, 60, 49;--post-olive-rgb: 113, 97, 53;--post-olive-bright-rgb: 170, 157, 46;--post-purple-rgb: 128, 39, 108;--post-purple-bright-rgb: 197, 41, 155;--post-aubergine-rgb: 82, 49, 120;--post-aubergine-bright-rgb: 117, 102, 160;--post-success-green-rgb: 44, 135, 29;--post-error-red-rgb: 165, 23, 40;--post-warning-orange-rgb: 244, 158, 0;--post-success-background-rgb: 192, 222, 187;--post-error-background-rgb: 255, 218, 222;--post-warning-background-rgb: 252, 226, 178}.accordion-item{--post-bg-rgb: 244, 243, 241;border-block:2px solid #666}.bg-yellow .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-light .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-gray .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-dark .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-primary .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-white .accordion-item{--post-bg-rgb: 244, 243, 241}.bg-black .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-info .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-success .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-warning .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-danger .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-nightblue .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-nightblue-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-petrol .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-petrol-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-coral .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-coral-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-olive .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-olive-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-purple .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-purple-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-aubergine .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-aubergine-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-success-green .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-error-red .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-warning-orange .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-success-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-error-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-warning-background .accordion-item{--post-bg-rgb: 255, 255, 255}.accordion-item+.accordion-item{border-block-start:0}.accordion-header{color:#333;font-size:1rem;font-weight:700;line-height:1.5;margin:0}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button;outline:none;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:3rem;text-align:start;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.accordion-button:focus-visible{outline:2px solid #1976c8}.accordion-button:hover{color:#000;background-color:#e6e6e6}.accordion-button:disabled{opacity:.4;pointer-events:none}.accordion-button::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.5rem 1rem 1rem;font-weight:300}.accordion-button>*,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>*,.accordion-body>:last-child{margin-block-end:0 !important}:host{display:block}.accordion-button{cursor:pointer}.accordion-button>::slotted(.text-truncate){display:block}post-accordion-item::part(accordion-item){--post-bg-rgb: 244, 243, 241}.bg-yellow post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-light post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-gray post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-dark post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-primary post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-white post-accordion-item::part(accordion-item){--post-bg-rgb: 244, 243, 241}.bg-black post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-info post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-success post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-warning post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-danger post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-nightblue post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-nightblue-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-petrol post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-petrol-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-coral post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-coral-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-olive post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-olive-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-purple post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-purple-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-aubergine post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-aubergine-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-success-green post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-error-red post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-warning-orange post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-success-background post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-error-background post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-warning-background post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}:host(:not(:first-of-type)) .accordion-item{border-block-start:0}
+post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-secondary post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-error post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-white .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-black .accordion-item,.bg-primary .accordion-item,.bg-secondary .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-error .accordion-item,.bg-info .accordion-item,.bg-success-background .accordion-item,.bg-warning-background .accordion-item,.bg-error-background .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item{--post-bg-opacity: 1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-secondary post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-error post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-white .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-black .accordion-item,.bg-primary .accordion-item,.bg-secondary .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-error .accordion-item,.bg-info .accordion-item,.bg-success-background .accordion-item,.bg-warning-background .accordion-item,.bg-error-background .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item{--post-contrast-color: #000;--post-focus-color: #1976c8;--post-contrast-color-inverted: #fff;--post-gray-10: hsl(0, 0%, 90%);--post-gray-20: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-60: hsl(0, 0%, 40%);--post-gray-80: hsl(0, 0%, 20%);--post-yellow: #fc0;--post-white: #fff;--post-light: #faf9f8;--post-gray: #f4f3f1;--post-dark: hsl(0, 0%, 20%);--post-black: #000;--post-primary: hsl(0, 0%, 20%);--post-secondary: hsl(0, 0%, 40%);--post-success: #2c871d;--post-warning: #f49e00;--post-error: #a51728;--post-info: #cce4ee;--post-success-background: #c0debb;--post-warning-background: #fce2b2;--post-error-background: #ffdade;--post-nightblue: #004976;--post-nightblue-bright: #0076a8;--post-petrol: #006d68;--post-petrol-bright: #00968f;--post-coral: #9e2a2f;--post-coral-bright: #e03c31;--post-olive: #716135;--post-olive-bright: #aa9d2e;--post-purple: #80276c;--post-purple-bright: #c5299b;--post-aubergine: #523178;--post-aubergine-bright: #7566a0;--post-contrast-color-rgb: 0, 0, 0;--post-contrast-color-inverted-rgb: 255, 255, 255;--post-gray-10-rgb: 230, 230, 230;--post-gray-20-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-60-rgb: 102, 102, 102;--post-gray-80-rgb: 51, 51, 51;--post-black-alpha-10-rgba: rgba(0, 0, 0, 0.1);--post-black-alpha-20-rgba: rgba(0, 0, 0, 0.2);--post-black-alpha-40-rgba: rgba(0, 0, 0, 0.4);--post-black-alpha-60-rgba: rgba(0, 0, 0, 0.6);--post-black-alpha-80-rgba: rgba(0, 0, 0, 0.8);--post-white-alpha-10-rgba: rgba(255, 255, 255, 0.1);--post-white-alpha-20-rgba: rgba(255, 255, 255, 0.2);--post-white-alpha-40-rgba: rgba(255, 255, 255, 0.4);--post-white-alpha-60-rgba: rgba(255, 255, 255, 0.6);--post-white-alpha-80-rgba: rgba(255, 255, 255, 0.8);--post-yellow-rgb: 255, 204, 0;--post-white-rgb: 255, 255, 255;--post-light-rgb: 250, 249, 248;--post-gray-rgb: 244, 243, 241;--post-dark-rgb: 51, 51, 51;--post-black-rgb: 0, 0, 0;--post-primary-rgb: 51, 51, 51;--post-secondary-rgb: 102, 102, 102;--post-success-rgb: 44, 135, 29;--post-warning-rgb: 244, 158, 0;--post-error-rgb: 165, 23, 40;--post-info-rgb: 204, 228, 238;--post-success-background-rgb: 192, 222, 187;--post-warning-background-rgb: 252, 226, 178;--post-error-background-rgb: 255, 218, 222;--post-nightblue-rgb: 0, 73, 118;--post-nightblue-bright-rgb: 0, 118, 168;--post-petrol-rgb: 0, 109, 104;--post-petrol-bright-rgb: 0, 150, 143;--post-coral-rgb: 158, 42, 47;--post-coral-bright-rgb: 224, 60, 49;--post-olive-rgb: 113, 97, 53;--post-olive-bright-rgb: 170, 157, 46;--post-purple-rgb: 128, 39, 108;--post-purple-bright-rgb: 197, 41, 155;--post-aubergine-rgb: 82, 49, 120;--post-aubergine-bright-rgb: 117, 102, 160}.accordion-item{--post-bg-rgb: 244, 243, 241;border-block:2px solid #666}.bg-yellow .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-white .accordion-item{--post-bg-rgb: 244, 243, 241}.bg-light .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-gray .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-dark .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-black .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-primary .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-secondary .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-success .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-warning .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-error .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-info .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-success-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-warning-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-error-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-nightblue .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-nightblue-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-petrol .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-petrol-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-coral .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-coral-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-olive .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-olive-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-purple .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-purple-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-aubergine .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-aubergine-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.accordion-item+.accordion-item{border-block-start:0}.accordion-header{color:#333;font-size:1rem;font-weight:700;line-height:1.5;margin:0}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;outline:none;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:3rem;text-align:start;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.accordion-button:focus-visible{outline:2px solid #1976c8}.accordion-button:hover{color:#000;background-color:#e6e6e6}.accordion-button:disabled{opacity:.4;pointer-events:none}.accordion-button::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.5rem 1rem 1rem;font-weight:300}.accordion-button>*,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>*,.accordion-body>:last-child{margin-block-end:0 !important}:host{display:block}.accordion-button{cursor:pointer}.accordion-button>::slotted(.text-truncate){display:block}post-accordion-item::part(accordion-item){--post-bg-rgb: 244, 243, 241}.bg-yellow post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-white post-accordion-item::part(accordion-item){--post-bg-rgb: 244, 243, 241}.bg-light post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-gray post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-dark post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-black post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-primary post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-secondary post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-success post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-warning post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-error post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-info post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-success-background post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-warning-background post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-error-background post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-nightblue post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-nightblue-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-petrol post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-petrol-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-coral post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-coral-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-olive post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-olive-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-purple post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-purple-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-aubergine post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-aubergine-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}:host(:not(:first-of-type)) .accordion-item{border-block-start:0}

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { version } from "../../../package.json";
-import { checkEmptyOrOneOf } from "../../utils";
-import { HEADING_LEVELS } from "./heading-levels";
+import { version } from "../../../../package";
+import { HEADING_LEVELS } from "../../types/index";
+import { checkEmptyOrOneOf } from "../../utils/index";
 /**
  * @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.
@@ -14,7 +14,7 @@ export class PostAccordionItem {
         this.headingLevel = 2;
     }
     validateHeadingLevel(newValue = this.headingLevel) {
-        checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-accordion-item` must be a number between 1 and 6.');
+        checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }
     connectedCallback() {
         this.validateHeadingLevel();
@@ -23,8 +23,10 @@ export class PostAccordionItem {
         this.isOpen = !this.collapsed;
         this.id = this.host.id || `a${crypto.randomUUID()}`;
     }
-    onCollapseChange(event) {
-        this.isOpen = event.detail;
+    onCollapseToggle(event) {
+        if (event.target.localName === 'post-accordion-item') {
+            this.isOpen = event.detail;
+        }
     }
     /**
      * Triggers the collapse programmatically.
@@ -35,7 +37,7 @@ export class PostAccordionItem {
     render() {
         var _a;
         const HeadingTag = `h${(_a = this.headingLevel) !== null && _a !== void 0 ? _a : 2}`;
-        return (h(Host, { key: '795ccef5a57e07755df60f651712dff5eb3fcfaf', id: this.id, "data-version": version }, h("div", { key: '529feda41150180001d5535d0d79007e312b0d39', part: "accordion-item", class: "accordion-item" }, h(HeadingTag, { key: '4ddcc8f6ab703625ab072541b65ed0dcb7392129', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '09dcd22dc3382fe442018649b392ba95ed3918f9', "aria-controls": `${this.id}--collapse`, "aria-expanded": `${this.isOpen}`, class: `accordion-button${this.isOpen ? '' : ' collapsed'}`, onClick: () => this.toggle(), type: "button" }, h("slot", { key: '8e4026adc26445aa84cce3587bf4cc82b816641a', name: "header" }))), h("post-collapsible", { key: 'c7a4078dd9b2f38651370bfa215361bdc3aaaf5c', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '9841b925e1d9d1dc394762b51bd2da35a4ec02c6', class: "accordion-body" }, h("slot", { key: '6474e69b6e8d26b7d22c3ab86c0a472fddaffdb1' }))))));
+        return (h(Host, { key: 'e45b2ab47cfc1e6195080edde87938f6567f5a98', id: this.id, "data-version": version }, h("div", { key: 'd9758adaa568f973bdee728411e935aae3e4bafc', part: "accordion-item", class: "accordion-item" }, h(HeadingTag, { key: '2890b79baf5a28de9c6ed07a8daf10c8a85d0487', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '6838f109b913a55c58399883eab07197b6f975f7', "aria-controls": `${this.id}--collapse`, "aria-expanded": `${this.isOpen}`, class: `accordion-button${this.isOpen ? '' : ' collapsed'}`, onClick: () => this.toggle(), type: "button" }, h("slot", { key: '5fb0fb5dfb3dee14f81c3893ff4fc174d6c87d32', name: "header" }))), h("post-collapsible", { key: '6668cd6e3311033f4bdbcf3d070b79f8cedcc52e', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '764eb9e10a22d49e75271b76f2cde439b336eb44', class: "accordion-body" }, h("slot", { key: 'aef9bdb1ac0282b762c2d43f4b46d033398bbcae' }))))));
     }
     static get is() { return "post-accordion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -78,15 +80,18 @@ export class PostAccordionItem {
                     "references": {
                         "HeadingLevel": {
                             "location": "import",
-                            "path": "./heading-levels",
-                            "id": "src/components/post-accordion-item/heading-levels.ts::HeadingLevel"
+                            "path": "@/types",
+                            "id": "src/types/index.ts::HeadingLevel"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "set the `heading-level` property on the parent `post-accordion` instead."
+                        }],
                     "text": "Defines the hierarchical level of the accordion item header within the headings structure."
                 },
                 "attribute": "heading-level",
@@ -135,8 +140,8 @@ export class PostAccordionItem {
     }
     static get listeners() {
         return [{
-                "name": "collapseChange",
-                "method": "onCollapseChange",
+                "name": "postToggle",
+                "method": "onCollapseToggle",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/post-alert/alert-types.js

@@ -1 +1 @@
-export const ALERT_TYPES = ['primary', 'success', 'danger', 'warning', 'info', 'gray'];
+export const ALERT_TYPES = ['primary', 'success', 'warning', 'danger', 'info', 'gray'];