@swisspost/internet-header 1.17.0 → 10.1.0

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

@@ -0,0 +1,447 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-MGiZpKVI.js');
+var componentOnReady = require('./component-on-ready-CifOTqw1.js');
+var fade = require('./fade-CPQhl1fP.js');
+var oneOf = require('./one-of-7TSi182P.js');
+var type = require('./type-CAeEC3oM.js');
+require('./utils-s05L2ulk.js');
+require('./create-validator-decorator-CJK3Xf77.js');
+
+const postTabsCss = () => `:host{display:block}:host .tabs-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;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;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:background-color 100ms,border-color 100ms,color 100ms;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){-webkit-transition:none;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){-webkit-transition:none;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:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:end;align-items:end;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;-webkit-padding-start: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)))}: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;-webkit-box-shadow:var(--post-device-elevation-200);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:0;-webkit-border-start:none;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:0;-webkit-border-end:none;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));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{-ms-flex-negative:0;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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                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 PostTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.postChange = index.createEvent(this, "postChange");
+        this.showing = null;
+        this.hiding = null;
+        this.isLoaded = false;
+        this.isPagesVariant = false;
+        this.showLeftScrollButton = false;
+        this.showRightScrollButton = false;
+        /**
+         * An accessible label for the "previous tab items" button.
+         */
+        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);
+    }
+    get panels() {
+        return Array.from(this.host.querySelectorAll('post-tab-panel')).filter(panel => panel.closest('post-tabs') === this.host);
+    }
+    validateLabel() {
+        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.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.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;
+    }
+    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();
+        }
+        this.resizeObserver?.disconnect();
+        // Remove scroll event listener
+        this.tabsContainer?.removeEventListener('scroll', this.updateScrollButtons);
+    }
+    setupContentObserver() {
+        const config = {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-pages-variant', 'aria-current'],
+        };
+        this.contentObserver = new MutationObserver(this.handleContentChange.bind(this));
+        this.contentObserver?.observe(this.host, config);
+    }
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver(this.updateScrollButtons);
+        this.resizeObserver.observe(this.tabsContainer);
+    }
+    handleContentChange(mutations) {
+        const shouldRedetect = this.shouldRedetectVariant(mutations);
+        const ariaCurrentChanged = this.hasAriaCurrentChanged(mutations);
+        if (ariaCurrentChanged && this.isPagesVariant) {
+            this.updateActivePagesTab();
+        }
+        if (shouldRedetect) {
+            this.handleVariantChange();
+        }
+        this.updateScrollButtons();
+    }
+    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-pages-variant') {
+                return true;
+            }
+            return false;
+        });
+    }
+    hasAriaCurrentChanged(mutations) {
+        return mutations.some(mutation => mutation.type === 'attributes' && mutation.attributeName === 'aria-current');
+    }
+    updateActivePagesTab() {
+        const activeTab = this.findActivePagesTab();
+        if (activeTab && activeTab !== this.currentActiveTab) {
+            this.activateTab(activeTab);
+            this.scrollTabIntoView(activeTab, 'smooth');
+        }
+    }
+    handleVariantChange() {
+        const previousVariant = this.isPagesVariant;
+        this.detectVariant();
+        if (previousVariant !== this.isPagesVariant) {
+            this.enableTabs();
+            this.initializeActiveTab();
+        }
+    }
+    initializeActiveTab() {
+        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);
+            }
+        }
+    }
+    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 pagesVariantAttr = tab.dataset.pagesVariant === 'true';
+            return hasAnchor || pagesVariantAttr;
+        });
+        const hasPanels = this.panels.length > 0;
+        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');
+        }
+    }
+    findActivePagesTab() {
+        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(tabName) {
+        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);
+        }
+        catch (e) {
+            if (this.isAbortError(e))
+                return;
+            throw e;
+        }
+    }
+    // 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)
+            return;
+        this.tabs.forEach(tab => {
+            // 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() {
+        if (!this.tabs)
+            return;
+        this.tabs.forEach(async (tab) => {
+            await componentOnReady.componentOnReady(tab);
+            // In Page Tabs variant, navigation is handled by the consumer's routing
+            if (this.isPagesVariant) {
+                return;
+            }
+            // Content Tabs variant: set up ARIA relationships and event handlers
+            if (tab.getAttribute('aria-controls'))
+                return;
+            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.name);
+            });
+            tab.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    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')
+                    this.navigateTabs(tab, e.key);
+            });
+        });
+        // if the currently active tab was removed from the DOM then select the first one
+        if (this.currentActiveTab && !this.currentActiveTab.isConnected) {
+            void this.show(this.tabs[0]?.name);
+        }
+    }
+    activateTab(tab) {
+        // Deactivate previous tab
+        if (this.currentActiveTab) {
+            if (!this.isPagesVariant) {
+                this.currentActiveTab.setAttribute('aria-selected', 'false');
+                this.currentActiveTab.setAttribute('tabindex', '-1');
+            }
+        }
+        if (!this.isPagesVariant) {
+            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.fade(previousPanel, 'out');
+        this.hiding.onfinish = () => {
+            previousPanel.style.display = 'none';
+            this.hiding = null;
+        };
+    }
+    showSelectedPanel() {
+        if (!this.currentActiveTab)
+            return;
+        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.fade(panel, 'in');
+        this.showing.onfinish = () => {
+            this.showing = null;
+        };
+    }
+    getPanel(name) {
+        return this.host.querySelector(`post-tab-panel[for=${name}]`);
+    }
+    navigateTabs(tab, key) {
+        const activeTabIndex = Array.from(this.tabs).indexOf(tab);
+        let nextTab;
+        if (key === 'ArrowRight') {
+            nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];
+        }
+        else {
+            nextTab = this.tabs[activeTabIndex - 1] || this.tabs.at(-1);
+        }
+        if (!nextTab)
+            return;
+        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.isPagesVariant ? 'nav' : 'div';
+        const style = undefined;
+        return (index.h(index.Host, { key: '685ce8af8c27a1a7c3c23c6e5707f0f7e5360125', "data-version": _package.version, style: style }, index.h("div", { key: 'ddec1765d392d963a9741c83fa54d6a0426c9823', class: "tabs-wrapper", part: "post-tabs" }, index.h("button", { key: '5b7dc5ad5a64d99aa60ab578fc17b5acc0434fa4', 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: 'f3f9ffb11294eb35a77cf2dd59f13e80475c5c16', name: "chevronleft" })), index.h(TabsContainer, { key: '1fadf185970129cbc1d7173b9060ceb3fc433e28', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, index.h("slot", { key: '398729181e4d8927cafc7b61fb9a048bbcbfd3d9', onSlotchange: () => {
+                this.moveMisplacedTabs();
+                this.enableTabs();
+            } })), index.h("button", { key: 'd188e222a038215cd13d4f1e60f5b0fbba2a5c7e', 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: '9ab04bf862f7fe65383027102d81be5f82cabe6d', name: "chevronright" }))), !this.isPagesVariant && (index.h("div", { key: '28e9af0092a31cece1cb7d47f9e32dcfed92517d', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: '2ba72280f745ef1d1d36703a5675de1ac7fb1bea', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "label": [{
+                "validateLabel": 0
+            }]
+    }; }
+};
+__decorate([
+    oneOf.OneOf(['small', 'large'])
+], PostTabs.prototype, "size", void 0);
+__decorate([
+    type.Type('string')
+], PostTabs.prototype, "label", void 0);
+PostTabs.style = postTabsCss();
+
+exports.post_tabs = PostTabs;

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

@@ -0,0 +1,41 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-MGiZpKVI.js');
+
+const postTogglebuttonCss = () => `:host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}`;
+
+const PostTogglebutton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+         */
+        this.toggled = false;
+        this.handleClick = () => {
+            this.toggled = !this.toggled;
+        };
+        this.handleKeydown = (event) => {
+            // perform a click when enter or spaced are pressed to mimic the button behavior
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault(); // prevents the page from scrolling when space is pressed
+                this.host.click();
+            }
+        };
+    }
+    componentWillLoad() {
+        // add event listener in capture phase so the toggle state is updated
+        // before any parent bubble listeners react to the click.
+        this.host.addEventListener('click', () => this.handleClick(), { capture: true });
+        this.host.addEventListener('keydown', (e) => this.handleKeydown(e), {
+            capture: true,
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e01770f0c7d696a5b3a23583e30031ca97e261f1', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: '76cba85afbc0fead30f738a71acadb1e25fdfec6' })));
+    }
+    get host() { return index.getElement(this); }
+};
+PostTogglebutton.style = postTogglebuttonCss();
+
+exports.post_togglebutton = PostTogglebutton;