@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/field-note/field-note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-note.js","sourceRoot":"","sources":["../../../components/field-note/field-note.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,cAAc,MAAM,kGAAkG,CAAC;AAC9H,OAAO,cAAc,MAAM,kGAAkG,CAAC;AAC9H,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,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C;;;;GAIG;AAEH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAwB5C;;OAEG;IACH,iBAAiB;QACb,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjC,OAAO,QAAQ,CAAC;QACpB,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE;YACrE,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,iBAAiB,EAAE,IAAI,CAAC,SAAS;SACpC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;uBAEM,IAAI,CAAC,iBAAiB,EAAE,IAAI,KAAK;mBACrC,kBAAkB;UAC3B,IAAI,CAAC,OAAO,KAAK,IAAI;YACvB,CAAC,CAAC,IAAI,CAAA,gDAAgD,cAAc,oCAAoC;YACxG,CAAC,CAAC,EACV;cACc,IAAI,CAAC,SAAS,KAAK,IAAI;YAC7B,CAAC,CAAC,IAAI,CAAA,gDAAgD,cAAc,mCAAmC;YACvG,CAAC,CAAC,EACV;;;KAGK,CAAC;IACJ,CAAC;;AAtDQ,oBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACrB;AAOlB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACnB;AAOpB;IADH,QAAQ,EAAE;+CACW;AAoCxB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import svgCheckCircle from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Check.svg?raw';\nimport svgErrorFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Error.svg?raw';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './field-note.styles.js';\n\n/**\n * Field Note gives direction on how to fill out a form field and to alert users of form errors and successes.\n * It’s used below an input field and never on its own.\n * @slot - The note content\n */\n\nexport class Cre8FieldNote extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Changes the component's treatment to represent an error\n   *  @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Changes the component's treatment to represent a success\n   *  @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   *  DEPRECATED: Icon name used for the icon before to the field note\n   * @deprecated\n   */\n  @property()\n      iconName?: string;\n\n  /**\n   * Check if there are success or error states and set \"aria-live=polite\"\n   */\n  fieldNoteAriaLive(): 'polite' | 'off' | 'assertive' {\n      if (this.isError || this.isSuccess) {\n          return 'polite';\n      }\n      return null;\n  }\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-field-note', {\n          'cre8-is-error': this.isError,\n          'cre8-is-success': this.isSuccess,\n      });\n\n      return html`\n        <div\n          aria-live=\"${this.fieldNoteAriaLive() ?? 'off'}\"\n          class=\"${componentClassName}\">\n        ${this.isError === true\n        ? html`<cre8-icon class=\"cre8-field-note-icon\" svg='${svgErrorFilled}' aria-hidden=\"true\" ></cre8-icon>`\n        : ''\n}\n            ${this.isSuccess === true\n        ? html`<cre8-icon class=\"cre8-field-note-icon\" svg='${svgCheckCircle}' aria-hidden=\"true\"></cre8-icon>`\n        : ''\n}\n          <div><slot></slot></div>\n        </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-field-note') === undefined) {\n    customElements.define('cre8-field-note', Cre8FieldNote);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-field-note': Cre8FieldNote;\n  }\n}\n\nexport default Cre8FieldNote;\n"]}

package/lib/components/field-note/field-note.styles.js

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

package/lib/components/field-note/field-note.styles.js.map

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

package/lib/components/footer/footer.js

@@ -1,11 +1,18 @@
-import { css as o, html as e } from "lit";
-import { Cre8Element as i } from "../cre8-element.js";
-const s = o`*,::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-footer{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);background:var(--cre8-color-bg-brand-xstrong);color:var(--cre8-color-content-knockout);padding-top:2.5rem;padding-bottom:3rem}@media all and (min-width: 960px){.cre8-c-footer{padding-top:3.4375rem}}`, r = class r extends i {
-  render() {
-    const a = this.componentClassNames("cre8-c-footer", {});
-    return e`
-      <footer class="${a}" role="contentinfo">
-        ${this.slotNotEmpty("top") && e`<div class="cre8-c-footer__top">
+import { html, } from 'lit';
+import { Cre8Element } from '../cre8-element';
+import styles from './footer.styles.js';
+/**
+ * @slot - The footer content
+ * @slot top - The top content (above the default slot)
+ * @slot bottom - The bottom content (below the default slot)
+ */
+export class Cre8Footer extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-footer', {});
+        return html `
+      <footer class="${componentClassName}" role="contentinfo">
+        ${this.slotNotEmpty('top')
+            && html `<div class="cre8-c-footer__top">
           <cre8-layout-container>
             <slot name="top"></slot>
           </cre8-layout-container>
@@ -15,19 +22,19 @@ const s = o`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-b
             <slot></slot>
           </cre8-layout-container>
         </div>
-        ${this.slotNotEmpty("bottom") && e`<div class="cre8-c-footer__bottom">
+        ${this.slotNotEmpty('bottom')
+            && html `<div class="cre8-c-footer__bottom">
           <cre8-layout-container>
             <slot name="bottom"></slot>
           </cre8-layout-container>
         </div>`}
       </footer>
     `;
-  }
-};
-r.styles = [s];
-let t = r;
-customElements.get("cre8-footer") === void 0 && customElements.define("cre8-footer", t);
-export {
-  t as Cre8Footer,
-  t as default
-};
+    }
+}
+Cre8Footer.styles = [styles];
+if (customElements.get('cre8-footer') === undefined) {
+    customElements.define('cre8-footer', Cre8Footer);
+}
+export default Cre8Footer;
+//# sourceMappingURL=footer.js.map

package/lib/components/footer/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../components/footer/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC;;;;GAIG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAGvC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAEzE,OAAO,IAAI,CAAA;uBACI,kBAAkB;UAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;eACvB,IAAI,CAAA;;;;eAIA;;;;;;UAML,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC1B,IAAI,CAAA;;;;eAIA;;KAEV,CAAC;IACF,CAAC;;AA1BM,iBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AA6B7B,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACrD,CAAC;AAQD,eAAe,UAAU,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './footer.styles.js';\n\n/**\n * @slot - The footer content\n * @slot top - The top content (above the default slot)\n * @slot bottom - The bottom content (below the default slot)\n */\nexport class Cre8Footer extends Cre8Element {\n    static styles = [styles];\n\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-footer', {});\n\n        return html`\n      <footer class=\"${componentClassName}\" role=\"contentinfo\">\n        ${this.slotNotEmpty('top')\n        && html`<div class=\"cre8-c-footer__top\">\n          <cre8-layout-container>\n            <slot name=\"top\"></slot>\n          </cre8-layout-container>\n        </div>`}\n        <div class=\"cre8-c-footer__middle\">\n          <cre8-layout-container>\n            <slot></slot>\n          </cre8-layout-container>\n        </div>\n        ${this.slotNotEmpty('bottom')\n        && html`<div class=\"cre8-c-footer__bottom\">\n          <cre8-layout-container>\n            <slot name=\"bottom\"></slot>\n          </cre8-layout-container>\n        </div>`}\n      </footer>\n    `;\n    }\n}\n\nif (customElements.get('cre8-footer') === undefined) {\n    customElements.define('cre8-footer', Cre8Footer);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-footer': Cre8Footer;\n  }\n}\n\nexport default Cre8Footer;\n"]}

package/lib/components/footer/footer.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-footer{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);background:var(--cre8-color-bg-brand-xstrong);color:var(--cre8-color-content-knockout);padding-top:2.5rem;padding-bottom:3rem}@media all and (min-width: 960px){.cre8-c-footer{padding-top:3.4375rem}}`;
+export default styles;
+//# sourceMappingURL=footer.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../components/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,i1EAAi1E,CAAC;AACp2E,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-footer{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);background:var(--cre8-color-bg-brand-xstrong);color:var(--cre8-color-content-knockout);padding-top:2.5rem;padding-bottom:3rem}@media all and (min-width: 960px){.cre8-c-footer{padding-top:3.4375rem}}`;\nexport default styles;\n"]}

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

