@swisspost/design-system-components 10.0.0-next.54 → 10.0.0-next.56

package/dist/cjs/post-tabs.cjs.entry.js

@@ -1,9 +1,11 @@
 'use strict';
 
-var index = require('./index-Cb8CTrOz.js');
-var _package = require('./package-CvZxvdTJ.js');
-var fade = require('./fade-nS5zzDQS.js');
-require('./breakpoints-CEkeixld.js');
+var index = require('./index-CKNxhb0S.js');
+var _package = require('./package-CY7IOoiw.js');
+var fade = require('./fade-CPQhl1fP.js');
+var breakpoints = require('./breakpoints-Df03Ct7n.js');
+require('./utils-s05L2ulk.js');
+require('./environment-BQE9Unf_.js');
 
 /**
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
@@ -33,42 +35,162 @@ const PostTabs = class {
         index.registerInstance(this, hostRef);
         this.postChange = index.createEvent(this, "postChange");
         this.isLoaded = false;
+        this.isNavigationMode = false;
         /**
          * When set to true, this property allows the tabs container to span the
+         * Changing this value after initialization has no effect.
          * full width of the screen, from edge to edge.
          */
         this.fullWidth = false;
     }
     get tabs() {
-        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
+        return Array.from(this.host.querySelectorAll('post-tab-item')).filter(tab => tab.closest('post-tabs') === this.host);
+    }
+    get panels() {
+        return Array.from(this.host.querySelectorAll('post-tab-panel')).filter(panel => panel.closest('post-tabs') === this.host);
+    }
+    validateLabel() {
+        if (this.isNavigationMode) {
+            breakpoints.checkRequiredAndType(this, 'label', 'string');
+        }
+    }
+    componentWillRender() {
+        this.detectMode();
     }
     componentDidLoad() {
         this.moveMisplacedTabs();
+        this.moveMisplacedPanels();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
-        void this.show(initiallyActivePanel);
-        this.isLoaded = true;
+        this.setupContentObserver();
+        this.validateLabel();
+        if (this.isNavigationMode) {
+            const activeTab = this.findActiveNavigationTab();
+            if (activeTab) {
+                this.activateTab(activeTab);
+            }
+        }
+        else {
+            const tabToActivate = this.activeTab || this.tabs[0]?.name;
+            if (tabToActivate) {
+                void this.show(tabToActivate);
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.showing) {
+            this.showing.cancel();
+            this.showing = null;
+        }
+        if (this.hiding) {
+            this.hiding.cancel();
+            this.hiding = null;
+        }
+        if (this.contentObserver) {
+            this.contentObserver.disconnect();
+        }
+    }
+    setupContentObserver() {
+        const config = {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-navigation-mode', 'aria-current'],
+        };
+        this.contentObserver = new MutationObserver(this.handleContentChange.bind(this));
+        this.contentObserver.observe(this.host, config);
+    }
+    handleContentChange(mutations) {
+        const shouldRedetect = this.shouldRedetectMode(mutations);
+        const ariaCurrentChanged = this.hasAriaCurrentChanged(mutations);
+        if (ariaCurrentChanged && this.isNavigationMode) {
+            this.updateActiveNavigationTab();
+        }
+        if (shouldRedetect) {
+            this.handleModeChange();
+        }
+    }
+    shouldRedetectMode(mutations) {
+        return mutations.some(mutation => {
+            if (mutation.type === 'childList') {
+                return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
+            }
+            if (mutation.type === 'attributes' && mutation.attributeName === 'data-navigation-mode') {
+                return true;
+            }
+            return false;
+        });
+    }
+    hasAriaCurrentChanged(mutations) {
+        return mutations.some(mutation => mutation.type === 'attributes' && mutation.attributeName === 'aria-current');
+    }
+    updateActiveNavigationTab() {
+        const activeTab = this.findActiveNavigationTab();
+        if (activeTab && activeTab !== this.currentActiveTab) {
+            this.activateTab(activeTab);
+        }
+    }
+    handleModeChange() {
+        const previousMode = this.isNavigationMode;
+        this.detectMode();
+        if (previousMode !== this.isNavigationMode) {
+            this.enableTabs();
+            this.initializeActiveTab();
+        }
+    }
+    initializeActiveTab() {
+        if (this.isNavigationMode) {
+            const activeTab = this.findActiveNavigationTab();
+            if (activeTab) {
+                this.activateTab(activeTab);
+            }
+        }
+        else {
+            const tabToActivate = this.activeTab || this.tabs[0]?.name;
+            if (tabToActivate) {
+                void this.show(tabToActivate);
+            }
+        }
+    }
+    detectMode() {
+        // Check for navigation mode by looking for anchor elements in tabs
+        // This works even before post-tab-item sets data-navigation-mode attribute
+        const hasNavigationTabs = this.tabs.some(tab => {
+            const hasAnchor = tab.querySelector('a') !== null;
+            const navModeAttr = tab.getAttribute('data-navigation-mode') === 'true';
+            return hasAnchor || navModeAttr;
+        });
+        const hasPanels = this.panels.length > 0;
+        if (hasNavigationTabs && hasPanels) {
+            throw new Error('PostTabs: Mixed mode detected. Cannot use both navigation mode (anchor elements) and panel mode (post-tab-panel elements) at the same time.');
+        }
+        this.isNavigationMode = hasNavigationTabs;
+    }
+    findActiveNavigationTab() {
+        return (this.tabs.find(tab => {
+            const anchor = tab.querySelector('a[aria-current="page"]');
+            return anchor !== null;
+        }) || null);
     }
     /**
      * Shows the panel with the given name and selects its associated tab.
      * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
      */
-    async show(panelName) {
+    async show(tabName) {
         // do nothing if the tab is already active
-        if (panelName === this.activeTab?.panel) {
+        if (tabName === this.currentActiveTab?.name) {
             return;
         }
-        const previousTab = this.activeTab;
-        const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
+        const previousTab = this.currentActiveTab;
+        const newTab = this.host.querySelector(`post-tab-item[name=${tabName}]`);
         this.activateTab(newTab);
         // if a panel is currently being displayed, remove it from the view and complete the associated animation
         if (this.showing) {
-            this.showing.effect['target'].style.display = 'none';
             this.showing.finish();
+            this.showing = null;
         }
         // hide the currently visible panel only if no other animation is running
         if (previousTab && !this.showing && !this.hiding)
-            this.hidePanel(previousTab.panel);
+            this.hidePanel(previousTab.name);
         // wait for any hiding animation to complete before showing the selected tab
         if (this.hiding)
             await this.hiding.finished;
@@ -77,15 +199,25 @@ const PostTabs = class {
         if (this.showing)
             await this.showing.finished;
         if (this.isLoaded)
-            this.postChange.emit(this.activeTab.panel);
+            this.postChange.emit(this.currentActiveTab.name);
     }
     moveMisplacedTabs() {
         if (!this.tabs)
             return;
         this.tabs.forEach(tab => {
-            if (tab.getAttribute('slot') === 'tabs')
-                return;
-            tab.setAttribute('slot', 'tabs');
+            // Tab items should go in the default slot, so remove any slot attribute
+            if (tab.getAttribute('slot')) {
+                tab.removeAttribute('slot');
+            }
+        });
+    }
+    moveMisplacedPanels() {
+        if (!this.panels)
+            return;
+        this.panels.forEach(panel => {
+            if (panel.getAttribute('slot') !== 'panels') {
+                panel.setAttribute('slot', 'panels');
+            }
         });
     }
     enableTabs() {
@@ -93,19 +225,25 @@ const PostTabs = class {
             return;
         this.tabs.forEach(async (tab) => {
             await componentOnReady(tab);
-            // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
+            // In navigation mode, navigation is handled by the consumer's routing
+            if (this.isNavigationMode) {
+                return;
+            }
+            // Panel mode: set up ARIA relationships and event handlers
             if (tab.getAttribute('aria-controls'))
                 return;
-            const tabPanel = this.getPanel(tab.panel);
-            tab.setAttribute('aria-controls', tabPanel.id);
-            tabPanel.setAttribute('aria-labelledby', tab.id);
+            const tabPanel = this.getPanel(tab.name);
+            if (tabPanel) {
+                tab.setAttribute('aria-controls', tabPanel.id);
+                tabPanel.setAttribute('aria-labelledby', tab.id);
+            }
             tab.addEventListener('click', () => {
-                void this.show(tab.panel);
+                void this.show(tab.name);
             });
             tab.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
-                    void this.show(tab.panel);
+                    void this.show(tab.name);
                 }
             });
             tab.addEventListener('keydown', (e) => {
@@ -114,44 +252,51 @@ const PostTabs = class {
             });
         });
         // 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[0]?.panel);
+        if (this.currentActiveTab && !this.currentActiveTab.isConnected) {
+            void this.show(this.tabs[0]?.name);
         }
     }
     activateTab(tab) {
-        if (this.activeTab) {
-            this.activeTab.setAttribute('aria-selected', 'false');
-            this.activeTab.setAttribute('tabindex', '-1');
-            this.activeTab.classList.remove('active');
+        // Deactivate previous tab
+        if (this.currentActiveTab) {
+            this.currentActiveTab.classList.remove('active');
+            if (!this.isNavigationMode) {
+                this.currentActiveTab.setAttribute('aria-selected', 'false');
+                this.currentActiveTab.setAttribute('tabindex', '-1');
+            }
         }
-        tab.setAttribute('aria-selected', 'true');
-        tab.setAttribute('tabindex', '0');
         tab.classList.add('active');
-        this.activeTab = tab;
+        if (!this.isNavigationMode) {
+            tab.setAttribute('aria-selected', 'true');
+            tab.setAttribute('tabindex', '0');
+        }
+        this.currentActiveTab = tab;
     }
     hidePanel(panelName) {
         const previousPanel = this.getPanel(panelName);
         if (!previousPanel)
             return;
-        this.hiding = fade.fadeOut(previousPanel);
+        this.hiding = fade.fade(previousPanel, 'out');
         this.hiding.onfinish = () => {
             previousPanel.style.display = 'none';
             this.hiding = null;
         };
     }
     showSelectedPanel() {
-        const panel = this.getPanel(this.activeTab.panel);
+        const panel = this.getPanel(this.currentActiveTab.name);
+        if (!panel)
+            return;
         panel.style.display = 'block';
         // prevent the initially selected panel from fading in
         if (!this.isLoaded)
             return;
-        this.showing = fade.fadeIn(panel);
+        this.showing = fade.fade(panel, 'in');
         this.showing.onfinish = () => {
             this.showing = null;
         };
     }
     getPanel(name) {
-        return this.host.querySelector(`post-tab-panel[name=${name}]`);
+        return this.host.querySelector(`post-tab-panel[for=${name}]`);
     }
     navigateTabs(tab, key) {
         const activeTabIndex = Array.from(this.tabs).indexOf(tab);
@@ -165,11 +310,19 @@ const PostTabs = class {
         if (!nextTab)
             return;
         nextTab.focus();
+        void this.show(nextTab.name);
     }
     render() {
-        return (index.h(index.Host, { key: '3e352bc059be99242f612a49bdea71fd065d67b0', "data-version": _package.version }, index.h("div", { key: '34d608d7af834fd4fb3106ac3fb90100a9b73138', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: '102e75b53d3e485a185d391f84755142d8690de6', class: "tabs", role: "tablist" }, index.h("slot", { key: '03624f2944dfd37d3eb3403772d430a6e053e676', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: '8c7c956b831ef19fb093122ca35c14b5a015dad3', class: "tab-content", part: "content" }, index.h("slot", { key: '8fad35a2a6d26814f513c422b4fcbe98aae7bd22', onSlotchange: () => this.moveMisplacedTabs() }))));
+        const TabsContainer = this.isNavigationMode ? 'nav' : 'div';
+        return (index.h(index.Host, { key: '0d2ce5c335e58aeb6231ad4d63a44324eb35f54a', "data-version": _package.version }, index.h("div", { key: 'd8b0ad389fd4ba8010c7816472373d6a8d4a3aa4', class: "tabs-wrapper", part: "post-tabs" }, index.h(TabsContainer, { key: 'fd8ae3c19f12138936a39028f117aec1d41ea992', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, index.h("slot", { key: '3148c5c8f508a6c3f2daab075f8ab2d91c567343', onSlotchange: () => {
+                this.moveMisplacedTabs();
+                this.enableTabs();
+            } }))), !this.isNavigationMode && (index.h("div", { key: '4ea329e77c108dd2b25db6efa116a68a3a415af6', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: '28efc229a3f3f6f4f9cee157ff453c860c5ffa9e', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "label": ["validateLabel"]
+    }; }
 };
 PostTabs.style = postTabsCss;
 

package/dist/cjs/post-tooltip-trigger.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-Cb8CTrOz.js');
-var breakpoints = require('./breakpoints-CEkeixld.js');
-var index$1 = require('./index-DtvYdwe1.js');
-var _package = require('./package-CvZxvdTJ.js');
+var index = require('./index-CKNxhb0S.js');
+var environment = require('./environment-BQE9Unf_.js');
+var breakpoints = require('./breakpoints-Df03Ct7n.js');
+var _package = require('./package-CY7IOoiw.js');
 var focusable = require('./focusable-D6snQLqS.js');
 
 const postTooltipTriggerCss = "post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}";
 
 const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
-if (breakpoints.IS_BROWSER) {
+if (environment.IS_BROWSER) {
     (async () => {
         await Promise.resolve().then(function () { return require('./long-press-event-Q8jMUNXD.js'); });
     })();
@@ -33,10 +33,10 @@ const PostTooltipTrigger = class {
         this.boundTooltipHandler = this.handleTooltipEvent.bind(this);
     }
     validateControlFor() {
-        index$1.checkEmptyOrType(this, 'for', 'string');
+        breakpoints.checkEmptyOrType(this, 'for', 'string');
     }
     get tooltip() {
-        if (!breakpoints.IS_BROWSER)
+        if (!environment.IS_BROWSER)
             return null;
         const ref = document.getElementById(this.for);
         return ref?.localName === 'post-tooltip' ? ref : null;
@@ -173,7 +173,7 @@ const PostTooltipTrigger = class {
         this.tooltip?.hide();
     }
     render() {
-        return (index.h(index.Host, { key: 'e545db2bc489025c51e51f680f4139b508ef09f8', "data-version": _package.version }, index.h("slot", { key: '90abc548bccbc51d233001c98d289fd60599c482', onSlotchange: () => this.handleSlotChange() })));
+        return (index.h(index.Host, { key: '272df9fbda27a695e083a71e7740dd6c8c3afb2d', "data-version": _package.version }, index.h("slot", { key: '616b48a7dcbe591f4490aa8ec41abf43c17259bb', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tooltip.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Cb8CTrOz.js');
-var _package = require('./package-CvZxvdTJ.js');
-var index$1 = require('./index-DtvYdwe1.js');
-require('./breakpoints-CEkeixld.js');
+var index = require('./index-CKNxhb0S.js');
+var _package = require('./package-CY7IOoiw.js');
+var breakpoints = require('./breakpoints-Df03Ct7n.js');
 var placement = require('./placement-qEFR9hmI.js');
+require('./environment-BQE9Unf_.js');
 
-const postTooltipCss = ":host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);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 postTooltipCss = ":host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}";
 
 const PostTooltip = class {
     constructor(hostRef) {
@@ -27,7 +27,7 @@ const PostTooltip = class {
         this.open = false;
     }
     validatePlacement() {
-        index$1.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
+        breakpoints.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
     }
     componentWillLoad() {
         this.validatePlacement();
@@ -71,7 +71,7 @@ const PostTooltip = class {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (index.h(index.Host, { key: '0755eeba6f7be3cd0d94138369355df9767ca541', "data-version": _package.version }, index.h("post-popovercontainer", { key: '1e1d71a4878e60f9e20b34b5f12588e09a8c7716', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '25a69d406a91cb0ba8d4c5fadee44d937c84a266' }))));
+        return (index.h(index.Host, { key: 'a9ce457973507a7cd05edb774c84c769ba11bcce', "data-version": _package.version }, index.h("post-popovercontainer", { key: '8fa8c699ddccd7d46f240992ab1d7e515637cab5', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '2ce3408b95a511b9c3c91905fff7142b3598fc55' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/utils-s05L2ulk.js

@@ -0,0 +1,26 @@
+'use strict';
+
+const headerEase = {
+    x1: 0.8,
+    y1: 0.2,
+    x2: 0.8,
+    y2: 0.7,
+};
+const PRESET_MAP = {
+    'linear': 'linear',
+    'ease': 'ease',
+    'ease-in': 'ease-in',
+    'ease-out': 'ease-out',
+    'ease-in-out': 'ease-in-out',
+    'headerEase': headerEase,
+};
+
+function resolveEasing(easing) {
+    const e = typeof easing === 'string' ? (PRESET_MAP[easing] ?? easing) : easing;
+    if (typeof e === 'string')
+        return e;
+    const { x1, y1, x2, y2 } = e;
+    return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
+}
+
+exports.resolveEasing = resolveEasing;

package/dist/collection/animations/collapse.js

@@ -1,9 +1,9 @@
-import { IS_BROWSER } from "../utils/index";
+import { IS_BROWSER, isMotionReduced } from "../utils/index";
 const collapseDuration = 350;
 const collapseEasing = 'ease';
-const collapsedKeyframe = { height: '0', overflow: 'hidden' };
+export const collapsedKeyframe = { height: '0', overflow: 'hidden' };
 const animationOptions = {
-    duration: collapseDuration,
+    duration: isMotionReduced() ? 0 : collapseDuration,
     easing: collapseEasing,
     fill: 'forwards',
 };

package/dist/collection/animations/fade-slide.js

@@ -0,0 +1,33 @@
+/**
+ * Used by
+ * 1. PostHeader (burger menu)
+ * 2. PostMegadropdown
+ * 3. BackToTopButton
+ */
+import { resolveEasing } from "./utils";
+const defaultOptions = {
+    duration: 500,
+    easing: 'ease',
+    fill: 'none',
+    translate: -100,
+};
+function animateFadeSlide(el, keyframes, options) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, {
+        duration,
+        easing: resolveEasing(easing),
+        fill,
+    });
+}
+export function fadeSlide(el, direction, options) {
+    if (!el)
+        return;
+    const mergedOptions = options;
+    const { translate } = mergedOptions;
+    const baseKeyframes = [
+        { opacity: '0', transform: `translateY(${translate}px)` },
+        { opacity: '1', transform: 'translateY(0px)' },
+    ];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateFadeSlide(el, keyframes, options);
+}

package/dist/collection/animations/fade.js

@@ -1,9 +1,21 @@
-const fadeDuration = 200;
-const fadedOutKeyframe = { opacity: '0' };
-const fadedInKeyframe = { opacity: '1' };
-export function fadeIn(el) {
-    return el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
+import { resolveEasing } from "./utils";
+const defaultOptions = {
+    duration: 200,
+    easing: 'linear',
+    fill: 'forwards',
+};
+function animateFade(el, keyframes, options = {}) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, {
+        duration,
+        easing: resolveEasing(easing),
+        fill,
+    });
 }
-export function fadeOut(el) {
-    return el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
+export function fade(el, direction, options = {}) {
+    if (!el)
+        return;
+    const baseKeyframes = [{ opacity: '0' }, { opacity: '1' }];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateFade(el, keyframes, options);
 }

package/dist/collection/animations/index.js

@@ -1 +1,3 @@
 export * from './fade';
+export * from './slide';
+export * from './fade-slide';

package/dist/collection/animations/slide.js

@@ -1,23 +1,27 @@
-const easing = 'ease';
-const duration = 500;
-const fill = 'forwards';
-export function slideUp(el, translateSize = '-100%') {
-    return el.animate([
-        { transform: 'translateY(0)' }, // Starting position (no translation)
-        { transform: `translateY(${translateSize})` }, // End position
-    ], {
-        duration: duration,
-        easing,
-        fill,
-    });
+/**
+ * Used by PostMegadropdown (burger menu)
+ */
+import { resolveEasing } from "./utils";
+const defaultOptions = {
+    translate: 100,
+    duration: 500,
+    easing: 'ease',
+    fill: 'none',
+};
+function animateSlide(el, keyframes, options) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, { duration, easing: resolveEasing(easing), fill });
 }
-export function slideDown(el, translateSize = '-100%') {
-    return el.animate([
-        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
-        { transform: 'translateY(0)' }, // End position
-    ], {
-        duration: duration,
-        easing,
-        fill,
-    });
+export function slide(el, direction, options = {}) {
+    const mergedOptions = {
+        ...defaultOptions,
+        ...options,
+    };
+    const { translate } = mergedOptions;
+    const baseKeyframes = [
+        { transform: `translateX(${translate}%)` },
+        { transform: 'translateX(0)' },
+    ];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateSlide(el, keyframes, options);
 }

package/dist/collection/animations/types.js

@@ -0,0 +1,14 @@
+const headerEase = {
+    x1: 0.8,
+    y1: 0.2,
+    x2: 0.8,
+    y2: 0.7,
+};
+export const PRESET_MAP = {
+    'linear': 'linear',
+    'ease': 'ease',
+    'ease-in': 'ease-in',
+    'ease-out': 'ease-out',
+    'ease-in-out': 'ease-in-out',
+    'headerEase': headerEase,
+};

package/dist/collection/animations/utils.js

@@ -0,0 +1,8 @@
+import { PRESET_MAP } from "./types";
+export function resolveEasing(easing) {
+    const e = typeof easing === 'string' ? (PRESET_MAP[easing] ?? easing) : easing;
+    if (typeof e === 'string')
+        return e;
+    const { x1, y1, x2, y2 } = e;
+    return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
+}

package/dist/collection/collection-manifest.json

@@ -14,11 +14,9 @@
     "components/post-footer/post-footer.js",
     "components/post-header/post-header.js",
     "components/post-icon/post-icon.js",
-    "components/post-language-option/post-language-option.js",
-    "components/post-language-switch/post-language-switch.js",
+    "components/post-language-menu/post-language-menu.js",
+    "components/post-language-menu-item/post-language-menu-item.js",
     "components/post-linkarea/post-linkarea.js",
-    "components/post-list/post-list.js",
-    "components/post-list-item/post-list-item.js",
     "components/post-logo/post-logo.js",
     "components/post-mainnavigation/post-mainnavigation.js",
     "components/post-megadropdown/post-megadropdown.js",
@@ -26,16 +24,20 @@
     "components/post-menu/post-menu.js",
     "components/post-menu-item/post-menu-item.js",
     "components/post-menu-trigger/post-menu-trigger.js",
+    "components/post-pagination/post-pagination.js",
     "components/post-popover/post-popover.js",
     "components/post-popover-trigger/post-popover-trigger.js",
     "components/post-popovercontainer/post-popovercontainer.js",
     "components/post-rating/post-rating.js",
-    "components/post-tab-header/post-tab-header.js",
+    "components/post-stepper/post-stepper.js",
+    "components/post-stepper-item/post-stepper-item.js",
+    "components/post-tab-item/post-tab-item.js",
     "components/post-tab-panel/post-tab-panel.js",
     "components/post-tabs/post-tabs.js",
     "components/post-togglebutton/post-togglebutton.js",
     "components/post-tooltip/post-tooltip.js",
-    "components/post-tooltip-trigger/post-tooltip-trigger.js"
+    "components/post-tooltip-trigger/post-tooltip-trigger.js",
+    "utils/tests/environment/post-env-test.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -1 +1 @@
-:host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}
+:host{display:block;border-block-start:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}