@swisspost/design-system-components 1.4.0 → 1.5.1

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

@@ -0,0 +1 @@
+:host,.bg-yellow{--post-bg-opacity: 1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}.bg-yellow{--post-contrast-color: #000;--post-contrast-color-inverted: #fff;--post-gray-10: hsl(0, 0%, 90%);--post-gray-20: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-60: hsl(0, 0%, 40%);--post-gray-80: hsl(0, 0%, 20%);--post-yellow: #fc0;--post-light: #faf9f8;--post-gray: #f4f3f1;--post-dark: hsl(0, 0%, 20%);--post-primary: hsl(0, 0%, 20%);--post-white: #fff;--post-black: #000;--post-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

@@ -0,0 +1,338 @@
+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';
+// 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';
+const SIDE_MAP = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right',
+};
+export class PostTooltip {
+  validateBackgroundColor(newValue = this.backgroundColor) {
+    checkOneOf(newValue, BACKGROUND_COLOR, `The post-tooltip "background-color" prop should contain one of those values: ${BACKGROUND_COLOR.join(', ')}`);
+    if (newValue === 'yellow') {
+      this.tooltipClasses = 'bg-yellow';
+    }
+    else {
+      this.tooltipClasses = 'bg-primary';
+    }
+  }
+  constructor() {
+    this.tooltipClasses = undefined;
+    this.backgroundColor = 'primary';
+    this.placement = 'top';
+    // Create local versions of event handlers for de-registration
+    // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class
+    this.localShowTooltip = e => this.show(e.target);
+    this.localHideTooltip = this.hide.bind(this);
+    this.localToggleTooltip = this.toggle.bind(this);
+  }
+  componentWillLoad() {
+    this.validateBackgroundColor();
+    // Append tooltip host to the end of the body to get around overflow: hidden restrictions
+    // for browsers that don't support popover yet
+    document.body.appendChild(this.host);
+  }
+  connectedCallback() {
+    if (!this.host.id) {
+      throw new Error('No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.');
+    }
+    if (!this.triggers) {
+      throw new Error(`No trigger found for <post-tooltip id="${this.host.id}">, please add the 'data-tooltip-target="${this.host.id}" attribute to the trigger element.`);
+    }
+    // Patch popovertargetaction="interest" until it's implemented
+    // https://github.com/openui/open-ui/issues/767#issuecomment-1654177227
+    this.triggers.forEach(trigger => this.patchPopoverTargetActionInterest(trigger));
+  }
+  /**
+   * Remove a bunch of event listeners if the tooltip gets removed from the DOM
+   */
+  disconnectedCallback() {
+    this.triggers.forEach(trigger => {
+      trigger.removeEventListener('mouseenter', this.localShowTooltip);
+      trigger.removeEventListener('mouseleave', this.localHideTooltip);
+      trigger.removeEventListener('focus', this.localShowTooltip);
+      trigger.removeEventListener('blur', this.localHideTooltip);
+      trigger.removeEventListener('long-press', this.localShowTooltip);
+    });
+    if (this.tooltipRef)
+      this.tooltipRef.removeEventListener('beforetoggle', this.localToggleTooltip);
+    if (typeof this.clearAutoUpdate === 'function')
+      this.clearAutoUpdate();
+  }
+  componentDidLoad() {
+    // Has the benefit of rendering the tooltip without the popover attribute which
+    // causes the tooltip to show up on the page if it's not linked to a target. This makes
+    // the error obvious.
+    if (!this.host.id || !this.triggers)
+      return false;
+    this.tooltipRef.setAttribute('popover', '');
+    this.tooltipRef.addEventListener('beforetoggle', this.handleToggle.bind(this));
+  }
+  /**
+   * Programmatically display the tooltip
+   * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+   */
+  async show(target) {
+    this.eventTarget = target;
+    this.tooltipRef.showPopover();
+  }
+  /**
+   * Programmatically hide this tooltip
+   */
+  async hide() {
+    this.eventTarget = null;
+    this.tooltipRef.hidePopover();
+  }
+  /**
+   * Toggle tooltip display
+   * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+   * @param force Pass true to always show or false to always hide
+   */
+  async toggle(target, force) {
+    this.eventTarget = target;
+    this.tooltipRef.togglePopover(force);
+  }
+  get triggers() {
+    return document.querySelectorAll(`[data-tooltip-target="${this.host.id}"]`);
+  }
+  patchPopoverTargetActionInterest(trigger) {
+    trigger.addEventListener('mouseenter', this.localShowTooltip);
+    trigger.addEventListener('mouseleave', this.localHideTooltip);
+    trigger.addEventListener('focus', this.localShowTooltip);
+    trigger.addEventListener('blur', this.localHideTooltip);
+    trigger.addEventListener('long-press', this.localShowTooltip);
+    // Patch missing aria-describedby attribute on the trigger without overriding existing values
+    const describedBy = trigger.getAttribute('aria-describedby');
+    if (!(describedBy === null || describedBy === void 0 ? void 0 : describedBy.includes(this.host.id))) {
+      const newDescribedBy = describedBy ? `${describedBy} ${this.host.id}` : this.host.id;
+      trigger.setAttribute('aria-describedby', newDescribedBy);
+    }
+    // Patch missing focus ability on the trigger element
+    if (!isFocusable(trigger)) {
+      trigger.setAttribute('tabindex', '0');
+    }
+  }
+  /**
+   * Start or stop auto updates based on tooltip events.
+   * Tooltips can be closed or opened with other methods than class members,
+   * therefore listening to the toggle event is safer for cleaning up.
+   * @param e ToggleEvent
+   */
+  handleToggle(e) {
+    const isOpen = e.newState === 'open';
+    if (isOpen) {
+      this.startAutoupdates();
+    }
+    else {
+      if (typeof this.clearAutoUpdate === 'function')
+        this.clearAutoUpdate();
+    }
+  }
+  /**
+   * Start listening for DOM updates, scroll events etc. that have
+   * an influence on tooltip positioning
+   */
+  startAutoupdates() {
+    this.clearAutoUpdate = autoUpdate(this.eventTarget, this.tooltipRef, this.positionTooltip.bind(this));
+  }
+  // Tooltip and arrow positioning with floating-ui
+  // Docs: https://floating-ui.com/docs/computePosition
+  async positionTooltip() {
+    const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.tooltipRef, {
+      placement: this.placement || 'top',
+      middleware: [
+        flip(),
+        inline(),
+        shift({ padding: 8 }),
+        offset(12),
+        arrow({ element: this.arrowRef, padding: 8 }),
+      ],
+    });
+    // Tooltip
+    this.tooltipRef.style.left = `${x}px`;
+    this.tooltipRef.style.top = `${y}px`;
+    // Arrow
+    // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js
+    const side = currentPlacement.split('-')[0];
+    const { x: arrowX, y: arrowY } = middlewareData.arrow;
+    const staticSide = SIDE_MAP[side];
+    Object.assign(this.arrowRef.style, {
+      top: arrowY ? `${arrowY}px` : '',
+      left: arrowX ? `${arrowX}px` : '',
+      [staticSide]: `${-this.arrowRef.offsetWidth / 2}px`,
+    });
+  }
+  render() {
+    return (h(Host, { "data-version": version }, h("div", { role: "tooltip", tabindex: "-1", class: this.tooltipClasses, ref: (el) => (this.tooltipRef = el) }, h("span", { class: "arrow", ref: el => {
+        this.arrowRef = el;
+      } }), h("slot", null))));
+  }
+  static get is() { return "post-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "backgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BackgroundColor",
+          "resolved": "\"primary\" | \"yellow\"",
+          "references": {
+            "BackgroundColor": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines the background color of the tooltip.\nChoose the one that provides the best contrast in your scenario."
+        },
+        "attribute": "background-color",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'top'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tooltipClasses": {}
+    };
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "(target: HTMLElement) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                }],
+              "text": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Programmatically display the tooltip",
+          "tags": [{
+              "name": "param",
+              "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+            }]
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Programmatically hide this tooltip",
+          "tags": []
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "(target: HTMLElement, force?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                }],
+              "text": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "force Pass true to always show or false to always hide"
+                }],
+              "text": "Pass true to always show or false to always hide"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle tooltip display",
+          "tags": [{
+              "name": "param",
+              "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+            }, {
+              "name": "param",
+              "text": "force Pass true to always show or false to always hide"
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "backgroundColor",
+        "methodName": "validateBackgroundColor"
+      }];
+  }
+}
+//# sourceMappingURL=post-tooltip.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,2 @@
+export const BACKGROUND_COLOR = ['primary', 'yellow'];
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/post-tooltip/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAU,CAAC","sourcesContent":["export const BACKGROUND_COLOR = ['primary', 'yellow'] as const;\n\nexport type BackgroundColor = (typeof BACKGROUND_COLOR)[number];\n"]}

