@swisspost/design-system-components 9.0.0-next.2 → 9.0.0-next.21

package/dist/collection/components/post-togglebutton/post-togglebutton.js

@@ -0,0 +1,75 @@
+import { Host, h } from "@stencil/core";
+import { version } from "../../../../package";
+import { checkType } from "../../utils/index";
+/**
+ * @slot default - Slot for the content of the button.
+ */
+export class PostTogglebutton {
+    constructor() {
+        this.toggled = false;
+    }
+    host;
+    validateToggled() {
+        checkType(this, 'toggled', 'boolean');
+    }
+    componentWillLoad() {
+        this.validateToggled();
+        // add event listener to not override listener that might be set on the host
+        this.host.addEventListener('click', () => this.handleClick());
+        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
+    }
+    handleClick = () => {
+        this.toggled = !this.toggled;
+    };
+    handleKeydown = (event) => {
+        // perform a click when enter or spaced are pressed to mimic the button behavior
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault(); // prevents the page from scrolling when space is pressed
+            this.host.click();
+        }
+    };
+    render() {
+        return (h(Host, { key: '3a1429a9b67b8cfafae184fe0d060ee3a04974e0', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9ab1537574423740fc335fde732c699698acac25' })));
+    }
+    static get is() { return "post-togglebutton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-togglebutton.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-togglebutton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "toggled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the button is in the \"on\" state, otherwise it is in the \"off\" state."
+                },
+                "attribute": "toggled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "toggled",
+                "methodName": "validateToggled"
+            }];
+    }
+}

package/dist/collection/components/post-tooltip/post-tooltip.css

@@ -1 +1 @@
-:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51}post-popovercontainer{padding:.25rem .5rem;max-width:13.5rem;min-height:1rem}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}
+post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer>div{padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:calc(224px - var(--post-core-dimension-8));min-height:var(--post-core-dimension-16)}

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

@@ -3,7 +3,7 @@ import { version } from "../../../../package";
 import isFocusable from "ally.js/is/focusable";
 import "long-press-event";
 import { getAttributeObserver } from "../../utils/attribute-observer";
