@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/band/band.js

@@ -1,35 +1,38 @@
-import { css as h, html as c } from "lit";
-import { property as l } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const p = h`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-band{background:var(--cre8-color-bg-subtle);padding:1.5rem 0}@media all and (min-width: 1200px){.cre8-c-band{padding:2rem 0}}.cre8-c-band--branded{color:var(--cre8-color-content-knockout);background:var(--cre8-theme-color-utility-information)}.cre8-c-band--full-height{height:100%}`;
-var f = Object.defineProperty, o = (s, r, d, x) => {
-  for (var e = void 0, i = s.length - 1, n; i >= 0; i--)
-    (n = s[i]) && (e = n(r, d, e) || e);
-  return e && f(r, d, 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 m {
-  render() {
-    const r = this.componentClassNames("cre8-c-band", {
-      "cre8-c-band--branded": this.variant === "branded",
-      "cre8-c-band--full-height": this.fullHeight === !0
-    });
-    return c`
-      <div class="${r}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './band.styles.js';
+/**
+ * @slot - The band content
+ */
+export class Cre8Band extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-band', {
+            'cre8-c-band--branded': this.variant === 'branded',
+            'cre8-c-band--full-height': this.fullHeight === true,
+        });
+        return html `
+      <div class="${componentClassName}">
         <slot></slot>
       </div>
     `;
-  }
-};
-a.styles = [p];
-let t = a;
-o([
-  l()
-], t.prototype, "variant");
-o([
-  l({ type: Boolean, reflect: !0 })
-], t.prototype, "fullHeight");
-customElements.get("cre8-band") === void 0 && customElements.define("cre8-band", t);
-export {
-  t as Cre8Band,
-  t as default
-};
+    }
+}
+Cre8Band.styles = [styles];
+__decorate([
+    property()
+], Cre8Band.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Band.prototype, "fullHeight", void 0);
+if (customElements.get('cre8-band') === undefined) {
+    customElements.define('cre8-band', Cre8Band);
+}
+export default Cre8Band;
+//# sourceMappingURL=band.js.map

package/lib/components/band/band.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"band.js","sourceRoot":"","sources":["../../../components/band/band.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,kBAAkB,CAAC;AAEtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAqBvC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAC/D,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAClD,0BAA0B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,kBAAkB;;;KAGjC,CAAC;IACJ,CAAC;;AA/BQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAWvB;IADH,QAAQ,EAAE;yCACa;AAOpB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAClB;AAgB3B,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './band.styles.js';\n\n/**\n * @slot - The band content\n */\nexport class Cre8Band extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Gradient variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**1** renders the band with the set gradient background</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'branded';\n\n  /**\n   * Full height variant\n   * 1) Sets the height to 100%\n   */\n  @property({ type: Boolean, reflect: true })\n      fullHeight?: boolean;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-band', {\n          'cre8-c-band--branded': this.variant === 'branded',\n          'cre8-c-band--full-height': this.fullHeight === true,\n      });\n\n      return html`\n      <div class=\"${componentClassName}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-band') === undefined) {\n    customElements.define('cre8-band', Cre8Band);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-band': Cre8Band;\n  }\n}\n\nexport default Cre8Band;\n"]}

package/lib/components/band/band.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-band{background:var(--cre8-color-bg-subtle);padding:1.5rem 0}@media all and (min-width: 1200px){.cre8-c-band{padding:2rem 0}}.cre8-c-band--branded{color:var(--cre8-color-content-knockout);background:var(--cre8-theme-color-utility-information)}.cre8-c-band--full-height{height:100%}`;
+export default styles;
+//# sourceMappingURL=band.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"band.styles.js","sourceRoot":"","sources":["../../../components/band/band.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,2iEAA2iE,CAAC;AAC9jE,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-band{background:var(--cre8-color-bg-subtle);padding:1.5rem 0}@media all and (min-width: 1200px){.cre8-c-band{padding:2rem 0}}.cre8-c-band--branded{color:var(--cre8-color-content-knockout);background:var(--cre8-theme-color-utility-information)}.cre8-c-band--full-height{height:100%}`;\nexport default styles;\n"]}

package/lib/components/breadcrumbs/breadcrumbs.js

@@ -1,34 +1,58 @@
-import { css as n, html as m } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const h = n`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-breadcrumbs__list{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;gap:0.5rem}`;
-var c = Object.defineProperty, f = (s, t, l, x) => {
-  for (var e = void 0, a = s.length - 1, d; a >= 0; a--)
-    (d = s[a]) && (e = d(t, l, e) || e);
-  return e && c(t, l, e), e;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const i = class i extends p {
-  constructor() {
-    super(...arguments), this.navAriaLabel = "breadcrumbs";
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-breadcrumbs", {});
-    return m`
-      <nav aria-label="${this.navAriaLabel}"  class="${t}">
+/* eslint-disable lit-a11y/list --
+* <slot> is a non-content element, which is permitted as a direct child within a list
+* Ref https://dequeuniversity.com/rules/axe/4.8/list regarding non-content elements
+*/
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './breadcrumbs.styles.js';
+/**
+ * The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located.
+ * The breadcrumbs component shows the users their current location relative to the information architecture
+ * It enables the users to quickly move up to a parent level or previous location.
+ *
+ * ## How to Use
+ *
+ * - Import 'Breadcrumbs' component.
+ * - Add the pages in the path of the breadcrumbs using `cre8-breadcrumbs-item`.
+ * All the pages in the breadcrumbs component should be interactive.
+ * - All the page should link to their respective pages (except the current page) using `cre8-link`.
+ * - The current page is included in the breadcrumbs trail.
+ * - The current page is always the last text listed and is not an interactive link.
+ *
+ * @slot - The component content
+ */
+export class Cre8Breadcrumbs extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * aria-label attribute to designate at name for the nav. Can be override by user
+         */
+        this.navAriaLabel = 'breadcrumbs';
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-breadcrumbs', {});
+        return html `
+      <nav aria-label="${this.navAriaLabel}"  class="${componentClassNames}">
         <ol class="cre8-c-breadcrumbs__list">
           <slot></slot>
         </ol>
       </nav>
     `;
-  }
-};
-i.styles = [h];
-let r = i;
-f([
-  o()
-], r.prototype, "navAriaLabel");
-customElements.get("cre8-breadcrumbs") === void 0 && customElements.define("cre8-breadcrumbs", r);
-export {
-  r as Cre8Breadcrumbs,
-  r as default
-};
+    }
+}
+Cre8Breadcrumbs.styles = [styles];
+__decorate([
+    property()
+], Cre8Breadcrumbs.prototype, "navAriaLabel", void 0);
+if (customElements.get('cre8-breadcrumbs') === undefined) {
+    customElements.define('cre8-breadcrumbs', Cre8Breadcrumbs);
+}
+export default Cre8Breadcrumbs;
+//# sourceMappingURL=breadcrumbs.js.map

package/lib/components/breadcrumbs/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../components/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":";;;;;;AAAA;;;EAGE;AACF,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QAGE;;WAEG;QAEC,iBAAY,GAAW,aAAa,CAAC;IAa3C,CAAC;IAXC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;yBACQ,IAAI,CAAC,YAAY,aAAa,mBAAmB;;;;;KAKrE,CAAC;IACJ,CAAC;;AAlBQ,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,EAAE;qDAC8B;AAe3C,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC;AAC/D,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["/* eslint-disable lit-a11y/list --\n* <slot> is a non-content element, which is permitted as a direct child within a list\n* Ref https://dequeuniversity.com/rules/axe/4.8/list regarding non-content elements\n*/\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './breadcrumbs.styles.js';\n\n/**\n * The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located.\n * The breadcrumbs component shows the users their current location relative to the information architecture\n * It enables the users to quickly move up to a parent level or previous location.\n *\n * ## How to Use\n *\n * - Import 'Breadcrumbs' component.\n * - Add the pages in the path of the breadcrumbs using `cre8-breadcrumbs-item`.\n * All the pages in the breadcrumbs component should be interactive.\n * - All the page should link to their respective pages (except the current page) using `cre8-link`.\n * - The current page is included in the breadcrumbs trail.\n * - The current page is always the last text listed and is not an interactive link.\n *\n * @slot - The component content\n */\n\nexport class Cre8Breadcrumbs extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * aria-label attribute to designate at name for the nav. Can be override by user\n   */\n  @property()\n      navAriaLabel: string = 'breadcrumbs';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-breadcrumbs', {});\n\n      return html`\n      <nav aria-label=\"${this.navAriaLabel}\"  class=\"${componentClassNames}\">\n        <ol class=\"cre8-c-breadcrumbs__list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  }\n}\n\nif (customElements.get('cre8-breadcrumbs') === undefined) {\n    customElements.define('cre8-breadcrumbs', Cre8Breadcrumbs);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-breadcrumbs': Cre8Breadcrumbs;\n  }\n}\n\nexport default Cre8Breadcrumbs;\n"]}

package/lib/components/breadcrumbs/breadcrumbs.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:inline-flex}.cre8-c-breadcrumbs__list{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;gap:0.5rem}`;
+export default styles;
+//# sourceMappingURL=breadcrumbs.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.styles.js","sourceRoot":"","sources":["../../../components/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,w4DAAw4D,CAAC;AAC35D,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:inline-flex}.cre8-c-breadcrumbs__list{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;gap:0.5rem}`;\nexport default styles;\n"]}

package/lib/components/breadcrumbs-item/breadcrumbs-item.js

@@ -1,23 +1,25 @@
-import { s as i } from "../../Caret_Right-DZH0BlfG.js";
-import { css as s, html as a } from "lit";
-import { Cre8Element as l } from "../cre8-element.js";
-import "../../icon-D22g8aWB.js";
-const n = s`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-breadcrumbs--item{display:inline-flex;align-items:center}:host(:last-child) .cre8-c-breadcrumbs--item cre8-icon{display:none}cre8-icon{margin-left:0.5rem;color:var(--cre8-color-content-subtle);display:inline-flex}cre8-icon svg{height:1rem;width:1rem}`, t = class t extends l {
-  // Set the role before rendering for better accessibility
-  // Because we're settting this role, we don't wrap the slot in an <li>
-  connectedCallback() {
-    this.setAttribute("role", "listitem"), super.connectedCallback();
-  }
-  render() {
-    const r = this.componentClassNames(
-      "cre8-c-breadcrumbs--item",
-      {}
-    );
-    return a`
-      <div class="${r}">
+import svgCaretRight from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';
+import { html, } from 'lit';
+import { Cre8Element } from '../cre8-element';
+import '../icon/icon';
+import styles from './breadcrumbs-item.styles.js';
+/**
+ * @slot - The component content, the expected slotted content is a Cre8 Link or a String for the "terminal node"
+ */
+export class Cre8BreadcrumbsItem extends Cre8Element {
+    // Set the role before rendering for better accessibility
+    // Because we're settting this role, we don't wrap the slot in an <li>
+    connectedCallback() {
+        this.setAttribute('role', 'listitem');
+        super.connectedCallback();
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-breadcrumbs--item', {});
+        return html `
+      <div class="${componentClassNames}">
         <slot></slot>
         <cre8-icon
-          svg="${i}"
+          svg="${svgCaretRight}"
           rotate="90"
           container-class="cre8-c-icon-wrapper"
           aria-hidden="true"
@@ -26,12 +28,11 @@ const n = s`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-b
         </cre8-icon>
       </div>
     `;
-  }
-};
-t.styles = [n];
-let e = t;
-customElements.get("cre8-breadcrumbs-item") === void 0 && customElements.define("cre8-breadcrumbs-item", e);
-export {
-  e as Cre8BreadcrumbsItem,
-  e as default
-};
+    }
+}
+Cre8BreadcrumbsItem.styles = [styles];
+if (customElements.get('cre8-breadcrumbs-item') === undefined) {
+    customElements.define('cre8-breadcrumbs-item', Cre8BreadcrumbsItem);
+}
+export default Cre8BreadcrumbsItem;
+//# sourceMappingURL=breadcrumbs-item.js.map

