@swisspost/design-system-components 9.0.0-next.2 → 9.0.0-next.21

package/dist/components/post-tabs2.js

@@ -6,7 +6,7 @@ import { f as fadeOut, a as fadeIn } from './fade.js';
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
  * @see https://stenciljs.com/docs/api#componentonready
  */
-const componentOnReady = (el) => {
+function componentOnReady(el) {
     if (typeof el.componentOnReady === 'function') {
         return el.componentOnReady();
     }
@@ -15,15 +15,15 @@ const componentOnReady = (el) => {
             resolve(el);
         }));
     }
-};
-const customOnReady = (callback) => {
+}
+function customOnReady(callback) {
     if (typeof requestAnimationFrame === 'function') {
         return requestAnimationFrame(callback);
     }
     return setTimeout(callback);
-};
+}
 
-const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(var(--post-contrast-color-rgb), 0.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-white .tabs-wrapper{background-color:#fff}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-black .tabs-wrapper{background-color:#000}.bg-primary .tabs-wrapper{background-color:#333}.bg-secondary .tabs-wrapper{background-color:#666}.bg-success .tabs-wrapper{background-color:#2c871d}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-error .tabs-wrapper{background-color:#a51728}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}.bg-error-background .tabs-wrapper{background-color:#ffdade}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}:host{display:block}";
+const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}";
 const PostTabsStyle0 = postTabsCss;
 
 const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
@@ -32,16 +32,25 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.postChange = createEvent(this, "postChange", 7);
-        this.isLoaded = false;
         this.activePanel = undefined;
     }
