@tmorrow/cre8-wc 1.1.2 → 1.1.3

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

@@ -1,42 +1,47 @@
-import { css as p, html as m } from "lit";
-import { property as n } from "lit/decorators.js";
-import { nanoid as h } from "nanoid";
-import { Cre8Element as c } from "../cre8-element.js";
-const g = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-tag-list{border:none;padding:0;margin:0;gap:var(--cre8-spacing-16)}.cre8-c-tag-list__legend{margin-bottom:var(--cre8-spacing-16)}::slotted(cre8-tag){margin-bottom:var(--cre8-spacing-16);margin-right:var(--cre8-spacing-8)}.cre8-c-tag-list__list{list-style-type:none;margin:0;padding:0;display:flex;flex-wrap:wrap}`;
-var f = Object.defineProperty, o = (s, i, l, x) => {
-  for (var e = void 0, r = s.length - 1, d; r >= 0; r--)
-    (d = s[r]) && (e = d(i, l, e) || e);
-  return e && f(i, l, e), e;
+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 a = class a extends c {
-  firstUpdated() {
-    this._initializeAria();
-  }
-  _initializeAria() {
-    this.fieldId = this.fieldId || h();
-  }
-  render() {
-    const i = this.componentClassNames("cre8-c-tag-list", {});
-    return m`
-      <fieldset class="${i}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { Cre8Element } from '../cre8-element';
+import styles from './tag-list.styles.js';
+/**
+ * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.
+ * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.
+ * Tag List has a label that should be used to describe the purpose of the list.
+ */
+export class Cre8TagList extends Cre8Element {
+    firstUpdated() {
+        this._initializeAria();
+    }
+    _initializeAria() {
+        this.fieldId = this.fieldId || nanoid();
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-tag-list', {});
+        return html `
+      <fieldset class="${componentClassNames}">
         <legend class="cre8-c-tag-list__legend">${this.label}</legend>
         <div class="cre8-c-tag-list__list" role="list">   
           <slot></slot>
         </div>
       </fieldset>
       `;
-  }
-};
-a.styles = [g];
-let t = a;
-o([
-  n()
-], t.prototype, "label");
-o([
-  n()
-], t.prototype, "fieldId");
-customElements.get("cre8-tag-list") === void 0 && customElements.define("cre8-tag-list", t);
-export {
-  t as Cre8TagList,
-  t as default
-};
+    }
+}
+Cre8TagList.styles = [styles];
+__decorate([
+    property()
+], Cre8TagList.prototype, "label", void 0);
+__decorate([
+    property()
+], Cre8TagList.prototype, "fieldId", void 0);
+if (customElements.get('cre8-tag-list') === undefined) {
+    customElements.define('cre8-tag-list', Cre8TagList);
+}
+export default Cre8TagList;
+//# sourceMappingURL=tag-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-list.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C;;;;GAIG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAgB1C,YAAY;QACR,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,EAAG,CAAC,CAAC;QAE7E,OAAO,IAAI,CAAA;yBACQ,mBAAmB;kDACM,IAAI,CAAC,KAAK;;;;;OAKrD,CAAC;IACN,CAAC;;AAlCQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACQ;AAOf;IADH,QAAQ,EAAE;4CACU;AAwBvB,IAAI,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tag-list.styles.js';\n\n/**\n * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.\n * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.\n * Tag List has a label that should be used to describe the purpose of the list.\n */\nexport class Cre8TagList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tag list legend label\n   */\n  @property()\n      label?: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  firstUpdated() {\n      this._initializeAria();\n  }\n\n  private _initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag-list', { });\n\n      return html`\n      <fieldset class=\"${componentClassNames}\">\n        <legend class=\"cre8-c-tag-list__legend\">${this.label}</legend>\n        <div class=\"cre8-c-tag-list__list\" role=\"list\">   \n          <slot></slot>\n        </div>\n      </fieldset>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tag-list') === undefined) {\n    customElements.define('cre8-tag-list', Cre8TagList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag-list': Cre8TagList;\n  }\n}\n\nexport default Cre8TagList;\n"]}

