@swisspost/design-system-components 10.0.0-next.72 → 10.0.0-next.76

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

@@ -21,7 +21,14 @@ const GAP_THRESHOLD_FOR_PAGE = 2; // Show page number instead of ellipsis when g
 const MIDDLE_RANGE_START = 2; // Middle range starts from page 2 (page 1 is always shown separately)
 export class PostPagination {
     constructor() {
+        this.maxVisiblePages = 3;
         this.items = [];
+        /**
+         * The current active page number.
+         *
+         * **If not specified, defaults to the first page.**
+         */
+        this.page = 1;
         this.lastWindowWidth = window.innerWidth;
         this.loaded = false;
         this.debouncedResize = debounce(this.handleResizeInternal.bind(this), RESIZE_DEBOUNCE_MS);
@@ -32,9 +39,7 @@ export class PostPagination {
     }
     componentWillLoad() {
         this.paginationId = `pagination-${this.host.id || nanoid(6)}`;
-        if (this.page == null) {
-            this.page = 1;
-        }
+        this.updatePagesWithValidation();
     }
     connectedCallback() {
         window.addEventListener('resize', this.debouncedResize);
@@ -391,7 +396,7 @@ export class PostPagination {
      */
     generatePages(totalPages) {
         const maxVisible = this.maxVisiblePages;
-        const currentPage = this.page || 1;
+        const currentPage = this.page;
         if (totalPages <= maxVisible) {
             this.items = this.buildAllPages(totalPages);
             return;
@@ -542,7 +547,8 @@ export class PostPagination {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "page"
+                "attribute": "page",
+                "defaultValue": "1"
             },
             "pageSize": {
                 "type": "number",

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

@@ -30,8 +30,8 @@ export class PostPopover {
         this.arrow = true;
     }
     /**
-     * Programmatically display the popover
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * Programmatically display the popover,
+     * `target` is the HTML element the menu is anchored to.
      */
     async show(target) {
         await this.popoverRef.show(target);
@@ -44,9 +44,8 @@ export class PostPopover {
         this.popoverRef.hide();
     }
     /**
-     * Toggle popover display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
-     * @param force Pass true to always show or false to always hide
+     * Toggle popover display,
+     * `target` is the HTML element the menu is anchored to.
      */
     async toggle(target, force) {
         const isOpen = await this.popoverRef.toggle(target, force);
@@ -62,7 +61,7 @@ export class PostPopover {
         }
     }
     render() {
-        return (h(Host, { key: '4c6d36060c351602af36c7df3bd1a594cb851213', "data-version": version }, h("post-popovercontainer", { key: 'ec84ed352e562037e547e22f75304683bffa4521', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '2fca8b18ca9ba9abb9464347496ee390815165ec', class: "popover-container" }, h("div", { key: '8859270d05c687223a55583654f97bef9848a8e7', class: "popover-content" }, h("slot", { key: 'e1dff905b2c0882a72693cb07c331581cf63fcf7' })), h("post-closebutton", { key: '7a147e9542c1b7c462141e0940c80eb465fef9a4', onClick: () => this.hide() }, this.textClose)))));
+        return (h(Host, { key: 'f24329a264569794e7108875eda111a1456c5b47', "data-version": version }, h("post-popovercontainer", { key: 'ae8e9498e59de8a515f5bd11ecf79a2be9a513d1', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '76e4e49d302159db19c8e83a7ece60945f003da5', class: "popover-container" }, h("div", { key: '3fb7c1ca533e54b4960bd5d7c54535b0097831d8', class: "popover-content" }, h("slot", { key: '5bdf6a0a75d0c433f88afe0a6e9c6f298bbb64a7' })), h("post-closebutton", { key: '26d7569bb60cdb1aa5479260738f33cf65737df9', onClick: () => this.hide() }, this.textClose)))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -154,7 +153,7 @@ export class PostPopover {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -169,11 +168,8 @@ export class PostPopover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically display the popover",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
-                        }]
+                    "text": "Programmatically display the popover,\n`target` is the HTML element the menu is anchored to.",
+                    "tags": []
                 }
             },
             "hide": {
@@ -199,11 +195,11 @@ export class PostPopover {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "docs": ""
                         }, {
                             "name": "force",
                             "type": "boolean",
-                            "docs": "Pass true to always show or false to always hide"
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -218,14 +214,8 @@ export class PostPopover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggle popover display",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
-                        }, {
-                            "name": "param",
-                            "text": "force Pass true to always show or false to always hide"
-                        }]
+                    "text": "Toggle popover display,\n`target` is the HTML element the menu is anchored to.",
+                    "tags": []
                 }
             }
         };

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

@@ -107,7 +107,7 @@ export class PostPopoverTrigger {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (h(Host, { key: '15106566f7f823c789987c59ef7b655622c95f23', "data-version": version }, h("slot", { key: 'e8d4e3f87795b2f323210a2fedee79e462f715bd', onSlotchange: () => this.setupTrigger() })));
+        return (h(Host, { key: '009495ba354321f2b0162c4a0c4fcb1e165074e7', "data-version": version }, h("slot", { key: 'f0e5ef7851b4bc9916382b0910d9500db52668d4', onSlotchange: () => this.setupTrigger() })));
     }
     static get is() { return "post-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host>div{border:2px solid rgba(0,0,0,0)}}:host .popover-scroll{max-height:var(--post-popovercontainer-available-height, none);overflow-y:auto}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[dynamic-placement=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:host([safe-space=triangle])::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:host([safe-space=trapezoid])::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:host(:not(:has(.arrow)))>div{box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=top]))>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=left]))>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=right]))>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}
+@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host>div{border:2px solid rgba(0,0,0,0)}}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[dynamic-placement=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:host([safe-space=triangle])::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:host([safe-space=trapezoid])::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:host(:not(:has(.arrow)))>div{box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=top]))>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=left]))>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=right]))>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}

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