@@ -1,43 +1,50 @@
-import { css as p, html as h } from "lit";
-import { property as i } from "lit/decorators.js";
-import { Cre8Element as c } from "../cre8-element.js";
-const m = 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-global-nav--inverted{--cre8-global-nav-link-color: var(--cre8-color-content-knockout)}.cre8-c-global-nav__list{display:flex;margin:0;padding:0;width:100%;list-style:none;overflow:auto}`;
-var f = Object.defineProperty, s = (n, r, o, g) => {
-  for (var e = void 0, a = n.length - 1, d; a >= 0; a--)
-    (d = n[a]) && (e = d(r, o, e) || e);
-  return e && f(r, o, 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 l = class l extends c {
-  constructor() {
-    super(...arguments), this.navAriaLabel = "global";
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-global-nav", {
-      "cre8-c-global-nav--side-by-side": this.behavior === "side-by-side",
-      "cre8-c-global-nav--inverted": this.inverted === !0
-    });
-    return h`
-      <nav aria-label="${this.navAriaLabel}" class="${r}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './global-nav.styles.js';
+/**
+ * @slot - The primary navigation items
+ */
+export class Cre8GlobalNav extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * aria-label attribute to designate at name for the nav. Can be override by user
+         */
+        this.navAriaLabel = 'global';
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-global-nav', {
+            'cre8-c-global-nav--side-by-side': this.behavior === 'side-by-side',
+            'cre8-c-global-nav--inverted': this.inverted === true,
+        });
+        return html `
+      <nav aria-label="${this.navAriaLabel}" class="${componentClassName}">
         <ul class="cre8-c-global-nav__list">
           <slot></slot>
         </ul>
       </nav>
     `;
