@swisspost/design-system-components 9.0.1 → 10.0.0-next.38

package/dist/collection/index.js

@@ -1,18 +1,37 @@
 // Export every single component so it gets included in the dist output
 export { PostAccordion } from './components/post-accordion/post-accordion';
 export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
-export { PostAlert } from './components/post-alert/post-alert';
+export { PostAvatar } from './components/post-avatar/post-avatar';
+export { PostBackToTop } from './components/post-back-to-top/post-back-to-top';
+export { PostBanner } from './components/post-banner/post-banner';
+export { PostBreadcrumbs } from './components/post-breadcrumbs/post-breadcrumbs';
+export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
 export { PostCardControl } from './components/post-card-control/post-card-control';
+export { PostClosebutton } from './components/post-closebutton/post-closebutton';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
+export { PostFooter } from './components/post-footer/post-footer';
+export { PostHeader } from './components/post-header/post-header';
 export { PostIcon } from './components/post-icon/post-icon';
+export { PostLanguageOption } from './components/post-language-option/post-language-option';
+export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';
+export { PostLinkarea } from './components/post-linkarea/post-linkarea';
+export { PostList } from './components/post-list/post-list';
+export { PostListItem } from './components/post-list-item/post-list-item';
 export { PostLogo } from './components/post-logo/post-logo';
+export { PostMainnavigation } from './components/post-mainnavigation/post-mainnavigation';
+export { PostMegadropdown } from './components/post-megadropdown/post-megadropdown';
+export { PostMegadropdownTrigger } from './components/post-megadropdown-trigger/post-megadropdown-trigger';
+export { PostMenu } from './components/post-menu/post-menu';
+export { PostMenuItem } from './components/post-menu-item/post-menu-item';
+export { PostMenuTrigger } from './components/post-menu-trigger/post-menu-trigger';
 export { PostPopover } from './components/post-popover/post-popover';
 export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';
 export { PostRating } from './components/post-rating/post-rating';
 export { PostTabs } from './components/post-tabs/post-tabs';
 export { PostTabHeader } from './components/post-tab-header/post-tab-header';
 export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
+export { PostTag } from './components/post-tag/post-tag';
+export { PostTogglebutton } from './components/post-togglebutton/post-togglebutton';
 export { PostTooltip } from './components/post-tooltip/post-tooltip';
 export { PostTooltipTrigger } from './components/post-tooltip-trigger/post-tooltip-trigger';
-export { PostTag } from './components/post-tag/post-tag';

package/dist/collection/utils/attribute-observer.js

@@ -1,9 +1,10 @@
-export const getAttributeObserver = (attribute, handler) => {
+import { IS_BROWSER } from "./environment";
+export function getAttributeObserver(attribute, handler) {
     /**
      * Handle attribute changes and childList changes from the observer
      * @param {MutationRecord[]} mutationList
      */
-    const observerHandler = (mutationList) => {
+    function observerHandler(mutationList) {
         mutationList.forEach(mutation => {
             if (mutation.type === 'attributes' && mutation.attributeName === attribute) {
                 handler(mutation.target);
@@ -17,7 +18,7 @@ export const getAttributeObserver = (attribute, handler) => {
                 });
             }
         });
-    };
+    }
     // Initialize a mutation observer for patching accessibility features
-    return new MutationObserver(observerHandler);
-};
+    return IS_BROWSER ? new MutationObserver(observerHandler) : null;
+}

package/dist/collection/utils/breakpoints.js

