@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37

package/dist/components/check-non-empty.js

@@ -1,8 +1,12 @@
 import { E as EMPTY_VALUES } from './constants.js';
 
-function checkNonEmpty(value, error) {
+function checkNonEmpty(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is required.`;
+    const message = customMessage || defaultMessage;
     if (EMPTY_VALUES.some(v => v === value)) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }
 

package/dist/components/check-one-of.js

@@ -1,6 +1,11 @@
-function checkOneOf(value, possibleValues, error) {
-    if (!possibleValues.includes(value))
-        throw new Error(error);
+function checkOneOf(component, prop, possibleValues, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    const message = customMessage || defaultMessage;
+    if (!possibleValues.includes(value)) {
+        throw new Error(message);
+    }
 }
 
 export { checkOneOf as c };

package/dist/components/check-type.js

@@ -1,13 +1,18 @@
-function checkType(value, type, error) {
+function checkType(component, prop, type, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
     const typeIsArray = type === 'array';
     const valueIsArray = Array.isArray(value);
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`
+    ${type}\`.`;
+    const message = customMessage || defaultMessage;
     if (typeIsArray || valueIsArray) {
-        if (valueIsArray !== typeIsArray)
-            throw new Error(error);
+        if (valueIsArray !== typeIsArray) {
+            throw new Error(message);
+        }
     }
-    else {
-        if (typeof value !== type)
-            throw new Error(error);
+    else if (typeof value !== type) {
+        throw new Error(message);
     }
 }
 

package/dist/components/event-guard.js

@@ -0,0 +1,45 @@
+function eventGuard(host, event, options, callback) {
+    const target = event.target;
+    if (!target)
+        return;
+    if (target.localName === options.targetLocalName) {
+        if (!options.delegatorSelector || shadowClosest(target, options.delegatorSelector) === host) {
+            callback();
+        }
+    }
+}
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) starting from the given element
+ * to find and return the closest ancestor that matches the specified CSS selector.
+ * If no matching element is found, returns null.
+ *
+ * @param element - The starting element from which the search begins.
+ * @param selector - The CSS selector used to test each ancestor element.
+ * @returns The closest matching ancestor element or null if none is found.
+ */
+function shadowClosest(element, selector) {
+    let currentElement = element;
+    while (currentElement) {
+        if (currentElement.matches(selector)) {
+            return currentElement;
+        }
+        const parent = currentElement.parentElement;
+        if (parent) {
+            currentElement = parent;
+        }
+        else {
+            const parentNode = currentElement.parentNode;
+            // When no parentElement exists, check if the current element is inside a shadow DOM.
+            // If so, move up to the shadow host to continue the search outside the shadow boundary.
+            if (parentNode instanceof ShadowRoot) {
+                currentElement = parentNode.host;
+            }
+            else {
+                currentElement = null;
+            }
+        }
+    }
+    return null;
+}
+
+export { eventGuard as e };

package/dist/components/fade.js

@@ -1,7 +1,11 @@
 const fadeDuration = 200;
 const fadedOutKeyframe = { opacity: '0' };
 const fadedInKeyframe = { opacity: '1' };
-const fadeIn = (el) => el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
-const fadeOut = (el) => el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
+function fadeIn(el) {
+    return el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
+}
+function fadeOut(el) {
+    return el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
+}
 
 export { fadeIn as a, fadeOut as f };

package/dist/components/get-focusable-children.js

@@ -0,0 +1,35 @@
+const focusableSelector = `:where(${[
+    'button',
+    'input:not([type="hidden"])',
+    '[tabindex]',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    'a[href]',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    'area[href]',
+    'details > summary:first-of-type',
+].join(',')})`;
+const focusDisablingSelector = `:where(${[
+    '[inert]',
+    '[inert] *',
+    ':disabled',
+    'dialog:not([open]) *',
+    '[popover]:not(:popover-open) *',
+    'details:not([open]) > *:not(details > summary:first-of-type)',
+    'details:not([open]) > *:not(details > summary:first-of-type) *',
+    '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
+].join(',')})`;
+function getFocusableChildren(element) {
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    const visibleFocusableChildren = Array.from(focusableChildren).filter(child => {
+        const style = window.getComputedStyle(child.parentElement);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return visibleFocusableChildren;
+}
+
+export { getFocusableChildren as g };

package/dist/components/get-root.js

@@ -1,5 +1,11 @@
+import { I as IS_BROWSER } from './breakpoints.js';
+
+/**
+ * getRootNode() can only be used after the element has been attached to the document!
+ * So use it for example in the componentDidLoad lifecycle hook.
+ */
 function getRoot(element) {
-    const root = element.getRootNode();
+    const root = IS_BROWSER ? element.getRootNode() : element;
     if (root instanceof Document || root instanceof ShadowRoot) {
         return root;
     }

package/dist/components/index.browser.js

@@ -0,0 +1,14 @@
+const urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+/* @ts-self-types="./index.d.ts" */
+let nanoid = (size = 21) => {
+  let id = '';
+  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
+  while (size--) {
+    id += urlAlphabet[bytes[size] & 63];
+  }
+  return id
+};
+
+export { nanoid as n };

package/dist/components/index.js

@@ -4,7 +4,7 @@ export { P as PostAccordionItem } from './post-accordion-item2.js';
 export { P as PostAvatar } from './post-avatar2.js';
 export { P as PostBackToTop } from './post-back-to-top2.js';
 export { P as PostBanner } from './post-banner2.js';
-export { P as PostBreadcrumb } from './post-breadcrumb2.js';
+export { P as PostBreadcrumbs } from './post-breadcrumbs2.js';
 export { P as PostBreadcrumbItem } from './post-breadcrumb-item2.js';
 export { P as PostCardControl } from './post-card-control2.js';
 export { P as PostClosebutton } from './post-closebutton2.js';
@@ -15,6 +15,7 @@ export { P as PostHeader } from './post-header2.js';
 export { P as PostIcon } from './post-icon2.js';
 export { P as PostLanguageOption } from './post-language-option2.js';
 export { P as PostLanguageSwitch } from './post-language-switch2.js';
+export { P as PostLinkarea } from './post-linkarea2.js';
 export { P as PostList } from './post-list2.js';
 export { P as PostListItem } from './post-list-item2.js';
 export { P as PostLogo } from './post-logo2.js';
@@ -33,3 +34,4 @@ export { P as PostTabPanel } from './post-tab-panel2.js';
 export { P as PostTag } from './post-tag2.js';
 export { P as PostTogglebutton } from './post-togglebutton2.js';
 export { P as PostTooltip } from './post-tooltip2.js';
+export { P as PostTooltipTrigger } from './post-tooltip-trigger2.js';

package/dist/components/index2.js

@@ -4,25 +4,38 @@ import { c as checkType } from './check-type.js';
 
 function emptyOr(check) {
     return (...args) => {
-        const value = args[0];
-        if (!EMPTY_VALUES.some(v => v === value))
+        const component = args[0];
+        const prop = args[1];
+        const value = component[prop];
+        if (!EMPTY_VALUES.some(v => v === value)) {
             check(...args);
+        }
     };
 }
 
-function checkPattern(value, pattern, errorMessage) {
-    if (typeof value !== 'string' || !pattern.test(value))
-        throw new Error(errorMessage);
+function checkPattern(component, prop, pattern, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be follow the format \`${pattern}\`.`;
+    const message = customMessage || defaultMessage;
+    if (typeof value !== 'string' || !pattern.test(value)) {
+        throw new Error(message);
+    }
 }
 
-function checkUrl(value, error) {
-    if (typeof value !== 'string' && !(value instanceof URL))
-        throw new Error(error);
+function checkUrl(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
+    const message = customMessage || defaultMessage;
+    if (typeof value !== 'string' && !(value instanceof URL)) {
+        throw new Error(message);
+    }
     try {
-        new URL(value);
+        new URL(value, 'https://www.post.ch');
     }
-    catch (e) {
-        throw new Error(error);
+    catch {
+        throw new Error(message);
     }
 }
 

package/dist/components/long-press-event.js

@@ -0,0 +1,264 @@
+/*!
+ * long-press-event - v@version@
+ * Pure JavaScript long-press-event
+ * https://github.com/john-doherty/long-press-event
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */
+(function (window, document) {
+
+    // local timer object based on rAF
+    var timer = null;
+
+    // check if we're using a touch screen
+    var hasPointerEvents = (('PointerEvent' in window) || (window.navigator && 'msPointerEnabled' in window.navigator));
+    var isTouch = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
+
+    // switch to pointer events or touch events if using a touch screen
+    var mouseDown = hasPointerEvents ? 'pointerdown' : isTouch ? 'touchstart' : 'mousedown';
+    var mouseUp = hasPointerEvents ? 'pointerup' : isTouch ? 'touchend' : 'mouseup';
+    var mouseMove = hasPointerEvents ? 'pointermove' : isTouch ? 'touchmove' : 'mousemove';
+    var mouseLeave = hasPointerEvents ? 'pointerleave' : isTouch ? 'touchleave' : 'mouseleave';
+
+    // track number of pixels the mouse moves during long press
+    var startX = 0; // mouse x position when timer started
+    var startY = 0; // mouse y position when timer started
+    var maxDiffX = 10; // max number of X pixels the mouse can move during long press before it is canceled
+    var maxDiffY = 10; // max number of Y pixels the mouse can move during long press before it is canceled
+
+    // patch CustomEvent to allow constructor creation (IE/Chrome)
+    if (typeof window.CustomEvent !== 'function') {
+
+        window.CustomEvent = function (event, params) {
+
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        };
+
+        window.CustomEvent.prototype = window.Event.prototype;
+    }
+
+    // requestAnimationFrame() shim by Paul Irish
+    window.requestAnimFrame = (function () {
+        return window.requestAnimationFrame ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame ||
+            window.oRequestAnimationFrame ||
+            window.msRequestAnimationFrame || function (callback) {
+                window.setTimeout(callback, 1000 / 60);
+            };
+    })();
+
+    /**
+     * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
+     * @param {function} fn The callback function
+     * @param {int} delay The delay in milliseconds
+     * @returns {object} handle to the timeout object
+     */
+    function requestTimeout(fn, delay) {
+
+        if (!window.requestAnimationFrame && !window.webkitRequestAnimationFrame &&
+            !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
+            !window.oRequestAnimationFrame && !window.msRequestAnimationFrame) return window.setTimeout(fn, delay);
+
+        var start = new Date().getTime();
+        var handle = {};
+
+        var loop = function () {
+            var current = new Date().getTime();
+            var delta = current - start;
+
+            if (delta >= delay) {
+                fn.call();
+            }
+            else {
+                handle.value = requestAnimFrame(loop);
+            }
+        };
+
+        handle.value = requestAnimFrame(loop);
+
+        return handle;
+    }
+
+    /**
+     * Behaves the same as clearTimeout except uses cancelRequestAnimationFrame() where possible for better performance
+     * @param {object} handle The callback function
+     * @returns {void}
+     */
+    function clearRequestTimeout(handle) {
+        if (handle) {
+            window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
+                window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
+                    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
+                        window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
+                            window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
+                                window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
+                                    clearTimeout(handle);
+        }
+    }
+
+    /**
+     * Fires the 'long-press' event on element
+     * @param {MouseEvent|PointerEvent|TouchEvent} originalEvent The original event being fired
+     * @returns {void}
+     */
+    function fireLongPressEvent(originalEvent) {
+
+        clearLongPressTimer();
+
+        originalEvent = unifyEvent(originalEvent);
+
+        // fire the long-press event
+        var allowClickEvent = this.dispatchEvent(new CustomEvent('long-press', {
+            bubbles: true,
+            cancelable: true,
+
+            // custom event data (legacy)
+            detail: {
+                clientX: originalEvent.clientX,
+                clientY: originalEvent.clientY,
+                offsetX: originalEvent.offsetX,
+                offsetY: originalEvent.offsetY,
+                pageX: originalEvent.pageX,
+                pageY: originalEvent.pageY
+            },
+
+            // add coordinate data that would typically acompany a touch/click event
+            clientX: originalEvent.clientX,
+            clientY: originalEvent.clientY,
+            offsetX: originalEvent.offsetX,
+            offsetY: originalEvent.offsetY,
+            pageX: originalEvent.pageX,
+            pageY: originalEvent.pageY,
+            screenX: originalEvent.screenX,
+            screenY: originalEvent.screenY
+        }));
+
+        if (!allowClickEvent) {
+            // suppress the next click event if e.preventDefault() was called in long-press handler
+            document.addEventListener('click', function suppressEvent(e) {
+                document.removeEventListener('click', suppressEvent, true);
+                cancelEvent(e);
+            }, true);
+        }
+    }
+
+    /**
+     * consolidates mouse, touch, and Pointer events
+     * @param {MouseEvent|PointerEvent|TouchEvent} e The original event being fired
+     * @returns {MouseEvent|PointerEvent|Touch}
+     */
+    function unifyEvent(e) {
+        if (e.changedTouches !== undefined) {
+            return e.changedTouches[0];
+        }
+        return e;
+    }
+
+    /**
+     * method responsible for starting the long press timer
+     * @param {event} e - event object
+     * @returns {void}
+     */
+    function startLongPressTimer(e) {
+
+        clearLongPressTimer();
+
+        var el = e.target;
+
+        // get delay from html attribute if it exists, otherwise default to 1500
+        var longPressDelayInMs = parseInt(getNearestAttribute(el, 'data-long-press-delay', '1500'), 10); // default 1500
+
+        // start the timer
+        timer = requestTimeout(fireLongPressEvent.bind(el, e), longPressDelayInMs);
+    }
+
+    /**
+     * method responsible for clearing a pending long press timer
+     * @param {event} e - event object
+     * @returns {void}
+     */
+    function clearLongPressTimer(e) {
+        clearRequestTimeout(timer);
+        timer = null;
+    }
+
+    /**
+    * Cancels the current event
+    * @param {object} e - browser event object
+    * @returns {void}
+    */
+    function cancelEvent(e) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    /**
+     * Starts the timer on mouse down and logs current position
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function mouseDownHandler(e) {
+        startX = e.clientX;
+        startY = e.clientY;
+        startLongPressTimer(e);
+    }
+
+    /**
+     * If the mouse moves n pixels during long-press, cancel the timer
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function mouseMoveHandler(e) {
+
+        // calculate total number of pixels the pointer has moved
+        var diffX = Math.abs(startX - e.clientX);
+        var diffY = Math.abs(startY - e.clientY);
+
+        // if pointer has moved more than allowed, cancel the long-press timer and therefore the event
+        if (diffX >= maxDiffX || diffY >= maxDiffY) {
+            clearLongPressTimer();
+        }
+    }
+
+    /**
+     * Gets attribute off HTML element or nearest parent
+     * @param {object} el - HTML element to retrieve attribute from
+     * @param {string} attributeName - name of the attribute
+     * @param {any} defaultValue - default value to return if no match found
+     * @returns {any} attribute value or defaultValue
+     */
+    function getNearestAttribute(el, attributeName, defaultValue) {
+
+        // walk up the dom tree looking for data-action and data-trigger
+        while (el && el !== document.documentElement) {
+
+            var attributeValue = el.getAttribute(attributeName);
+
+            if (attributeValue) {
+                return attributeValue;
+            }
+
+            el = el.parentNode;
+        }
+
+        return defaultValue;
+    }
+
+    // hook events that clear a pending long press event
+    document.addEventListener(mouseUp, clearLongPressTimer, true);
+    document.addEventListener(mouseLeave, clearLongPressTimer, true);
+    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
+
+}(window, document));

package/dist/components/package.js

@@ -1,3 +1,3 @@
-const version = "9.0.0-next.9";
+const version = "10.0.0-next.37";
 
 export { version as v };

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

@@ -2,11 +2,14 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { c 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';
 
-const postAccordionItemCss = ":host::after{display:block;content:\"\";margin-top:calc(var(--post-device-border-width-default)*-1);border-bottom:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}.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:inherit;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));transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.accordion-button::before{display:block;position:absolute;content:\"\";inset:0;bottom:auto;border-top:var(--post-accordion-button-border-top)}.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:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:var(--post-device-border-width-default) solid Highlight}.accordion-button:disabled{opacity:1 !important}}.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 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:var(--post-accordion-button-border-top)}.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 {
@@ -19,21 +22,20 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         this.collapsed = false;
         this.headingLevel = undefined;
     }
-    validateHeadingLevel(newValue = this.headingLevel) {
-        checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
+    validateHeadingLevel() {
+        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }
     componentWillLoad() {
-        this.id = this.host.id || `a${crypto.randomUUID()}`;
+        this.id = this.host.id || `p${nanoid(6)}`;
     }
     componentDidLoad() {
         this.validateHeadingLevel();
     }
-    // capture to make sure the "collapsed" property is updated before the event is consumed
+    // Capture to make sure the "collapsed" property is updated before the event is consumed
     onCollapseToggle(event) {
-        if (event.target === this.host &&
-            event.target.localName === 'post-accordion-item') {
+        eventGuard(this.host, event, { targetLocalName: 'post-collapsible', delegatorSelector: 'post-accordion-item' }, () => {
             this.collapsed = !event.detail;
-        }
+        });
     }
     /**
      * Triggers the collapse programmatically.
@@ -48,13 +50,12 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         this.slottedLogo = this.host.querySelector('img[slot="logo"]');
     }
     render() {
-        var _a, _b;
-        const headingLevel = (_a = this.host.closest('post-accorddion')) === null || _a === void 0 ? void 0 : _a.getAttribute('heading-level');
-        const HeadingTag = `h${(_b = headingLevel !== null && headingLevel !== void 0 ? headingLevel : this.headingLevel) !== null && _b !== void 0 ? _b : 2}`;
-        return (h(Host, { key: 'e11a8ce9df85f6813f152433d0b5526668415953', id: this.id, "data-version": version }, h("div", { key: 'd62b7f758fca1ffbcef7c6f29b3a0ce48ded9749', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '492458d3cda61325d931a83be1f1be1f98f63301', for: `${this.id}--collapse` }, h(HeadingTag, { key: '1a4bc90415504cd00a65922ff5e61221c8368eea', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'c14154955c74a4482cc197aca95297ae29ef066f', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '112810b9df4a73bc02a46a98ba2d0ce069168c7c', class: {
+        const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
+        const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
+        return (h(Host, { key: '725d3710f7937f82c2382938d15770001e923b61', id: this.id, "data-version": version }, h("div", { key: '679d25d8278fbf9ae68546ee50c27a86ded95999', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '7c2af8dc6a1f5265b4ae2cad066be7d2e0bf6a78', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'a10e59a17fdb272fe6308d2ba98f37f90490fab8', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'e2b527850c8342a8adf99453d0ac330b6a94760f', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'b722a4bc51757546eefa58c7c3ea3a688838298a', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: '67e72b84363597fc0e239baccb533b9083251a6b', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '3e9a2b38f621990cabfa84431ca8a7fd39087c88', name: "header" }), h("post-icon", { key: 'e8337b48394b9357b62e517c3b066dfa1bb5f5d7', name: "2051" })))), h("post-collapsible", { key: 'ca23a5a9a8b1615dc4352223a3135514ea5f279a', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '668805a03a3ee2facee60ecba0fa549edf0cecba', class: "accordion-body", part: "body" }, h("slot", { key: '3ddf282a59dad61dcd093c11a23f33635c9162d1' }))))));
+            } }, h("slot", { key: '1a42494db72a7b437b1d98fa2e8159d73ece22fa', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '049865bb25f833780ef8e27fe8477e06476a2427', name: "header" }), h("post-icon", { key: 'da0cf7078e4f51710dbfd39c0afa90465fcb53c6', name: "2051" })))), h("post-collapsible", { key: '7c3b268e34d3e4f52820b11a6c090aefbc16e3b9', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '993a7fffbccb557aed2842305f3927e5c3b5047a', class: "accordion-body", part: "body" }, h("slot", { key: '580eb87b1cb4f88acd7dddddecaa1c1982b7f6e3' }))))));
     }
     get host() { return this; }
     static get watchers() { return {