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

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-12T15:20:43",
+  "timestamp": "2026-06-01T15:48:59",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.3",
@@ -675,29 +675,6 @@
           "required": false,
           "getter": false,
           "setter": false
-        },
-        {
-          "name": "userid",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "userid",
-          "reflectToAttr": false,
-          "docs": "Defines the company internal userId.<post-banner type=\"warning\" data-size=\"sm\"><p>Can only be used on post.ch domains!</p></post-banner>",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
         }
       ],
       "methods": [],
@@ -712,9 +689,15 @@
       ],
       "parts": [],
       "states": [],
-      "dependents": [],
+      "dependents": [
+        "post-login-widget"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "post-login-widget": [
+          "post-avatar"
+        ]
+      }
     },
     {
       "filePath": "src/components/post-back-to-top/post-back-to-top.tsx",
@@ -923,7 +906,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Slot for placing the text inside the breadcrumb item."
+          "text": "default - The content displayed inside the breadcrumb item."
         }
       ],
       "usage": {},
@@ -939,7 +922,7 @@
           "mutable": false,
           "attr": "description",
           "reflectToAttr": true,
-          "docs": "ARIA description for additional context, read after the breadcrumb item content or `label`.",
+          "docs": "An accessible description for additional context, read after the content or `label`.",
           "docsTags": [],
           "values": [
             {
@@ -962,7 +945,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": true,
-          "docs": "ARIA label, screen readers will use this instead of the breadcrumb item content.",
+          "docs": "An accessible label screen readers will use this instead of the breadcrumb item content.",
           "docsTags": [],
           "values": [
             {
@@ -974,6 +957,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "selected",
+          "reflectToAttr": true,
+          "docs": "Indicates that the item represents the current page, applying appropriate styling.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "url",
           "type": "URL | string",
@@ -990,7 +1002,7 @@
           "mutable": false,
           "attr": "url",
           "reflectToAttr": true,
-          "docs": "The optional URL to which the breadcrumb item will link.",
+          "docs": "The destination URL for the breadcrumb item. If omitted, the item is rendered as non-interactive text.",
           "docsTags": [],
           "values": [
             {
@@ -1004,6 +1016,47 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "variant",
+          "type": "\"listitem\" | \"menuitem\"",
+          "complexType": {
+            "original": "Variant",
+            "resolved": "\"listitem\" | \"menuitem\"",
+            "references": {
+              "Variant": {
+                "location": "import",
+                "path": "./variants",
+                "id": "src/components/post-breadcrumb-item/variants.ts::Variant",
+                "referenceLocation": "Variant"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "variant",
+          "reflectToAttr": true,
+          "docs": "Controls how the item is rendered, either as a standard list item or within an overflow menu.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'listitem'"
+            }
+          ],
+          "default": "'listitem'",
+          "values": [
+            {
+              "value": "listitem",
+              "type": "string"
+            },
+            {
+              "value": "menuitem",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -1013,23 +1066,18 @@
       "slots": [
         {
           "name": "default",
-          "docs": "Slot for placing the text inside the breadcrumb item."
+          "docs": "The content displayed inside the breadcrumb item."
         }
       ],
       "parts": [],
       "states": [],
-      "dependents": [
-        "post-breadcrumbs"
-      ],
+      "dependents": [],
       "dependencies": [
-        "post-icon"
+        "post-menu-item"
       ],
       "dependencyGraph": {
         "post-breadcrumb-item": [
-          "post-icon"
-        ],
-        "post-breadcrumbs": [
-          "post-breadcrumb-item"
+          "post-menu-item"
         ]
       }
     },
@@ -1053,7 +1101,7 @@
           "mutable": false,
           "attr": "home-url",
           "reflectToAttr": true,
-          "docs": "The URL for the home breadcrumb item.",
+          "docs": "The URL for the root (home) breadcrumb item.",
           "docsTags": [],
           "values": [
             {
@@ -1076,7 +1124,7 @@
           "mutable": false,
           "attr": "text-breadcrumbs",
           "reflectToAttr": true,
-          "docs": "The accessible label for the breadcrumb component.",
+          "docs": "An accessible label for the breadcrumb navigation.",
           "docsTags": [],
           "values": [
             {
@@ -1099,7 +1147,7 @@
           "mutable": false,
           "attr": "text-home",
           "reflectToAttr": true,
-          "docs": "The text label for the home breadcrumb item.",
+          "docs": "An accessible label for the root (home) breadcrumb item.",
           "docsTags": [],
           "values": [
             {
@@ -1122,7 +1170,7 @@
           "mutable": false,
           "attr": "text-more-items",
           "reflectToAttr": true,
-          "docs": "The accessible label for the breadcrumb menu when breadcrumb items are concatenated.",
+          "docs": "An accessible label for the overflow menu that contains collapsed breadcrumb items.",
           "docsTags": [],
           "values": [
             {
@@ -1144,25 +1192,18 @@
       "states": [],
       "dependents": [],
       "dependencies": [
-        "post-icon",
         "post-menu-trigger",
         "post-menu",
-        "post-menu-item",
-        "post-breadcrumb-item"
+        "post-icon"
       ],
       "dependencyGraph": {
         "post-breadcrumbs": [
-          "post-icon",
           "post-menu-trigger",
           "post-menu",
-          "post-menu-item",
-          "post-breadcrumb-item"
+          "post-icon"
         ],
         "post-menu": [
           "post-popovercontainer"
-        ],
-        "post-breadcrumb-item": [
-          "post-icon"
         ]
       }
     },
@@ -2015,6 +2056,10 @@
       "readme": "# post-footer\n",
       "docs": "",
       "docsTags": [
+        {
+          "name": "slot",
+          "text": "prefooter - Slot for the pre-footer."
+        },
         {
           "name": "slot",
           "text": "grid-{1|2|3|4}-title - Slot for the accordion headers (mobile)."
@@ -2099,6 +2144,10 @@
           "name": "meta",
           "docs": "Slot for the meta links."
         },
+        {
+          "name": "prefooter",
+          "docs": "Slot for the pre-footer."
+        },
         {
           "name": "socialmedia",
           "docs": "Slot for the social media links."
@@ -2553,7 +2602,6 @@
         "post-accordion-item",
         "post-autocomplete",
         "post-back-to-top",
-        "post-breadcrumb-item",
         "post-breadcrumbs",
         "post-closebutton",
         "post-date-picker",
@@ -2578,9 +2626,6 @@
         "post-back-to-top": [
           "post-icon"
         ],
-        "post-breadcrumb-item": [
-          "post-icon"
-        ],
         "post-breadcrumbs": [
           "post-icon"
         ],
@@ -3352,15 +3397,85 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "authenticated - Content rendered when the user is authenticated (e.g. user menu)."
+          "text": "user-links - Links to show in the user menu when the user is authenticated."
         },
         {
           "name": "slot",
-          "text": "unauthenticated - Content rendered when the user is not authenticated (e.g. login link)."
+          "text": "login-link - Content rendered when the user is not authenticated."
         }
       ],
       "usage": {},
-      "props": [],
+      "props": [
+        {
+          "name": "textCurrentUser",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "text-current-user",
+          "reflectToAttr": true,
+          "docs": "Label for the \"Current user is {user}\" accessibility description.\nUse `{user}` as a placeholder — it will be replaced with the current user's name at runtime.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "textUserMenu",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "text-user-menu",
+          "reflectToAttr": true,
+          "docs": "Accessible label for the dropdown menu",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "textUserMenuTrigger",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "text-user-menu-trigger",
+          "reflectToAttr": true,
+          "docs": "Hidden label for the user menu trigger button, for accessibility purposes. It should describe the purpose of the button (e.g. \"Access user links\").",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        }
+      ],
       "methods": [
         {
           "name": "isAuthenticated",
@@ -3427,19 +3542,32 @@
       "styles": [],
       "slots": [
         {
-          "name": "authenticated",
-          "docs": "Content rendered when the user is authenticated (e.g. user menu)."
+          "name": "login-link",
+          "docs": "Content rendered when the user is not authenticated."
         },
         {
-          "name": "unauthenticated",
-          "docs": "Content rendered when the user is not authenticated (e.g. login link)."
+          "name": "user-links",
+          "docs": "Links to show in the user menu when the user is authenticated."
         }
       ],
       "parts": [],
       "states": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "post-menu-trigger",
+        "post-avatar",
+        "post-menu"
+      ],
+      "dependencyGraph": {
+        "post-login-widget": [
+          "post-menu-trigger",
+          "post-avatar",
+          "post-menu"
+        ],
+        "post-menu": [
+          "post-popovercontainer"
+        ]
+      }
     },
     {
       "filePath": "src/components/post-logo/post-logo.tsx",
@@ -4117,7 +4245,8 @@
       "states": [],
       "dependents": [
         "post-breadcrumbs",
-        "post-language-menu"
+        "post-language-menu",
+        "post-login-widget"
       ],
       "dependencies": [
         "post-popovercontainer"
@@ -4131,6 +4260,9 @@
         ],
         "post-language-menu": [
           "post-menu"
+        ],
+        "post-login-widget": [
+          "post-menu"
         ]
       }
     },
@@ -4151,12 +4283,12 @@
       "parts": [],
       "states": [],
       "dependents": [
-        "post-breadcrumbs",
+        "post-breadcrumb-item",
         "post-language-menu-item"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "post-breadcrumbs": [
+        "post-breadcrumb-item": [
           "post-menu-item"
         ],
         "post-language-menu-item": [
@@ -4206,7 +4338,8 @@
       "states": [],
       "dependents": [
         "post-breadcrumbs",
-        "post-language-menu"
+        "post-language-menu",
+        "post-login-widget"
       ],
       "dependencies": [],
       "dependencyGraph": {
@@ -4215,6 +4348,9 @@
         ],
         "post-language-menu": [
           "post-menu-trigger"
+        ],
+        "post-login-widget": [
+          "post-menu-trigger"
         ]
       }
     },
@@ -6357,6 +6493,11 @@
       "docstring": "",
       "path": "src/components/post-banner/banner-types.ts"
     },
+    "src/components/post-breadcrumb-item/variants.ts::Variant": {
+      "declaration": "\"listitem\" | \"menuitem\"",
+      "docstring": "",
+      "path": "src/components/post-breadcrumb-item/variants.ts"
+    },
     "src/components/post-closebutton/types.ts::ButtonType": {
       "declaration": "\"button\" | \"submit\" | \"reset\"",
       "docstring": "",

package/dist/esm/breakpoints-BQ3HlJPr.js

@@ -0,0 +1,202 @@
+/* eslint-disable no-undefined,no-param-reassign,no-shadow */
+
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
+ *                                            are most useful.
+ * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
+ *                                            as-is, to `callback` when the throttled-function is executed.
+ * @param {object} [options] -              An object to configure options.
+ * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
+ *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
+ *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
+ *                                            `delay` milliseconds, the internal counter is reset).
+ * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
+ *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
+ *                                            callback will never executed if both noLeading = true and noTrailing = true.
+ * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
+ *                                            false (at end), schedule `callback` to execute after `delay` ms.
+ *
+ * @returns {Function} A new, throttled, function.
+ */
+function throttle (delay, callback, options) {
+  var _ref = options || {},
+    _ref$noTrailing = _ref.noTrailing,
+    noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
+    _ref$noLeading = _ref.noLeading,
+    noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
+    _ref$debounceMode = _ref.debounceMode,
+    debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
+  /*
+   * After wrapper has stopped being called, this timeout ensures that
+   * `callback` is executed at the proper times in `throttle` and `end`
+   * debounce modes.
+   */
+  var timeoutID;
+  var cancelled = false;
+
+  // Keep track of the last time `callback` was executed.
+  var lastExec = 0;
+
+  // Function to clear existing timeout
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  }
+
+  // Function to cancel next exec
+  function cancel(options) {
+    var _ref2 = options || {},
+      _ref2$upcomingOnly = _ref2.upcomingOnly,
+      upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
+    clearExistingTimeout();
+    cancelled = !upcomingOnly;
+  }
+
+  /*
+   * The `wrapper` function encapsulates all of the throttling / debouncing
+   * functionality and when executed will limit the rate at which `callback`
+   * is executed.
+   */
+  function wrapper() {
+    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
+      arguments_[_key] = arguments[_key];
+    }
+    var self = this;
+    var elapsed = Date.now() - lastExec;
+    if (cancelled) {
+      return;
+    }
+
+    // Execute `callback` and update the `lastExec` timestamp.
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self, arguments_);
+    }
+
+    /*
+     * If `debounceMode` is true (at begin) this is used to clear the flag
+     * to allow future `callback` executions.
+     */
+    function clear() {
+      timeoutID = undefined;
+    }
+    if (!noLeading && debounceMode && !timeoutID) {
+      /*
+       * Since `wrapper` is being called for the first time and
+       * `debounceMode` is true (at begin), execute `callback`
+       * and noLeading != true.
+       */
+      exec();
+    }
+    clearExistingTimeout();
+    if (debounceMode === undefined && elapsed > delay) {
+      if (noLeading) {
+        /*
+         * In throttle mode with noLeading, if `delay` time has
+         * been exceeded, update `lastExec` and schedule `callback`
+         * to execute after `delay` ms.
+         */
+        lastExec = Date.now();
+        if (!noTrailing) {
+          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
+        }
+      } else {
+        /*
+         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
+         * `callback`.
+         */
+        exec();
+      }
+    } else if (noTrailing !== true) {
+      /*
+       * In trailing throttle mode, since `delay` time has not been
+       * exceeded, schedule `callback` to execute `delay` ms after most
+       * recent execution.
+       *
+       * If `debounceMode` is true (at begin), schedule `clear` to execute
+       * after `delay` ms.
+       *
+       * If `debounceMode` is false (at end), schedule `callback` to
+       * execute after `delay` ms.
+       */
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+    }
+  }
+  wrapper.cancel = cancel;
+
+  // Return the wrapper function.
+  return wrapper;
+}
+
+/* eslint-disable no-undefined */
+
+/**
+ * Debounce execution of a function. Debouncing, unlike throttling,
+ * guarantees that a function is only executed a single time, either at the
+ * very beginning of a series of calls, or at the very end.
+ *
+ * @param {number} delay -               A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+ * @param {Function} callback -          A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
+ *                                        to `callback` when the debounced-function is executed.
+ * @param {object} [options] -           An object to configure options.
+ * @param {boolean} [options.atBegin] -  Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds
+ *                                        after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.
+ *                                        (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).
+ *
+ * @returns {Function} A new, debounced function.
+ */
+function debounce (delay, callback, options) {
+  var _ref = {},
+    _ref$atBegin = _ref.atBegin,
+    atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
+  return throttle(delay, callback, {
+    debounceMode: atBegin !== false
+  });
+}
+
+class Breakpoint {
+    constructor() {
+        this.breakpoints = [
+            { key: 'xl', device: 'desktop', minWidth: 1280 },
+            { key: 'lg', device: 'desktop', minWidth: 1024 },
+            { key: 'md', device: 'tablet', minWidth: 780 },
+            { key: 'sm', device: 'tablet', minWidth: 600 },
+            { key: 'xs', device: 'mobile', minWidth: 0 },
+        ];
+        this.resizeObserver = globalThis.ResizeObserver
+            ? new ResizeObserver(() => this.updateCurrentBreakpoint())
+            : null;
+        this.updateCurrentBreakpoint = throttle(50, (options = { emitEvents: true }) => {
+            const previousBreakpoint = this.currentBreakpoint;
+            const newBreakpoint = this.breakpoints.find(breakpoint => {
+                return breakpoint.minWidth <= innerWidth;
+            });
+            if (!newBreakpoint)
+                return;
+            this.currentBreakpoint = newBreakpoint;
+            if (!options.emitEvents)
+                return;
+            Object.keys(this.currentBreakpoint)
+                .filter(key => !previousBreakpoint || this.currentBreakpoint[key] !== previousBreakpoint[key])
+                .forEach((key) => this.dispatchEvent(key));
+        });
+        if (this.resizeObserver) {
+            this.updateCurrentBreakpoint({ emitEvents: false });
+            this.resizeObserver.observe(document.body);
+        }
+    }
+    dispatchEvent(property) {
+        globalThis.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
+    }
+    get(property) {
+        this.updateCurrentBreakpoint({ emitEvents: false });
+        return this.currentBreakpoint[property];
+    }
+}
+const breakpoint = new Breakpoint();
+
+export { breakpoint as b, debounce as d, throttle as t };