package/lib/components/tag-list/tag-list.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-tag-list{border:none;padding:0;margin:0;gap:var(--cre8-spacing-16)}.cre8-c-tag-list__legend{margin-bottom:var(--cre8-spacing-16)}::slotted(cre8-tag){margin-bottom:var(--cre8-spacing-16);margin-right:var(--cre8-spacing-8)}.cre8-c-tag-list__list{list-style-type:none;margin:0;padding:0;display:flex;flex-wrap:wrap}`;
+export default styles;
+//# sourceMappingURL=tag-list.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-list.styles.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,0kEAA0kE,CAAC;AAC7lE,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-tag-list{border:none;padding:0;margin:0;gap:var(--cre8-spacing-16)}.cre8-c-tag-list__legend{margin-bottom:var(--cre8-spacing-16)}::slotted(cre8-tag){margin-bottom:var(--cre8-spacing-16);margin-right:var(--cre8-spacing-8)}.cre8-c-tag-list__list{list-style-type:none;margin:0;padding:0;display:flex;flex-wrap:wrap}`;\nexport default styles;\n"]}

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

@@ -1,39 +1,46 @@
-import { css as h, html as m } from "lit";
-import { property as d } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const c = h`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:flex}.cre8-c-tertiary-nav{width:100%;max-width:15rem}.cre8-c-tertiary-nav--full-width{max-width:none}.cre8-c-tertiary-nav__list{margin:0;padding:0;list-style:none}`;
-var f = Object.defineProperty, o = (s, r, l, x) => {
-  for (var e = void 0, i = s.length - 1, n; i >= 0; i--)
-    (n = s[i]) && (e = n(r, l, e) || e);
-  return e && f(r, l, e), e;
+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 a = class a extends p {
-  constructor() {
-    super(...arguments), this.navAriaLabel = "tertiary";
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-tertiary-nav", {
-      "cre8-c-tertiary-nav--full-width": this.fullWidth
-    });
-    return m`
-      <nav aria-label="${this.navAriaLabel}" role="navigation" class="${r}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './tertiary-nav.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8TertiaryNav extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * aria-label attribute to designate at name for the nav. Can be override by user
+         */
+        this.navAriaLabel = 'tertiary';
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-tertiary-nav', {
+            'cre8-c-tertiary-nav--full-width': this.fullWidth,
+        });
+        return html `
+      <nav aria-label="${this.navAriaLabel}" role="navigation" class="${componentClassNames}">
         <ul role="list" class="cre8-c-tertiary-nav__list">
           <slot></slot>
         </ul>
       </nav>
     `;
-  }
-};
-a.styles = [c];
-let t = a;
-o([
-  d({ type: Boolean, reflect: !0 })
-], t.prototype, "fullWidth");
-o([
-  d()
-], t.prototype, "navAriaLabel");
-customElements.get("cre8-tertiary-nav") === void 0 && customElements.define("cre8-tertiary-nav", t);
-export {
-  t as Cre8TertiaryNav,
-  t as default
-};
+    }
+}
+Cre8TertiaryNav.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8TertiaryNav.prototype, "fullWidth", void 0);
+__decorate([
+    property()
+], Cre8TertiaryNav.prototype, "navAriaLabel", void 0);
+if (customElements.get('cre8-tertiary-nav') === undefined) {
+    customElements.define('cre8-tertiary-nav', Cre8TertiaryNav);
+}
+export default Cre8TertiaryNav;
+//# sourceMappingURL=tertiary-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tertiary-nav.js","sourceRoot":"","sources":["../../../components/tertiary-nav/tertiary-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,0BAA0B,CAAC;AAE9C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QASE;;WAEG;QAEC,iBAAY,GAAW,UAAU,CAAC;IAexC,CAAC;IAbC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;YACxE,iCAAiC,EAAE,IAAI,CAAC,SAAS;SACpD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;yBACQ,IAAI,CAAC,YAAY,8BAA8B,mBAAmB;;;;;KAKtF,CAAC;IACJ,CAAC;;AA1BQ,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACnB;AAMpB;IADH,QAAQ,EAAE;qDAC2B;AAiBxC,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAID,eAAe,eAAe,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tertiary-nav.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8TertiaryNav extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Allows the tertiary nav to take up the full width of it parent container\n   */\n  @property({ type: Boolean, reflect: true })\n      fullWidth?: boolean;\n\n  /**\n   * aria-label attribute to designate at name for the nav. Can be override by user\n   */\n  @property()\n      navAriaLabel: string = 'tertiary';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tertiary-nav', {\n          'cre8-c-tertiary-nav--full-width': this.fullWidth,\n      });\n\n      return html`\n      <nav aria-label=\"${this.navAriaLabel}\" role=\"navigation\" class=\"${componentClassNames}\">\n        <ul role=\"list\" class=\"cre8-c-tertiary-nav__list\">\n          <slot></slot>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nif (customElements.get('cre8-tertiary-nav') === undefined) {\n    customElements.define('cre8-tertiary-nav', Cre8TertiaryNav);\n}\n\ndeclare global { interface HTMLElementTagNameMap { 'cre8-tertiary-nav': Cre8TertiaryNav; } }\n\nexport default Cre8TertiaryNav;\n"]}