-import { checkEmptyOrType, timeout } from "../../utils/index";
+import { checkEmptyOrType } from "../../utils/index";
 const OPEN_DELAY = 650; // matches HTML title delay
 /**
  * @slot default - Slot for the content of the tooltip.
@@ -15,6 +15,8 @@ let tooltipInstances = 0;
 let hideTooltipTimeout = null;
 const tooltipTargetAttribute = 'data-tooltip-target';
 const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
+let globalCurrentTarget;
+let tooltipTimeout = null;
 /**
  * Global event listener to show tooltips. This is globalized so that triggers that are rendered
  * async will still work without the need to set listeners on the element itself
@@ -27,15 +29,18 @@ const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
  */
 const globalInterestHandler = (e) => {
     const targetElement = e.target.closest(tooltipTargetAttributeSelector);
-    if (!targetElement || !('getAttribute' in targetElement))
+    globalCurrentTarget = targetElement;
+    if (!targetElement || !('getAttribute' in targetElement)) {
+        clearTimeout(tooltipTimeout);
         return;
+    }
     const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
     if (!tooltipTarget || tooltipTarget === '')
         return;
     const tooltip = document.getElementById(tooltipTarget);
     // Determine if the tooltip was triggered by a focus event
     const triggeredByFocus = e.type === 'focusin';
-    void (tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(targetElement, triggeredByFocus));
+    void tooltip?.show(targetElement, triggeredByFocus);
     if (hideTooltipTimeout) {
         window.clearTimeout(hideTooltipTimeout);
         hideTooltipTimeout = null;
@@ -76,7 +81,7 @@ const patchAccessibilityFeatures = (trigger) => {
     const describedBy = trigger.getAttribute('aria-describedby');
     const id = trigger.getAttribute(tooltipTargetAttribute);
     // Add tooltip to aria-describedby
-    if (!(describedBy === null || describedBy === void 0 ? void 0 : describedBy.includes(id))) {
+    if (!describedBy?.includes(id)) {
         const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
         trigger.setAttribute('aria-describedby', newDescribedBy);
     }
@@ -89,13 +94,15 @@ const patchAccessibilityFeatures = (trigger) => {
 const triggerObserver = getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
 export class PostTooltip {
     constructor() {
-        this.wasOpenedByFocus = false;
         this.placement = 'top';
         this.arrow = true;
         this.delayed = false;
     }
+    popoverRef;
+    wasOpenedByFocus = false;
+    host;
     validateDelayed() {
-        checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
+        checkEmptyOrType(this, 'delayed', 'boolean');
     }
     connectedCallback() {
         this.validateDelayed();
@@ -152,18 +159,29 @@ export class PostTooltip {
      * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
      */
     async show(target, triggeredByFocus = false) {
-        if (this.delayed)
-            await timeout(OPEN_DELAY);
-        // Determine if the tooltip was opened by a focus event
-        this.wasOpenedByFocus = triggeredByFocus;
-        // Disable pointer events if triggered by focus, otherwise enable them
-        if (this.wasOpenedByFocus) {
-            this.host.style.pointerEvents = 'none';
+        const showTooltip = () => {
+            // If focus or pointer event is not on the button anymore, don't show the tooltip
+            if (globalCurrentTarget !== target)
+                return;
+            // Determine if the tooltip was opened by a focus event
+            this.wasOpenedByFocus = triggeredByFocus;
+            // Disable pointer events if triggered by focus, otherwise enable them
+            if (this.wasOpenedByFocus) {
+                this.host.style.pointerEvents = 'none';
+            }
+            else {
+                this.host.style.pointerEvents = 'auto';
+            }
+            this.popoverRef.show(target);
+        };
+        if (this.delayed) {
+            tooltipTimeout = setTimeout(() => {
+                showTooltip();
+            }, OPEN_DELAY);
         }
         else {
-            this.host.style.pointerEvents = 'auto';
+            showTooltip();
         }
-        this.popoverRef.show(target);
     }
     /**
      * Programmatically hide this tooltip
@@ -198,7 +216,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '6d5e454da6fb46fb4446d8ed1deb8c6a9f2f2e0f', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '7b626cd4699e4178fbd8506b88fae64c94ab1631', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'ae5721af16313dc3737947d2ae130e0514ef2dd8' }))));
+        return (h(Host, { key: '89b0e64fd5fde4c21d9c1eb624facff38b287e4a', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '8006874c12a2eebe39682a09db677e8b315dd6bb', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'cf3bd12703885fe886f1703038437b59a4d79fd3' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -224,7 +242,7 @@ export class PostTooltip {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.8/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.13/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
                         }
                     }
                 },

package/dist/collection/index.js

@@ -1,17 +1,36 @@
 // 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 { PostBreadcrumb } from './components/post-breadcrumb/post-breadcrumb';
+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 { PostTooltip } from './components/post-tooltip/post-tooltip';
 export { PostTag } from './components/post-tag/post-tag';
+export { PostTogglebutton } from './components/post-togglebutton/post-togglebutton';
+export { PostTooltip } from './components/post-tooltip/post-tooltip';

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

@@ -1,9 +1,9 @@
-export const getAttributeObserver = (attribute, handler) => {
+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 +17,7 @@ export const getAttributeObserver = (attribute, handler) => {
                 });
             }
         });
-    };
+    }
     // Initialize a mutation observer for patching accessibility features
     return new MutationObserver(observerHandler);
-};
+}

package/dist/collection/utils/breakpoints.js

@@ -0,0 +1,50 @@
+export class Breakpoint {
+    breakpointMap;
+    current = {
+        key: '',
+        name: '',
+    };
+    constructor() {
+        if (!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) {
+        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/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/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/attribute-observer.js

@@ -1,9 +1,9 @@
-const getAttributeObserver = (attribute, handler) => {
+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,9 +17,9 @@ const getAttributeObserver = (attribute, handler) => {
                 });
             }
         });
-    };
+    }
     // Initialize a mutation observer for patching accessibility features
     return new MutationObserver(observerHandler);
-};
+}
 
 export { getAttributeObserver as g };

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/debounce.js

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

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 };