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

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

@@ -1,13 +1,14 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BGeKgZqi.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
 import { f as fade } from './fade-DsgPYmAa.js';
 import './breakpoints-BQ3HlJPr.js';
 import { c as componentOnReady } from './component-on-ready-lpWRZjJp.js';
-import { v as version } from './package-CdhbouMD.js';
-import { T as Type } from './type-icZlikjf.js';
+import { v as version } from './package-d02KpeUM.js';
+import { O as OneOf } from './one-of-Ug1_Xoes.js';
+import { T as Type } from './type-S-4aPMGU.js';
 import './utils-CoDiS_Ik.js';
-import './create-validator-decorator-BNkS_yAb.js';
+import './create-validator-decorator-CYYTw0AS.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;
@@ -23,14 +24,37 @@ const PostTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postChange = 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);
@@ -39,29 +63,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;
@@ -76,35 +109,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;
@@ -113,25 +154,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 {
@@ -141,21 +184,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;
@@ -166,30 +217,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)
@@ -215,11 +291,11 @@ const PostTabs = class {
             return;
         this.tabs.forEach(async (tab) => {
             await 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);
@@ -235,6 +311,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')
@@ -249,14 +336,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');
         }
@@ -273,6 +358,8 @@ const PostTabs = class {
         };
     }
     showSelectedPanel() {
+        if (!this.currentActiveTab)
+            return;
         const panel = this.getPanel(this.currentActiveTab.name);
         if (!panel)
             return;
@@ -302,12 +389,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 (h(Host, { key: 'b3e12dd13b78c6533ce53518686b14e685b8871f', "data-version": version }, h("div", { key: '8e54f84852dc786de9cabbe9628083e858b068ee', class: "tabs-wrapper", part: "post-tabs" }, h(TabsContainer, { key: '029b0a4afae2af2e6d899740a78efd56ed87736e', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, h("slot", { key: 'c5c1bfac69bbe3b0ce33fc9069dd87c15013e9df', onSlotchange: () => {
+        const TabsContainer = this.isPagesVariant ? 'nav' : 'div';
+        const style = undefined;
+        return (h(Host, { key: '3e187db1375d551ac80bb4facced0ad4d01ec3fd', "data-version": version, style: style }, h("div", { key: '8efd1434819801304bb218bf8af2a9c570153d70', class: "tabs-wrapper", part: "post-tabs" }, 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') }, h("post-icon", { key: 'f767e493126954bd9246b4c161aa197f5fe48fcc', name: "chevronleft" })), h(TabsContainer, { key: 'f319b638b3fdfb46d5e793001192bb96e4763cca', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, h("slot", { key: '65d15b30402eaf835f506f4cf24dd6373a632c52', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } }))), !this.isNavigationMode && (h("div", { key: 'c9fdccc7b840b1f6d9d2eb3c7f99daeb7cbd658c', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: '708abcc8ead9142976b7165d0626a3e51a219c14', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } })), 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') }, h("post-icon", { key: 'fcc75e1de8c39f3e3e2864e3439e85881001c73c', name: "chevronright" }))), !this.isPagesVariant && (h("div", { key: '487435bf4d776f1771eff2c735e3476a05ef68c4', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: 'bbe284adfc74d502a77ceaade18179101f6aaf30', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -316,6 +435,9 @@ const PostTabs = class {
             }]
     }; }
 };
+__decorate([
+    OneOf(['small', 'large'])
+], PostTabs.prototype, "size", void 0);
 __decorate([
     Type('string')
 ], PostTabs.prototype, "label", void 0);

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-BGeKgZqi.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
 import './breakpoints-BQ3HlJPr.js';
-import { v as version } from './package-CdhbouMD.js';
-import { R as Required } from './required-DhBxDSbP.js';
-import { T as Type } from './type-icZlikjf.js';
-import './create-validator-decorator-BNkS_yAb.js';
+import { v as version } from './package-d02KpeUM.js';
+import { R as Required } from './required-DeOhRbtk.js';
+import { T as Type } from './type-S-4aPMGU.js';
+import './create-validator-decorator-CYYTw0AS.js';
 
 const postTooltipTriggerCss = () => `post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}`;
 
@@ -17,7 +17,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) {
@@ -43,8 +43,6 @@ const PostTooltipTrigger = class {
     }
     componentWillLoad() {
         {
-            // Fire-and-forget: long-press-event registers a global event listener on import.
-            import('./long-press-event-BNgqqRsB.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").
             import('./focusable-C7afHKmo.js').then(function (n) { return n.f; }).then(m => {
@@ -184,7 +182,7 @@ const PostTooltipTrigger = class {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '9972655e65d8d435984e364f1413d9830c6564ba', "data-version": version }, h("slot", { key: '6e0365125b13790b69e89c68238d4895eb3619ac', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '37f835a46c96f1f97019b611da8b6be2d6e1a8d7', "data-version": version }, h("slot", { key: 'c2fc3d9080948fdcfbd8b2866730e76b770b87ba', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-BGeKgZqi.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
 import { P as PLACEMENT_TYPES } from './placement-DRiVosES.js';
 import './breakpoints-BQ3HlJPr.js';
-import { v as version } from './package-CdhbouMD.js';
-import { O as OneOf } from './one-of-4BD_5pKR.js';
-import './create-validator-decorator-BNkS_yAb.js';
+import { v as version } from './package-d02KpeUM.js';
+import { O as OneOf } from './one-of-Ug1_Xoes.js';
+import './create-validator-decorator-CYYTw0AS.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}`;
 
@@ -43,8 +43,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)
@@ -58,9 +58,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);
@@ -74,7 +73,7 @@ const PostTooltip = class {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: '51fe8169b0aea1286928a11c4bdde5f7a4820d30', "data-version": version }, h("post-popovercontainer", { key: '4f27f1dc5d430da8aa30f54a0d6aca0e6b91d78b', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '7a5ae44acb74a21d0ff2a871053e5055921afb41' }))));
+        return (h(Host, { key: 'd49731becbb7395ec68cfae34d316a6248977b53', "data-version": version }, 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) }, h("slot", { key: '5f941c0311eff468be1c6abe7cbcdab8ba272e15' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/{required-DhBxDSbP.js → required-DeOhRbtk.js}

@@ -1,4 +1,4 @@
-import { c as createValidatorDecorator, g as getValidationContext, i as isValueEmpty, r as registerDependency } from './create-validator-decorator-BNkS_yAb.js';
+import { c as createValidatorDecorator, g as getValidationContext, i as isValueEmpty, r as registerDependency } from './create-validator-decorator-CYYTw0AS.js';
 
 /**
  * Property decorator that validates the property is not empty.

package/dist/esm/{type-icZlikjf.js → type-S-4aPMGU.js}

@@ -1,4 +1,4 @@
-import { c as createValidatorDecorator, g as getValidationContext } from './create-validator-decorator-BNkS_yAb.js';
+import { c as createValidatorDecorator, g as getValidationContext } from './create-validator-decorator-CYYTw0AS.js';
 
 /**
  * Property decorator that validates the property value is of the specified type.

package/dist/esm/{url-B_2x2YCy.js → url-C8KSrmWc.js}

@@ -1,4 +1,4 @@
-import { c as createValidatorDecorator, g as getValidationContext } from './create-validator-decorator-BNkS_yAb.js';
+import { c as createValidatorDecorator, g as getValidationContext } from './create-validator-decorator-CYYTw0AS.js';
 
 /**
  * Property decorator that validates the property value is a valid URL.

package/dist/post-components/p-0efb77f9.entry.js

@@ -0,0 +1 @@
+import{r as t,c as o,h as e,H as i}from"./p-DE1aWdqx.js";import{v as s}from"./p-d02KpeUM.js";const n=class{constructor(e){t(this,e),this.postOptionSelected=o(this,"postOptionSelected"),this.optionId=crypto.randomUUID(),this.selected=!1,this.highlighted=!1}render(){return e(i,{key:"ff0e773f8a89f9df3996a83cd2be6247c1ab5475","data-version":s,role:"option","aria-selected":`${this.selected}`,"data-active":this.highlighted?"true":null,onPointerDown:t=>t.preventDefault(),onClick:()=>this.postOptionSelected.emit(this.value),id:`post-listbox-option-${this.optionId}`},e("span",{key:"cb43e8bec5f262ae25ddfdcae1b7f9979bdd6858",class:"option-content"},this.value,e("span",{key:"5b314c41073a357185613a04a07d2020e4eab300",class:"option-description"},e("slot",{key:"ac1ed1be98f9a348952c0169d7ec89f8aaa99474"}))),this.selected&&e("post-icon",{key:"7691085df732c0c2c5db9824587d54047017adf5","aria-hidden":"true",name:"checkmark"}))}};n.style=":host{padding:12px 12px 9px 16px;background-color:#fff;cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;justify-content:space-between}:host(:hover){background-color:#f0efed}:host([data-active=true]){outline:2px solid #000;outline-offset:-4px}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid #050400;outline-offset:2px}.option-content{display:flex;flex-direction:column;min-width:0}.option-description{display:none;font-size:.85em;color:#666}:host(:not(:empty)) .option-description{display:block}post-icon{width:24px;height:24px}";export{n as post_listbox_option}