@swisspost/design-system-components 10.0.0-next.66 → 10.0.0-next.67

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-03-30T09:15:25",
+  "timestamp": "2026-04-20T14:10:36",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.41.1",
@@ -412,6 +412,138 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/post-autocomplete/post-autocomplete.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-autocomplete",
+      "readme": "# post-accordion\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Slot for placing post-autocomplete-item components."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "clearable",
+          "reflectToAttr": true,
+          "docs": "Show or hide the clear button",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "filterThreshold",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "filter-threshold",
+          "reflectToAttr": true,
+          "docs": "Number of characters to type before filtering methods are called",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "0"
+            }
+          ],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "listbox",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "listbox",
+          "reflectToAttr": true,
+          "docs": "Optional idref to connect the autocomplete with the options dropdown if not nested",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "postFilteringEvent",
+          "detail": "string",
+          "bubbles": true,
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Cancelable event emitted when the input value is to be filtered",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Slot for placing post-autocomplete-item components."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "post-icon"
+      ],
+      "dependencyGraph": {
+        "post-autocomplete": [
+          "post-icon"
+        ]
+      }
+    },
     {
       "filePath": "src/components/post-avatar/post-avatar.tsx",
       "encapsulation": "shadow",
@@ -1766,25 +1898,6 @@
         ]
       }
     },
