@tmorrow/cre8-wc 1.1.2 → 1.1.3

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

@@ -1,43 +1,50 @@
-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;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const n = class n extends c {
-  constructor() {
-    super(...arguments), this.navAriaLabel = "main";
-  }
-  render() {
-    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 m`
-      <nav aria-label="${this.navAriaLabel}" class="${t}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './primary-nav.styles.js';
+/**
+ * @slot - The primary navigation items
+ */
+export class Cre8PrimaryNav extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * aria-label attribute to designate at name for the nav. Can be override by user
+         */
+        this.navAriaLabel = 'main';
+    }
+    render() {
+        const componentClassNames = 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 === true,
+        });
+        return html `
+      <nav aria-label="${this.navAriaLabel}" class="${componentClassNames}">
         <ul class="cre8-c-primary-nav__list">
           <slot></slot>
         </ul>
       </nav>
     `;
-  }
-};
-n.styles = [h];
-let r = n;
-s([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "inverted");
-s([
-  a()
-], r.prototype, "behavior");
-s([
-  a()
-], r.prototype, "navAriaLabel");
-customElements.get("cre8-primary-nav") === void 0 && customElements.define("cre8-primary-nav", r);
-export {
-  r as Cre8PrimaryNav,
-  r as default
-};
+    }
+}
+Cre8PrimaryNav.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8PrimaryNav.prototype, "inverted", void 0);
+__decorate([
+    property()
+], Cre8PrimaryNav.prototype, "behavior", void 0);
+__decorate([
+    property()
+], Cre8PrimaryNav.prototype, "navAriaLabel", void 0);
+if (customElements.get('cre8-primary-nav') === undefined) {
+    customElements.define('cre8-primary-nav', Cre8PrimaryNav);
+}
+export default Cre8PrimaryNav;
+//# sourceMappingURL=primary-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../../components/primary-nav/primary-nav.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAA/C;;QAqBE;;WAEG;QAEC,iBAAY,GAAW,MAAM,CAAC;IAgBpC,CAAC;IAdC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE;YACvE,kCAAkC,EAAE,IAAI,CAAC,QAAQ,KAAK,cAAc;YACpE,8BAA8B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SACzD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;yBACQ,IAAI,CAAC,YAAY,YAAY,mBAAmB;;;;;KAKpE,CAAC;IACJ,CAAC;;AAvCQ,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACpB;AAWnB;IADH,QAAQ,EAAE;gDACmB;AAM1B;IADH,QAAQ,EAAE;oDACuB;AAkBpC,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC9D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './primary-nav.styles.js';\n\n/**\n * @slot - The primary navigation items\n */\nexport class Cre8PrimaryNav extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Inverted variant\n   * 1) Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n  /**\n   * Behavior variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**side-by-side** keeps the primary nav item always in a horizontal pattern</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      behavior?: 'side-by-side';\n\n  /**\n   * aria-label attribute to designate at name for the nav. Can be override by user\n   */\n  @property()\n      navAriaLabel: string = 'main';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-primary-nav', {\n          'cre8-c-primary-nav--side-by-side': this.behavior === 'side-by-side',\n          'cre8-c-primary-nav--inverted': this.inverted === true,\n      });\n\n      return html`\n      <nav aria-label=\"${this.navAriaLabel}\" class=\"${componentClassNames}\">\n        <ul class=\"cre8-c-primary-nav__list\">\n          <slot></slot>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nif (customElements.get('cre8-primary-nav') === undefined) {\n    customElements.define('cre8-primary-nav', Cre8PrimaryNav);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-primary-nav': Cre8PrimaryNav;\n  }\n}\n\nexport default Cre8PrimaryNav;\n"]}

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.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}}`;
+export default styles;
+//# sourceMappingURL=primary-nav.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"primary-nav.styles.js","sourceRoot":"","sources":["../../../components/primary-nav/primary-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,ymEAAymE,CAAC;AAC5nE,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.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}}`;\nexport default styles;\n"]}

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