@@ -72,10 +72,10 @@ export class PostPopovercontainer {
     }
     /**
      * Programmatically display the popovercontainer
-     * @param target A focusable element inside the trigger component that controls the popover
+     * @param target The element that invokes the popover and to which it is visually anchored.
      */
     async show(target) {
-        if (this.toggleTimeoutId)
+        if (this.toggleTimeoutId || !target)
             return;
         this.eventTarget = target;
         this.calculatePosition();
@@ -93,10 +93,14 @@ export class PostPopovercontainer {
     }
     /**
      * Toggle popovercontainer display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * @param target The element that invokes the popover and to which it is visually anchored.
      * @param force Pass true to always show or false to always hide
      */
     async toggle(target, force) {
+        const isOpen = this.host.matches(':where(:popover-open, .popover-open)');
+        const willOpen = force === true || (force === undefined && !isOpen);
+        if (willOpen && !target)
+            return isOpen;
         this.eventTarget = target;
         // Prevent instant double toggle
         if (!this.toggleTimeoutId) {
@@ -267,9 +271,10 @@ export class PostPopovercontainer {
             // flip should come before shift. For non-aligned, shift before flip.
             ...(isAligned ? [flipMiddleware, shiftMiddleware] : [shiftMiddleware, flipMiddleware]),
             size({
-                apply({ availableWidth, availableHeight, elements }) {
-                    elements.floating.style.maxWidth = `${availableWidth - gap * 2}px`;
-                    elements.floating.style.setProperty('--post-popovercontainer-available-height', `${availableHeight - gap * 2}px`);
+                apply({ availableWidth, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth - gap * 2}px`,
+                    });
                 },
             }),
         ];
@@ -343,9 +348,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: '468af4ce773ab7c5d4feb4320c33175347ceca3d', "data-version": version, popover: "auto" }, h("div", { key: 'f8a78f27bf46079134b75d468b44ad40d15a0001', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: '9d92eaec690d67bdbf3b991274c2351744628519', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
+        return (h(Host, { key: 'be9f32a35f247f5b2cb54599b96e715ce1a5a1f1', "data-version": version, popover: "auto" }, h("div", { key: 'ad2616c15dfec83e1e53ad14cb145aee2d625c9a', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: '293ba9d1ba2a7b57297cd4aa716ba1369b2f8988', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("span", { key: 'a1dd28b0ddd3af5792199f47e7a921eb14b86f93', part: "post-popovercontainer-border-mask" }), h("div", { key: '94e84d35042983d832d6f0e9f8c01b68428d1401', class: "popover-scroll" }, h("slot", { key: '28909f395a3ed25f489458f94de79c3c1ae309c9' })))));
+            } })), h("span", { key: '7b9d47b53a4d4a672490eccdc88a7eb0552b5574', part: "post-popovercontainer-border-mask" }), h("slot", { key: '4b4249d6ebe1c247634bbb76b08ec01e73dc7d4b' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get encapsulation() { return "shadow"; }
@@ -559,7 +564,7 @@ export class PostPopovercontainer {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "A focusable element inside the trigger component that controls the popover"
+                            "docs": "The element that invokes the popover and to which it is visually anchored."
                         }],
                     "references": {
                         "Promise": {
@@ -577,7 +582,7 @@ export class PostPopovercontainer {
                     "text": "Programmatically display the popovercontainer",
                     "tags": [{
                             "name": "param",
-                            "text": "target A focusable element inside the trigger component that controls the popover"
+                            "text": "target The element that invokes the popover and to which it is visually anchored."
                         }]
                 }
             },
@@ -604,7 +609,7 @@ export class PostPopovercontainer {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "docs": "The element that invokes the popover and to which it is visually anchored."
                         }, {
                             "name": "force",
                             "type": "boolean",
@@ -626,7 +631,7 @@ export class PostPopovercontainer {
                     "text": "Toggle popovercontainer display",
                     "tags": [{
                             "name": "param",
-                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "text": "target The element that invokes the popover and to which it is visually anchored."
                         }, {
                             "name": "param",
                             "text": "force Pass true to always show or false to always hide"

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

@@ -43,7 +43,7 @@ export class PostProgressbar {
         const max = this.getEffectiveMax();
         const value = this.getEffectiveValue(min, max);
         const percentage = ((value - min) / (max - min)) * 100;
-        return (h(Host, { key: '3d48615c3f08904f896eb5ebb7d8bfdff882a89b', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'dd8c0d44ba1aeccb3102cb15556517df98b9cf63', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
+        return (h(Host, { key: '26bdbb5219393e8b44e2fe5395d8a4cd8aa7e18a', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '65b81479fac7aa6024556ef6589064f997f4394e', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
     }
     static get is() { return "post-progressbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,7 +83,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: 'c037e21b074c9ebc433e325e49d17dbe06d8db43', "data-version": version }, h("div", { key: 'f661eac91003680598c38d54dbc5fa3f482b7ad8', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: 'c793abbf5e0d01bb19dc4464ebd75249959a1717', "data-version": version }, h("div", { key: '357946df40a3d3a85ece2d0ac6ecc761951d9471', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

package/dist/collection/components/post-side-navigation/post-side-navigation.css

@@ -0,0 +1 @@
+:host{--post-side-navigation-padding-block-start: 34px;--post-side-navigation-padding-block-end: 16px;--post-side-navigation-bg: #f0efed;--post-side-navigation-stroke: #b4b3af;display:flex;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke)}:host dialog{overflow:visible;width:var(--post-side-navigation-width);bottom:auto;right:auto;border:none;padding:0;max-height:100dvh;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke)}@media screen and (max-width: 1023.98px){:host dialog{box-shadow:var(--post-device-elevation-300)}}:host post-closebutton{transform:translate(50%, 0)}

package/dist/collection/components/post-side-navigation/post-side-navigation.js

@@ -0,0 +1,267 @@
+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 { h, Host, } from "@stencil/core";
+import { version } from "../../../../package";
+import { breakpoint } from "../../utils/breakpoints";
+import { getFocusableChildren, OneOf, Required, Type } from "../../utils/index";
+import { SIDE_NAVIGATION_SIZES } from "./side-navigation-styles";
+/**
+ * @slot default - Slot for the navigation content (must be a `<nav>` landmark with proper heading)
+ */
+export class PostSideNavigation {
+    constructor() {
+        this.device = breakpoint.get('device');
+        /**
+         * Controls the size of the navigation items.
+         * Choose "small" for deep and long navigation, and "large" (default) for a flat and short navigation.
+         */
+        this.size = 'large';
+        this.breakpointChange = (e) => {
+            this.device = e.detail;
+        };
+        /**
+         * Collapses the active disclosure on Escape; lets the native dialog handle it otherwise.
+         */
+        this.handleKeyDown = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            const collapsible = this.collapsible;
+            if (!collapsible || collapsible.collapsed)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            collapsible.toggle(false);
+            this.collapsibleTrigger?.querySelector('button')?.focus();
+        };
+    }
+    connectedCallback() {
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
+        this.host.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
+        this.host.removeEventListener('keydown', this.handleKeyDown);
+    }
+    get dialog() {
+        return this.host.shadowRoot?.querySelector('dialog');
+    }
+    get collapsibleTrigger() {
+        return document.activeElement?.closest('post-collapsible-trigger') ?? null;
+    }
+    get collapsible() {
+        return this.collapsibleTrigger?.querySelector(':scope > post-collapsible') ?? null;
+    }
+    /**
+     * Toggles the navigation programmatically.
+     * No-op on desktop.
+     */
+    async toggle() {
+        if (this.device === 'desktop')
+            return;
+        return this.dialog?.open ? this.hide() : this.show();
+    }
+    /**
+     * Opens the navigation programmatically.
+     * No-op on desktop.
+     */
+    async show() {
+        if (this.device === 'desktop')
+            return;
+        this.dialog.showModal();
+        this.postToggle.emit(true);
+        this.focusNav();
+    }
+    /**
+     * Closes the navigation programmatically.
+     * No-op on desktop.
+     */
+    async hide() {
+        if (this.device === 'desktop')
+            return;
+        this.dialog.close();
+    }
+    /**
+     * Move focus into the navigation when the dialog opens.
+     */
+    focusNav() {
+        const slot = this.host.shadowRoot?.querySelector('slot');
+        const nav = slot?.assignedElements({ flatten: true })[0];
+        if (!nav)
+            return;
+        const [firstFocusable] = getFocusableChildren(nav);
+        firstFocusable?.focus();
+    }
+    /**
+     * Render inline navigation (desktop).
+     */
+    renderNav() {
+        return h("slot", null);
+    }
+    /**
+     * Render modal navigation (mobile/tablet).
+     */
+    renderDialog() {
+        return (h("dialog", { onClose: () => {
+                this.postToggle.emit(false);
+            } }, h("slot", null), h("post-closebutton", { onClick: () => this.hide() }, this.textClose)));
+    }
+    render() {
+        return (h(Host, { key: '71ecd690876690a72f5c06b1e91856600aa11b90', "data-version": version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
+    }
+    static get is() { return "post-side-navigation"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-side-navigation.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-side-navigation.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "textClose": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the close button shown in the mobile navigation dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-close"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SideNavigationSize",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {
+                        "SideNavigationSize": {
+                            "location": "import",
+                            "path": "./side-navigation-styles",
+                            "id": "src/components/post-side-navigation/side-navigation-styles.ts::SideNavigationSize",
+                            "referenceLocation": "SideNavigationSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the size of the navigation items.\nChoose \"small\" for deep and long navigation, and \"large\" (default) for a flat and short navigation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'large'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "device": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postToggle",
+                "name": "postToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event emitted when the navigation is shown or hidden on mobile.\nThe payload is a boolean: `true` when the navigation opens, `false` when it closes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the navigation programmatically.\nNo-op on desktop.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the navigation programmatically.\nNo-op on desktop.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the navigation programmatically.\nNo-op on desktop.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+__decorate([
+    Required(),
+    Type('string')
+], PostSideNavigation.prototype, "textClose", void 0);
+__decorate([
+    OneOf(SIDE_NAVIGATION_SIZES)
+], PostSideNavigation.prototype, "size", void 0);

package/dist/collection/components/post-side-navigation/side-navigation-styles.js

@@ -0,0 +1 @@
+export const SIDE_NAVIGATION_SIZES = ['large', 'small'];

package/dist/collection/components/post-side-navigation-trigger/post-side-navigation-trigger.css

@@ -0,0 +1 @@
+:host{display:inline-block}@media screen and (min-width: 1024px){:host{display:none}}