-    {
-      "filePath": "src/utils/tests/environment/post-env-test.tsx",
-      "encapsulation": "shadow",
-      "tag": "post-env-test",
-      "readme": "# post-test-env\n\n\n",
-      "docs": "",
-      "docsTags": [],
-      "usage": {},
-      "props": [],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
     {
       "filePath": "src/components/post-footer/post-footer.tsx",
       "encapsulation": "shadow",
@@ -2325,6 +2438,7 @@
       "parts": [],
       "dependents": [
         "post-accordion-item",
+        "post-autocomplete",
         "post-back-to-top",
         "post-breadcrumb-item",
         "post-breadcrumbs",
@@ -2332,6 +2446,7 @@
         "post-date-picker",
         "post-header",
         "post-language-menu",
+        "post-listbox-option",
         "post-mainnavigation",
         "post-megadropdown",
         "post-megadropdown-trigger",
@@ -2344,6 +2459,9 @@
         "post-accordion-item": [
           "post-icon"
         ],
+        "post-autocomplete": [
+          "post-icon"
+        ],
         "post-back-to-top": [
           "post-icon"
         ],
@@ -2365,6 +2483,9 @@
         "post-language-menu": [
           "post-icon"
         ],
+        "post-listbox-option": [
+          "post-icon"
+        ],
         "post-mainnavigation": [
           "post-icon"
         ],
@@ -2722,8 +2843,14 @@
       ],
       "parts": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "post-menu-item"
+      ],
+      "dependencyGraph": {
+        "post-language-menu-item": [
+          "post-menu-item"
+        ]
+      }
     },
     {
       "filePath": "src/components/post-linkarea/post-linkarea.tsx",
@@ -2744,6 +2871,331 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/post-listbox/post-listbox.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-listbox",
+      "readme": "# post-accordion\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [],
+      "methods": [
+        {
+          "name": "clearSelection",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "clearSelection() => Promise<void>",
+          "parameters": [],
+          "docs": "Clears the currently selected option",
+          "docsTags": []
+        },
+        {
+          "name": "filter",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(query: string) => Promise<void>",
+            "parameters": [
+              {
+                "name": "query",
+                "type": "string",
+                "docs": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "filter(query: string) => Promise<void>",
+          "parameters": [
+            {
+              "name": "query",
+              "type": "string",
+              "docs": ""
+            }
+          ],
+          "docs": "Uses the internal default filtering mode to filter the list of options.\nAn empty string resets the filter to it's original state.",
+          "docsTags": []
+        },
+        {
+          "name": "hide",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "hide() => Promise<void>",
+          "parameters": [],
+          "docs": "Closes the listbox",
+          "docsTags": []
+        },
+        {
+          "name": "navigate",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(direction: \"up\" | \"down\" | \"first\" | \"last\") => Promise<void>",
+            "parameters": [
+              {
+                "name": "direction",
+                "type": "\"up\" | \"down\" | \"first\" | \"last\"",
+                "docs": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "navigate(direction: \"up\" | \"down\" | \"first\" | \"last\") => Promise<void>",
+          "parameters": [
+            {
+              "name": "direction",
+              "type": "\"up\" | \"down\" | \"first\" | \"last\"",
+              "docs": ""
+            }
+          ],
+          "docs": "Navigates the listbox options in the specified direction and scrolls the active option into view.",
+          "docsTags": []
+        },
+        {
+          "name": "selectActive",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "selectActive() => Promise<void>",
+          "parameters": [],
+          "docs": "Selects the currently highlighted option in the listbox and scrolls it into view.",
+          "docsTags": []
+        },
+        {
+          "name": "show",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "show() => Promise<void>",
+          "parameters": [],
+          "docs": "Opens the listbox",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "postOptionActive",
+          "detail": "string",
+          "bubbles": true,
+          "complexType": {
+            "original": "string | null",
+            "resolved": "string",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted option id for the active option",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "postOptionSelected",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "post-popovercontainer"
+      ],
+      "dependencyGraph": {
+        "post-listbox": [
+          "post-popovercontainer"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/post-listbox-option/post-listbox-option.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-listbox-option",
+      "readme": "# post-accordion\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "highlighted",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "highlighted",
+          "reflectToAttr": true,
+          "docs": "Represents option is highlighted .",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "selected",
+          "reflectToAttr": true,
+          "docs": "Represents option is selected .",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": true,
+          "docs": "A value string, similar to <option value=\"Value 1\">Value 1 description</option>",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "postOptionSelected",
+          "detail": "string",
+          "bubbles": true,
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when this option was selected. Bubbles up.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "post-icon"
+      ],
+      "dependencyGraph": {
+        "post-listbox-option": [
+          "post-icon"
+        ]
+      }
+    },
     {
       "filePath": "src/components/post-logo/post-logo.tsx",
       "encapsulation": "shadow",
@@ -3448,12 +3900,16 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "post-breadcrumbs"
+        "post-breadcrumbs",
+        "post-language-menu-item"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "post-breadcrumbs": [
           "post-menu-item"
+        ],
+        "post-language-menu-item": [
+          "post-menu-item"
         ]
       }
     },
@@ -4540,6 +4996,7 @@
       ],
       "dependents": [
         "post-date-picker",
+        "post-listbox",
         "post-menu",
         "post-popover",
         "post-tooltip"
@@ -4549,6 +5006,9 @@
         "post-date-picker": [
           "post-popovercontainer"
         ],
+        "post-listbox": [
+          "post-popovercontainer"
+        ],
         "post-menu": [
           "post-popovercontainer"
         ],

package/dist/esm/{breakpoints-_gmb7vUy.js → breakpoints-CZuqK5QS.js}

@@ -1,4 +1,4 @@
-import { I as IS_SERVER } from './environment-CEmnRoA6.js';
+import './index-8Vx4ywJ4.js';
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
 
@@ -169,6 +169,7 @@ class Breakpoint {
             { key: 'sm', device: 'tablet', minWidth: 600 },
             { key: 'xs', device: 'mobile', minWidth: 0 },
         ];
+        this.resizeObserver = new ResizeObserver(() => this.updateCurrentBreakpoint());
         this.updateCurrentBreakpoint = throttle(50, (options = { emitEvents: true }) => {
             const previousBreakpoint = this.currentBreakpoint;
             const newBreakpoint = this.breakpoints.find(breakpoint => {
@@ -183,15 +184,11 @@ class Breakpoint {
                 .filter(key => !previousBreakpoint || this.currentBreakpoint[key] !== previousBreakpoint[key])
                 .forEach((key) => this.dispatchEvent(key));
         });
-        if (IS_SERVER)
-            return;
         this.updateCurrentBreakpoint({ emitEvents: false });
-        window.addEventListener('resize', () => this.updateCurrentBreakpoint(), { passive: true });
+        this.resizeObserver.observe(document.body);
     }
     dispatchEvent(property) {
-        if (IS_SERVER)
-            return;
-        window.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
+        globalThis.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
     }
     get(property) {
         this.updateCurrentBreakpoint({ emitEvents: false });

package/dist/esm/{get-focusable-children-CFWKPWu9.js → get-focusable-children-CckqSLu_.js}

@@ -1,4 +1,4 @@
-import { g as getRoot } from './get-root-CXfAA093.js';
+import { g as getRoot } from './get-root-gmtbd8C-.js';
 
 const focusableSelector = `:where(${[
     'button',
@@ -38,7 +38,7 @@ function getDeepFocusableChildren(el, filter, visited = new Set()) {
     // SLOT
     if (el instanceof HTMLSlotElement) {
         const assigned = el.assignedElements({ flatten: true });
-        nodes = assigned.length ? assigned : Array.from(el.children);
+        nodes = assigned.length > 0 ? assigned : Array.from(el.children);
     }
     // SHADOW ROOT
     else if (el instanceof HTMLElement && el.shadowRoot) {
@@ -71,8 +71,8 @@ function isFocusBlockedByCSS(el) {
     if (typeof el.checkVisibility === 'function') {
         return !el.checkVisibility({ visibilityProperty: true });
     }
-    const style = window.getComputedStyle(el);
-    if (style.display === 'none' || style.visibility !== 'visible') {
+    const style = el.ownerDocument?.defaultView?.getComputedStyle(el);
+    if (!style || style.display === 'none' || style.visibility !== 'visible') {
         return true;
     }
     if (el.parentElement) {

package/dist/esm/{get-root-CXfAA093.js → get-root-gmtbd8C-.js}

@@ -1,11 +1,11 @@
-import { a as IS_BROWSER } from './environment-CEmnRoA6.js';
+import './index-8Vx4ywJ4.js';
 
 /**
  * getRootNode() can only be used after the element has been attached to the document!
  * So use it for example in the componentDidLoad lifecycle hook.
  */
 function getRoot(element) {
-    const root = IS_BROWSER ? element.getRootNode() : element;
+    const root = element.getRootNode() ;
     if (root instanceof Document || root instanceof ShadowRoot) {
         return root;
     }