@swisspost/design-system-components 1.5.0 → 1.6.0

package/dist/cjs/post-tab-header.cjs.entry.js

@@ -2,34 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-12cc37c9.js');
-const _package = require('./package-67091813.js');
-const checkNonEmpty = require('./check-non-empty-35b4d0b5.js');
+const postTabHeader = require('./post-tab-header-e08c2a42.js');
+require('./index-b619e205.js');
+require('./package-7c4db872.js');
+require('./check-non-empty-ae713942.js');
+require('./constants-238701d3.js');
 
-const postTabHeaderCss = ".tab-title{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid transparent;border-left:1px solid transparent;outline-color:currentColor;opacity:0.7;color:var(--post-contrast-color);text-decoration:none}.tab-title:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title:hover{opacity:1;background-color:#fff;color:var(--post-contrast-color)}.tab-title:focus-visible{outline:transparent;opacity:1;background-color:#fff;color:var(--post-contrast-color);box-shadow:none}.tab-title:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff, 0 0 0 2px hsl(0, 0%, 20%)}.tab-title.active{z-index:1;border-right-color:hsl(0, 0%, 80%);border-left-color:hsl(0, 0%, 80%);opacity:1;background-color:#fff;color:var(--post-contrast-color);font-weight:700}.tab-title.active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:0.25rem;background-color:#fc0}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .tab-title:hover{background-color:rgba(255, 255, 255, 0.2)}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .tab-title:focus-visible{background-color:rgba(255, 255, 255, 0.2)}@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black){.tab-title{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title:hover,.tab-title:focus,.tab-title:focus-within,.tab-title:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title.active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title.active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:hsl(0, 0%, 20%)}.bg-dark .tab-title.active{background-color:hsl(0, 0%, 20%)}.bg-dark .nav-item{background-color:hsl(0, 0%, 20%)}.bg-primary .tab-title{background-color:hsl(0, 0%, 20%)}.bg-primary .tab-title.active{background-color:hsl(0, 0%, 20%)}.bg-primary .nav-item{background-color:hsl(0, 0%, 20%)}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-success .tab-title{background-color:#2c911c}.bg-success .tab-title.active{background-color:#2c911c}.bg-success .nav-item{background-color:#2c911c}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-danger .tab-title{background-color:#a51728}.bg-danger .tab-title.active{background-color:#a51728}.bg-danger .nav-item{background-color:#a51728}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255, 255, 255, 0.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255, 255, 255, 0.2)}}:host{display:block}";
 
-const PostTabHeader = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tabId = undefined;
-    this.panel = undefined;
-  }
-  validateFor(newValue) {
-    checkNonEmpty.checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
-  }
-  componentWillLoad() {
-    this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
-  }
-  render() {
-    return (index.h(index.Host, { "data-version": _package.version }, index.h("li", { class: "nav-item" }, index.h("a", { "aria-selected": "false", class: "tab-title nav-link", href: "#", id: this.tabId, role: "tab" }, index.h("slot", null)))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "panel": ["validateFor"]
-  }; }
-};
-PostTabHeader.style = postTabHeaderCss;
 
-exports.post_tab_header = PostTabHeader;
+exports.post_tab_header = postTabHeader.PostTabHeader;
 
 //# sourceMappingURL=post-tab-header.cjs.entry.js.map

