@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/tooltip/tooltip.js

@@ -1,145 +1,251 @@
-import { css as u, html as c } from "lit";
-import { property as o, query as h } from "lit/decorators.js";
-import { nanoid as b } from "nanoid";
-import { ifDefined as f } from "lit/directives/if-defined.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const g = u`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-tooltip{position:relative;display:table}.cre8-c-tooltip__panel{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);opacity:0;visibility:hidden;position:absolute;word-wrap:break-word;inset-block-start:calc(100% + 0.75rem);inset-block-end:auto;inset-inline-start:50%;inset-inline-end:auto;transform:translateX(var(--rtlTranslateX, -50%));display:flex;flex-direction:column;gap:0.5rem;width:max-content;max-width:17.5rem;z-index:400;color:var(--cre8-color-content-knockout);background-color:var(--cre8-color-bg-strong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.5rem}.cre8-is-active:not(.cre8-is-dynamic) .cre8-c-tooltip__panel,.cre8-is-active.cre8-is-dynamic-active .cre8-c-tooltip__panel{opacity:1;visibility:visible}.cre8-c-tooltip--top .cre8-c-tooltip__panel{inset-block-start:auto;inset-block-end:calc(100% + 0.75rem);inset-inline-start:50%;inset-inline-end:auto;transform:translateX(var(--rtlTranslateX, -50%))}.cre8-c-tooltip--left .cre8-c-tooltip__panel{inset-block-start:50%;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:calc(100% + 0.75rem);transform:translateY(-50%)}.cre8-c-tooltip--right .cre8-c-tooltip__panel{inset-block-start:50%;inset-block-end:auto;inset-inline-start:calc(100% + 0.75rem);inset-inline-end:auto;transform:translateY(-50%)}.cre8-c-tooltip--knockout .cre8-c-tooltip__panel{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default)}.cre8-c-tooltip__panel::before{content:"";display:block;width:0.75rem;height:0.75rem;position:absolute;margin:auto;background-color:var(--cre8-color-bg-strong);border-block-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);inset-block-start:calc((var(--cre8-border-width-default) + 0.375rem)*-1);inset-inline-start:50%;transform:translateX(var(--rtlTranslateX, -50%)) rotate(45deg)}.cre8-c-tooltip--top .cre8-c-tooltip__panel::before{inset-block-start:auto;inset-block-end:calc((var(--cre8-border-width-default) + 0.375rem)*-1);border-block-start:none;border-inline-start:none;border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong)}.cre8-c-tooltip--left .cre8-c-tooltip__panel::before{inset-block-start:50%;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:calc((var(--cre8-border-width-default) + 0.375rem)*-1);border-block-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-start:none;border-block-end:none;border-inline-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);transform:translateY(-50%) rotate(var(--rtlRotate45Inverse, 45deg))}.cre8-c-tooltip--right .cre8-c-tooltip__panel::before{inset-block-start:50%;inset-block-end:auto;inset-inline-start:calc((var(--cre8-border-width-default) + 0.375rem)*-1);inset-inline-end:auto;border-block-start:none;border-inline-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-end:none;transform:translateY(-50%) rotate(var(--rtlRotate45Inverse, 45deg))}.cre8-c-tooltip--knockout .cre8-c-tooltip__panel::before{background-color:var(--cre8-color-bg-default)}.cre8-c-tooltip__footer{display:flex;gap:1rem;justify-content:flex-end;flex-grow:1}.cre8-c-tooltip__trigger{cursor:pointer}.cre8-c-tooltip__trigger:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}svg{display:flex;height:1rem;width:1rem}`;
-var v = Object.defineProperty, i = (d, t, e, s) => {
-  for (var a = void 0, n = d.length - 1, p; n >= 0; n--)
-    (p = d[n]) && (a = p(t, e, a) || a);
-  return a && v(t, e, a), a;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const l = class l extends m {
-  constructor() {
-    super(...arguments), this.iconRotateDegree = 0, this.removeActive = () => {
-      this.isActive && this.toggleActive();
-    };
-  }
-  /**
-   * Query the document direction value
-   * <br/><br/> _*This property is dynamically set_
-   */
-  get isRTL() {
-    return document.dir === "rtl";
-  }
-  /**
-   * updated Callback Lifecycle
-   * 1. Find the second slot
-   * 2. Create a string from joining the textContent of the textnodes
-   * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback
-   * */
-  updated() {
-    const t = this.shadowRoot.querySelectorAll("slot")[1].assignedNodes().reduce(
-      ((e, s) => `${e}${s.textContent.replace(/\n/g, "").trim()}`),
-      ""
-    );
-    document.getElementById(this._uniqueId) && (document.getElementById(this._uniqueId).textContent = t);
-  }
-  /**
-   * firstUpdated Callback Lifecycle
-   * 1. If ariaDescribes is set
-      * a. create an ID and assign it to the property _uniqueId
-      * b. Generate an empty div, assign it the  _uniqueId and the tooltip role
-  * 2. Set the aria-describedby on the ariaDescribes target
-  */
-  firstUpdated() {
-    if (this.ariaDescribes) {
-      this._uniqueId = this._uniqueId || b();
-      const t = new RegExp(`\\b${this._uniqueId}\\b`), e = document.createElement("div");
-      e.setAttribute("role", "tooltip"), e.setAttribute("style", "position:fixed; left: -1000px; top: -1000px;"), e.id = this._uniqueId;
-      const s = document.getElementById(this.ariaDescribes);
-      s.parentNode.insertBefore(e, s);
-      const a = s?.getAttribute("aria-describedBy");
-      s?.setAttribute(
-        "aria-describedby",
-        `${a ? `${a.replace(t, "")} ` : ""}${this._uniqueId}`.trim()
-      );
+import { html, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './tooltip.styles.js';
+/**
+ * The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does.
+ * If you need to present a call to action with perhaps a button for the user to click, then use
+ * [Popover](/docs/cre8-components-popover--docs) instead.
+ *
+ * ##Tooltip Styles
+ * There are 4 alignment options for Tooltips: Top, Bottom, Right, and Left. Default placement is Bottom, below the
+ * element it is describing. Top or Bottom alignment are the the preferred placement, particularly on screens that
+ * have a more narrow viewport. Tooltips utilize Global styles and are not affected by brand themes.
+ *
+ * **With icon**
+ * - **iconRotateDegree** & **iconFlipDirection** props are optional.
+ * - They are used to set up the correct dirrection for icons, for example,
+ * arrows, caret up or caret down.
+ *
+ * ##Usability Considerations
+ * With the exception of icons - which should always have alt text at a minimum - the UI should never rely on
+ * Tooltips for clarity, especially because they are not always discovered by the user. If the user cannot
+ * intuitively understand the interface without Tooltips, the interface should be redesigned.
+ *
+ * ##How to use
+ * - Use Tooltips to clarify the UI element the user is interacting with, not to add additional content on the page.
+ * Also, do not simply restate content on the page, for example, the title of the field.
+ * - Tooltips should be short and to the point. Example: "Click X to do X" or "Icon Description." If a succinct
+ * description is not possible, the interaction element should be redesigned.
+ * - In a mouse-driven UI, Tooltips are triggered on hover (mouseover) and dismissed (disappear)
+ * when the user mouses away from the element. In touch UIs, a Tooltip is triggered by tapping
+ * and holding an item. The Tooltip is displayed as long as the user continues to hold the element.
+ * Tap and hold is a more advanced user behavior, and further reason for not relying on Tooltips.
+ * A novice user may never discover tap and hold for Tooltips.
+ *
+ * @slot default - Default, unnamed slot container for Tooltip text
+ * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text
+ */
+export class Cre8Tooltip extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction
+         */
+        this.iconRotateDegree = 0;
+        /**
+         * Remove Active State
+         * 1. If a specific event is fired, remove the active state.
+         */
+        this.removeActive = () => {
+            if (this.isActive) {
+                this.toggleActive();
+            }
+        };
     }
-  }
-  /**
-   * Connected Callback Lifecycle
-   * 1. Add window mouseover event listener
-   * 2. Add window mouseout event listener
-   * 3. Add mousedown event listener
-   * 4. Set the id and aria-describedby
-   */
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("mouseover", this.toggleActive), this.addEventListener("mouseout", this.removeActive);
-  }
-  /**
-   * Disconnected Callback Lifecycle
-   * 1. Remove window mouseover event listener
-   * 2. Remove window mouseout event listener
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("mouseover", this.toggleActive), this.removeEventListener("mouseout", this.removeActive);
-  }
-  /**
-   * Handle all dynamic placement
-   */
-  dynamicPosition() {
-    if (this.isDynamic && this._Cre8TooltipPanel) {
-      const t = document.querySelector("body").getBoundingClientRect(), e = this._Cre8TooltipPanel.getBoundingClientRect(), s = this._Cre8Tooltip.clientHeight + e.height + e.top;
-      e.left < 0 && (this.position = this.isRTL ? "left" : "right"), e.right >= t.width && (this.position = this.isRTL ? "right" : "left"), e.top < 0 && e.left > 0 && e.right < t.width && (this.position = null), s >= window.innerHeight && e.bottom >= window.innerHeight && e.left >= 0 && e.right <= t.width && (this.position = "top");
+    /**
+     * Query the document direction value
+     * <br/><br/> _*This property is dynamically set_
+     */
+    get isRTL() {
+        return document.dir === 'rtl';
     }
-  }
-  /**
-   * Handle Keydown
-   * 1. If escape or tab key is struck when the tooltip is active, close it
-   * 2. If enter or escape is keyed, toggle the tooltip open or close.
-   *    We need these since the click event is on a div so that accessibility reads this aloud to a user
-   */
-  _handleKeydown(t) {
-    this.isActive && (t.code === "Escape" || t.code === "Tab") && this.toggleActive(), (t.code === "Enter" || t.code === "Space") && this.toggleActive();
-  }
-  /**
-   * Set Tooltip Active State
-   * 1. Toggle the active state between true and false
-   * 2. If is active, set the dynamic position and custom event.
-   * 3. If is not active, remove fire the close custom event.
-   * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.
-   */
-  toggleActive() {
-    this.isActive = !this.isActive, this.isActive ? (setTimeout(() => {
-      this.dynamicPosition();
-    }, 1), this.dispatchEvent(new CustomEvent("open", {
-      detail: { isActive: this.isActive },
-      bubbles: !0,
-      composed: !0
-    }))) : this.dispatchEvent(new CustomEvent("close", {
-      detail: { isActive: this.isActive },
-      bubbles: !0,
-      composed: !0
-    })), setTimeout(() => {
-      this.isActive && this.isDynamic ? this.isActiveDynamic = !0 : this.isActiveDynamic = !1;
-    }, 2);
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-tooltip", {
-      "cre8-c-tooltip--top": this.position === "top",
-      "cre8-c-tooltip--left": this.position === "left",
-      "cre8-c-tooltip--right": this.position === "right",
-      "cre8-c-tooltip--knockout": this.knockout,
-      "cre8-is-active": this.isActive,
-      "cre8-is-dynamic": this.isDynamic,
-      "cre8-is-dynamic-active": this.isActiveDynamic
-    });
-    return c`
-        <div class="${t}">
+    /**
+     * updated Callback Lifecycle
+     * 1. Find the second slot
+     * 2. Create a string from joining the textContent of the textnodes
+     * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback
+     * */
+    updated() {
+        /* 1 & 2 */
+        const tipContent = this.shadowRoot.querySelectorAll('slot')[1]
+            .assignedNodes()
+            .reduce(((str, item) => `${str}${item.textContent.replace(/\n/g, '').trim()}`), '');
+        /* 3 */
+        if (document.getElementById(this._uniqueId)) {
+            document.getElementById(this._uniqueId).textContent = tipContent;
+        }
+    }
+    /**
+     * firstUpdated Callback Lifecycle
+     * 1. If ariaDescribes is set
+        * a. create an ID and assign it to the property _uniqueId
+        * b. Generate an empty div, assign it the  _uniqueId and the tooltip role
+    * 2. Set the aria-describedby on the ariaDescribes target
+    */
+    firstUpdated() {
+        if (this.ariaDescribes) { /* 1 */
+            this._uniqueId = this._uniqueId || nanoid(); /* 1.a */
+            const idMatcher = new RegExp(`\\b${this._uniqueId}\\b`); // prevents dupes from reconnects below
+            /* 1.b */
+            const a11yProxy = document.createElement('div');
+            a11yProxy.setAttribute('role', 'tooltip');
+            a11yProxy.setAttribute('style', 'position:fixed; left: -1000px; top: -1000px;');
+            a11yProxy.id = this._uniqueId;
+            const describedEl = document.getElementById(this.ariaDescribes);
+            describedEl.parentNode.insertBefore(a11yProxy, describedEl);
+            const idList = describedEl?.getAttribute('aria-describedBy');
+            /* 2 */
+            describedEl?.setAttribute('aria-describedby', `${idList ? `${idList.replace(idMatcher, '')} ` : ''}${this._uniqueId}`.trim());
+        }
+    }
+    /**
+     * Connected Callback Lifecycle
+     * 1. Add window mouseover event listener
+     * 2. Add window mouseout event listener
+     * 3. Add mousedown event listener
+     * 4. Set the id and aria-describedby
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('mouseover', this.toggleActive); /* 1 */
+        this.addEventListener('mouseout', this.removeActive); /* 2 */
+    }
+    /**
+     * Disconnected Callback Lifecycle
+     * 1. Remove window mouseover event listener
+     * 2. Remove window mouseout event listener
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('mouseover', this.toggleActive); /* 1 */
+        this.removeEventListener('mouseout', this.removeActive); /* 2 */
+    }
+    /**
+     * Handle all dynamic placement
+     */
+    dynamicPosition() {
+        // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.
+        /* eslint complexity: ["warn", 10] */
+        if (this.isDynamic && this._Cre8TooltipPanel) {
+            const body = document.querySelector('body').getBoundingClientRect();
+            const tooltipPanel = this._Cre8TooltipPanel.getBoundingClientRect();
+            const tooltipHeight = this._Cre8Tooltip.clientHeight + tooltipPanel.height + tooltipPanel.top;
+            /**
+             * If tooltip panel breaks out the left side of the window, position it to the right
+             */
+            if (tooltipPanel.left < 0) {
+                this.position = this.isRTL ? 'left' : 'right';
+            }
+            /**
+             * If tooltip panel breaks out the right side of the window, position it to the left
+             */
+            if (tooltipPanel.right >= body.width) {
+                this.position = this.isRTL ? 'right' : 'left';
+            }
+            /**
+             * If tooltip panel breaks out the top side of the window only, position it to the bottom center
+             */
+            if (tooltipPanel.top < 0 && tooltipPanel.left > 0 && tooltipPanel.right < body.width) {
+                this.position = null;
+            }
+            /**
+             * If tooltip panel breaks out the bottom side of the window only, position it to the top center
+             */
+            if (tooltipHeight >= window.innerHeight
+                && tooltipPanel.bottom >= window.innerHeight
+                && tooltipPanel.left >= 0
+                && tooltipPanel.right <= body.width) {
+                this.position = 'top';
+            }
+        }
+    }
+    /**
+     * Handle Keydown
+     * 1. If escape or tab key is struck when the tooltip is active, close it
+     * 2. If enter or escape is keyed, toggle the tooltip open or close.
+     *    We need these since the click event is on a div so that accessibility reads this aloud to a user
+     */
+    _handleKeydown(e) {
+        if (this.isActive) {
+            if (e.code === 'Escape' || e.code === 'Tab') {
+                this.toggleActive(); /* 1 */
+            }
+        }
+        if (e.code === 'Enter' || e.code === 'Space') {
+            this.toggleActive(); /* 2 */
+        }
+    }
+    /**
+     * Set Tooltip Active State
+     * 1. Toggle the active state between true and false
+     * 2. If is active, set the dynamic position and custom event.
+     * 3. If is not active, remove fire the close custom event.
+     * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.
+     */
+    toggleActive() {
+        this.isActive = !this.isActive; /* 1 */
+        if (this.isActive) {
+            /* 2 */
+            setTimeout(() => {
+                this.dynamicPosition();
+            }, 1);
+            this.dispatchEvent(new CustomEvent('open', {
+                detail: { isActive: this.isActive }, bubbles: true, composed: true,
+            }));
+        }
+        else {
+            /* 3 */
+            this.dispatchEvent(new CustomEvent('close', {
+                detail: { isActive: this.isActive }, bubbles: true, composed: true,
+            }));
+        }
+        /* 4 */
+        setTimeout(() => {
+            if (this.isActive && this.isDynamic) {
+                this.isActiveDynamic = true;
+            }
+            else {
+                this.isActiveDynamic = false;
+            }
+        }, 2);
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-tooltip', {
+            'cre8-c-tooltip--top': this.position === 'top',
+            'cre8-c-tooltip--left': this.position === 'left',
+            'cre8-c-tooltip--right': this.position === 'right',
+            'cre8-c-tooltip--knockout': this.knockout,
+            'cre8-is-active': this.isActive,
+            'cre8-is-dynamic': this.isDynamic,
+            'cre8-is-dynamic-active': this.isActiveDynamic,
+        });
+        return html `
+        <div class="${componentClassNames}">
             <div 
                 class="cre8-c-tooltip__trigger"
                 tabindex="0"
                 @focus=${this.toggleActive}
                 @keydown=${this._handleKeydown}
             >
-                ${this.svg ? c`
+                ${this.svg
+            ? html `
             <slot name="trigger">
                 <cre8-icon svg='${this.svg}' rotate="${Number(this.iconRotateDegree)}" 
                 flip="${this.iconFlipDirection}" aria-hidden="true"></cre8-icon>
-            </slot>` : c`<slot name="trigger"></slot>`}
+            </slot>`
+            : html `<slot name="trigger"></slot>`}
             </div>
             <dialog
-                id=${f(this._uniqueId)}
+                id=${ifDefined(this._uniqueId)}
                 aria-labelledby=${this.ariaDescribes}
                 class="cre8-c-tooltip__panel"
                 role="tooltip">
@@ -147,48 +253,47 @@ const l = class l extends m {
             </dialog>
         </div>
       `;
-  }
-};
-l.styles = [g];
-let r = l;
-i([
-  o()
-], r.prototype, "position");
-i([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "knockout");
-i([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "isDynamic");
-i([
-  o({ type: Boolean })
-], r.prototype, "isActiveDynamic");
-i([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "isActive");
-i([
-  o({ type: String })
-], r.prototype, "ariaDescribes");
-i([
-  o({ type: String })
-], r.prototype, "_uniqueId");
-i([
-  o()
-], r.prototype, "svg");
-i([
-  o({ type: Number })
-], r.prototype, "iconRotateDegree");
-i([
-  o()
-], r.prototype, "iconFlipDirection");
-i([
-  h(".cre8-c-tooltip")
-], r.prototype, "_Cre8Tooltip");
-i([
-  h(".cre8-c-tooltip__panel")
-], r.prototype, "_Cre8TooltipPanel");
-customElements.get("cre8-tooltip") === void 0 && customElements.define("cre8-tooltip", r);
-export {
-  r as Cre8Tooltip,
-  r as default
-};
+    }
+}
+Cre8Tooltip.styles = [styles];
+__decorate([
+    property()
+], Cre8Tooltip.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Tooltip.prototype, "knockout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Tooltip.prototype, "isDynamic", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Tooltip.prototype, "isActiveDynamic", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Tooltip.prototype, "isActive", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Tooltip.prototype, "ariaDescribes", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Tooltip.prototype, "_uniqueId", void 0);
+__decorate([
+    property()
+], Cre8Tooltip.prototype, "svg", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8Tooltip.prototype, "iconRotateDegree", void 0);
+__decorate([
+    property()
+], Cre8Tooltip.prototype, "iconFlipDirection", void 0);
+__decorate([
+    query('.cre8-c-tooltip')
+], Cre8Tooltip.prototype, "_Cre8Tooltip", void 0);
+__decorate([
+    query('.cre8-c-tooltip__panel')
+], Cre8Tooltip.prototype, "_Cre8TooltipPanel", void 0);
+if (customElements.get('cre8-tooltip') === undefined) {
+    customElements.define('cre8-tooltip', Cre8Tooltip);
+}
+export default Cre8Tooltip;
+//# sourceMappingURL=tooltip.js.map

package/lib/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../components/tooltip/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tooltip.styles.js';\n\n/**\n * The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does.\n * If you need to present a call to action with perhaps a button for the user to click, then use\n * [Popover](/docs/cre8-components-popover--docs) instead.\n *\n * ##Tooltip Styles\n * There are 4 alignment options for Tooltips: Top, Bottom, Right, and Left. Default placement is Bottom, below the\n * element it is describing. Top or Bottom alignment are the the preferred placement, particularly on screens that\n * have a more narrow viewport. Tooltips utilize Global styles and are not affected by brand themes.\n *\n * **With icon**\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct dirrection for icons, for example,\n * arrows, caret up or caret down.\n *\n * ##Usability Considerations\n * With the exception of icons - which should always have alt text at a minimum - the UI should never rely on\n * Tooltips for clarity, especially because they are not always discovered by the user. If the user cannot\n * intuitively understand the interface without Tooltips, the interface should be redesigned.\n *\n * ##How to use\n * - Use Tooltips to clarify the UI element the user is interacting with, not to add additional content on the page.\n * Also, do not simply restate content on the page, for example, the title of the field.\n * - Tooltips should be short and to the point. Example: \"Click X to do X\" or \"Icon Description.\" If a succinct\n * description is not possible, the interaction element should be redesigned.\n * - In a mouse-driven UI, Tooltips are triggered on hover (mouseover) and dismissed (disappear)\n * when the user mouses away from the element. In touch UIs, a Tooltip is triggered by tapping\n * and holding an item. The Tooltip is displayed as long as the user continues to hold the element.\n * Tap and hold is a more advanced user behavior, and further reason for not relying on Tooltips.\n * A novice user may never discover tap and hold for Tooltips.\n *\n * @slot default - Default, unnamed slot container for Tooltip text\n * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text\n */\n\nexport class Cre8Tooltip extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Positions the tooltip panel absolutely to the icon. Position overrides `isDynamic`.\n   * @type {\"default\"|\"top\"|\"left\"|\"right\"}\n   * @attr {string}\n   * - **default** positions the tooltip panel below the trigger element\n   * - **top** positions the tooltip panel above the trigger element\n   * - **left** positions the tooltip panel left of the trigger element\n   * - **right** positions the tooltip panel right of the trigger element\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * The knockout variant for the tooltip\n   * @attr {boolean}\n   * 1. If is true, the tooltip background is white\n   * 2. If is false, the tooltip background is gray\n   */\n  @property({ type: Boolean, reflect: true })\n      knockout?: boolean;\n\n  /**\n   * The dynamic state for the tooltip. Position overrides isDynamic.\n   * @attr {boolean}\n   * - If true, the tooltip panel placement is determined by its position in the viewport\n   * - If false, the tooltip panel placement will be placed according to the position value\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * @attr {boolean}\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the tooltip\n   * @attr {boolean}\n   * - If true, the tooltip panel is visible\n   * - If false, the tooltip panel is hidden\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   *  Accepts the ID string of the item the tooltip is referencing\n   *  @attr {string}\n   *  Dynmically appends its own ID to the aria-describedby attribute on the referenced element\n   */\n  @property({ type: String })\n      ariaDescribes?: string;\n\n  @property({ type: String })\n      _uniqueId?: string;\n\n  /**\n   * svg as a raw string\n   * - The icon is defined by this prop.\n   * - Pass in a raw svg as a String for using <cre8-icon>\n   */\n  @property()\n      svg?: string;\n\n  /**\n   * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n   */\n  @property({ type: Number })\n      iconRotateDegree?: number = 0;\n\n  /**\n   * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n   */\n  @property()\n      iconFlipDirection?: string;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip')\n      _Cre8Tooltip: HTMLElement;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip__panel')\n      _Cre8TooltipPanel: HTMLElement;\n\n  /**\n   * Query the document direction value\n   * <br/><br/> _*This property is dynamically set_\n   */\n  get isRTL() {\n      return document.dir === 'rtl';\n  }\n\n  /**\n   * updated Callback Lifecycle\n   * 1. Find the second slot\n   * 2. Create a string from joining the textContent of the textnodes\n   * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback\n   * */\n  updated() {\n    /* 1 & 2 */\n      const tipContent = this.shadowRoot.querySelectorAll('slot')[1]\n          .assignedNodes()\n          .reduce(\n              ((str, item) => `${str}${item.textContent.replace(/\\n/g, '').trim()}`),\n              ''\n          );\n    /* 3 */\n      if (document.getElementById(this._uniqueId)) {\n          document.getElementById(this._uniqueId).textContent = tipContent;\n      }\n  }\n\n  /**\n   * firstUpdated Callback Lifecycle\n   * 1. If ariaDescribes is set\n      * a. create an ID and assign it to the property _uniqueId\n      * b. Generate an empty div, assign it the  _uniqueId and the tooltip role\n  * 2. Set the aria-describedby on the ariaDescribes target\n  */\n  firstUpdated() {\n      if (this.ariaDescribes) { /* 1 */\n          this._uniqueId = this._uniqueId || nanoid(); /* 1.a */\n          const idMatcher = new RegExp(`\\\\b${this._uniqueId}\\\\b`); // prevents dupes from reconnects below\n      /* 1.b */\n          const a11yProxy = document.createElement('div');\n          a11yProxy.setAttribute('role', 'tooltip');\n          a11yProxy.setAttribute('style', 'position:fixed; left: -1000px; top: -1000px;');\n          a11yProxy.id = this._uniqueId;\n          const describedEl = document.getElementById(this.ariaDescribes);\n          describedEl.parentNode.insertBefore(a11yProxy, describedEl);\n          const idList = describedEl?.getAttribute('aria-describedBy');\n      /* 2 */\n          describedEl?.setAttribute(\n              'aria-describedby',\n              `${idList ? `${idList.replace(idMatcher, '')} ` : ''}${this._uniqueId}`.trim()\n          );\n      }\n  }\n\n  /**\n   * Connected Callback Lifecycle\n   * 1. Add window mouseover event listener\n   * 2. Add window mouseout event listener\n   * 3. Add mousedown event listener\n   * 4. Set the id and aria-describedby\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      this.addEventListener('mouseover', this.toggleActive); /* 1 */\n      this.addEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window mouseover event listener\n   * 2. Remove window mouseout event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      this.removeEventListener('mouseover', this.toggleActive); /* 1 */\n      this.removeEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Handle all dynamic placement\n   */\n  dynamicPosition() {\n    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n    /* eslint complexity: [\"warn\", 10] */\n      if (this.isDynamic && this._Cre8TooltipPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const tooltipPanel = this._Cre8TooltipPanel.getBoundingClientRect();\n          const tooltipHeight = this._Cre8Tooltip.clientHeight + tooltipPanel.height + tooltipPanel.top;\n\n      /**\n       * If tooltip panel breaks out the left side of the window, position it to the right\n       */\n          if (tooltipPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If tooltip panel breaks out the right side of the window, position it to the left\n       */\n          if (tooltipPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If tooltip panel breaks out the top side of the window only, position it to the bottom center\n       */\n          if (tooltipPanel.top < 0 && tooltipPanel.left > 0 && tooltipPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If tooltip panel breaks out the bottom side of the window only, position it to the top center\n       */\n          if (\n              tooltipHeight >= window.innerHeight\n        && tooltipPanel.bottom >= window.innerHeight\n        && tooltipPanel.left >= 0\n        && tooltipPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If escape or tab key is struck when the tooltip is active, close it\n   * 2. If enter or escape is keyed, toggle the tooltip open or close.\n   *    We need these since the click event is on a div so that accessibility reads this aloud to a user\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (this.isActive) {\n          if (e.code === 'Escape' || e.code === 'Tab') {\n              this.toggleActive(); /* 1 */\n          }\n      }\n      if (e.code === 'Enter' || e.code === 'Space') {\n          this.toggleActive(); /* 2 */\n      }\n  }\n\n  /**\n   * Set Tooltip Active State\n   * 1. Toggle the active state between true and false\n   * 2. If is active, set the dynamic position and custom event.\n   * 3. If is not active, remove fire the close custom event.\n   * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.\n   */\n  toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n\n      if (this.isActive) {\n      /* 2 */\n          setTimeout(() => {\n              this.dynamicPosition();\n          }, 1);\n          this.dispatchEvent(new CustomEvent('open', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      } else {\n      /* 3 */\n          this.dispatchEvent(new CustomEvent('close', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      }\n\n    /* 4 */\n      setTimeout(() => {\n          if (this.isActive && this.isDynamic) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\n  }\n\n  /**\n   * Remove Active State\n   * 1. If a specific event is fired, remove the active state.\n   */\n  removeActive = () => {\n      if (this.isActive) {\n          this.toggleActive();\n      }\n  };\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tooltip', {\n          'cre8-c-tooltip--top': this.position === 'top',\n          'cre8-c-tooltip--left': this.position === 'left',\n          'cre8-c-tooltip--right': this.position === 'right',\n          'cre8-c-tooltip--knockout': this.knockout,\n          'cre8-is-active': this.isActive,\n          'cre8-is-dynamic': this.isDynamic,\n          'cre8-is-dynamic-active': this.isActiveDynamic,\n      });\n\n      return html`\n        <div class=\"${componentClassNames}\">\n            <div \n                class=\"cre8-c-tooltip__trigger\"\n                tabindex=\"0\"\n                @focus=${this.toggleActive}\n                @keydown=${this._handleKeydown}\n            >\n                ${this.svg\n        ? html`\n            <slot name=\"trigger\">\n                <cre8-icon svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" \n                flip=\"${this.iconFlipDirection}\" aria-hidden=\"true\"></cre8-icon>\n            </slot>`\n        : html`<slot name=\"trigger\"></slot>`\n}\n            </div>\n            <dialog\n                id=${ifDefined(this._uniqueId)}\n                aria-labelledby=${this.ariaDescribes}\n                class=\"cre8-c-tooltip__panel\"\n                role=\"tooltip\">\n                <slot></slot>\n            </dialog>\n        </div>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tooltip') === undefined) {\n    customElements.define('cre8-tooltip', Cre8Tooltip);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tooltip': Cre8Tooltip;\n  }\n}\n\nexport default Cre8Tooltip;\n"]}

package/lib/components/tooltip/tooltip.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-tooltip{position:relative;display:table}.cre8-c-tooltip__panel{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);opacity:0;visibility:hidden;position:absolute;word-wrap:break-word;inset-block-start:calc(100% + 0.75rem);inset-block-end:auto;inset-inline-start:50%;inset-inline-end:auto;transform:translateX(var(--rtlTranslateX, -50%));display:flex;flex-direction:column;gap:0.5rem;width:max-content;max-width:17.5rem;z-index:400;color:var(--cre8-color-content-knockout);background-color:var(--cre8-color-bg-strong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.5rem}.cre8-is-active:not(.cre8-is-dynamic) .cre8-c-tooltip__panel,.cre8-is-active.cre8-is-dynamic-active .cre8-c-tooltip__panel{opacity:1;visibility:visible}.cre8-c-tooltip--top .cre8-c-tooltip__panel{inset-block-start:auto;inset-block-end:calc(100% + 0.75rem);inset-inline-start:50%;inset-inline-end:auto;transform:translateX(var(--rtlTranslateX, -50%))}.cre8-c-tooltip--left .cre8-c-tooltip__panel{inset-block-start:50%;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:calc(100% + 0.75rem);transform:translateY(-50%)}.cre8-c-tooltip--right .cre8-c-tooltip__panel{inset-block-start:50%;inset-block-end:auto;inset-inline-start:calc(100% + 0.75rem);inset-inline-end:auto;transform:translateY(-50%)}.cre8-c-tooltip--knockout .cre8-c-tooltip__panel{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default)}.cre8-c-tooltip__panel::before{content:"";display:block;width:0.75rem;height:0.75rem;position:absolute;margin:auto;background-color:var(--cre8-color-bg-strong);border-block-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);inset-block-start:calc((var(--cre8-border-width-default) + 0.375rem)*-1);inset-inline-start:50%;transform:translateX(var(--rtlTranslateX, -50%)) rotate(45deg)}.cre8-c-tooltip--top .cre8-c-tooltip__panel::before{inset-block-start:auto;inset-block-end:calc((var(--cre8-border-width-default) + 0.375rem)*-1);border-block-start:none;border-inline-start:none;border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong)}.cre8-c-tooltip--left .cre8-c-tooltip__panel::before{inset-block-start:50%;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:calc((var(--cre8-border-width-default) + 0.375rem)*-1);border-block-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-start:none;border-block-end:none;border-inline-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);transform:translateY(-50%) rotate(var(--rtlRotate45Inverse, 45deg))}.cre8-c-tooltip--right .cre8-c-tooltip__panel::before{inset-block-start:50%;inset-block-end:auto;inset-inline-start:calc((var(--cre8-border-width-default) + 0.375rem)*-1);inset-inline-end:auto;border-block-start:none;border-inline-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-end:none;transform:translateY(-50%) rotate(var(--rtlRotate45Inverse, 45deg))}.cre8-c-tooltip--knockout .cre8-c-tooltip__panel::before{background-color:var(--cre8-color-bg-default)}.cre8-c-tooltip__footer{display:flex;gap:1rem;justify-content:flex-end;flex-grow:1}.cre8-c-tooltip__trigger{cursor:pointer}.cre8-c-tooltip__trigger:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}svg{display:flex;height:1rem;width:1rem}`;
+export default styles;
+//# sourceMappingURL=tooltip.styles.js.map

package/lib/components/tooltip/tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.styles.js","sourceRoot":"","sources":["../../../components/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,ygMAAygM,CAAC;AAC5hM,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-tooltip{position:relative;display:table}.cre8-c-tooltip__panel{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);opacity:0;visibility:hidden;position:absolute;word-wrap:break-word;inset-block-start:calc(100% + 0.75rem);inset-block-end:auto;inset-inline-start:50%;inset-inline-end:auto;transform:translateX(var(--rtlTranslateX, -50%));display:flex;flex-direction:column;gap:0.5rem;width:max-content;max-width:17.5rem;z-index:400;color:var(--cre8-color-content-knockout);background-color:var(--cre8-color-bg-strong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.5rem}.cre8-is-active:not(.cre8-is-dynamic) .cre8-c-tooltip__panel,.cre8-is-active.cre8-is-dynamic-active .cre8-c-tooltip__panel{opacity:1;visibility:visible}.cre8-c-tooltip--top .cre8-c-tooltip__panel{inset-block-start:auto;inset-block-end:calc(100% + 0.75rem);inset-inline-start:50%;inset-inline-end:auto;transform:translateX(var(--rtlTranslateX, -50%))}.cre8-c-tooltip--left .cre8-c-tooltip__panel{inset-block-start:50%;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:calc(100% + 0.75rem);transform:translateY(-50%)}.cre8-c-tooltip--right .cre8-c-tooltip__panel{inset-block-start:50%;inset-block-end:auto;inset-inline-start:calc(100% + 0.75rem);inset-inline-end:auto;transform:translateY(-50%)}.cre8-c-tooltip--knockout .cre8-c-tooltip__panel{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default)}.cre8-c-tooltip__panel::before{content:\"\";display:block;width:0.75rem;height:0.75rem;position:absolute;margin:auto;background-color:var(--cre8-color-bg-strong);border-block-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);inset-block-start:calc((var(--cre8-border-width-default) + 0.375rem)*-1);inset-inline-start:50%;transform:translateX(var(--rtlTranslateX, -50%)) rotate(45deg)}.cre8-c-tooltip--top .cre8-c-tooltip__panel::before{inset-block-start:auto;inset-block-end:calc((var(--cre8-border-width-default) + 0.375rem)*-1);border-block-start:none;border-inline-start:none;border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong)}.cre8-c-tooltip--left .cre8-c-tooltip__panel::before{inset-block-start:50%;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:calc((var(--cre8-border-width-default) + 0.375rem)*-1);border-block-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-start:none;border-block-end:none;border-inline-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);transform:translateY(-50%) rotate(var(--rtlRotate45Inverse, 45deg))}.cre8-c-tooltip--right .cre8-c-tooltip__panel::before{inset-block-start:50%;inset-block-end:auto;inset-inline-start:calc((var(--cre8-border-width-default) + 0.375rem)*-1);inset-inline-end:auto;border-block-start:none;border-inline-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-end:none;transform:translateY(-50%) rotate(var(--rtlRotate45Inverse, 45deg))}.cre8-c-tooltip--knockout .cre8-c-tooltip__panel::before{background-color:var(--cre8-color-bg-default)}.cre8-c-tooltip__footer{display:flex;gap:1rem;justify-content:flex-end;flex-grow:1}.cre8-c-tooltip__trigger{cursor:pointer}.cre8-c-tooltip__trigger:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}svg{display:flex;height:1rem;width:1rem}`;\nexport default styles;\n"]}