@swisspost/design-system-components 1.6.3 → 1.7.0

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

@@ -2,230 +2,231 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../package.json";
 import { fadeIn, fadeOut } from "../../animations";
 export class PostTabs {
-  constructor() {
-    this.isLoaded = false;
-    this.activePanel = undefined;
-  }
-  get tabs() {
-    return this.host.querySelectorAll('post-tab-header');
-  }
-  componentDidLoad() {
-    this.moveMisplacedTabs();
-    this.enableTabs();
-    const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
-    void this.show(initiallyActivePanel);
-    this.isLoaded = true;
-  }
-  /**
-   * Shows the panel with the given name and selects its associated tab.
-   * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
-   */
-  async show(panelName) {
-    var _a;
-    // do nothing if the tab is already active
-    if (panelName === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)) {
-      return;
-    }
-    const previousTab = this.activeTab;
-    const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
-    this.activateTab(newTab);
-    // if a panel is currently being displayed, remove it from the view and complete the associated animation
-    if (this.showing) {
-      this.showing.effect['target'].style.display = 'none';
-      this.showing.finish();
-    }
-    // hide the currently visible panel only if no other animation is running
-    if (previousTab && !this.showing && !this.hiding) {
-      this.hidePanel(previousTab.panel);
-    }
-    // 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;
-    }
-    this.tabChange.emit(this.activeTab.panel);
-  }
-  moveMisplacedTabs() {
-    if (!this.tabs)
-      return;
-    this.tabs.forEach(tab => {
-      if (tab.getAttribute('slot') === 'tabs')
-        return;
-      tab.setAttribute('slot', 'tabs');
-    });
-  }
-  enableTabs() {
-    if (!this.tabs)
-      return;
-    this.tabs.forEach(async (tab) => {
-      await tab.componentOnReady();
-      const tabTitle = tab.shadowRoot.querySelector('.tab-title');
-      // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
-      if (tabTitle.getAttribute('aria-controls'))
-        return;
-      const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');
-      tabTitle.setAttribute('aria-controls', tabPanel.id);
-      tabPanel.setAttribute('aria-labelledby', tabTitle.id);
-      tab.addEventListener('click', () => {
-        void this.show(tab.panel);
-      });
-      tab.addEventListener('keydown', ({ key }) => {
-        if (key === 'ArrowRight' || key === 'ArrowLeft')
-          this.navigateTabs(tab, key);
-      });
-    });
-    // if the currently active tab was removed from the DOM then select the first one
-    if (this.activeTab && !this.activeTab.isConnected) {
-      void this.show(this.tabs.item(0).panel);
-    }
-  }
-  activateTab(tab) {
-    if (this.activeTab) {
-      const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');
-      tabTitle.setAttribute('aria-selected', 'false');
-      tabTitle.setAttribute('tabindex', '-1');
-      tabTitle.classList.remove('active');
-    }
-    const tabTitle = tab.shadowRoot.querySelector('.tab-title');
-    tabTitle.setAttribute('aria-selected', 'true');
-    tabTitle.removeAttribute('tabindex');
-    tabTitle.classList.add('active');
-    this.activeTab = tab;
-  }
-  hidePanel(panelName) {
-    const previousPanel = this.getPanel(panelName);
-    if (!previousPanel)
-      return;
-    this.hiding = fadeOut(previousPanel);
-    this.hiding.onfinish = () => {
-      previousPanel.style.display = 'none';
-      this.hiding = null;
-    };
-  }
-  showSelectedPanel() {
-    const panel = this.getPanel(this.activeTab.panel);
-    panel.style.display = 'block';
-    // prevent the initially selected panel from fading in
-    if (!this.isLoaded)
-      return;
-    this.showing = fadeIn(panel);
-    this.showing.onfinish = () => {
-      this.showing = null;
-    };
-  }
-  getPanel(name) {
-    return this.host.querySelector(`post-tab-panel[name=${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[this.tabs.length - 1];
-    }
-    if (!nextTab)
-      return;
-    const nextTabTitle = nextTab.shadowRoot.querySelector('.tab-title');
-    nextTabTitle.focus();
-  }
-  render() {
-    return (h(Host, { "data-version": version }, h("div", { class: "tabs-wrapper" }, h("div", { class: "tabs", role: "tablist" }, h("slot", { name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.moveMisplacedTabs() }))));
-  }
-  static get is() { return "post-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["post-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["post-tabs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "activePanel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLPostTabPanelElement['name']",
-          "resolved": "string",
-          "references": {
-            "HTMLPostTabPanelElement": {
-              "location": "global",
-              "id": "global::HTMLPostTabPanelElement"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the panel that is initially shown.\nIf not specified, it defaults to the panel associated with the first tab.\n\n**Changing this value after initialization has no effect.**"
-        },
-        "attribute": "active-panel",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabChange",
-        "name": "tabChange",
-        "bubbles": true,
-        "cancelable": true,
-        "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 shown panel."
-        },
-        "complexType": {
-          "original": "HTMLPostTabPanelElement['name']",
-          "resolved": "string",
-          "references": {
-            "HTMLPostTabPanelElement": {
-              "location": "global",
-              "id": "global::HTMLPostTabPanelElement"
-            }
-          }
+    constructor() {
+        this.isLoaded = false;
+        this.activePanel = undefined;
+    }
+    get tabs() {
+        return this.host.querySelectorAll('post-tab-header');
+    }
+    componentDidLoad() {
+        this.moveMisplacedTabs();
+        this.enableTabs();
+        const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
+        void this.show(initiallyActivePanel);
+        this.isLoaded = true;
+    }
+    /**
+     * Shows the panel with the given name and selects its associated tab.
+     * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
+     */
+    async show(panelName) {
+        var _a;
+        // do nothing if the tab is already active
+        if (panelName === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)) {
+            return;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "(panelName: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "HTMLPostTabHeaderElement": {
-              "location": "global",
-              "id": "global::HTMLPostTabHeaderElement"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the panel with the given name and selects its associated tab.\nAny other panel that was previously shown becomes hidden and its associated tab is unselected.",
-          "tags": []
+        const previousTab = this.activeTab;
+        const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
+        this.activateTab(newTab);
+        // if a panel is currently being displayed, remove it from the view and complete the associated animation
+        if (this.showing) {
+            this.showing.effect['target'].style.display = 'none';
+            this.showing.finish();
+        }
+        // hide the currently visible panel only if no other animation is running
+        if (previousTab && !this.showing && !this.hiding) {
+            this.hidePanel(previousTab.panel);
+        }
+        // wait for any hiding animation to complete before showing the selected tab
+        if (this.hiding) {
+            await this.hiding.finished;
         }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+        this.showSelectedPanel();
+        // wait for any display animation to complete for the returned promise to fully resolve
+        if (this.showing) {
+            await this.showing.finished;
+        }
+        this.tabChange.emit(this.activeTab.panel);
+    }
+    moveMisplacedTabs() {
+        if (!this.tabs)
+            return;
+        this.tabs.forEach(tab => {
+            if (tab.getAttribute('slot') === 'tabs')
+                return;
+            tab.setAttribute('slot', 'tabs');
+        });
+    }
+    enableTabs() {
+        if (!this.tabs)
+            return;
+        this.tabs.forEach(async (tab) => {
+            await tab.componentOnReady();
+            const tabTitle = tab.shadowRoot.querySelector('.tab-title');
+            // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
+            if (tabTitle.getAttribute('aria-controls'))
+                return;
+            const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');
+            tabTitle.setAttribute('aria-controls', tabPanel.id);
+            tabPanel.setAttribute('aria-labelledby', tabTitle.id);
+            tab.addEventListener('click', () => {
+                void this.show(tab.panel);
+            });
+            tab.addEventListener('keydown', ({ key }) => {
+                if (key === 'ArrowRight' || key === 'ArrowLeft')
+                    this.navigateTabs(tab, key);
+            });
+        });
+        // if the currently active tab was removed from the DOM then select the first one
+        if (this.activeTab && !this.activeTab.isConnected) {
+            void this.show(this.tabs.item(0).panel);
+        }
+    }
+    activateTab(tab) {
+        if (this.activeTab) {
+            const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');
+            tabTitle.setAttribute('aria-selected', 'false');
+            tabTitle.setAttribute('tabindex', '-1');
+            tabTitle.classList.remove('active');
+        }
+        const tabTitle = tab.shadowRoot.querySelector('.tab-title');
+        tabTitle.setAttribute('aria-selected', 'true');
+        tabTitle.removeAttribute('tabindex');
+        tabTitle.classList.add('active');
+        this.activeTab = tab;
+    }
+    hidePanel(panelName) {
+        const previousPanel = this.getPanel(panelName);
+        if (!previousPanel)
+            return;
+        this.hiding = fadeOut(previousPanel);
+        this.hiding.onfinish = () => {
+            previousPanel.style.display = 'none';
+            this.hiding = null;
+        };
+    }
+    showSelectedPanel() {
+        const panel = this.getPanel(this.activeTab.panel);
+        panel.style.display = 'block';
+        // prevent the initially selected panel from fading in
+        if (!this.isLoaded)
+            return;
+        this.showing = fadeIn(panel);
+        this.showing.onfinish = () => {
+            this.showing = null;
+        };
+    }
+    getPanel(name) {
+        return this.host.querySelector(`post-tab-panel[name=${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[this.tabs.length - 1];
+        }
+        if (!nextTab)
+            return;
+        const nextTabTitle = nextTab.shadowRoot.querySelector('.tab-title');
+        nextTabTitle.focus();
+    }
+    render() {
+        return (h(Host, { "data-version": version }, h("div", { class: "tabs-wrapper" }, h("div", { class: "tabs", role: "tablist" }, h("slot", { name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.moveMisplacedTabs() }))));
+    }
+    static get is() { return "post-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "activePanel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLPostTabPanelElement['name']",
+                    "resolved": "string",
+                    "references": {
+                        "HTMLPostTabPanelElement": {
+                            "location": "global",
+                            "id": "global::HTMLPostTabPanelElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the panel that is initially shown.\nIf not specified, it defaults to the panel associated with the first tab.\n\n**Changing this value after initialization has no effect.**"
+                },
+                "attribute": "active-panel",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabChange",
+                "name": "tabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "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 shown panel."
+                },
+                "complexType": {
+                    "original": "HTMLPostTabPanelElement['name']",
+                    "resolved": "string",
+                    "references": {
+                        "HTMLPostTabPanelElement": {
+                            "location": "global",
+                            "id": "global::HTMLPostTabPanelElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(panelName: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "panelName",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLPostTabHeaderElement": {
+                            "location": "global",
+                            "id": "global::HTMLPostTabHeaderElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the panel with the given name and selects its associated tab.\nAny other panel that was previously shown becomes hidden and its associated tab is unselected.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=post-tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"post-tabs.js","sourceRoot":"","sources":["../../../../src/components/post-tabs/post-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { fadeIn, fadeOut } from '../../animations';\n\n@Component({\n  tag: 'post-tabs',\n  styleUrl: 'post-tabs.scss',\n  shadow: true,\n})\nexport class PostTabs {\n  private activeTab: HTMLPostTabHeaderElement;\n  private showing: Animation;\n  private hiding: Animation;\n  private isLoaded = false;\n\n  private get tabs(): NodeListOf<HTMLPostTabHeaderElement> {\n    return this.host.querySelectorAll('post-tab-header');\n  }\n\n  @Element() host: HTMLPostTabsElement;\n\n  /**\n   * The name of the panel that is initially shown.\n   * If not specified, it defaults to the panel associated with the first tab.\n   *\n   * **Changing this value after initialization has no effect.**\n   */\n  @Prop() readonly activePanel: HTMLPostTabPanelElement['name'];\n\n  /**\n   * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.\n   * The payload is the name of the newly shown panel.\n   */\n  @Event() tabChange: EventEmitter<HTMLPostTabPanelElement['name']>;\n\n  componentDidLoad() {\n    this.moveMisplacedTabs();\n    this.enableTabs();\n\n    const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;\n    void this.show(initiallyActivePanel);\n\n    this.isLoaded = true;\n  }\n\n  /**\n   * Shows the panel with the given name and selects its associated tab.\n   * Any other panel that was previously shown becomes hidden and its associated tab is unselected.\n   */\n  @Method()\n  async show(panelName: string) {\n    // do nothing if the tab is already active\n    if (panelName === this.activeTab?.panel) {\n      return;\n    }\n\n    const previousTab = this.activeTab;\n    const newTab: HTMLPostTabHeaderElement = this.host.querySelector(\n      `post-tab-header[panel=${panelName}]`,\n    );\n    this.activateTab(newTab);\n\n    // if a panel is currently being displayed, remove it from the view and complete the associated animation\n    if (this.showing) {\n      this.showing.effect['target'].style.display = 'none';\n      this.showing.finish();\n    }\n\n    // hide the currently visible panel only if no other animation is running\n    if (previousTab && !this.showing && !this.hiding) {\n      this.hidePanel(previousTab.panel);\n    }\n\n    // wait for any hiding animation to complete before showing the selected tab\n    if (this.hiding) {\n      await this.hiding.finished;\n    }\n\n    this.showSelectedPanel();\n\n    // wait for any display animation to complete for the returned promise to fully resolve\n    if (this.showing) {\n      await this.showing.finished;\n    }\n\n    this.tabChange.emit(this.activeTab.panel);\n  }\n\n  private moveMisplacedTabs() {\n    if (!this.tabs) return;\n\n    this.tabs.forEach(tab => {\n      if (tab.getAttribute('slot') === 'tabs') return;\n      tab.setAttribute('slot', 'tabs');\n    });\n  }\n\n  private enableTabs() {\n    if (!this.tabs) return;\n\n    this.tabs.forEach(async tab => {\n      await tab.componentOnReady();\n\n      const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n\n      // if the tab has an \"aria-controls\" attribute it was already linked to its panel: do nothing\n      if (tabTitle.getAttribute('aria-controls')) return;\n\n      const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');\n      tabTitle.setAttribute('aria-controls', tabPanel.id);\n      tabPanel.setAttribute('aria-labelledby', tabTitle.id);\n\n      tab.addEventListener('click', () => {\n        void this.show(tab.panel);\n      });\n\n      tab.addEventListener('keydown', ({ key }) => {\n        if (key === 'ArrowRight' || key === 'ArrowLeft') this.navigateTabs(tab, key);\n      });\n    });\n\n    // if the currently active tab was removed from the DOM then select the first one\n    if (this.activeTab && !this.activeTab.isConnected) {\n      void this.show(this.tabs.item(0).panel);\n    }\n  }\n\n  private activateTab(tab: HTMLPostTabHeaderElement) {\n    if (this.activeTab) {\n      const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');\n      tabTitle.setAttribute('aria-selected', 'false');\n      tabTitle.setAttribute('tabindex', '-1');\n      tabTitle.classList.remove('active');\n    }\n\n    const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n    tabTitle.setAttribute('aria-selected', 'true');\n    tabTitle.removeAttribute('tabindex');\n    tabTitle.classList.add('active');\n\n    this.activeTab = tab;\n  }\n\n  private hidePanel(panelName: HTMLPostTabPanelElement['name']) {\n    const previousPanel = this.getPanel(panelName);\n\n    if (!previousPanel) return;\n\n    this.hiding = fadeOut(previousPanel);\n    this.hiding.onfinish = () => {\n      previousPanel.style.display = 'none';\n      this.hiding = null;\n    };\n  }\n\n  private showSelectedPanel() {\n    const panel = this.getPanel(this.activeTab.panel);\n    panel.style.display = 'block';\n\n    // prevent the initially selected panel from fading in\n    if (!this.isLoaded) return;\n\n    this.showing = fadeIn(panel);\n    this.showing.onfinish = () => {\n      this.showing = null;\n    };\n  }\n\n  private getPanel(name: string): HTMLPostTabPanelElement {\n    return this.host.querySelector(`post-tab-panel[name=${name}]`);\n  }\n\n  private navigateTabs(tab: HTMLPostTabHeaderElement, key: 'ArrowRight' | 'ArrowLeft') {\n    const activeTabIndex = Array.from(this.tabs).indexOf(tab);\n\n    let nextTab: HTMLPostTabHeaderElement;\n    if (key === 'ArrowRight') {\n      nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];\n    } else {\n      nextTab = this.tabs[activeTabIndex - 1] || this.tabs[this.tabs.length - 1];\n    }\n\n    if (!nextTab) return;\n\n    const nextTabTitle = nextTab.shadowRoot.querySelector('.tab-title') as HTMLAnchorElement;\n    nextTabTitle.focus();\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div class=\"tabs-wrapper\">\n          <div class=\"tabs\" role=\"tablist\">\n            <slot name=\"tabs\" onSlotchange={() => this.enableTabs()} />\n          </div>\n        </div>\n        <div class=\"tab-content\">\n          <slot onSlotchange={() => this.moveMisplacedTabs()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"post-tabs.js","sourceRoot":"","sources":["../../../../src/components/post-tabs/post-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { fadeIn, fadeOut } from '../../animations';\n\n@Component({\n  tag: 'post-tabs',\n  styleUrl: 'post-tabs.scss',\n  shadow: true,\n})\nexport class PostTabs {\n  private activeTab: HTMLPostTabHeaderElement;\n  private showing: Animation;\n  private hiding: Animation;\n  private isLoaded = false;\n\n  private get tabs(): NodeListOf<HTMLPostTabHeaderElement> {\n    return this.host.querySelectorAll('post-tab-header');\n  }\n\n  @Element() host: HTMLPostTabsElement;\n\n  /**\n   * The name of the panel that is initially shown.\n   * If not specified, it defaults to the panel associated with the first tab.\n   *\n   * **Changing this value after initialization has no effect.**\n   */\n  @Prop() readonly activePanel: HTMLPostTabPanelElement['name'];\n\n  /**\n   * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.\n   * The payload is the name of the newly shown panel.\n   */\n  @Event() tabChange: EventEmitter<HTMLPostTabPanelElement['name']>;\n\n  componentDidLoad() {\n    this.moveMisplacedTabs();\n    this.enableTabs();\n\n    const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;\n    void this.show(initiallyActivePanel);\n\n    this.isLoaded = true;\n  }\n\n  /**\n   * Shows the panel with the given name and selects its associated tab.\n   * Any other panel that was previously shown becomes hidden and its associated tab is unselected.\n   */\n  @Method()\n  async show(panelName: string) {\n    // do nothing if the tab is already active\n    if (panelName === this.activeTab?.panel) {\n      return;\n    }\n\n    const previousTab = this.activeTab;\n    const newTab: HTMLPostTabHeaderElement = this.host.querySelector(\n      `post-tab-header[panel=${panelName}]`,\n    );\n    this.activateTab(newTab);\n\n    // if a panel is currently being displayed, remove it from the view and complete the associated animation\n    if (this.showing) {\n      this.showing.effect['target'].style.display = 'none';\n      this.showing.finish();\n    }\n\n    // hide the currently visible panel only if no other animation is running\n    if (previousTab && !this.showing && !this.hiding) {\n      this.hidePanel(previousTab.panel);\n    }\n\n    // wait for any hiding animation to complete before showing the selected tab\n    if (this.hiding) {\n      await this.hiding.finished;\n    }\n\n    this.showSelectedPanel();\n\n    // wait for any display animation to complete for the returned promise to fully resolve\n    if (this.showing) {\n      await this.showing.finished;\n    }\n\n    this.tabChange.emit(this.activeTab.panel);\n  }\n\n  private moveMisplacedTabs() {\n    if (!this.tabs) return;\n\n    this.tabs.forEach(tab => {\n      if (tab.getAttribute('slot') === 'tabs') return;\n      tab.setAttribute('slot', 'tabs');\n    });\n  }\n\n  private enableTabs() {\n    if (!this.tabs) return;\n\n    this.tabs.forEach(async tab => {\n      await tab.componentOnReady();\n\n      const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n\n      // if the tab has an \"aria-controls\" attribute it was already linked to its panel: do nothing\n      if (tabTitle.getAttribute('aria-controls')) return;\n\n      const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');\n      tabTitle.setAttribute('aria-controls', tabPanel.id);\n      tabPanel.setAttribute('aria-labelledby', tabTitle.id);\n\n      tab.addEventListener('click', () => {\n        void this.show(tab.panel);\n      });\n\n      tab.addEventListener('keydown', ({ key }) => {\n        if (key === 'ArrowRight' || key === 'ArrowLeft') this.navigateTabs(tab, key);\n      });\n    });\n\n    // if the currently active tab was removed from the DOM then select the first one\n    if (this.activeTab && !this.activeTab.isConnected) {\n      void this.show(this.tabs.item(0).panel);\n    }\n  }\n\n  private activateTab(tab: HTMLPostTabHeaderElement) {\n    if (this.activeTab) {\n      const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');\n      tabTitle.setAttribute('aria-selected', 'false');\n      tabTitle.setAttribute('tabindex', '-1');\n      tabTitle.classList.remove('active');\n    }\n\n    const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n    tabTitle.setAttribute('aria-selected', 'true');\n    tabTitle.removeAttribute('tabindex');\n    tabTitle.classList.add('active');\n\n    this.activeTab = tab;\n  }\n\n  private hidePanel(panelName: HTMLPostTabPanelElement['name']) {\n    const previousPanel = this.getPanel(panelName);\n\n    if (!previousPanel) return;\n\n    this.hiding = fadeOut(previousPanel);\n    this.hiding.onfinish = () => {\n      previousPanel.style.display = 'none';\n      this.hiding = null;\n    };\n  }\n\n  private showSelectedPanel() {\n    const panel = this.getPanel(this.activeTab.panel);\n    panel.style.display = 'block';\n\n    // prevent the initially selected panel from fading in\n    if (!this.isLoaded) return;\n\n    this.showing = fadeIn(panel);\n    this.showing.onfinish = () => {\n      this.showing = null;\n    };\n  }\n\n  private getPanel(name: string): HTMLPostTabPanelElement {\n    return this.host.querySelector(`post-tab-panel[name=${name}]`);\n  }\n\n  private navigateTabs(tab: HTMLPostTabHeaderElement, key: 'ArrowRight' | 'ArrowLeft') {\n    const activeTabIndex = Array.from(this.tabs).indexOf(tab);\n\n    let nextTab: HTMLPostTabHeaderElement;\n    if (key === 'ArrowRight') {\n      nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];\n    } else {\n      nextTab = this.tabs[activeTabIndex - 1] || this.tabs[this.tabs.length - 1];\n    }\n\n    if (!nextTab) return;\n\n    const nextTabTitle = nextTab.shadowRoot.querySelector('.tab-title') as HTMLAnchorElement;\n    nextTabTitle.focus();\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div class=\"tabs-wrapper\">\n          <div class=\"tabs\" role=\"tablist\">\n            <slot name=\"tabs\" onSlotchange={() => this.enableTabs()} />\n          </div>\n        </div>\n        <div class=\"tab-content\">\n          <slot onSlotchange={() => this.moveMisplacedTabs()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-:host,.bg-yellow{--post-bg-opacity: 1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}.bg-yellow{--post-contrast-color: #000;--post-contrast-color-inverted: #fff;--post-gray-10: hsl(0, 0%, 90%);--post-gray-20: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-60: hsl(0, 0%, 40%);--post-gray-80: hsl(0, 0%, 20%);--post-yellow: #fc0;--post-light: #faf9f8;--post-gray: #f4f3f1;--post-dark: hsl(0, 0%, 20%);--post-primary: hsl(0, 0%, 20%);--post-white: #fff;--post-black: #000;--post-info: #cce4ee;--post-success: #2c911c;--post-warning: #f49e00;--post-danger: #a51728;--post-nightblue: #004976;--post-nightblue-bright: #0076a8;--post-petrol: #006d68;--post-petrol-bright: #00968f;--post-coral: #9e2a2f;--post-coral-bright: #e03c31;--post-olive: #716135;--post-olive-bright: #aa9d2e;--post-purple: #80276c;--post-purple-bright: #c5299b;--post-aubergine: #523178;--post-aubergine-bright: #7566a0;--post-success-green: #2c871d;--post-error-red: #a51728;--post-warning-orange: #f49e00;--post-success-background: #c0debb;--post-error-background: #ffdade;--post-warning-background: #fce2b2;--post-contrast-color-rgb: 0, 0, 0;--post-contrast-color-inverted-rgb: 255, 255, 255;--post-gray-10-rgb: 230, 230, 230;--post-gray-20-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-60-rgb: 102, 102, 102;--post-gray-80-rgb: 51, 51, 51;--post-yellow-rgb: 255, 204, 0;--post-light-rgb: 250, 249, 248;--post-gray-rgb: 244, 243, 241;--post-dark-rgb: 51, 51, 51;--post-primary-rgb: 51, 51, 51;--post-white-rgb: 255, 255, 255;--post-black-rgb: 0, 0, 0;--post-info-rgb: 204, 228, 238;--post-success-rgb: 44, 145, 28;--post-warning-rgb: 244, 158, 0;--post-danger-rgb: 165, 23, 40;--post-nightblue-rgb: 0, 73, 118;--post-nightblue-bright-rgb: 0, 118, 168;--post-petrol-rgb: 0, 109, 104;--post-petrol-bright-rgb: 0, 150, 143;--post-coral-rgb: 158, 42, 47;--post-coral-bright-rgb: 224, 60, 49;--post-olive-rgb: 113, 97, 53;--post-olive-bright-rgb: 170, 157, 46;--post-purple-rgb: 128, 39, 108;--post-purple-bright-rgb: 197, 41, 155;--post-aubergine-rgb: 82, 49, 120;--post-aubergine-bright-rgb: 117, 102, 160;--post-success-green-rgb: 44, 135, 29;--post-error-red-rgb: 165, 23, 40;--post-warning-orange-rgb: 244, 158, 0;--post-success-background-rgb: 192, 222, 187;--post-error-background-rgb: 255, 218, 222;--post-warning-background-rgb: 252, 226, 178}:host{--post-contrast-color: #fff;--post-contrast-color-inverted: #000;--post-dark: #faf9f8;--post-light: hsl(0, 0%, 20%);--post-gray-80: hsl(0, 0%, 90%);--post-gray-60: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-20: hsl(0, 0%, 40%);--post-gray-10: hsl(0, 0%, 20%);--post-contrast-color-rgb: 255, 255, 255;--post-contrast-color-inverted-rgb: 0, 0, 0;--post-dark-rgb: 250, 249, 248;--post-light-rgb: 51, 51, 51;--post-gray-80-rgb: 230, 230, 230;--post-gray-60-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-20-rgb: 102, 102, 102;--post-gray-10-rgb: 51, 51, 51}:host{--post-bg-rgb: 51, 51, 51}div{position:absolute;z-index:1070;width:max-content;max-width:30ch;margin:0;padding:.25rem .5rem;color:inherit;background-color:inherit;border-color:rgba(0,0,0,0);border-radius:4px;overflow:visible;pointer-events:none}.arrow{position:absolute;width:.7071067812rem;aspect-ratio:1/1;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1;border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}.bg-yellow{--post-bg-rgb: 255, 204, 0}
+:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51}post-popovercontainer::part(popover){padding:.25rem .5rem}