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

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-01T15:48:59",
+  "timestamp": "2026-06-24T14:41:06",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.3",
@@ -1209,7 +1209,7 @@
     },
     {
       "filePath": "src/components/post-closebutton/post-closebutton.tsx",
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "tag": "post-closebutton",
       "readme": "# post-closebutton\n",
       "docs": "",
@@ -1223,10 +1223,10 @@
       "props": [
         {
           "name": "buttonType",
-          "type": "\"button\" | \"reset\" | \"submit\"",
+          "type": "\"button\" | \"reset\"",
           "complexType": {
             "original": "ButtonType",
-            "resolved": "\"button\" | \"reset\" | \"submit\"",
+            "resolved": "\"button\" | \"reset\"",
             "references": {
               "ButtonType": {
                 "location": "import",
@@ -1255,10 +1255,6 @@
             {
               "value": "reset",
               "type": "string"
-            },
-            {
-              "value": "submit",
-              "type": "string"
             }
           ],
           "optional": true,
@@ -1363,7 +1359,8 @@
       "states": [],
       "dependents": [
         "post-megadropdown",
-        "post-popover"
+        "post-popover",
+        "post-side-navigation"
       ],
       "dependencies": [
         "post-icon"
@@ -1377,6 +1374,9 @@
         ],
         "post-popover": [
           "post-closebutton"
+        ],
+        "post-side-navigation": [
+          "post-closebutton"
         ]
       }
     },
@@ -1516,15 +1516,15 @@
           "mutable": false,
           "attr": "for",
           "reflectToAttr": true,
-          "docs": "Link the trigger to a post-collapsible with this id",
+          "docs": "Link the trigger to a post-collapsible by its ID.\nIf omitted, a post-collapsible nested directly inside this element is used instead.",
           "docsTags": [],
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": false,
-          "required": true,
+          "optional": true,
+          "required": false,
           "getter": false,
           "setter": false
         }
@@ -4447,7 +4447,13 @@
           "attr": "page",
           "reflectToAttr": false,
           "docs": "The current active page number.\n\n**If not specified, defaults to the first page.**",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "1"
+            }
+          ],
+          "default": "1",
           "values": [
             {
               "type": "number"
@@ -5417,6 +5423,108 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/post-progressbar/post-progressbar.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-progressbar",
+      "readme": "# post-progressbar\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "Describes how much work the task indicated by the progress element requires.\nMust be a valid floating point number greater than min.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "100"
+            }
+          ],
+          "default": "100",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "The minimum value of the progress bar.\nMust be a valid floating point number less than max.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "0"
+            }
+          ],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "Specifies how much of the task has been completed.\nMust be a valid floating point number between min and max.\nIf there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/post-rating/post-rating.tsx",
       "encapsulation": "shadow",
@@ -5583,6 +5691,228 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/post-side-navigation/post-side-navigation.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-side-navigation",
+      "readme": "# post-side-navigation\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Slot for the navigation content (must be a `<nav>` landmark with proper heading)"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "textClose",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "text-close",
+          "reflectToAttr": true,
+          "docs": "Accessible label for the close button shown in the mobile navigation dialog.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "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 navigation programmatically.\nNo-op on desktop.",
+          "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 navigation programmatically.\nNo-op on desktop.",
+          "docsTags": []
+        },
+        {
+          "name": "toggle",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "toggle() => Promise<void>",
+          "parameters": [],
+          "docs": "Toggles the navigation programmatically.\nNo-op on desktop.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "postToggle",
+          "detail": "boolean",
+          "bubbles": true,
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "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.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Slot for the navigation content (must be a `<nav>` landmark with proper heading)"
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [
+        "post-closebutton"
+      ],
+      "dependencyGraph": {
+        "post-side-navigation": [
+          "post-closebutton"
+        ],
+        "post-closebutton": [
+          "post-icon"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/post-side-navigation-trigger/post-side-navigation-trigger.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-side-navigation-trigger",
+      "readme": "# post-side-navigation-trigger\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Slot for the `<button>` that toggles the navigation."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "for",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "for",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "update",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "update() => Promise<void>",
+          "parameters": [],
+          "docs": "Manually update the trigger's ARIA attributes.",
+          "docsTags": []
+        }
+      ],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Slot for the `<button>` that toggles the navigation."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/post-stepper/post-stepper.tsx",
       "encapsulation": "shadow",
@@ -6499,7 +6829,7 @@
       "path": "src/components/post-breadcrumb-item/variants.ts"
     },
     "src/components/post-closebutton/types.ts::ButtonType": {
-      "declaration": "\"button\" | \"submit\" | \"reset\"",
+      "declaration": "\"button\" | \"reset\"",
       "docstring": "",
       "path": "src/components/post-closebutton/types.ts"
     },

