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

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

@@ -9,25 +9,48 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { fade } from "../../animations/index";
-import { componentOnReady, Type } from "../../utils/index";
+import { componentOnReady, OneOf, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { h, Host, } from "@stencil/core";
+import { Build, h, Host, } from "@stencil/core";
 /**
  * @slot default - Slot for placing tab items. Each tab item should be a <post-tab-item> element.
  * @slot panels - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
  * @part post-tabs - The container element that holds the set of tabs.
- * @part post-tabs-content - The container element that displays the content of the currently active tab. Only available in panels mode.
+ * @part post-tabs-content - The container element that displays the content of the currently active tab. Only available in Content variant.
  */
 export class PostTabs {
     constructor() {
+        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);
@@ -36,29 +59,38 @@ export class PostTabs {
         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;
@@ -73,35 +105,43 @@ export class PostTabs {
             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;
@@ -110,25 +150,27 @@ export class PostTabs {
     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 {
@@ -138,21 +180,29 @@ export class PostTabs {
             }
         }
     }
-    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;
@@ -163,30 +213,55 @@ export class PostTabs {
      * 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)
@@ -212,11 +287,11 @@ export class PostTabs {
             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);
@@ -232,6 +307,17 @@ export class PostTabs {
                     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')
@@ -246,14 +332,12 @@ export class PostTabs {
     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');
         }
@@ -270,6 +354,8 @@ export class PostTabs {
         };
     }
     showSelectedPanel() {
+        if (!this.currentActiveTab)
+            return;
         const panel = this.getPanel(this.currentActiveTab.name);
         if (!panel)
             return;
@@ -299,12 +385,52 @@ export class PostTabs {
         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 activeName = this.activeTab ?? this.tabs[0]?.name;
+        const TabsContainer = this.isPagesVariant ? 'nav' : 'div';
+        const isSSR = Build.isServer;
+        const tabStyle = activeName
+            ? {
+                [`--post-tab-panel-${activeName}`]: 'block',
+                [`--post-tab-item-${activeName}`]: '1',
+            }
+            : undefined;
+        const style = isSSR && !this.isPagesVariant ? tabStyle : 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() })))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -320,6 +446,46 @@ export class PostTabs {
     }
     static get properties() {
         return {
+            "textPrevTabItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An accessible label for the \"previous tab items\" button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-prev-tab-items",
+                "defaultValue": "'Previous tab items'"
+            },
+            "textNextTabItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An accessible label for the \"next tab items\" button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-next-tab-items",
+                "defaultValue": "'Next tab items'"
+            },
             "activeTab": {
                 "type": "string",
                 "mutable": false,
@@ -332,32 +498,32 @@ export class PostTabs {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The name of the tab in the panel mode that is initially active.\nChanging this value after initialization has no effect.\nIf not specified, defaults to the first tab."
+                    "text": "The name of the tab in the Content Tabs variant that is initially active.\nChanging this value after initialization has no effect.\nIf not specified, defaults to the first tab."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "active-tab"
             },
-            "fullWidth": {
-                "type": "boolean",
+            "size": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'small' | 'large'",
+                    "resolved": "\"large\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When set to true, this property allows the tabs container to span the\nChanging this value after initialization has no effect.\nfull width of the screen, from edge to edge."
+                    "text": "The size of the tabs, corresponding to the different designs in Figma.\nDefault is 'large'."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "full-width",
-                "defaultValue": "false"
+                "attribute": "size",
+                "defaultValue": "'large'"
             },
             "label": {
                 "type": "string",
@@ -371,7 +537,7 @@ export class PostTabs {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The accessible label for the tabs component in navigation mode."
+                    "text": "An accessible label for the Pages Tabs variant"
                 },
                 "getter": false,
                 "setter": false,
@@ -382,7 +548,9 @@ export class PostTabs {
     }
     static get states() {
         return {
-            "isNavigationMode": {}
+            "isPagesVariant": {},
+            "showLeftScrollButton": {},
+            "showRightScrollButton": {}
         };
     }
     static get events() {
@@ -394,7 +562,7 @@ export class PostTabs {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.\nThe payload is the name of the newly active tab.\nOnly emitted in panel mode."
+                    "text": "An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.\nThe payload is the name of the newly active tab.\nOnly emitted in Content Tabs variant."
                 },
                 "complexType": {
                     "original": "string",
@@ -440,6 +608,9 @@ export class PostTabs {
             }];
     }
 }
+__decorate([
+    OneOf(['small', 'large'])
+], PostTabs.prototype, "size", void 0);
 __decorate([
     Type('string')
 ], PostTabs.prototype, "label", void 0);

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

@@ -29,7 +29,7 @@ export class PostTogglebutton {
         });
     }
     render() {
-        return (h(Host, { key: '46a7a868026b48ae40115ab34c67ec9819f56b63', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'a230214424ec9f848fab45ad61253b9e7adb9645' })));
+        return (h(Host, { key: '6f61a07946f3e67bace0a883b73c424893c4043d', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'fd9b93e45da499dbb790ad675f3db36e248c1960' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,8 +37,8 @@ export class PostTooltip {
         }
     }
     /**
-     * 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)
@@ -52,9 +52,8 @@ export class PostTooltip {
         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);
@@ -68,7 +67,7 @@ export class PostTooltip {
     }
     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' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -161,7 +160,7 @@ export class PostTooltip {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element where the tooltip should be shown"
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -176,11 +175,8 @@ export class PostTooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically display the tooltip.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target An element where the tooltip should be shown"
-                        }]
+                    "text": "Programmatically display the tooltip,\n`target` is the HTML element the menu is anchored to.",
+                    "tags": []
                 }
             },
             "hide": {
@@ -206,11 +202,11 @@ export class PostTooltip {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element where the tooltip should be shown"
+                            "docs": ""
                         }, {
                             "name": "force",
                             "type": "boolean",
-                            "docs": "Pass true to always show or false to always hide"
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -225,14 +221,8 @@ export class PostTooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggle tooltip display.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target An element where the tooltip should be shown"
-                        }, {
-                            "name": "param",
-                            "text": "force Pass true to always show or false to always hide"
-                        }]
+                    "text": "Toggle tooltip display,\n`target` is the HTML element the menu is anchored to.",
+                    "tags": []
                 }
             }
         };