@swisspost/design-system-components 10.0.0-next.54 → 10.0.0-next.56

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

@@ -14,7 +14,7 @@ import { version } from "../../../../package";
 import { getFocusableChildren } from "../../utils/get-focusable-children";
 import { getRoot, checkEmptyOrOneOf, checkRequiredAndType, EventFrom } from "../../utils/index";
 /**
- * @part menu - The container element that holds the list of menu items.
+ * @part post-menu - The container element that holds the list of menu items.
  * @slot header - Holds the header part of the menu.
  */
 export class PostMenu {
@@ -52,35 +52,6 @@ export class PostMenu {
                 this.controlKeyDownHandler(e);
             }
         };
-        this.handlePostShown = (event) => {
-            // Only for the first open
-            if (event.detail.first) {
-                // Add "menu" and "menuitem" aria roles and aria-label
-                this.host.setAttribute('role', 'menu');
-                const menuItems = this.getSlottedItems();
-                for (const item of menuItems) {
-                    item.setAttribute('role', 'menuitem');
-                }
-                if (this.label)
-                    this.host.setAttribute('aria-label', this.label);
-            }
-        };
-        this.handlePostToggled = (event) => {
-            this.isVisible = event.detail.isOpen;
-            this.toggleMenu.emit(this.isVisible);
-            if (this.isVisible) {
-                this.lastFocusedElement = this.root?.activeElement;
-                requestAnimationFrame(() => {
-                    const menuItems = this.getSlottedItems();
-                    if (menuItems.length > 0) {
-                        menuItems[0].focus();
-                    }
-                });
-            }
-            else if (this.lastFocusedElement) {
-                this.lastFocusedElement.focus();
-            }
-        };
         this.handleClick = (e) => {
             const target = e.target;
             if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
@@ -142,6 +113,35 @@ export class PostMenu {
             console.error('hide: popoverRef is null or undefined');
         }
     }