package/dist/esm/create-validator-decorator-BNkS_yAb.js

@@ -0,0 +1,218 @@
+import { a as getElement } from './index-BGeKgZqi.js';
+
+const EMPTY_VALUES = [undefined, null, '', Number.NaN];
+function isValueEmpty(value) {
+    return EMPTY_VALUES.some(v => Object.is(v, value));
+}
+
+/** Tracks prototypes whose `componentDidLoad` lifecycle has already been wrapped. */
+const patchedTargets = new WeakSet();
+/** Tracks component instances that already completed the first load cycle. */
+const loadedInstances = new WeakSet();
+/** Stores validators per component prototype and property name. */
+const validatorsByTarget = new WeakMap();
+/** Stores all properties that use a validator decorator for each component prototype. */
+const decoratedPropertiesByTarget = new WeakMap();
+/** Stores per-instance property values captured by dynamically created accessors. */
+const propertyValuesByInstance = new WeakMap();
+/** Stores dependency relationships per prototype: dependencyProp -> Set<dependentProp>. */
+const dependenciesByTarget = new WeakMap();
+/**
+ * Returns the value for a key in a {@link WeakMap} and lazily creates it when missing.
+ *
+ * @template K WeakMap key type.
+ * @template T WeakMap value type.
+ * @param map WeakMap used as storage.
+ * @param key Object key used to retrieve or initialize the value.
+ * @param factory Factory creating the value when no entry exists for the key.
+ * @returns Existing or newly created value associated with the key.
+ */
+function getOrCreate(map, key, factory) {
+    let value = map.get(key);
+    if (!value) {
+        value = factory();
+        map.set(key, value);
+    }
+    return value;
+}
+/**
+ * Returns the mutable validator list registered for a property on a component prototype.
+ *
+ * @param target Component prototype where decorators were applied.
+ * @param property Decorated property name.
+ * @returns Validator list for the property.
+ */
+function getValidators(target, property) {
+    const validatorsByProperty = getOrCreate(validatorsByTarget, target, () => new Map());
+    return getOrCreate(validatorsByProperty, property, () => []);
+}
+/**
+ * Returns all property names decorated with validator decorators for a prototype.
+ *
+ * @param target Component prototype where decorators were applied.
+ * @returns Set of decorated property names.
+ */
+function getDecoratedProperties(target) {
+    return getOrCreate(decoratedPropertiesByTarget, target, () => new Set());
+}
+/**
+ * Returns the map containing tracked property values for a component instance.
+ *
+ * @param instance Component instance.
+ * @returns Map keyed by property name with last assigned values.
+ */
+function getValuesByProperty(instance) {
+    return getOrCreate(propertyValuesByInstance, instance, () => new Map());
+}
+/**
+ * Registers that `dependentProp` should be re-validated when `dependencyProp` changes.
+ * Ensures the dependency property has an accessor so its setter can trigger dependents.
+ */
+function registerDependency(target, dependencyProp, dependentProp) {
+    // Ensure dependency has an accessor so its setter can run dependent validators
+    createPropertyAccessor(target, dependencyProp);
+    const depsByProp = getOrCreate(dependenciesByTarget, target, () => new Map());
+    const dependents = getOrCreate(depsByProp, dependencyProp, () => new Set());
+    dependents.add(dependentProp);
+}
+/**
+ * Defines an accessor for a decorated property that stores values per instance and
+ * triggers validation after the component first loads.
+ *
+ * Accessor creation is skipped when a getter already exists to avoid overriding
+ * component-defined accessors.
+ *
+ * @param target Component prototype receiving the accessor.
+ * @param property Decorated property name.
+ */
+function createPropertyAccessor(target, property) {
+    const descriptor = Object.getOwnPropertyDescriptor(target, property);
+    if (descriptor && descriptor.get)
+        return;
+    Object.defineProperty(target, property, {
+        get() {
+            return getValuesByProperty(this).get(property);
+        },
+        set(newValue) {
+            getValuesByProperty(this).set(property, newValue);
+            if (loadedInstances.has(this)) {
+                runValidators(this, property);
+                // Run validators for any properties that depend on this property.
+                const proto = Object.getPrototypeOf(this);
+                const depsByProp = dependenciesByTarget.get(proto);
+                if (depsByProp) {
+                    const dependents = depsByProp.get(property);
+                    if (dependents) {
+                        for (const dependent of dependents) {
+                            runValidators(this, dependent);
+                        }
+                    }
+                }
+            }
+        },
+        enumerable: true,
+        configurable: true,
+    });
+}
+/**
+ * Wraps `componentDidLoad` once per prototype to execute validators on initial render.
+ *
+ * Existing `componentDidLoad` behavior is preserved and called after validation.
+ *
+ * @param target Component prototype to patch.
+ */
+function patchComponentDidLoad(target) {
+    if (patchedTargets.has(target))
+        return;
+    patchedTargets.add(target);
+    const original = 'componentDidLoad' in target && typeof target.componentDidLoad === 'function'
+        ? target.componentDidLoad
+        : undefined;
+    Object.defineProperty(target, 'componentDidLoad', {
+        writable: true,
+        configurable: true,
+        value: function (...args) {
+            loadedInstances.add(this);
+            const decoratedProperties = getDecoratedProperties(Object.getPrototypeOf(this));
+            for (const property of decoratedProperties) {
+                runValidators(this, property);
+            }
+            if (original) {
+                return original.apply(this, args);
+            }
+        },
+    });
+}
+/**
+ * Executes all validators for a property in ascending priority order.
+ *
+ * Validation is skipped for empty values unless a validator explicitly opts in via
+ * `validateEmptyValues`. Execution stops when a blocking validator fails.
+ *
+ * @param component Component instance.
+ * @param property Property name to validate.
+ */
+function runValidators(component, property) {
+    const prototype = Object.getPrototypeOf(component);
+    const validatorsByProperty = validatorsByTarget.get(prototype);
+    if (!validatorsByProperty)
+        return;
+    const validators = validatorsByProperty.get(property);
+    if (!validators || validators.length === 0)
+        return;
+    const sortedValidators = [...validators].sort((a, b) => a.priority - b.priority);
+    const value = component[property];
+    const valueIsEmpty = isValueEmpty(value);
+    for (const validator of sortedValidators) {
+        if (valueIsEmpty && !validator.validateEmptyValues) {
+            continue;
+        }
+        const passed = validator.run(component, property);
+        if (!passed && validator.blocking)
+            break;
+    }
+}
+/**
+ * Creates a property decorator that registers a validator for a component property.
+ *
+ * The returned decorator ensures property access is intercepted, initial-load
+ * validation is enabled, and the provided validator is stored for execution.
+ *
+ * @param validator Validator definition to register.
+ * @returns Property decorator compatible with TypeScript decorator syntax.
+ */
+function createValidatorDecorator(validator) {
+    return function (target, property) {
+        createPropertyAccessor(target, property);
+        patchComponentDidLoad(target);
+        getDecoratedProperties(target).add(property);
+        getValidators(target, property).push(validator);
+    };
+}
+/**
+ * Builds a validation context for a decorated component property.
+ *
+ * The returned context includes:
+ * - `value`: current property value.
+ * - `showError(constraint)`: helper that logs a consistent error format and includes
+ *   the host element for easier debugging in browser consoles.
+ *
+ * Message format: `[componentName] Property "property" <constraint>. Received: <value>.`
+ *
+ * @param component Component instance containing the validated property.
+ * @param property Property name being validated.
+ * @returns Validation context used by individual validator implementations.
+ */
+function getValidationContext(component, property) {
+    const host = getElement(component);
+    const componentName = host.localName;
+    const value = component[property];
+    return {
+        value,
+        showError(constraint) {
+            console.error(`[${componentName}] Property "${String(property)}" ${constraint}. Received: ${JSON.stringify(value)}.`, host);
+        },
+    };
+}
+
+export { createValidatorDecorator as c, getValidationContext as g, isValueEmpty as i, registerDependency as r };