@swisspost/design-system-components 10.0.0-next.71 → 10.0.0-next.75

package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css

@@ -1 +1 @@
-:host{position:relative}nav{max-width:100%}nav.invisible{visibility:hidden;overflow:hidden;position:absolute;inset:0}[role=list]{display:flex;align-items:start;gap:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item :is(button,a){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;display:flex;align-self:start;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item :is(button,a):hover{text-decoration:none}.breadcrumb-item :is(button,a):disabled{border-style:var(--post-core-border-style-dash)}.breadcrumb-item :is(button,a){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}.breadcrumb-item :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item :is(button,a):is(a){color:LinkText;border:unset}.breadcrumb-item :is(button,a):is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.breadcrumb-item :is(button,a):not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.breadcrumb-item :is(button,a):not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.breadcrumb-item :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;content:"";display:flex;height:16px;width:16px;margin-block:var(--post-device-spacing-padding-35);margin-inline:var(--post-core-dimension-4);flex-shrink:0}:root,:host{--post-icon-chevronright: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}.home::before{content:unset}.home post-icon{font-size:var(--post-core-dimension-24)}@media screen and (min-width: 0)and (max-width: 599.98px){.home post-icon{font-size:20px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
+:host{display:block;position:relative}nav{max-width:100%}nav.invisible{--post-breadcrumb-item-wrap: nowrap;visibility:hidden;overflow:hidden;position:absolute;inset:0;padding-inline:1px}[role=list]{display:flex;align-items:flex-start;gap:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item :is(button,a){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item :is(button,a):not(:disabled):hover{text-decoration:none}.breadcrumb-item :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.breadcrumb-item :is(button,a){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}.breadcrumb-item :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item :is(button,a):is(a){color:LinkText;border:unset}.breadcrumb-item :is(button,a):is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.breadcrumb-item :is(button,a):not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.breadcrumb-item :is(button,a):not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.breadcrumb-item :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;flex:0 0 auto;content:"";display:block;height:16px;width:16px;margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}.home{padding-block:calc((16px + 2 * var(--post-device-spacing-padding-35) - var(--post-core-dimension-24))/2)}.home::before{content:unset}.home post-icon{font-size:var(--post-core-dimension-24)}@media screen and (min-width: 0)and (max-width: 599.98px){.home post-icon{font-size:20px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

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

@@ -1,31 +1,25 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { componentOnReady, nanoid, Required, Type, Url } from "../../utils/index";
+import { version } from "../../../../package";
 import { h, Host } from "@stencil/core";
 import { throttle } from "throttle-debounce";
-import { version } from "../../../../package";
-import { checkRequiredAndUrl, checkRequiredAndType, componentOnReady, nanoid } from "../../utils/index";
 export class PostBreadcrumbs {
     constructor() {
         this.shouldRenderMenu = false;
     }
-    validateHomeUrl() {
-        checkRequiredAndUrl(this, 'homeUrl');
-    }
-    validateTextHome() {
-        checkRequiredAndType(this, 'textHome', 'string');
-    }
-    validateTextBreadcrumbs() {
-        checkRequiredAndType(this, 'textBreadcrumbs', 'string');
-    }
-    validateTextMoreItems() {
-        checkRequiredAndType(this, 'textMoreItems', 'string');
-    }
     componentWillLoad() {
         this.id = this.host.id || `b${nanoid(6)}`;
     }
     componentDidLoad() {
-        this.validateHomeUrl();
-        this.validateTextHome();
-        this.validateTextBreadcrumbs();
-        this.validateTextMoreItems();
         this.createMutationObserver();
         this.createResizeObserver();
     }
@@ -71,9 +65,7 @@ export class PostBreadcrumbs {
         if (!originalSlot || !clonedSlot)
             return;
         originalSlot.assignedElements().forEach(element => {
-            const cloned = element.cloneNode(true);
-            cloned.dataset.measuring = 'true';
-            clonedSlot.before(cloned);
+            clonedSlot.insertAdjacentElement('beforebegin', element.cloneNode(true));
         });
         clonedSlot.remove();
     }
@@ -103,7 +95,7 @@ export class PostBreadcrumbs {
         return (h("div", { role: "listitem" }, h("div", { class: "breadcrumb-item" }, h("post-menu-trigger", { for: menuId }, h("button", null, h("span", { class: "visually-hidden" }, this.textMoreItems), h("span", { "aria-hidden": "true" }, "...")))), h("post-menu", { id: menuId, label: this.textMoreItems, placement: "bottom-start" }, h("slot", null))));
     }
     render() {
-        return (h(Host, { key: '85cb104032c0caed5ab2fb442be0a6d7eac5b67a', "data-version": version }, h("nav", { key: 'be4b2b8c6333ef3bf3440de0ce61958d1a07952b', "aria-label": this.textBreadcrumbs }, h("div", { key: '28531f638065e6db5cbf7e29d87086933fb47235', role: "list" }, h("div", { key: '4a71e5b143e271e26f032e8d4ed329aee949bf32', class: "breadcrumb-item home", role: "listitem" }, h("a", { key: '3e58ac2d4bbbc2e56a7acd28119b235edadc8fa0', href: this.homeUrl }, h("span", { key: '1a31a9963898005b218177d78adbb7813728b0ce', class: "visually-hidden" }, this.textHome), h("post-icon", { key: '668a636881fbea1a7129b9108cc234c257e0fffb', "aria-hidden": "true", name: "home" }))), this.shouldRenderMenu ? this.renderMenu() : h("slot", null), h("slot", { key: '0c8bad3de95f0ca51dfd8a15c4cb6e79e2499b1b', name: "selected" })))));
+        return (h(Host, { key: '8a3c4436b22c3f3d2454b61ff5ce4d4e11bed697', "data-version": version }, h("nav", { key: '5e13b27f36e2ffcade42416d2864177a7cd6ed29', "aria-label": this.textBreadcrumbs }, h("div", { key: '4b5aca825afe3be81913c0d67e748164b2d9123c', role: "list" }, h("div", { key: 'a3aa906e91046fe6779ea5cae8db5499800229e1', class: "breadcrumb-item home", role: "listitem" }, h("a", { key: 'a086c73567696a9da8fe5af8a9fbe4b80f4d4d91', href: this.homeUrl }, h("span", { key: '814f6c145c9f19db46fa3d4cddaac59d4518677f', class: "visually-hidden" }, this.textHome), h("post-icon", { key: '5096b9b77e0a4e6c21baec26b7c26614110c53f1', "aria-hidden": "true", name: "home" }))), this.shouldRenderMenu ? this.renderMenu() : h("slot", null), h("slot", { key: '561cef4586098f87688f5b9ad2a34b7a27bf0313', name: "selected" })))));
     }
     static get is() { return "post-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -204,19 +196,20 @@ export class PostBreadcrumbs {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "homeUrl",
-                "methodName": "validateHomeUrl"
-            }, {
-                "propName": "textHome",
-                "methodName": "validateTextHome"
-            }, {
-                "propName": "textBreadcrumbs",
-                "methodName": "validateTextBreadcrumbs"
-            }, {
-                "propName": "textMoreItems",
-                "methodName": "validateTextMoreItems"
-            }];
-    }
 }
+__decorate([
+    Required(),
+    Url()
+], PostBreadcrumbs.prototype, "homeUrl", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostBreadcrumbs.prototype, "textHome", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostBreadcrumbs.prototype, "textBreadcrumbs", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostBreadcrumbs.prototype, "textMoreItems", void 0);

package/dist/collection/components/post-closebutton/post-closebutton.css

@@ -1 +1 @@
-.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.btn:hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash)}.btn{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}.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(a){color:LinkText;border:unset}.btn:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.btn:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.btn:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg);color:var(--post-scheme-color-interactive-button-primary-disabled-fg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:var(--post-device-border-radius-focus);min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg.btn-link{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton[size=small] .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}post-closebutton:not([placement]),post-closebutton[placement=auto]{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}post-closebutton .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}
+.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.btn:not(:disabled):hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.btn{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}.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(a){color:LinkText;border:unset}.btn:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.btn:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.btn:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);color:var(--post-scheme-color-interactive-button-primary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:var(--post-device-border-radius-focus);min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg.btn-link{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}:host .btn:not(:disabled):hover,:host .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}:host(:not([placement])),:host([placement=auto]){position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}:host([size=small]) .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}

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

