@swisspost/design-system-components 10.0.0-next.72 → 10.0.0-next.76

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

@@ -1,15 +1,16 @@
 'use strict';
 
-var index = require('./index-ngUOBQot.js');
+var index = require('./index-BqngpwGa.js');
 var fade = require('./fade-CPQhl1fP.js');
 require('./breakpoints-B0Olgvgc.js');
 var componentOnReady = require('./component-on-ready-CifOTqw1.js');
-var _package = require('./package-Bi-tiNRc.js');
-var type = require('./type-shT641Eo.js');
+var _package = require('./package-B0PdQ0Dm.js');
+var oneOf = require('./one-of-D1veqtsm.js');
+var type = require('./type-D8eD1JMd.js');
 require('./utils-s05L2ulk.js');
-require('./create-validator-decorator-Bnx17kwi.js');
+require('./create-validator-decorator-4dRrOF30.js');
 
-const postTabsCss = () => `.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}:host([full-width=true]) .tabs-wrapper{margin-inline:calc(-1*var(--post-container-offset))}:host([full-width=true]) .tabs-wrapper .tabs{padding-inline:var(--post-container-offset)}`;
+const postTabsCss = () => `:host{display:block}:host .tabs-wrapper{position:relative;display:flex;align-items:center}:host .tabs-wrapper button.scroll-btn{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;align-items:center;justify-content:center;transition:background-color 100ms,border-color 100ms,color 100ms;cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn{background-color:ButtonFace !important}:host .tabs-wrapper button.scroll-btn:hover{background-color:Highlight !important}}:host .tabs-wrapper button.scroll-btn post-icon{color:currentColor}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn post-icon{color:Highlight}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:hover post-icon{color:canvas}}:host .tabs-wrapper button.scroll-btn[hidden]{display:none}:host .tabs-wrapper button.scroll-btn{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 .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*var(--post-device-border-width-default)) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){transition:none}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus):hover{color:HighlightText;border-color:HighlightText}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*var(--post-device-border-width-default)) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){transition:none}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus):hover{color:HighlightText;border-color:HighlightText}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .tabs-wrapper .tabs{overflow-x:hidden;background-color:rgba(0,0,0,0) !important;display:flex;flex-wrap:nowrap;align-items:end;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}:host(.page-tabs){overflow:visible !important}:host(.page-tabs) .tabs-wrapper{margin-inline:calc(-1*(var(--post-container-offset) + var(--post-device-grid-padding-inline-container)))}:host(.page-tabs) .tabs-wrapper button.scroll-btn{color:var(--post-scheme-color-interactive-primary-enabled-fg5);background-color:var(--post-scheme-color-interactive-primary-enabled-bg5);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke);position:absolute;z-index:2;box-shadow:var(--post-device-elevation-200);border-radius:var(--post-device-border-radius-2)}:host(.page-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-primary-hover-fg4);background-color:var(--post-scheme-color-interactive-primary-hover-bg8)}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-left{inset-inline-start:calc(var(--post-container-offset) + var(--post-device-grid-padding-inline-container));border-inline-start:none;border-radius:0 var(--post-device-border-radius-2) var(--post-device-border-radius-2) 0}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-right{inset-inline-end:calc(var(--post-container-offset) + var(--post-device-grid-padding-inline-container));border-inline-end:none;border-radius:var(--post-device-border-radius-2) 0 0 var(--post-device-border-radius-2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn{background-color:Highlight;color:HighlightText}}:host(.page-tabs) .tabs-wrapper::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:var(--post-device-border-width-default);background-color:var(--post-palette-color-nested-tabs-page-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper::after{background-color:LinkText}}:host(.page-tabs) .tabs-wrapper .tabs{padding-inline:calc(var(--post-container-offset) + var(--post-device-grid-padding-inline-container));gap:var(--post-device-spacing-gap-inline-5);scrollbar-width:none}:host(.page-tabs) .tabs-wrapper .tabs::-webkit-scrollbar{display:none}:host(.page-tabs:not([size=small])) button.scroll-btn{top:var(--post-device-spacing-padding-block-35)}:host(.page-tabs[size=small]) button.scroll-btn{top:var(--post-device-spacing-padding-block-8)}:host(.content-tabs) .tabs-wrapper button.scroll-btn{flex-shrink:0;color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{color:HighlightText}}:host(.page-tabs:not([size=small])) .tabs-wrapper button.scroll-btn{height:var(--post-device-sizing-interactive-button-height-10);width:var(--post-device-sizing-interactive-button-width-1)}:host(.page-tabs:not([size=small])) .tabs-wrapper button.scroll-btn.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-38) var(--post-device-spacing-padding-39)}:host(.page-tabs:not([size=small])) .tabs-wrapper button.scroll-btn.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-39) var(--post-device-spacing-padding-38)}:host([size=small]) .tabs-wrapper button.scroll-btn{height:var(--post-device-sizing-interactive-button-size-1);width:var(--post-device-sizing-interactive-button-size-1)}:host([size=small]) .tabs-wrapper button.scroll-btn.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-41) var(--post-device-spacing-padding-42)}:host([size=small]) .tabs-wrapper button.scroll-btn.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-42) var(--post-device-spacing-padding-41)}:host([size=small]) .tabs-wrapper button.scroll-btn post-icon{height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4)}`;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -25,14 +26,37 @@ const PostTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.postChange = index.createEvent(this, "postChange");
+        this.showing = null;
+        this.hiding = null;
         this.isLoaded = false;
