@swisspost/design-system-components 10.0.0-next.40 → 10.0.0-next.42

package/dist/components/p-Cx0AiN2A.js

@@ -0,0 +1,182 @@
+const IS_SERVER = typeof window === 'undefined';
+const IS_BROWSER = !IS_SERVER;
+
+/* eslint-disable no-undefined,no-param-reassign,no-shadow */
+
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
+ *                                            are most useful.
+ * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
+ *                                            as-is, to `callback` when the throttled-function is executed.
+ * @param {object} [options] -              An object to configure options.
+ * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
+ *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
+ *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
+ *                                            `delay` milliseconds, the internal counter is reset).
+ * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
+ *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
+ *                                            callback will never executed if both noLeading = true and noTrailing = true.
+ * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
+ *                                            false (at end), schedule `callback` to execute after `delay` ms.
+ *
+ * @returns {Function} A new, throttled, function.
+ */
+function throttle (delay, callback, options) {
+  var _ref = {},
+    _ref$noTrailing = _ref.noTrailing,
+    noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
+    _ref$noLeading = _ref.noLeading,
+    noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
+    _ref$debounceMode = _ref.debounceMode,
+    debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
+  /*
+   * After wrapper has stopped being called, this timeout ensures that
+   * `callback` is executed at the proper times in `throttle` and `end`
+   * debounce modes.
+   */
+  var timeoutID;
+  var cancelled = false;
+
+  // Keep track of the last time `callback` was executed.
+  var lastExec = 0;
+
+  // Function to clear existing timeout
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  }
+
+  // Function to cancel next exec
+  function cancel(options) {
+    var _ref2 = options || {},
+      _ref2$upcomingOnly = _ref2.upcomingOnly,
+      upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
+    clearExistingTimeout();
+    cancelled = !upcomingOnly;
+  }
+
+  /*
+   * The `wrapper` function encapsulates all of the throttling / debouncing
+   * functionality and when executed will limit the rate at which `callback`
+   * is executed.
+   */
+  function wrapper() {
+    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
+      arguments_[_key] = arguments[_key];
+    }
+    var self = this;
+    var elapsed = Date.now() - lastExec;
+    if (cancelled) {
+      return;
+    }
+
+    // Execute `callback` and update the `lastExec` timestamp.
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self, arguments_);
+    }
+
+    /*
+     * If `debounceMode` is true (at begin) this is used to clear the flag
+     * to allow future `callback` executions.
+     */
+    function clear() {
+      timeoutID = undefined;
+    }
+    if (!noLeading && debounceMode && !timeoutID) {
+      /*
+       * Since `wrapper` is being called for the first time and
+       * `debounceMode` is true (at begin), execute `callback`
+       * and noLeading != true.
+       */
+      exec();
+    }
+    clearExistingTimeout();
+    if (debounceMode === undefined && elapsed > delay) {
+      if (noLeading) {
+        /*
+         * In throttle mode with noLeading, if `delay` time has
+         * been exceeded, update `lastExec` and schedule `callback`
+         * to execute after `delay` ms.
+         */
+        lastExec = Date.now();
+        if (!noTrailing) {
+          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
+        }
+      } else {
+        /*
+         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
+         * `callback`.
+         */
+        exec();
+      }
+    } else if (noTrailing !== true) {
+      /*
+       * In trailing throttle mode, since `delay` time has not been
+       * exceeded, schedule `callback` to execute `delay` ms after most
+       * recent execution.
+       *
+       * If `debounceMode` is true (at begin), schedule `clear` to execute
+       * after `delay` ms.
+       *
+       * If `debounceMode` is false (at end), schedule `callback` to
+       * execute after `delay` ms.
+       */
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+    }
+  }
+  wrapper.cancel = cancel;
+
+  // Return the wrapper function.
+  return wrapper;
+}
+
+class Breakpoint {
+    constructor() {
+        this.updateCurrentBreakpoint = throttle(50, (options = { emitEvents: true }) => {
+            const previousBreakpoint = this.currentBreakpoint;
+            this.currentBreakpoint = this.breakpoints.find(breakpoint => {
+                return breakpoint.minWidth <= innerWidth;
+            });
+            if (!this.currentBreakpoint || !options.emitEvents)
+                return;
+            Object.keys(this.currentBreakpoint)
+                .filter(key => !previousBreakpoint || this.currentBreakpoint[key] !== previousBreakpoint[key])
+                .forEach((key) => this.dispatchEvent(key));
+        });
+        if (IS_SERVER || !!this.breakpoints)
+            return;
+        const keys = this.getValues('--post-grid-breakpoint-keys');
+        const devices = this.getValues('--post-grid-breakpoint-devices');
+        const widths = this.getValues('--post-grid-breakpoint-widths');
+        this.breakpoints = widths
+            .map((width, i) => ({
+            key: keys[i],
+            device: devices[i],
+            minWidth: Number(width),
+        }))
+            .sort((a, b) => b.minWidth - a.minWidth);
+        this.updateCurrentBreakpoint({ emitEvents: false });
+        window.addEventListener('resize', () => this.updateCurrentBreakpoint(), { passive: true });
+    }
+    getValues(cssCustomProperty) {
+        const values = getComputedStyle(document.documentElement).getPropertyValue(cssCustomProperty);
+        return values ? values.split(',').map(v => v.trim()) : [];
+    }
+    dispatchEvent(property) {
+        if (IS_SERVER)
+            return;
+        window.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
+    }
+    get(property) {
+        this.updateCurrentBreakpoint({ emitEvents: false });
+        return this.currentBreakpoint[property];
+    }
+}
+const breakpoint = new Breakpoint();
+
+export { IS_BROWSER as I, breakpoint as b, throttle as t };

