@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/popover/popover.js

@@ -1,194 +1,319 @@
-import { css as g, nothing as f, html as o } from "lit";
-import { property as a, query as h, queryAssignedElements as v } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-import "../heading/heading.js";
-const b = g`*,::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-popover{position:relative;display:table}.cre8-c-popover__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;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:16rem;z-index:400;background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);box-shadow:var(--cre8-shadow-default);padding:1rem}.cre8-c-popover__panel:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-popover__panel .cre8-c-popover__heading{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform)}.cre8-is-active:not(.cre8-is-dynamic) .cre8-c-popover__panel,.cre8-is-active.cre8-is-dynamic-active .cre8-c-popover__panel{opacity:1;visibility:visible}.cre8-c-popover--top .cre8-c-popover__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-popover--left .cre8-c-popover__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-popover--right .cre8-c-popover__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-popover__panel::before{content:"";display:block;width:0.75rem;height:0.75rem;position:absolute;margin:auto;background-color:var(--cre8-color-bg-default);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-popover--top .cre8-c-popover__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-popover--left .cre8-c-popover__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-popover--right .cre8-c-popover__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-popover__footer{display:flex;gap:1rem}`;
-var u = Object.defineProperty, i = (d, e, t, n) => {
-  for (var s = void 0, l = d.length - 1, p; l >= 0; l--)
-    (p = d[l]) && (s = p(e, t, s) || s);
-  return s && u(e, t, s), s;
+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 c = class c extends m {
-  constructor() {
-    super(...arguments), this.handleOnClickOutside = (e) => {
-      if (!this.isActive)
-        return;
-      if (!this.shadowRoot?.host)
-        throw Error("Could not determine panel context during click handler");
-      const t = e.composedPath().includes(this.shadowRoot.host);
-      e.target === document.querySelector("html") && e.clientX >= document.documentElement.offsetWidth || this.isActive && !t && this._toggleActive();
-    }, this.removeActiveOnScroll = () => {
-      if (this.isActive && !this.isVisibleOnScroll) {
-        const e = this._Cre8PopoverPanel.getBoundingClientRect();
-        this._Cre8Popover.clientHeight + e.height + e.top < window.innerHeight && this._toggleActive();
-      }
-    }, this.removeActive = () => {
-      this.isActive && this._toggleActive();
-    };
-  }
-  /**
-   * Query the document direction value
-   * <br/><br/> _*This property is dynamically set_
-   */
-  get isRTL() {
-    return document.dir === "rtl";
-  }
-  /**
-   * Connected Callback Lifecycle
-   * 1. Add window resize event listener
-   * 2. Add window scroll event listener
-   * 3. Add window orientation change event listener
-   * 4. Add mousedown event listener
-   */
-  connectedCallback() {
-    super.connectedCallback(), globalThis.window.addEventListener("resize", this.removeActive), globalThis.window.addEventListener("scroll", this.removeActiveOnScroll), globalThis.window.addEventListener("orientationchange", this.removeActive), globalThis.document.addEventListener("mousedown", this.handleOnClickOutside, !1);
-  }
-  /**
-   * Disconnected Callback Lifecycle
-   * 1. Remove window resize event listener
-   * 2. Remove window scroll event listener
-   * 3. Remove window orientation change event listener
-   * 4. Remove mousedown event listener
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback(), globalThis.window.removeEventListener("resize", this.removeActive), globalThis.window.removeEventListener("scroll", this.removeActiveOnScroll), globalThis.window.removeEventListener("orientationchange", this.removeActive), globalThis.document.removeEventListener("mousedown", this.handleOnClickOutside, !1);
-  }
-  /**
-   * First Updated Lifecycle
-   * 1. Set attribute since aria expanded can't be passed down through the slot
-   */
-  firstUpdated() {
-    this.addAria();
-  }
-  /**
-   * Add aria attributes on the trigger button
-   * 1. Select the element within the trigger slot
-   * 2. Set aria-expanded on the popover trigger to the active state if provided. Otherwise, set to false.
-   * 3 Set the type to button.
-   */
-  addAria() {
-    let e;
-    this._Cre8PopoverTrigger[0].tagName === "cre8-BUTTON" ? (e = this._Cre8PopoverTrigger[0], e.buttonAriaExpanded = this.isActive ? this.isActive : !1) : (e = this._Cre8PopoverTrigger[0], e.setAttribute("aria-expanded", `${this.isActive ? this.isActive : !1}`), e.setAttribute("type", "button"));
-  }
-  /**
-   * Handle all dynamic placement
-   */
-  dynamicPosition() {
-    if (this.isDynamic && this._Cre8PopoverPanel) {
-      const e = document.querySelector("body").getBoundingClientRect(), t = this._Cre8PopoverPanel.getBoundingClientRect();
-      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), t.bottom >= window.innerHeight && t.left >= 0 && t.right <= e.width && (this.position = "top");
+import { html, nothing, } from 'lit';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import '../heading/heading';
+import styles from './popover.styles.js';
+/**
+ * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.
+ * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.
+ * @slot - The component content
+ */
+export class Cre8Popover extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Handle click outside the component
+         * 1. Close the show/hide popover panel on click outside
+         * 2. If the popover panel is already closed then we don't care about outside clicks and we can bail early
+         * 3. By the time a user clicks on the page the shadowRoot will almost certainly be
+         * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
+         * undefined. To work around that we'll check that we have a shadowRoot (and a
+         * rendered .host) element here to appease the TypeScript compiler. This should never
+         * actually be shown or run for a human end user.
+         * 4. Check to see if we clicked inside the active panel
+         * 5. If the panel is active and we've clicked outside of the panel then it should be closed.
+         */
+        this.handleOnClickOutside = (e) => {
+            /* 2 */
+            if (!this.isActive) {
+                return;
+            }
+            /* 3 */
+            if (!this.shadowRoot?.host) {
+                throw Error('Could not determine panel context during click handler');
+            }
+            /* 4 */
+            const didClickInside = e.composedPath().includes(this.shadowRoot.host);
+            /* 5 */
+            if (!(e.target === document.querySelector('html') && e.clientX >= document.documentElement.offsetWidth)) {
+                if (this.isActive && !didClickInside) {
+                    this._toggleActive();
+                }
+            }
+        };
+        /**
+         * Remove Active State on Scroll
+         * 1. If a scroll event is fired and visibileOnScroll is not true, remove the active state
+         * 2. If the popover height is less than the window height, then allow the active to remove on scroll
+         */
+        this.removeActiveOnScroll = () => {
+            /* 1 */
+            if (this.isActive && !this.isVisibleOnScroll) {
+                /* 2 */
+                const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();
+                const popoverTrigger = this._Cre8Popover;
+                const popoverHeight = popoverTrigger.clientHeight + popoverPanel.height + popoverPanel.top;
+                if (popoverHeight < window.innerHeight) {
+                    this._toggleActive();
+                }
+            }
+        };
+        /**
+         * Remove Active State
+         * 1. If a specific event is fired, remove the active state.
+         */
+        this.removeActive = () => {
+            if (this.isActive) {
+                this._toggleActive();
+            }
+        };
     }
-  }
-  /**
-   * Set Popover Active State
-   * 1. Toggle the active state between true and false
-   * 2. Set attribute since aria expanded can't be passed down through the slot
-   * 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger.
-   * This accounts for both design system buttons and native HTML buttons
-   */
-  _toggleActive() {
-    this.isActive = !this.isActive, this.addAria(), this.isActive ? (requestAnimationFrame(() => {
-      this.dynamicPosition();
-    }), 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.isActiveDynamic = !0 : this.isActiveDynamic = !1;
-    }, 2);
-  }
-  /**
-   * Handle Keydown
-   * 1. If the panel is open and escape is keyed, close the popover panel and return focus to the trigger button
-   * 2. If the panel is opened, tab away closes the popover panel
-   * 3. The panel can be opened and closed by Enter or Space keys.
-   */
-  _handleKeydown(e) {
-    e.key === "Escape" && this.isActive === !0 ? this._toggleActive() : e.key === "Tab" && this._handleTabNavigation(e);
-  }
-  _handleTabNavigation(e) {
-    this.isActive && this._navigateInsidePopover(e);
-  }
-  _navigateInsidePopover(e) {
-    const t = this._getFocusableElements();
-    if (t.length === 0) {
-      this._closePopoverAndFocusTrigger(e);
-      return;
+    /**
+     * Query the document direction value
+     * <br/><br/> _*This property is dynamically set_
+     */
+    get isRTL() {
+        return document.dir === 'rtl';
     }
-    const n = t[t.length - 1];
-    document.activeElement === n && (this._closePopoverAndFocusTrigger(e), e.preventDefault());
-  }
-  _getFocusableElements() {
-    return [...Array.from(this._Cre8PopoverFooter)];
-  }
-  _closePopoverAndFocusTrigger(e) {
-    this._toggleActive(), e.preventDefault();
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-popover", {
-      "cre8-c-popover--top": this.position === "top",
-      "cre8-c-popover--left": this.position === "left",
-      "cre8-c-popover--right": this.position === "right",
-      "cre8-is-active": this.isActive,
-      "cre8-is-dynamic": this.isDynamic,
-      "cre8-is-dynamic-active": this.isActiveDynamic
-    });
-    return o`
-      <div class="${e}">
-        ${this.slotNotEmpty("trigger") && o` <slot name="trigger" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}
-        ${this.isActive ? o`
+    /**
+     * Connected Callback Lifecycle
+     * 1. Add window resize event listener
+     * 2. Add window scroll event listener
+     * 3. Add window orientation change event listener
+     * 4. Add mousedown event listener
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        globalThis.window.addEventListener('resize', this.removeActive); /* 1 */
+        globalThis.window.addEventListener('scroll', this.removeActiveOnScroll); /* 2 */
+        globalThis.window.addEventListener('orientationchange', this.removeActive); /* 3 */
+        globalThis.document.addEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */
+    }
+    /**
+     * Disconnected Callback Lifecycle
+     * 1. Remove window resize event listener
+     * 2. Remove window scroll event listener
+     * 3. Remove window orientation change event listener
+     * 4. Remove mousedown event listener
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        globalThis.window.removeEventListener('resize', this.removeActive); /* 1 */
+        globalThis.window.removeEventListener('scroll', this.removeActiveOnScroll); /* 2 */
+        globalThis.window.removeEventListener('orientationchange', this.removeActive); /* 3 */
+        globalThis.document.removeEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */
+    }
+    /**
+     * First Updated Lifecycle
+     * 1. Set attribute since aria expanded can't be passed down through the slot
+     */
+    firstUpdated() {
+        this.addAria(); /* 1 */
+    }
+    /**
+     * Add aria attributes on the trigger button
+     * 1. Select the element within the trigger slot
+     * 2. Set aria-expanded on the popover trigger to the active state if provided. Otherwise, set to false.
+     * 3 Set the type to button.
+     */
+    addAria() {
+        /* 1 */
+        let popoverTrigger;
+        if (this._Cre8PopoverTrigger[0].tagName === 'cre8-BUTTON') {
+            popoverTrigger = this._Cre8PopoverTrigger[0];
+            popoverTrigger.buttonAriaExpanded = this.isActive ? this.isActive : false;
+        }
+        else {
+            popoverTrigger = this._Cre8PopoverTrigger[0];
+            popoverTrigger.setAttribute('aria-expanded', `${this.isActive ? this.isActive : false}`); /* 2 */
+            popoverTrigger.setAttribute('type', 'button'); /* 3 */
+        }
+    }
+    /**
+     * 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._Cre8PopoverPanel) {
+            const body = document.querySelector('body').getBoundingClientRect();
+            const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();
+            /**
+             * If popover panel breaks out the left side of the window, position it to the right
+             */
+            if (popoverPanel.left < 0) {
+                this.position = this.isRTL ? 'left' : 'right';
+            }
+            /**
+             * If popover panel breaks out the right side of the window, position it to the left
+             */
+            if (popoverPanel.right >= body.width) {
+                this.position = this.isRTL ? 'right' : 'left';
+            }
+            /**
+             * If popover panel breaks out the top side of the window only, position it to the bottom
+             */
+            if (popoverPanel.top < 0 && popoverPanel.left > 0 && popoverPanel.right < body.width) {
+                this.position = null;
+            }
+            /**
+             * If popover panel breaks out the bottom side of the window only, position it to the top
+             */
+            if (popoverPanel.bottom >= window.innerHeight
+                && popoverPanel.left >= 0
+                && popoverPanel.right <= body.width) {
+                this.position = 'top';
+            }
+        }
+    }
+    /**
+     * Set Popover Active State
+     * 1. Toggle the active state between true and false
+     * 2. Set attribute since aria expanded can't be passed down through the slot
+     * 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger.
+     * This accounts for both design system buttons and native HTML buttons
+     */
+    _toggleActive() {
+        this.isActive = !this.isActive; /* 1 */
+        this.addAria(); /* 2 */
+        if (this.isActive) {
+            requestAnimationFrame(() => {
+                this.dynamicPosition();
+            });
+            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 }));
+        }
+        /**
+         * Toggle the active state for dynamic. This prevents a flash of the popover in the orginal position
+         */
+        setTimeout(() => {
+            if (this.isActive) {
+                this.isActiveDynamic = true;
+            }
+            else {
+                this.isActiveDynamic = false;
+            }
+        }, 2);
+    }
+    /**
+     * Handle Keydown
+     * 1. If the panel is open and escape is keyed, close the popover panel and return focus to the trigger button
+     * 2. If the panel is opened, tab away closes the popover panel
+     * 3. The panel can be opened and closed by Enter or Space keys.
+     */
+    _handleKeydown(e) {
+        if (e.key === 'Escape' && this.isActive === true) {
+            this._toggleActive();
+        }
+        else if (e.key === 'Tab') {
+            this._handleTabNavigation(e);
+        }
+    }
+    _handleTabNavigation(e) {
+        if (this.isActive) {
+            this._navigateInsidePopover(e);
+        }
+    }
+    _navigateInsidePopover(e) {
+        const focusableElements = this._getFocusableElements();
+        if (focusableElements.length === 0) {
+            this._closePopoverAndFocusTrigger(e);
+            return;
+        }
+        const lastFocusableElement = focusableElements[focusableElements.length - 1];
+        if (document.activeElement === lastFocusableElement) {
+            this._closePopoverAndFocusTrigger(e);
+            e.preventDefault();
+        }
+    }
+    _getFocusableElements() {
+        const panelFocusableElements = Array.from(this._Cre8PopoverFooter);
+        return [...panelFocusableElements];
+    }
+    _closePopoverAndFocusTrigger(e) {
+        this._toggleActive();
+        e.preventDefault();
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-popover', {
+            'cre8-c-popover--top': this.position === 'top',
+            'cre8-c-popover--left': this.position === 'left',
+            'cre8-c-popover--right': this.position === 'right',
+            'cre8-is-active': this.isActive,
+            'cre8-is-dynamic': this.isDynamic,
+            'cre8-is-dynamic-active': this.isActiveDynamic,
+        });
+        return html `
+      <div class="${componentClassNames}">
+        ${this.slotNotEmpty('trigger')
+            && html ` <slot name="trigger" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}
+        ${this.isActive
+            ? html `
               <div tabindex="0" class="cre8-c-popover__panel" @keydown=${this._handleKeydown}>
-                ${(this.slotNotEmpty("header") || this.heading) && o`
+                ${(this.slotNotEmpty('header') || this.heading)
+                && html `
                   <div class="cre8-c-popover__header">
-                    ${this.heading ? o`<div class="cre8-c-popover__heading">${this.heading}</div>` : o`<slot name="header"></slot>`}
+                    ${this.heading
+                    ? html `<div class="cre8-c-popover__heading">${this.heading}</div>`
+                    : html `<slot name="header"></slot>`}
                   </div>
                 `}
                 <slot></slot>
-                ${this.slotNotEmpty("footer") && o`
+                ${this.slotNotEmpty('footer')
+                && html `
                   <div class="cre8-c-popover__footer">
                     <slot name="footer"></slot>
                   </div>
                 `}
               </div>
-            ` : f}
+            `
+            : nothing}
       </div>
     `;
-  }
-};
-c.styles = [b];
-let r = c;
-i([
-  a()
-], r.prototype, "heading");
-i([
-  a()
-], r.prototype, "position");
-i([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "isVisibleOnScroll");
-i([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "isDynamic");
-i([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "isActiveDynamic");
-i([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "isActive");
-i([
-  h(".cre8-c-popover")
-], r.prototype, "_Cre8Popover");
-i([
-  h(".cre8-c-popover__panel")
-], r.prototype, "_Cre8PopoverPanel");
-i([
-  v({ slot: "trigger" })
-], r.prototype, "_Cre8PopoverTrigger");
-i([
-  v({ slot: "footer" })
-], r.prototype, "_Cre8PopoverFooter");
-customElements.get("cre8-popover") === void 0 && customElements.define("cre8-popover", r);
-export {
-  r as Cre8Popover,
-  r as default
-};
+    }
+}
+Cre8Popover.styles = [styles];
+__decorate([
+    property()
+], Cre8Popover.prototype, "heading", void 0);
+__decorate([
+    property()
+], Cre8Popover.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Popover.prototype, "isVisibleOnScroll", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Popover.prototype, "isDynamic", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Popover.prototype, "isActiveDynamic", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Popover.prototype, "isActive", void 0);
+__decorate([
+    query('.cre8-c-popover')
+], Cre8Popover.prototype, "_Cre8Popover", void 0);
+__decorate([
+    query('.cre8-c-popover__panel')
+], Cre8Popover.prototype, "_Cre8PopoverPanel", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'trigger' })
+], Cre8Popover.prototype, "_Cre8PopoverTrigger", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'footer' })
+], Cre8Popover.prototype, "_Cre8PopoverFooter", void 0);
+if (customElements.get('cre8-popover') === undefined) {
+    customElements.define('cre8-popover', Cre8Popover);
+}
+export default Cre8Popover;
+//# sourceMappingURL=popover.js.map

package/lib/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../heading/heading';\nimport styles from './popover.styles.js';\nimport { Cre8Button } from '../button/button';\n\n/**\n * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.\n * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.\n * @slot - The component content\n */\n\nexport class Cre8Popover extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The heading text that appears at the top of the popover panel. Should only be 2-3 lines max.\n   *  @attr {string | undefined}\n   */\n  @property()\n      heading?: string;\n\n  /**\n   * Positions the popover panel absolutely to the trigger\n   * - **default** positions the popover panel below the trigger\n   * - **top** positions the popover panel below the trigger\n   * - **left** positions the popover panel below the trigger\n   * - **right** positions the popover panel below the trigger\n   *  @attr {string | undefined}\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * Set to prevent the popover panel from hiding on scroll\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isVisibleOnScroll?: boolean;\n\n  /**\n   * The dynamic state for the popover\n   * - If true, the popover panel placement is determined by its position in the viewport\n   * - If false, the popover panel placement will be placed according to the position value\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * _This property is dynamically set_\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the popover\n   * - If true, the popover panel is visible\n   * - If false, the popover panel is hidden\n   *\n   * _This property is dynamically set_\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n\n  /**\n   * Query the popover panel element\n   */\n  @query('.cre8-c-popover')\n      _Cre8Popover: HTMLElement;\n\n  /**\n   * Query the popover panel element\n   */\n  @query('.cre8-c-popover__panel')\n      _Cre8PopoverPanel: HTMLElement;\n\n  /**\n   * Query the assigned elements in the trigger slot\n   */\n  @queryAssignedElements({ slot: 'trigger' })\n      _Cre8PopoverTrigger: Array<HTMLElement>;\n\n  /**\n   * Query the assigned elements in the footer slot\n   */\n  @queryAssignedElements({ slot: 'footer' })\n      _Cre8PopoverFooter: Array<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   * Connected Callback Lifecycle\n   * 1. Add window resize event listener\n   * 2. Add window scroll event listener\n   * 3. Add window orientation change event listener\n   * 4. Add mousedown event listener\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      globalThis.window.addEventListener('resize', this.removeActive); /* 1 */\n      globalThis.window.addEventListener('scroll', this.removeActiveOnScroll); /* 2 */\n      globalThis.window.addEventListener('orientationchange', this.removeActive); /* 3 */\n      globalThis.document.addEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window resize event listener\n   * 2. Remove window scroll event listener\n   * 3. Remove window orientation change event listener\n   * 4. Remove mousedown event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      globalThis.window.removeEventListener('resize', this.removeActive); /* 1 */\n      globalThis.window.removeEventListener('scroll', this.removeActiveOnScroll); /* 2 */\n      globalThis.window.removeEventListener('orientationchange', this.removeActive); /* 3 */\n      globalThis.document.removeEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */\n  }\n\n  /**\n   * First Updated Lifecycle\n   * 1. Set attribute since aria expanded can't be passed down through the slot\n   */\n  firstUpdated() {\n      this.addAria(); /* 1 */\n  }\n\n  /**\n   * Add aria attributes on the trigger button\n   * 1. Select the element within the trigger slot\n   * 2. Set aria-expanded on the popover trigger to the active state if provided. Otherwise, set to false.\n   * 3 Set the type to button.\n   */\n  addAria() {\n    /* 1 */\n      let popoverTrigger;\n      if (this._Cre8PopoverTrigger[0].tagName === 'cre8-BUTTON') {\n          popoverTrigger = this._Cre8PopoverTrigger[0] as Cre8Button;\n          popoverTrigger.buttonAriaExpanded = this.isActive ? this.isActive : false;\n      } else {\n          popoverTrigger = this._Cre8PopoverTrigger[0];\n          popoverTrigger.setAttribute('aria-expanded', `${this.isActive ? this.isActive : false}`); /* 2 */\n          popoverTrigger.setAttribute('type', 'button'); /* 3 */\n      }\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._Cre8PopoverPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n\n      /**\n       * If popover panel breaks out the left side of the window, position it to the right\n       */\n          if (popoverPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If popover panel breaks out the right side of the window, position it to the left\n       */\n          if (popoverPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If popover panel breaks out the top side of the window only, position it to the bottom\n       */\n          if (popoverPanel.top < 0 && popoverPanel.left > 0 && popoverPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If popover panel breaks out the bottom side of the window only, position it to the top\n       */\n          if (\n              popoverPanel.bottom >= window.innerHeight\n        && popoverPanel.left >= 0\n        && popoverPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Set Popover Active State\n   * 1. Toggle the active state between true and false\n   * 2. Set attribute since aria expanded can't be passed down through the slot\n   * 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger.\n   * This accounts for both design system buttons and native HTML buttons\n   */\n  private _toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n      this.addAria(); /* 2 */\n\n      if (this.isActive) {\n          requestAnimationFrame(() => {\n              this.dynamicPosition();\n          });\n          this.dispatchEvent(\n              new CustomEvent('open', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n          );\n      } else {\n      /* 3 */\n          this.dispatchEvent(\n              new CustomEvent('close', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n          );\n      }\n\n    /**\n     * Toggle the active state for dynamic. This prevents a flash of the popover in the orginal position\n     */\n      setTimeout(() => {\n          if (this.isActive) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If the panel is open and escape is keyed, close the popover panel and return focus to the trigger button\n   * 2. If the panel is opened, tab away closes the popover panel\n   * 3. The panel can be opened and closed by Enter or Space keys.\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape' && this.isActive === true) {\n          this._toggleActive();\n      } else if (e.key === 'Tab') {\n          this._handleTabNavigation(e);\n      }\n  }\n\n  private _handleTabNavigation(e: KeyboardEvent) {\n      if (this.isActive) {\n          this._navigateInsidePopover(e);\n      }\n  }\n\n  private _navigateInsidePopover(e: KeyboardEvent) {\n      const focusableElements = this._getFocusableElements();\n      if (focusableElements.length === 0) {\n          this._closePopoverAndFocusTrigger(e);\n          return;\n      }\n\n      const lastFocusableElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n      if (document.activeElement === lastFocusableElement) {\n          this._closePopoverAndFocusTrigger(e);\n          e.preventDefault();\n      }\n  }\n\n  private _getFocusableElements(): HTMLElement[] {\n      const panelFocusableElements = Array.from(this._Cre8PopoverFooter);\n      return [...panelFocusableElements];\n  }\n\n  private _closePopoverAndFocusTrigger(e: KeyboardEvent) {\n      this._toggleActive();\n      e.preventDefault();\n  }\n\n  /**\n   * Handle click outside the component\n   * 1. Close the show/hide popover panel on click outside\n   * 2. If the popover panel is already closed then we don't care about outside clicks and we can bail early\n   * 3. By the time a user clicks on the page the shadowRoot will almost certainly be\n   * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n   * undefined. To work around that we'll check that we have a shadowRoot (and a\n   * rendered .host) element here to appease the TypeScript compiler. This should never\n   * actually be shown or run for a human end user.\n   * 4. Check to see if we clicked inside the active panel\n   * 5. If the panel is active and we've clicked outside of the panel then it should be closed.\n   */\n  handleOnClickOutside = (e: MouseEvent) => {\n    /* 2 */\n      if (!this.isActive) {\n          return;\n      }\n\n    /* 3 */\n      if (!this.shadowRoot?.host) {\n          throw Error('Could not determine panel context during click handler');\n      }\n\n    /* 4 */\n      const didClickInside = e.composedPath().includes(this.shadowRoot.host);\n\n    /* 5 */\n      if (!(e.target === document.querySelector('html') && e.clientX >= document.documentElement.offsetWidth)) {\n          if (this.isActive && !didClickInside) {\n              this._toggleActive();\n          }\n      }\n  };\n\n  /**\n   * Remove Active State on Scroll\n   * 1. If a scroll event is fired and visibileOnScroll is not true, remove the active state\n   * 2. If the popover height is less than the window height, then allow the active to remove on scroll\n   */\n  removeActiveOnScroll = () => {\n    /* 1 */\n      if (this.isActive && !this.isVisibleOnScroll) {\n      /* 2 */\n          const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n          const popoverTrigger = this._Cre8Popover;\n          const popoverHeight = popoverTrigger.clientHeight + popoverPanel.height + popoverPanel.top;\n\n          if (popoverHeight < window.innerHeight) {\n              this._toggleActive();\n          }\n      }\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-popover', {\n          'cre8-c-popover--top': this.position === 'top',\n          'cre8-c-popover--left': this.position === 'left',\n          'cre8-c-popover--right': this.position === 'right',\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        ${this.slotNotEmpty('trigger')\n        && html` <slot name=\"trigger\" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}\n        ${this.isActive\n        ? html`\n              <div tabindex=\"0\" class=\"cre8-c-popover__panel\" @keydown=${this._handleKeydown}>\n                ${(this.slotNotEmpty('header') || this.heading)\n                && html`\n                  <div class=\"cre8-c-popover__header\">\n                    ${this.heading\n        ? html`<div class=\"cre8-c-popover__heading\">${this.heading}</div>`\n        : html`<slot name=\"header\"></slot>`}\n                  </div>\n                `}\n                <slot></slot>\n                ${this.slotNotEmpty('footer')\n                && html`\n                  <div class=\"cre8-c-popover__footer\">\n                    <slot name=\"footer\"></slot>\n                  </div>\n                `}\n              </div>\n            `\n        : nothing}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-popover') === undefined) {\n    customElements.define('cre8-popover', Cre8Popover);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-popover': Cre8Popover;\n  }\n}\n\nexport default Cre8Popover;\n"]}