package/dist/collection/utils/property-checkers/check-one-of.js.map

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

package/dist/collection/utils/property-checkers/check-pattern.js

@@ -0,0 +1,5 @@
+export function checkPattern(value, pattern, errorMessage) {
+  if (typeof value !== 'string' || !pattern.test(value))
+    throw new Error(errorMessage);
+}
+//# sourceMappingURL=check-pattern.js.map

package/dist/collection/utils/property-checkers/check-pattern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-pattern.js","sourceRoot":"","sources":["../../../../src/utils/property-checkers/check-pattern.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY,CAAC,KAAc,EAAE,OAAe,EAAE,YAAoB;EAChF,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;AACvF,CAAC","sourcesContent":["export function checkPattern(value: unknown, pattern: RegExp, errorMessage: string) {\n  if (typeof value !== 'string' || !pattern.test(value)) throw new Error(errorMessage);\n}\n"]}

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

@@ -1,9 +1,12 @@
 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);
 export * from './check-non-empty';
 export * from './check-one-of';
+export * from './check-pattern';
 export * from './check-type';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/utils/property-checkers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AACrD,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAEnD,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC","sourcesContent":["import { emptyOr } from './empty-or';\nimport { checkOneOf } from './check-one-of';\nimport { checkType } from './check-type';\n\nexport const checkEmptyOrOneOf = emptyOr(checkOneOf);\nexport const checkEmptyOrType = emptyOr(checkType);\n\nexport * from './check-non-empty';\nexport * from './check-one-of';\nexport * from './check-type';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/utils/property-checkers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AACrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAEnD,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC","sourcesContent":["import { emptyOr } from './empty-or';\nimport { checkOneOf } from './check-one-of';\nimport { checkPattern } from './check-pattern';\nimport { checkType } from './check-type';\n\nexport const checkEmptyOrOneOf = emptyOr(checkOneOf);\nexport const checkEmptyOrPattern = emptyOr(checkPattern);\nexport const checkEmptyOrType = emptyOr(checkType);\n\nexport * from './check-non-empty';\nexport * from './check-one-of';\nexport * from './check-pattern';\nexport * from './check-type';\n"]}

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