-  }
-};
-l.styles = [m];
-let t = l;
-s([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "inverted");
-s([
-  i()
-], t.prototype, "behavior");
-s([
-  i()
-], t.prototype, "navAriaLabel");
-customElements.get("cre8-global-nav") === void 0 && customElements.define("cre8-global-nav", t);
-export {
-  t as Cre8GlobalNav,
-  t as default
-};
+    }
+}
+Cre8GlobalNav.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8GlobalNav.prototype, "inverted", void 0);
+__decorate([
+    property()
+], Cre8GlobalNav.prototype, "behavior", void 0);
+__decorate([
+    property()
+], Cre8GlobalNav.prototype, "navAriaLabel", void 0);
+if (customElements.get('cre8-global-nav') === undefined) {
+    customElements.define('cre8-global-nav', Cre8GlobalNav);
+}
+export default Cre8GlobalNav;
+//# sourceMappingURL=global-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"global-nav.js","sourceRoot":"","sources":["../../../components/global-nav/global-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,wBAAwB,CAAC;AAE5C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QAqBE;;WAEG;QAEC,iBAAY,GAAW,QAAQ,CAAC;IAgBtC,CAAC;IAdC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE;YACrE,iCAAiC,EAAE,IAAI,CAAC,QAAQ,KAAK,cAAc;YACnE,6BAA6B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SACxD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;yBACQ,IAAI,CAAC,YAAY,YAAY,kBAAkB;;;;;KAKnE,CAAC;IACJ,CAAC;;AAvCQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACpB;AAWnB;IADH,QAAQ,EAAE;+CACmB;AAM1B;IADH,QAAQ,EAAE;mDACyB;AAkBtC,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './global-nav.styles.js';\n\n/**\n * @slot - The primary navigation items\n */\nexport class Cre8GlobalNav 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 = 'global';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-global-nav', {\n          'cre8-c-global-nav--side-by-side': this.behavior === 'side-by-side',\n          'cre8-c-global-nav--inverted': this.inverted === true,\n      });\n\n      return html`\n      <nav aria-label=\"${this.navAriaLabel}\" class=\"${componentClassName}\">\n        <ul class=\"cre8-c-global-nav__list\">\n          <slot></slot>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nif (customElements.get('cre8-global-nav') === undefined) {\n    customElements.define('cre8-global-nav', Cre8GlobalNav);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-global-nav': Cre8GlobalNav;\n  }\n}\n\nexport default Cre8GlobalNav;\n"]}