+    activeTab;
+    showing;
+    hiding;
+    isLoaded = false;
     get tabs() {
-        return this.host.querySelectorAll('post-tab-header');
+        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
+    get host() { return this; }
+    /**
+     * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
+     * The payload is the name of the newly shown panel.
+     */
+    postChange;
     componentDidLoad() {
         this.moveMisplacedTabs();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
+        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
         void this.show(initiallyActivePanel);
         this.isLoaded = true;
     }
@@ -50,9 +59,8 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
      * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
      */
     async show(panelName) {
-        var _a;
         // do nothing if the tab is already active
-        if (panelName === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)) {
+        if (panelName === this.activeTab?.panel) {
             return;
         }
         const previousTab = this.activeTab;
@@ -112,7 +120,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         });
         // if the currently active tab was removed from the DOM then select the first one
         if (this.activeTab && !this.activeTab.isConnected) {
-            void this.show(this.tabs.item(0).panel);
+            void this.show(this.tabs[0]?.panel);
         }
     }
     activateTab(tab) {
@@ -164,9 +172,8 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '6a3e84a92b03d462dbff1b8fc638f7ebf8ea9d23', "data-version": version }, h("div", { key: 'e73b58f1524e70401089830b1b9b47a2c85b828a', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '9da5ce2d30d37c74dee92f2e871e56e96d07d429', class: "tabs", role: "tablist" }, h("slot", { key: '944e209f2f23b9a3469bc6b5167a0939da4c9631', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '93caabfd1a0be19df3e8be64f0965de488159526', class: "tab-content", part: "content" }, h("slot", { key: '92465fa749afad52130631cb3957fefeb40b8e9a', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: 'dae24eee55a75f9b825f590883a9c1e896c1e9fc', "data-version": version }, h("div", { key: '0a26de80b8267ddc30455b0b5afbf10ae521232b', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '826cb0a4355eeb5ddc07288e1e68fc72785c095f', class: "tabs", role: "tablist" }, h("slot", { key: '94ce90bc3dc8ff4b5012fcfa3c0039b188c14002', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '462f80f3368431344910cc317f1c0f42112dc99a', class: "tab-content", part: "content" }, h("slot", { key: '57a80ac790ca75f3b62382994c21a3a3c78004cc', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
-    get host() { return this; }
     static get style() { return PostTabsStyle0; }
 }, [1, "post-tabs", {
         "activePanel": [1, "active-panel"],

package/dist/components/post-tag2.js

@@ -2,10 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
 
-const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:.25rem;padding:0 .5rem;max-width:100%;background-color:var(--post-tag-bg);border:1px solid rgba(0,0,0,0);border-radius:.25rem;font-size:1rem;line-height:1.875rem;white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:1.5rem}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:var(--post-contrast-color)}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
+const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
 const PostTagStyle0 = postTagCss;
 
 const PostTag = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLElement {
+    get host() { return this; }
     constructor() {
         super();
         this.__registerHost();
@@ -35,9 +36,8 @@ const PostTag = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEleme
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '7426002d3008de53e92edc8ec2fc759569b191bf', "data-version": version }, h("div", { key: '1cde8f5c3d2db66f45aaa64091a1b76f1d1468ee', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: 'cc63b7277ba4f4076a46f5038b24699f6818c81b', class: "tag-text" }, h("slot", { key: '37b57632add7f7c093e42302e44defef63ccc29f' })))));
+        return (h(Host, { key: '4ca273166b81099dd8fc0f69d3d38215e3d7ccbc', "data-version": version }, h("div", { key: 'b6c4eb6a3bf8cbaad18cf6277dab79bd6e350f0a', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '4f9e8cf6b2c723e31d60e30464c1106a9f72b5b4', class: "tag-text" }, h("slot", { key: '819a4e6ff743386f8d5d6b1d94dea9ee4a612784' })))));
     }
-    get host() { return this; }
     static get watchers() { return {
         "variant": ["variantChanged"],
         "size": ["sizeChanged"]

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

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

package/dist/components/post-togglebutton.js

@@ -0,0 +1,6 @@
+import { P as PostTogglebutton$1, d as defineCustomElement$1 } from './post-togglebutton2.js';
+
+const PostTogglebutton = PostTogglebutton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostTogglebutton, defineCustomElement };

package/dist/components/post-togglebutton2.js

@@ -0,0 +1,61 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkType } from './check-type.js';
+
+const postTogglebuttonCss = ":host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
+const PostTogglebuttonStyle0 = postTogglebuttonCss;
+
+const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.toggled = false;
+    }
+    get host() { return this; }
+    validateToggled() {
+        checkType(this, 'toggled', 'boolean');
+    }
+    componentWillLoad() {
+        this.validateToggled();
+        // add event listener to not override listener that might be set on the host
+        this.host.addEventListener('click', () => this.handleClick());
+        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
+    }
+    handleClick = () => {
+        this.toggled = !this.toggled;
+    };
+    handleKeydown = (event) => {
+        // perform a click when enter or spaced are pressed to mimic the button behavior
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault(); // prevents the page from scrolling when space is pressed
+            this.host.click();
+        }
+    };
+    render() {
+        return (h(Host, { key: '3a1429a9b67b8cfafae184fe0d060ee3a04974e0', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9ab1537574423740fc335fde732c699698acac25' })));
+    }
+    static get watchers() { return {
+        "toggled": ["validateToggled"]
+    }; }
+    static get style() { return PostTogglebuttonStyle0; }
+}, [1, "post-togglebutton", {
+        "toggled": [1028]
+    }, undefined, {
+        "toggled": ["validateToggled"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-togglebutton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-togglebutton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTogglebutton);
+            }
+            break;
+    } });
+}
+
+export { PostTogglebutton as P, defineCustomElement as d };

package/dist/components/post-tooltip2.js

@@ -1,13 +1,9 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
 import { v as version$1 } from './package.js';
 import { g as getAttributeObserver } from './attribute-observer.js';
-import { b as checkEmptyOrType } from './index2.js';
+import { e as checkEmptyOrType } from './index2.js';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
-function timeout(delay) {
-    return new Promise(resolve => setTimeout(resolve, delay));
-}
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -4777,7 +4773,7 @@ const isFocusable = /*@__PURE__*/getDefaultExportFromCjs(focusable.exports);
 
 }(window, document));
 
-const postTooltipCss = ":host{--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51}post-popovercontainer{padding:.25rem .5rem;max-width:13.5rem;min-height:1rem}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}";
+const postTooltipCss = "post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:calc(224px - var(--post-core-dimension-8));min-height:var(--post-core-dimension-16)}";
 const PostTooltipStyle0 = postTooltipCss;
 
 const OPEN_DELAY = 650; // matches HTML title delay
@@ -4791,6 +4787,8 @@ let tooltipInstances = 0;
 let hideTooltipTimeout = null;
 const tooltipTargetAttribute = 'data-tooltip-target';
 const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
