@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37

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

@@ -1,3 +1 @@
-/*!
- * Copyright 2021 by Swiss Post, Information Technology
- */.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}
+@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}.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}

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

@@ -30,7 +30,7 @@ export class PostTag {
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '32c08ea43811e47b2560e335b59486c356fa5a9b', "data-version": version }, h("div", { key: 'f04dc3e4c5b14edea0e1fd1cab581c286f3d74ff', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '701e75bb1c31392d8f378339c5a31920cb5d8a7e', class: "tag-text" }, h("slot", { key: '6470a3ba2586bdc9ded20ff686f2c6ca58c47c69' })))));
+        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' })))));
     }
     static get is() { return "post-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -93,7 +93,7 @@ export class PostTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the icon `name` inside of the component.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs\">icon library</a>."
+                    "text": "Defines the icon `name` inside of the component.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs\">icon library</a>."
                 },
                 "attribute": "icon",
                 "reflect": false,

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

@@ -18,8 +18,8 @@ export class PostTogglebutton {
         };
         this.toggled = false;
     }
-    validateToggled(value = this.toggled) {
-        checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
+    validateToggled() {
+        checkType(this, 'toggled', 'boolean');
     }
     componentWillLoad() {
         this.validateToggled();
@@ -28,7 +28,7 @@ export class PostTogglebutton {
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
     render() {
-        return (h(Host, { key: 'f20b7e5f7cd14c1b0addf12600df27e7e5dab841', slot: "post-togglebutton", "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '526540ce9a66fa08f0142e674811fe88e3abcfa6' })));
+        return (h(Host, { key: '3a1429a9b67b8cfafae184fe0d060ee3a04974e0', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9ab1537574423740fc335fde732c699698acac25' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-: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}
+:host{display:none}:host([open]){display:block}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:200px;min-height:32px}

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

@@ -1,220 +1,59 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import isFocusable from "ally.js/is/focusable";
-import "long-press-event";
-import { getAttributeObserver } from "../../utils/attribute-observer";
-import { checkEmptyOrType } from "../../utils/index";
-const OPEN_DELAY = 650; // matches HTML title delay
-/**
- * @slot default - Slot for the content of the tooltip.
- */
-/**
- * Track how many instances remain on the page. Used for removing global event listeners
- */
-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
- *
- * This handler manages both pointer and focus events to properly trigger tooltips.
- * If the event is a focus event (e.g., keyboard navigation), pointer events are ignored to avoid
- * interference with tooltip behavior.
- * @param e Event
- * @returns
- */
-const globalInterestHandler = (e) => {
-    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
-    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));
-    if (hideTooltipTimeout) {
-        window.clearTimeout(hideTooltipTimeout);
-        hideTooltipTimeout = null;
-    }
-};
-/**
- * Global event listener to hide tooltips. This is globalized so that triggers that are rendered
- * async will still work without the need to set listeners on the element itself
- * @param e Event
- * @returns
- */
-const globalInterestLostHandler = (e) => {
-    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
-    if (!targetElement || !('getAttribute' in targetElement))
-        return;
-    const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
-    if (!tooltipTarget || tooltipTarget === '')
-        return;
-    const tooltip = document.getElementById(tooltipTarget);
-    globalHideTooltip(tooltip);
-};
-/**
- * Start the hiding process through a timeout to give other interest events a chance to
- * intervene and cancel the hide event.
- * @param {HTMLPostTooltipElement} tooltip
- */
-const globalHideTooltip = (tooltip) => {
-    hideTooltipTimeout = window.setTimeout(() => {
-        tooltip.hide();
-        hideTooltipTimeout = null;
-    }, 42);
-};
-/**
- * Patch some accessibility features that are hard to remember or understand
- * @param {HTMLElement} trigger
- */
-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))) {
-        const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
-        trigger.setAttribute('aria-describedby', newDescribedBy);
-    }
-    // Make element focusable
-    if (!isFocusable(trigger)) {
-        trigger.setAttribute('tabindex', '0');
-    }
-};
-// Initialize a mutation observer for patching accessibility features
-const triggerObserver = getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
+import { checkType } from "../../utils/index";
 export class PostTooltip {
     constructor() {
-        this.wasOpenedByFocus = false;
         this.placement = 'top';
-        this.arrow = true;
-        this.delayed = false;
+        this.arrow = false;
+        this.animation = null;
+        this.open = false;
     }
-    validateDelayed() {
-        checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
+    validateOpen() {
+        checkType(this, 'open', 'boolean', 'The "open" property of the post-tooltip must be a boolean.');
     }
     connectedCallback() {
-        this.validateDelayed();
+        this.validateOpen();
     }
     componentDidLoad() {
         if (!this.host.id) {
-            throw new Error(
+            console.error(
             /*prettier-ignore*/
-            'No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.');
-        }
-    }
-    /**
-     * Add interest event listeners, but only once, and start
-     * the accessibility patcher
-     */
-    componentWillLoad() {
-        if (tooltipInstances === 0) {
-            // This is the first tooltip on the page, add event listeners
-            document.addEventListener('pointerover', globalInterestHandler);
-            document.addEventListener('pointerout', globalInterestLostHandler);
-            document.addEventListener('focusin', globalInterestHandler);
-            document.addEventListener('focusout', globalInterestLostHandler);
-            document.addEventListener('long-press', globalInterestHandler);
-            // Initially run the accessibility patcher on all triggers
-            document.querySelectorAll('[data-tooltip-target]').forEach(patchAccessibilityFeatures);
-            // Start watching for future triggers
-            triggerObserver.observe(document.body, {
-                subtree: true,
-                childList: true,
-                attributeFilter: [tooltipTargetAttribute],
-            });
-        }
-        tooltipInstances++;
-    }
-    /**
-     * Remove a bunch of event listeners if the tooltip gets removed from the DOM
-     * and disconnect the accessibility patcher
-     */
-    disconnectedCallback() {
-        tooltipInstances--;
-        if (tooltipInstances <= 0) {
-            // The last tooltip has been removed, stop listening for these kind of events
-            document.removeEventListener('pointerover', globalInterestHandler);
-            document.removeEventListener('pointerout', globalInterestLostHandler);
-            document.removeEventListener('focusin', globalInterestHandler);
-            document.removeEventListener('focusout', globalInterestLostHandler);
-            document.removeEventListener('long-press', globalInterestHandler);
-            triggerObserver.disconnect();
+            'No id set: <post-tooltip> must have an id, linking it to it\'s target element with a <post-tooltip-trigger> element.');
         }
     }
     /**
-     * Programmatically display the tooltip
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
-     * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
+     * Programmatically display the tooltip.
+     * @param target An element where the tooltip should be shown
      */
-    async show(target, triggeredByFocus = false) {
-        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 {
-            showTooltip();
-        }
+    async show(target) {
+        if (this.open)
+            return;
+        this.popoverRef.show(target);
     }
     /**
-     * Programmatically hide this tooltip
+     * Programmatically hide this tooltip.
      */
     async hide() {
         this.popoverRef.hide();
     }
     /**
-     * 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
+     * Toggle tooltip display.
+     * @param target An element where the tooltip should be shown
+     * @param [force] Pass true to always show or false to always hide
      */
     async toggle(target, force) {
         this.popoverRef.toggle(target, force);
     }
     /**
-     * Pointer or focus is on the tooltip, stop the tooltip from disappearing
-     */
-    handleInterest() {
-        if (hideTooltipTimeout) {
-            window.clearTimeout(hideTooltipTimeout);
-            hideTooltipTimeout = null;
-        }
-    }
-    /**
-     * Pointer or focus left the tooltip, initiate the hiding process
-     * Re-enable pointer events when the tooltip is no longer in focus or hovered
+     * Set the open state based on the toggle event.
+     * @param e Popovercontainer toggle event
      */
-    handleInterestLost() {
-        globalHideTooltip(this);
-        this.host.style.pointerEvents = 'auto';
+    handleToggle(e) {
+        this.open = e.detail;
     }
     render() {
-        const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '71db1ccf3cf929d76550b08e69c8594479eaa84f', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'b9a38cabbfc2cf2eb9b257bca32022b5d97aac7c', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '316b55f5fc55d9607205496a87f02a0a5fa197cf' }))));
+        const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
+        return (h(Host, { key: 'd6a76533f22e354ff89f15c1e9a10e20fe471579', "data-version": version, role: "tooltip" }, h("post-popovercontainer", { key: '60076aaa184ae98e9e813400cc2d03f5add274df', safeSpace: 'trapezoid', class: popoverClass, arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '1d5ea42696cc60a8a84ff0ecc29e82152d028ba4' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -240,7 +79,7 @@ export class PostTooltip {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.8/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
                         }
                     }
                 },
@@ -248,7 +87,7 @@ export class PostTooltip {
                 "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."
+                    "text": "Defines the position of the tooltip relative to its trigger.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.\nFor supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement)."
                 },
                 "attribute": "placement",
                 "reflect": false,
@@ -266,15 +105,33 @@ export class PostTooltip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Wheter or not to display a little pointer arrow"
+                    "text": "Whether or not to display a little pointer arrow"
                 },
                 "attribute": "arrow",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
-            "delayed": {
-                "type": "boolean",
+            "animation": {
+                "type": "string",
                 "mutable": false,
+                "complexType": {
+                    "original": "'pop-in' | null",
+                    "resolved": "\"pop-in\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Choose a tooltip animation"
+                },
+                "attribute": "animation",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -284,10 +141,10 @@ export class PostTooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the tooltip is displayed a few milliseconds after it is triggered"
+                    "text": "Indicates the open state of the tooltip"
                 },
-                "attribute": "delayed",
-                "reflect": false,
+                "attribute": "open",
+                "reflect": true,
                 "defaultValue": "false"
             }
         };
@@ -296,15 +153,11 @@ export class PostTooltip {
         return {
             "show": {
                 "complexType": {
-                    "signature": "(target: HTMLElement, triggeredByFocus?: boolean) => Promise<void>",
+                    "signature": "(target: HTMLElement) => Promise<void>",
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-                        }, {
-                            "name": "triggeredByFocus",
-                            "type": "boolean",
-                            "docs": "A boolean indicating if the tooltip was triggered by a focus event."
+                            "docs": "An element where the tooltip should be shown"
                         }],
                     "references": {
                         "Promise": {
@@ -319,13 +172,10 @@ export class PostTooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically display the tooltip",
+                    "text": "Programmatically display the tooltip.",
                     "tags": [{
                             "name": "param",
-                            "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-                        }, {
-                            "name": "param",
-                            "text": "triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event."
+                            "text": "target An element where the tooltip should be shown"
                         }]
                 }
             },
@@ -342,7 +192,7 @@ export class PostTooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically hide this tooltip",
+                    "text": "Programmatically hide this tooltip.",
                     "tags": []
                 }
             },
@@ -352,7 +202,7 @@ export class PostTooltip {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                            "docs": "An element where the tooltip should be shown"
                         }, {
                             "name": "force",
                             "type": "boolean",
@@ -371,10 +221,10 @@ export class PostTooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggle tooltip display",
+                    "text": "Toggle tooltip display.",
                     "tags": [{
                             "name": "param",
-                            "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                            "text": "target An element where the tooltip should be shown"
                         }, {
                             "name": "param",
                             "text": "force Pass true to always show or false to always hide"
@@ -386,8 +236,8 @@ export class PostTooltip {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "delayed",
-                "methodName": "validateDelayed"
+                "propName": "open",
+                "methodName": "validateOpen"
             }];
     }
 }

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

@@ -0,0 +1 @@
+post-tooltip-trigger{vertical-align:top}