@@ -1,15 +1,25 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { OneOf, Required } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkEmptyOrOneOf, checkRequiredAndOneOf } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 import { BUTTON_TYPES, PLACEMENT, SIZE } from "./types";
 /**
  * @slot default - Slot for placing visually hidden label in the close button.
  */
 export class PostClosebutton {
     constructor() {
-        this.mutationObserver = new MutationObserver(this.checkContent.bind(this));
         /**
          * The "type" attribute used for the close button
+        
          */
         this.buttonType = 'button';
         /**
@@ -21,42 +31,40 @@ export class PostClosebutton {
          */
         this.size = 'default';
     }
-    validateButtonType() {
-        checkEmptyOrOneOf(this, 'buttonType', BUTTON_TYPES);
-    }
-    validatePlacement() {
-        checkRequiredAndOneOf(this, 'placement', PLACEMENT);
-    }
-    validateSize() {
-        checkRequiredAndOneOf(this, 'size', SIZE);
-    }
     componentDidLoad() {
+        if (globalThis.MutationObserver) {
+            this.mutationObserver = new MutationObserver(this.checkContent.bind(this));
+            this.mutationObserver.observe(this.host, {
+                childList: true,
+            });
+        }
         this.checkContent();
     }
-    connectedCallback() {
-        this.mutationObserver.observe(this.host, {
-            childList: true,
-            characterData: true,
-            subtree: true,
-        });
-    }
     disconnectedCallback() {
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
     }
     checkContent() {
-        this.validateButtonType();
-        this.validatePlacement();
-        this.validateSize();
-        if (!this.host.querySelector('.visually-hidden').textContent) {
+        const slot = this.visuallyHidden.querySelector('slot');
+        const hasContent = slot
+            ?.assignedNodes({ flatten: true })
+            .some(node => node.textContent?.trim());
+        if (!hasContent) {
             console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
         }
     }
+    handleClick() {
+        if (this.buttonType === 'reset')
+            this.internals.form?.reset();
+        this.host.closest('dialog')?.close();
+    }
     render() {
-        return (h(Host, { key: 'ae74db094a2b1de985564d3f7528f78a98fd7ce9', "data-version": version }, h("button", { key: '7bab137e2dab6b3b405f486c10b3bbfbecdebafa', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: 'ed323a3c13211f234551957a498f678e18ff4f66', "aria-hidden": "true", name: "closex" }), h("span", { key: 'aad44b5c93d357fab3d7cf537f477abd7c89f9be', class: "visually-hidden" }, h("slot", { key: 'd8424ae25100fc673188e3c77f89abe95847a38a' })))));
+        return (h(Host, { key: '55ec088421d5529b109a183b681a6e25e0fe9062', "data-version": version }, h("button", { key: '21e5bc2d1e305023530298c3750b4b8bb3f9705f', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm", onClick: () => this.handleClick() }, h("post-icon", { key: '456592d307bb7495712a645c234993ec1b5ec080', "aria-hidden": "true", name: "closex" }), h("span", { key: 'cea199698c413c94e12673df7b0769797f4d4f96', ref: el => (this.visuallyHidden = el), class: "visually-hidden" }, h("slot", { key: '7f9394eae2f4deb614f2aaac1dc697bec592d6db' })))));
     }
     static get is() { return "post-closebutton"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["post-closebutton.scss"]
@@ -74,7 +82,7 @@ export class PostClosebutton {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonType",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "resolved": "\"button\" | \"reset\"",
                     "references": {
                         "ButtonType": {
                             "location": "import",
@@ -153,16 +161,16 @@ export class PostClosebutton {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "buttonType",
-                "methodName": "validateButtonType"
-            }, {
-                "propName": "placement",
-                "methodName": "validatePlacement"
-            }, {
-                "propName": "size",
-                "methodName": "validateSize"
-            }];
-    }
+    static get attachInternalsMemberName() { return "internals"; }
 }
+__decorate([
+    OneOf(BUTTON_TYPES)
+], PostClosebutton.prototype, "buttonType", void 0);
+__decorate([
+    Required(),
+    OneOf(PLACEMENT)
+], PostClosebutton.prototype, "placement", void 0);
+__decorate([
+    Required(),
+    OneOf(SIZE)
+], PostClosebutton.prototype, "size", void 0);

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

@@ -1,3 +1,3 @@
-export const BUTTON_TYPES = ['button', 'submit', 'reset'];
+export const BUTTON_TYPES = ['button', 'reset'];
 export const PLACEMENT = ['manual', 'auto'];
 export const SIZE = ['default', 'small'];

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

@@ -1,7 +1,17 @@
-import { h, Host, Build, } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { collapse, collapsedKeyframe, expand } from "../../animations/collapse";
+import { Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { collapsedKeyframe, collapse, expand } from "../../animations/collapse";
-import { checkEmptyOrType } from "../../utils/index";
+import { Build, h, Host, } from "@stencil/core";
 /**
  * @slot default - Slot for placing content within the collapsible element.
  */
@@ -12,14 +22,10 @@ export class PostCollapsible {
          */
         this.collapsed = false;
     }
-    collapsedChange() {
-        checkEmptyOrType(this, 'collapsed', 'boolean');
-    }
     get isExpanded() {
         return !this.collapsed;
     }
     componentDidLoad() {
-        this.collapsedChange();
         this.updateTriggers();
     }
     /**
@@ -46,14 +52,21 @@ export class PostCollapsible {
         return isExpanded;
     }
     /**
-     * Update all post-collapsible-trigger elements referring to the collapsible
+     * Update all post-collapsible-trigger elements referring to or wrapping the collapsible
      */
     updateTriggers() {
-        const triggers = document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`);
+        const triggers = this.host.id
+            ? Array.from(document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`))
+            : [];
+        // also update an ancestor trigger when the collapsible is nested inside one
+        const nestedTrigger = this.host.closest('post-collapsible-trigger');
+        if (nestedTrigger && !triggers.includes(nestedTrigger)) {
+            triggers.push(nestedTrigger);
+        }
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: 'd376f9ca2621660a062f3cb5ea0164df088d9e8e', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '1debe186e172e978b8a32388a0f5b26eb2a602b3' })));
+        return (h(Host, { key: '7a1dc10a27c1432342ac24e95e000a469b2bf509', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '51c156d51e4191d3dd6dd93b37317c02d9737bf9' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -135,10 +148,7 @@ export class PostCollapsible {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "collapsed",
-                "methodName": "collapsedChange"
-            }];
-    }
 }
+__decorate([
+    Type('boolean')
+], PostCollapsible.prototype, "collapsed", void 0);

package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js

@@ -8,16 +8,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from "@stencil/core";
+import { EventFrom, getRoot, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType, EventFrom, getRoot } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 export class PostCollapsibleTrigger {
-    /**
-     * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
-     */
-    validateAriaAttributes() {
-        checkRequiredAndType(this, 'for', 'string');
-    }
     constructor() {
         this.observer = new MutationObserver(() => this.setTrigger());
         this.handlePostToggle = this.handlePostToggle.bind(this);
@@ -34,7 +28,10 @@ export class PostCollapsibleTrigger {
         this.setTrigger();
         if (!this.trigger)
             console.warn('The post-collapsible-trigger must contain a button.');
-        this.validateAriaAttributes();
+        if (!this.collapsible) {
+            const target = this.for ? `with id "${this.for}"` : 'nested inside <post-collapsible-trigger>';
+            console.warn(`No post-collapsible found ${target}. Either nest a post-collapsible inside the trigger or set the "for" attribute to the id of the collapsible.`);
+        }
     }
     disconnectedCallback() {
         this.observer.disconnect();
@@ -56,18 +53,21 @@ export class PostCollapsibleTrigger {
         }
     }
     updateAriaAttributes() {
-        if (!this.trigger)
+        const collapsible = this.collapsible;
+        if (!this.trigger || !collapsible)
             return;
-        // add the provided id to the aria-controls list
+        // a nested collapsible may have no id, but aria-controls needs one to reference
+        collapsible.id || (collapsible.id = `collapsible-${crypto.randomUUID()}`);
+        const collapsibleId = collapsible.id;
+        // add the controlled collapsible's id to the aria-controls list
         const ariaControls = this.trigger.getAttribute('aria-controls');
-        if (!ariaControls?.includes(this.for)) {
-            const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
-            this.trigger.setAttribute('aria-controls', newAriaControls);
+        const tokens = ariaControls ? ariaControls.split(/\s+/) : [];
+        if (!tokens.includes(collapsibleId)) {
+            tokens.push(collapsibleId);
+            this.trigger.setAttribute('aria-controls', tokens.join(' '));
         }
-        // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
-        const isCollapsed = this.collapsible?.collapsed;
-        const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
-        this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
+        // set aria-expanded to `true` if expanded, `false` if collapsed (collapsed defaults to false)
+        this.trigger.setAttribute('aria-expanded', `${!collapsible.collapsed}`);
     }
     /**
      * Toggle the post-collapsible controlled by the trigger
@@ -79,7 +79,9 @@ export class PostCollapsibleTrigger {
      * Retrieve the post-collapsible controlled by the trigger
      */
     get collapsible() {
-        const ref = this.root.getElementById(this.for);
+        // prefer a nested post-collapsible, fall back to an id reference via `for`
+        const ref = this.host.querySelector('post-collapsible') ??
+            (this.for ? this.root?.getElementById(this.for) ?? null : null);
         if (ref && ref.localName === 'post-collapsible') {
             return ref;
         }
@@ -89,7 +91,12 @@ export class PostCollapsibleTrigger {
      * Find the button and add the proper event listener and ARIA attributes to it
      */
     setTrigger() {
-        const trigger = this.host.querySelector('button');
+        // skip buttons that belong to a nested collapsible's content
+        const trigger = Array.from(this.host.querySelectorAll('button')).find(button => {
+            const collapsible = button.closest('post-collapsible');
+            const isInsidePanel = !!collapsible && this.host.contains(collapsible);
+            return !isInsidePanel;
+        });
         if (!trigger || (this.trigger && trigger.isEqualNode(this.trigger)))
             return;
         this.trigger = trigger;
@@ -97,7 +104,7 @@ export class PostCollapsibleTrigger {
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: 'f5055d5970eb900d345957f306c9a373680f257a', "data-version": version }, h("slot", { key: 'cf63bdbca00602b9c4e2a81f28723bd274561045' })));
+        return (h(Host, { key: 'bc4bdfbfa942e0a70d0f7af3b0d33eed4341ebb6', "data-version": version }, h("slot", { key: '8770e4a22cbb06c39e1c94e2e358256c1a5509f7' })));
     }
     static get is() { return "post-collapsible-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -111,11 +118,11 @@ export class PostCollapsibleTrigger {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Link the trigger to a post-collapsible with this id"
+                    "text": "Link the trigger to a post-collapsible by its ID.\nIf omitted, a post-collapsible nested directly inside this element is used instead."
                 },
                 "getter": false,
                 "setter": false,
@@ -146,13 +153,10 @@ export class PostCollapsibleTrigger {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "for",
-                "methodName": "validateAriaAttributes"
-            }];
-    }
 }
+__decorate([
+    Type('string')
+], PostCollapsibleTrigger.prototype, "for", void 0);
 __decorate([
     EventFrom('post-collapsible')
 ], PostCollapsibleTrigger.prototype, "handlePostToggle", null);