@@ -0,0 +1,52 @@
+import { IS_BROWSER } from "./environment";
+export class Breakpoint {
+    constructor() {
+        this.current = {
+            key: '',
+            name: '',
+        };
+        if (IS_BROWSER && !this.breakpointMap) {
+            const keys = this.getStyles('--post-breakpoint-keys');
+            const names = this.getStyles('--post-breakpoint-names');
+            const widths = this.getStyles('--post-breakpoint-widths');
+            this.breakpointMap = widths
+                .map((width, i) => ({
+                minWidth: Number(width),
+                key: keys[i],
+                name: names[i],
+            }))
+                .reverse();
+            window.addEventListener('resize', () => this.updateHandler(), { passive: true });
+        }
+    }
+    getStyles(propertyName) {
+        const styles = getComputedStyle(document.documentElement);
+        return (styles
+            .getPropertyValue(propertyName)
+            ?.split(',')
+            .map(w => w.trim()) ?? []);
+    }
+    updateHandler(emitEvents = true) {
+        const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
+        if (this.current.key !== calculated.key) {
+            this.current.key = calculated.key;
+            if (emitEvents)
+                this.dispatchEvent('key');
+        }
+        if (this.current.name !== calculated.name) {
+            this.current.name = calculated.name;
+            if (emitEvents)
+                this.dispatchEvent('name');
+        }
+    }
+    dispatchEvent(type) {
+        if (IS_BROWSER) {
+            window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+        }
+    }
+    get(type) {
+        this.updateHandler(false);
+        return this.current[type];
+    }
+}
+export const breakpoint = new Breakpoint();

package/dist/collection/utils/component-on-ready.js

@@ -2,7 +2,7 @@
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
  * @see https://stenciljs.com/docs/api#componentonready
  */
-export const componentOnReady = (el) => {
+export function componentOnReady(el) {
     if (typeof el.componentOnReady === 'function') {
         return el.componentOnReady();
     }
@@ -11,10 +11,10 @@ export const componentOnReady = (el) => {
             resolve(el);
         }));
     }
-};
-const customOnReady = (callback) => {
+}
+function customOnReady(callback) {
     if (typeof requestAnimationFrame === 'function') {
         return requestAnimationFrame(callback);
     }
     return setTimeout(callback);
-};
+}

package/dist/collection/utils/debounce.js

@@ -1,8 +1,9 @@
 export function debounce(callback, timeout = 200) {
     let id;
     return (...args) => {
-        if (id)
+        if (id) {
             clearTimeout(id);
+        }
         id = setTimeout(callback, timeout, ...args);
     };
 }

package/dist/collection/utils/environment.js

@@ -0,0 +1,2 @@
+export const IS_SERVER = typeof window === 'undefined';
+export const IS_BROWSER = !IS_SERVER;

package/dist/collection/utils/event-guard.js

@@ -0,0 +1,43 @@
+export function eventGuard(host, event, options, callback) {
+    const target = event.target;
+    if (!target)
+        return;
+    if (target.localName === options.targetLocalName) {
+        if (!options.delegatorSelector || shadowClosest(target, options.delegatorSelector) === host) {
+            callback();
+        }
+    }
+}
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) starting from the given element
+ * to find and return the closest ancestor that matches the specified CSS selector.
+ * If no matching element is found, returns null.
+ *
+ * @param element - The starting element from which the search begins.
+ * @param selector - The CSS selector used to test each ancestor element.
+ * @returns The closest matching ancestor element or null if none is found.
+ */
+function shadowClosest(element, selector) {
+    let currentElement = element;
+    while (currentElement) {
+        if (currentElement.matches(selector)) {
+            return currentElement;
+        }
+        const parent = currentElement.parentElement;
+        if (parent) {
+            currentElement = parent;
+        }
+        else {
+            const parentNode = currentElement.parentNode;
+            // When no parentElement exists, check if the current element is inside a shadow DOM.
+            // If so, move up to the shadow host to continue the search outside the shadow boundary.
+            if (parentNode instanceof ShadowRoot) {
+                currentElement = parentNode.host;
+            }
+            else {
+                currentElement = null;
+            }
+        }
+    }
+    return null;
+}

package/dist/collection/utils/get-focusable-children.js