package/lib/components/tertiary-nav/tertiary-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}:host{display:flex}.cre8-c-tertiary-nav{width:100%;max-width:15rem}.cre8-c-tertiary-nav--full-width{max-width:none}.cre8-c-tertiary-nav__list{margin:0;padding:0;list-style:none}`;
+export default styles;
+//# sourceMappingURL=tertiary-nav.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tertiary-nav.styles.js","sourceRoot":"","sources":["../../../components/tertiary-nav/tertiary-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,27DAA27D,CAAC;AAC98D,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-tertiary-nav{width:100%;max-width:15rem}.cre8-c-tertiary-nav--full-width{max-width:none}.cre8-c-tertiary-nav__list{margin:0;padding:0;list-style:none}`;\nexport default styles;\n"]}

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

@@ -1,52 +1,61 @@
-import { css as m, html as f } from "lit";
-import { ifDefined as c } from "lit-html/directives/if-defined.js";
-import { property as d } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const y = m`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:contents}.cre8-c-tertiary-nav-item__link{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.5rem 0.5rem 1rem;color:var(--cre8-color-content-brand-strong);background-color:var(--cre8-color-bg-default);border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);width:100%}.cre8-c-tertiary-nav-item__link:hover,.cre8-c-tertiary-nav-item__link:focus{background-color:var(--cre8-color-bg-subtle)}.cre8-c-tertiary-nav-item__link:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-tertiary-nav-item__link:active,.cre8-is-current .cre8-c-tertiary-nav-item__link{color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-subtle)}`;
-var u = Object.defineProperty, h = (s, r, a, n) => {
-  for (var e = void 0, i = s.length - 1, l; i >= 0; i--)
-    (l = s[i]) && (e = l(r, a, e) || e);
-  return e && u(r, a, e), e;
+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 o = class o extends p {
-  /**
-   * Handle on click
-   * 1. On click, remove all isCurrent properties from all tertiary-nav items
-   * 2. Add isCurrent to the item clicked
-   */
-  _handleOnClick() {
-    this.closest("cre8-tertiary-nav").shadowRoot.querySelector("slot").assignedElements({ flatten: !1 }).forEach((n) => {
-      n.isCurrent = !1;
-    }), this.isCurrent = !0;
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-tertiary-nav-item", {
-      "cre8-is-current": this.isCurrent
-    });
-    return f`
-      <li role="listitem" class="${r}">
+import { html, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './tertiary-nav-item.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8TertiaryNavItem extends Cre8Element {
+    /**
+     * Handle on click
+     * 1. On click, remove all isCurrent properties from all tertiary-nav items
+     * 2. Add isCurrent to the item clicked
+     */
+    _handleOnClick() {
+        /* 1 */
+        const tertiaryNav = this.closest('cre8-tertiary-nav');
+        const allTertiaryNavItems = tertiaryNav.shadowRoot.querySelector('slot')
+            .assignedElements({ flatten: false });
+        allTertiaryNavItems.forEach((item) => {
+            item.isCurrent = false;
+        });
+        /* 2 */
+        this.isCurrent = true;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-tertiary-nav-item', {
+            'cre8-is-current': this.isCurrent,
+        });
+        return html `
+      <li role="listitem" class="${componentClassNames}">
         <a
           class="cre8-c-tertiary-nav-item__link"
-          aria-current=${c(this.isCurrent ? "page" : void 0)}
+          aria-current=${ifDefined(this.isCurrent ? 'page' : undefined)}
           @click=${this._handleOnClick}
-          href=${c(this.href)}
+          href=${ifDefined(this.href)}
         >
           <slot></slot>
         </a>
       </li>
     `;
-  }
-};
-o.styles = [y];
-let t = o;
-h([
-  d()
-], t.prototype, "href");
-h([
-  d({ type: Boolean, reflect: !0 })
-], t.prototype, "isCurrent");
-customElements.get("cre8-tertiary-nav-item") === void 0 && customElements.define("cre8-tertiary-nav-item", t);
-export {
-  t as Cre8TertiaryNavItem,
-  t as default
-};
+    }
+}
+Cre8TertiaryNavItem.styles = [styles];
+__decorate([
+    property()
+], Cre8TertiaryNavItem.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8TertiaryNavItem.prototype, "isCurrent", void 0);
+if (customElements.get('cre8-tertiary-nav-item') === undefined) {
+    customElements.define('cre8-tertiary-nav-item', Cre8TertiaryNavItem);
+}
+export default Cre8TertiaryNavItem;
+//# sourceMappingURL=tertiary-nav-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tertiary-nav-item.js","sourceRoot":"","sources":["../../../components/tertiary-nav-item/tertiary-nav-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAEnD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,WAAW;IAelD;;;;OAIG;IACK,cAAc;QACpB,OAAO;QACL,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;QACtD,MAAM,mBAAmB,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC;aACnE,gBAAgB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAA0B,CAAC;QACnE,mBAAmB,CAAC,OAAO,CAAC,CAAC,IAAyB,EAAE,EAAE;YACtD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEL,OAAO;QACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAC1B,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,0BAA0B,EAAE;YAC7E,iBAAiB,EAAE,IAAI,CAAC,SAAS;SACpC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mCACkB,mBAAmB;;;yBAG7B,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;mBACpD,IAAI,CAAC,cAAc;iBACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;KAKhC,CAAC;IACJ,CAAC;;AAjDQ,0BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;iDACO;AAMd;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACnB;AAwC1B,IAAI,cAAc,CAAC,GAAG,CAAC,wBAAwB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC7D,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,CAAC;AACzE,CAAC;AAID,eAAe,mBAAmB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tertiary-nav-item.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8TertiaryNavItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The href value of the tertiary nav link\n   */\n  @property()\n      href?: string;\n\n  /**\n   * The current state of the tertiary nav link\n   */\n  @property({ type: Boolean, reflect: true })\n      isCurrent?: boolean;\n\n  /**\n   * Handle on click\n   * 1. On click, remove all isCurrent properties from all tertiary-nav items\n   * 2. Add isCurrent to the item clicked\n   */\n  private _handleOnClick() {\n    /* 1 */\n      const tertiaryNav = this.closest('cre8-tertiary-nav');\n      const allTertiaryNavItems = tertiaryNav.shadowRoot.querySelector('slot')\n          .assignedElements({ flatten: false }) as Cre8TertiaryNavItem[];\n      allTertiaryNavItems.forEach((item: Cre8TertiaryNavItem) => {\n          item.isCurrent = false;\n      });\n\n    /* 2 */\n      this.isCurrent = true;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tertiary-nav-item', {\n          'cre8-is-current': this.isCurrent,\n      });\n\n      return html`\n      <li role=\"listitem\" class=\"${componentClassNames}\">\n        <a\n          class=\"cre8-c-tertiary-nav-item__link\"\n          aria-current=${ifDefined(this.isCurrent ? 'page' : undefined)}\n          @click=${this._handleOnClick}\n          href=${ifDefined(this.href)}\n        >\n          <slot></slot>\n        </a>\n      </li>\n    `;\n  }\n}\n\nif (customElements.get('cre8-tertiary-nav-item') === undefined) {\n    customElements.define('cre8-tertiary-nav-item', Cre8TertiaryNavItem);\n}\n\ndeclare global { interface HTMLElementTagNameMap { 'cre8-tertiary-nav-item': Cre8TertiaryNavItem; } }\n\nexport default Cre8TertiaryNavItem;\n"]}

