@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/pagination/pagination.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../components/pagination/pagination.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmEX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../components/pagination/pagination.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA6nI,CAAC;AAC1oI,eAAe,MAAM,CAAC"}

package/lib/components/percent-bar/percent-bar.js

@@ -1,45 +1,17 @@
-import { css as m, nothing as d, html as p } from "lit";
-import { a as h } from "../../icon-DImqxDiW.js";
-import { property as c } from "lit/decorators.js";
-import { Cre8Element as v } from "../cre8-element.js";
+import { css as p, nothing as h, html as d } from "lit";
+import { a as m } from "../../icon-D22g8aWB.js";
+import { property as a } from "lit/decorators.js";
+import { Cre8Element as f } from "../cre8-element.js";
 import "../button/button.js";
 import "../text-passage/text-passage.js";
 import "../progress-meter/progress-meter.js";
-const f = m`@import '../../design-tokens/core/scss/theming/component';
-
-// #PERCENT-BAR
-
-
-/**
- * Percent Bar Controls
- */
-.cre8-c-percent-bar__controls {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  min-height: calc(8px * 4.5);
-}
-
-.cre8-c-percent-bar__button {
-  size: var(--cre8-icon-size-default);
-}
-
-.cre8-c-percent-bar__text-passage {
-  color: var(--cre8-color-content-default);
-  @include cre8-typography-body-small();
-}
-
-.cre8-c-percent-bar__p {
-  width: fit-content;
-}
-`;
-var u = Object.defineProperty, i = (o, e, a, _) => {
-  for (var t = void 0, s = o.length - 1, l; s >= 0; s--)
-    (l = o[s]) && (t = l(e, a, t) || t);
-  return t && u(e, a, t), t;
+const x = p`*,::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}.cre8-c-percent-bar__controls{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-height:2.25rem}.cre8-c-percent-bar__button{size:var(--cre8-icon-size-default)}.cre8-c-percent-bar__text-passage{color:var(--cre8-color-content-default);font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-percent-bar__p{width:fit-content}`;
+var g = Object.defineProperty, s = (n, e, l, y) => {
+  for (var t = void 0, i = n.length - 1, c; i >= 0; i--)
+    (c = n[i]) && (t = c(e, l, t) || t);
+  return t && g(e, l, t), t;
 };
-const n = class n extends v {
+const o = class o extends f {
   _handleClick(e) {
     this.dispatchEvent(new Event("leftActionButtonClick", e));
   }
@@ -51,19 +23,19 @@ const n = class n extends v {
   }
   render() {
     const e = this.componentClassNames("cre8-c-percent-bar", {});
-    return p`
+    return d`
       <div class="${e}">
           <div class="cre8-c-percent-bar__controls">
               <div lass="cre8-c-percent-bar__left-controls">
-                ${this.isFirstStep() ? p` <cre8-button
+                ${this.isFirstStep() ? d` <cre8-button
                       ?hideText=${!0}
-                      svg="${h}"
+                      svg="${m}"
                       iconRotateDegree="-90"
                       variant="tertiary"
                       ?disabled=${this.disableActionLeft}
                       @click="${this._handleClick}"
                     >
-                    </cre8-button>` : d}
+                    </cre8-button>` : h}
               </div>
               <div class="cre8-c-percent-bar__right-controls">
                 <cre8-text-passage
@@ -82,16 +54,16 @@ const n = class n extends v {
     `;
   }
 };
-n.styles = [f];
-let r = n;
-i([
-  c()
+o.styles = [x];
+let r = o;
+s([
+  a()
 ], r.prototype, "value");
-i([
-  c()
+s([
+  a()
 ], r.prototype, "max");
-i([
-  c({ type: Boolean, reflect: !0 })
+s([
+  a({ type: Boolean, reflect: !0 })
 ], r.prototype, "disableActionLeft");
 customElements.get("cre8-percent-bar") === void 0 && customElements.define("cre8-percent-bar", r);
 export {

package/lib/components/percent-bar/percent-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"percent-bar.styles.d.ts","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA4BX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"percent-bar.styles.d.ts","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA06E,CAAC;AACv7E,eAAe,MAAM,CAAC"}

package/lib/components/popover/popover.js

@@ -1,183 +1,14 @@
-import { css as g, nothing as u, html as i } from "lit";
-import { property as n, query as v, queryAssignedElements as h } from "lit/decorators.js";
-import { Cre8Element as b } from "../cre8-element.js";
+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 f = g`@import '../../design-tokens/core/scss/theming/component';
-/*------------------------------------*\
- #POPOVER
-\*------------------------------------*/
-
-:host {
-  display: inline-flex;
-}
-
-/** 
- * Popover
- * The main container that holds the trigger and panel
- */
-.cre8-c-popover {
-  position: relative;
-  display: table;
-}
-
-/** 
- * Popover panel
- * The container for the popover panel heading, content, and footer
- * 1. Allows the popover to appear over elements, but underneath the global header.
- */
-.cre8-c-popover__panel {
-  @include cre8-typography-body-default();
-  opacity: 0;
-  visibility: hidden;
-  position: absolute;
-  inset-block-start: calc(100% + #{calc(8px * 1.5)});
-  inset-block-end: auto;
-  inset-inline-start: 50%;
-  inset-inline-end: auto;
-  transform: translateX(var(--rtlTranslateX, -50%));
-  display: flex;
-  flex-direction: column;
-  gap: calc(8px * 1);
-  width: calc(8px * 32);
-  z-index: 400; /* 1 */
-  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: calc(8px * 2);
-
-  /**
-   * Focus state for popover panel
-   */
-  &:focus-visible {
-    @include focus;
-  }
- 
-  /**
-   * Default Popover heading 
-   */
-  .cre8-c-popover__heading {
-    @include cre8-typography-label-small();
-  }
-
-  /**
-   * Active state for popover panel
-   */
-  .cre8-is-active:not(.cre8-is-dynamic) &,
-  .cre8-is-active.cre8-is-dynamic-active & {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  /**
-   * Popover panel positioned to the top of the trigger
-   */
-  .cre8-c-popover--top & {
-    inset-block-start: auto;
-    inset-block-end: calc(100% + #{calc(8px * 1.5)});
-    inset-inline-start: 50%;
-    inset-inline-end: auto;
-    transform: translateX(var(--rtlTranslateX, -50%));
-  }
-
-  /**
-   * Popover panel positioned to the left of the trigger
-   */
-  .cre8-c-popover--left & {
-    inset-block-start: 50%;
-    inset-block-end: auto;
-    inset-inline-start: auto;
-    inset-inline-end: calc(100% + #{calc(8px * 1.5)});
-    transform: translateY(-50%);
-  }
-
-  /**
-   * Popover panel positioned to the right of the trigger
-   */
-  .cre8-c-popover--right & {
-    inset-block-start: 50%;
-    inset-block-end: auto;
-    inset-inline-start: calc(100% + #{calc(8px * 1.5)});
-    inset-inline-end: auto;
-    transform: translateY(-50%);
-  }
-}
-
-/**
- * Popover panel arrow
- */
-.cre8-c-popover__panel::before {
-  content: '';
-  display: block;
-  width: calc(8px * 1.5);
-  height: calc(8px * 1.5);
-  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) + #{calc(8px * 0.75)}) * -1);
-  inset-inline-start: 50%;
-  transform: translateX(var(--rtlTranslateX, -50%)) rotate(45deg);
-
-  /**
-   * Moves the popover panel arrow to the top of the panel
-   */
-  .cre8-c-popover--top & {
-    inset-block-start: auto;
-    inset-block-end: calc((var(--cre8-border-width-default) + #{calc(8px * 0.75)}) * -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);
-  }
-
-  /**
-   * Moves the popover panel arrow to the right side of the panel
-   */
-  .cre8-c-popover--left & {
-    inset-block-start: 50%;
-    inset-block-end: auto;
-    inset-inline-start: auto;
-    inset-inline-end: calc((var(--cre8-border-width-default) + #{calc(8px * 0.75)}) * -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));
-  }
-
-  /**
-   * Moves the popover panel arrow to the left side of the panel
-   */
-  .cre8-c-popover--right & {
-    inset-block-start: 50%;
-    inset-block-end: auto;
-    inset-inline-start: calc((var(--cre8-border-width-default) + #{calc(8px * 0.75)}) * -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));
-  }
-}
-
-/**
- * Popover footer
- * 1) The footer container in the panel
- */
-.cre8-c-popover__footer {
-  display: flex;
-  gap: calc(8px * 2);
-}
-`;
-var m = Object.defineProperty, r = (d, e, t, a) => {
+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 && m(e, t, s), s;
+  return s && u(e, t, s), s;
 };
-const c = class c extends b {
+const c = class c extends m {
   constructor() {
     super(...arguments), this.handleOnClickOutside = (e) => {
       if (!this.isActive)
@@ -284,8 +115,8 @@ const c = class c extends b {
       this._closePopoverAndFocusTrigger(e);
       return;
     }
-    const a = t[t.length - 1];
-    document.activeElement === a && (this._closePopoverAndFocusTrigger(e), e.preventDefault());
+    const n = t[t.length - 1];
+    document.activeElement === n && (this._closePopoverAndFocusTrigger(e), e.preventDefault());
   }
   _getFocusableElements() {
     return [...Array.from(this._Cre8PopoverFooter)];
@@ -302,62 +133,62 @@ const c = class c extends b {
       "cre8-is-dynamic": this.isDynamic,
       "cre8-is-dynamic-active": this.isActiveDynamic
     });
-    return i`
+    return o`
       <div class="${e}">
-        ${this.slotNotEmpty("trigger") && i` <slot name="trigger" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}
-        ${this.isActive ? i`
+        ${this.slotNotEmpty("trigger") && o` <slot name="trigger" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}
+        ${this.isActive ? o`
               <div tabindex="0" class="cre8-c-popover__panel" @keydown=${this._handleKeydown}>
-                ${(this.slotNotEmpty("header") || this.heading) && i`
+                ${(this.slotNotEmpty("header") || this.heading) && o`
                   <div class="cre8-c-popover__header">
-                    ${this.heading ? i`<div class="cre8-c-popover__heading">${this.heading}</div>` : i`<slot name="header"></slot>`}
+                    ${this.heading ? o`<div class="cre8-c-popover__heading">${this.heading}</div>` : o`<slot name="header"></slot>`}
                   </div>
                 `}
                 <slot></slot>
-                ${this.slotNotEmpty("footer") && i`
+                ${this.slotNotEmpty("footer") && o`
                   <div class="cre8-c-popover__footer">
                     <slot name="footer"></slot>
                   </div>
                 `}
               </div>
-            ` : u}
+            ` : f}
       </div>
     `;
   }
 };
-c.styles = [f];
-let o = c;
-r([
-  n()
-], o.prototype, "heading");
-r([
-  n()
-], o.prototype, "position");
-r([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "isVisibleOnScroll");
-r([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "isDynamic");
-r([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "isActiveDynamic");
-r([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "isActive");
-r([
-  v(".cre8-c-popover")
-], o.prototype, "_Cre8Popover");
-r([
-  v(".cre8-c-popover__panel")
-], o.prototype, "_Cre8PopoverPanel");
-r([
-  h({ slot: "trigger" })
-], o.prototype, "_Cre8PopoverTrigger");
-r([
-  h({ slot: "footer" })
-], o.prototype, "_Cre8PopoverFooter");
-customElements.get("cre8-popover") === void 0 && customElements.define("cre8-popover", o);
+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 {
-  o as Cre8Popover,
-  o as default
+  r as Cre8Popover,
+  r as default
 };

package/lib/components/popover/popover.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.styles.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAyKX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"popover.styles.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAshM,CAAC;AACniM,eAAe,MAAM,CAAC"}

package/lib/components/primary-nav/primary-nav.js

@@ -1,57 +1,23 @@
-import { css as m, html as p } from "lit";
-import { property as n } from "lit/decorators.js";
-import { Cre8Element as d } from "../cre8-element.js";
-const v = m`@import '../../design-tokens/core/scss/theming/component';
-
-// #PRIMARY NAV
-
-/**
- * Inverted primary nav
- */
-.cre8-c-primary-nav--inverted {
-  --cre8-primary-nav-link-color: var(--cre8-color-content-knockout);
-}
-
-/**
- * Primary nav list
- * 1) Stack on small screens within the toggleable menu but place side by side on large screens
- */
-.cre8-c-primary-nav__list {
-  display: flex;
-  flex-direction: column; /* 1 */
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  /**
-  * Primary nav list within side by side variant
-  * 1) Always keep items side by side
-  */
-  .cre8-c-primary-nav--side-by-side & {
-    flex-direction: row; /* 1 */
-  }
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    flex-direction: row; /* 1 */
-  }
-}
-`;
-var y = Object.defineProperty, s = (o, i, l, u) => {
-  for (var e = void 0, t = o.length - 1, c; t >= 0; t--)
-    (c = o[t]) && (e = c(i, l, e) || e);
-  return e && y(i, l, e), e;
+import { css as p, html as m } from "lit";
+import { property as a } from "lit/decorators.js";
+import { Cre8Element as c } from "../cre8-element.js";
+const h = p`*,::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}.cre8-c-primary-nav--inverted{--cre8-primary-nav-link-color: var(--cre8-color-content-knockout)}.cre8-c-primary-nav__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.cre8-c-primary-nav--side-by-side .cre8-c-primary-nav__list{flex-direction:row}@media all and (min-width: 960px){.cre8-c-primary-nav__list{flex-direction:row}}`;
+var f = Object.defineProperty, s = (d, t, l, x) => {
+  for (var e = void 0, i = d.length - 1, o; i >= 0; i--)
+    (o = d[i]) && (e = o(t, l, e) || e);
+  return e && f(t, l, e), e;
 };
-const a = class a extends d {
+const n = class n extends c {
   constructor() {
     super(...arguments), this.navAriaLabel = "main";
   }
   render() {
-    const i = this.componentClassNames("cre8-c-primary-nav", {
+    const t = this.componentClassNames("cre8-c-primary-nav", {
       "cre8-c-primary-nav--side-by-side": this.behavior === "side-by-side",
       "cre8-c-primary-nav--inverted": this.inverted === !0
     });
-    return p`
-      <nav aria-label="${this.navAriaLabel}" class="${i}">
+    return m`
+      <nav aria-label="${this.navAriaLabel}" class="${t}">
         <ul class="cre8-c-primary-nav__list">
           <slot></slot>
         </ul>
@@ -59,16 +25,16 @@ const a = class a extends d {
     `;
   }
 };
-a.styles = [v];
-let r = a;
+n.styles = [h];
+let r = n;
 s([
-  n({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], r.prototype, "inverted");
 s([
-  n()
+  a()
 ], r.prototype, "behavior");
 s([
-  n()
+  a()
 ], r.prototype, "navAriaLabel");
 customElements.get("cre8-primary-nav") === void 0 && customElements.define("cre8-primary-nav", r);
 export {

package/lib/components/primary-nav/primary-nav.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primary-nav.styles.d.ts","sourceRoot":"","sources":["../../../components/primary-nav/primary-nav.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAkCX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"primary-nav.styles.d.ts","sourceRoot":"","sources":["../../../components/primary-nav/primary-nav.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA+mE,CAAC;AAC5nE,eAAe,MAAM,CAAC"}