package/dist/cjs/post-tab-header.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"post-tab-header.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,msLAAmsL;;MCS/sL,aAAa;;;;;;EAWxB,WAAW,CAAC,QAAyC;IACnDA,2BAAa,CAAC,QAAQ,EAAE,uDAAuD,CAAC,CAAC;GAClF;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;GAC3D;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,oBAAeC,gBAAO,IACzBF,gBAAI,KAAK,EAAC,UAAU,IAClBA,gCACgB,OAAO,EACrB,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,GAAG,EACR,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,IAAI,EAAC,KAAK,IAEVA,qBAAO,CACL,CACD,CACA,EACP;GACH;;;;;;;;;;","names":["checkNonEmpty","h","Host","version"],"sources":["./src/components/post-tab-header/post-tab-header.scss?tag=post-tab-header&encapsulation=shadow","./src/components/post-tab-header/post-tab-header.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/components/tabs/tab-title';\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { checkNonEmpty } from '../../utils';\n\n@Component({\n  tag: 'post-tab-header',\n  styleUrl: 'post-tab-header.scss',\n  shadow: true,\n})\nexport class PostTabHeader {\n  @Element() host: HTMLPostTabHeaderElement;\n\n  @State() tabId: string;\n\n  /**\n   * The name of the panel controlled by the tab header.\n   */\n  @Prop() readonly panel: HTMLPostTabPanelElement['name'];\n\n  @Watch('panel')\n  validateFor(newValue: HTMLPostTabPanelElement['name']) {\n    checkNonEmpty(newValue, 'The \"panel\" prop is required for the post-tab-header.');\n  }\n\n  componentWillLoad() {\n    this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <li class=\"nav-item\">\n          <a\n            aria-selected=\"false\"\n            class=\"tab-title nav-link\"\n            href=\"#\"\n            id={this.tabId}\n            role=\"tab\"\n          >\n            <slot/>\n          </a>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"post-tab-header.entry.cjs.js","mappings":";;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/post-tab-panel-721f7f32.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const index = require('./index-b619e205.js');
+const _package = require('./package-7c4db872.js');
+
+const postTabPanelCss = ":host{display:none}";
+
+const PostTabPanel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.panelId = undefined;
+    this.name = undefined;
+  }
+  componentWillLoad() {
+    // get the id set on the host element or use a random id by default
+    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
+  }
+  render() {
+    return (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "tab-pane", id: this.panelId, role: "tabpanel" }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+PostTabPanel.style = postTabPanelCss;
+
+exports.PostTabPanel = PostTabPanel;
+
+//# sourceMappingURL=post-tab-panel-721f7f32.js.map

package/dist/cjs/post-tab-panel-721f7f32.js.map

@@ -0,0 +1 @@
+{"file":"post-tab-panel-721f7f32.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,qBAAqB;;MCQhC,YAAY;;;;;;EAUvB,iBAAiB;;IAEf,IAAI,CAAC,OAAO,GAAG,SAAS,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;GAC/D;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,oBAAeC,gBAAO,IACzBF,iBACE,KAAK,EAAC,UAAU,EAChB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,UAAU,IAEfA,qBAAO,CACH,CACD,EACP;GACH;;;;;;;","names":["h","Host","version"],"sources":["src/components/post-tab-panel/post-tab-panel.scss?tag=post-tab-panel&encapsulation=shadow","src/components/post-tab-panel/post-tab-panel.tsx"],"sourcesContent":[":host {\n  display: none;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { version } from '../../../package.json';\n\n@Component({\n  tag: 'post-tab-panel',\n  styleUrl: 'post-tab-panel.scss',\n  shadow: true,\n})\nexport class PostTabPanel {\n  @Element() host: HTMLPostTabPanelElement;\n\n  @State() panelId: string;\n\n  /**\n   * The name of the panel, used to associate it with a tab header.\n   */\n  @Prop() readonly name: string;\n\n  componentWillLoad() {\n    // get the id set on the host element or use a random id by default\n    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div\n          class=\"tab-pane\"\n          id={this.panelId}\n          role=\"tabpanel\"\n        >\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/post-tab-panel.cjs.entry.js

@@ -2,28 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-12cc37c9.js');
-const _package = require('./package-67091813.js');
+const postTabPanel = require('./post-tab-panel-721f7f32.js');
+require('./index-b619e205.js');
+require('./package-7c4db872.js');
 
-const postTabPanelCss = ":host{display:none}";
 
-const PostTabPanel = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.panelId = undefined;
-    this.name = undefined;
-  }
-  componentWillLoad() {
-    // get the id set on the host element or use a random id by default
-    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
-  }
-  render() {
-    return (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "tab-pane", id: this.panelId, role: "tabpanel" }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
-};
-PostTabPanel.style = postTabPanelCss;
 
-exports.post_tab_panel = PostTabPanel;
+exports.post_tab_panel = postTabPanel.PostTabPanel;
 
 //# sourceMappingURL=post-tab-panel.cjs.entry.js.map

package/dist/cjs/post-tab-panel.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"post-tab-panel.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,qBAAqB;;MCQhC,YAAY;;;;;;EAUvB,iBAAiB;;IAEf,IAAI,CAAC,OAAO,GAAG,SAAS,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;GAC/D;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,oBAAeC,gBAAO,IACzBF,iBACE,KAAK,EAAC,UAAU,EAChB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,UAAU,IAEfA,qBAAO,CACH,CACD,EACP;GACH;;;;;;;","names":["h","Host","version"],"sources":["./src/components/post-tab-panel/post-tab-panel.scss?tag=post-tab-panel&encapsulation=shadow","./src/components/post-tab-panel/post-tab-panel.tsx"],"sourcesContent":[":host {\n  display: none;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { version } from '../../../package.json';\n\n@Component({\n  tag: 'post-tab-panel',\n  styleUrl: 'post-tab-panel.scss',\n  shadow: true,\n})\nexport class PostTabPanel {\n  @Element() host: HTMLPostTabPanelElement;\n\n  @State() panelId: string;\n\n  /**\n   * The name of the panel, used to associate it with a tab header.\n   */\n  @Prop() readonly name: string;\n\n  componentWillLoad() {\n    // get the id set on the host element or use a random id by default\n    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div\n          class=\"tab-pane\"\n          id={this.panelId}\n          role=\"tabpanel\"\n        >\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"post-tab-panel.entry.cjs.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/post-tabs-4bcc867b.js

@@ -0,0 +1,153 @@
+'use strict';
+
+const index = require('./index-b619e205.js');
+const _package = require('./package-7c4db872.js');
+const fade = require('./fade-35a3633a.js');
+
+const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:#faf9f8}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem;padding-bottom:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-primary .tabs-wrapper{background-color:#333}.bg-white .tabs-wrapper{background-color:#fff}.bg-black .tabs-wrapper{background-color:#000}.bg-success .tabs-wrapper{background-color:#2c911c}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-danger .tabs-wrapper{background-color:#a51728}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}:host{display:block}";
+
+const PostTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tabChange = index.createEvent(this, "tabChange", 7);
+    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 = fade.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 = fade.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 (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "tabs-wrapper" }, index.h("div", { class: "tabs", role: "tablist" }, index.h("slot", { name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { class: "tab-content" }, index.h("slot", { onSlotchange: () => this.moveMisplacedTabs() }))));
+  }
+  get host() { return index.getElement(this); }
+};
+PostTabs.style = postTabsCss;
+
+exports.PostTabs = PostTabs;
+
+//# sourceMappingURL=post-tabs-4bcc867b.js.map

package/dist/cjs/post-tabs-4bcc867b.js.map

@@ -0,0 +1 @@
+{"file":"post-tabs-4bcc867b.js","mappings":"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","names":["fadeOut","fadeIn","h","Host","version"],"sources":["src/components/post-tabs/post-tabs.scss?tag=post-tabs&encapsulation=shadow","src/components/post-tabs/post-tabs.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/components/tabs/tabs-wrapper';\n\n:host {\n  display: block;\n}\n","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}

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

@@ -2,135 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-12cc37c9.js');
-const _package = require('./package-67091813.js');
-const fade = require('./fade-8c6d4fa7.js');
+const postTabs = require('./post-tabs-4bcc867b.js');
+require('./index-b619e205.js');
+require('./package-7c4db872.js');
+require('./fade-35a3633a.js');
 
-const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:#faf9f8}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:hsl(0, 0%, 80%)}.tabs-wrapper .tabs{background-color:transparent !important}@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem;padding-bottom:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:hsl(0, 0%, 20%)}.bg-primary .tabs-wrapper{background-color:hsl(0, 0%, 20%)}.bg-white .tabs-wrapper{background-color:#fff}.bg-black .tabs-wrapper{background-color:#000}.bg-success .tabs-wrapper{background-color:#2c911c}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-danger .tabs-wrapper{background-color:#a51728}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}:host{display:block}";
 
-const PostTabs = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tabChange = index.createEvent(this, "tabChange", 7);
-    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;
-    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', e => {
-        e.preventDefault();
-        this.show(tab.panel);
-      });
-    });
-    // if the currently active tab was removed from the DOM then select the first one
-    if (this.activeTab && !this.activeTab.isConnected) {
-      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.classList.remove('active');
-    }
-    const tabTitle = tab.shadowRoot.querySelector('.tab-title');
-    tabTitle.setAttribute('aria-selected', 'true');
-    tabTitle.classList.add('active');
-    this.activeTab = tab;
-  }
-  hidePanel(panelName) {
-    const previousPanel = this.getPanel(panelName);
-    if (!previousPanel)
-      return;
-    this.hiding = fade.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 = fade.fadeIn(panel);
-    this.showing.onfinish = () => {
-      this.showing = null;
-    };
-  }
-  getPanel(name) {
-    return this.host.querySelector(`post-tab-panel[name=${name}]`);
-  }
-  render() {
-    return (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "tabs-wrapper" }, index.h("ul", { class: "tabs nav", role: "tablist" }, index.h("slot", { name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { class: "tab-content" }, index.h("slot", { onSlotchange: () => this.moveMisplacedTabs() }))));
-  }
-  get host() { return index.getElement(this); }
-};
-PostTabs.style = postTabsCss;
 
-exports.post_tabs = PostTabs;
+exports.post_tabs = postTabs.PostTabs;
 
 //# sourceMappingURL=post-tabs.cjs.entry.js.map

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

@@ -1 +1 @@
-{"file":"post-tabs.entry.cjs.js","mappings":"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","names":["fadeOut","fadeIn","h","Host","version"],"sources":["./src/components/post-tabs/post-tabs.scss?tag=post-tabs&encapsulation=shadow","./src/components/post-tabs/post-tabs.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/components/tabs/tabs-wrapper';\n\n:host {\n  display: block;\n}\n","import { Component, Host, h, Element, Method, Event, EventEmitter, 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    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(`post-tab-header[panel=${panelName}]`);\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  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', e => {\n        e.preventDefault();\n        this.show(tab.panel);\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      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.classList.remove('active');\n    }\n\n    const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n    tabTitle.setAttribute('aria-selected', 'true');\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(\n      `post-tab-panel[name=${name}]`\n    );\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div class=\"tabs-wrapper\">\n          <ul class=\"tabs nav\" role=\"tablist\">\n            <slot name=\"tabs\" onSlotchange={() => this.enableTabs()} />\n          </ul>\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.entry.cjs.js","mappings":";;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}