@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/tag/tag.js

@@ -1,143 +1,28 @@
-import { s as b } from "../../icon-DImqxDiW.js";
-import { css as g, html as u } from "lit";
-import { property as a, query as v } from "lit/decorators.js";
-import { nanoid as p } from "nanoid";
+import { s as p } from "../../icon-D22g8aWB.js";
+import { css as u, html as g } from "lit";
+import { property as o, query as b } from "lit/decorators.js";
+import { nanoid as f } from "nanoid";
 import { ifDefined as l } from "lit-html/directives/if-defined.js";
-import { Cre8FormElement as f } from "../cre8-form-element.js";
-const k = g`@import '../../design-tokens/core/scss/theming/component';
-
-/* ------------------------------------*\
-    #TAG
-\*------------------------------------ */
-
-:host {
-  display: inline-flex;
-}
-
-.cre8-c-tag {
-  @include cre8-typography-label-small;
-  display: flex;
-  align-items: center;
-  background-color: var(--cre8-color-bg-default);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  color: var(--cre8-color-content-default);
-  cursor: pointer;
-  gap: var(--cre8-spacing-8);
-  padding: var(--cre8-spacing-4) var(--cre8-spacing-16);
-  transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-  white-space: nowrap;
-}
-
-.cre8-c-tag--square {
-  border-radius: var(--cre8-border-radius-small);
-}
-
-.cre8-c-tag--round {
-  border-radius: var(--cre8-border-radius-round);
-}
-
-.cre8-c-tag--neutral {
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-bg-default-hover); 
-    border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  }
-}
-
-.cre8-c-tag--branded {
-  background-color: var(--cre8-color-bg-brand);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-bg-brand-hover); 
-  }
-}
-
-.cre8-c-tag--neutral-hybrid {
-  color: var(--cre8-color-content-brand);
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-bg-default-hover); 
-  }
-}
-
-.cre8-c-tag--neutral-selected,
-.cre8-c-tag--neutral-hybrid-selected {
-  background-color: var(--cre8-color-bg-brand-strong);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);
-  color: var(--cre8-color-content-knockout);
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-bg-brand-strong-hover);
-  }
-}
-
-.cre8-c-tag--branded-selected {
-  background-color: var(--cre8-color-bg-brand-xstrong);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);
-  color: var(--cre8-color-content-knockout);
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-bg-brand-xstrong-hover);
-  }
-}
-
-.cre8-c-tag:focus {
-  outline: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);
-  outline-offset: var(--cre8-border-width-focus);
-}
-
-.cre8-c-tag.cre8-c-tag--disabled,
-.cre8-c-tag.cre8-c-tag--disabled:hover,
-.cre8-c-tag.cre8-c-tag--disabled:focus {
-  background-color: var(--cre8-color-bg-disabled);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-disabled);
-  color: var(--cre8-color-content-disabled);
-  cursor: not-allowed;
-  outline: none;
-}
-
-.cre8-c-tag__input {
-  @include cre8-typography-body-small;
-  display: none;
-}
-
-.cre8-tag-text{
-  cursor: pointer;
-}
-
-.cre8-c-tag--disabled > .cre8-tag-text {
-  cursor: not-allowed;
-}
-
-cre8-icon {
-  display: flex;
-  align-items: center;
-}
-`;
-var y = Object.defineProperty, c = (n, e, r, t) => {
-  for (var i = void 0, s = n.length - 1, h; s >= 0; s--)
-    (h = n[s]) && (i = h(e, r, i) || i);
-  return i && y(e, r, i), i;
+import { Cre8FormElement as y } from "../cre8-form-element.js";
+const v = 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-tag{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);display:flex;align-items:center;background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);color:var(--cre8-color-content-default);cursor:pointer;gap:var(--cre8-spacing-8);padding:var(--cre8-spacing-4) var(--cre8-spacing-16);transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);white-space:nowrap}.cre8-c-tag--square{border-radius:var(--cre8-border-radius-small)}.cre8-c-tag--round{border-radius:var(--cre8-border-radius-round)}.cre8-c-tag--neutral:hover,.cre8-c-tag--neutral:focus{background-color:var(--cre8-color-bg-default-hover);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong)}.cre8-c-tag--branded{background-color:var(--cre8-color-bg-brand);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent)}.cre8-c-tag--branded:hover,.cre8-c-tag--branded:focus{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-tag--neutral-hybrid{color:var(--cre8-color-content-brand)}.cre8-c-tag--neutral-hybrid:hover,.cre8-c-tag--neutral-hybrid:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-tag--neutral-selected,.cre8-c-tag--neutral-hybrid-selected{background-color:var(--cre8-color-bg-brand-strong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);color:var(--cre8-color-content-knockout)}.cre8-c-tag--neutral-selected:hover,.cre8-c-tag--neutral-selected:focus,.cre8-c-tag--neutral-hybrid-selected:hover,.cre8-c-tag--neutral-hybrid-selected:focus{background-color:var(--cre8-color-bg-brand-strong-hover)}.cre8-c-tag--branded-selected{background-color:var(--cre8-color-bg-brand-xstrong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);color:var(--cre8-color-content-knockout)}.cre8-c-tag--branded-selected:hover,.cre8-c-tag--branded-selected:focus{background-color:var(--cre8-color-bg-brand-xstrong-hover)}.cre8-c-tag:focus{outline:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);outline-offset:var(--cre8-border-width-focus)}.cre8-c-tag.cre8-c-tag--disabled,.cre8-c-tag.cre8-c-tag--disabled:hover,.cre8-c-tag.cre8-c-tag--disabled:focus{background-color:var(--cre8-color-bg-disabled);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed;outline:none}.cre8-c-tag__input{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);display:none}.cre8-tag-text{cursor:pointer}.cre8-c-tag--disabled>.cre8-tag-text{cursor:not-allowed}cre8-icon{display:flex;align-items:center}`;
+var m = Object.defineProperty, i = (n, e, r, t) => {
+  for (var c = void 0, s = n.length - 1, h; s >= 0; s--)
+    (h = n[s]) && (c = h(e, r, c) || c);
+  return c && m(e, r, c), c;
 };
-const d = class d extends f {
+const d = class d extends y {
   constructor() {
     super(...arguments), this.variant = "neutral", this.shape = "square";
   }
   connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || p(), window.addEventListener("click", this._clickCheckHandler, !1), window.addEventListener("click", this._clickRadioHandler, !1), window.addEventListener("keydown", this._handleCheckKeyDown, !1), window.addEventListener("keydown", this.handleRadioKeyDown, !1);
+    super.connectedCallback(), this.fieldId = this.fieldId || f(), window.addEventListener("click", this._clickCheckHandler, !1), window.addEventListener("click", this._clickRadioHandler, !1), window.addEventListener("keydown", this._handleCheckKeyDown, !1), window.addEventListener("keydown", this.handleRadioKeyDown, !1);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), window.removeEventListener("click", this._clickCheckHandler, !1), window.removeEventListener("click", this._clickRadioHandler, !1), window.removeEventListener("keydown", this._handleCheckKeyDown, !1), window.removeEventListener("keydown", this.handleRadioKeyDown, !1);
   }
   renderCheckboxIcon() {
-    return this.type === "checkbox" && this.isSelected ? u`
-    <cre8-icon svg="${b}" class="cre8-tag-icon" aria-hidden="true"></cre8-icon>
+    return this.type === "checkbox" && this.isSelected ? g`
+    <cre8-icon svg="${p}" class="cre8-tag-icon" aria-hidden="true"></cre8-icon>
      ` : null;
   }
   _clickCheckHandler() {
@@ -150,7 +35,7 @@ const d = class d extends f {
   * Reset the radio tag field
   */
   resetField() {
-    this.internals.setFormValue(null);
+    this._internals.setFormValue(null);
   }
   /**
   * Reset the radio field tags tab indeces
@@ -182,7 +67,7 @@ const d = class d extends f {
   _clickRadioHandler() {
     this._removeChecked(), this.isSelected = !this.isSelected;
     const e = this.shadowRoot?.querySelector(".cre8-c-tag");
-    e && e.setAttribute("tabindex", "0"), this.isSelected ? this.internals.setFormValue(this.value || "on") : this.internals.setFormValue(null);
+    e && e.setAttribute("tabindex", "0"), this.isSelected ? this._internals.setFormValue(this.value || "on") : this._internals.setFormValue(null);
   }
   _updateSibling(e, r, t) {
     e.preventDefault(), this._removeChecked(), t.focus(), t.setAttribute("tabindex", "0"), r.setAttribute("isSelected", "");
@@ -240,7 +125,7 @@ const d = class d extends f {
       [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,
       "cre8-c-tag--disabled": this.isDisabled
     }), r = this.isSelected === !0 || this.initialSelected === !0;
-    return u` 
+    return g` 
         <div role="${l(this._getRole())}">
             <div role="${l(this.type)}" aria-checked="${r}" class="${e}"
                 aria-disabled="${l(this.isDisabled)}"
@@ -267,34 +152,34 @@ const d = class d extends f {
   `;
   }
 };
-d.styles = [k];
-let o = d;
-c([
-  a()
-], o.prototype, "text");
-c([
-  a()
-], o.prototype, "type");
-c([
-  a()
-], o.prototype, "variant");
-c([
-  a()
-], o.prototype, "shape");
-c([
-  a({ type: Boolean })
-], o.prototype, "isDisabled");
-c([
-  a({ type: Boolean })
-], o.prototype, "isSelected");
-c([
-  v("input")
-], o.prototype, "field");
-c([
-  a()
-], o.prototype, "fieldId");
-customElements.get("cre8-tag") === void 0 && customElements.define("cre8-tag", o);
+d.styles = [v];
+let a = d;
+i([
+  o()
+], a.prototype, "text");
+i([
+  o()
+], a.prototype, "type");
+i([
+  o()
+], a.prototype, "variant");
+i([
+  o()
+], a.prototype, "shape");
+i([
+  o({ type: Boolean })
+], a.prototype, "isDisabled");
+i([
+  o({ type: Boolean })
+], a.prototype, "isSelected");
+i([
+  b("input")
+], a.prototype, "field");
+i([
+  o()
+], a.prototype, "fieldId");
+customElements.get("cre8-tag") === void 0 && customElements.define("cre8-tag", a);
 export {
-  o as Cre8Tag,
-  o as default
+  a as Cre8Tag,
+  a as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../components/tag/tag.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmHX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../components/tag/tag.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAirK,CAAC;AAC9rK,eAAe,MAAM,CAAC"}

package/lib/components/tag-list/tag-list.js

@@ -1,55 +1,24 @@
-import { css as d, html as g } from "lit";
-import { property as o } from "lit/decorators.js";
-import { nanoid as m } from "nanoid";
-import { Cre8Element as p } from "../cre8-element.js";
-const f = d`@import '../../design-tokens/core/scss/theming/component';
-
-/** 
- * 1) Fieldset used for tags
- */
-.cre8-c-tag-list {
-  border: none;
-  padding: 0;
-  margin: 0;
-  gap: var(--cre8-spacing-16);
-}
-
-.cre8-c-tag-list__legend {
-  margin-bottom: var(--cre8-spacing-16);
-}
-
-/**
- * Slotted tag items
- */
-::slotted(cre8-tag) {
-  margin-bottom: var(--cre8-spacing-16);
-  margin-right: var(--cre8-spacing-8);
-}
-
-.cre8-c-tag-list__list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-}
-`;
-var _ = Object.defineProperty, c = (l, s, a, v) => {
-  for (var e = void 0, i = l.length - 1, n; i >= 0; i--)
-    (n = l[i]) && (e = n(s, a, e) || e);
-  return e && _(s, a, e), e;
+import { css as p, html as m } from "lit";
+import { property as n } from "lit/decorators.js";
+import { nanoid as h } from "nanoid";
+import { Cre8Element as c } from "../cre8-element.js";
+const g = 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-tag-list{border:none;padding:0;margin:0;gap:var(--cre8-spacing-16)}.cre8-c-tag-list__legend{margin-bottom:var(--cre8-spacing-16)}::slotted(cre8-tag){margin-bottom:var(--cre8-spacing-16);margin-right:var(--cre8-spacing-8)}.cre8-c-tag-list__list{list-style-type:none;margin:0;padding:0;display:flex;flex-wrap:wrap}`;
+var f = Object.defineProperty, o = (s, i, l, x) => {
+  for (var e = void 0, r = s.length - 1, d; r >= 0; r--)
+    (d = s[r]) && (e = d(i, l, e) || e);
+  return e && f(i, l, e), e;
 };
-const r = class r extends p {
+const a = class a extends c {
   firstUpdated() {
     this._initializeAria();
   }
   _initializeAria() {
-    this.fieldId = this.fieldId || m();
+    this.fieldId = this.fieldId || h();
   }
   render() {
-    const s = this.componentClassNames("cre8-c-tag-list", {});
-    return g`
-      <fieldset class="${s}">
+    const i = this.componentClassNames("cre8-c-tag-list", {});
+    return m`
+      <fieldset class="${i}">
         <legend class="cre8-c-tag-list__legend">${this.label}</legend>
         <div class="cre8-c-tag-list__list" role="list">   
           <slot></slot>
@@ -58,13 +27,13 @@ const r = class r extends p {
       `;
   }
 };
-r.styles = [f];
-let t = r;
-c([
-  o()
+a.styles = [g];
+let t = a;
+o([
+  n()
 ], t.prototype, "label");
-c([
-  o()
+o([
+  n()
 ], t.prototype, "fieldId");
 customElements.get("cre8-tag-list") === void 0 && customElements.define("cre8-tag-list", t);
 export {

package/lib/components/tag-list/tag-list.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-list.styles.d.ts","sourceRoot":"","sources":["../../../components/tag-list/tag-list.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+BX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tag-list.styles.d.ts","sourceRoot":"","sources":["../../../components/tag-list/tag-list.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAglE,CAAC;AAC7lE,eAAe,MAAM,CAAC"}

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

@@ -1,46 +1,13 @@
-import { css as m, html as p } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Cre8Element as v } from "../cre8-element.js";
-const d = m`@import '../../design-tokens/core/scss/theming/component';
-/*------------------------------------*\
- #TERTIARY-NAV
-\*------------------------------------*/ 
-
-:host {
-  display: flex;
-}
-
-/**
- * Tertiary nav
- */
-.cre8-c-tertiary-nav {
-  width: 100%;
-  max-width: calc(8px * 30);
-}
-
-/**
- * Tertiary nav full width
- */
-.cre8-c-tertiary-nav--full-width {
-  max-width: none;
-}
-
-/**
- * Tertiary nav list
- */
-.cre8-c-tertiary-nav__list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-`;
-var f = Object.defineProperty, c = (i, r, n, y) => {
-  for (var t = void 0, a = i.length - 1, l; a >= 0; a--)
-    (l = i[a]) && (t = l(r, n, t) || t);
-  return t && f(r, n, t), t;
+import { css as h, html as m } from "lit";
+import { property as d } from "lit/decorators.js";
+import { Cre8Element as p } from "../cre8-element.js";
+const c = h`*,::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:flex}.cre8-c-tertiary-nav{width:100%;max-width:15rem}.cre8-c-tertiary-nav--full-width{max-width:none}.cre8-c-tertiary-nav__list{margin:0;padding:0;list-style:none}`;
+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 s = class s extends v {
+const a = class a extends p {
   constructor() {
     super(...arguments), this.navAriaLabel = "tertiary";
   }
@@ -48,7 +15,7 @@ const s = class s extends v {
     const r = this.componentClassNames("cre8-c-tertiary-nav", {
       "cre8-c-tertiary-nav--full-width": this.fullWidth
     });
-    return p`
+    return m`
       <nav aria-label="${this.navAriaLabel}" role="navigation" class="${r}">
         <ul role="list" class="cre8-c-tertiary-nav__list">
           <slot></slot>
@@ -57,16 +24,16 @@ const s = class s extends v {
     `;
   }
 };
-s.styles = [d];
-let e = s;
-c([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "fullWidth");
-c([
-  o()
-], e.prototype, "navAriaLabel");
-customElements.get("cre8-tertiary-nav") === void 0 && customElements.define("cre8-tertiary-nav", e);
+a.styles = [c];
+let t = a;
+o([
+  d({ type: Boolean, reflect: !0 })
+], t.prototype, "fullWidth");
+o([
+  d()
+], t.prototype, "navAriaLabel");
+customElements.get("cre8-tertiary-nav") === void 0 && customElements.define("cre8-tertiary-nav", t);
 export {
-  e as Cre8TertiaryNav,
-  e as default
+  t as Cre8TertiaryNav,
+  t as default
 };

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

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

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

@@ -1,85 +1,35 @@
-import { css as f, html as m } from "lit";
-import { ifDefined as l } from "lit-html/directives/if-defined.js";
+import { css as m, html as f } from "lit";
+import { ifDefined as c } from "lit-html/directives/if-defined.js";
 import { property as d } from "lit/decorators.js";
-import { Cre8Element as v } from "../cre8-element.js";
-const p = f`@import '../../design-tokens/core/scss/theming/component';
-/*------------------------------------*\
- #TERTIARY-NAV-ITEM
-\*------------------------------------*/ 
-
-:host {
-  display: contents;
-}
-
-/**
- * Tertiary nav item link
- */
-.cre8-c-tertiary-nav-item__link {
-  @include cre8-typography-body-default();
-  display: flex;
-  align-items: center;
-  gap: calc(8px * 1); 
-  padding: calc(8px * 1) calc(8px * 1) calc(8px * 1) calc(8px * 2);
-  color: var(--cre8-color-content-brand-strong);
-  background-color: var(--cre8-color-bg-default);
-  border-block-end: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);
-  text-decoration: none;
-  transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-  width: 100%;
-
-  /**
-   * Tertiary nav item link hover & focus state
-   */
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-bg-subtle);
-  }
-
-  /**
-   * Tertiary nav item link focus visible state
-   */
-  &:focus-visible {
-    @include focus;
-  }
-
-  /**
-   * Tertiary nav item link active/current state
-   */
-  &:active,
-  .cre8-is-current & {
-    color: var(--cre8-color-content-default);
-    background-color: var(--cre8-color-bg-subtle);
-  }
-}
-
-`;
-var y = Object.defineProperty, u = (i, r, a, s) => {
-  for (var e = void 0, o = i.length - 1, n; o >= 0; o--)
-    (n = i[o]) && (e = n(r, a, e) || e);
-  return e && y(r, a, e), e;
+import { Cre8Element as p } 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}:host{display:contents}.cre8-c-tertiary-nav-item__link{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);display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.5rem 0.5rem 1rem;color:var(--cre8-color-content-brand-strong);background-color:var(--cre8-color-bg-default);border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);width:100%}.cre8-c-tertiary-nav-item__link:hover,.cre8-c-tertiary-nav-item__link:focus{background-color:var(--cre8-color-bg-subtle)}.cre8-c-tertiary-nav-item__link:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-tertiary-nav-item__link:active,.cre8-is-current .cre8-c-tertiary-nav-item__link{color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-subtle)}`;
+var u = Object.defineProperty, h = (s, r, a, n) => {
+  for (var e = void 0, i = s.length - 1, l; i >= 0; i--)
+    (l = s[i]) && (e = l(r, a, e) || e);
+  return e && u(r, a, e), e;
 };
-const c = class c extends v {
+const o = class o extends p {
   /**
    * Handle on click
    * 1. On click, remove all isCurrent properties from all tertiary-nav items
    * 2. Add isCurrent to the item clicked
    */
   _handleOnClick() {
-    this.closest("cre8-tertiary-nav").shadowRoot.querySelector("slot").assignedElements({ flatten: !1 }).forEach((s) => {
-      s.isCurrent = !1;
+    this.closest("cre8-tertiary-nav").shadowRoot.querySelector("slot").assignedElements({ flatten: !1 }).forEach((n) => {
+      n.isCurrent = !1;
     }), this.isCurrent = !0;
   }
   render() {
     const r = this.componentClassNames("cre8-c-tertiary-nav-item", {
       "cre8-is-current": this.isCurrent
     });
-    return m`
+    return f`
       <li role="listitem" class="${r}">
         <a
           class="cre8-c-tertiary-nav-item__link"
-          aria-current=${l(this.isCurrent ? "page" : void 0)}
+          aria-current=${c(this.isCurrent ? "page" : void 0)}
           @click=${this._handleOnClick}
-          href=${l(this.href)}
+          href=${c(this.href)}
         >
           <slot></slot>
         </a>
@@ -87,12 +37,12 @@ const c = class c extends v {
     `;
   }
 };
-c.styles = [p];
-let t = c;
-u([
+o.styles = [y];
+let t = o;
+h([
   d()
 ], t.prototype, "href");
-u([
+h([
   d({ type: Boolean, reflect: !0 })
 ], t.prototype, "isCurrent");
 customElements.get("cre8-tertiary-nav-item") === void 0 && customElements.define("cre8-tertiary-nav-item", t);

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

@@ -1 +1 @@
-{"version":3,"file":"tertiary-nav-item.styles.d.ts","sourceRoot":"","sources":["../../../components/tertiary-nav-item/tertiary-nav-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAkDX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tertiary-nav-item.styles.d.ts","sourceRoot":"","sources":["../../../components/tertiary-nav-item/tertiary-nav-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAu/F,CAAC;AACpgG,eAAe,MAAM,CAAC"}