@swisspost/design-system-components 1.5.0 → 1.6.0

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

@@ -1,6 +1,6 @@
-import { Host, h } from '@stencil/core';
-import { version } from '../../../package.json';
-import { fadeIn, fadeOut } from '../../animations';
+import { h, Host } from "@stencil/core";
+import { version } from "../../../package.json";
+import { fadeIn, fadeOut } from "../../animations";
 export class PostTabs {
   constructor() {
     this.isLoaded = false;
@@ -13,7 +13,7 @@ export class PostTabs {
     this.moveMisplacedTabs();
     this.enableTabs();
     const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
-    this.show(initiallyActivePanel);
+    void this.show(initiallyActivePanel);
     this.isLoaded = true;
   }
   /**
@@ -70,24 +70,29 @@ export class PostTabs {
       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);
+      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) {
-      this.show(this.tabs.item(0).panel);
+      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;
   }
@@ -115,8 +120,22 @@ export class PostTabs {
   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("ul", { class: "tabs nav", role: "tablist" }, h("slot", { name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.moveMisplacedTabs() }))));
+    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"; }
@@ -140,7 +159,8 @@ export class PostTabs {
           "resolved": "string",
           "references": {
             "HTMLPostTabPanelElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLPostTabPanelElement"
             }
           }
         },
@@ -171,7 +191,8 @@ export class PostTabs {
           "resolved": "string",
           "references": {
             "HTMLPostTabPanelElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLPostTabPanelElement"
             }
           }
         }
@@ -188,10 +209,12 @@ export class PostTabs {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLPostTabHeaderElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLPostTabHeaderElement"
             }
           },
           "return": "Promise<void>"

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, 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.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,194 +1 @@
-/**
- * Colors used by the post style guide
- */
-/**
- * Maps. Allow maps to have custom colors from the project
- * by always merging into a default empty map
- */
-: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-success: #2c911c;
-  --post-info: #cce4ee;
-  --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-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-success-rgb: 44, 145, 28;
-  --post-info-rgb: 204, 228, 238;
-  --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;
-}
-
-: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;
-}
-
-@layer polyfill {
-  [popover] {
-    position: fixed;
-    z-index: 2147483647;
-    inset: 0;
-    padding: 0.25em;
-    width: fit-content;
-    height: fit-content;
-    border-width: initial;
-    border-color: initial;
-    border-image: initial;
-    border-style: solid;
-    background-color: canvas;
-    color: canvastext;
-    overflow: auto;
-    margin: auto;
-  }
-  [popover]:not(.\:popover-open) {
-    display: none;
-  }
-  [popover]:is(dialog[open]) {
-    display: revert;
-  }
-  [anchor].\:popover-open {
-    inset: auto;
-  }
-  @supports selector([popover]:open) {
-    [popover]:not(.\:popover-open, dialog[open]) {
-      display: revert;
-    }
-    [anchor]:is(:open) {
-      inset: auto;
-    }
-  }
-  @supports selector([popover]:popover-open) {
-    [popover]:not(.\:popover-open, dialog[open]) {
-      display: revert;
-    }
-    [anchor]:is(:popover-open) {
-      inset: auto;
-    }
-  }
-  @supports not (background-color: canvas) {
-    [popover] {
-      background-color: white;
-      color: black;
-    }
-  }
-  @supports (width: -moz-fit-content) {
-    [popover] {
-      width: -moz-fit-content;
-      height: -moz-fit-content;
-    }
-  }
-  @supports not (inset: 0) {
-    [popover] {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
-}
-:host {
-  --post-bg-rgb: 51, 51, 51;
-}
-
-div {
-  position: absolute;
-  z-index: 1070;
-  width: max-content;
-  max-width: 30ch;
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  color: inherit;
-  background-color: inherit;
-  border-color: transparent;
-  border-radius: 4px;
-  overflow: visible;
-  pointer-events: none;
-}
-
-.arrow {
-  position: absolute;
-  width: 0.7071067812rem;
-  aspect-ratio: 1/1;
-  background-color: inherit;
-  rotate: 45deg;
-  pointer-events: none;
-  z-index: -1;
-  border-right: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-}
-
-.bg-yellow {
-  --post-bg-rgb: 255, 204, 0;
-}
+: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-success: #2c911c;--post-info: #cce4ee;--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-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-success-rgb: 44, 145, 28;--post-info-rgb: 204, 228, 238;--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}: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}@layer polyfill{[popover]{position:fixed;z-index:2147483647;inset:0;padding:.25em;width:fit-content;height:fit-content;border-width:initial;border-color:initial;border-image:initial;border-style:solid;background-color:canvas;color:canvastext;overflow:auto;margin:auto}[popover]:not(.\:popover-open){display:none}[popover]:is(dialog[open]){display:revert}[anchor].\:popover-open{inset:auto}@supports selector([popover]:open){[popover]:not(.\:popover-open,dialog[open]){display:revert}[anchor]:is(:open){inset:auto}}@supports selector([popover]:popover-open){[popover]:not(.\:popover-open,dialog[open]){display:revert}[anchor]:is(:popover-open){inset:auto}}@supports not (background-color: canvas){[popover]{background-color:white;color:black}}@supports(width: -moz-fit-content){[popover]{width:-moz-fit-content;height:-moz-fit-content}}@supports not (inset: 0){[popover]{top:0;left:0;right:0;bottom:0}}}: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}

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

@@ -1,13 +1,13 @@
-import { h, Host } from '@stencil/core';
-import { arrow, autoUpdate, computePosition, flip, inline, offset, shift, } from '@floating-ui/dom';
-import isFocusable from 'ally.js/esm/is/focusable';
+import { h, Host } from "@stencil/core";
+import { arrow, autoUpdate, computePosition, flip, inline, offset, shift, } from "@floating-ui/dom";
+import isFocusable from "ally.js/esm/is/focusable";
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
-import '@oddbird/popover-polyfill';
+import "@oddbird/popover-polyfill";
 // Patch for long press on touch devices
-import 'long-press-event';
-import { version } from '../../../package.json';
-import { checkOneOf } from '../../utils';
-import { BACKGROUND_COLOR } from './types';
+import "long-press-event";
+import { version } from "../../../package.json";
+import { checkOneOf } from "../../utils";
+import { BACKGROUND_COLOR } from "./types";
 const SIDE_MAP = {
   top: 'bottom',
   right: 'left',
@@ -198,7 +198,8 @@ export class PostTooltip {
           "references": {
             "BackgroundColor": {
               "location": "import",
-              "path": "./types"
+              "path": "./types",
+              "id": "src/components/post-tooltip/types.ts::BackgroundColor"
             }
           }
         },
@@ -221,7 +222,8 @@ export class PostTooltip {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@floating-ui/dom"
+              "path": "@floating-ui/dom",
+              "id": "../../node_modules/.pnpm/@floating-ui+dom@1.5.1/node_modules/@floating-ui/dom/src/types.d.ts::Placement"
             }
           }
         },
@@ -256,10 +258,12 @@ export class PostTooltip {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLElement"
             }
           },
           "return": "Promise<void>"
