@swisspost/design-system-components 10.0.0-next.46 → 10.0.0-next.48

package/dist/components/react/post-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostTooltip extends Components.PostTooltip, HTMLElement {}
+export const PostTooltip: {
+    prototype: PostTooltip;
+    new (): PostTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/react/post-tooltip.js

@@ -0,0 +1,115 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+import { d as defineCustomElement$2, a as PLACEMENT_TYPES } from './p-Ce7jgYmK.js';
+
+const postTooltipCss = ":host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:280px;min-height:32px;word-wrap:break-word;white-space:normal}";
+
+const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Defines the position of the tooltip relative to its trigger.
+         * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+         */
+        this.placement = 'top';
+        /**
+         * Whether or not to display a little pointer arrow
+         */
+        this.arrow = false;
+        /**
+         * Indicates the open state of the tooltip
+         */
+        this.open = false;
+    }
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
+    }
+    componentWillLoad() {
+        this.validatePlacement();
+    }
+    componentDidLoad() {
+        if (!this.host.id) {
+            console.error(
+            /*prettier-ignore*/
+            'No id set: <post-tooltip> must have an id, linking it to it\'s target element with a <post-tooltip-trigger> element.');
+        }
+    }
+    /**
+     * Programmatically display the tooltip.
+     * @param target An element where the tooltip should be shown
+     */
+    async show(target) {
+        if (this.open)
+            return;
+        this.popoverRef.show(target);
+    }
+    /**
+     * Programmatically hide this tooltip.
+     */
+    async hide() {
+        this.popoverRef.hide();
+    }
+    /**
+     * Toggle tooltip display.
+     * @param target An element where the tooltip should be shown
+     * @param [force] Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.popoverRef.toggle(target, force);
+    }
+    /**
+     * Set the open state based on the toggle event.
+     * @param e Popovercontainer toggle event
+     */
+    handleToggle(e) {
+        this.open = e.detail;
+    }
+    render() {
+        const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
+        return (h(Host, { key: 'c5f293812e33520ea5a2c9224e93fe5e5e41cbe0', "data-version": version }, h("post-popovercontainer", { key: '7ec57e1a2315d95e7cb696cf6d2d1a1d8ae77257', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '79c91307707c56345acb136a45acdae859d54c2b' }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "placement": ["validatePlacement"]
+    }; }
+    static get style() { return postTooltipCss; }
+}, [1, "post-tooltip", {
+        "placement": [1],
+        "arrow": [4],
+        "animation": [1],
+        "open": [1540],
+        "show": [64],
+        "hide": [64],
+        "toggle": [64]
+    }, undefined, {
+        "placement": ["validatePlacement"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-tooltip", "post-popovercontainer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTooltip$1);
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostTooltip = PostTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostTooltip, defineCustomElement };

package/dist/components/switch-variants.js

@@ -0,0 +1,3 @@
+const SWITCH_VARIANTS = ['list', 'menu'];
+
+export { SWITCH_VARIANTS as S };

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-08-25T12:55:51",
+  "timestamp": "2025-09-15T11:02:00",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.0",
@@ -215,15 +215,15 @@
       "docsTags": [
         {
           "name": "part",
-          "text": "button - The pseudo-element, used to override styles on the components internal header `button` element."
+          "text": "button - The element that toggles the accordion item (header button)."
         },
         {
           "name": "part",
-          "text": "body - The pseudo-element, used to override styles on the components internal `body` element."
+          "text": "body - The container element that holds the accordion item's content."
         },
         {
           "name": "slot",
-          "text": "logo - Slot for the placing a logo before the header."
+          "text": "logo - Slot for placing a logo in the accordion item’s header, before the content."
         },
         {
           "name": "slot",
@@ -378,7 +378,7 @@
         },
         {
           "name": "logo",
-          "docs": "Slot for the placing a logo before the header."
+          "docs": "Slot for placing a logo in the accordion item’s header, before the content."
         }
       ],
       "parts": [
@@ -388,11 +388,11 @@
         },
         {
           "name": "body",
-          "docs": "The pseudo-element, used to override styles on the components internal `body` element."
+          "docs": "The container element that holds the accordion item's content."
         },
         {
           "name": "button",
-          "docs": "The pseudo-element, used to override styles on the components internal header `button` element."
+          "docs": "The element that toggles the accordion item (header button)."
         }
       ],
       "dependents": [
@@ -508,7 +508,7 @@
           "mutable": false,
           "attr": "userid",
           "reflectToAttr": false,
-          "docs": "Defines the company internal userId.<div className=\"mb-4 banner banner-warning banner-sm\">Can only be used on post.ch domains!</div>",
+          "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": [
             {
@@ -600,6 +600,10 @@
           "name": "slot",
           "text": "actions - Slot for placing custom actions (buttons, links, etc.) within the banner."
         },
+        {
+          "name": "slot",
+          "text": "close-button - Slot for placing a `post-closebutton` component to make the banner dismissible."
+        },
         {
           "name": "slot",
           "text": "default - Slot for placing the main content/message of the banner."
@@ -607,58 +611,6 @@
       ],
       "usage": {},
       "props": [
-        {
-          "name": "dismissLabel",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "dismiss-label",
-          "reflectToAttr": false,
-          "docs": "The label to use for the close button of a dismissible banner.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "dismissible",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "dismissible",
-          "reflectToAttr": false,
-          "docs": "If `true`, a close button (×) is displayed and the banner can be dismissed by the user.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "false"
-            }
-          ],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "type",
           "type": "\"error\" | \"info\" | \"success\" | \"warning\"",
@@ -675,7 +627,7 @@
           },
           "mutable": false,
           "attr": "type",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The type of the banner.",
           "docsTags": [
             {
@@ -748,13 +700,23 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "click",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [],
       "slots": [
         {
           "name": "actions",
           "docs": "Slot for placing custom actions (buttons, links, etc.) within the banner."
         },
+        {
+          "name": "close-button",
+          "docs": "Slot for placing a `post-closebutton` component to make the banner dismissible."
+        },
         {
           "name": "default",
           "docs": "Slot for placing the main content/message of the banner."
@@ -946,11 +908,11 @@
         },
         {
           "name": "slot",
-          "text": "default - Content to place into the `default` slot.<p>Markup accepted: <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt\">block content</a>.<p className=\"banner banner-sm banner-warning\">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href=\"https://accessibilityinsights.io/info-examples/web/nested-interactive/\">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>"
+          "text": "default - Content to place into the `default` slot.<p>Markup accepted: <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt\">block content</a>.<post-banner type=\"warning\" data-size=\"sm\"><p>Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href=\"https://accessibilityinsights.io/info-examples/web/nested-interactive/\">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p></post-banner>"
         },
         {
           "name": "slot",
-          "text": "icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content\">inline content</a>.<p className=\"banner banner-sm banner-info\">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>"
+          "text": "icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content\">inline content</a>.<post-banner data-size=\"sm\"><p>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p></post-banner>"
         }
       ],
       "usage": {},
@@ -1047,7 +1009,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "Defines the icon `name` inside the card.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>",
+          "docs": "Defines the icon `name` inside the card.\n<post-banner data-size=\"sm\"><p>If not set the icon will not show up.</p></post-banner>",
           "docsTags": [],
           "values": [
             {
@@ -1093,7 +1055,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "Defines the `name` attribute of the control.\n<span className=\"mb-4 banner banner-sm banner-info\">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>",
+          "docs": "Defines the `name` attribute of the control.\n<post-banner data-size=\"sm\"><p>This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</p></post-banner>\n<post-banner data-size=\"sm\"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>",
           "docsTags": [],
           "values": [
             {
@@ -1167,7 +1129,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "Defines the `value` attribute of the control. <span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>",
+          "docs": "Defines the `value` attribute of the control. <post-banner data-size=\"sm\"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>",
           "docsTags": [],
           "values": [
             {
@@ -1238,7 +1200,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<span className=\"banner banner-sm banner-info\">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>",
+          "docs": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<post-banner data-size=\"sm\"><p>If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</p></post-banner>",
           "docsTags": []
         },
         {
@@ -1261,11 +1223,11 @@
       "slots": [
         {
           "name": "default",
-          "docs": "Content to place into the `default` slot.<p>Markup accepted: <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt\">block content</a>.<p className=\"banner banner-sm banner-warning\">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href=\"https://accessibilityinsights.io/info-examples/web/nested-interactive/\">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>"
+          "docs": "Content to place into the `default` slot.<p>Markup accepted: <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt\">block content</a>.<post-banner type=\"warning\" data-size=\"sm\"><p>Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href=\"https://accessibilityinsights.io/info-examples/web/nested-interactive/\">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p></post-banner>"
         },
         {
           "name": "icon",
-          "docs": "To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content\">inline content</a>.<p className=\"banner banner-sm banner-info\">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>"
+          "docs": "To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content\">inline content</a>.<post-banner data-size=\"sm\"><p>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p></post-banner>"
         }
       ],
       "parts": [],
@@ -2776,7 +2738,12 @@
       "tag": "post-menu",
       "readme": "# post-menu\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "part",
+          "text": "menu - The container element that holds the list of menu items."
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -2987,7 +2954,7 @@
       "parts": [
         {
           "name": "menu",
-          "docs": ""
+          "docs": "The container element that holds the list of menu items."
         }
       ],
       "dependents": [
@@ -4069,11 +4036,11 @@
         },
         {
           "name": "part",
-          "text": "tabs - Add custom styles for the tab header container."
+          "text": "tabs - The container element that holds the set of tabs."
         },
         {
           "name": "part",
-          "text": "content - Add custom styles for the tab panel container."
+          "text": "content - The container element that displays the content of the currently active tab."
         }
       ],
       "usage": {},
@@ -4207,11 +4174,11 @@
       "parts": [
         {
           "name": "content",
-          "docs": "Add custom styles for the tab panel container."
+          "docs": "The container element that displays the content of the currently active tab."
         },
         {
           "name": "tabs",
-          "docs": "Add custom styles for the tab header container."
+          "docs": "The container element that holds the set of tabs."
         }
       ],
       "dependents": [],

package/dist/esm/event-from-kraHE1r3.js

@@ -0,0 +1,105 @@
+/**
+ * Validates if an event should be processed based on target and nesting criteria
+ * @param event - The event to validate
+ * @param tag - The expected local name of the event target
+ * @param host - The host element for nested component checking
+ * @param ignoreNestedComponents - Whether to ignore events from nested components
+ * @returns true if the event should be processed, false otherwise
+ */
+function shouldProcessEvent(event, tag, host, ignoreNestedComponents) {
+    if (!(event instanceof Event && event.target instanceof HTMLElement))
+        return false;
+    const eventTarget = event.target;
+    if (eventTarget.localName !== tag)
+        return false;
+    if (ignoreNestedComponents) {
+        // Find the closest parent with the same tag as the host
+        const closestParentWithSameTag = findClosestParentWithTag(eventTarget, host.localName);
+        if (closestParentWithSameTag !== host)
+            return false;
+    }
+    return true;
+}
+/**
+ * Decorator that guards event handlers to only execute when the event meets certain criteria.
+ * @param tag - The local name of the element that should be the target of the event
+ * @param option - Configuration options for the event guard
+ * @param option.ignoreNestedComponents - Whether to ignore events from nested components
+ */
+function EventFrom(tag, option = { ignoreNestedComponents: true }) {
+    return function (target, propertyKey, descriptor) {
+        if (descriptor) {
+            const originalMethod = descriptor.value;
+            descriptor.value = function (event) {
+                if (!shouldProcessEvent(event, tag, this.host, option.ignoreNestedComponents)) {
+                    return;
+                }
+                return originalMethod.call(this, event);
+            };
+        }
+        else {
+            // Creates a hidden storage property for the original method using a
+            // modified key format (__[property]_original) to avoid naming conflicts
+            const privateKey = `__${propertyKey}_original`;
+            // Create hidden storage for original method
+            Object.defineProperty(target, privateKey, {
+                writable: true,
+                configurable: true
+            });
+            // Replace property with getter/setter
+            Object.defineProperty(target, propertyKey, {
+                // Getter returns original method
+                get() {
+                    return this[privateKey];
+                },
+                // Setter wraps original method with extra code
+                set(originalFunction) {
+                    if (typeof originalFunction === 'function') {
+                        // Store original and add new behavior
+                        this[privateKey] = (event) => {
+                            if (!shouldProcessEvent(event, tag, this.host, option.ignoreNestedComponents)) {
+                                return;
+                            }
+                            return originalFunction.call(this, event);
+                        };
+                    }
+                    else {
+                        this[privateKey] = originalFunction;
+                    }
+                },
+                configurable: true,
+                enumerable: true
+            });
+        }
+    };
+}
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) to find the closest ancestor
+ * that matches the specified tag name.
+ * @param element - The starting element
+ * @param tagName - The tag name to match (e.g., 'post-accordion')
+ * @returns The closest matching ancestor or null if none found
+ */
+function findClosestParentWithTag(element, tagName) {
+    let current = element;
+    while (current) {
+        if (current.localName === tagName) {
+            return current;
+        }
+        // Check regular parent first
+        if (current.parentElement) {
+            current = current.parentElement;
+        }
+        // If no parentElement, check if we're in a shadow root
+        else if (current.parentNode instanceof ShadowRoot) {
+            current = current.parentNode.host;
+        }
+        // No more parents to check
+        else {
+            current = null;
+        }
+    }
+    return null;
+}
+
+export { EventFrom as E };

package/dist/esm/index-C8a0ddDa.js

@@ -94,14 +94,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'post-avatar':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './post-avatar.entry.js').then(processMod, consoleError);
-                case 'post-back-to-top':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './post-back-to-top.entry.js').then(processMod, consoleError);
                 case 'post-card-control':
                     return import(
                       /* webpackMode: "lazy" */
@@ -130,6 +122,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './post-tooltip.entry.js').then(processMod, consoleError);
+                case 'post-avatar':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-avatar.entry.js').then(processMod, consoleError);
+                case 'post-back-to-top':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-back-to-top.entry.js').then(processMod, consoleError);
                 case 'post-banner':
                     return import(
                       /* webpackMode: "lazy" */

package/dist/esm/index-VmK3ABCB.js

@@ -0,0 +1,88 @@
+const EMPTY_VALUES = [undefined, null, '', NaN];
+
+function isValueEmpty(value) {
+    return EMPTY_VALUES.some(v => v === value);
+}
+
+function requiredAnd(check) {
+    return (component, prop, ...extraArgs) => {
+        const componentName = component.host.localName;
+        const value = component[prop];
+        const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is not defined.`;
+        if (isValueEmpty(value)) {
+            throw new Error(message);
+        }
+        else {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
+function checkOneOf(component, prop, possibleValues) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    if (!possibleValues.includes(value)) {
+        console.error(message);
+    }
+}
+
+function checkPattern(component, prop, pattern) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must follow the format \`${pattern}\`.`;
+    if (typeof value !== 'string' || !pattern.test(value)) {
+        console.error(message);
+    }
+}
+
+function checkType(component, prop, type) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const typeIsArray = type === 'array';
+    const valueIsArray = Array.isArray(value);
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`${type}\`.`;
+    if (typeIsArray || valueIsArray) {
+        if (valueIsArray !== typeIsArray) {
+            console.error(message);
+        }
+    }
+    else if (typeof value !== type) {
+        console.error(message);
+    }
+}
+
+function checkUrl(component, prop) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
+    if (typeof value !== 'string' && !(value instanceof URL)) {
+        console.error(message);
+        return;
+    }
+    try {
+        new URL(value, 'https://www.post.ch');
+    }
+    catch {
+        console.error(message);
+    }
+}
+
+function emptyOr(check) {
+    return (component, prop, ...extraArgs) => {
+        const value = component[prop];
+        if (!isValueEmpty(value)) {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
+const checkEmptyOrOneOf = emptyOr(checkOneOf);
+const checkEmptyOrPattern = emptyOr(checkPattern);
+const checkEmptyOrType = emptyOr(checkType);
+const checkEmptyOrUrl = emptyOr(checkUrl);
+const checkRequiredAndOneOf = requiredAnd(checkOneOf);
+const checkRequiredAndType = requiredAnd(checkType);
+const checkRequiredAndUrl = requiredAnd(checkUrl);
+
+export { checkEmptyOrType as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkEmptyOrPattern as e, checkRequiredAndUrl as f, checkEmptyOrUrl as g };