@@ -0,0 +1,33 @@
+const focusableSelector = `:where(${[
+    'button',
+    'input:not([type="hidden"])',
+    '[tabindex]',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    'a[href]',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    'area[href]',
+    'details > summary:first-of-type',
+].join(',')})`;
+const focusDisablingSelector = `:where(${[
+    '[inert]',
+    '[inert] *',
+    ':disabled',
+    'dialog:not([open]) *',
+    '[popover]:not(:popover-open) *',
+    'details:not([open]) > *:not(details > summary:first-of-type)',
+    'details:not([open]) > *:not(details > summary:first-of-type) *',
+    '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
+].join(',')})`;
+export function getFocusableChildren(element) {
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    const visibleFocusableChildren = Array.from(focusableChildren).filter(child => {
+        const style = window.getComputedStyle(child.parentElement);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return visibleFocusableChildren;
+}

package/dist/collection/utils/get-root.js

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

package/dist/collection/utils/index.js

@@ -1,7 +1,12 @@
+export * from './get-focusable-children';
+export * from './attribute-observer';
 export * from './component-on-ready';
 export * from './property-checkers';
+export * from './breakpoints';
 export * from './debounce';
+export * from './event-guard';
 export * from './get-root';
 export * from './is-motion-reduced';
 export * from './sass-export';
 export * from './timeout';
+export * from './environment';

package/dist/collection/utils/is-motion-reduced.js

@@ -1,3 +1,4 @@
+import { IS_BROWSER } from "./environment";
 export function isMotionReduced() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
 }

package/dist/collection/utils/property-checkers/check-non-empty.js

@@ -1,6 +1,10 @@
 import { EMPTY_VALUES } from "./constants";
-export function checkNonEmpty(value, error) {
+export function checkNonEmpty(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is required.`;
+    const message = customMessage || defaultMessage;
     if (EMPTY_VALUES.some(v => v === value)) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-one-of.js

@@ -1,4 +1,9 @@
-export function checkOneOf(value, possibleValues, error) {
-    if (!possibleValues.includes(value))
-        throw new Error(error);
+export function checkOneOf(component, prop, possibleValues, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    const message = customMessage || defaultMessage;
+    if (!possibleValues.includes(value)) {
+        throw new Error(message);
+    }
 }

package/dist/collection/utils/property-checkers/check-pattern.js

@@ -1,4 +1,9 @@
-export function checkPattern(value, pattern, errorMessage) {
-    if (typeof value !== 'string' || !pattern.test(value))
-        throw new Error(errorMessage);
+export function checkPattern(component, prop, pattern, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be follow the format \`${pattern}\`.`;
+    const message = customMessage || defaultMessage;
+    if (typeof value !== 'string' || !pattern.test(value)) {
+        throw new Error(message);
+    }
 }

package/dist/collection/utils/property-checkers/check-type.js

@@ -1,12 +1,17 @@
-export function checkType(value, type, error) {
+export function checkType(component, prop, type, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
     const typeIsArray = type === 'array';
     const valueIsArray = Array.isArray(value);
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`
+    ${type}\`.`;
+    const message = customMessage || defaultMessage;
     if (typeIsArray || valueIsArray) {
-        if (valueIsArray !== typeIsArray)
-            throw new Error(error);
+        if (valueIsArray !== typeIsArray) {
+            throw new Error(message);
+        }
     }
-    else {
-        if (typeof value !== type)
-            throw new Error(error);
+    else if (typeof value !== type) {
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-url.js

@@ -1,10 +1,15 @@
-export function checkUrl(value, error) {
-    if (typeof value !== 'string' && !(value instanceof URL))
-        throw new Error(error);
+export function checkUrl(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
+    const message = customMessage || defaultMessage;
+    if (typeof value !== 'string' && !(value instanceof URL)) {
+        throw new Error(message);
+    }
     try {
-        new URL(value);
+        new URL(value, 'https://www.post.ch');
     }
-    catch (e) {
-        throw new Error(error);
+    catch {
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/empty-or.js

@@ -1,8 +1,11 @@
 import { EMPTY_VALUES } from "./constants";
 export function emptyOr(check) {
     return (...args) => {
-        const value = args[0];
-        if (!EMPTY_VALUES.some(v => v === value))
+        const component = args[0];
+        const prop = args[1];
+        const value = component[prop];
+        if (!EMPTY_VALUES.some(v => v === value)) {
             check(...args);
+        }
     };
 }

package/dist/collection/utils/sass-export.js

@@ -2,11 +2,14 @@ export function parse(scss) {
     return Object.entries(scss).reduce((object, [path, value]) => {
         let output = object;
         path.split('_').forEach((key, i, values) => {
-            const pathKey = key;
-            const normalized = /^\[.*\]$/.test(value) ? JSON.parse(value) : value;
-            const pathValue = i >= values.length - 1 ? normalized : output[pathKey] || {};
-            output[pathKey] = pathValue;
-            output = output[pathKey];
+            const normalized = /^\[.*\]$/.test(value)
+                ? JSON.parse(value)
+                : value;
+            const pathValue = i >= values.length - 1 ? normalized : output[key] || {};
+            output[key] = pathValue;
+            if (i < values.length) {
+                output = output[key];
+            }
         });
         return object;
     }, {});

package/dist/components/breakpoints.js

@@ -0,0 +1,56 @@
+const IS_SERVER = typeof window === 'undefined';
+const IS_BROWSER = !IS_SERVER;
+
+class Breakpoint {
+    constructor() {
+        this.current = {
+            key: '',
+            name: '',
+        };
+        if (IS_BROWSER && !this.breakpointMap) {
+            const keys = this.getStyles('--post-breakpoint-keys');
+            const names = this.getStyles('--post-breakpoint-names');
+            const widths = this.getStyles('--post-breakpoint-widths');
+            this.breakpointMap = widths
+                .map((width, i) => ({
+                minWidth: Number(width),
+                key: keys[i],
+                name: names[i],
+            }))
+                .reverse();
+            window.addEventListener('resize', () => this.updateHandler(), { passive: true });
+        }
+    }
+    getStyles(propertyName) {
+        const styles = getComputedStyle(document.documentElement);
+        return (styles
+            .getPropertyValue(propertyName)
+            ?.split(',')
+            .map(w => w.trim()) ?? []);
+    }
+    updateHandler(emitEvents = true) {
+        const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
+        if (this.current.key !== calculated.key) {
+            this.current.key = calculated.key;
+            if (emitEvents)
+                this.dispatchEvent('key');
+        }
+        if (this.current.name !== calculated.name) {
+            this.current.name = calculated.name;
+            if (emitEvents)
+                this.dispatchEvent('name');
+        }
+    }
+    dispatchEvent(type) {
+        if (IS_BROWSER) {
+            window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+        }
+    }
+    get(type) {
+        this.updateHandler(false);
+        return this.current[type];
+    }
+}
+const breakpoint = new Breakpoint();
+
+export { IS_BROWSER as I, breakpoint as b };

package/dist/components/check-non-empty.js

@@ -1,8 +1,12 @@
 import { E as EMPTY_VALUES } from './constants.js';
 
-function checkNonEmpty(value, error) {
+function checkNonEmpty(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is required.`;
+    const message = customMessage || defaultMessage;
     if (EMPTY_VALUES.some(v => v === value)) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }
 

package/dist/components/check-one-of.js

@@ -1,6 +1,11 @@
-function checkOneOf(value, possibleValues, error) {
-    if (!possibleValues.includes(value))
-        throw new Error(error);
+function checkOneOf(component, prop, possibleValues, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    const message = customMessage || defaultMessage;
+    if (!possibleValues.includes(value)) {
+        throw new Error(message);
+    }
 }
 
 export { checkOneOf as c };

package/dist/components/check-type.js

@@ -1,13 +1,18 @@
-function checkType(value, type, error) {
+function checkType(component, prop, type, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
     const typeIsArray = type === 'array';
     const valueIsArray = Array.isArray(value);
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`
+    ${type}\`.`;
+    const message = customMessage || defaultMessage;
     if (typeIsArray || valueIsArray) {
-        if (valueIsArray !== typeIsArray)
-            throw new Error(error);
+        if (valueIsArray !== typeIsArray) {
+            throw new Error(message);
+        }
     }
-    else {
-        if (typeof value !== type)
-            throw new Error(error);
+    else if (typeof value !== type) {
+        throw new Error(message);
     }
 }
 

package/dist/components/event-guard.js

@@ -0,0 +1,45 @@
+function eventGuard(host, event, options, callback) {
+    const target = event.target;
+    if (!target)
+        return;
+    if (target.localName === options.targetLocalName) {
+        if (!options.delegatorSelector || shadowClosest(target, options.delegatorSelector) === host) {
+            callback();
+        }
+    }
+}
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) starting from the given element
+ * to find and return the closest ancestor that matches the specified CSS selector.
+ * If no matching element is found, returns null.
+ *
+ * @param element - The starting element from which the search begins.
+ * @param selector - The CSS selector used to test each ancestor element.
+ * @returns The closest matching ancestor element or null if none is found.
+ */
+function shadowClosest(element, selector) {
+    let currentElement = element;
+    while (currentElement) {
+        if (currentElement.matches(selector)) {
+            return currentElement;
+        }
+        const parent = currentElement.parentElement;
+        if (parent) {
+            currentElement = parent;
+        }
+        else {
+            const parentNode = currentElement.parentNode;
+            // When no parentElement exists, check if the current element is inside a shadow DOM.
+            // If so, move up to the shadow host to continue the search outside the shadow boundary.
+            if (parentNode instanceof ShadowRoot) {
+                currentElement = parentNode.host;
+            }
+            else {
+                currentElement = null;
+            }
+        }
+    }
+    return null;
+}
+
+export { eventGuard as e };

package/dist/components/fade.js

@@ -1,7 +1,11 @@
 const fadeDuration = 200;
 const fadedOutKeyframe = { opacity: '0' };
 const fadedInKeyframe = { opacity: '1' };
-const fadeIn = (el) => el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
-const fadeOut = (el) => el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
+function fadeIn(el) {
+    return el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
+}
+function fadeOut(el) {
+    return el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
+}
 
 export { fadeIn as a, fadeOut as f };

package/dist/components/get-focusable-children.js

@@ -0,0 +1,35 @@
+const focusableSelector = `:where(${[
+    'button',
+    'input:not([type="hidden"])',
+    '[tabindex]',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    'a[href]',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    'area[href]',
+    'details > summary:first-of-type',
+].join(',')})`;
+const focusDisablingSelector = `:where(${[
+    '[inert]',
+    '[inert] *',
+    ':disabled',
+    'dialog:not([open]) *',
+    '[popover]:not(:popover-open) *',
+    'details:not([open]) > *:not(details > summary:first-of-type)',
+    'details:not([open]) > *:not(details > summary:first-of-type) *',
+    '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
+].join(',')})`;
+function getFocusableChildren(element) {
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    const visibleFocusableChildren = Array.from(focusableChildren).filter(child => {
+        const style = window.getComputedStyle(child.parentElement);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return visibleFocusableChildren;
+}
+
+export { getFocusableChildren as g };

package/dist/components/get-root.js

@@ -0,0 +1,15 @@
+import { I as IS_BROWSER } from './breakpoints.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;
+    if (root instanceof Document || root instanceof ShadowRoot) {
+        return root;
+    }
+    throw new Error('Attempting to access root node before the element is attached to the document or shadow tree.');
+}
+
+export { getRoot as g };

package/dist/components/index.browser.js

@@ -0,0 +1,14 @@
+const urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+/* @ts-self-types="./index.d.ts" */
+let nanoid = (size = 21) => {
+  let id = '';
+  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
+  while (size--) {
+    id += urlAlphabet[bytes[size] & 63];
+  }
+  return id
+};
+
+export { nanoid as n };