@@ -278,7 +282,8 @@ export class PostTooltip {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -306,10 +311,12 @@ export class PostTooltip {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLElement"
             }
           },
           "return": "Promise<void>"

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

@@ -1 +1 @@
-{"version":3,"file":"post-tooltip.js","sourceRoot":"","sources":["../../../../src/components/post-tooltip/post-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  inline,\n  offset,\n  Placement,\n  shift,\n} from '@floating-ui/dom';\nimport isFocusable from 'ally.js/esm/is/focusable';\n\n// Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green\nimport '@oddbird/popover-polyfill';\n\n// Patch for long press on touch devices\nimport 'long-press-event';\n\nimport { version } from '../../../package.json';\nimport { checkOneOf } from '../../utils';\nimport { BACKGROUND_COLOR, BackgroundColor } from './types';\n\nconst SIDE_MAP = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n\ninterface PopoverElement {\n  showPopover: () => void;\n  hidePopover: () => void;\n  togglePopover: (force?: boolean) => boolean;\n}\n\n@Component({\n  tag: 'post-tooltip',\n  styleUrl: 'post-tooltip.scss',\n  shadow: true,\n})\nexport class PostTooltip {\n  private tooltipRef: HTMLDivElement & PopoverElement;\n  private arrowRef: HTMLElement;\n  private clearAutoUpdate: () => void;\n  private readonly localShowTooltip: (e: Event) => Promise<void>;\n  private readonly localHideTooltip: () => Promise<void>;\n  private readonly localToggleTooltip: () => Promise<void>;\n  private eventTarget: Element;\n\n  @Element() host: HTMLPostTooltipElement;\n\n  @State() tooltipClasses: string;\n\n  /**\n   * Defines the background color of the tooltip.\n   * Choose the one that provides the best contrast in your scenario.\n   */\n  @Prop() readonly backgroundColor?: BackgroundColor = 'primary';\n\n  /**\n   * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\n   * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\n   * towards the viewport if they would overlap edge boundaries.\n   */\n  @Prop() readonly placement?: Placement = 'top';\n\n  @Watch('backgroundColor')\n  validateBackgroundColor(newValue = this.backgroundColor) {\n    checkOneOf(\n      newValue,\n      BACKGROUND_COLOR,\n      `The post-tooltip \"background-color\" prop should contain one of those values: ${BACKGROUND_COLOR.join(\n        ', ',\n      )}`,\n    );\n\n    if (newValue === 'yellow') {\n      this.tooltipClasses = 'bg-yellow';\n    } else {\n      this.tooltipClasses = 'bg-primary';\n    }\n  }\n\n  constructor() {\n    // Create local versions of event handlers for de-registration\n    // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class\n    this.localShowTooltip = e => this.show(e.target as HTMLElement);\n    this.localHideTooltip = this.hide.bind(this);\n    this.localToggleTooltip = this.toggle.bind(this);\n  }\n\n  componentWillLoad() {\n    this.validateBackgroundColor();\n\n    // Append tooltip host to the end of the body to get around overflow: hidden restrictions\n    // for browsers that don't support popover yet\n    document.body.appendChild(this.host);\n  }\n\n  connectedCallback() {\n    if (!this.host.id) {\n      throw new Error(\n        'No id set: <post-tooltip> must have an id, linking it to it\\'s target element using the data-tooltip-target attribute.',\n      );\n    }\n\n    if (!this.triggers) {\n      throw new Error(\n        `No trigger found for <post-tooltip id=\"${this.host.id}\">, please add the 'data-tooltip-target=\"${this.host.id}\" attribute to the trigger element.`,\n      );\n    }\n\n    // Patch popovertargetaction=\"interest\" until it's implemented\n    // https://github.com/openui/open-ui/issues/767#issuecomment-1654177227\n    this.triggers.forEach(trigger => this.patchPopoverTargetActionInterest(trigger));\n  }\n\n  /**\n   * Remove a bunch of event listeners if the tooltip gets removed from the DOM\n   */\n  disconnectedCallback() {\n    this.triggers.forEach(trigger => {\n      trigger.removeEventListener('mouseenter', this.localShowTooltip);\n      trigger.removeEventListener('mouseleave', this.localHideTooltip);\n      trigger.removeEventListener('focus', this.localShowTooltip);\n      trigger.removeEventListener('blur', this.localHideTooltip);\n      trigger.removeEventListener('long-press', this.localShowTooltip);\n    });\n    if (this.tooltipRef)\n      this.tooltipRef.removeEventListener('beforetoggle', this.localToggleTooltip);\n    if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate();\n  }\n\n  componentDidLoad() {\n    // Has the benefit of rendering the tooltip without the popover attribute which\n    // causes the tooltip to show up on the page if it's not linked to a target. This makes\n    // the error obvious.\n    if (!this.host.id || !this.triggers) return false;\n\n    this.tooltipRef.setAttribute('popover', '');\n    this.tooltipRef.addEventListener('beforetoggle', this.handleToggle.bind(this));\n  }\n\n  /**\n   * Programmatically display the tooltip\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   */\n  @Method()\n  async show(target: HTMLElement) {\n    this.eventTarget = target;\n    this.tooltipRef.showPopover();\n  }\n\n  /**\n   * Programmatically hide this tooltip\n   */\n  @Method()\n  async hide() {\n    this.eventTarget = null;\n    this.tooltipRef.hidePopover();\n  }\n\n  /**\n   * Toggle tooltip display\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   * @param force Pass true to always show or false to always hide\n   */\n  @Method()\n  async toggle(target: HTMLElement, force?: boolean) {\n    this.eventTarget = target;\n    this.tooltipRef.togglePopover(force);\n  }\n\n  private get triggers() {\n    return document.querySelectorAll(`[data-tooltip-target=\"${this.host.id}\"]`);\n  }\n\n  private patchPopoverTargetActionInterest(trigger: Element) {\n    trigger.addEventListener('mouseenter', this.localShowTooltip);\n    trigger.addEventListener('mouseleave', this.localHideTooltip);\n    trigger.addEventListener('focus', this.localShowTooltip);\n    trigger.addEventListener('blur', this.localHideTooltip);\n    trigger.addEventListener('long-press', this.localShowTooltip);\n\n    // Patch missing aria-describedby attribute on the trigger without overriding existing values\n    const describedBy = trigger.getAttribute('aria-describedby');\n    if (!describedBy?.includes(this.host.id)) {\n      const newDescribedBy = describedBy ? `${describedBy} ${this.host.id}` : this.host.id;\n      trigger.setAttribute('aria-describedby', newDescribedBy);\n    }\n\n    // Patch missing focus ability on the trigger element\n    if (!isFocusable(trigger)) {\n      trigger.setAttribute('tabindex', '0');\n    }\n  }\n\n  /**\n   * Start or stop auto updates based on tooltip events.\n   * Tooltips can be closed or opened with other methods than class members,\n   * therefore listening to the toggle event is safer for cleaning up.\n   * @param e ToggleEvent\n   */\n  private handleToggle(e: ToggleEvent) {\n    const isOpen = e.newState === 'open';\n    if (isOpen) {\n      this.startAutoupdates();\n    } else {\n      if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate();\n    }\n  }\n\n  /**\n   * Start listening for DOM updates, scroll events etc. that have\n   * an influence on tooltip positioning\n   */\n  private startAutoupdates() {\n    this.clearAutoUpdate = autoUpdate(\n      this.eventTarget,\n      this.tooltipRef,\n      this.positionTooltip.bind(this),\n    );\n  }\n\n  // Tooltip and arrow positioning with floating-ui\n  // Docs: https://floating-ui.com/docs/computePosition\n  private async positionTooltip() {\n    const {\n      x,\n      y,\n      middlewareData,\n      placement: currentPlacement,\n    } = await computePosition(this.eventTarget, this.tooltipRef, {\n      placement: this.placement || 'top',\n      middleware: [\n        flip(),\n        inline(),\n        shift({ padding: 8 }),\n        offset(12), // 4px outside of element to account for focus outline + ~arrow size\n        arrow({ element: this.arrowRef, padding: 8 }),\n      ],\n    });\n\n    // Tooltip\n    this.tooltipRef.style.left = `${x}px`;\n    this.tooltipRef.style.top = `${y}px`;\n\n    // Arrow\n    // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js\n    const side = currentPlacement.split('-')[0];\n    const { x: arrowX, y: arrowY } = middlewareData.arrow;\n    const staticSide = SIDE_MAP[side];\n\n    Object.assign(this.arrowRef.style, {\n      top: arrowY ? `${arrowY}px` : '',\n      left: arrowX ? `${arrowX}px` : '',\n      [staticSide]: `${-this.arrowRef.offsetWidth / 2}px`,\n    });\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div\n          role=\"tooltip\"\n          tabindex=\"-1\"\n          class={this.tooltipClasses}\n          ref={(el: HTMLDivElement & PopoverElement) => (this.tooltipRef = el)}\n        >\n          <span\n            class=\"arrow\"\n            ref={el => {\n              this.arrowRef = el;\n            }}\n          ></span>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"post-tooltip.js","sourceRoot":"","sources":["../../../../src/components/post-tooltip/post-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  inline,\n  offset,\n  Placement,\n  shift,\n} from '@floating-ui/dom';\nimport isFocusable from 'ally.js/esm/is/focusable';\n\n// Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green\nimport '@oddbird/popover-polyfill';\n\n// Patch for long press on touch devices\nimport 'long-press-event';\n\nimport { version } from '../../../package.json';\nimport { checkOneOf } from '../../utils';\nimport { BACKGROUND_COLOR, BackgroundColor } from './types';\n\nconst SIDE_MAP = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n\ninterface PopoverElement {\n  showPopover: () => void;\n  hidePopover: () => void;\n  togglePopover: (force?: boolean) => boolean;\n}\n\n@Component({\n  tag: 'post-tooltip',\n  styleUrl: 'post-tooltip.scss',\n  shadow: true,\n})\nexport class PostTooltip {\n  private tooltipRef: HTMLDivElement & PopoverElement;\n  private arrowRef: HTMLElement;\n  private clearAutoUpdate: () => void;\n  private readonly localShowTooltip: (e: Event) => Promise<void>;\n  private readonly localHideTooltip: () => Promise<void>;\n  private readonly localToggleTooltip: () => Promise<void>;\n  private eventTarget: Element;\n\n  @Element() host: HTMLPostTooltipElement;\n\n  @State() tooltipClasses: string;\n\n  /**\n   * Defines the background color of the tooltip.\n   * Choose the one that provides the best contrast in your scenario.\n   */\n  @Prop() readonly backgroundColor?: BackgroundColor = 'primary';\n\n  /**\n   * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\n   * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\n   * towards the viewport if they would overlap edge boundaries.\n   */\n  @Prop() readonly placement?: Placement = 'top';\n\n  @Watch('backgroundColor')\n  validateBackgroundColor(newValue = this.backgroundColor) {\n    checkOneOf(\n      newValue,\n      BACKGROUND_COLOR,\n      `The post-tooltip \"background-color\" prop should contain one of those values: ${BACKGROUND_COLOR.join(\n        ', ',\n      )}`,\n    );\n\n    if (newValue === 'yellow') {\n      this.tooltipClasses = 'bg-yellow';\n    } else {\n      this.tooltipClasses = 'bg-primary';\n    }\n  }\n\n  constructor() {\n    // Create local versions of event handlers for de-registration\n    // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class\n    this.localShowTooltip = e => this.show(e.target as HTMLElement);\n    this.localHideTooltip = this.hide.bind(this);\n    this.localToggleTooltip = this.toggle.bind(this);\n  }\n\n  componentWillLoad() {\n    this.validateBackgroundColor();\n\n    // Append tooltip host to the end of the body to get around overflow: hidden restrictions\n    // for browsers that don't support popover yet\n    document.body.appendChild(this.host);\n  }\n\n  connectedCallback() {\n    if (!this.host.id) {\n      throw new Error(\n        'No id set: <post-tooltip> must have an id, linking it to it\\'s target element using the data-tooltip-target attribute.',\n      );\n    }\n\n    if (!this.triggers) {\n      throw new Error(\n        `No trigger found for <post-tooltip id=\"${this.host.id}\">, please add the 'data-tooltip-target=\"${this.host.id}\" attribute to the trigger element.`,\n      );\n    }\n\n    // Patch popovertargetaction=\"interest\" until it's implemented\n    // https://github.com/openui/open-ui/issues/767#issuecomment-1654177227\n    this.triggers.forEach(trigger => this.patchPopoverTargetActionInterest(trigger));\n  }\n\n  /**\n   * Remove a bunch of event listeners if the tooltip gets removed from the DOM\n   */\n  disconnectedCallback() {\n    this.triggers.forEach(trigger => {\n      trigger.removeEventListener('mouseenter', this.localShowTooltip);\n      trigger.removeEventListener('mouseleave', this.localHideTooltip);\n      trigger.removeEventListener('focus', this.localShowTooltip);\n      trigger.removeEventListener('blur', this.localHideTooltip);\n      trigger.removeEventListener('long-press', this.localShowTooltip);\n    });\n    if (this.tooltipRef)\n      this.tooltipRef.removeEventListener('beforetoggle', this.localToggleTooltip);\n    if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate();\n  }\n\n  componentDidLoad() {\n    // Has the benefit of rendering the tooltip without the popover attribute which\n    // causes the tooltip to show up on the page if it's not linked to a target. This makes\n    // the error obvious.\n    if (!this.host.id || !this.triggers) return false;\n\n    this.tooltipRef.setAttribute('popover', '');\n    this.tooltipRef.addEventListener('beforetoggle', this.handleToggle.bind(this));\n  }\n\n  /**\n   * Programmatically display the tooltip\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   */\n  @Method()\n  async show(target: HTMLElement) {\n    this.eventTarget = target;\n    this.tooltipRef.showPopover();\n  }\n\n  /**\n   * Programmatically hide this tooltip\n   */\n  @Method()\n  async hide() {\n    this.eventTarget = null;\n    this.tooltipRef.hidePopover();\n  }\n\n  /**\n   * Toggle tooltip display\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   * @param force Pass true to always show or false to always hide\n   */\n  @Method()\n  async toggle(target: HTMLElement, force?: boolean) {\n    this.eventTarget = target;\n    this.tooltipRef.togglePopover(force);\n  }\n\n  private get triggers() {\n    return document.querySelectorAll(`[data-tooltip-target=\"${this.host.id}\"]`);\n  }\n\n  private patchPopoverTargetActionInterest(trigger: Element) {\n    trigger.addEventListener('mouseenter', this.localShowTooltip);\n    trigger.addEventListener('mouseleave', this.localHideTooltip);\n    trigger.addEventListener('focus', this.localShowTooltip);\n    trigger.addEventListener('blur', this.localHideTooltip);\n    trigger.addEventListener('long-press', this.localShowTooltip);\n\n    // Patch missing aria-describedby attribute on the trigger without overriding existing values\n    const describedBy = trigger.getAttribute('aria-describedby');\n    if (!describedBy?.includes(this.host.id)) {\n      const newDescribedBy = describedBy ? `${describedBy} ${this.host.id}` : this.host.id;\n      trigger.setAttribute('aria-describedby', newDescribedBy);\n    }\n\n    // Patch missing focus ability on the trigger element\n    if (!isFocusable(trigger)) {\n      trigger.setAttribute('tabindex', '0');\n    }\n  }\n\n  /**\n   * Start or stop auto updates based on tooltip events.\n   * Tooltips can be closed or opened with other methods than class members,\n   * therefore listening to the toggle event is safer for cleaning up.\n   * @param e ToggleEvent\n   */\n  private handleToggle(e: ToggleEvent) {\n    const isOpen = e.newState === 'open';\n    if (isOpen) {\n      this.startAutoupdates();\n    } else {\n      if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate();\n    }\n  }\n\n  /**\n   * Start listening for DOM updates, scroll events etc. that have\n   * an influence on tooltip positioning\n   */\n  private startAutoupdates() {\n    this.clearAutoUpdate = autoUpdate(\n      this.eventTarget,\n      this.tooltipRef,\n      this.positionTooltip.bind(this),\n    );\n  }\n\n  // Tooltip and arrow positioning with floating-ui\n  // Docs: https://floating-ui.com/docs/computePosition\n  private async positionTooltip() {\n    const {\n      x,\n      y,\n      middlewareData,\n      placement: currentPlacement,\n    } = await computePosition(this.eventTarget, this.tooltipRef, {\n      placement: this.placement || 'top',\n      middleware: [\n        flip(),\n        inline(),\n        shift({ padding: 8 }),\n        offset(12), // 4px outside of element to account for focus outline + ~arrow size\n        arrow({ element: this.arrowRef, padding: 8 }),\n      ],\n    });\n\n    // Tooltip\n    this.tooltipRef.style.left = `${x}px`;\n    this.tooltipRef.style.top = `${y}px`;\n\n    // Arrow\n    // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js\n    const side = currentPlacement.split('-')[0];\n    const { x: arrowX, y: arrowY } = middlewareData.arrow;\n    const staticSide = SIDE_MAP[side];\n\n    Object.assign(this.arrowRef.style, {\n      top: arrowY ? `${arrowY}px` : '',\n      left: arrowX ? `${arrowX}px` : '',\n      [staticSide]: `${-this.arrowRef.offsetWidth / 2}px`,\n    });\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div\n          role=\"tooltip\"\n          tabindex=\"-1\"\n          class={this.tooltipClasses}\n          ref={(el: HTMLDivElement & PopoverElement) => (this.tooltipRef = el)}\n        >\n          <span\n            class=\"arrow\"\n            ref={el => {\n              this.arrowRef = el;\n            }}\n          ></span>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -1,2 +1,9 @@
-export {};
+// Export every single component so it gets included in the dist output
+export { PostAlert } from './components/post-alert/post-alert';
+export { PostCollapsible } from './components/post-collapsible/post-collapsible';
+export { PostIcon } from './components/post-icon/post-icon';
+export { PostTabs } from './components/post-tabs/post-tabs';
+export { PostTabHeader } from './components/post-tab-header/post-tab-header';
+export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
+export { PostTooltip } from './components/post-tooltip/post-tooltip';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"","sourcesContent":["export { Components, JSX } from './components';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,uEAAuE;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC","sourcesContent":["export { Components, JSX } from './components';\n\n// Export every single component so it gets included in the dist output\nexport { PostAlert } from './components/post-alert/post-alert';\nexport { PostCollapsible } from './components/post-collapsible/post-collapsible';\nexport { PostIcon } from './components/post-icon/post-icon';\nexport { PostTabs } from './components/post-tabs/post-tabs';\nexport { PostTabHeader } from './components/post-tab-header/post-tab-header';\nexport { PostTabPanel } from './components/post-tab-panel/post-tab-panel';\nexport { PostTooltip } from './components/post-tooltip/post-tooltip';\n"]}

package/dist/collection/utils/index.js

@@ -1,5 +1,3 @@
-export * from './get-element-height';
-export * from './on-transition-end';
 export * from './property-checkers';
-export * from './should-reduce-motion';
+export * from './is-motion-reduced';
 //# sourceMappingURL=index.js.map

package/dist/collection/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './get-element-height';\nexport * from './on-transition-end';\nexport * from './property-checkers';\nexport * from './should-reduce-motion';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './property-checkers';\nexport * from './is-motion-reduced';\n"]}

package/dist/collection/utils/is-motion-reduced.js

@@ -0,0 +1,4 @@
+export function isMotionReduced() {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+//# sourceMappingURL=is-motion-reduced.js.map

package/dist/collection/utils/is-motion-reduced.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-motion-reduced.js","sourceRoot":"","sources":["../../../src/utils/is-motion-reduced.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe;EAC7B,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE,CAAC","sourcesContent":["export function isMotionReduced(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}

package/dist/collection/utils/property-checkers/check-non-empty.js

@@ -1,4 +1,4 @@
-import { EMPTY_VALUES } from './constants';
+import { EMPTY_VALUES } from "./constants";
 export function checkNonEmpty(value, error) {
   if (EMPTY_VALUES.some(v => v === value)) {
     throw new Error(error);

package/dist/collection/utils/property-checkers/empty-or.js

@@ -1,4 +1,4 @@
-import { EMPTY_VALUES } from './constants';
+import { EMPTY_VALUES } from "./constants";
 export function emptyOr(check) {
   return (...args) => {
     const value = args[0];

package/dist/collection/utils/property-checkers/index.js

@@ -1,7 +1,7 @@
-import { emptyOr } from './empty-or';
-import { checkOneOf } from './check-one-of';
-import { checkPattern } from './check-pattern';
-import { checkType } from './check-type';
+import { emptyOr } from "./empty-or";
+import { checkOneOf } from "./check-one-of";
+import { checkPattern } from "./check-pattern";
+import { checkType } from "./check-type";
 export const checkEmptyOrOneOf = emptyOr(checkOneOf);
 export const checkEmptyOrPattern = emptyOr(checkPattern);
 export const checkEmptyOrType = emptyOr(checkType);

package/dist/components/check-non-empty.js

@@ -1,4 +1,4 @@
-const EMPTY_VALUES = [undefined, null, ''];
+import { E as EMPTY_VALUES } from './constants.js';
 
 function checkNonEmpty(value, error) {
   if (EMPTY_VALUES.some(v => v === value)) {
@@ -6,6 +6,6 @@ function checkNonEmpty(value, error) {
   }
 }
 
-export { EMPTY_VALUES as E, checkNonEmpty as c };
+export { checkNonEmpty as c };
 
 //# sourceMappingURL=check-non-empty.js.map

package/dist/components/check-non-empty.js.map

@@ -1 +1 @@
-{"file":"check-non-empty.js","mappings":"MAAa,YAAY,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE;;SCEhC,aAAa,CAAC,KAAc,EAAE,KAAa;EACzD,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;IACvC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACxB;AACH;;;;","names":[],"sources":["./src/utils/property-checkers/constants.ts","./src/utils/property-checkers/check-non-empty.ts"],"sourcesContent":["export const EMPTY_VALUES = [undefined, null, ''];\n","import { EMPTY_VALUES } from './constants';\n\nexport function checkNonEmpty(value: unknown, error: string) {\n  if (EMPTY_VALUES.some(v => v === value)) {\n    throw new Error(error);\n  }\n}\n"],"version":3}
+{"file":"check-non-empty.js","mappings":";;SAEgB,aAAa,CAAC,KAAc,EAAE,KAAa;EACzD,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;IACvC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACxB;AACH;;;;","names":[],"sources":["src/utils/property-checkers/check-non-empty.ts"],"sourcesContent":["import { EMPTY_VALUES } from './constants';\n\nexport function checkNonEmpty(value: unknown, error: string) {\n  if (EMPTY_VALUES.some(v => v === value)) {\n    throw new Error(error);\n  }\n}\n"],"version":3}

package/dist/components/check-one-of.js.map

@@ -1 +1 @@
-{"file":"check-one-of.js","mappings":"SAAgB,UAAU,CAAI,KAAQ,EAAE,cAA4B,EAAE,KAAa;EACjF,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;;;","names":[],"sources":["./src/utils/property-checkers/check-one-of.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: readonly T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\n}\n"],"version":3}
+{"file":"check-one-of.js","mappings":"SAAgB,UAAU,CAAI,KAAQ,EAAE,cAA4B,EAAE,KAAa;EACjF,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;;;","names":[],"sources":["src/utils/property-checkers/check-one-of.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: readonly T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\n}\n"],"version":3}

package/dist/components/constants.js

@@ -0,0 +1,5 @@
+const EMPTY_VALUES = [undefined, null, ''];
+
+export { EMPTY_VALUES as E };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/constants.js.map

@@ -0,0 +1 @@
+{"file":"constants.js","mappings":"MAAa,YAAY,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE;;;;","names":[],"sources":["src/utils/property-checkers/constants.ts"],"sourcesContent":["export const EMPTY_VALUES = [undefined, null, ''];\n"],"version":3}