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

package/dist/types/components.d.ts

@@ -7,12 +7,10 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { HeadingLevel } from "./types/index";
 import { BannerType } from "./components/post-banner/banner-types";
-import { DEVICE_SIZE } from "./components/post-header/post-header";
 import { SwitchVariant } from "./components/post-language-switch/switch-variants";
 import { Placement } from "@floating-ui/dom";
 export { HeadingLevel } from "./types/index";
 export { BannerType } from "./components/post-banner/banner-types";
-export { DEVICE_SIZE } from "./components/post-header/post-header";
 export { SwitchVariant } from "./components/post-language-switch/switch-variants";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
@@ -85,7 +83,7 @@ export namespace Components {
         /**
           * The label to use for the close button of a dismissible banner.
          */
-        "dismissLabel": string;
+        "dismissLabel"?: string;
         /**
           * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
          */
@@ -93,7 +91,7 @@ export namespace Components {
         /**
           * The icon to display in the banner. By default, the icon depends on the banner type.  If `none`, no icon is displayed.
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * The type of the banner.
          */
@@ -126,7 +124,7 @@ export namespace Components {
         /**
           * Defines the description in the control-label.
          */
-        "description": string;
+        "description"?: string;
         /**
           * Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
          */
@@ -138,7 +136,7 @@ export namespace Components {
         /**
           * Defines the icon `name` inside the card. <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * Defines the text in the control-label.
          */
@@ -146,9 +144,9 @@ export namespace Components {
         /**
           * Defines the `name` attribute of the control. <span className="mb-4 banner banner-sm banner-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span> <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
          */
-        "name": string;
+        "name"?: string;
         /**
-          * A public method to reset the controls `checked` and `validity` state. The validity state is set to `null`, so it's neither valid nor invalid.
+          * A public method to reset the controls `checked` and `validity` state. The validity state is set to `undefined`, so it's neither valid nor invalid.
          */
         "reset": () => Promise<void>;
         /**
@@ -158,11 +156,11 @@ export namespace Components {
         /**
           * Defines the validation `validity` of the control. To reset validity to an undefined state, simply remove the attribute from the control.
          */
-        "validity": null | 'true' | 'false';
+        "validity"?: boolean;
         /**
           * Defines the `value` attribute of the control. <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
          */
-        "value": string;
+        "value"?: string;
     }
     interface PostClosebutton {
     }
@@ -205,11 +203,11 @@ export namespace Components {
         /**
           * The name of the animation.
          */
-        "animation"?: Animation | null;
+        "animation"?: Animation;
         /**
           * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.
          */
-        "base"?: string | null;
+        "base"?: string;
         /**
           * When set to `true`, the icon will be flipped horizontally.
          */
@@ -225,17 +223,17 @@ export namespace Components {
         /**
           * The number of degree for the css rotate transformation.
          */
-        "rotate"?: number | null;
+        "rotate"?: number;
         /**
           * The number for the css scale transformation.
          */
-        "scale"?: number | null;
+        "scale"?: number;
     }
     interface PostLanguageOption {
         /**
           * If set to `true`, the language option is considered the current language for the page.
          */
-        "active": boolean;
+        "active"?: boolean;
         /**
           * The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
          */
@@ -243,7 +241,7 @@ export namespace Components {
         /**
           * The full name of the language. For example, "Deutsch".
          */
-        "name": string;
+        "name"?: string;
         /**
           * Selects the language option programmatically.
          */
@@ -251,11 +249,11 @@ export namespace Components {
         /**
           * The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor.
          */
-        "url": string;
+        "url"?: string;
         /**
           * To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
          */
-        "variant"?: SwitchVariant | null;
+        "variant"?: SwitchVariant;
     }
     interface PostLanguageSwitch {
         /**
@@ -289,7 +287,7 @@ export namespace Components {
         /**
           * The URL to which the user is redirected upon clicking the logo.
          */
-        "url": string | URL;
+        "url"?: string | URL;
     }
     interface PostMainnavigation {
     }
@@ -436,7 +434,7 @@ export namespace Components {
         /**
           * The name of the panel controlled by the tab header.
          */
-        "panel": HTMLPostTabPanelElement['name'];
+        "panel": string;
     }
     interface PostTabPanel {
         /**
@@ -448,7 +446,7 @@ export namespace Components {
         /**
           * The name of the panel that is initially shown. If not specified, it defaults to the panel associated with the first tab.  **Changing this value after initialization has no effect.**
          */
-        "activePanel": HTMLPostTabPanelElement['name'];
+        "activePanel"?: HTMLPostTabPanelElement['name'];
         /**
           * Shows the panel with the given name and selects its associated tab. Any other panel that was previously shown becomes hidden and its associated tab is unselected.
          */
@@ -458,15 +456,15 @@ export namespace Components {
         /**
           * Defines the icon `name` inside of the component. <span className="banner banner-sm banner-info">If not set the icon will not show up.</span> To learn which icons are available, please visit our <a href="/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs">icon library</a>.
          */
-        "icon": null | string;
+        "icon": string;
         /**
           * Defines the size of the component.
          */
-        "size": null | 'sm';
+        "size"?: 'sm';
         /**
           * Defines the color variant of the component.
          */
-        "variant": 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
+        "variant"?: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
     }
     interface PostTogglebutton {
         /**
@@ -478,7 +476,7 @@ export namespace Components {
         /**
           * Choose a tooltip animation
          */
-        "animation"?: 'pop-in' | null;
+        "animation"?: 'pop-in';
         /**
           * Whether or not to display a little pointer arrow
          */
@@ -530,10 +528,6 @@ export interface PostCollapsibleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostCollapsibleElement;
 }
-export interface PostHeaderCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPostHeaderElement;
-}
 export interface PostLanguageOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostLanguageOptionElement;
@@ -668,18 +662,7 @@ declare global {
         prototype: HTMLPostFooterElement;
         new (): HTMLPostFooterElement;
     };
-    interface HTMLPostHeaderElementEventMap {
-        "postUpdateDevice": DEVICE_SIZE;
-    }
     interface HTMLPostHeaderElement extends Components.PostHeader, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPostHeaderElementEventMap>(type: K, listener: (this: HTMLPostHeaderElement, ev: PostHeaderCustomEvent<HTMLPostHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPostHeaderElementEventMap>(type: K, listener: (this: HTMLPostHeaderElement, ev: PostHeaderCustomEvent<HTMLPostHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLPostHeaderElement: {
         prototype: HTMLPostHeaderElement;
@@ -1015,7 +998,7 @@ declare namespace LocalJSX {
         /**
           * The URL for the home breadcrumb item.
          */
-        "homeUrl"?: string;
+        "homeUrl": string;
     }
     /**
      * @class PostCardControl - representing a stencil component
@@ -1060,7 +1043,7 @@ declare namespace LocalJSX {
         /**
           * Defines the validation `validity` of the control. To reset validity to an undefined state, simply remove the attribute from the control.
          */
-        "validity"?: null | 'true' | 'false';
+        "validity"?: boolean;
         /**
           * Defines the `value` attribute of the control. <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
          */
@@ -1082,7 +1065,7 @@ declare namespace LocalJSX {
         /**
           * Link the trigger to a post-collapsible with this id
          */
-        "for"?: string;
+        "for": string;
     }
     interface PostFooter {
         /**
@@ -1091,10 +1074,6 @@ declare namespace LocalJSX {
         "label": string;
     }
     interface PostHeader {
-        /**
-          * An event emitted when the device has changed
-         */
-        "onPostUpdateDevice"?: (event: PostHeaderCustomEvent<DEVICE_SIZE>) => void;
     }
     /**
      * @class PostIcon - representing a stencil component
@@ -1103,11 +1082,11 @@ declare namespace LocalJSX {
         /**
           * The name of the animation.
          */
-        "animation"?: Animation | null;
+        "animation"?: Animation;
         /**
           * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.
          */
-        "base"?: string | null;
+        "base"?: string;
         /**
           * When set to `true`, the icon will be flipped horizontally.
          */
@@ -1123,11 +1102,11 @@ declare namespace LocalJSX {
         /**
           * The number of degree for the css rotate transformation.
          */
-        "rotate"?: number | null;
+        "rotate"?: number;
         /**
           * The number for the css scale transformation.
          */
-        "scale"?: number | null;
+        "scale"?: number;
     }
     interface PostLanguageOption {
         /**
@@ -1157,17 +1136,17 @@ declare namespace LocalJSX {
         /**
           * To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
          */
-        "variant"?: SwitchVariant | null;
+        "variant"?: SwitchVariant;
     }
     interface PostLanguageSwitch {
         /**
           * A title for the list of language options
          */
-        "caption"?: string;
+        "caption": string;
         /**
           * A descriptive text for the list of language options
          */
-        "description"?: string;
+        "description": string;
         /**
           * Whether the component is rendered as a list or a menu
          */
@@ -1299,13 +1278,13 @@ declare namespace LocalJSX {
         /**
           * The name of the panel controlled by the tab header.
          */
-        "panel"?: HTMLPostTabPanelElement['name'];
+        "panel": string;
     }
     interface PostTabPanel {
         /**
           * The name of the panel, used to associate it with a tab header.
          */
-        "name"?: string;
+        "name": string;
     }
     interface PostTabs {
         /**
@@ -1321,11 +1300,11 @@ declare namespace LocalJSX {
         /**
           * Defines the icon `name` inside of the component. <span className="banner banner-sm banner-info">If not set the icon will not show up.</span> To learn which icons are available, please visit our <a href="/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs">icon library</a>.
          */
-        "icon"?: null | string;
+        "icon"?: string;
         /**
           * Defines the size of the component.
          */
-        "size"?: null | 'sm';
+        "size"?: 'sm';
         /**
           * Defines the color variant of the component.
          */
@@ -1341,7 +1320,7 @@ declare namespace LocalJSX {
         /**
           * Choose a tooltip animation
          */
-        "animation"?: 'pop-in' | null;
+        "animation"?: 'pop-in';
         /**
           * Whether or not to display a little pointer arrow
          */

package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/prebuild.d.ts

@@ -0,0 +1 @@
+export declare function createComponentNamesScssMap(): void;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { Components, JSX, PostHeaderCustomEvent } from './components';
+export { Components, JSX } from './components';
 export { PostAccordion } from './components/post-accordion/post-accordion';
 export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
 export { PostAvatar } from './components/post-avatar/post-avatar';
@@ -11,7 +11,7 @@ export { PostClosebutton } from './components/post-closebutton/post-closebutton'
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
 export { PostFooter } from './components/post-footer/post-footer';
-export { PostHeader, DEVICE_SIZE } from './components/post-header/post-header';
+export { PostHeader } from './components/post-header/post-header';
 export { PostIcon } from './components/post-icon/post-icon';
 export { PostLanguageOption } from './components/post-language-option/post-language-option';
 export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';

package/dist/types/types/index.d.ts

@@ -1 +1,3 @@
 export * from './heading-levels';
+export * from './placement';
+export * from './property-types';

package/dist/types/types/placement.d.ts

@@ -0,0 +1 @@
+export declare const PLACEMENT_TYPES: readonly ["top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end"];

package/dist/types/types/property-types.d.ts

@@ -0,0 +1 @@
+export type PropertyType = 'boolean' | 'number' | 'string' | 'array' | 'object' | 'function';

package/dist/types/utils/is-value-empty.d.ts

@@ -0,0 +1 @@
+export declare function isValueEmpty(value: unknown): boolean;

package/dist/types/utils/property-checkers/check-one-of.d.ts

@@ -1,3 +1,3 @@
 export declare function checkOneOf<T extends {
     host: HTMLElement;
-}>(component: T, prop: keyof T, possibleValues: readonly unknown[], customMessage?: string): void;
+}>(component: T, prop: keyof T, possibleValues: readonly unknown[]): void;

package/dist/types/utils/property-checkers/check-pattern.d.ts

@@ -1,3 +1,3 @@
 export declare function checkPattern<T extends {
     host: HTMLElement;
-}>(component: T, prop: keyof T, pattern: RegExp, customMessage: string): void;
+}>(component: T, prop: keyof T, pattern: RegExp): void;

package/dist/types/utils/property-checkers/check-type.d.ts

@@ -1,4 +1,4 @@
-export type PropertyType = 'boolean' | 'number' | 'string' | 'array' | 'object' | 'function';
+import { PropertyType } from "../../types/property-types";
 export declare function checkType<T extends {
     host: HTMLElement;
-}>(component: T, prop: keyof T, type: PropertyType, customMessage?: string): void;
+}>(component: T, prop: keyof T, type: PropertyType): void;

package/dist/types/utils/property-checkers/check-url.d.ts

@@ -1,3 +1,3 @@
 export declare function checkUrl<T extends {
     host: HTMLElement;
-}>(component: T, prop: keyof T, customMessage?: string): void;
+}>(component: T, prop: keyof T): void;

package/dist/types/utils/property-checkers/constants.d.ts

@@ -1 +1 @@
-export declare const EMPTY_VALUES: string[];
+export declare const EMPTY_VALUES: (string | number)[];

package/dist/types/utils/property-checkers/empty-or.d.ts

@@ -1 +1,3 @@
-export declare function emptyOr<T extends unknown[]>(check: (...args: T) => void): (...args: T) => void;
+export declare function emptyOr<T extends {
+    host: HTMLElement;
+}, K extends keyof T, ExtraArgs extends unknown[]>(check: (component: T, prop: K, ...extraArgs: ExtraArgs) => void): (component: T, prop: K, ...extraArgs: ExtraArgs) => void;

package/dist/types/utils/property-checkers/index.d.ts

@@ -1,17 +1,24 @@
 export declare const checkEmptyOrOneOf: <T extends {
     host: HTMLElement;
-}>(component: T, prop: keyof T, possibleValues: readonly unknown[], customMessage?: string) => void;
+}>(component: T, prop: keyof T, possibleValues: readonly unknown[]) => void;
 export declare const checkEmptyOrPattern: <T extends {
     host: HTMLElement;
-}>(component: T, prop: keyof T, pattern: RegExp, customMessage: string) => void;
+}>(component: T, prop: keyof T, pattern: RegExp) => void;
 export declare const checkEmptyOrType: <T extends {
     host: HTMLElement;
-}>(component: T, prop: keyof T, type: import("./check-type").PropertyType, customMessage?: string) => void;
+}>(component: T, prop: keyof T, type: import("../../types").PropertyType) => void;
 export declare const checkEmptyOrUrl: <T extends {
     host: HTMLElement;
-}>(component: T, prop: keyof T, customMessage?: string) => void;
-export * from './check-non-empty';
-export * from './check-one-of';
-export * from './check-pattern';
-export * from './check-type';
-export * from './check-url';
+}>(component: T, prop: keyof T) => void;
+export declare const checkRequiredAndOneOf: <T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, possibleValues: readonly unknown[]) => void;
+export declare const checkRequiredAndPattern: <T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, pattern: RegExp) => void;
+export declare const checkRequiredAndType: <T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, type: import("../../types").PropertyType) => void;
+export declare const checkRequiredAndUrl: <T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T) => void;

package/dist/types/utils/property-checkers/required-and.d.ts

@@ -0,0 +1,3 @@
+export declare function requiredAnd<T extends {
+    host: HTMLElement;
+}, K extends keyof T, ExtraArgs extends unknown[]>(check: (component: T, prop: K, ...extraArgs: ExtraArgs) => void): (component: T, prop: K, ...extraArgs: ExtraArgs) => void;

package/loaders/index2.js

@@ -1,47 +1,88 @@
-import { E as EMPTY_VALUES } from './constants.js';
-import { c as checkOneOf } from './check-one-of.js';
-import { c as checkType } from './check-type.js';
+const EMPTY_VALUES = [undefined, null, '', NaN];
 
-function emptyOr(check) {
-    return (...args) => {
-        const component = args[0];
-        const prop = args[1];
+function isValueEmpty(value) {
+    return EMPTY_VALUES.some(v => v === value);
+}
+
+function requiredAnd(check) {
+    return (component, prop, ...extraArgs) => {
+        const componentName = component.host.localName;
         const value = component[prop];
-        if (!EMPTY_VALUES.some(v => v === value)) {
-            check(...args);
+        const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is not defined.`;
+        if (isValueEmpty(value)) {
+            throw new Error(message);
+        }
+        else {
+            check(component, prop, ...extraArgs);
         }
     };
 }
 
-function checkPattern(component, prop, pattern, customMessage) {
+function checkOneOf(component, prop, possibleValues) {
     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;
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    if (!possibleValues.includes(value)) {
+        console.error(message);
+    }
+}
+
+function checkPattern(component, prop, pattern) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must follow the format \`${pattern}\`.`;
     if (typeof value !== 'string' || !pattern.test(value)) {
-        throw new Error(message);
+        console.error(message);
+    }
+}
+
+function checkType(component, prop, type) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const typeIsArray = type === 'array';
+    const valueIsArray = Array.isArray(value);
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`${type}\`.`;
+    if (typeIsArray || valueIsArray) {
+        if (valueIsArray !== typeIsArray) {
+            console.error(message);
+        }
+    }
+    else if (typeof value !== type) {
+        console.error(message);
     }
 }
 
-function checkUrl(component, prop, customMessage) {
+function checkUrl(component, prop) {
     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;
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
     if (typeof value !== 'string' && !(value instanceof URL)) {
-        throw new Error(message);
+        console.error(message);
+        return;
     }
     try {
         new URL(value, 'https://www.post.ch');
     }
     catch {
-        throw new Error(message);
+        console.error(message);
     }
 }
 
+function emptyOr(check) {
+    return (component, prop, ...extraArgs) => {
+        const value = component[prop];
+        if (!isValueEmpty(value)) {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
 const checkEmptyOrOneOf = emptyOr(checkOneOf);
 const checkEmptyOrPattern = emptyOr(checkPattern);
 const checkEmptyOrType = emptyOr(checkType);
 const checkEmptyOrUrl = emptyOr(checkUrl);
+const checkRequiredAndOneOf = requiredAnd(checkOneOf);
+const checkRequiredAndType = requiredAnd(checkType);
+const checkRequiredAndUrl = requiredAnd(checkUrl);
 
-export { checkEmptyOrOneOf as a, checkUrl as b, checkEmptyOrPattern as c, checkEmptyOrType as d, checkEmptyOrUrl as e };
+export { checkEmptyOrType as a, checkEmptyOrPattern as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkRequiredAndUrl as e, checkRequiredAndOneOf as f, checkEmptyOrUrl as g };

package/loaders/package.js

@@ -1,3 +1,3 @@
-const version = "10.0.0-next.38";
+const version = "10.0.0-next.40";
 
 export { version as v };

package/loaders/post-accordion-item2.js

@@ -1,7 +1,7 @@
 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 { d as checkEmptyOrOneOf } from './index2.js';
 import './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
 import { n as nanoid } from './index.browser.js';
@@ -9,7 +9,7 @@ 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 = ".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 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 {
@@ -23,7 +23,7 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         this.headingLevel = undefined;
     }
     validateHeadingLevel() {
-        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
+        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS);
     }
     componentWillLoad() {
         this.id = this.host.id || `p${nanoid(6)}`;
@@ -33,7 +33,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-collapsible', delegatorSelector: 'post-accordion-item' }, () => {
+        eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion-item' }, () => {
             this.collapsed = !event.detail;
         });
     }
@@ -52,10 +52,10 @@ 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: '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: {
+        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: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, 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' }))))));
+            } }, 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' }))))));
     }
     get host() { return this; }
     static get watchers() { return {