@@ -0,0 +1,8 @@
+function checkOneOf(value, possibleValues, error) {
+  if (!possibleValues.includes(value))
+    throw new Error(error);
+}
+
+export { checkOneOf as c };
+
+//# sourceMappingURL=check-one-of.js.map

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

@@ -0,0 +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}

package/dist/components/check-type.js

@@ -1,8 +1,3 @@
-function checkOneOf(value, possibleValues, error) {
-  if (!possibleValues.includes(value))
-    throw new Error(error);
-}
-
 function checkType(value, type, error) {
   const typeIsArray = type === 'array';
   const valueIsArray = Array.isArray(value);
@@ -16,6 +11,6 @@ function checkType(value, type, error) {
   }
 }
 
-export { checkOneOf as a, checkType as c };
+export { checkType as c };
 
 //# sourceMappingURL=check-type.js.map

package/dist/components/check-type.js.map

@@ -1 +1 @@
-{"file":"check-type.js","mappings":"SAAgB,UAAU,CAAI,KAAQ,EAAE,cAAmB,EAAE,KAAa;EACxE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;SCMgB,SAAS,CAAC,KAAc,EAAE,IAAkB,EAAE,KAAa;EACzE,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;EACrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;IAC/B,IAAI,YAAY,KAAK,WAAW;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GAC1D;OAAM;IACL,IAAI,OAAO,KAAK,KAAK,IAAI;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACnD;AACH;;;;","names":[],"sources":["./src/utils/property-checkers/check-one-of.ts","./src/utils/property-checkers/check-type.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\n}\n","export type PropertyType =\n  | 'boolean'\n  | 'number'\n  | 'string'\n  | 'array'\n  | 'object'\n  | 'function';\n\nexport function checkType(value: unknown, type: PropertyType, error: string) {\n  const typeIsArray = type === 'array';\n  const valueIsArray = Array.isArray(value);\n\n  if (typeIsArray || valueIsArray) {\n    if (valueIsArray !== typeIsArray) throw new Error(error);\n  } else {\n    if (typeof value !== type) throw new Error(error);\n  }\n}\n"],"version":3}
+{"file":"check-type.js","mappings":"SAQgB,SAAS,CAAC,KAAc,EAAE,IAAkB,EAAE,KAAa;EACzE,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;EACrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;IAC/B,IAAI,YAAY,KAAK,WAAW;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GAC1D;OAAM;IACL,IAAI,OAAO,KAAK,KAAK,IAAI;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACnD;AACH;;;;","names":[],"sources":["./src/utils/property-checkers/check-type.ts"],"sourcesContent":["export type PropertyType =\n  | 'boolean'\n  | 'number'\n  | 'string'\n  | 'array'\n  | 'object'\n  | 'function';\n\nexport function checkType(value: unknown, type: PropertyType, error: string) {\n  const typeIsArray = type === 'array';\n  const valueIsArray = Array.isArray(value);\n\n  if (typeIsArray || valueIsArray) {\n    if (valueIsArray !== typeIsArray) throw new Error(error);\n  } else {\n    if (typeof value !== type) throw new Error(error);\n  }\n}\n"],"version":3}

