@swisspost/design-system-components 2.0.0 → 2.0.2

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

@@ -1,16 +1,102 @@
 import { h, Host } from "@stencil/core";
-import isFocusable from "ally.js/esm/is/focusable";
-// Patch for long press on touch devices
-import "long-press-event";
 import { version } from "../../../package.json";
+import isFocusable from "ally.js/is/focusable";
+import "long-press-event";
+/**
+ * @slot default - Slot for the content of the tooltip.
+ */
+/**
+ * Track how many instances remain on the page. Used for removing global event listeners
+ */
+let tooltipInstances = 0;
+let hideTooltipTimeout = null;
+/**
+ * Global event listener to show tooltips. This is globalized so that triggers that are rendered
+ * async will still work without the need to set listeners on the element itself
+ * @param e Event
+ * @returns
+ */
+const globalInterestHandler = (e) => {
+    const target = e.target;
+    if (!(e === null || e === void 0 ? void 0 : e.target) || !('getAttribute' in e.target))
+        return;
+    const tooltipTarget = target.getAttribute('data-tooltip-target');
+    if (!tooltipTarget || tooltipTarget === '')
+        return;
+    const tooltip = document.getElementById(tooltipTarget);
+    tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(target);
+    if (hideTooltipTimeout) {
+        window.clearTimeout(hideTooltipTimeout);
+        hideTooltipTimeout = null;
+    }
+};
+/**
+ * Global event listener to hide tooltips. This is globalized so that triggers that are rendered
+ * async will still work without the need to set listeners on the element itself
+ * @param e Event
+ * @returns
+ */
+const globalInterestLostHandler = (e) => {
+    const target = e.target;
+    const tooltipTarget = target.getAttribute('data-tooltip-target');
+    if (!tooltipTarget || tooltipTarget === '')
+        return;
+    const tooltip = document.getElementById(tooltipTarget);
+    globalHideTooltip(tooltip);
+};
+/**
+ * Start the hiding process through a timeout to give other interest events a chance to
+ * intervene and cancel the hide event.
+ * @param {HTMLPostTooltipElement} tooltip
+ */
+const globalHideTooltip = (tooltip) => {
+    hideTooltipTimeout = window.setTimeout(() => {
+        tooltip.hide();
+        hideTooltipTimeout = null;
+    }, 42);
+};
+/**
+ * Patch some accessibility features that are hard to remember or understand
+ * @param {HTMLElement} trigger
+ */
+const patchAccessibilityFeatures = (trigger) => {
+    const describedBy = trigger.getAttribute('aria-describedby');
+    const id = trigger.getAttribute('data-tooltip-target');
+    // Add tooltip to aria-describedby
+    if (!(describedBy === null || describedBy === void 0 ? void 0 : describedBy.includes(id))) {
+        const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
+        trigger.setAttribute('aria-describedby', newDescribedBy);
+    }
+    // Make element focusable
+    if (!isFocusable(trigger)) {
+        trigger.setAttribute('tabindex', '0');
+    }
+};
+/**
+ * Handle attribute changes and childList changes from the observer
+ * @param {MutationRecord[]} mutationList
+ */
+const triggerObserverHandler = mutationList => {
+    mutationList.forEach(mutation => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-tooltip-target') {
+            patchAccessibilityFeatures(mutation.target);
+        }
+        if (mutation.type === 'childList') {
+            mutation.addedNodes.forEach(node => {
+                if (node.nodeType === Node.ELEMENT_NODE &&
+                    node.hasAttribute('data-tooltip-target')) {
+                    patchAccessibilityFeatures(node);
+                }
+            });
+        }
+    });
+};
+// Initialize a mutation observer for patching accessibility features
+const triggerObserver = new MutationObserver(triggerObserverHandler);
 export class PostTooltip {
     constructor() {
         this.placement = 'top';
         this.arrow = true;
-        // Create local versions of event handlers for de-registration
-        // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class
-        this.localShowTooltip = e => this.show(e.target);
-        this.localHideTooltip = this.hide.bind(this);
     }
     connectedCallback() {
         if (!this.host.id) {
@@ -18,29 +104,45 @@ export class PostTooltip {
             /*prettier-ignore*/
             'No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.');
         }
-        if (!this.triggers) {
-            throw new Error(`No trigger found for <post-tooltip id="${this.host.id}">, please add the 'data-tooltip-target="${this.host.id}" attribute to the trigger element.`);
+    }
+    /**
+     * Add interest event listeners, but only once, and start
+     * the accessibility patcher
+     */
+    componentWillLoad() {
+        if (tooltipInstances === 0) {
+            // This is the first tooltip on the page, add event listeners
+            document.addEventListener('pointerover', globalInterestHandler);
+            document.addEventListener('pointerout', globalInterestLostHandler);
+            document.addEventListener('focusin', globalInterestHandler);
+            document.addEventListener('focusout', globalInterestLostHandler);
+            document.addEventListener('long-press', globalInterestHandler);
+            // Initially run the accessibility patcher on all triggers
+            document.querySelectorAll('[data-tooltip-target]').forEach(patchAccessibilityFeatures);
+            // Start watching for future triggers
+            triggerObserver.observe(document.body, {
+                subtree: true,
+                childList: true,
+                attributeFilter: ['data-tooltip-target'],
+            });
         }
-        // Patch popovertargetaction="interest" until it's implemented
-        // https://github.com/openui/open-ui/issues/767#issuecomment-1654177227
-        this.triggers.forEach(trigger => this.patchPopoverTargetActionInterest(trigger));
+        tooltipInstances++;
     }
     /**
      * Remove a bunch of event listeners if the tooltip gets removed from the DOM
+     * and disconnect the accessibility patcher
      */
     disconnectedCallback() {
-        this.triggers.forEach(trigger => {
-            trigger.removeEventListener('mouseenter', this.localShowTooltip);
-            trigger.removeEventListener('mouseleave', this.localHideTooltip);
-            trigger.removeEventListener('focus', this.localShowTooltip);
-            trigger.removeEventListener('blur', this.localHideTooltip);
-            trigger.removeEventListener('long-press', this.localShowTooltip);
-        });
-    }
-    componentWillLoad() {
-        // Append tooltip host to the end of the body to get around overflow: hidden restrictions
-        // for browsers that don't support popover yet
-        document.body.appendChild(this.host);
+        tooltipInstances--;
+        if (tooltipInstances <= 0) {
+            // The last tooltip has been removed, stop listening for these kind of events
+            document.removeEventListener('pointerover', globalInterestHandler);
+            document.removeEventListener('pointerout', globalInterestLostHandler);
+            document.removeEventListener('focusin', globalInterestHandler);
+            document.removeEventListener('focusout', globalInterestLostHandler);
+            document.removeEventListener('long-press', globalInterestHandler);
+            triggerObserver.disconnect();
+        }
     }
     /**
      * Programmatically display the tooltip
@@ -63,28 +165,24 @@ export class PostTooltip {
     async toggle(target, force) {
         this.popoverRef.toggle(target, force);
     }
-    get triggers() {
-        return document.querySelectorAll(`[data-tooltip-target="${this.host.id}"]`);
-    }
-    patchPopoverTargetActionInterest(trigger) {
-        trigger.addEventListener('mouseenter', this.localShowTooltip);
-        trigger.addEventListener('mouseleave', this.localHideTooltip);
-        trigger.addEventListener('focus', this.localShowTooltip);
-        trigger.addEventListener('blur', this.localHideTooltip);
-        trigger.addEventListener('long-press', this.localShowTooltip);
-        // Patch missing aria-describedby attribute on the trigger without overriding existing values
-        const describedBy = trigger.getAttribute('aria-describedby');
-        if (!(describedBy === null || describedBy === void 0 ? void 0 : describedBy.includes(this.host.id))) {
-            const newDescribedBy = describedBy ? `${describedBy} ${this.host.id}` : this.host.id;
-            trigger.setAttribute('aria-describedby', newDescribedBy);
-        }
-        // Patch missing focus ability on the trigger element
-        if (!isFocusable(trigger)) {
-            trigger.setAttribute('tabindex', '0');
+    /**
+     * Pointer or focus is on the tooltip, stop the tooltip from disappearing
+     */
+    handleInterest() {
+        if (hideTooltipTimeout) {
+            window.clearTimeout(hideTooltipTimeout);
+            hideTooltipTimeout = null;
         }
     }
+    /**
+     * Pointer or focus left the tooltip, initiate the hiding process
+     */
+    handleInterestLost() {
+        globalHideTooltip(this);
+    }
     render() {
-        return (h(Host, { "data-version": version }, h("post-popovercontainer", { role: "tooltip", tabindex: "-1", arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", null))));
+        const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
+        return (h(Host, { key: 'd773ddc0ce1a4dc682dfd05aea2191edb592a1a9', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '4465e819738b663ef9961e61b2b58a4a0a3a1039', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'c97e4c780acf110048b8415d2714273abbe5e479' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -110,7 +208,7 @@ export class PostTooltip {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.5.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.1/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
                         }
                     }
                 },
@@ -230,4 +328,3 @@ export class PostTooltip {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=post-tooltip.js.map

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

@@ -1,2 +1 @@
 export const BACKGROUND_COLOR = ['primary', 'yellow'];
-//# sourceMappingURL=types.js.map

package/dist/collection/index.js

@@ -1,5 +1,6 @@
 // Export every single component so it gets included in the dist output
 export { PostAccordion } from './components/post-accordion/post-accordion';
+export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
 export { PostAlert } from './components/post-alert/post-alert';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostIcon } from './components/post-icon/post-icon';
@@ -9,4 +10,3 @@ export { PostTabs } from './components/post-tabs/post-tabs';
 export { PostTabHeader } from './components/post-tab-header/post-tab-header';
 export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
 export { PostTooltip } from './components/post-tooltip/post-tooltip';
-//# sourceMappingURL=index.js.map

package/dist/collection/index.spec.js

@@ -0,0 +1,27 @@
+import * as fs from "fs";
+import * as path from "path";
+const file = fs.readFileSync('./src/index.ts').toString();
+const componentExports = Array.from(file.matchAll(/\/(post-[a-z-]+)';$/gm)).map(m => m[1]);
+const componentDefinitions = getComponentDefinitions('./src/components');
+function getComponentDefinitions(dir, files = []) {
+    const fileList = fs.readdirSync(dir);
+    for (const file of fileList) {
+        const filePath = `${dir}/${file}`;
+        const parsed = path.parse(filePath);
+        if (fs.statSync(filePath).isDirectory()) {
+            getComponentDefinitions(filePath, files);
+        }
+        else if (parsed.ext === '.tsx') {
+            files.push(parsed.name);
+        }
+    }
+    return files;
+}
+describe('Index.js', () => {
+    componentDefinitions.forEach(def => {
+        const component = componentExports.find(exp => exp === def);
+        it(`should export component "${def}"`, () => {
+            expect(component).toBeDefined();
+        });
+    });
+});

package/dist/collection/utils/index.js

@@ -1,3 +1,2 @@
 export * from './property-checkers';
 export * from './is-motion-reduced';
-//# sourceMappingURL=index.js.map

package/dist/collection/utils/is-motion-reduced.js

@@ -1,4 +1,3 @@
 export function isMotionReduced() {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
-//# sourceMappingURL=is-motion-reduced.js.map

package/dist/collection/utils/property-checkers/check-non-empty.js

@@ -4,4 +4,3 @@ export function checkNonEmpty(value, error) {
         throw new Error(error);
     }
 }
-//# sourceMappingURL=check-non-empty.js.map

package/dist/collection/utils/property-checkers/check-one-of.js

@@ -2,4 +2,3 @@ export function checkOneOf(value, possibleValues, error) {
     if (!possibleValues.includes(value))
         throw new Error(error);
 }
-//# sourceMappingURL=check-one-of.js.map

package/dist/collection/utils/property-checkers/check-pattern.js

@@ -2,4 +2,3 @@ export function checkPattern(value, pattern, errorMessage) {
     if (typeof value !== 'string' || !pattern.test(value))
         throw new Error(errorMessage);
 }
-//# sourceMappingURL=check-pattern.js.map

package/dist/collection/utils/property-checkers/check-type.js

@@ -10,4 +10,3 @@ export function checkType(value, type, error) {
             throw new Error(error);
     }
 }
-//# sourceMappingURL=check-type.js.map

package/dist/collection/utils/property-checkers/constants.js

@@ -1,2 +1 @@
 export const EMPTY_VALUES = [undefined, null, ''];
-//# sourceMappingURL=constants.js.map

package/dist/collection/utils/property-checkers/empty-or.js

@@ -6,4 +6,3 @@ export function emptyOr(check) {
             check(...args);
     };
 }
-//# sourceMappingURL=empty-or.js.map

package/dist/collection/utils/property-checkers/index.js

@@ -9,4 +9,3 @@ export * from './check-non-empty';
 export * from './check-one-of';
 export * from './check-pattern';
 export * from './check-type';
-//# sourceMappingURL=index.js.map

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

@@ -7,5 +7,3 @@ function checkNonEmpty(value, error) {
 }
 
 export { checkNonEmpty as c };
-
-//# sourceMappingURL=check-non-empty.js.map

package/dist/components/constants.js

@@ -1,5 +1,3 @@
 const EMPTY_VALUES = [undefined, null, ''];
 
 export { EMPTY_VALUES as E };
-
-//# sourceMappingURL=constants.js.map

package/dist/components/fade.js

@@ -5,5 +5,3 @@ const fadeIn = (el) => el.animate([fadedOutKeyframe, fadedInKeyframe], { duratio
 const fadeOut = (el) => el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
 
 export { fadeIn as a, fadeOut as f };
-
-//# sourceMappingURL=fade.js.map

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { P as PostAccordion } from './post-accordion2.js';
+export { P as PostAccordionItem } from './post-accordion-item2.js';
 export { P as PostAlert } from './post-alert2.js';
 export { P as PostCollapsible } from './post-collapsible2.js';
 export { P as PostIcon } from './post-icon2.js';
@@ -9,5 +10,3 @@ export { P as PostTabs } from './post-tabs2.js';
 export { P as PostTabHeader } from './post-tab-header2.js';
 export { P as PostTabPanel } from './post-tab-panel2.js';
 export { P as PostTooltip } from './post-tooltip2.js';
-
-//# sourceMappingURL=index.js.map

package/dist/components/index2.js

@@ -35,6 +35,4 @@ const checkEmptyOrOneOf = emptyOr(checkOneOf);
 const checkEmptyOrPattern = emptyOr(checkPattern);
 const checkEmptyOrType = emptyOr(checkType);
 
-export { checkEmptyOrPattern as a, checkEmptyOrOneOf as b, checkType as c, checkEmptyOrType as d };
-
-//# sourceMappingURL=index2.js.map
+export { checkType as a, checkEmptyOrPattern as b, checkEmptyOrOneOf as c, checkEmptyOrType as d };

package/dist/components/package.js

@@ -1,5 +1,3 @@
-const version = "2.0.0";
+const version = "2.0.2";
 
 export { version as v };
-
-//# sourceMappingURL=package.js.map

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

@@ -1,82 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkEmptyOrOneOf } from './index2.js';
-import { d as defineCustomElement$2 } from './post-collapsible2.js';
-
-const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
-
-const postAccordionItemCss = "post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-danger post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.bg-success-green post-accordion-item::part(accordion-item),.bg-error-red post-accordion-item::part(accordion-item),.bg-warning-orange post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-primary .accordion-item,.bg-white .accordion-item,.bg-black .accordion-item,.bg-info .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-danger .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item,.bg-success-green .accordion-item,.bg-error-red .accordion-item,.bg-warning-orange .accordion-item,.bg-success-background .accordion-item,.bg-error-background .accordion-item,.bg-warning-background .accordion-item{--post-bg-opacity:1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-danger post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.bg-success-green post-accordion-item::part(accordion-item),.bg-error-red post-accordion-item::part(accordion-item),.bg-warning-orange post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-primary .accordion-item,.bg-white .accordion-item,.bg-black .accordion-item,.bg-info .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-danger .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item,.bg-success-green .accordion-item,.bg-error-red .accordion-item,.bg-warning-orange .accordion-item,.bg-success-background .accordion-item,.bg-error-background .accordion-item,.bg-warning-background .accordion-item{--post-contrast-color:#000;--post-contrast-color-inverted:#fff;--post-gray-10:hsl(0, 0%, 90%);--post-gray-20:hsl(0, 0%, 80%);--post-gray-40:hsl(0, 0%, 60%);--post-gray-60:hsl(0, 0%, 40%);--post-gray-80:hsl(0, 0%, 20%);--post-yellow:#fc0;--post-light:#faf9f8;--post-gray:#f4f3f1;--post-dark:hsl(0, 0%, 20%);--post-primary:hsl(0, 0%, 20%);--post-white:#fff;--post-black:#000;--post-info:#cce4ee;--post-success:#2c911c;--post-warning:#f49e00;--post-danger:#a51728;--post-nightblue:#004976;--post-nightblue-bright:#0076a8;--post-petrol:#006d68;--post-petrol-bright:#00968f;--post-coral:#9e2a2f;--post-coral-bright:#e03c31;--post-olive:#716135;--post-olive-bright:#aa9d2e;--post-purple:#80276c;--post-purple-bright:#c5299b;--post-aubergine:#523178;--post-aubergine-bright:#7566a0;--post-success-green:#2c871d;--post-error-red:#a51728;--post-warning-orange:#f49e00;--post-success-background:#c0debb;--post-error-background:#ffdade;--post-warning-background:#fce2b2;--post-contrast-color-rgb:0, 0, 0;--post-contrast-color-inverted-rgb:255, 255, 255;--post-gray-10-rgb:230, 230, 230;--post-gray-20-rgb:204, 204, 204;--post-gray-40-rgb:153, 153, 153;--post-gray-60-rgb:102, 102, 102;--post-gray-80-rgb:51, 51, 51;--post-yellow-rgb:255, 204, 0;--post-light-rgb:250, 249, 248;--post-gray-rgb:244, 243, 241;--post-dark-rgb:51, 51, 51;--post-primary-rgb:51, 51, 51;--post-white-rgb:255, 255, 255;--post-black-rgb:0, 0, 0;--post-info-rgb:204, 228, 238;--post-success-rgb:44, 145, 28;--post-warning-rgb:244, 158, 0;--post-danger-rgb:165, 23, 40;--post-nightblue-rgb:0, 73, 118;--post-nightblue-bright-rgb:0, 118, 168;--post-petrol-rgb:0, 109, 104;--post-petrol-bright-rgb:0, 150, 143;--post-coral-rgb:158, 42, 47;--post-coral-bright-rgb:224, 60, 49;--post-olive-rgb:113, 97, 53;--post-olive-bright-rgb:170, 157, 46;--post-purple-rgb:128, 39, 108;--post-purple-bright-rgb:197, 41, 155;--post-aubergine-rgb:82, 49, 120;--post-aubergine-bright-rgb:117, 102, 160;--post-success-green-rgb:44, 135, 29;--post-error-red-rgb:165, 23, 40;--post-warning-orange-rgb:244, 158, 0;--post-success-background-rgb:192, 222, 187;--post-error-background-rgb:255, 218, 222;--post-warning-background-rgb:252, 226, 178}.accordion-item{--post-bg-rgb:244, 243, 241;border-block:2px solid #666}.bg-yellow .accordion-item{--post-bg-rgb:255, 255, 255}.bg-light .accordion-item{--post-bg-rgb:255, 255, 255}.bg-gray .accordion-item{--post-bg-rgb:255, 255, 255}.bg-dark .accordion-item{--post-bg-rgb:255, 255, 255}.bg-primary .accordion-item{--post-bg-rgb:255, 255, 255}.bg-white .accordion-item{--post-bg-rgb:244, 243, 241}.bg-black .accordion-item{--post-bg-rgb:255, 255, 255}.bg-info .accordion-item{--post-bg-rgb:255, 255, 255}.bg-success .accordion-item{--post-bg-rgb:255, 255, 255}.bg-warning .accordion-item{--post-bg-rgb:255, 255, 255}.bg-danger .accordion-item{--post-bg-rgb:255, 255, 255}.bg-nightblue .accordion-item{--post-bg-rgb:255, 255, 255}.bg-nightblue-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-petrol .accordion-item{--post-bg-rgb:255, 255, 255}.bg-petrol-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-coral .accordion-item{--post-bg-rgb:255, 255, 255}.bg-coral-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-olive .accordion-item{--post-bg-rgb:255, 255, 255}.bg-olive-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-purple .accordion-item{--post-bg-rgb:255, 255, 255}.bg-purple-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-aubergine .accordion-item{--post-bg-rgb:255, 255, 255}.bg-aubergine-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-success-green .accordion-item{--post-bg-rgb:255, 255, 255}.bg-error-red .accordion-item{--post-bg-rgb:255, 255, 255}.bg-warning-orange .accordion-item{--post-bg-rgb:255, 255, 255}.bg-success-background .accordion-item{--post-bg-rgb:255, 255, 255}.bg-error-background .accordion-item{--post-bg-rgb:255, 255, 255}.bg-warning-background .accordion-item{--post-bg-rgb:255, 255, 255}.accordion-item+.accordion-item{border-block-start:0}.accordion-header{color:#333;font-size:1rem;font-weight:700;line-height:1.5;margin:0}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button;outline:none;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:3rem;text-align:start;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.accordion-button:focus-visible{outline:2px solid #1976c8}.accordion-button:hover{color:#000;background-color:#e6e6e6}.accordion-button:disabled{opacity:.4;pointer-events:none}.accordion-button::after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor;content:\"\";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.5rem 1rem 1rem;font-weight:300}.accordion-button>*,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>*,.accordion-body>:last-child{margin-block-end:0 !important}:host{display:block}.accordion-button{cursor:pointer}.accordion-button>::slotted(.text-truncate){display:block}post-accordion-item::part(accordion-item){--post-bg-rgb:244, 243, 241}.bg-yellow post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-light post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-gray post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-dark post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-primary post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-white post-accordion-item::part(accordion-item){--post-bg-rgb:244, 243, 241}.bg-black post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-info post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-success post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-warning post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-danger post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-nightblue post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-nightblue-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-petrol post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-petrol-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-coral post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-coral-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-olive post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-olive-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-purple post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-purple-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-aubergine post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-aubergine-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-success-green post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-error-red post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-warning-orange post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-success-background post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-error-background post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-warning-background post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}post-accordion-item+post-accordion-item::part(accordion-item){border-block-start:0 !important}";
-
-const PostAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.id = undefined;
-        this.isOpen = undefined;
-        this.collapsed = false;
-        this.headingLevel = 2;
-    }
-    validateHeadingLevel(newValue = this.headingLevel) {
-        checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-accordion-item` must be a number between 1 and 6.');
-    }
-    connectedCallback() {
-        this.validateHeadingLevel();
-    }
-    componentWillLoad() {
-        this.isOpen = !this.collapsed;
-        this.id = this.host.id || `a${crypto.randomUUID()}`;
-    }
-    onCollapseChange(event) {
-        this.isOpen = event.detail;
-    }
-    /**
-     * Triggers the collapse programmatically.
-     */
-    async toggle(force) {
-        return this.collapsible.toggle(force);
-    }
-    render() {
-        var _a;
-        const HeadingTag = `h${(_a = this.headingLevel) !== null && _a !== void 0 ? _a : 2}`;
-        return (h(Host, { id: this.id, "data-version": version }, h("div", { part: "accordion-item", class: "accordion-item" }, h(HeadingTag, { class: "accordion-header", id: `${this.id}--header` }, h("button", { "aria-controls": `${this.id}--collapse`, "aria-expanded": `${this.isOpen}`, class: `accordion-button${this.isOpen ? '' : ' collapsed'}`, onClick: () => this.toggle(), type: "button" }, h("slot", { name: "header" }))), h("post-collapsible", { collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { class: "accordion-body" }, h("slot", null))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "headingLevel": ["validateHeadingLevel"]
-    }; }
-    static get style() { return postAccordionItemCss; }
-}, [1, "post-accordion-item", {
-        "collapsed": [4],
-        "headingLevel": [2, "heading-level"],
-        "id": [32],
-        "isOpen": [32],
-        "toggle": [64]
-    }, [[0, "collapseChange", "onCollapseChange"]], {
-        "headingLevel": ["validateHeadingLevel"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-accordion-item", "post-collapsible"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-accordion-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostAccordionItem$1);
-            }
-            break;
-        case "post-collapsible":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './post-accordion-item2.js';
 
 const PostAccordionItem = PostAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { PostAccordionItem, defineCustomElement };
-
-//# sourceMappingURL=post-accordion-item.js.map

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

@@ -0,0 +1,78 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkEmptyOrOneOf } from './index2.js';
+import { d as defineCustomElement$1 } from './post-collapsible2.js';
+
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+
+const postAccordionItemCss = "post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-danger post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.bg-success-green post-accordion-item::part(accordion-item),.bg-error-red post-accordion-item::part(accordion-item),.bg-warning-orange post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-primary .accordion-item,.bg-white .accordion-item,.bg-black .accordion-item,.bg-info .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-danger .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item,.bg-success-green .accordion-item,.bg-error-red .accordion-item,.bg-warning-orange .accordion-item,.bg-success-background .accordion-item,.bg-error-background .accordion-item,.bg-warning-background .accordion-item{--post-bg-opacity:1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-danger post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.bg-success-green post-accordion-item::part(accordion-item),.bg-error-red post-accordion-item::part(accordion-item),.bg-warning-orange post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-primary .accordion-item,.bg-white .accordion-item,.bg-black .accordion-item,.bg-info .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-danger .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item,.bg-success-green .accordion-item,.bg-error-red .accordion-item,.bg-warning-orange .accordion-item,.bg-success-background .accordion-item,.bg-error-background .accordion-item,.bg-warning-background .accordion-item{--post-contrast-color:#000;--post-contrast-color-inverted:#fff;--post-gray-10:hsl(0, 0%, 90%);--post-gray-20:hsl(0, 0%, 80%);--post-gray-40:hsl(0, 0%, 60%);--post-gray-60:hsl(0, 0%, 40%);--post-gray-80:hsl(0, 0%, 20%);--post-yellow:#fc0;--post-light:#faf9f8;--post-gray:#f4f3f1;--post-dark:hsl(0, 0%, 20%);--post-primary:hsl(0, 0%, 20%);--post-white:#fff;--post-black:#000;--post-info:#cce4ee;--post-success:#2c911c;--post-warning:#f49e00;--post-danger:#a51728;--post-nightblue:#004976;--post-nightblue-bright:#0076a8;--post-petrol:#006d68;--post-petrol-bright:#00968f;--post-coral:#9e2a2f;--post-coral-bright:#e03c31;--post-olive:#716135;--post-olive-bright:#aa9d2e;--post-purple:#80276c;--post-purple-bright:#c5299b;--post-aubergine:#523178;--post-aubergine-bright:#7566a0;--post-success-green:#2c871d;--post-error-red:#a51728;--post-warning-orange:#f49e00;--post-success-background:#c0debb;--post-error-background:#ffdade;--post-warning-background:#fce2b2;--post-contrast-color-rgb:0, 0, 0;--post-contrast-color-inverted-rgb:255, 255, 255;--post-gray-10-rgb:230, 230, 230;--post-gray-20-rgb:204, 204, 204;--post-gray-40-rgb:153, 153, 153;--post-gray-60-rgb:102, 102, 102;--post-gray-80-rgb:51, 51, 51;--post-yellow-rgb:255, 204, 0;--post-light-rgb:250, 249, 248;--post-gray-rgb:244, 243, 241;--post-dark-rgb:51, 51, 51;--post-primary-rgb:51, 51, 51;--post-white-rgb:255, 255, 255;--post-black-rgb:0, 0, 0;--post-info-rgb:204, 228, 238;--post-success-rgb:44, 145, 28;--post-warning-rgb:244, 158, 0;--post-danger-rgb:165, 23, 40;--post-nightblue-rgb:0, 73, 118;--post-nightblue-bright-rgb:0, 118, 168;--post-petrol-rgb:0, 109, 104;--post-petrol-bright-rgb:0, 150, 143;--post-coral-rgb:158, 42, 47;--post-coral-bright-rgb:224, 60, 49;--post-olive-rgb:113, 97, 53;--post-olive-bright-rgb:170, 157, 46;--post-purple-rgb:128, 39, 108;--post-purple-bright-rgb:197, 41, 155;--post-aubergine-rgb:82, 49, 120;--post-aubergine-bright-rgb:117, 102, 160;--post-success-green-rgb:44, 135, 29;--post-error-red-rgb:165, 23, 40;--post-warning-orange-rgb:244, 158, 0;--post-success-background-rgb:192, 222, 187;--post-error-background-rgb:255, 218, 222;--post-warning-background-rgb:252, 226, 178}.accordion-item{--post-bg-rgb:244, 243, 241;border-block:2px solid #666}.bg-yellow .accordion-item{--post-bg-rgb:255, 255, 255}.bg-light .accordion-item{--post-bg-rgb:255, 255, 255}.bg-gray .accordion-item{--post-bg-rgb:255, 255, 255}.bg-dark .accordion-item{--post-bg-rgb:255, 255, 255}.bg-primary .accordion-item{--post-bg-rgb:255, 255, 255}.bg-white .accordion-item{--post-bg-rgb:244, 243, 241}.bg-black .accordion-item{--post-bg-rgb:255, 255, 255}.bg-info .accordion-item{--post-bg-rgb:255, 255, 255}.bg-success .accordion-item{--post-bg-rgb:255, 255, 255}.bg-warning .accordion-item{--post-bg-rgb:255, 255, 255}.bg-danger .accordion-item{--post-bg-rgb:255, 255, 255}.bg-nightblue .accordion-item{--post-bg-rgb:255, 255, 255}.bg-nightblue-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-petrol .accordion-item{--post-bg-rgb:255, 255, 255}.bg-petrol-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-coral .accordion-item{--post-bg-rgb:255, 255, 255}.bg-coral-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-olive .accordion-item{--post-bg-rgb:255, 255, 255}.bg-olive-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-purple .accordion-item{--post-bg-rgb:255, 255, 255}.bg-purple-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-aubergine .accordion-item{--post-bg-rgb:255, 255, 255}.bg-aubergine-bright .accordion-item{--post-bg-rgb:255, 255, 255}.bg-success-green .accordion-item{--post-bg-rgb:255, 255, 255}.bg-error-red .accordion-item{--post-bg-rgb:255, 255, 255}.bg-warning-orange .accordion-item{--post-bg-rgb:255, 255, 255}.bg-success-background .accordion-item{--post-bg-rgb:255, 255, 255}.bg-error-background .accordion-item{--post-bg-rgb:255, 255, 255}.bg-warning-background .accordion-item{--post-bg-rgb:255, 255, 255}.accordion-item+.accordion-item{border-block-start:0}.accordion-header{color:#333;font-size:1rem;font-weight:700;line-height:1.5;margin:0}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button;outline:none;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:3rem;text-align:start;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.accordion-button:focus-visible{outline:2px solid #1976c8}.accordion-button:hover{color:#000;background-color:#e6e6e6}.accordion-button:disabled{opacity:.4;pointer-events:none}.accordion-button::after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.5rem 1rem 1rem;font-weight:300}.accordion-button>*,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>*,.accordion-body>:last-child{margin-block-end:0 !important}:host{display:block}.accordion-button{cursor:pointer}.accordion-button>::slotted(.text-truncate){display:block}post-accordion-item::part(accordion-item){--post-bg-rgb:244, 243, 241}.bg-yellow post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-light post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-gray post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-dark post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-primary post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-white post-accordion-item::part(accordion-item){--post-bg-rgb:244, 243, 241}.bg-black post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-info post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-success post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-warning post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-danger post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-nightblue post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-nightblue-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-petrol post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-petrol-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-coral post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-coral-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-olive post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-olive-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-purple post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-purple-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-aubergine post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-aubergine-bright post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-success-green post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-error-red post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-warning-orange post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-success-background post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-error-background post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-warning-background post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}:host(:not(:first-of-type)) .accordion-item{border-block-start:0}";
+const PostAccordionItemStyle0 = postAccordionItemCss;
+
+const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.id = undefined;
+        this.isOpen = undefined;
+        this.collapsed = false;
+        this.headingLevel = 2;
+    }
+    validateHeadingLevel(newValue = this.headingLevel) {
+        checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-accordion-item` must be a number between 1 and 6.');
+    }
+    connectedCallback() {
+        this.validateHeadingLevel();
+    }
+    componentWillLoad() {
+        this.isOpen = !this.collapsed;
+        this.id = this.host.id || `a${crypto.randomUUID()}`;
+    }
+    onCollapseChange(event) {
+        this.isOpen = event.detail;
+    }
+    /**
+     * Triggers the collapse programmatically.
+     */
+    async toggle(force) {
+        return this.collapsible.toggle(force);
+    }
+    render() {
+        var _a;
+        const HeadingTag = `h${(_a = this.headingLevel) !== null && _a !== void 0 ? _a : 2}`;
+        return (h(Host, { key: '795ccef5a57e07755df60f651712dff5eb3fcfaf', id: this.id, "data-version": version }, h("div", { key: '529feda41150180001d5535d0d79007e312b0d39', part: "accordion-item", class: "accordion-item" }, h(HeadingTag, { key: '4ddcc8f6ab703625ab072541b65ed0dcb7392129', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '09dcd22dc3382fe442018649b392ba95ed3918f9', "aria-controls": `${this.id}--collapse`, "aria-expanded": `${this.isOpen}`, class: `accordion-button${this.isOpen ? '' : ' collapsed'}`, onClick: () => this.toggle(), type: "button" }, h("slot", { key: '8e4026adc26445aa84cce3587bf4cc82b816641a', name: "header" }))), h("post-collapsible", { key: '83aeca309682e6f0d9dc2f6fa0701a01229a8f2b', collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'c881ddf1fe72345d1e6fedaff9376cf43ad566b4', class: "accordion-body" }, h("slot", { key: '8d72ce66dd9b3b2059ea789ec5854d53b4895907' }))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "headingLevel": ["validateHeadingLevel"]
+    }; }
+    static get style() { return PostAccordionItemStyle0; }
+}, [1, "post-accordion-item", {
+        "collapsed": [4],
+        "headingLevel": [2, "heading-level"],
+        "id": [32],
+        "isOpen": [32],
+        "toggle": [64]
+    }, [[0, "collapseChange", "onCollapseChange"]], {
+        "headingLevel": ["validateHeadingLevel"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-accordion-item", "post-collapsible"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostAccordionItem);
+            }
+            break;
+        case "post-collapsible":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostAccordionItem as P, defineCustomElement as d };

package/dist/components/post-accordion.js

@@ -4,5 +4,3 @@ const PostAccordion = PostAccordion$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { PostAccordion, defineCustomElement };
-
-//# sourceMappingURL=post-accordion.js.map

package/dist/components/post-accordion2.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 
 const postAccordionCss = ":host{display:block}";
+const PostAccordionStyle0 = postAccordionCss;
 
 const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {
     constructor() {
@@ -77,10 +78,10 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { "data-version": version }, h("div", { class: "accordion" }, h("slot", { onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '08d0661a81fef59f3b74cbceceff49920cbfda0c', "data-version": version }, h("div", { key: '2625963e5f2952fd5bd5b4f05a14142a501b272c', class: "accordion" }, h("slot", { key: 'f2514ed051562c17fe852bd2bf39c10282915bfb', onSlotchange: () => this.registerAccordionItems() }))));
     }
     get host() { return this; }
-    static get style() { return postAccordionCss; }
+    static get style() { return PostAccordionStyle0; }
 }, [1, "post-accordion", {
         "multiple": [4],
         "toggle": [64],
@@ -102,5 +103,3 @@ function defineCustomElement() {
 }
 
 export { PostAccordion as P, defineCustomElement as d };
-
-//# sourceMappingURL=post-accordion2.js.map