package/lib/components/global-nav/global-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-global-nav--inverted{--cre8-global-nav-link-color: var(--cre8-color-content-knockout)}.cre8-c-global-nav__list{display:flex;margin:0;padding:0;width:100%;list-style:none;overflow:auto}`;
+export default styles;
+//# sourceMappingURL=global-nav.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"global-nav.styles.js","sourceRoot":"","sources":["../../../components/global-nav/global-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,08DAA08D,CAAC;AAC79D,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-global-nav--inverted{--cre8-global-nav-link-color: var(--cre8-color-content-knockout)}.cre8-c-global-nav__list{display:flex;margin:0;padding:0;width:100%;list-style:none;overflow:auto}`;\nexport default styles;\n"]}

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

@@ -1,111 +1,149 @@
-import { css as m, html as a } from "lit";
-import { ifDefined as p } from "lit-html/directives/if-defined.js";
-import { property as n, state as f } from "lit/decorators.js";
-import { Cre8Element as g } from "../cre8-element.js";
-const v = 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-global-nav__item-content{display:flex;align-items:baseline}.cre8-c-global-nav__link{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:flex;align-items:center;appearance:none;background:rgba(0,0,0,0);border:none;white-space:nowrap;width:100%;margin:0;padding:0.5rem 1rem;color:var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);cursor:pointer}.cre8-c-global-nav__link:hover,.cre8-c-global-nav__link:focus-visible{background:var(--cre8-color-header-menu-bg-hover);color:var(--cre8-color-header-menu-content-hover)}.cre8-c-global-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-icon-legacy{--cre8-icon-height: 0.5rem;--cre8-icon-width: 0.5rem;margin-left:auto;transition:transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-global-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-global-nav__item-after{--cre8-icon-height: 0.75rem;--cre8-icon-width: 0.75rem;margin-left:0.5rem}`;
-var u = Object.defineProperty, o = (d, e, t, s) => {
-  for (var r = void 0, l = d.length - 1, h; l >= 0; l--)
-    (h = d[l]) && (r = h(e, t, r) || r);
-  return r && u(e, t, r), r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const c = class c extends g {
-  /**
-   * Initialize functions
-   */
-  constructor() {
-    super(), this.text = "Nav item", this.href = "#", this.iconName = "keyboard-arrow-down", this._handleOnClickOutside = this._handleOnClickOutside.bind(this), this._clickHandler = this._clickHandler.bind(this);
-  }
-  /**
-   * Connected Callback lifecycle
-   */
-  connectedCallback() {
-    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 t = e.composedPath().includes(this.shadowRoot.host);
-    this.isActive && !t && (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-global-nav-item").forEach((s) => {
-      s !== this && (s.isActive = !1);
-    }), this.isActive = !this.isActive;
-  }
-  closePanel() {
-    this.isActive = !1;
-  }
-  _handleOnKeyDown(e) {
-    if (e.key === "Escape" && this.isActive === !0) {
-      this.closePanel();
-      const t = this.shadowRoot?.querySelector(
-        ".cre8-c-global-nav__link"
-      );
-      t && setTimeout(() => {
-        t.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 './global-nav-item.styles.js';
+/**
+ * @slot - The label for the navigation item
+ */
+export class Cre8GlobalNavItem extends Cre8Element {
+    /**
+     * Initialize functions
+     */
+    constructor() {
+        super();
+        /**
+         * Primary nav item text
+         */
+        this.text = 'Nav item';
+        /**
+         * Primary nav item href
+         */
+        this.href = '#';
+        /**
+         * Icon name
+         */
+        this.iconName = 'keyboard-arrow-down';
+        this._handleOnClickOutside = this._handleOnClickOutside.bind(this);
+        this._clickHandler = this._clickHandler.bind(this);
     }
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-global-nav__item", {
-      "cre8-is-active": this.isActive === !0,
-      "cre8-c-global-nav__item--megamenu": this.megaMenu === !0
-    });
-    return this.megaMenu ? a`
-            <li class="${e}" @keydown=${this._handleOnKeyDown}>
+    /**
+     * Connected Callback lifecycle
+     */
+    connectedCallback() {
+        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-global-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-global-nav__link');
+            if (navLink) {
+                setTimeout(() => {
+                    navLink.focus();
+                }, 1);
+            }
+        }
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-global-nav__item', {
+            'cre8-is-active': this.isActive === true,
+            'cre8-c-global-nav__item--megamenu': this.megaMenu === true,
+        });
+        if (this.megaMenu) {
+            return html `
+            <li class="${componentClassName}" @keydown=${this._handleOnKeyDown}>
                 <div class="cre8-c-global-nav__item-content">
-                    ${this.slotNotEmpty("itemBefore") && a`
+                    ${this.slotNotEmpty('itemBefore') && html `
                     <div class="cre8-c-global-nav__item-before">
                         <slot name="itemBefore"></slot>
                     </div>`}
                     <button
                         class="cre8-c-global-nav__link"
                         @click=${this._clickHandler}
-                        aria-expanded=${this.isActive === !0}
+                        aria-expanded=${this.isActive === true}
                     >
                         ${this.text}
-                        <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>
             </li>
-        ` : a`
-            <li class="${e}">
+        `;
+        }
+        return html `
+            <li class="${componentClassName}">
                 <div class="cre8-c-global-nav__item-content">
                     <a class="cre8-c-global-nav__link" href="${this.href}">
-                        ${this.slotNotEmpty("itemBefore") && a`
+                        ${this.slotNotEmpty('itemBefore') && html `
                         <div class="cre8-c-global-nav__item-before">
                             <slot name="itemBefore"></slot>
                         </div>`}
                         ${this.text}
-                        ${this.slotNotEmpty("itemAfter") && a`
+                        ${this.slotNotEmpty('itemAfter') && html `
                         <div class="cre8-c-global-nav__item-after">
                             <slot name="itemAfter"></slot>
                         </div>`}
@@ -113,27 +151,26 @@ const c = class c extends g {
                 </div>
             </li>
         `;
-  }
-};
-c.styles = [v];
-let i = c;
-o([
-  n()
-], i.prototype, "text");
-o([
-  n()
-], i.prototype, "href");
-o([
-  n()
-], i.prototype, "iconName");
-o([
-  n({ type: Boolean, reflect: !0 })
-], i.prototype, "megaMenu");
-o([
-  f()
-], i.prototype, "isActive");
-customElements.get("cre8-global-nav-item") === void 0 && customElements.define("cre8-global-nav-item", i);
-export {
-  i as Cre8GlobalNavItem,
-  i as default
-};
+    }
+}
+Cre8GlobalNavItem.styles = [styles];
+__decorate([
+    property()
+], Cre8GlobalNavItem.prototype, "text", void 0);
+__decorate([
+    property()
+], Cre8GlobalNavItem.prototype, "href", void 0);
+__decorate([
+    property()
+], Cre8GlobalNavItem.prototype, "iconName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8GlobalNavItem.prototype, "megaMenu", void 0);
+__decorate([
+    state()
+], Cre8GlobalNavItem.prototype, "isActive", void 0);
+if (customElements.get('cre8-global-nav-item') === undefined) {
+    customElements.define('cre8-global-nav-item', Cre8GlobalNavItem);
+}
+export default Cre8GlobalNavItem;
+//# sourceMappingURL=global-nav-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"global-nav-item.js","sourceRoot":"","sources":["../../../components/global-nav-item/global-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 './global-nav-item.styles.js';\n\n    /**\n     * @slot - The label for the navigation item\n     */\nexport class Cre8GlobalNavItem 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 = 'keyboard-arrow-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        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-global-nav-item');\n            navItems.forEach((element: Cre8GlobalNavItem) => {\n                if (element !== this) {\n                    element.isActive = false; /* 1 */\n                }\n            });\n        }\n        this.isActive = !this.isActive; /* 2 */\n    }\n\n    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-global-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-global-nav__item', {\n            'cre8-is-active': this.isActive === true,\n            'cre8-c-global-nav__item--megamenu': this.megaMenu === true,\n        });\n\n        if (this.megaMenu) {\n            return html`\n            <li class=\"${componentClassName}\" @keydown=${this._handleOnKeyDown}>\n                <div class=\"cre8-c-global-nav__item-content\">\n                    ${this.slotNotEmpty('itemBefore') && html`\n                    <div class=\"cre8-c-global-nav__item-before\">\n                        <slot name=\"itemBefore\"></slot>\n                    </div>`}\n                    <button\n                        class=\"cre8-c-global-nav__link\"\n                        @click=${this._clickHandler}\n                        aria-expanded=${this.isActive === true}\n                    >\n                        ${this.text}\n                        <cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>\n                    </button>\n                </div>\n            </li>\n        `;\n        }\n        return html`\n            <li class=\"${componentClassName}\">\n                <div class=\"cre8-c-global-nav__item-content\">\n                    <a class=\"cre8-c-global-nav__link\" href=\"${this.href}\">\n                        ${this.slotNotEmpty('itemBefore') && html`\n                        <div class=\"cre8-c-global-nav__item-before\">\n                            <slot name=\"itemBefore\"></slot>\n                        </div>`}\n                        ${this.text}\n                        ${this.slotNotEmpty('itemAfter') && html`\n                        <div class=\"cre8-c-global-nav__item-after\">\n                            <slot name=\"itemAfter\"></slot>\n                        </div>`}\n                    </a>\n                </div>\n            </li>\n        `;\n    }\n}\n\nif (customElements.get('cre8-global-nav-item') === undefined) {\n    customElements.define('cre8-global-nav-item', Cre8GlobalNavItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-global-nav-item': Cre8GlobalNavItem;\n    }\n}\n\nexport default Cre8GlobalNavItem;\n"]}

package/lib/components/global-nav-item/global-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-global-nav__item-content{display:flex;align-items:baseline}.cre8-c-global-nav__link{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:flex;align-items:center;appearance:none;background:rgba(0,0,0,0);border:none;white-space:nowrap;width:100%;margin:0;padding:0.5rem 1rem;color:var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);cursor:pointer}.cre8-c-global-nav__link:hover,.cre8-c-global-nav__link:focus-visible{background:var(--cre8-color-header-menu-bg-hover);color:var(--cre8-color-header-menu-content-hover)}.cre8-c-global-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-icon-legacy{--cre8-icon-height: 0.5rem;--cre8-icon-width: 0.5rem;margin-left:auto;transition:transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-global-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-global-nav__item-after{--cre8-icon-height: 0.75rem;--cre8-icon-width: 0.75rem;margin-left:0.5rem}`;
+export default styles;
+//# sourceMappingURL=global-nav-item.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"global-nav-item.styles.js","sourceRoot":"","sources":["../../../components/global-nav-item/global-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,wxGAAwxG,CAAC;AAC3yG,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-global-nav__item-content{display:flex;align-items:baseline}.cre8-c-global-nav__link{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:flex;align-items:center;appearance:none;background:rgba(0,0,0,0);border:none;white-space:nowrap;width:100%;margin:0;padding:0.5rem 1rem;color:var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);cursor:pointer}.cre8-c-global-nav__link:hover,.cre8-c-global-nav__link:focus-visible{background:var(--cre8-color-header-menu-bg-hover);color:var(--cre8-color-header-menu-content-hover)}.cre8-c-global-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-icon-legacy{--cre8-icon-height: 0.5rem;--cre8-icon-width: 0.5rem;margin-left:auto;transition:transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-global-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-global-nav__item-after{--cre8-icon-height: 0.75rem;--cre8-icon-width: 0.75rem;margin-left:0.5rem}`;\nexport default styles;\n"]}