+let globalCurrentTarget;
+let tooltipTimeout = null;
 /**
  * Global event listener to show tooltips. This is globalized so that triggers that are rendered
  * async will still work without the need to set listeners on the element itself
@@ -4803,15 +4801,18 @@ const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
  */
 const globalInterestHandler = (e) => {
     const targetElement = e.target.closest(tooltipTargetAttributeSelector);
-    if (!targetElement || !('getAttribute' in targetElement))
+    globalCurrentTarget = targetElement;
+    if (!targetElement || !('getAttribute' in targetElement)) {
+        clearTimeout(tooltipTimeout);
         return;
+    }
     const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
     if (!tooltipTarget || tooltipTarget === '')
         return;
     const tooltip = document.getElementById(tooltipTarget);
     // Determine if the tooltip was triggered by a focus event
     const triggeredByFocus = e.type === 'focusin';
-    void (tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(targetElement, triggeredByFocus));
+    void tooltip?.show(targetElement, triggeredByFocus);
     if (hideTooltipTimeout) {
         window.clearTimeout(hideTooltipTimeout);
         hideTooltipTimeout = null;
@@ -4852,7 +4853,7 @@ const patchAccessibilityFeatures = (trigger) => {
     const describedBy = trigger.getAttribute('aria-describedby');
     const id = trigger.getAttribute(tooltipTargetAttribute);
     // Add tooltip to aria-describedby
-    if (!(describedBy === null || describedBy === void 0 ? void 0 : describedBy.includes(id))) {
+    if (!describedBy?.includes(id)) {
         const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
         trigger.setAttribute('aria-describedby', newDescribedBy);
     }
@@ -4868,13 +4869,15 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.wasOpenedByFocus = false;
         this.placement = 'top';
         this.arrow = true;
         this.delayed = false;
     }
+    popoverRef;
+    wasOpenedByFocus = false;
+    get host() { return this; }
     validateDelayed() {
-        checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
+        checkEmptyOrType(this, 'delayed', 'boolean');
     }
     connectedCallback() {
         this.validateDelayed();
@@ -4931,18 +4934,29 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
      * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
      */
     async show(target, triggeredByFocus = false) {
-        if (this.delayed)
-            await timeout(OPEN_DELAY);
-        // Determine if the tooltip was opened by a focus event
-        this.wasOpenedByFocus = triggeredByFocus;
-        // Disable pointer events if triggered by focus, otherwise enable them
-        if (this.wasOpenedByFocus) {
-            this.host.style.pointerEvents = 'none';
+        const showTooltip = () => {
+            // If focus or pointer event is not on the button anymore, don't show the tooltip
+            if (globalCurrentTarget !== target)
+                return;
+            // Determine if the tooltip was opened by a focus event
+            this.wasOpenedByFocus = triggeredByFocus;
+            // Disable pointer events if triggered by focus, otherwise enable them
+            if (this.wasOpenedByFocus) {
+                this.host.style.pointerEvents = 'none';
+            }
+            else {
+                this.host.style.pointerEvents = 'auto';
+            }
+            this.popoverRef.show(target);
+        };
+        if (this.delayed) {
+            tooltipTimeout = setTimeout(() => {
+                showTooltip();
+            }, OPEN_DELAY);
         }
         else {
-            this.host.style.pointerEvents = 'auto';
+            showTooltip();
         }
-        this.popoverRef.show(target);
     }
     /**
      * Programmatically hide this tooltip
@@ -4977,9 +4991,8 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '6d5e454da6fb46fb4446d8ed1deb8c6a9f2f2e0f', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '7b626cd4699e4178fbd8506b88fae64c94ab1631', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'ae5721af16313dc3737947d2ae130e0514ef2dd8' }))));
+        return (h(Host, { key: '89b0e64fd5fde4c21d9c1eb624facff38b287e4a', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '8006874c12a2eebe39682a09db677e8b315dd6bb', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'cf3bd12703885fe886f1703038437b59a4d79fd3' }))));
     }
-    get host() { return this; }
     static get watchers() { return {
         "delayed": ["validateDelayed"]
     }; }

package/dist/components/slide.js

@@ -0,0 +1,25 @@
+const easing = 'ease';
+const duration = 500;
+const fill = 'forwards';
+function slideUp(el, translateSize = '100%') {
+    return el.animate([
+        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+        { transform: 'translateY(0)' }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+}
+function slideDown(el, translateSize = '100%') {
+    return el.animate([
+        { transform: 'translateY(0)' }, // Starting position (no translation)
+        { transform: `translateY(${translateSize})` }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+}
+
+export { slideDown as a, slideUp as s };