package/dist/components/{post-accordion-item2.js → p-D2S8TlQo.js}

@@ -1,26 +1,35 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { H as HEADING_LEVELS } from './heading-levels.js';
-import { a as checkEmptyOrOneOf } from './index2.js';
-import './breakpoints.js';
-import { e as eventGuard } from './event-guard.js';
-import { n as nanoid } from './index.browser.js';
-import { d as defineCustomElement$3 } from './post-collapsible2.js';
-import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
-import { d as defineCustomElement$1 } from './post-icon2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-BQFahg8B.js';
+import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
+import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { E as EventFrom } from './p-8U5GFtQP.js';
+import { n as nanoid } from './p-BLchVpF6.js';
+import { d as defineCustomElement$3 } from './p-DrzP02ul.js';
+import { d as defineCustomElement$2 } from './p-DS1BUsT3.js';
+import { d as defineCustomElement$1 } from './p-47N0HfyR.js';
 
 const postAccordionItemCss = ".accordion-item::after{display:block;content:\"\";margin-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-item:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-item:has(.accordion-button:hover)::after{border-color:Highlight}}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{display:block;position:absolute;content:\"\";inset:0;inset-block-end:auto;border-block-start-width:var(--post-accordion-button-border-top-width, var(--post-device-border-width-default));border-block-start-style:var(--post-core-border-style-solid);border-block-start-color:var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-button{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}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}";
-const PostAccordionItemStyle0 = postAccordionItemCss;
 
-const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends HTMLElement {
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.id = undefined;
-        this.slottedLogo = undefined;
+        /**
+         * If `true`, the element is collapsed otherwise it is displayed.
+         */
         this.collapsed = false;
-        this.headingLevel = undefined;
     }
     validateHeadingLevel() {
         checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS);