-        this.isNavigationMode = false;
+        this.isPagesVariant = false;
+        this.showLeftScrollButton = false;
+        this.showRightScrollButton = 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.
+         * An accessible label for the "previous tab items" button.
          */
-        this.fullWidth = false;
+        this.textPrevTabItems = 'Previous tab items';
+        /**
+         * An accessible label for the "next tab items" button.
+         */
+        this.textNextTabItems = 'Next tab items';
+        /**
+         * The size of the tabs, corresponding to the different designs in Figma.
+         * Default is 'large'.
+         */
+        this.size = 'large';
+        // Handles the visibility of scroll buttons based on the scroll position of the tabs container
+        this.updateScrollButtons = () => {
+            if (!this.tabsContainer)
+                return;
+            const style = getComputedStyle(this.tabsContainer);
+            const paddingStart = Number.parseFloat(style.paddingInlineStart) || 0;
+            const paddingEnd = Number.parseFloat(style.paddingInlineEnd) || 0;
+            const contentWidth = this.tabsContainer.clientWidth - paddingStart - paddingEnd;
+            const scrollableWidth = this.tabsContainer.scrollWidth - paddingStart - paddingEnd;
+            this.showLeftScrollButton = this.tabsContainer.scrollLeft > 0;
+            this.showRightScrollButton = this.tabsContainer.scrollLeft + contentWidth < scrollableWidth;
+        };
     }
     get tabs() {
         return Array.from(this.host.querySelectorAll('post-tab-item')).filter(tab => tab.closest('post-tabs') === this.host);
@@ -41,29 +65,38 @@ const PostTabs = class {
         return Array.from(this.host.querySelectorAll('post-tab-panel')).filter(panel => panel.closest('post-tabs') === this.host);
     }
     validateLabel() {
-        if (this.isNavigationMode && !this.label) {
-            console.error(`[${this.host.localName}] Property "label" is required in navigation mode. Received: ${JSON.stringify(this.label)}.`, this.host);
+        if (this.isPagesVariant && !this.label) {
+            console.error(`[${this.host.localName}] Property "label" is required in Pages variant. Received: ${JSON.stringify(this.label)}.`, this.host);
         }
     }
     componentWillRender() {
-        this.detectMode();
+        this.detectVariant();
     }
     componentDidLoad() {
+        // Programmatically associates the scroll buttons with the tabs container via the ARIA reflection API, avoiding the need for ID-based aria-controls attributes.
+        this.leftScrollButton.ariaControlsElements = [this.tabsContainer];
+        this.rightScrollButton.ariaControlsElements = [this.tabsContainer];
         this.moveMisplacedTabs();
         this.moveMisplacedPanels();
         this.enableTabs();
+        this.handleScrollButtons();
         this.setupContentObserver();
+        this.setupResizeObserver();
         this.validateLabel();
-        if (this.isNavigationMode) {
-            const activeTab = this.findActiveNavigationTab();
+        if (this.isPagesVariant) {
+            const activeTab = this.findActivePagesTab();
             if (activeTab) {
                 this.activateTab(activeTab);
+                this.scrollTabIntoView(activeTab);
             }
         }
         else {
             const tabToActivate = this.activeTab || this.tabs[0]?.name;
             if (tabToActivate) {
                 void this.show(tabToActivate);
+                const activeTab = this.tabs.find(t => t.name === tabToActivate);
+                if (activeTab)
+                    this.scrollTabIntoView(activeTab);
             }
         }
         this.isLoaded = true;
@@ -78,35 +111,43 @@ const PostTabs = class {
             this.hiding = null;
         }
         if (this.contentObserver) {
-            this.contentObserver.disconnect();
+            this.contentObserver?.disconnect();
         }
+        this.resizeObserver?.disconnect();
+        // Remove scroll event listener
+        this.tabsContainer?.removeEventListener('scroll', this.updateScrollButtons);
     }
     setupContentObserver() {
         const config = {
             childList: true,
             subtree: true,
             attributes: true,
-            attributeFilter: ['data-navigation-mode', 'aria-current'],
+            attributeFilter: ['data-pages-variant', 'aria-current'],
         };
         this.contentObserver = new MutationObserver(this.handleContentChange.bind(this));
-        this.contentObserver.observe(this.host, config);
+        this.contentObserver?.observe(this.host, config);
+    }
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver(this.updateScrollButtons);
+        this.resizeObserver.observe(this.tabsContainer);
     }
     handleContentChange(mutations) {
-        const shouldRedetect = this.shouldRedetectMode(mutations);
+        const shouldRedetect = this.shouldRedetectVariant(mutations);
         const ariaCurrentChanged = this.hasAriaCurrentChanged(mutations);
-        if (ariaCurrentChanged && this.isNavigationMode) {
-            this.updateActiveNavigationTab();
+        if (ariaCurrentChanged && this.isPagesVariant) {
+            this.updateActivePagesTab();
         }
         if (shouldRedetect) {
-            this.handleModeChange();
+            this.handleVariantChange();
         }
+        this.updateScrollButtons();
     }
-    shouldRedetectMode(mutations) {
+    shouldRedetectVariant(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') {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'data-pages-variant') {
                 return true;
             }
             return false;
@@ -115,25 +156,27 @@ const PostTabs = class {
     hasAriaCurrentChanged(mutations) {
         return mutations.some(mutation => mutation.type === 'attributes' && mutation.attributeName === 'aria-current');
     }
-    updateActiveNavigationTab() {
-        const activeTab = this.findActiveNavigationTab();
+    updateActivePagesTab() {
+        const activeTab = this.findActivePagesTab();
         if (activeTab && activeTab !== this.currentActiveTab) {
             this.activateTab(activeTab);
+            this.scrollTabIntoView(activeTab, 'smooth');
         }
     }
-    handleModeChange() {
-        const previousMode = this.isNavigationMode;
-        this.detectMode();
-        if (previousMode !== this.isNavigationMode) {
+    handleVariantChange() {
+        const previousVariant = this.isPagesVariant;
+        this.detectVariant();
+        if (previousVariant !== this.isPagesVariant) {
             this.enableTabs();
             this.initializeActiveTab();
         }
     }
     initializeActiveTab() {
-        if (this.isNavigationMode) {
-            const activeTab = this.findActiveNavigationTab();
+        if (this.isPagesVariant) {
+            const activeTab = this.findActivePagesTab();
             if (activeTab) {
                 this.activateTab(activeTab);
+                this.scrollTabIntoView(activeTab);
             }
         }
         else {
@@ -143,21 +186,29 @@ const PostTabs = class {
             }
         }
     }
-    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 => {
+    detectVariant() {
+        // Identify Page Tabs variant by looking for anchor elements in tabs
+        // This works even before post-tab-item sets [data-pages-variant] attribute
+        const hasPages = this.tabs.some(tab => {
             const hasAnchor = tab.querySelector('a') !== null;
-            const navModeAttr = tab.dataset.navigationMode === 'true';
-            return hasAnchor || navModeAttr;
+            const pagesVariantAttr = tab.dataset.pagesVariant === 'true';
+            return hasAnchor || pagesVariantAttr;
         });
         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.');
+        if (hasPages && hasPanels) {
+            throw new Error('PostTabs: Mixed mode detected. Cannot use both Page Tabs (anchor elements) and Content Tabs (post-tab-panel elements) variants at the same time.');
+        }
+        this.isPagesVariant = hasPages;
+        // Removes variant related classes to reset the state and applies the newly detected variant
+        this.host.classList.remove('page-tabs', 'content-tabs');
+        if (this.isPagesVariant) {
+            this.host.classList.add('page-tabs');
+        }
+        else {
+            this.host.classList.add('content-tabs');
         }
-        this.isNavigationMode = hasNavigationTabs;
     }
-    findActiveNavigationTab() {
+    findActivePagesTab() {
         return (this.tabs.find(tab => {
             const anchor = tab.querySelector('a[aria-current="page"]');
             return anchor !== null;
@@ -168,30 +219,55 @@ const PostTabs = class {
      * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
      */
     async show(tabName) {
-        // do nothing if the tab is already active
-        if (tabName === this.currentActiveTab?.name) {
-            return;
+        try {
+            // do nothing if the tab is already active
+            if (tabName === this.currentActiveTab?.name) {
+                return;
+            }
+            const previousTab = this.currentActiveTab;
+            const newTab = this.host.querySelector(`post-tab-item[name="${tabName}"]`);
+            if (!newTab)
+                return;
+            this.activateTab(newTab);
+            this.scrollTabIntoView(newTab, 'smooth');
+            // if a panel is currently being displayed, remove it from the view and complete the associated animation
+            if (this.showing) {
+                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.name);
+            if (await this.awaitAnimation(this.hiding))
+                return;
+            this.showSelectedPanel();
+            if (await this.awaitAnimation(this.showing))
+                return;
+            if (this.isLoaded && this.currentActiveTab)
+                this.postChange.emit(this.currentActiveTab.name);
         }
-        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.finish();
-            this.showing = null;
+        catch (e) {
+            if (this.isAbortError(e))
+                return;
+            throw e;
         }
-        // hide the currently visible panel only if no other animation is running
-        if (previousTab && !this.showing && !this.hiding)
-            this.hidePanel(previousTab.name);
-        // wait for any hiding animation to complete before showing the selected tab
-        if (this.hiding)
-            await this.hiding.finished;
-        this.showSelectedPanel();
-        // wait for any display animation to complete for the returned promise to fully resolve
-        if (this.showing)
-            await this.showing.finished;
-        if (this.isLoaded)
-            this.postChange.emit(this.currentActiveTab.name);
+    }
+    // Awaits an animation; returns true if it was aborted (caller should bail out).
+    async awaitAnimation(animation) {
+        if (!animation)
+            return false;
+        try {
+            await animation.finished;
+            return false;
+        }
+        catch (e) {
+            if (this.isAbortError(e))
+                return true;
+            throw e;
+        }
+    }
+    isAbortError(error) {
+        return (error instanceof DOMException || error instanceof Error) && error.name === 'AbortError';
     }
     moveMisplacedTabs() {
         if (!this.tabs)
@@ -217,11 +293,11 @@ const PostTabs = class {
             return;
         this.tabs.forEach(async (tab) => {
             await componentOnReady.componentOnReady(tab);
-            // In navigation mode, navigation is handled by the consumer's routing
-            if (this.isNavigationMode) {
+            // In Page Tabs variant, navigation is handled by the consumer's routing
+            if (this.isPagesVariant) {
                 return;
             }
-            // Panel mode: set up ARIA relationships and event handlers
+            // Content Tabs variant: set up ARIA relationships and event handlers
             if (tab.getAttribute('aria-controls'))
                 return;
             const tabPanel = this.getPanel(tab.name);
@@ -237,6 +313,17 @@ const PostTabs = class {
                     e.preventDefault();
                     void this.show(tab.name);
                 }
+                if (e.key !== 'Home' && e.key !== 'End')
+                    return;
+                e.preventDefault();
+                const enabledTabs = this.tabs.filter(t => !t.hasAttribute('disabled'));
+                if (enabledTabs.length === 0)
+                    return;
+                const targetTab = e.key === 'Home' ? enabledTabs[0] : enabledTabs.at(-1);
+                if (targetTab) {
+                    targetTab?.focus();
+                    void this.show(targetTab.name);
+                }
             });
             tab.addEventListener('keydown', (e) => {
                 if (e.key === 'ArrowRight' || e.key === 'ArrowLeft')
@@ -251,14 +338,12 @@ const PostTabs = class {
     activateTab(tab) {
         // Deactivate previous tab
         if (this.currentActiveTab) {
-            this.currentActiveTab.classList.remove('active');
-            if (!this.isNavigationMode) {
+            if (!this.isPagesVariant) {
                 this.currentActiveTab.setAttribute('aria-selected', 'false');
                 this.currentActiveTab.setAttribute('tabindex', '-1');
             }
         }
-        tab.classList.add('active');
-        if (!this.isNavigationMode) {
+        if (!this.isPagesVariant) {
             tab.setAttribute('aria-selected', 'true');
             tab.setAttribute('tabindex', '0');
         }
@@ -275,6 +360,8 @@ const PostTabs = class {
         };
     }
     showSelectedPanel() {
+        if (!this.currentActiveTab)
+            return;
         const panel = this.getPanel(this.currentActiveTab.name);
         if (!panel)
             return;
@@ -304,12 +391,44 @@ const PostTabs = class {
         nextTab.focus();
         void this.show(nextTab.name);
     }
+    scrollTabs(direction) {
+        const sign = direction === 'prev' ? -1 : 1;
+        const style = getComputedStyle(this.tabsContainer);
+        const paddingStart = Number.parseFloat(style.paddingInlineStart) || 0;
+        const paddingEnd = Number.parseFloat(style.paddingInlineEnd) || 0;
+        const contentWidth = this.tabsContainer.clientWidth - paddingStart - paddingEnd;
+        this.tabsContainer.scrollBy({
+            left: sign * contentWidth,
+            behavior: 'smooth',
+        });
+    }
+    scrollTabIntoView(tab, behavior = 'instant') {
+        const container = this.tabsContainer;
+        const style = getComputedStyle(container);
+        const paddingStart = Number.parseFloat(style.paddingInlineStart) || 0;
+        const paddingEnd = Number.parseFloat(style.paddingInlineEnd) || 0;
+        const tabLeft = tab.offsetLeft;
+        const tabRight = tabLeft + tab.offsetWidth;
+        const containerLeft = container.scrollLeft + paddingStart;
+        const containerRight = containerLeft + container.clientWidth - paddingStart - paddingEnd;
+        if (tabLeft < containerLeft) {
+            container.scrollTo({ left: tabLeft - paddingStart, behavior });
+        }
+        else if (tabRight > containerRight) {
+            container.scrollTo({ left: tabRight - container.clientWidth + paddingEnd, behavior });
+        }
+    }
+    handleScrollButtons() {
+        this.updateScrollButtons();
+        this.tabsContainer.addEventListener('scroll', this.updateScrollButtons);
+    }
     render() {
-        const TabsContainer = this.isNavigationMode ? 'nav' : 'div';
-        return (index.h(index.Host, { key: '3b674ed455e34a7efc1c1ffed14ac719a7ecb061', "data-version": _package.version }, index.h("div", { key: '749f4695adc7c3125bfb678606249c48a4d7ea31', class: "tabs-wrapper", part: "post-tabs" }, index.h(TabsContainer, { key: 'c06c83dbcbdf9f3fd38f01db7beae181748b369d', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, index.h("slot", { key: 'b065d0200fb2d4b6a63e23141d3e625a4147a93d', onSlotchange: () => {
+        const TabsContainer = this.isPagesVariant ? 'nav' : 'div';
+        const style = undefined;
+        return (index.h(index.Host, { key: '3e187db1375d551ac80bb4facced0ad4d01ec3fd', "data-version": _package.version, style: style }, index.h("div", { key: '8efd1434819801304bb218bf8af2a9c570153d70', class: "tabs-wrapper", part: "post-tabs" }, index.h("button", { key: '50d03d1a84e1f92c915d11e9b161498bd938b713', ref: el => (this.leftScrollButton = el), class: "scroll-btn scroll-btn-left", type: "button", "aria-label": this.textPrevTabItems, tabindex: this.showLeftScrollButton ? 0 : -1, hidden: !this.showLeftScrollButton, onClick: () => this.scrollTabs('prev') }, index.h("post-icon", { key: 'f767e493126954bd9246b4c161aa197f5fe48fcc', name: "chevronleft" })), index.h(TabsContainer, { key: 'f319b638b3fdfb46d5e793001192bb96e4763cca', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, index.h("slot", { key: '65d15b30402eaf835f506f4cf24dd6373a632c52', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } }))), !this.isNavigationMode && (index.h("div", { key: '8dc41274f8c9da24b2d65eebf213ea35c41368d0', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: 'e859256ebcb60fc0457349ca991508406b3bc309', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } })), index.h("button", { key: 'f18317a83f6bd1c28c455ad6cfc8d58cd83c52d2', ref: el => (this.rightScrollButton = el), class: "scroll-btn scroll-btn-right", type: "button", "aria-label": this.textNextTabItems, tabindex: this.showRightScrollButton ? 0 : -1, hidden: !this.showRightScrollButton, onClick: () => this.scrollTabs('next') }, index.h("post-icon", { key: 'fcc75e1de8c39f3e3e2864e3439e85881001c73c', name: "chevronright" }))), !this.isPagesVariant && (index.h("div", { key: '487435bf4d776f1771eff2c735e3476a05ef68c4', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: 'bbe284adfc74d502a77ceaade18179101f6aaf30', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -318,6 +437,9 @@ const PostTabs = class {
             }]
     }; }
 };
+__decorate([
+    oneOf.OneOf(['small', 'large'])
+], PostTabs.prototype, "size", void 0);
 __decorate([
     type.Type('string')
 ], PostTabs.prototype, "label", void 0);

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-ngUOBQot.js');
+var index = require('./index-BqngpwGa.js');
 require('./breakpoints-B0Olgvgc.js');
-var _package = require('./package-Bi-tiNRc.js');
-var required = require('./required-lRDOdbd6.js');
-var type = require('./type-shT641Eo.js');
-require('./create-validator-decorator-Bnx17kwi.js');
+var _package = require('./package-B0PdQ0Dm.js');
+var required = require('./required-Bkz8MOYa.js');
+var type = require('./type-D8eD1JMd.js');
+require('./create-validator-decorator-4dRrOF30.js');
 
 const postTooltipTriggerCss = () => `post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}`;
 
@@ -19,7 +19,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
+const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout'];
 let isFocusable;
 const PostTooltipTrigger = class {
     constructor(hostRef) {
@@ -45,8 +45,6 @@ const PostTooltipTrigger = class {
     }
     componentWillLoad() {
         {
-            // Fire-and-forget: long-press-event registers a global event listener on import.
-            Promise.resolve().then(function () { return require('./long-press-event-Dx21Ojod.js'); });
             // Load ally.js lazily; setupTrigger uses optional chaining to handle the
             // case where it hasn't loaded yet (falls back to adding tabindex="0").
             Promise.resolve().then(function () { return require('./focusable-COT2uiEV.js'); }).then(function (n) { return n.focusable; }).then(m => {
@@ -186,7 +184,7 @@ const PostTooltipTrigger = class {
         this.tooltip?.hide();
     }
     render() {
-        return (index.h(index.Host, { key: 'a1f51fabc4417e30a2b3454f9faf239a3a1f8071', "data-version": _package.version }, index.h("slot", { key: '0ee1caede699ad7bc0c529f6fd1dd85c63107136', onSlotchange: () => this.handleSlotChange() })));
+        return (index.h(index.Host, { key: '37f835a46c96f1f97019b611da8b6be2d6e1a8d7', "data-version": _package.version }, index.h("slot", { key: 'c2fc3d9080948fdcfbd8b2866730e76b770b87ba', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-ngUOBQot.js');
+var index = require('./index-BqngpwGa.js');
 var placement = require('./placement-qEFR9hmI.js');
 require('./breakpoints-B0Olgvgc.js');
-var _package = require('./package-Bi-tiNRc.js');
-var oneOf = require('./one-of-BHyX4vYq.js');
-require('./create-validator-decorator-Bnx17kwi.js');
+var _package = require('./package-B0PdQ0Dm.js');
+var oneOf = require('./one-of-D1veqtsm.js');
+require('./create-validator-decorator-4dRrOF30.js');
 
 const postTooltipCss = () => `:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer{--post-current-bg:var(--post-scheme-color-surface-accent-bg);--post-current-fg:var(--post-scheme-color-surface-accent-fg);--post-popovercontainer-arrow-border-width:var(--post-device-border-width-alternative1);--post-popovercontainer-arrow-border-color:var(--post-scheme-color-surface-accent-fg)}post-popovercontainer::part(post-popovercontainer-border-mask){display:block;box-shadow:inset 0 0 0 var(--post-device-spacing-padding-14) var(--post-scheme-color-surface-accent-bg)}post-popovercontainer::part(post-popovercontainer-content){border:var(--post-device-border-width-alternative1) solid var(--post-scheme-color-surface-accent-fg);border-radius:var(--post-device-border-radius-1);padding:var(--post-device-spacing-padding-14) var(--post-device-spacing-padding-15);font-size:var(--post-device-font-size-9);max-width:var(--post-tooltip-max-width, 280px);width:inherit;word-wrap:break-word;white-space:normal}`;
 
@@ -45,8 +45,8 @@ const PostTooltip = class {
         }
     }
     /**
-     * Programmatically display the tooltip.
-     * @param target An element where the tooltip should be shown
+     * Programmatically display the tooltip,
+     * `target` is the HTML element the menu is anchored to.
      */
     async show(target) {
         if (this.open)
@@ -60,9 +60,8 @@ const PostTooltip = class {
         this.popoverRef.hide();
     }
     /**
-     * Toggle tooltip display.
-     * @param target An element where the tooltip should be shown
-     * @param [force] Pass true to always show or false to always hide
+     * Toggle tooltip display,
+     * `target` is the HTML element the menu is anchored to.
      */
     async toggle(target, force) {
         this.popoverRef.toggle(target, force);
@@ -76,7 +75,7 @@ const PostTooltip = class {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (index.h(index.Host, { key: '8186d5446993e1c21c107a496239e56af2493e87', "data-version": _package.version }, index.h("post-popovercontainer", { key: '6f916cddf8f3b577b7920b02c001905b782b6ff7', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '0443322d0ef00792b14e69fd55abaf42f64c0838' }))));
+        return (index.h(index.Host, { key: 'd49731becbb7395ec68cfae34d316a6248977b53', "data-version": _package.version }, index.h("post-popovercontainer", { key: '12da18a58c2143ef4c2ddff207d081d091e6a40e', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '5f941c0311eff468be1c6abe7cbcdab8ba272e15' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{required-lRDOdbd6.js → required-Bkz8MOYa.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var createValidatorDecorator = require('./create-validator-decorator-Bnx17kwi.js');
+var createValidatorDecorator = require('./create-validator-decorator-4dRrOF30.js');
 
 /**
  * Property decorator that validates the property is not empty.

package/dist/cjs/{type-shT641Eo.js → type-D8eD1JMd.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var createValidatorDecorator = require('./create-validator-decorator-Bnx17kwi.js');
+var createValidatorDecorator = require('./create-validator-decorator-4dRrOF30.js');
 
 /**
  * Property decorator that validates the property value is of the specified type.

package/dist/cjs/{url-DRUMqVBq.js → url-C7MnIIZ_.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var createValidatorDecorator = require('./create-validator-decorator-Bnx17kwi.js');
+var createValidatorDecorator = require('./create-validator-decorator-4dRrOF30.js');
 
 /**
  * Property decorator that validates the property value is a valid URL.

package/dist/collection/collection-manifest.json

@@ -1,6 +1,5 @@
 {
   "entries": [
-    "components/post-date-picker/post-date-picker.js",
     "components/post-accordion/post-accordion.js",
     "components/post-accordion-item/post-accordion-item.js",
     "components/post-autocomplete/post-autocomplete.js",
@@ -12,6 +11,7 @@
     "components/post-closebutton/post-closebutton.js",
     "components/post-collapsible/post-collapsible.js",
     "components/post-collapsible-trigger/post-collapsible-trigger.js",
+    "components/post-date-picker/post-date-picker.js",
     "components/post-footer/post-footer.js",
     "components/post-header/post-header.js",
     "components/post-icon/post-icon.js",
@@ -20,7 +20,6 @@
     "components/post-linkarea/post-linkarea.js",
     "components/post-listbox/post-listbox.js",
     "components/post-listbox-option/post-listbox-option.js",
-    "components/post-login-widget/post-login-widget.js",
     "components/post-logo/post-logo.js",
     "components/post-mainnavigation/post-mainnavigation.js",
     "components/post-megadropdown/post-megadropdown.js",
@@ -35,6 +34,8 @@
     "components/post-popovercontainer/post-popovercontainer.js",
     "components/post-progressbar/post-progressbar.js",
     "components/post-rating/post-rating.js",
+    "components/post-side-navigation/post-side-navigation.js",
+    "components/post-side-navigation-trigger/post-side-navigation-trigger.js",
     "components/post-stepper/post-stepper.js",
     "components/post-stepper-item/post-stepper-item.js",
     "components/post-tab-item/post-tab-item.js",

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

@@ -96,7 +96,7 @@ export class PostAccordion {
         });
     }
     render() {
-        return (h(Host, { key: '27862337a90223900241d38a1b1d27cb5923acba', "data-version": version }, h("div", { key: 'e858da8742240aa57f72ac04a4253d5e88910295', class: "accordion" }, h("slot", { key: '004ab6089b44a2528ea56cffed3bef0791dae068', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '4e3df581ac99aa14dfaaab836c90cee788607a76', "data-version": version }, h("div", { key: '425615868542199dc79439d04b9ca9ba815b05f3', class: "accordion" }, h("slot", { key: 'ba7c05b69377101275cd76ecffb476516ca52c83', onSlotchange: () => this.registerAccordionItems() }))));
     }
     static get is() { return "post-accordion"; }
     static get encapsulation() { return "shadow"; }