@@ -1,104 +1,141 @@
-import { css as h, html as a } from "lit";
-import { ifDefined as p } from "lit-html/directives/if-defined.js";
-import { property as o, state as v } from "lit/decorators.js";
-import { Cre8Element as f } from "../cre8-element.js";
-const y = 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}.cre8-c-primary-nav__item{border-bottom-width:var(--cre8-border-width-default);border-bottom-style:var(--cre8-border-style-default);border-bottom-color:var(--cre8-color-border-subtle)}@media all and (min-width: 960px){.cre8-c-primary-nav__item{border-bottom:none}}.cre8-c-primary-nav__item-content{display:flex;align-items:baseline}.cre8-c-primary-nav__link{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);display:flex;align-items:center;appearance:none;background:rgba(0,0,0,0);border:none;white-space:nowrap;width:100%;margin:0;padding:1rem 2rem;color:var(--cre8-primary-nav-link-color, var(--cre8-color-header-menu-content-default));text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);cursor:pointer}.cre8-c-primary-nav__link:hover,.cre8-c-primary-nav__link:focus-visible{background:var(--cre8-color-header-menu-bg-hover);color:var(--cre8-color-header-menu-content-hover)}.cre8-c-primary-nav__link:active{border-color:var(--cre8-color-header-menu-border-pressed);background:var(--cre8-color-header-menu-bg-pressed);color:var(--cre8-color-header-menu-content-pressed)}.cre8-c-primary-nav__item.cre8-is-active .cre8-c-primary-nav__link{background:var(--cre8-color-bg-brand);color:var(--cre8-color-header-menu-content-hover)}@media all and (min-width: 960px){.cre8-c-primary-nav__link{padding:1rem 0.5rem}}@media all and (min-width: 960px){.cre8-c-primary-nav__link{padding:1rem;border-bottom:none}}cre8-icon-legacy{--cre8-icon-height: 0.75rem;--cre8-icon-width: 0.75rem;margin-left:auto;transition:transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-primary-nav__item.cre8-is-active cre8-icon-legacy{transform:rotate(-180deg)}@media all and (min-width: 960px){cre8-icon-legacy{margin-left:0.5rem}}.cre8-c-primary-nav__item-panel{visibility:hidden;width:100%;height:0;overflow:hidden;background:rgba(0,0,0,0);opacity:0;transition:all 0s var(--cre8-anim-ease);z-index:-1}@media all and (min-width: 960px){.cre8-c-primary-nav__item-panel{position:absolute;top:100%;left:0;height:auto;box-shadow:var(--cre8-theme-box-shadow-md)}}.cre8-c-primary-nav__item.cre8-is-active .cre8-c-primary-nav__item-panel{display:block;visibility:visible;height:auto;padding-top:2rem;padding-bottom:2rem;background:var(--cre8-color-bg-default);opacity:1;z-index:1;transition:opacity var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-primary-nav__item--megamenu .cre8-c-primary-nav__item-panel-inner{max-width:70rem;padding-right:2rem;padding-left:2rem;margin:0 auto}.cre8-c-primary-nav__item-before{margin-right:0.5rem}.cre8-c-primary-nav__item-after{margin-left:0.5rem}`;
-var u = Object.defineProperty, n = (d, e, r, c) => {
-  for (var i = void 0, s = d.length - 1, m; s >= 0; s--)
-    (m = d[s]) && (i = m(e, r, i) || i);
-  return i && u(e, r, i), i;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const l = class l extends f {
-  /**
-   * Initialize functions
-   */
-  constructor() {
-    super(), this.text = "Nav item", this.href = "#", this.iconName = "caret-down", this._handleOnClickOutside = this._handleOnClickOutside.bind(this), this._clickHandler = this._clickHandler.bind(this);
-  }
-  /**
-   * Connected Callback lifecycle
-   */
-  connectedCallback() {
-    this.setAttribute("role", "listitem"), super.connectedCallback(), document.addEventListener("mousedown", this._handleOnClickOutside, !1);
-  }
-  /**
-   * Disconnected callback lifecycle
-   * 1) Remove window resize event listener
-   */
-  disconnectedCallback() {
-    document.removeEventListener("mousedown", this._handleOnClickOutside, !1), super.disconnectedCallback();
-  }
-  /**
-   * Handle click outside the component
-   * 1) Close the show hide panel on click outside
-   * 2) If the nav is already closed then we don't care about outside clicks and we
-   * can bail early
-   * 3) By the time a user clicks on the page the shadowRoot will almost certainly be
-   * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
-   * undefined. To work around that we'll check that we have a shadowRoot (and a
-   * rendered .host) element here to appease the TypeScript compiler. This should never
-   * actually be shown or run for a human end user.
-   * 4) Check to see if we clicked inside the active navigation item
-   * 5) If the navigation is active and we've clicked outside of the nav then it should
-   * be closed.
-   */
-  _handleOnClickOutside(e) {
-    if (!this.isActive)
-      return;
-    if (!this.shadowRoot?.host)
-      throw Error("Could not determine navigation context during click handler");
-    const r = e.composedPath().includes(this.shadowRoot.host);
-    this.isActive && !r && (this.isActive = !1);
-  }
-  /**
-   * Toggle active state of primary nav item
-   * 1) Remove isActive state from all sibling elements
-   * 2) Toggle active state of element selected
-   */
-  _clickHandler(e) {
-    e.preventDefault(), this.parentNode && this.parentNode.querySelectorAll("cre8-primary-nav-item").forEach((c) => {
-      c !== this && (c.isActive = !1);
-    }), this.isActive = !this.isActive;
-  }
-  _closePanel() {
-    this.isActive = !1;
-  }
-  _handleOnKeyDown(e) {
-    if (e.key === "Escape" && this.isActive === !0) {
-      this._closePanel();
-      const r = this.shadowRoot?.querySelector(
-        ".cre8-c-primary-nav__link"
-      );
-      r && setTimeout(() => {
-        r.focus();
-      }, 1);
+import { html, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property, state } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './primary-nav-item.styles.js';
+/**
+ * @slot - The label for the navigation item
+ */
+export class Cre8PrimaryNavItem extends Cre8Element {
+    /**
+     * Initialize functions
+     */
+    constructor() {
+        super();
+        /**
+         * Primary nav item text
+         */
+        this.text = 'Nav item';
+        /**
+         * Primary nav item href
+         */
+        this.href = '#';
+        /**
+         * Icon name
+         */
+        this.iconName = 'caret-down';
+        this._handleOnClickOutside = this._handleOnClickOutside.bind(this);
+        this._clickHandler = this._clickHandler.bind(this);
     }
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-primary-nav__item", {
-      "cre8-is-active": this.isActive === !0,
-      "cre8-c-primary-nav__item--megamenu": this.megaMenu === !0
-    });
-    return this.megaMenu ? a`
-            <div class="${e}" @keydown=${this._handleOnKeyDown}>
+    /**
+     * Connected Callback lifecycle
+     */
+    connectedCallback() {
+        this.setAttribute('role', 'listitem');
+        super.connectedCallback();
+        document.addEventListener('mousedown', this._handleOnClickOutside, false);
+    }
+    /**
+     * Disconnected callback lifecycle
+     * 1) Remove window resize event listener
+     */
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this._handleOnClickOutside, false);
+        super.disconnectedCallback();
+    }
+    /**
+     * Handle click outside the component
+     * 1) Close the show hide panel on click outside
+     * 2) If the nav is already closed then we don't care about outside clicks and we
+     * can bail early
+     * 3) By the time a user clicks on the page the shadowRoot will almost certainly be
+     * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
+     * undefined. To work around that we'll check that we have a shadowRoot (and a
+     * rendered .host) element here to appease the TypeScript compiler. This should never
+     * actually be shown or run for a human end user.
+     * 4) Check to see if we clicked inside the active navigation item
+     * 5) If the navigation is active and we've clicked outside of the nav then it should
+     * be closed.
+     */
+    _handleOnClickOutside(event) {
+        /* 2 */
+        if (!this.isActive) {
+            return;
+        }
+        /* 3 */
+        if (!this.shadowRoot?.host) {
+            throw Error('Could not determine navigation context during click handler');
+        }
+        /* 4 */
+        const didClickInside = event.composedPath().includes(this.shadowRoot.host);
+        /* 5 */
+        if (this.isActive && !didClickInside) {
+            this.isActive = false;
+        }
+    }
+    /**
+     * Toggle active state of primary nav item
+     * 1) Remove isActive state from all sibling elements
+     * 2) Toggle active state of element selected
+     */
+    _clickHandler(e) {
+        e.preventDefault();
+        if (this.parentNode) {
+            const navItems = this.parentNode.querySelectorAll('cre8-primary-nav-item');
+            navItems.forEach((element) => {
+                if (element !== this) {
+                    element.isActive = false; /* 1 */
+                }
+            });
+        }
+        this.isActive = !this.isActive; /* 2 */
+    }
+    _closePanel() {
+        this.isActive = false;
+    }
+    _handleOnKeyDown(e) {
+        if (e.key === 'Escape' && this.isActive === true) {
+            this._closePanel();
+            const navLink = this.shadowRoot?.querySelector('.cre8-c-primary-nav__link');
+            if (navLink) {
+                setTimeout(() => {
+                    navLink.focus();
+                }, 1);
+            }
+        }
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-primary-nav__item', {
+            'cre8-is-active': this.isActive === true,
+            'cre8-c-primary-nav__item--megamenu': this.megaMenu === true,
+        });
+        if (this.megaMenu) {
+            return html `
+            <div class="${componentClassName}" @keydown=${this._handleOnKeyDown}>
                 <div class="cre8-c-primary-nav__item-content">
                     <button
                         class="cre8-c-primary-nav__link"
                         @click=${this._clickHandler}
-                        aria-expanded=${this.isActive === !0}
+                        aria-expanded=${this.isActive === true}
                     >
-                        ${this.slotNotEmpty("itemBefore") && a`
+                        ${this.slotNotEmpty('itemBefore') && html `
                             <div class="cre8-c-primary-nav__item-before">
                                 <slot name="itemBefore"></slot>
                             </div>
                         `}
                         ${this.text}
-                        ${this.slotNotEmpty("itemAfter") && a`
+                        ${this.slotNotEmpty('itemAfter') && html `
                             <div class="cre8-c-primary-nav__item-after">
                                 <slot name="itemAfter"></slot>
                             </div>
                         `}
-                        <cre8-icon-legacy aria-hidden="true" name="${p(this.iconName)}"></cre8-icon-legacy>
+                        <cre8-icon-legacy aria-hidden="true" name="${ifDefined(this.iconName)}"></cre8-icon-legacy>
                     </button>
                 </div>
                 <div class="cre8-c-primary-nav__item-panel">
@@ -107,17 +144,19 @@ const l = class l extends f {
                     </div>
                 </div>
             </div>
-        ` : a`
-            <div class="${e}">
+        `;
+        }
+        return html `
+            <div class="${componentClassName}">
                 <div class="cre8-c-primary-nav__item-content">
                     <a class="cre8-c-primary-nav__link" href="${this.href}">
-                        ${this.slotNotEmpty("itemBefore") && a`
+                        ${this.slotNotEmpty('itemBefore') && html `
                             <div class="cre8-c-primary-nav__item-before">
                                 <slot name="itemBefore"></slot>
                             </div>
                         `}
                         ${this.text}
-                        ${this.slotNotEmpty("itemAfter") && a`
+                        ${this.slotNotEmpty('itemAfter') && html `
                             <div class="cre8-c-primary-nav__item-after">
                                 <slot name="itemAfter"></slot>
                             </div>
@@ -126,27 +165,26 @@ const l = class l extends f {
                 </div>
             </div>
         `;
-  }
-};
-l.styles = [y];
-let t = l;
-n([
-  o()
-], t.prototype, "text");
-n([
-  o()
-], t.prototype, "href");
-n([
-  o()
-], t.prototype, "iconName");
-n([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "megaMenu");
-n([
-  v()
-], t.prototype, "isActive");
-customElements.get("cre8-primary-nav-item") === void 0 && customElements.define("cre8-primary-nav-item", t);
-export {
-  t as Cre8PrimaryNavItem,
-  t as default
-};
+    }
+}
+Cre8PrimaryNavItem.styles = [styles];
+__decorate([
+    property()
+], Cre8PrimaryNavItem.prototype, "text", void 0);
+__decorate([
+    property()
+], Cre8PrimaryNavItem.prototype, "href", void 0);
+__decorate([
+    property()
+], Cre8PrimaryNavItem.prototype, "iconName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8PrimaryNavItem.prototype, "megaMenu", void 0);
+__decorate([
+    state()
+], Cre8PrimaryNavItem.prototype, "isActive", void 0);
+if (customElements.get('cre8-primary-nav-item') === undefined) {
+    customElements.define('cre8-primary-nav-item', Cre8PrimaryNavItem);
+}
+export default Cre8PrimaryNavItem;
+//# sourceMappingURL=primary-nav-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"primary-nav-item.js","sourceRoot":"","sources":["../../../components/primary-nav-item/primary-nav-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './primary-nav-item.styles.js';\n\n    /**\n     * @slot - The label for the navigation item\n     */\nexport class Cre8PrimaryNavItem extends Cre8Element {\n    /**\n     * Primary nav item text\n     */\n    @property()\n        text = 'Nav item';\n\n    /**\n     * Primary nav item href\n     */\n    @property()\n        href = '#';\n\n    /**\n     * Icon name\n     */\n    @property()\n        iconName?: string = 'caret-down';\n\n    /**\n     * Append to the class name. Used for passing in utility classes\n     */\n    @property({ type: Boolean, reflect: true })\n        megaMenu?: boolean;\n\n    /**\n     * Append to the class name. Used for passing in utility classes\n     */\n    @state()\n        isActive?: boolean;\n\n    static styles = [styles];\n\n    /**\n     * Initialize functions\n     */\n    constructor() {\n        super();\n        this._handleOnClickOutside = this._handleOnClickOutside.bind(this);\n        this._clickHandler = this._clickHandler.bind(this);\n    }\n\n    /**\n     * Connected Callback lifecycle\n     */\n    connectedCallback() {\n        this.setAttribute('role', 'listitem');\n        super.connectedCallback();\n\n        document.addEventListener('mousedown', this._handleOnClickOutside, false);\n    }\n\n    /**\n     * Disconnected callback lifecycle\n     * 1) Remove window resize event listener\n     */\n    disconnectedCallback() {\n        document.removeEventListener('mousedown', this._handleOnClickOutside, false);\n        super.disconnectedCallback();\n    }\n\n    /**\n     * Handle click outside the component\n     * 1) Close the show hide panel on click outside\n     * 2) If the nav is already closed then we don't care about outside clicks and we\n     * can bail early\n     * 3) By the time a user clicks on the page the shadowRoot will almost certainly be\n     * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n     * undefined. To work around that we'll check that we have a shadowRoot (and a\n     * rendered .host) element here to appease the TypeScript compiler. This should never\n     * actually be shown or run for a human end user.\n     * 4) Check to see if we clicked inside the active navigation item\n     * 5) If the navigation is active and we've clicked outside of the nav then it should\n     * be closed.\n     */\n    private _handleOnClickOutside(event: MouseEvent) {\n        /* 2 */\n        if (!this.isActive) {\n            return;\n        }\n\n        /* 3 */\n        if (!this.shadowRoot?.host) {\n            throw Error('Could not determine navigation context during click handler');\n        }\n\n        /* 4 */\n        const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n\n        /* 5 */\n        if (this.isActive && !didClickInside) {\n            this.isActive = false;\n        }\n    }\n\n    /**\n     * Toggle active state of primary nav item\n     * 1) Remove isActive state from all sibling elements\n     * 2) Toggle active state of element selected\n     */\n    private _clickHandler(e: MouseEvent) {\n        e.preventDefault();\n        if (this.parentNode) {\n            const navItems = this.parentNode.querySelectorAll('cre8-primary-nav-item');\n            navItems.forEach((element: Cre8PrimaryNavItem) => {\n                if (element !== this) {\n                    element.isActive = false; /* 1 */\n                }\n            });\n        }\n        this.isActive = !this.isActive; /* 2 */\n    }\n\n    private _closePanel() {\n        this.isActive = false;\n    }\n\n    private _handleOnKeyDown(e: KeyboardEvent) {\n        if (e.key === 'Escape' && this.isActive === true) {\n            this._closePanel();\n            const navLink = this.shadowRoot?.querySelector<HTMLButtonElement | HTMLAnchorElement>(\n                '.cre8-c-primary-nav__link'\n            );\n            if (navLink) {\n                setTimeout(() => {\n                    navLink.focus();\n                }, 1);\n            }\n        }\n    }\n\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-primary-nav__item', {\n            'cre8-is-active': this.isActive === true,\n            'cre8-c-primary-nav__item--megamenu': this.megaMenu === true,\n        });\n\n        if (this.megaMenu) {\n            return html`\n            <div class=\"${componentClassName}\" @keydown=${this._handleOnKeyDown}>\n                <div class=\"cre8-c-primary-nav__item-content\">\n                    <button\n                        class=\"cre8-c-primary-nav__link\"\n                        @click=${this._clickHandler}\n                        aria-expanded=${this.isActive === true}\n                    >\n                        ${this.slotNotEmpty('itemBefore') && html`\n                            <div class=\"cre8-c-primary-nav__item-before\">\n                                <slot name=\"itemBefore\"></slot>\n                            </div>\n                        `}\n                        ${this.text}\n                        ${this.slotNotEmpty('itemAfter') && html`\n                            <div class=\"cre8-c-primary-nav__item-after\">\n                                <slot name=\"itemAfter\"></slot>\n                            </div>\n                        `}\n                        <cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>\n                    </button>\n                </div>\n                <div class=\"cre8-c-primary-nav__item-panel\">\n                    <div class=\"cre8-c-primary-nav__item-panel-inner\">\n                        <slot></slot>\n                    </div>\n                </div>\n            </div>\n        `;\n        }\n        return html`\n            <div class=\"${componentClassName}\">\n                <div class=\"cre8-c-primary-nav__item-content\">\n                    <a class=\"cre8-c-primary-nav__link\" href=\"${this.href}\">\n                        ${this.slotNotEmpty('itemBefore') && html`\n                            <div class=\"cre8-c-primary-nav__item-before\">\n                                <slot name=\"itemBefore\"></slot>\n                            </div>\n                        `}\n                        ${this.text}\n                        ${this.slotNotEmpty('itemAfter') && html`\n                            <div class=\"cre8-c-primary-nav__item-after\">\n                                <slot name=\"itemAfter\"></slot>\n                            </div>\n                        `}\n                    </a>\n                </div>\n            </div>\n        `;\n    }\n}\n\nif (customElements.get('cre8-primary-nav-item') === undefined) {\n    customElements.define('cre8-primary-nav-item', Cre8PrimaryNavItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-primary-nav-item': Cre8PrimaryNavItem;\n    }\n}\n\nexport default Cre8PrimaryNavItem;\n"]}

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-primary-nav__item{border-bottom-width:var(--cre8-border-width-default);border-bottom-style:var(--cre8-border-style-default);border-bottom-color:var(--cre8-color-border-subtle)}@media all and (min-width: 960px){.cre8-c-primary-nav__item{border-bottom:none}}.cre8-c-primary-nav__item-content{display:flex;align-items:baseline}.cre8-c-primary-nav__link{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);display:flex;align-items:center;appearance:none;background:rgba(0,0,0,0);border:none;white-space:nowrap;width:100%;margin:0;padding:1rem 2rem;color:var(--cre8-primary-nav-link-color, var(--cre8-color-header-menu-content-default));text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);cursor:pointer}.cre8-c-primary-nav__link:hover,.cre8-c-primary-nav__link:focus-visible{background:var(--cre8-color-header-menu-bg-hover);color:var(--cre8-color-header-menu-content-hover)}.cre8-c-primary-nav__link:active{border-color:var(--cre8-color-header-menu-border-pressed);background:var(--cre8-color-header-menu-bg-pressed);color:var(--cre8-color-header-menu-content-pressed)}.cre8-c-primary-nav__item.cre8-is-active .cre8-c-primary-nav__link{background:var(--cre8-color-bg-brand);color:var(--cre8-color-header-menu-content-hover)}@media all and (min-width: 960px){.cre8-c-primary-nav__link{padding:1rem 0.5rem}}@media all and (min-width: 960px){.cre8-c-primary-nav__link{padding:1rem;border-bottom:none}}cre8-icon-legacy{--cre8-icon-height: 0.75rem;--cre8-icon-width: 0.75rem;margin-left:auto;transition:transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-primary-nav__item.cre8-is-active cre8-icon-legacy{transform:rotate(-180deg)}@media all and (min-width: 960px){cre8-icon-legacy{margin-left:0.5rem}}.cre8-c-primary-nav__item-panel{visibility:hidden;width:100%;height:0;overflow:hidden;background:rgba(0,0,0,0);opacity:0;transition:all 0s var(--cre8-anim-ease);z-index:-1}@media all and (min-width: 960px){.cre8-c-primary-nav__item-panel{position:absolute;top:100%;left:0;height:auto;box-shadow:var(--cre8-theme-box-shadow-md)}}.cre8-c-primary-nav__item.cre8-is-active .cre8-c-primary-nav__item-panel{display:block;visibility:visible;height:auto;padding-top:2rem;padding-bottom:2rem;background:var(--cre8-color-bg-default);opacity:1;z-index:1;transition:opacity var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-primary-nav__item--megamenu .cre8-c-primary-nav__item-panel-inner{max-width:70rem;padding-right:2rem;padding-left:2rem;margin:0 auto}.cre8-c-primary-nav__item-before{margin-right:0.5rem}.cre8-c-primary-nav__item-after{margin-left:0.5rem}`;
+export default styles;
+//# sourceMappingURL=primary-nav-item.styles.js.map

package/lib/components/primary-nav-item/primary-nav-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primary-nav-item.styles.js","sourceRoot":"","sources":["../../../components/primary-nav-item/primary-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,+nJAA+nJ,CAAC;AAClpJ,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-primary-nav__item{border-bottom-width:var(--cre8-border-width-default);border-bottom-style:var(--cre8-border-style-default);border-bottom-color:var(--cre8-color-border-subtle)}@media all and (min-width: 960px){.cre8-c-primary-nav__item{border-bottom:none}}.cre8-c-primary-nav__item-content{display:flex;align-items:baseline}.cre8-c-primary-nav__link{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);display:flex;align-items:center;appearance:none;background:rgba(0,0,0,0);border:none;white-space:nowrap;width:100%;margin:0;padding:1rem 2rem;color:var(--cre8-primary-nav-link-color, var(--cre8-color-header-menu-content-default));text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);cursor:pointer}.cre8-c-primary-nav__link:hover,.cre8-c-primary-nav__link:focus-visible{background:var(--cre8-color-header-menu-bg-hover);color:var(--cre8-color-header-menu-content-hover)}.cre8-c-primary-nav__link:active{border-color:var(--cre8-color-header-menu-border-pressed);background:var(--cre8-color-header-menu-bg-pressed);color:var(--cre8-color-header-menu-content-pressed)}.cre8-c-primary-nav__item.cre8-is-active .cre8-c-primary-nav__link{background:var(--cre8-color-bg-brand);color:var(--cre8-color-header-menu-content-hover)}@media all and (min-width: 960px){.cre8-c-primary-nav__link{padding:1rem 0.5rem}}@media all and (min-width: 960px){.cre8-c-primary-nav__link{padding:1rem;border-bottom:none}}cre8-icon-legacy{--cre8-icon-height: 0.75rem;--cre8-icon-width: 0.75rem;margin-left:auto;transition:transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-primary-nav__item.cre8-is-active cre8-icon-legacy{transform:rotate(-180deg)}@media all and (min-width: 960px){cre8-icon-legacy{margin-left:0.5rem}}.cre8-c-primary-nav__item-panel{visibility:hidden;width:100%;height:0;overflow:hidden;background:rgba(0,0,0,0);opacity:0;transition:all 0s var(--cre8-anim-ease);z-index:-1}@media all and (min-width: 960px){.cre8-c-primary-nav__item-panel{position:absolute;top:100%;left:0;height:auto;box-shadow:var(--cre8-theme-box-shadow-md)}}.cre8-c-primary-nav__item.cre8-is-active .cre8-c-primary-nav__item-panel{display:block;visibility:visible;height:auto;padding-top:2rem;padding-bottom:2rem;background:var(--cre8-color-bg-default);opacity:1;z-index:1;transition:opacity var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-primary-nav__item--megamenu .cre8-c-primary-nav__item-panel-inner{max-width:70rem;padding-right:2rem;padding-left:2rem;margin:0 auto}.cre8-c-primary-nav__item-before{margin-right:0.5rem}.cre8-c-primary-nav__item-after{margin-left:0.5rem}`;\nexport default styles;\n"]}