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

package/loaders/post-popover.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { I as IS_BROWSER } from './breakpoints.js';
+import { P as PLACEMENT_TYPES, d as defineCustomElement$2 } from './post-popovercontainer2.js';
 import { v as version } from './package.js';
-import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
+import { I as IS_BROWSER } from './breakpoints.js';
+import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './index2.js';
 
 function getAttributeObserver(attribute, handler) {
     /**
@@ -50,6 +51,12 @@ const globalToggleHandler = (e) => {
     popover?.toggle(currentElement);
 };
 const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends HTMLElement {
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
+    }
+    validateCloseButtonCaption() {
+        checkRequiredAndType(this, 'closeButtonCaption', 'string');
+    }
     constructor() {
         super();
         this.__registerHost();
@@ -78,6 +85,8 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     componentDidLoad() {
+        this.validatePlacement();
+        this.validateCloseButtonCaption();
         this.popoverRef.addEventListener('beforetoggle', this.localBeforeToggleHandler);
     }
     disconnectedCallback() {
@@ -97,6 +106,7 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
      */
     async show(target) {
         this.popoverRef.show(target);
+        console.log(this.popoverRef);
         target.setAttribute('aria-expanded', 'true');
     }
     /**
@@ -127,9 +137,13 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
         trigger.setAttribute('aria-expanded', force ? 'false' : null);
     }
     render() {
-        return (h(Host, { key: '56056367e3d917d7a2b9f81073fb9be4966d6bf6', "data-version": version }, h("post-popovercontainer", { key: '303164b40db9d7568304b354ff065a564506221f', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'e9d93ab370c3915e61d955823a0ce5674b5a39ae', class: "popover-container" }, h("div", { key: '108db792f093ac81356eda9389dc2b0b0da363e2', class: "popover-content" }, h("slot", { key: '88694578a319978f747cfa7904294199d06edb21' })), h("button", { key: '3cf65346d57b9985bfe97d8e0cd46dc68951168b', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '6b2d660aa046935c16bad96c640dae6a77713383', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: '3dc7041d2208523956f62fedcf1dfbdee5302006', "data-version": version }, h("post-popovercontainer", { key: 'c4a93a401ab5f6605dec49e509c5188bf05004be', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '9c4d4c36c811ac443e98716c3b013de97eaa624d', class: "popover-container" }, h("div", { key: 'e256d82cb50ddfd7af6368c707afd0b1e5c8e7aa', class: "popover-content" }, h("slot", { key: '7da07c358162b0e5bfd13561d5ac1e94d028a917' })), h("button", { key: 'c1fef4bf8383e92d34367966ae980983c77e15e4', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '066b77e1883d64b937319a20e0e6e35fa0168d48', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "placement": ["validatePlacement"],
+        "closeButtonCaption": ["validateCloseButtonCaption"]
+    }; }
     static get style() { return PostPopoverStyle0; }
 }, [1, "post-popover", {
         "placement": [1],
@@ -138,6 +152,9 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
         "show": [64],
         "hide": [64],
         "toggle": [64]
+    }, undefined, {
+        "placement": ["validatePlacement"],
+        "closeButtonCaption": ["validateCloseButtonCaption"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/loaders/post-popovercontainer.js

@@ -1,4 +1,4 @@
-import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './post-popovercontainer2.js';
+import { a as PostPopovercontainer$1, d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
 const PostPopovercontainer = PostPopovercontainer$1;
 const defineCustomElement = defineCustomElement$1;

package/loaders/post-popovercontainer2.js

@@ -1,7 +1,23 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IS_BROWSER } from './breakpoints.js';
+import { d as checkEmptyOrOneOf, a as checkEmptyOrType } from './index2.js';
 import { v as version } from './package.js';
 
+const PLACEMENT_TYPES = [
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'top-start',
+    'top-end',
+    'right-start',
+    'right-end',
+    'bottom-start',
+    'bottom-end',
+    'left-start',
+    'left-end',
+];
+
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -2754,6 +2770,15 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.manualClose = false;
         this.safeSpace = undefined;
     }
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
+    }
+    validateEdgeGap() {
+        checkEmptyOrType(this, 'edgeGap', 'number');
+    }
+    validateSafeSpace() {
+        checkEmptyOrOneOf(this, 'safeSpace', ['triangle', 'trapezoid']);
+    }
     /**
      * Updates cursor position for safe space feature when popover is open.
      * Sets CSS custom properties for dynamic styling of safe area.
@@ -2963,11 +2988,16 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     }
     render() {
         const animationClass = this.animation ? `animate-${this.animation}` : '';
-        return (h(Host, { key: '980c2d7531ef77f71ea51b069dc20bbf40cd0ac4', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '9fa08070a5e7f864aade0dc1afc2917e54693109', class: animationClass }, this.arrow && (h("span", { key: '4700f55c721387f2d918214309e87c9057e4831f', class: "arrow", ref: el => {
+        return (h(Host, { key: '7b5c3ad89739db0387473db9228014ca9596b8a3', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '0db14a34b3bb8e248bb0adead08afc9b7007edf6', class: animationClass }, this.arrow && (h("span", { key: 'e7061112aebb882194b79e82535074f34ddbbfd1', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: 'ec5304bc77d4f3eb91c79fb2a37d096b4d43b888' }))));
+            } })), h("slot", { key: 'efc25097a97f87a9eb742379d8a70b0fc2c78682' }))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "placement": ["validatePlacement"],
+        "edgeGap": ["validateEdgeGap"],
+        "safeSpace": ["validateSafeSpace"]
+    }; }
     static get style() { return PostPopovercontainerStyle0; }
 }, [4, "post-popovercontainer", {
         "placement": [1],
@@ -2979,6 +3009,10 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         "show": [64],
         "hide": [64],
         "toggle": [64]
+    }, undefined, {
+        "placement": ["validatePlacement"],
+        "edgeGap": ["validateEdgeGap"],
+        "safeSpace": ["validateSafeSpace"]
     }]);
 PostPopovercontainer.STATIC_SIDES = {
     top: 'bottom',
@@ -3014,4 +3048,4 @@ function defineCustomElement() {
     } });
 }
 
-export { PostPopovercontainer as P, defineCustomElement as d };
+export { PLACEMENT_TYPES as P, PostPopovercontainer as a, defineCustomElement as d };

package/loaders/post-rating.js

@@ -1,11 +1,27 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
+import { c as checkRequiredAndType } from './index2.js';
+import './breakpoints.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
 const postRatingCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
 const PostRatingStyle0 = postRatingCss;
 
 const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends HTMLElement {
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
+    validateStars() {
+        checkRequiredAndType(this, 'stars', 'number');
+    }
+    validateCurrentRating() {
+        checkRequiredAndType(this, 'currentRating', 'number');
+    }
+    componentWillLoad() {
+        this.validateLabel();
+        this.validateStars();
+        this.validateCurrentRating();
+    }
     constructor() {
         super();
         this.__registerHost();
@@ -74,7 +90,7 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         }
     }
     render() {
-        return (h(Host, { key: '4ccdf384b9a4cfc462d5d3f4a7caab659b6ba2b0', "data-version": version }, h("div", { key: '7ab53083bcdff6586b1de7f1c9e5fa546728fc6f', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: '91f3a00b43c003fdeae8c56df2aff30218d44974', "data-version": version }, h("div", { key: '02b0c4a6cce70faf47f0cbed806c0cec02eae56b', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),
@@ -83,6 +99,11 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
             }, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, h("post-icon", { name: "2062", class: "stroke" }), h("post-icon", { name: "2574", class: "fill" })))))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "label": ["validateLabel"],
+        "stars": ["validateStars"],
+        "currentRating": ["validateCurrentRating"]
+    }; }
     static get style() { return PostRatingStyle0; }
 }, [1, "post-rating", {
         "label": [1],
@@ -90,6 +111,10 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         "currentRating": [1026, "current-rating"],
         "readonly": [4],
         "hoveredIndex": [32]
+    }, undefined, {
+        "label": ["validateLabel"],
+        "stars": ["validateStars"],
+        "currentRating": ["validateCurrentRating"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/loaders/post-tab-header.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
+import { c as checkRequiredAndType } from './index2.js';
 import './breakpoints.js';
 import { n as nanoid } from './index.browser.js';
 
@@ -16,7 +16,7 @@ const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader ext
         this.panel = undefined;
     }
     validateFor() {
-        checkNonEmpty(this, 'panel');
+        checkRequiredAndType(this, 'panel', 'string');
     }
     componentWillLoad() {
         this.tabId = `tab-${this.host.id || nanoid(6)}`;

package/loaders/post-tab-panel.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { n as nanoid } from './index.browser.js';
+import { c as checkRequiredAndType } from './index2.js';
+import './breakpoints.js';
 
 const postTabPanelCss = ":host{display:none}";
 const PostTabPanelStyle0 = postTabPanelCss;
@@ -13,18 +15,27 @@ const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel exten
         this.panelId = undefined;
         this.name = undefined;
     }
+    validateName() {
+        checkRequiredAndType(this, 'name', 'string');
+    }
     componentWillLoad() {
+        this.validateName();
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '98427b35c6637af65930b69b75ea56facf044000', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '4fa02667e8ff088c10122e010cfd7efe8ff3af57' })));
+        return (h(Host, { key: 'aef9d8692392f57745c0d0a0af13fedb6f67f231', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '1e51f8680f4e7bdcb37994db3e70e828dde61dc0' })));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "name": ["validateName"]
+    }; }
     static get style() { return PostTabPanelStyle0; }
 }, [1, "post-tab-panel", {
         "name": [513],
         "panelId": [32]
+    }, undefined, {
+        "name": ["validateName"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/loaders/post-tabs.js

@@ -164,7 +164,7 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: 'dae24eee55a75f9b825f590883a9c1e896c1e9fc', "data-version": version }, h("div", { key: '0a26de80b8267ddc30455b0b5afbf10ae521232b', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '826cb0a4355eeb5ddc07288e1e68fc72785c095f', class: "tabs", role: "tablist" }, h("slot", { key: '94ce90bc3dc8ff4b5012fcfa3c0039b188c14002', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '462f80f3368431344910cc317f1c0f42112dc99a', class: "tab-content", part: "content" }, h("slot", { key: '57a80ac790ca75f3b62382994c21a3a3c78004cc', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: 'b38b216caa48cb36b73f36669a650bc88b56c860', "data-version": version }, h("div", { key: '751f88c9f0241e42b6c8d996b3645c26113f0ce2', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'd194ce33913a2ed6abbdd939ad5dcdc74e6f6798', class: "tabs", role: "tablist" }, h("slot", { key: '46fb9cf2d52fadf9418dff7050b78274457c3b0a', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'db2bfba595dab2730b9189a935dcd99504d7bad6', class: "tab-content", part: "content" }, h("slot", { key: '35795441e71901727fad9d759da483f55a865e97', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return this; }
     static get style() { return PostTabsStyle0; }

package/loaders/post-tag.js

@@ -1,5 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
+import { d as checkEmptyOrOneOf, a as checkEmptyOrType } from './index2.js';
+import './breakpoints.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
 const postTagCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
@@ -12,16 +14,21 @@ const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEle
         this.__attachShadow();
         this.classes = undefined;
         this.variant = undefined;
-        this.size = null;
-        this.icon = null;
+        this.size = undefined;
+        this.icon = undefined;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {
+        checkEmptyOrOneOf(this, 'variant', ['white', 'info', 'success', 'error', 'warning', 'yellow']);
         this.setClasses();
     }
     sizeChanged() {
+        checkEmptyOrOneOf(this, 'size', ['sm']);
         this.setClasses();
     }
+    validateName() {
+        checkEmptyOrType(this, 'icon', 'string');
+    }
     setClasses() {
         this.classes = [
             'tag',
@@ -31,16 +38,22 @@ const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEle
             .filter(c => c !== null)
             .join(' ');
     }
+    componentWillLoad() {
+        this.validateName();
+        this.variantChanged();
+        this.sizeChanged();
+    }
     connectedCallback() {
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '4ca273166b81099dd8fc0f69d3d38215e3d7ccbc', "data-version": version }, h("div", { key: 'b6c4eb6a3bf8cbaad18cf6277dab79bd6e350f0a', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '4f9e8cf6b2c723e31d60e30464c1106a9f72b5b4', class: "tag-text" }, h("slot", { key: '819a4e6ff743386f8d5d6b1d94dea9ee4a612784' })))));
+        return (h(Host, { key: 'ecc396b297434d07c2fbca896ad7dbb817c5e52c', "data-version": version }, h("div", { key: 'cf43facc3b6d7caa329fb2b62a67931e53aaeb98', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '60232a82d9c231da41d22dd5e50744378dab54aa', class: "tag-text" }, h("slot", { key: '6b95fe941aac88e3ce6103187d5d831d53f8c315' })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "variant": ["variantChanged"],
-        "size": ["sizeChanged"]
+        "size": ["sizeChanged"],
+        "icon": ["validateName"]
     }; }
     static get style() { return PostTagStyle0; }
 }, [1, "post-tag", {
@@ -50,7 +63,8 @@ const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEle
         "classes": [32]
     }, undefined, {
         "variant": ["variantChanged"],
-        "size": ["sizeChanged"]
+        "size": ["sizeChanged"],
+        "icon": ["validateName"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/loaders/post-togglebutton.js

@@ -1,7 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkType } from './check-type.js';
-import './breakpoints.js';
 
 const postTogglebuttonCss = ":host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
 const PostTogglebuttonStyle0 = postTogglebuttonCss;
@@ -23,27 +21,18 @@ const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutt
         };
         this.toggled = false;
     }
-    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));
     }
     render() {
-        return (h(Host, { key: '3a1429a9b67b8cfafae184fe0d060ee3a04974e0', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9ab1537574423740fc335fde732c699698acac25' })));
+        return (h(Host, { key: 'd79b9952861afa27d8d1c5afb492e585bdc8a722', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'aad4cc86756d0688d10f1b28dc14d6b464ab8830' })));
     }
     get host() { return this; }
-    static get watchers() { return {
-        "toggled": ["validateToggled"]
-    }; }
     static get style() { return PostTogglebuttonStyle0; }
 }, [1, "post-togglebutton", {
         "toggled": [1028]
-    }, undefined, {
-        "toggled": ["validateToggled"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/loaders/post-tooltip-trigger.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
 import { I as IS_BROWSER } from './breakpoints.js';
-import { c as checkType } from './check-type.js';
+import { a as checkEmptyOrType } from './index2.js';
 import { v as version$1 } from './package.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -4535,15 +4535,13 @@ const PostTooltipTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltipT
         this.boundTooltipHandler = this.handleTooltipEvent.bind(this);
     }
     validateControlFor() {
-        checkType(this, 'for', 'string');
+        checkEmptyOrType(this, 'for', 'string');
     }
     get tooltip() {
         if (!IS_BROWSER)
             return null;
         const ref = document.getElementById(this.for);
-        return ref?.localName === 'post-tooltip'
-            ? ref
-            : null;
+        return ref?.localName === 'post-tooltip' ? ref : null;
     }
     componentDidLoad() {
         this.setupTrigger();
@@ -4651,7 +4649,7 @@ const PostTooltipTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltipT
     handleLeave(event) {
         const newTarget = event.relatedTarget;
         if ((this.tooltip && newTarget && this.tooltip.contains(newTarget)) ||
-            (newTarget === this.trigger)) {
+            newTarget === this.trigger) {
             return;
         }
         this.interestLostHandler();
@@ -4675,7 +4673,7 @@ const PostTooltipTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltipT
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '4e4b53e85570d6dbba4ee7833a1d3de00e53dbc6', "data-version": version$1 }, h("slot", { key: 'f8f5ea2e2ce848d654e233617455bbbbdc6ba5b1', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '2dc6f70e4dc7706a69efcede935e85faede3b73c', "data-version": version$1 }, h("slot", { key: 'b6301a66707d85a06b053a0a70a2a0cbc62877b3', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return this; }
     static get watchers() { return {

package/loaders/post-tooltip.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkType } from './check-type.js';
+import { d as checkEmptyOrOneOf } from './index2.js';
 import './breakpoints.js';
-import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
+import { P as PLACEMENT_TYPES, d as defineCustomElement$2 } from './post-popovercontainer2.js';
 
-const postTooltipCss = ":host{display:none}:host([open]){display:block}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:200px;min-height:32px}";
+const postTooltipCss = ":host{display:none}:host([open]){display:contents}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:280px;min-height:32px;word-wrap:break-word;white-space:normal}";
 const PostTooltipStyle0 = postTooltipCss;
 
 const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends HTMLElement {
@@ -14,14 +14,14 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
         this.__attachShadow();
         this.placement = 'top';
         this.arrow = false;
-        this.animation = null;
+        this.animation = undefined;
         this.open = false;
     }
-    validateOpen() {
-        checkType(this, 'open', 'boolean', 'The "open" property of the post-tooltip must be a boolean.');
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
     }
-    connectedCallback() {
-        this.validateOpen();
+    componentWillLoad() {
+        this.validatePlacement();
     }
     componentDidLoad() {
         if (!this.host.id) {
@@ -62,11 +62,11 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'd6a76533f22e354ff89f15c1e9a10e20fe471579', "data-version": version, role: "tooltip" }, h("post-popovercontainer", { key: '60076aaa184ae98e9e813400cc2d03f5add274df', safeSpace: 'trapezoid', class: popoverClass, arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '1d5ea42696cc60a8a84ff0ecc29e82152d028ba4' }))));
+        return (h(Host, { key: 'e6bb167dd89c7549f4bed625dbeb652eac871ce5', "data-version": version, role: "tooltip" }, h("post-popovercontainer", { key: 'f5dc041dc440f7dc5410e9ee020f51a974ff3e83', safeSpace: "trapezoid", class: popoverClass, arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'e1ee7b0cfb57dc927a96574b10af50c3bd12328c' }))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "open": ["validateOpen"]
+        "placement": ["validatePlacement"]
     }; }
     static get style() { return PostTooltipStyle0; }
 }, [1, "post-tooltip", {
@@ -78,7 +78,7 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
         "hide": [64],
         "toggle": [64]
     }, undefined, {
-        "open": ["validateOpen"]
+        "placement": ["validatePlacement"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/loaders/switch-variants.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "10.0.0-next.38",
+  "version": "10.0.0-next.39",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -31,8 +31,8 @@
   "dependencies": {
     "@floating-ui/dom": "1.7.0",
     "@oddbird/popover-polyfill": "0.5.2",
-    "@swisspost/design-system-icons": "10.0.0-next.38",
-    "@swisspost/design-system-styles": "10.0.0-next.38",
+    "@swisspost/design-system-icons": "10.0.0-next.39",
+    "@swisspost/design-system-styles": "10.0.0-next.39",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.1.5"
@@ -48,20 +48,24 @@
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.12",
     "@types/jest": "29.5.14",
+    "@types/mock-fs": "4.13.4",
     "@types/node": "22.10.5",
     "@typescript-eslint/parser": "7.18.0",
     "bootstrap": "5.3.3",
+    "copyfiles": "2.4.1",
     "cypress": "14.3.2",
-    "cypress-axe": "1.5.0",
+    "cypress-axe": "1.6.0",
     "cypress-storybook": "1.0.0",
     "eslint": "9.18.0",
     "eslint-plugin-react": "7.37.4",
     "globals": "16.0.0",
+    "mock-fs": "5.5.0",
     "rimraf": "6.0.1",
     "rollup-plugin-postcss": "4.0.2",
     "sass": "1.78.0",
     "throttle-debounce": "5.0.2",
     "ts-jest": "29.2.5",
+    "ts-node": "10.9.2",
     "typescript": "5.8.3",
     "typescript-eslint": "8.20.0",
     "eslint-plugin-cypress": "4.2.0"
@@ -75,17 +79,23 @@
     "frontend"
   ],
   "scripts": {
-    "play": "stencil build --dev --port 9200 --serve --watch --docs --docs-readme",
-    "start": "stencil build --dev --watch --docs --docs-readme",
-    "build": "pnpm clean && stencil build --docs-readme",
-    "clean": "rimraf dist hydrate loader loaders www ../components-react/src/components/stencil-generated/ ../components-angular/projects/components/src/lib/stencil-generated/",
+    "play": "pnpm prebuild:script && stencil build --dev --port 9200 --serve --watch --docs --docs-readme",
+    "start": "pnpm prebuild:script && stencil build --dev --watch --docs --docs-readme",
+    "prebuild": "pnpm clean && pnpm prebuild:script",
+    "build": "stencil build --docs-readme",
+    "postbuild": "pnpm copy:styles:components-react & pnpm copy:styles:components-angular",
+    "clean": "rimraf dist hydrate loader loaders www src/styles/generated ../components-react/src/components/stencil-generated/ ../components-angular/projects/components/src/lib/stencil-generated/",
     "unit": "stencil test --spec",
     "unit:watch": "stencil test --spec --watchAll --silent",
+    "unit:updatesnapshot": "stencil test --spec --updateSnapshot",
     "e2e": "cypress run --browser chrome",
     "e2e:watch": "cypress open",
     "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "generate": "stencil generate"
+    "generate": "stencil generate",
+    "prebuild:script": "ts-node prebuild.ts",
+    "copy:styles:components-react": "copyfiles -f www/build/post-components.css ../components-react/src/components/stencil-generated/",
+    "copy:styles:components-angular": "copyfiles -f www/build/post-components.css ../components-angular/projects/components/src/lib/stencil-generated/"
   }
 }

package/dist/cjs/check-non-empty-bd99d236.js

@@ -1,15 +0,0 @@
-'use strict';
-
-const constants = require('./constants-238701d3.js');
-
-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 (constants.EMPTY_VALUES.some(v => v === value)) {
-        throw new Error(message);
-    }
-}
-
-exports.checkNonEmpty = checkNonEmpty;

package/dist/cjs/check-one-of-75d270b5.js

@@ -1,13 +0,0 @@
-'use strict';
-
-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);
-    }
-}
-
-exports.checkOneOf = checkOneOf;

package/dist/cjs/check-type-cdbf6d29.js

@@ -1,21 +0,0 @@
-'use strict';
-
-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(message);
-        }
-    }
-    else if (typeof value !== type) {
-        throw new Error(message);
-    }
-}
-
-exports.checkType = checkType;