+    handlePostShown(event) {
+        // Only for the first open
+        if (event.detail.first) {
+            // Add "menu" and "menuitem" aria roles and aria-label
+            this.host.setAttribute('role', 'menu');
+            const menuItems = this.getSlottedItems();
+            for (const item of menuItems) {
+                item.setAttribute('role', 'menuitem');
+            }
+            if (this.label)
+                this.host.setAttribute('aria-label', this.label);
+        }
+    }
+    handlePostToggled(event) {
+        this.isVisible = event.detail.isOpen;
+        this.toggleMenu.emit(this.isVisible);
+        if (this.isVisible) {
+            this.lastFocusedElement = this.root?.activeElement;
+            requestAnimationFrame(() => {
+                const menuItems = this.getSlottedItems();
+                if (menuItems.length > 0) {
+                    menuItems[0].focus();
+                }
+            });
+        }
+        else if (this.lastFocusedElement) {
+            this.lastFocusedElement.focus();
+        }
+    }
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (!menuItems.length) {
@@ -191,7 +191,7 @@ export class PostMenu {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'eef3d3cdf2553c2627ddf580a95c70f00c02d388', "data-version": version }, h("post-popovercontainer", { key: '27c3341bec9d4ee98b59f70e902913f03954c32c', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ef6c0ab8b6de380c23f6562a3d0ba34d9eaace98', part: "menu" }, h("slot", { key: 'edca1d3e9ab11d016ba18baf9f8d6aa65bb71958', name: "header" }), h("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })))));
+        return (h(Host, { key: '08285b17608e5bc3133a3da6015a5a0d4de6ec29', "data-version": version }, h("post-popovercontainer", { key: '17e45869b5e76cdd9bd43ca77b2f0b3876462014', onPostShow: this.handlePostShown.bind(this), onPostToggle: this.handlePostToggled.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'e2486aa099ffc8ac59885a0971ebb13649a49a35', part: "post-menu" }, h("slot", { key: '9f0e05f211fe18cf5beed8e1b33bde26d4974e24', name: "header" }), h("slot", { key: '971ac8ad433467a2ebe2429574cb10dbdadbcf25' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -246,11 +246,11 @@ export class PostMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "An accessible name for the menu."
+                    "text": "A descriptive label that clearly identifies the menu\u2019s content so assistive technologies can convey its purpose."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             }
         };
     }
@@ -364,7 +364,7 @@ export class PostMenu {
 }
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostShown", void 0);
+], PostMenu.prototype, "handlePostShown", null);
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostToggled", void 0);
+], PostMenu.prototype, "handlePostToggled", null);

package/dist/collection/components/post-menu-item/post-menu-item.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 export class PostMenuItem {
     render() {
-        return (h(Host, { key: 'd37c4eed483b46dedcccbc835017ff2415dbd22e', "data-version": version }, h("slot", { key: 'e13d1f35e7883a0aee4d08ceb39caeb97fb960ec' })));
+        return (h(Host, { key: 'ae55d1dca73916188cb269cd7f4c808ee3302288', "data-version": version }, h("slot", { key: 'fabc1b7b4b99d7881bea64593114b6cd4fc606c4' })));
     }
     static get is() { return "post-menu-item"; }
     static get originalStyleUrls() {

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

@@ -73,7 +73,7 @@ export class PostMenuTrigger {
         }
     }
     render() {
-        return (h(Host, { key: 'fc962802089652073c19cc35a511e48b0cab43b7', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3a8b40c0a88c44092b56ca4aa1c74f880bebb20' })));
+        return (h(Host, { key: '3ef7e372c9c655bf1da5d5a7d4bca6925a010f65', "data-version": version, "tab-index": "-1" }, h("slot", { key: '771db943ad5aa639c325f055ba6f9d763bf4256d' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1 @@
+.pagination{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;padding:8px;overflow:hidden}.pagination-list{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%;margin:0;padding:0;list-style:none;flex-wrap:nowrap}.pagination-item{display:flex;align-items:center;margin:0;padding:0;flex-shrink:0;flex-grow:0}.pagination-link{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:32px;min-width:32px;padding:0;margin:0;font-size:14px;font-weight:700;color:#050400;text-decoration:none;background-color:rgba(0,0,0,0);border:1px solid #ccc;border-radius:100%;cursor:pointer;appearance:none;outline:none}.pagination-link:hover:not(:disabled):not(.pagination-link-disabled){color:#504f4b;background-color:#f5f5f5;border:2px solid #504f4b}.pagination-link:active:not(:disabled):not(.pagination-link-disabled):not(.pagination-link-active){color:#504f4b;background-color:#f5f5f5;border:2px solid #504f4b}.pagination-link:focus-visible{z-index:1;outline:2px solid #050400;outline-offset:2px}.pagination-link:focus:not(:focus-visible){outline:none}.pagination-link.pagination-link-active{font-weight:700;color:#fff;background-color:#050400;border-color:#050400;cursor:default}.pagination-link.pagination-link-active:hover:not(:disabled):not(.pagination-link-disabled){background-color:#504f4b;border-color:#504f4b;color:#fff}.pagination-link:disabled,.pagination-link.pagination-link-disabled{color:#6b6b6b;background-color:#f0f0f0;border-color:#ccc;opacity:.6;cursor:default}@media(min-width: 600px){.pagination-link{width:40px;height:40px;min-width:40px;font-size:16px}}@media(min-width: 1024px){.pagination-link{width:48px;height:48px;min-width:48px;font-size:20px}}.pagination-control-button post-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px}@media(min-width: 600px){.pagination-control-button post-icon{width:18px;height:18px}}@media(min-width: 1024px){.pagination-control-button post-icon{width:20px;height:20px}}.pagination-control-button:active:not(:disabled):not(.pagination-link-disabled){background-color:#f5f5f5;border:2px solid #504f4b}.pagination-ellipsis{display:flex;align-items:center;justify-content:center;flex-shrink:0;flex-grow:0}.pagination-ellipsis-content{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;color:#050400;user-select:none}@media(min-width: 600px){.pagination-ellipsis-content{width:40px;height:40px}}@media(min-width: 1024px){.pagination-ellipsis-content{width:48px;height:48px}}.hidden-items{position:absolute;display:flex;gap:4px;height:0;overflow:hidden;white-space:nowrap;visibility:hidden;pointer-events:none}.pagination-icon-rotated{display:inline-block;transform:rotate(180deg)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}