package/lib/components/breadcrumbs-item/breadcrumbs-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs-item.js","sourceRoot":"","sources":["../../../components/breadcrumbs-item/breadcrumbs-item.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,yGAAyG,CAAC;AACpI,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,WAAW;IAGhD,yDAAyD;IACzD,sEAAsE;IACtE,iBAAiB;QACb,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAChD,0BAA0B,EAC1B,EAAE,CACL,CAAC;QAEF,OAAO,IAAI,CAAA;oBACC,mBAAmB;;;iBAGtB,aAAa;;;;;;;;KAQzB,CAAC;IACF,CAAC;;AA5BM,0BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AA+B7B,IAAI,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;AACxE,CAAC;AAQD,eAAe,mBAAmB,CAAC","sourcesContent":["import svgCaretRight from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';\nimport { html,  } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './breadcrumbs-item.styles.js';\n\n/**\n * @slot - The component content, the expected slotted content is a Cre8 Link or a String for the \"terminal node\"\n */\nexport class Cre8BreadcrumbsItem extends Cre8Element {\n    static styles = [styles];\n\n    // Set the role before rendering for better accessibility\n    // Because we're settting this role, we don't wrap the slot in an <li>\n    connectedCallback() {\n        this.setAttribute('role', 'listitem');\n        super.connectedCallback();\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames(\n            'cre8-c-breadcrumbs--item',\n            {}\n        );\n\n        return html`\n      <div class=\"${componentClassNames}\">\n        <slot></slot>\n        <cre8-icon\n          svg=\"${svgCaretRight}\"\n          rotate=\"90\"\n          container-class=\"cre8-c-icon-wrapper\"\n          aria-hidden=\"true\"\n          class=\"cre8-c-icon-wrapper\"\n        >\n        </cre8-icon>\n      </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-breadcrumbs-item') === undefined) {\n    customElements.define('cre8-breadcrumbs-item', Cre8BreadcrumbsItem);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-breadcrumbs-item': Cre8BreadcrumbsItem;\n  }\n}\n\nexport default Cre8BreadcrumbsItem;\n"]}

package/lib/components/breadcrumbs-item/breadcrumbs-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:inline-flex}.cre8-c-breadcrumbs--item{display:inline-flex;align-items:center}:host(:last-child) .cre8-c-breadcrumbs--item cre8-icon{display:none}cre8-icon{margin-left:0.5rem;color:var(--cre8-color-content-subtle);display:inline-flex}cre8-icon svg{height:1rem;width:1rem}`;
+export default styles;
+//# sourceMappingURL=breadcrumbs-item.styles.js.map

package/lib/components/breadcrumbs-item/breadcrumbs-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs-item.styles.js","sourceRoot":"","sources":["../../../components/breadcrumbs-item/breadcrumbs-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,siEAAsiE,CAAC;AACzjE,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:inline-flex}.cre8-c-breadcrumbs--item{display:inline-flex;align-items:center}:host(:last-child) .cre8-c-breadcrumbs--item cre8-icon{display:none}cre8-icon{margin-left:0.5rem;color:var(--cre8-color-content-subtle);display:inline-flex}cre8-icon svg{height:1rem;width:1rem}`;\nexport default styles;\n"]}