package/lib/components/tertiary-nav-item/tertiary-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}:host{display:contents}.cre8-c-tertiary-nav-item__link{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.5rem 0.5rem 1rem;color:var(--cre8-color-content-brand-strong);background-color:var(--cre8-color-bg-default);border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);width:100%}.cre8-c-tertiary-nav-item__link:hover,.cre8-c-tertiary-nav-item__link:focus{background-color:var(--cre8-color-bg-subtle)}.cre8-c-tertiary-nav-item__link:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-tertiary-nav-item__link:active,.cre8-is-current .cre8-c-tertiary-nav-item__link{color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-subtle)}`;
+export default styles;
+//# sourceMappingURL=tertiary-nav-item.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tertiary-nav-item.styles.js","sourceRoot":"","sources":["../../../components/tertiary-nav-item/tertiary-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,i/FAAi/F,CAAC;AACpgG,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:contents}.cre8-c-tertiary-nav-item__link{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.5rem 0.5rem 1rem;color:var(--cre8-color-content-brand-strong);background-color:var(--cre8-color-bg-default);border-block-end:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);width:100%}.cre8-c-tertiary-nav-item__link:hover,.cre8-c-tertiary-nav-item__link:focus{background-color:var(--cre8-color-bg-subtle)}.cre8-c-tertiary-nav-item__link:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-tertiary-nav-item__link:active,.cre8-is-current .cre8-c-tertiary-nav-item__link{color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-subtle)}`;\nexport default styles;\n"]}