package/dist/components/fade.js

@@ -0,0 +1,9 @@
+const fadeDuration = 200;
+const fadedOutKeyFrame = { opacity: '0' };
+const fadedInKeyFrame = { opacity: '1' };
+const fadeIn = (el) => el.animate([fadedOutKeyFrame, fadedInKeyFrame], { duration: fadeDuration });
+const fadeOut = (el) => el.animate([fadedInKeyFrame, fadedOutKeyFrame], { duration: fadeDuration });
+
+export { fadeIn as a, fadeOut as f };
+
+//# sourceMappingURL=fade.js.map

package/dist/components/fade.js.map

@@ -0,0 +1 @@
+{"file":"fade.js","mappings":"AAAA,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,MAAM,gBAAgB,GAAG,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AACxC,MAAM,eAAe,GAAG,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;MAE1B,MAAM,GAAG,CAAC,EAAW,KAAgB,EAAE,CAAC,OAAO,CAC1D,CAAE,gBAAgB,EAAE,eAAe,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAC1B;MAEW,OAAO,GAAG,CAAC,EAAW,KAAgB,EAAE,CAAC,OAAO,CAC3D,CAAE,eAAe,EAAE,gBAAgB,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE;;;;","names":[],"sources":["./src/animations/fade.ts"],"sourcesContent":["const fadeDuration = 200;\nconst fadedOutKeyFrame = {opacity: '0'};\nconst fadedInKeyFrame = {opacity: '1'};\n\nexport const fadeIn = (el: Element): Animation => el.animate(\n  [ fadedOutKeyFrame, fadedInKeyFrame ],\n  { duration: fadeDuration }\n);\n\nexport const fadeOut = (el: Element): Animation => el.animate(\n  [ fadedInKeyFrame, fadedOutKeyFrame ],\n  { duration: fadeDuration }\n);\n"],"version":3}

package/dist/components/package.js

@@ -1,4 +1,4 @@
-const version = "1.4.0";
+const version = "1.5.1";
 
 export { version as v };
 

package/dist/components/post-alert.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostAlert extends Components.PostAlert, HTMLElement {}
+export const PostAlert: {
+  prototype: PostAlert;
+  new (): PostAlert;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;