@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/tooltip/tooltip.js

@@ -1,206 +1,15 @@
-import { css as u, html as l } from "lit";
-import { property as r, query as h } from "lit/decorators.js";
+import { css as u, html as c } from "lit";
+import { property as o, query as h } from "lit/decorators.js";
 import { nanoid as b } from "nanoid";
-import { ifDefined as v } from "lit/directives/if-defined.js";
-import { Cre8Element as f } from "../cre8-element.js";
-const g = u`@import '../../design-tokens/core/scss/theming/component';
-/*------------------------------------*\
- #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 {
-  @include cre8-typography-body-default();
-  opacity: 0;
-  visibility: hidden;
-  position: absolute;
-  word-wrap: break-word;
-  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: max-content;
-  max-width: calc(8px * 35);
-  z-index: 400;
-  color: var(--cre8-color-content-knockout);
-  background-color: var(--cre8-color-bg-strong);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  border-radius: var(--cre8-border-radius-default);
-  padding: calc(8px * 1);
-
-  /**
-   * Active state for tooltip panel
-   */
-  .cre8-is-active:not(.cre8-is-dynamic) &,
-  .cre8-is-active.cre8-is-dynamic-active & {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  /**
-   * Tooltip panel positioned to the top of the trigger
-   */
-  .cre8-c-tooltip--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%));
-  }
-
-  /**
-   * Tooltip panel positioned to the left of the trigger
-   */
-  .cre8-c-tooltip--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%);
-  }
-
-  /**
-   * Tooltip panel positioned to the right of the trigger
-   */
-  .cre8-c-tooltip--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%);
-  }
-
-  /**
-   * Tooltip panel knockout
-   */
-  .cre8-c-tooltip--knockout & {
-    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: calc(8px * 1.5);
-  height: calc(8px * 1.5);
-  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) + #{calc(8px * 0.75)}) * -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 & {
-    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 tooltip panel arrow to the right side of the panel
-   */
-  .cre8-c-tooltip--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 tooltip panel arrow to the left side of the panel
-   */
-  .cre8-c-tooltip--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));
-  }
-
-  /**
-   * Tooltip arrow knockout
-   */
-  .cre8-c-tooltip--knockout & {
-    background-color: var(--cre8-color-bg-default);
-  }
-}
-
-/**
- * Tooltip footer
- * 1) The footer container in the panel
- */
-.cre8-c-tooltip__footer {
-  display: flex;
-  gap: calc(8px * 2);
-  justify-content: flex-end;
-  flex-grow: 1;
-}
-
-/**
- * Tooltip trigger
- * 1) Add global focus state on keyboard focus
- */
-.cre8-c-tooltip__trigger {
-  cursor: pointer;
-
-  &:focus-visible {
-    @include focus;
-  }
-}
-
-svg {
-  display: flex;
-  height: calc(8px * 2);
-  width: calc(8px * 2);
-}
-`;
-var m = Object.defineProperty, i = (d, e, t, n) => {
-  for (var c = void 0, s = d.length - 1, p; s >= 0; s--)
-    (p = d[s]) && (c = p(e, t, c) || c);
-  return c && m(e, t, c), c;
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { Cre8Element as m } from "../cre8-element.js";
+const g = u`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-tooltip{position:relative;display:table}.cre8-c-tooltip__panel{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);opacity:0;visibility:hidden;position:absolute;word-wrap:break-word;inset-block-start:calc(100% + 0.75rem);inset-block-end:auto;inset-inline-start:50%;inset-inline-end:auto;transform:translateX(var(--rtlTranslateX, -50%));display:flex;flex-direction:column;gap:0.5rem;width:max-content;max-width:17.5rem;z-index:400;color:var(--cre8-color-content-knockout);background-color:var(--cre8-color-bg-strong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.5rem}.cre8-is-active:not(.cre8-is-dynamic) .cre8-c-tooltip__panel,.cre8-is-active.cre8-is-dynamic-active .cre8-c-tooltip__panel{opacity:1;visibility:visible}.cre8-c-tooltip--top .cre8-c-tooltip__panel{inset-block-start:auto;inset-block-end:calc(100% + 0.75rem);inset-inline-start:50%;inset-inline-end:auto;transform:translateX(var(--rtlTranslateX, -50%))}.cre8-c-tooltip--left .cre8-c-tooltip__panel{inset-block-start:50%;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:calc(100% + 0.75rem);transform:translateY(-50%)}.cre8-c-tooltip--right .cre8-c-tooltip__panel{inset-block-start:50%;inset-block-end:auto;inset-inline-start:calc(100% + 0.75rem);inset-inline-end:auto;transform:translateY(-50%)}.cre8-c-tooltip--knockout .cre8-c-tooltip__panel{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default)}.cre8-c-tooltip__panel::before{content:"";display:block;width:0.75rem;height:0.75rem;position:absolute;margin:auto;background-color:var(--cre8-color-bg-strong);border-block-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);inset-block-start:calc((var(--cre8-border-width-default) + 0.375rem)*-1);inset-inline-start:50%;transform:translateX(var(--rtlTranslateX, -50%)) rotate(45deg)}.cre8-c-tooltip--top .cre8-c-tooltip__panel::before{inset-block-start:auto;inset-block-end:calc((var(--cre8-border-width-default) + 0.375rem)*-1);border-block-start:none;border-inline-start:none;border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong)}.cre8-c-tooltip--left .cre8-c-tooltip__panel::before{inset-block-start:50%;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:calc((var(--cre8-border-width-default) + 0.375rem)*-1);border-block-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-start:none;border-block-end:none;border-inline-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);transform:translateY(-50%) rotate(var(--rtlRotate45Inverse, 45deg))}.cre8-c-tooltip--right .cre8-c-tooltip__panel::before{inset-block-start:50%;inset-block-end:auto;inset-inline-start:calc((var(--cre8-border-width-default) + 0.375rem)*-1);inset-inline-end:auto;border-block-start:none;border-inline-start:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);border-inline-end:none;transform:translateY(-50%) rotate(var(--rtlRotate45Inverse, 45deg))}.cre8-c-tooltip--knockout .cre8-c-tooltip__panel::before{background-color:var(--cre8-color-bg-default)}.cre8-c-tooltip__footer{display:flex;gap:1rem;justify-content:flex-end;flex-grow:1}.cre8-c-tooltip__trigger{cursor:pointer}.cre8-c-tooltip__trigger:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}svg{display:flex;height:1rem;width:1rem}`;
+var v = Object.defineProperty, i = (d, t, e, s) => {
+  for (var a = void 0, n = d.length - 1, p; n >= 0; n--)
+    (p = d[n]) && (a = p(t, e, a) || a);
+  return a && v(t, e, a), a;
 };
-const a = class a extends f {
+const l = class l extends m {
   constructor() {
     super(...arguments), this.iconRotateDegree = 0, this.removeActive = () => {
       this.isActive && this.toggleActive();
@@ -220,11 +29,11 @@ const a = class a extends f {
    * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback
    * */
   updated() {
-    const e = this.shadowRoot.querySelectorAll("slot")[1].assignedNodes().reduce(
-      ((t, n) => `${t}${n.textContent.replace(/\n/g, "").trim()}`),
+    const t = this.shadowRoot.querySelectorAll("slot")[1].assignedNodes().reduce(
+      ((e, s) => `${e}${s.textContent.replace(/\n/g, "").trim()}`),
       ""
     );
-    document.getElementById(this._uniqueId) && (document.getElementById(this._uniqueId).textContent = e);
+    document.getElementById(this._uniqueId) && (document.getElementById(this._uniqueId).textContent = t);
   }
   /**
    * firstUpdated Callback Lifecycle
@@ -236,14 +45,14 @@ const a = class a extends f {
   firstUpdated() {
     if (this.ariaDescribes) {
       this._uniqueId = this._uniqueId || b();
-      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 n = document.getElementById(this.ariaDescribes);
-      n.parentNode.insertBefore(t, n);
-      const c = n?.getAttribute("aria-describedBy");
-      n?.setAttribute(
+      const t = new RegExp(`\\b${this._uniqueId}\\b`), e = document.createElement("div");
+      e.setAttribute("role", "tooltip"), e.setAttribute("style", "position:fixed; left: -1000px; top: -1000px;"), e.id = this._uniqueId;
+      const s = document.getElementById(this.ariaDescribes);
+      s.parentNode.insertBefore(e, s);
+      const a = s?.getAttribute("aria-describedBy");
+      s?.setAttribute(
         "aria-describedby",
-        `${c ? `${c.replace(e, "")} ` : ""}${this._uniqueId}`.trim()
+        `${a ? `${a.replace(t, "")} ` : ""}${this._uniqueId}`.trim()
       );
     }
   }
@@ -270,8 +79,8 @@ const a = class a extends f {
    */
   dynamicPosition() {
     if (this.isDynamic && this._Cre8TooltipPanel) {
-      const e = document.querySelector("body").getBoundingClientRect(), t = this._Cre8TooltipPanel.getBoundingClientRect(), n = 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), n >= window.innerHeight && t.bottom >= window.innerHeight && t.left >= 0 && t.right <= e.width && (this.position = "top");
+      const t = document.querySelector("body").getBoundingClientRect(), e = this._Cre8TooltipPanel.getBoundingClientRect(), s = this._Cre8Tooltip.clientHeight + e.height + e.top;
+      e.left < 0 && (this.position = this.isRTL ? "left" : "right"), e.right >= t.width && (this.position = this.isRTL ? "right" : "left"), e.top < 0 && e.left > 0 && e.right < t.width && (this.position = null), s >= window.innerHeight && e.bottom >= window.innerHeight && e.left >= 0 && e.right <= t.width && (this.position = "top");
     }
   }
   /**
@@ -280,8 +89,8 @@ const a = class a extends f {
    * 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();
+  _handleKeydown(t) {
+    this.isActive && (t.code === "Escape" || t.code === "Tab") && this.toggleActive(), (t.code === "Enter" || t.code === "Space") && this.toggleActive();
   }
   /**
    * Set Tooltip Active State
@@ -306,7 +115,7 @@ const a = class a extends f {
     }, 2);
   }
   render() {
-    const e = this.componentClassNames("cre8-c-tooltip", {
+    const t = this.componentClassNames("cre8-c-tooltip", {
       "cre8-c-tooltip--top": this.position === "top",
       "cre8-c-tooltip--left": this.position === "left",
       "cre8-c-tooltip--right": this.position === "right",
@@ -315,22 +124,22 @@ const a = class a extends f {
       "cre8-is-dynamic": this.isDynamic,
       "cre8-is-dynamic-active": this.isActiveDynamic
     });
-    return l`
-        <div class="${e}">
+    return c`
+        <div class="${t}">
             <div 
                 class="cre8-c-tooltip__trigger"
                 tabindex="0"
                 @focus=${this.toggleActive}
                 @keydown=${this._handleKeydown}
             >
-                ${this.svg ? l`
+                ${this.svg ? c`
             <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>` : c`<slot name="trigger"></slot>`}
             </div>
             <dialog
-                id=${v(this._uniqueId)}
+                id=${f(this._uniqueId)}
                 aria-labelledby=${this.ariaDescribes}
                 class="cre8-c-tooltip__panel"
                 role="tooltip">
@@ -340,46 +149,46 @@ const a = class a extends f {
       `;
   }
 };
-a.styles = [g];
-let o = a;
+l.styles = [g];
+let r = l;
 i([
-  r()
-], o.prototype, "position");
+  o()
+], r.prototype, "position");
 i([
-  r({ type: Boolean, reflect: !0 })
-], o.prototype, "knockout");
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "knockout");
 i([
-  r({ type: Boolean, reflect: !0 })
-], o.prototype, "isDynamic");
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "isDynamic");
 i([
-  r({ type: Boolean })
-], o.prototype, "isActiveDynamic");
+  o({ type: Boolean })
+], r.prototype, "isActiveDynamic");
 i([
-  r({ type: Boolean, reflect: !0 })
-], o.prototype, "isActive");
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "isActive");
 i([
-  r({ type: String })
-], o.prototype, "ariaDescribes");
+  o({ type: String })
+], r.prototype, "ariaDescribes");
 i([
-  r({ type: String })
-], o.prototype, "_uniqueId");
+  o({ type: String })
+], r.prototype, "_uniqueId");
 i([
-  r()
-], o.prototype, "svg");
+  o()
+], r.prototype, "svg");
 i([
-  r({ type: Number })
-], o.prototype, "iconRotateDegree");
+  o({ type: Number })
+], r.prototype, "iconRotateDegree");
 i([
-  r()
-], o.prototype, "iconFlipDirection");
+  o()
+], r.prototype, "iconFlipDirection");
 i([
   h(".cre8-c-tooltip")
-], o.prototype, "_Cre8Tooltip");
+], r.prototype, "_Cre8Tooltip");
 i([
   h(".cre8-c-tooltip__panel")
-], o.prototype, "_Cre8TooltipPanel");
-customElements.get("cre8-tooltip") === void 0 && customElements.define("cre8-tooltip", o);
+], r.prototype, "_Cre8TooltipPanel");
+customElements.get("cre8-tooltip") === void 0 && customElements.define("cre8-tooltip", r);
 export {
-  o as Cre8Tooltip,
-  o as default
+  r as Cre8Tooltip,
+  r as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.styles.d.ts","sourceRoot":"","sources":["../../../components/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+LX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tooltip.styles.d.ts","sourceRoot":"","sources":["../../../components/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA+gM,CAAC;AAC5hM,eAAe,MAAM,CAAC"}

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

@@ -1,55 +1,22 @@
-import { css as u, html as v } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const p = u`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) Navigation in the header for utility items like logging into an account
- */
-:host {
-  margin-left: auto;
-}
-
-/**
- * Inverted utility-nav
- */
-.cre8-c-utility-nav--inverted {
-  --cre8-utility-nav-link-color: var(--cre8-color-content-knockout);
-}
-
-/**
-* Utility nav list
-*/
-.cre8-c-utility-nav__list {
-  display: flex;
-  margin: calc(8px * -2) 0 0 calc(8px * -2);
-  padding: 0;
-  list-style: none;
-
-  /**
-  * Slotted utility nav item
-  */
-  ::slotted(cre8-utility-nav-item) {
-    margin-left: calc(8px * 2);
-    margin-top: calc(8px * 2);
-  }
-}
-`;
-var d = Object.defineProperty, c = (r, i, a, y) => {
-  for (var t = void 0, n = r.length - 1, s; n >= 0; n--)
-    (s = r[n]) && (t = s(i, a, t) || t);
-  return t && d(i, a, t), t;
+import { css as m, html as p } from "lit";
+import { property as d } from "lit/decorators.js";
+import { Cre8Element as c } from "../cre8-element.js";
+const h = m`*,::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{margin-left:auto}.cre8-c-utility-nav--inverted{--cre8-utility-nav-link-color: var(--cre8-color-content-knockout)}.cre8-c-utility-nav__list{display:flex;margin:-1rem 0 0 -1rem;padding:0;list-style:none}.cre8-c-utility-nav__list ::slotted(cre8-utility-nav-item){margin-left:1rem;margin-top:1rem}`;
+var f = Object.defineProperty, o = (s, r, l, x) => {
+  for (var e = void 0, i = s.length - 1, n; i >= 0; i--)
+    (n = s[i]) && (e = n(r, l, e) || e);
+  return e && f(r, l, e), e;
 };
-const l = class l extends m {
+const a = class a extends c {
   constructor() {
     super(...arguments), this.navAriaLabel = "utility";
   }
   render() {
-    const i = this.componentClassNames("cre8-c-utility-nav", {
+    const r = this.componentClassNames("cre8-c-utility-nav", {
       "cre8-c-utility-nav--inverted": this.inverted === !0
     });
-    return v`
-      <nav aria-label="${this.navAriaLabel}" class="${i}">
+    return p`
+      <nav aria-label="${this.navAriaLabel}" class="${r}">
         <ul class="cre8-c-utility-nav__list">
           <slot></slot>
         </ul>
@@ -57,16 +24,16 @@ const l = class l extends m {
     `;
   }
 };
-l.styles = [p];
-let e = l;
-c([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "inverted");
-c([
-  o()
-], e.prototype, "navAriaLabel");
-customElements.get("cre8-utility-nav") === void 0 && customElements.define("cre8-utility-nav", e);
+a.styles = [h];
+let t = a;
+o([
+  d({ type: Boolean, reflect: !0 })
+], t.prototype, "inverted");
+o([
+  d()
+], t.prototype, "navAriaLabel");
+customElements.get("cre8-utility-nav") === void 0 && customElements.define("cre8-utility-nav", t);
 export {
-  e as Cre8UtilityNav,
-  e as default
+  t as Cre8UtilityNav,
+  t as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"utility-nav.styles.d.ts","sourceRoot":"","sources":["../../../components/utility-nav/utility-nav.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiCX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"utility-nav.styles.d.ts","sourceRoot":"","sources":["../../../components/utility-nav/utility-nav.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA2jE,CAAC;AACxkE,eAAe,MAAM,CAAC"}

package/lib/components/utility-nav-item/utility-nav-item.js

@@ -1,117 +1,62 @@
-import { css as h, nothing as o, html as i } from "lit";
-import { ifDefined as a } from "lit-html/directives/if-defined.js";
-import { property as c } from "lit/decorators.js";
-import { Cre8Element as u } from "../cre8-element.js";
-const m = h`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) List item that contains a link/button within the utility nav
- */
-.cre8-c-utility-nav__item {
-  margin: 0;
-  padding: 0;
-}
-
-/**
-* Utility nav link
-*/
-.cre8-c-utility-nav__link {
-  display: flex;
-  @include cre8-typography-label-default;
-  border: none;
-  background: none;
-  appearance: none;
-  padding: 0;
-  text-align: left;
-  color: var(--cre8-utility-nav-link-color, var(--cre8-color-content-brand));
-  cursor: pointer;
-  transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-
-  &:hover,
-  &:focus {
-    color: var(--cre8-color-content-brand-hover);
-  }
-}
-
-/**
-* Utility nav icon
-* 1) Pass properties down to icon component
-*/
-cre8-icon-legacy {
-  --cre8-icon-height: 1.5rem; /* 1 */
-  --cre8-icon-width: 1.5rem; /* 1 */
-}
-
-/**
-* Utility nav icon directly after utility nav text
-* 1) Create space between text and icon
-*/
-.cre8-c-utility-nav__text + cre8-icon-legacy {
-  margin-left: calc(8px * 1); /* 1 */
-}
-
-/**
-* Utility nav text directly after utility nav icon
-* 1) Create space between text and icon
-*/
-cre8-icon-legacy + .cre8-c-utility-nav__text {
-  margin-left: calc(8px * 1); /* 1 */
-}
-`;
-var v = Object.defineProperty, r = (d, n, p, f) => {
-  for (var t = void 0, s = d.length - 1, y; s >= 0; s--)
-    (y = d[s]) && (t = y(n, p, t) || t);
-  return t && v(n, p, t), t;
+import { css as m, nothing as o, html as i } from "lit";
+import { ifDefined as c } from "lit-html/directives/if-defined.js";
+import { property as a } from "lit/decorators.js";
+import { Cre8Element as f } from "../cre8-element.js";
+const y = m`*,::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-utility-nav__item{margin:0;padding:0}.cre8-c-utility-nav__link{display:flex;font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);border:none;background:none;appearance:none;padding:0;text-align:left;color:var(--cre8-utility-nav-link-color, var(--cre8-color-content-brand));cursor:pointer;transition:color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-utility-nav__link:hover,.cre8-c-utility-nav__link:focus{color:var(--cre8-color-content-brand-hover)}cre8-icon-legacy{--cre8-icon-height: 1.5rem;--cre8-icon-width: 1.5rem}.cre8-c-utility-nav__text+cre8-icon-legacy{margin-left:0.5rem}cre8-icon-legacy+.cre8-c-utility-nav__text{margin-left:0.5rem}`;
+var g = Object.defineProperty, n = (d, r, h, u) => {
+  for (var t = void 0, s = d.length - 1, p; s >= 0; s--)
+    (p = d[s]) && (t = p(r, h, t) || t);
+  return t && g(r, h, t), t;
 };
-const l = class l extends u {
+const l = class l extends f {
   constructor() {
     super(...arguments), this.iconPosition = void 0;
   }
   render() {
-    const n = this.componentClassNames("cre8-c-utility-nav__item", {});
+    const r = this.componentClassNames("cre8-c-utility-nav__item", {});
     return this.href ? i`
-        <li class="${n}">
+        <li class="${r}">
           <a href="${this.href}" class="cre8-c-utility-nav__link">
-            ${this.iconPosition === "before" ? i`<cre8-icon-legacy aria-hidden="true" name="${a(this.iconName)}"></cre8-icon-legacy>` : o}
+            ${this.iconPosition === "before" ? i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>` : o}
             <span
               class="${this.hideText ? "cre8-u-is-vishidden cre8-c-utility-nav__text" : "cre8-c-utility-nav__text"}"
             >
               ${this.text}
             </span>
-            ${this.iconPosition === "after" ? i`<cre8-icon-legacy aria-hidden="true" name="${a(this.iconName)}"></cre8-icon-legacy>` : o}
+            ${this.iconPosition === "after" ? i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>` : o}
           </a>
         </li>
       ` : i`
-        <li class="${n}">
+        <li class="${r}">
           <button class="cre8-c-utility-nav__link">
-            ${this.iconPosition === "before" ? i`<cre8-icon-legacy aria-hidden="true" name="${a(this.iconName)}"></cre8-icon-legacy>` : o}
+            ${this.iconPosition === "before" ? i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>` : o}
             <span
               class="${this.hideText ? "cre8-u-is-vishidden cre8-c-utility-nav__text" : "cre8-c-utility-nav__text"}"
             >
               ${this.text}
             </span>
-            ${this.iconPosition === "after" ? i`<cre8-icon-legacy aria-hidden="true" name="${a(this.iconName)}"></cre8-icon-legacy>` : o}
+            ${this.iconPosition === "after" ? i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>` : o}
           </button>
         </li>
       `;
   }
 };
-l.styles = [m];
+l.styles = [y];
 let e = l;
-r([
-  c({ type: Boolean, reflect: !0 })
+n([
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "hideText");
-r([
-  c()
+n([
+  a()
 ], e.prototype, "href");
-r([
-  c()
+n([
+  a()
 ], e.prototype, "iconName");
-r([
-  c()
+n([
+  a()
 ], e.prototype, "iconPosition");
-r([
-  c()
+n([
+  a()
 ], e.prototype, "text");
 customElements.get("cre8-utility-nav-item") === void 0 && customElements.define("cre8-utility-nav-item", e);
 export {

package/lib/components/utility-nav-item/utility-nav-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utility-nav-item.styles.d.ts","sourceRoot":"","sources":["../../../components/utility-nav-item/utility-nav-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAuDX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"utility-nav-item.styles.d.ts","sourceRoot":"","sources":["../../../components/utility-nav-item/utility-nav-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA4uF,CAAC;AACzvF,eAAe,MAAM,CAAC"}

package/lib/design-tokens/brands/blue/css/tokens_blue.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens_blue.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/blue/css/tokens_blue.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,IAAI,yBAGT,CAAC;AACF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tokens_blue.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/blue/css/tokens_blue.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,IAAI,yBA6tBT,CAAC;AAEF,eAAe,IAAI,CAAC"}