package/lib/components/text-link/text-link.js

@@ -1,47 +1,51 @@
-import { css as p, html as d } from "lit";
-import { ifDefined as h } from "lit-html/directives/if-defined.js";
-import { property as i } from "lit/decorators.js";
-import { Cre8Element as f } 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-text-link{font-family:var(--cre8-typography-body-default-link-font-family);font-size:var(--cre8-typography-body-default-link-font-size);font-weight:var(--cre8-typography-body-default-link-font-weight);line-height:var(--cre8-typography-body-default-link-line-height);text-decoration:var(--cre8-typography-body-default-link-text-decoration);text-transform:var(--cre8-typography-body-default-link-text-transform);display:inline-flex;color:var(--cre8-color-content-link);cursor:pointer}.cre8-c-text-link:hover,.cre8-c-text-link:focus{text-decoration:underline;color:var(--cre8-color-content-link-hover)}.cre8-c-text-link:active{color:var(--cre8-color-content-link-active)}.cre8-c-text-link:visited{color:var(--cre8-color-content-link-visited)}.cre8-c-text-link--display{color:var(--cre8-color-content-default)}.cre8-c-text-link--secondary{color:var(--cre8-color-content-subtle)}.cre8-c-text-link--inverted{color:var(--cre8-color-content-knockout)}.cre8-c-text-link--sm{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-text-link__after{margin-left:0.5rem}`;
-var y = Object.defineProperty, a = (n, r, s, x) => {
-  for (var t = void 0, o = n.length - 1, c; o >= 0; o--)
-    (c = n[o]) && (t = c(r, s, t) || t);
-  return t && y(r, s, t), t;
+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 {
-  render() {
-    const r = this.componentClassNames("cre8-c-text-link", {
-      "cre8-c-text-link--inverted": this.inverted === !0,
-      "cre8-c-text-link--display": this.variant === "display",
-      "cre8-c-text-link--secondary": this.variant === "secondary",
-      "cre8-c-text-link--sm": this.size === "sm"
-    });
-    return d`
-      <a href="${h(this.href)}" class="${r}">
+import { html, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './text-link.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8TextLink extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-text-link', {
+            'cre8-c-text-link--inverted': this.inverted === true,
+            'cre8-c-text-link--display': this.variant === 'display',
+            'cre8-c-text-link--secondary': this.variant === 'secondary',
+            'cre8-c-text-link--sm': this.size === 'sm',
+        });
+        return html `
+      <a href="${ifDefined(this.href)}" class="${componentClassName}">
         <slot></slot>
-        ${this.slotNotEmpty("linkAfter") && d`<div class="cre8-c-text-link__after">
+        ${this.slotNotEmpty('linkAfter')
+            && html `<div class="cre8-c-text-link__after">
           <slot name="linkAfter"></slot>
         </div>`}
       </a>
     `;
-  }
-};
-l.styles = [m];
-let e = l;
-a([
-  i()
-], e.prototype, "href");
-a([
-  i()
-], e.prototype, "variant");
-a([
-  i()
-], e.prototype, "size");
-a([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "inverted");
-customElements.get("cre8-text-link") === void 0 && customElements.define("cre8-text-link", e);
-export {
-  e as Cre8TextLink,
-  e as default
-};
+    }
+}
+Cre8TextLink.styles = [styles];
+__decorate([
+    property()
+], Cre8TextLink.prototype, "href", void 0);
+__decorate([
+    property()
+], Cre8TextLink.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8TextLink.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8TextLink.prototype, "inverted", void 0);
+if (customElements.get('cre8-text-link') === undefined) {
+    customElements.define('cre8-text-link', Cre8TextLink);
+}
+export default Cre8TextLink;
+//# sourceMappingURL=text-link.js.map

package/lib/components/text-link/text-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.js","sourceRoot":"","sources":["../../../components/text-link/text-link.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAuC3C,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACpE,4BAA4B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;YACpD,2BAA2B,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACvD,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC3D,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC7C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;iBACA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,kBAAkB;;UAEzD,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;eAC7B,IAAI,CAAA;;eAEA;;KAEV,CAAC;IACJ,CAAC;;AAvDQ,mBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACO;AAYd;IADH,QAAQ,EAAE;6CAC2B;AAWlC;IADH,QAAQ,EAAE;0CACK;AAOZ;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACpB;AAsBzB,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './text-link.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8TextLink extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The link URL\n   */\n  @property()\n      href?: string;\n\n  /**\n   * Style variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li> **display** applies display treatment to the text link (e.g. article title link)</li>\n   * <li> **secondary** applies secondary treatment to the text link (e.g. non-prominent links)</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'display' | 'secondary';\n\n  /**\n   * Size variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li> **sm** renders a smaller typography preset than the default</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      size?: 'sm';\n\n  /**\n   * Inverted variant\n   * 1) Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-text-link', {\n          'cre8-c-text-link--inverted': this.inverted === true,\n          'cre8-c-text-link--display': this.variant === 'display',\n          'cre8-c-text-link--secondary': this.variant === 'secondary',\n          'cre8-c-text-link--sm': this.size === 'sm',\n      });\n\n      return html`\n      <a href=\"${ifDefined(this.href)}\" class=\"${componentClassName}\">\n        <slot></slot>\n        ${this.slotNotEmpty('linkAfter')\n        && html`<div class=\"cre8-c-text-link__after\">\n          <slot name=\"linkAfter\"></slot>\n        </div>`}\n      </a>\n    `;\n  }\n}\n\nif (customElements.get('cre8-text-link') === undefined) {\n    customElements.define('cre8-text-link', Cre8TextLink);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-text-link': Cre8TextLink;\n  }\n}\n\nexport default Cre8TextLink;\n"]}

