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

package/dist/components/post-tab-header2.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 { b as checkRequiredAndType } from './index2.js';
 import './breakpoints.js';
 import { n as nanoid } from './index.browser.js';
 
@@ -16,13 +16,13 @@ const PostTabHeader = /*@__PURE__*/ proxyCustomElement(class PostTabHeader exten
         this.panel = undefined;
     }
     validateFor() {
-        checkNonEmpty(this, 'panel');
+        checkRequiredAndType(this, 'panel', 'string');
     }
     componentWillLoad() {
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '5046c46fa27fd6586c694420abf197b227b56520', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '78c2f660e4f2307ca95a63f4cfd90d08cc6942df' })));
+        return (h(Host, { key: '829043a1f87aef4e965e3f830cc29eca5ed13864', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: 'c1d6a7d9120b494e898a502eac31341d7fc8d87b' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tab-panel2.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 { b as checkRequiredAndType } from './index2.js';
+import './breakpoints.js';
 
 const postTabPanelCss = ":host{display:none}";
 const PostTabPanelStyle0 = postTabPanelCss;
@@ -13,18 +15,27 @@ const PostTabPanel = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends
         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: '366d1b6074bf4212e7fc56500680ed12d8d83599', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '940f8dcf9e1302dfdd1c859e356799a2f2c7fe54' })));
     }
     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() {
     if (typeof customElements === "undefined") {

package/dist/components/post-tabs2.js

@@ -164,7 +164,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         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: '621652f2abeb8162e2d67261c57000a9d6e7b4ca', "data-version": version }, h("div", { key: '9cf2693b826588d3f099d30157886f70c34aa8b7', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '4d4a0f242a30ec484c4557880b4c184b47d74612', class: "tabs", role: "tablist" }, h("slot", { key: '44df627213090710a6171fae2b1b8698e1f68fa5', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'ec23dfe409569899a3b95cf3e2cd6fe2deae8c9b', class: "tab-content", part: "content" }, h("slot", { key: '16374ab8fae907d5d2c7229069dd7511f118c3ac', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return this; }
     static get style() { return PostTabsStyle0; }

package/dist/components/post-tag2.js

@@ -1,5 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
+import { a as checkEmptyOrOneOf, d as checkEmptyOrType } from './index2.js';
+import './breakpoints.js';
 import { d as defineCustomElement$1 } 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 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEleme
         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 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEleme
             .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: '42743d0a7f87680223eef33ff9295827f3c80d4c', "data-version": version }, h("div", { key: '392ad72b23f638d7fdefe7acb20f45c9dcf2d630', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '71b7dc696dd392dc9b195b363cd79a1fc0e0a708', class: "tag-text" }, h("slot", { key: '91610aff7550df9891fb617d2d9e5bcbcffbe256' })))));
     }
     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 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEleme
         "classes": [32]
     }, undefined, {
         "variant": ["variantChanged"],
-        "size": ["sizeChanged"]
+        "size": ["sizeChanged"],
+        "icon": ["validateName"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/post-togglebutton2.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 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton
         };
         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: '1025fb988460e85c92e49241889363e1bcc840eb', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '20d3eb9415685fb9a00a5613474c432f6638692e' })));
     }
     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() {
     if (typeof customElements === "undefined") {

package/dist/components/post-tooltip-trigger2.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 { d 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 = /*@__PURE__*/ proxyCustomElement(class PostTooltipTri
         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 = /*@__PURE__*/ proxyCustomElement(class PostTooltipTri
     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 = /*@__PURE__*/ proxyCustomElement(class PostTooltipTri
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '4e4b53e85570d6dbba4ee7833a1d3de00e53dbc6', "data-version": version$1 }, h("slot", { key: 'f8f5ea2e2ce848d654e233617455bbbbdc6ba5b1', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '26ac11df6c2961e3dd51722f6981185db17c6efb', "data-version": version$1 }, h("slot", { key: 'd08036f40d0a6708b8614232134b0d5b4eba4b78', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tooltip2.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 { a as checkEmptyOrOneOf } from './index2.js';
 import './breakpoints.js';
-import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
+import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } 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 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends HTMLElement {
@@ -14,14 +14,14 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
         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 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
     }
     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: '1e1d3f4e204b42c8202af63bd7dec12de3c8e16a', "data-version": version, role: "tooltip" }, h("post-popovercontainer", { key: 'e410952b4e75915e51d57eec2dbecce2b5d55733', 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: '494e3136dbe96cf611a41753711efb03cab30a12' }))));
     }
     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 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
         "hide": [64],
         "toggle": [64]
     }, undefined, {
-        "open": ["validateOpen"]
+        "placement": ["validatePlacement"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/switch-variants.js

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