@@ -33,9 +42,7 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     }
     // Capture to make sure the "collapsed" property is updated before the event is consumed
     onCollapseToggle(event) {
-        eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion-item' }, () => {
-            this.collapsed = !event.detail;
-        });
+        this.collapsed = !event.detail;
     }
     /**
      * Triggers the collapse programmatically.
@@ -52,16 +59,16 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: '41b746c2ed269178d6a889899da6d55c44b647e1', id: this.id, "data-version": version }, h("div", { key: '8d675ccd039e8317673e68ac79cc3b99b5524200', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: 'b19a63493df6dded4797fc7286ee51a5984a6ecf', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'c4dc2f1b5a6528ccd241a70da1b59ba3dbdc999c', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '27d5e2111b32819d9df23f824ee9bcfeb6ae0714', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '4e6840a49b432a39a93392aab9e1fb31ed13e120', class: {
+        return (h(Host, { key: 'd7176f314fa0f907bd5b69555a2f25561f3875cf', id: this.id, "data-version": version }, h("div", { key: '978c451798e5bafe38ef57be29818f02ccf49dab', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '615da8a2ad5fb3c3fd1e5e0c2c8ee9a260a34263', for: `${this.id}--collapse` }, h(HeadingTag, { key: '9c270ded36f1e1b1b466ba8c4ca529ab26368d5c', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'ddf278d1ccf6d78932ae4c6a9617d5852fb73064', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '3989145bdbe0a313c6ed10220d2089c89688d613', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: '1f802c84252b6ba84d8a595fec744e345e6cc77f', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '3d7b75e30b0aa31c36fd558db73b9055985c872c', name: "header" }), h("post-icon", { key: '1d5a701f86551bd62d3ed88892d0c4561a7b86c5', name: "2051" })))), h("post-collapsible", { key: '95f5c1d5fc09ffaa32eda367f2a1364e38007b4a', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '69a4c7a8c20283477f637ee61185f576cdadfbb5', class: "accordion-body", part: "body" }, h("slot", { key: '24eb9e5998b86189d321367702a9e6c97ca0c0e1' }))))));
+            } }, h("slot", { key: 'dd053bf73234db3bac772bf730003b4f2cc030cb', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '9ac06513d55828a9d7a3552aa66c9946fde7c793', name: "header" }), h("post-icon", { key: 'fb46c528581e1a149706fd9e124857cc288747f8', name: "2051" })))), h("post-collapsible", { key: '996887d6a0098a37dbac8d5edb950900f57d15f7', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '21fa64a007cf0da4e0c0cf56f5862641d016517a', class: "accordion-body", part: "body" }, h("slot", { key: '2a9f7731183e35c37523e079d437612dbda1a01b' }))))));
     }
     get host() { return this; }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]
     }; }
-    static get style() { return PostAccordionItemStyle0; }
+    static get style() { return postAccordionItemCss; }
 }, [1, "post-accordion-item", {
         "collapsed": [1028],
         "headingLevel": [2, "heading-level"],
@@ -71,6 +78,9 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     }, [[2, "postToggle", "onCollapseToggle"]], {
         "headingLevel": ["validateHeadingLevel"]
     }]);
+__decorate([
+    EventFrom('post-accordion-item')
+], PostAccordionItem.prototype, "onCollapseToggle", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -99,5 +109,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostAccordionItem as P, defineCustomElement as d };

package/dist/components/{get-root.js → p-DBHo9yGF.js}

@@ -1,4 +1,4 @@
-import { I as IS_BROWSER } from './breakpoints.js';
+import { I as IS_BROWSER } from './p-Cx0AiN2A.js';
 
 /**
  * getRootNode() can only be used after the element has been attached to the document!

package/dist/components/{post-menu-trigger2.js → p-DEBPuQvD.js}

@@ -1,16 +1,19 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-import { g as getRoot } from './get-root.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-BQFahg8B.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { g as getRoot } from './p-DBHo9yGF.js';
 
 const postMenuTriggerCss = ":host{display:inline-block}";
-const PostMenuTriggerStyle0 = postMenuTriggerCss;
 
-const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger extends HTMLElement {
+const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger extends H {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
+         */
+        this.ariaExpanded = false;
         /**
          * Reference to the slotted button within the trigger, if present.
          * Used to manage click and key events for menu control.
@@ -22,8 +25,6 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
                 this.handleToggle();
             }
         };
-        this.for = undefined;
-        this.ariaExpanded = false;
     }
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
@@ -53,7 +54,7 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         // Check if the slottedButton is within a web component
         if (!this.slottedButton) {
             const webComponent = this.host.querySelector('.menu-trigger-webc');
-            if (webComponent.shadowRoot) {
+            if (webComponent?.shadowRoot) {
                 const slottedButton = webComponent.shadowRoot.querySelector('button');
                 if (slottedButton) {
                     this.slottedButton = slottedButton;
@@ -79,13 +80,13 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: '61d2f4b4703acd195db0ac005cdf882150e499ba', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'b7f8ea683af5e3473e4ba12f6d4ac36ae55aad57' })));
+        return (h(Host, { key: '76b3c59cdae5c78cefaaf1ea2a9668a77bddd37e', "data-version": version, "tab-index": "-1" }, h("slot", { key: '3835d87c3795e694f7493ceb735bd638bdd2dea1' })));
     }
     get host() { return this; }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }
-    static get style() { return PostMenuTriggerStyle0; }
+    static get style() { return postMenuTriggerCss; }
 }, [4, "post-menu-trigger", {
         "for": [513],
         "ariaExpanded": [32]
@@ -105,5 +106,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostMenuTrigger as P, defineCustomElement as d };

package/dist/components/{post-collapsible-trigger2.js → p-DS1BUsT3.js}

@@ -1,17 +1,26 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-import { e as eventGuard } from './event-guard.js';
-import { g as getRoot } from './get-root.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-BQFahg8B.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { E as EventFrom } from './p-8U5GFtQP.js';
+import { g as getRoot } from './p-DBHo9yGF.js';
 
-const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends HTMLElement {
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.observer = new MutationObserver(() => this.setTrigger());
-        this.for = undefined;
     }
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
@@ -48,11 +57,9 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
      * This updates the trigger's "aria-expanded" attribute based on the event detail.
      */
     handlePostToggle(e) {
-        eventGuard(this.host, e, { targetLocalName: 'post-collapsible' }, () => {
-            if (this.trigger) {
-                this.trigger.setAttribute('aria-expanded', `${e.detail}`);
-            }
-        });
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', `${e.detail}`);
+        }
     }
     updateAriaAttributes() {
         if (!this.trigger)
@@ -96,7 +103,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: '8c835c780604b1138262489ca7d3313288e5ee86', "data-version": version }, h("slot", { key: 'ef354c2ca5e699a4e2c8940959f75a69918f388c' })));
+        return (h(Host, { key: '7fdf4338861df3ed4a61e2de68a0623f7f43df19', "data-version": version }, h("slot", { key: '4efa3ed29778dc162c4e8628f32d447d8b0b9ece' })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -108,6 +115,9 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
     }, undefined, {
         "for": ["validateAriaAttributes"]
     }]);