package/lib/components/text-link/text-link.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-text-link{font-family:var(--cre8-typography-body-default-link-font-family);font-size:var(--cre8-typography-body-default-link-font-size);font-weight:var(--cre8-typography-body-default-link-font-weight);line-height:var(--cre8-typography-body-default-link-line-height);text-decoration:var(--cre8-typography-body-default-link-text-decoration);text-transform:var(--cre8-typography-body-default-link-text-transform);display:inline-flex;color:var(--cre8-color-content-link);cursor:pointer}.cre8-c-text-link:hover,.cre8-c-text-link:focus{text-decoration:underline;color:var(--cre8-color-content-link-hover)}.cre8-c-text-link:active{color:var(--cre8-color-content-link-active)}.cre8-c-text-link:visited{color:var(--cre8-color-content-link-visited)}.cre8-c-text-link--display{color:var(--cre8-color-content-default)}.cre8-c-text-link--secondary{color:var(--cre8-color-content-subtle)}.cre8-c-text-link--inverted{color:var(--cre8-color-content-knockout)}.cre8-c-text-link--sm{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-text-link__after{margin-left:0.5rem}`;
+export default styles;
+//# sourceMappingURL=text-link.styles.js.map

package/lib/components/text-link/text-link.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.styles.js","sourceRoot":"","sources":["../../../components/text-link/text-link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,ymGAAymG,CAAC;AAC5nG,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-text-link{font-family:var(--cre8-typography-body-default-link-font-family);font-size:var(--cre8-typography-body-default-link-font-size);font-weight:var(--cre8-typography-body-default-link-font-weight);line-height:var(--cre8-typography-body-default-link-line-height);text-decoration:var(--cre8-typography-body-default-link-text-decoration);text-transform:var(--cre8-typography-body-default-link-text-transform);display:inline-flex;color:var(--cre8-color-content-link);cursor:pointer}.cre8-c-text-link:hover,.cre8-c-text-link:focus{text-decoration:underline;color:var(--cre8-color-content-link-hover)}.cre8-c-text-link:active{color:var(--cre8-color-content-link-active)}.cre8-c-text-link:visited{color:var(--cre8-color-content-link-visited)}.cre8-c-text-link--display{color:var(--cre8-color-content-default)}.cre8-c-text-link--secondary{color:var(--cre8-color-content-subtle)}.cre8-c-text-link--inverted{color:var(--cre8-color-content-knockout)}.cre8-c-text-link--sm{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-text-link__after{margin-left:0.5rem}`;\nexport default styles;\n"]}