@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/tooltip/tooltip.js

@@ -1,925 +1,251 @@
-import { css as g, html as l } from "lit";
-import { property as o, query as m } from "lit/decorators.js";
-import { nanoid as h } from "nanoid";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { Cre8Element as f } from "../cre8-element.js";
-const b = g`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  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);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
+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;
+};
+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';
 /**
- * Visually hidden from display
+ * 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
  */
-/*
-=======
-Animations
-=======
-*/
-: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;
+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();
+            }
+        };
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
+    /**
+     * Query the document direction value
+     * <br/><br/> _*This property is dynamically set_
+     */
+    get isRTL() {
+        return document.dir === 'rtl';
     }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * 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;
+        }
     }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
+    /**
+     * 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());
+        }
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * 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 */
     }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+    /**
+     * 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 */
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * 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';
+            }
+        }
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
+    /**
+     * 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 */
+        }
     }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
+    /**
+     * 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);
     }
-  }
-}
-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;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*------------------------------------*\\
- #TOOLTIP
-\\*------------------------------------*/
-:host {
-  display: inline-flex;
-}
-
-/** 
- * Tooltip
- * The main container that holds the trigger and panel
- */
-.cre8-c-tooltip {
-  position: relative;
-  display: table;
-}
-
-/** 
- * Tooltip panel
- * The container for the tooltip panel heading, content, and footer
- */
-.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-container);
-  padding: 0.5rem;
-  /**
-   * Active state for tooltip panel
-   */
-}
-.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__panel {
-  /**
-   * Tooltip panel positioned to the top of the trigger
-   */
-}
-.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__panel {
-  /**
-   * Tooltip panel positioned to the left of the trigger
-   */
-}
-.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__panel {
-  /**
-   * Tooltip panel positioned to the right of the trigger
-   */
-}
-.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__panel {
-  /**
-   * Tooltip panel knockout
-   */
-}
-.cre8-c-tooltip--knockout .cre8-c-tooltip__panel {
-  background-color: var(--cre8-color-bg-default);
-  color: var(--cre8-color-content-default);
-}
-
-/**
- * Tooltip panel arrow
- */
-.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);
-  /**
-   * Moves the tooltip panel arrow to the top of the panel
-   */
-}
-.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__panel::before {
-  /**
-   * Moves the tooltip panel arrow to the right side of the panel
-   */
-}
-.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__panel::before {
-  /**
-   * Moves the tooltip panel arrow to the left side of the panel
-   */
-}
-.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__panel::before {
-  /**
-   * Tooltip arrow knockout
-   */
-}
-.cre8-c-tooltip--knockout .cre8-c-tooltip__panel::before {
-  background-color: var(--cre8-color-bg-default);
-}
-
-/**
- * Tooltip footer
- * 1) The footer container in the panel
- */
-.cre8-c-tooltip__footer {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  flex-grow: 1;
-}
-
-/**
- * Tooltip trigger
- * 1) Add global focus state on keyboard focus
- */
-.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, r = (c, e, t, a) => {
-  for (var n = void 0, d = c.length - 1, p; d >= 0; d--)
-    (p = c[d]) && (n = p(e, t, n) || n);
-  return n && v(e, t, n), n;
-};
-const s = class s extends f {
-  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 e = this.shadowRoot.querySelectorAll("slot")[1].assignedNodes().reduce(
-      ((t, a) => `${t}${a.textContent.replace(/\n/g, "").trim()}`),
-      ""
-    );
-    document.getElementById(this._uniqueId) && (document.getElementById(this._uniqueId).textContent = e);
-  }
-  /**
-   * 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 || h();
-      const e = new RegExp(`\\b${this._uniqueId}\\b`), t = document.createElement("div");
-      t.setAttribute("role", "tooltip"), t.setAttribute("style", "position:fixed; left: -1000px; top: -1000px;"), t.id = this._uniqueId;
-      const a = document.getElementById(this.ariaDescribes);
-      a.parentNode.insertBefore(t, a);
-      const n = a?.getAttribute("aria-describedBy");
-      a?.setAttribute(
-        "aria-describedby",
-        `${n ? `${n.replace(e, "")} ` : ""}${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), 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 e = document.querySelector("body").getBoundingClientRect(), t = this._Cre8TooltipPanel.getBoundingClientRect(), a = this._Cre8Tooltip.clientHeight + t.height + t.top;
-      t.left < 0 && (this.position = this.isRTL ? "left" : "right"), t.right >= e.width && (this.position = this.isRTL ? "right" : "left"), t.top < 0 && t.left > 0 && t.right < e.width && (this.position = null), a >= window.innerHeight && t.bottom >= window.innerHeight && t.left >= 0 && t.right <= e.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) {
-    this.isActive && (e.code === "Escape" || e.code === "Tab") && this.toggleActive(), (e.code === "Enter" || e.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 e = 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 l`
-        <div class="${e}">
+    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 ? l`
+                ${this.svg
+            ? html `
             <slot name="trigger">
                 <cre8-icon svg='${this.svg}' rotate="${Number(this.iconRotateDegree)}" 
                 flip="${this.iconFlipDirection}" aria-hidden="true"></cre8-icon>
-            </slot>` : l`<slot name="trigger"></slot>`}
+            </slot>`
+            : html `<slot name="trigger"></slot>`}
             </div>
             <dialog
-                id=${u(this._uniqueId)}
+                id=${ifDefined(this._uniqueId)}
                 aria-labelledby=${this.ariaDescribes}
                 class="cre8-c-tooltip__panel"
                 role="tooltip">
@@ -927,48 +253,47 @@ const s = class s extends f {
             </dialog>
         </div>
       `;
-  }
-};
-s.styles = [b];
-let i = s;
-r([
-  o()
-], i.prototype, "position");
-r([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "knockout");
-r([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "isDynamic");
-r([
-  o({ type: Boolean })
-], i.prototype, "isActiveDynamic");
-r([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "isActive");
-r([
-  o({ type: String })
-], i.prototype, "ariaDescribes");
-r([
-  o({ type: String })
-], i.prototype, "_uniqueId");
-r([
-  o()
-], i.prototype, "svg");
-r([
-  o({ type: Number })
-], i.prototype, "iconRotateDegree");
-r([
-  o()
-], i.prototype, "iconFlipDirection");
-r([
-  m(".cre8-c-tooltip")
-], i.prototype, "_Cre8Tooltip");
-r([
-  m(".cre8-c-tooltip__panel")
-], i.prototype, "_Cre8TooltipPanel");
-customElements.get("cre8-tooltip") === void 0 && customElements.define("cre8-tooltip", i);
-export {
-  i as Cre8Tooltip,
-  i 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