+__decorate([
+    EventFrom('post-collapsible')
+], PostCollapsibleTrigger.prototype, "handlePostToggle", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -121,5 +131,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostCollapsibleTrigger as P, defineCustomElement as d };

package/dist/components/{post-accordion2.js → p-Df_aJQyq.js}

@@ -1,20 +1,31 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { H as HEADING_LEVELS } from './heading-levels.js';
-import { c as checkRequiredAndOneOf } from './index2.js';
-import './breakpoints.js';
-import { e as eventGuard } from './event-guard.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-BQFahg8B.js';
+import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
+import { b as checkRequiredAndOneOf } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { E as EventFrom } from './p-8U5GFtQP.js';
 
 const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:where(:only-of-type,:not(:first-of-type))){--post-accordion-button-border-top-width:0}";
-const PostAccordionStyle0 = postAccordionCss;
 
-const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.expandedItems = new Set();
-        this.headingLevel = undefined;
+        /**
+         * If `true`, multiple `post-accordion-item` can be open at the same time.
+         */
         this.multiple = false;
     }
     validateHeadingLevel() {
@@ -30,23 +41,21 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         this.validateHeadingLevel();
     }
     collapseToggleHandler(event) {
-        eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion' }, () => {
-            const toggledAccordionItem = event.target;
-            const isClosing = this.expandedItems.has(toggledAccordionItem);
-            if (isClosing) {
-                this.expandedItems.delete(toggledAccordionItem);
-            }
-            else {
-                this.expandedItems.add(toggledAccordionItem);
-            }
-            if (this.multiple || isClosing)
-                return;
-            // Close other open accordion items to ensure only one is open at a time
-            Array.from(this.expandedItems.values())
-                .filter(item => item !== toggledAccordionItem)
-                .forEach(item => {
-                item.toggle(false);
-            });
+        const toggledAccordionItem = event.target;
+        const isClosing = this.expandedItems.has(toggledAccordionItem);
+        if (isClosing) {
+            this.expandedItems.delete(toggledAccordionItem);
+        }
+        else {
+            this.expandedItems.add(toggledAccordionItem);
+        }
+        if (this.multiple || isClosing)
+            return;
+        // Close other open accordion items to ensure only one is open at a time
+        Array.from(this.expandedItems.values())
+            .filter(item => item !== toggledAccordionItem)
+            .forEach(item => {
+            item.toggle(false);
         });
     }
     /**
@@ -93,13 +102,13 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: '7057a6926f2279f7fc86d7f8539dd3ca884a3d70', "data-version": version }, h("div", { key: 'a6d337471d1d16c09d7e6af950d39c58fc6f2880', class: "accordion" }, h("slot", { key: '9687babb4b539f6e54468555b4057a2b378e1e10', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: 'ab800b580f0dd591a9413305afa282ff7e697759', "data-version": version }, h("div", { key: '258ba1dc99811545c0dd9796ef521a05a0c87dda', class: "accordion" }, h("slot", { key: '2ad7482962316723f5c8ff334bad7cc33b6fa953', onSlotchange: () => this.registerAccordionItems() }))));
     }
     get host() { return this; }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]
     }; }
-    static get style() { return PostAccordionStyle0; }
+    static get style() { return postAccordionCss; }
 }, [1, "post-accordion", {
         "headingLevel": [2, "heading-level"],
         "multiple": [4],
@@ -109,6 +118,9 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
     }, [[0, "postToggle", "collapseToggleHandler"]], {
         "headingLevel": ["validateHeadingLevel"]
     }]);
+__decorate([
+    EventFrom('post-accordion-item')
+], PostAccordion.prototype, "collapseToggleHandler", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -122,5 +134,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostAccordion as P, defineCustomElement as d };

package/{loaders/post-collapsible2.js → dist/components/p-DrzP02ul.js}

@@ -1,7 +1,7 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { a as checkEmptyOrType } from './index2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { v as version } from './p-BQFahg8B.js';
+import { I as IS_BROWSER } from './p-Cx0AiN2A.js';
+import { e as checkEmptyOrType } from './p-CV7fm1rW.js';
 
 function isMotionReduced() {
     return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
@@ -27,16 +27,18 @@ function expand(el) {
 }
 
 const postCollapsibleCss = ":host{display:block;position:relative;overflow:hidden}";
-const PostCollapsibleStyle0 = postCollapsibleCss;
 
-const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible extends HTMLElement {
+const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.postToggle = createEvent(this, "postToggle", 7);
+        this.postToggle = createEvent(this, "postToggle");
         this.isLoaded = false;
         this.isOpen = true;
+        /**
+         * If `true`, the element is collapsed otherwise it is displayed.
+         */
         this.collapsed = false;
     }
     collapsedChange() {
@@ -84,7 +86,7 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
     static get watchers() { return {
         "collapsed": ["collapsedChange"]
     }; }
-    static get style() { return PostCollapsibleStyle0; }
+    static get style() { return postCollapsibleCss; }
 }, [1, "post-collapsible", {
         "collapsed": [1028],
         "toggle": [64]
@@ -104,5 +106,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostCollapsible as P, defineCustomElement as d };