package/lib/components/popover/popover.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-popover{position:relative;display:table}.cre8-c-popover__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;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:16rem;z-index:400;background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);box-shadow:var(--cre8-shadow-default);padding:1rem}.cre8-c-popover__panel:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-popover__panel .cre8-c-popover__heading{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform)}.cre8-is-active:not(.cre8-is-dynamic) .cre8-c-popover__panel,.cre8-is-active.cre8-is-dynamic-active .cre8-c-popover__panel{opacity:1;visibility:visible}.cre8-c-popover--top .cre8-c-popover__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-popover--left .cre8-c-popover__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-popover--right .cre8-c-popover__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-popover__panel::before{content:"";display:block;width:0.75rem;height:0.75rem;position:absolute;margin:auto;background-color:var(--cre8-color-bg-default);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-popover--top .cre8-c-popover__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-popover--left .cre8-c-popover__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-popover--right .cre8-c-popover__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-popover__footer{display:flex;gap:1rem}`;
+export default styles;
+//# sourceMappingURL=popover.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.styles.js","sourceRoot":"","sources":["../../../components/popover/popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,ghMAAghM,CAAC;AACniM,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-popover{position:relative;display:table}.cre8-c-popover__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;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:16rem;z-index:400;background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);box-shadow:var(--cre8-shadow-default);padding:1rem}.cre8-c-popover__panel:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-popover__panel .cre8-c-popover__heading{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform)}.cre8-is-active:not(.cre8-is-dynamic) .cre8-c-popover__panel,.cre8-is-active.cre8-is-dynamic-active .cre8-c-popover__panel{opacity:1;visibility:visible}.cre8-c-popover--top .cre8-c-popover__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-popover--left .cre8-c-popover__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-popover--right .cre8-c-popover__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-popover__panel::before{content:\"\";display:block;width:0.75rem;height:0.75rem;position:absolute;margin:auto;background-color:var(--cre8-color-bg-default);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-popover--top .cre8-c-popover__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-popover--left .cre8-c-popover__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-popover--right .cre8-c-popover__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-popover__footer{display:flex;gap:1rem}`;\nexport default styles;\n"]}