@swisspost/design-system-components 9.0.0-next.7 → 9.0.0-next.9

package/dist/components/post-tab-header2.js

@@ -20,7 +20,7 @@ const PostTabHeader = /*@__PURE__*/ proxyCustomElement(class PostTabHeader exten
         this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: '4ca8efb0e3a6a429442be5406eb43f9cd2406b49', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '049d4c8378c42fc31b572d8b073fef523fbc6f37' })));
+        return (h(Host, { key: '97ce31f2069ea710e4d1f15879f323a0966a072d', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '78a7154fdbf6cb51069c84dc545ae6bb81f66671' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tab-panel2.js

@@ -17,7 +17,7 @@ const PostTabPanel = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: '8116daf192361e9c9333c1a94afa4d9eb5cce3d1', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '646fc0fa564f76c6f2a1f706cc753f11306ca231' })));
+        return (h(Host, { key: '99270e53616a4dce990388b8cd825295fcdcb7d2', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '049a0e04937e286786a54eb6f6fd5fe909d85cea' })));
     }
     get host() { return this; }
     static get style() { return PostTabPanelStyle0; }

package/dist/components/post-tabs2.js

@@ -36,12 +36,13 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         this.activePanel = undefined;
     }
     get tabs() {
-        return this.host.querySelectorAll('post-tab-header');
+        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
     componentDidLoad() {
+        var _a;
         this.moveMisplacedTabs();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
+        const initiallyActivePanel = this.activePanel || ((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
         void this.show(initiallyActivePanel);
         this.isLoaded = true;
     }
@@ -86,6 +87,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         });
     }
     enableTabs() {
+        var _a;
         if (!this.tabs)
             return;
         this.tabs.forEach(async (tab) => {
@@ -112,7 +114,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         });
         // if the currently active tab was removed from the DOM then select the first one
         if (this.activeTab && !this.activeTab.isConnected) {
-            void this.show(this.tabs.item(0).panel);
+            void this.show((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
         }
     }
     activateTab(tab) {
@@ -164,7 +166,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '2a7fe6d86dc18dcebaa25b5466ffc88de96114e6', "data-version": version }, h("div", { key: '71940a2be5c36f591f0948c7f8dedbb26e98736d', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'bd9fa6ba6e2bd037a0a09365d4906b7288f929c6', class: "tabs", role: "tablist" }, h("slot", { key: '72a369206b0f81e88ff9741a69e6b58ba3239f5e', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '9c544b7bae6dc2abb3e297015216c88872a78b8e', class: "tab-content", part: "content" }, h("slot", { key: '2f2e274ecb2bbe19c8f016b8d7a1f7a7038d6646', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: 'ee9628ed2eb47e6e41001f22c7a455da4b0c30bc', "data-version": version }, h("div", { key: 'd4387bfa9efb56d02403ee51aa3a3bce53c044bd', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '020526d64754fb7c61b397894291d19d22a754ed', class: "tabs", role: "tablist" }, h("slot", { key: '875f7ccaf2f980087fbc461c22ed223f00bcb4ba', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'c4ecb26258e2cf20394b89c9ae20fd575f13bae6', class: "tab-content", part: "content" }, h("slot", { key: 'd1e60679e580df4a903d021a2985c4299a356d28', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return this; }
     static get style() { return PostTabsStyle0; }

package/dist/components/post-tag2.js

@@ -35,7 +35,7 @@ const PostTag = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEleme
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '52768516080d294eaf20034e18e6a776149fa97e', "data-version": version }, h("div", { key: 'f342d20bfccfdf650f5c6e943065f090a13fd94c', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '5286cb07cbfa5b20e0dfbbd4847a3dda49a19278', class: "tag-text" }, h("slot", { key: '6215a61b4e10d6c0274019f183ef90e46d282114' })))));
+        return (h(Host, { key: '32c08ea43811e47b2560e335b59486c356fa5a9b', "data-version": version }, h("div", { key: 'f04dc3e4c5b14edea0e1fd1cab581c286f3d74ff', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '701e75bb1c31392d8f378339c5a31920cb5d8a7e', class: "tag-text" }, h("slot", { key: '6470a3ba2586bdc9ded20ff686f2c6ca58c47c69' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-togglebutton2.js

@@ -1,7 +1,8 @@
 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';
 
-const postTogglebuttonCss = ":host{cursor:pointer}";
+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;
 
 const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
@@ -13,18 +14,35 @@ const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton
             this.toggled = !this.toggled;
         };
         this.handleKeydown = (event) => {
-            if (event.key === 'Enter') {
-                this.toggled = !this.toggled;
+            // 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();
             }
         };
         this.toggled = false;
     }
+    validateToggled(value = this.toggled) {
+        checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a 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: '253ca4026764e8d2c0979341a617fffb6d0d2e8e', slot: "post-togglebutton", tabindex: "0", "data-version": version, role: "button", "aria-pressed": this.toggled.toString(), onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("span", { key: 'e8c7c7492986993ca1ec6c38743555030b068dbb', hidden: this.toggled }, h("slot", { key: 'd012a64cf1da8acc149ad4c5929cfe3fa31619a3', name: "untoggled" })), h("span", { key: '6603b12b05870348e979a9283ac4a17f15a217c6', hidden: !this.toggled }, h("slot", { key: '1306cb988d645ca297fb32d8b743ae65abfe644b', name: "toggled" }))));
+        return (h(Host, { key: 'f20b7e5f7cd14c1b0addf12600df27e7e5dab841', slot: "post-togglebutton", "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '526540ce9a66fa08f0142e674811fe88e3abcfa6' })));
     }
+    get host() { return this; }
+    static get watchers() { return {
+        "toggled": ["validateToggled"]
+    }; }
     static get style() { return PostTogglebuttonStyle0; }
 }, [1, "post-togglebutton", {
-        "toggled": [1540]
+        "toggled": [1028]
+    }, undefined, {
+        "toggled": ["validateToggled"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/post-tooltip2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
 import { v as version$1 } from './package.js';
 import { g as getAttributeObserver } from './attribute-observer.js';
-import { d as checkEmptyOrType } from './index2.js';
+import { e as checkEmptyOrType } from './index2.js';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -4989,7 +4989,7 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '8c14096295ee459a3a727e361eaacf0892eb1824', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '65138a845ec05bd830e6534519ac4df7bb00067d', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '5296d0864df7d07b498924a40a475ff7c94be6b8' }))));
+        return (h(Host, { key: '71db1ccf3cf929d76550b08e69c8594479eaa84f', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'b9a38cabbfc2cf2eb9b257bca32022b5d97aac7c', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '316b55f5fc55d9607205496a87f02a0a5fa197cf' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/slide.js

@@ -0,0 +1,25 @@
+const easing = 'ease';
+const duration = 500;
+const fill = 'forwards';
+const slideUp = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+        { transform: 'translateY(0)' }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};
+const slideDown = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: 'translateY(0)' }, // Starting position (no translation)
+        { transform: `translateY(${translateSize})` }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};
+
+export { slideDown as a, slideUp as s };