@tmorrow/cre8-wc 1.0.20 → 1.0.23

package/lib/Caret_Down-VI6aytYo.js

@@ -0,0 +1,7 @@
+const C = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7867 4.87812L8.51454 12.1503C8.447 12.2179 8.36679 12.2716 8.27851 12.3082C8.19023 12.3448 8.0956 12.3636 8.00003 12.3636C7.90446 12.3636 7.80983 12.3448 7.72155 12.3082C7.63327 12.2716 7.55306 12.2179 7.48552 12.1503L0.213345 4.87812C0.111526 4.77642 0.0421733 4.64679 0.014066 4.50565C-0.0140413 4.36451 0.000361008 4.2182 0.0554496 4.08525C0.110538 3.95229 0.203836 3.83868 0.323531 3.75878C0.443227 3.67888 0.583938 3.63629 0.727852 3.6364L15.2722 3.6364C15.4161 3.63629 15.5568 3.67888 15.6765 3.75878C15.7962 3.83868 15.8895 3.95229 15.9446 4.08525C15.9997 4.2182 16.0141 4.36451 15.986 4.50565C15.9579 4.64679 15.8885 4.77642 15.7867 4.87812Z"/>
+</svg>
+`;
+export {
+  C as s
+};

package/lib/Caret_Right-DZH0BlfG.js

@@ -0,0 +1,7 @@
+const C = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1506 8.51452L4.87827 15.7869C4.8107 15.8544 4.73049 15.908 4.6422 15.9446C4.55392 15.9812 4.4593 16 4.36375 16C4.26819 16 4.17357 15.9812 4.08529 15.9446C3.99701 15.908 3.9168 15.8544 3.84923 15.7869C3.78166 15.7193 3.72806 15.6391 3.6915 15.5508C3.65493 15.4625 3.63611 15.3679 3.63611 15.2724C3.63611 15.1768 3.65493 15.0822 3.6915 14.9939C3.72806 14.9056 3.78166 14.8254 3.84923 14.7578L10.608 8L3.84923 1.24216C3.71277 1.1057 3.63611 0.920622 3.63611 0.72764C3.63611 0.534658 3.71277 0.34958 3.84923 0.213121C3.98569 0.0766618 4.17077 1.43783e-09 4.36375 0C4.55673 -1.43783e-09 4.74181 0.0766618 4.87827 0.213121L12.1506 7.48548C12.2182 7.55302 12.2719 7.63323 12.3085 7.72151C12.3451 7.8098 12.3639 7.90443 12.3639 8C12.3639 8.09557 12.3451 8.1902 12.3085 8.27849C12.2719 8.36677 12.2182 8.44698 12.1506 8.51452Z"/>
+</svg>
+`;
+export {
+  C as s
+};

package/lib/Error-aYunUubM.js

@@ -0,0 +1,7 @@
+const C = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM7.38462 4.30769C7.38462 4.14448 7.44945 3.98796 7.56486 3.87255C7.68027 3.75714 7.83679 3.69231 8 3.69231C8.16321 3.69231 8.31974 3.75714 8.43514 3.87255C8.55055 3.98796 8.61539 4.14448 8.61539 4.30769V8.61538C8.61539 8.77859 8.55055 8.93512 8.43514 9.05053C8.31974 9.16593 8.16321 9.23077 8 9.23077C7.83679 9.23077 7.68027 9.16593 7.56486 9.05053C7.44945 8.93512 7.38462 8.77859 7.38462 8.61538V4.30769ZM8 12.3077C7.81743 12.3077 7.63897 12.2536 7.48717 12.1521C7.33537 12.0507 7.21706 11.9065 7.14719 11.7379C7.07732 11.5692 7.05904 11.3836 7.09466 11.2045C7.13028 11.0255 7.21819 10.861 7.34729 10.7319C7.47638 10.6028 7.64086 10.5149 7.81992 10.4793C7.99898 10.4437 8.18458 10.4619 8.35325 10.5318C8.52192 10.6017 8.66608 10.72 8.76751 10.8718C8.86894 11.0236 8.92308 11.202 8.92308 11.3846C8.92308 11.6294 8.82583 11.8642 8.65271 12.0373C8.4796 12.2104 8.24482 12.3077 8 12.3077Z"/>
+</svg>
+`;
+export {
+  C as s
+};

package/lib/components/accordion/accordion.js

@@ -0,0 +1,90 @@
+import { css as l, html as b } from "lit";
+import { property as n } from "lit/decorators.js";
+import { Cre8Element as u } from "../cre8-element.js";
+const v = l`@import '../../design-tokens/core/scss/theming/component';
+
+//## ACCORDION
+
+:host {
+  display: block;
+}
+
+.cre8-c-accordion {
+  --cre8-accordion-border-top: var(--cre8-border-width-none);
+  --cre8-accordion-border-bottom: var(--cre8-border-width-none);
+  ::slotted(cre8-accordion:not(:last-child)) {
+    --cre8-accordion-border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);
+  }
+  border: var(--cre8-border-width-none);
+  border-radius: var(--cre8-border-radius-none);
+}
+
+.cre8-c-inner-divider {
+  ::slotted(cre8-accordion-item:last-child) {
+    border-bottom: var(--cre8-border-width-none);
+  }
+  ::slotted(cre8-accordion-item:not(first-child)) {
+    border-top: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);
+  }
+  ::slotted(cre8-accordion-item:first-child) {
+    border-top: var(--cre8-border-width-none);
+  }
+}
+
+.cre8-c-accordion--border-rectangle {
+  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);
+  border-radius: var(--cre8-border-radius-none);
+}
+
+.cre8-c-accordion--border-rounded-bottom {
+  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);
+  border-radius: 0 0 var(--cre8-border-radius-default) var(--cre8-border-radius-default);
+}
+.cre8-c-accordion--border-rounded {
+  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);
+  border-radius: var(--cre8-border-radius-default);
+}
+.cre8-c-accordiong-group--list {
+  list-style: none;
+}
+`;
+var f = Object.defineProperty, s = (t, o, a, h) => {
+  for (var r = void 0, d = t.length - 1, i; d >= 0; d--)
+    (i = t[d]) && (r = i(o, a, r) || r);
+  return r && f(o, a, r), r;
+};
+const c = class c extends u {
+  constructor() {
+    super(...arguments), this.hasDivider = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    const o = this.componentClassNames("cre8-c-accordion", {
+      "cre8-c-inner-divider": this.hasDivider === !0,
+      "cre8-c-accordion--border-none": this.borderType === void 0 || this.borderType === "none",
+      "cre8-c-accordion--border-rectangle": this.borderType === "rectangle",
+      "cre8-c-accordion--border-rounded-bottom": this.borderType === "rounded-bottom",
+      "cre8-c-accordion--border-rounded": this.borderType === "rounded"
+    });
+    return b`
+      <div class="${o}">
+        <slot> </slot>
+      </div>
+    `;
+  }
+};
+c.styles = [v];
+let e = c;
+s([
+  n()
+], e.prototype, "borderType");
+s([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "hasDivider");
+customElements.get("cre8-accordion") === void 0 && customElements.define("cre8-accordion", e);
+export {
+  e as Cre8Accordion,
+  e as default
+};

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

@@ -0,0 +1,337 @@
+import { a as h } from "../../icon-DImqxDiW.js";
+import { css as b, html as i } from "lit";
+import { property as o, state as p } from "lit/decorators.js";
+import { ifDefined as m } from "lit-html/directives/if-defined.js";
+import u from "classnames";
+import { Cre8Element as v } from "../cre8-element.js";
+import "../button/button.js";
+const g = b`@import '../../design-tokens/core/scss/theming/component';
+
+/**
+* Accordion Item panel button
+* 1) Icon rotating on open was causing scrollbar to continuously appear/disappear
+*    during the animation, overflow-x: hidden; prevents this from happening
+*/
+
+:host {
+  display: block;
+  ::slotted(*) {
+    text-align: left;
+    width: 100%;
+  }
+}
+
+.cre8-c-accordion-item {
+  border-bottom: var(--cre8-accordion-item-border-bottom);
+  border-radius: var(--cre8-border-radius-none);
+  --cre8-u-icon-display: flex;
+  --cre8-u-icon-align-items: center;
+  --cre8-u-icon-justify-content: center;
+  padding: calc(8px * 3) calc(8px * 1);
+}
+.cre8-c-accordion-item--small cre8-heading button {
+  @include cre8-typography-title-default();
+}
+.cre8-c-accordion-item--large cre8-heading button {
+  @include cre8-typography-title-large();
+}
+.cre8-c-accordion-item__body {
+  margin-right: calc(8px * 0);
+  margin-left: calc(8px * 0);
+  padding: calc(8px * 0);
+  overflow: hidden;
+  visibility: hidden;
+  transition: height var(--cre8-anim-fade-quick) var(--cre8-anim-ease), visibility var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
+
+  .cre8-c-accordion-item.cre8-is-active & {
+    visibility: visible;
+  }
+}
+
+.cre8-c-accordion-item__body-inner {
+  display: flex;
+  @include cre8-typography-body-default();
+  padding: calc(8px * 1) calc(8px * 6) calc(8px * 0) calc(8px * 1);
+}
+
+cre8-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(8px * 3);
+  min-height: calc(8px * 3);
+  min-width: calc(8px * 3);
+  transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
+  width: calc(8px * 3);
+
+  .cre8-c-accordion-item.cre8-is-active & {
+    transform: rotate(180deg);
+  }
+}
+
+.cre8-c-accordion-item__icon {
+  align-items: center;
+  background: var(--cre8-color-bg-brand-strong);
+  border-radius: var(--cre8-border-radius-round);
+  color: var(--cre8-color-content-knockout);
+  display: flex;
+  height: calc(8px * 4);
+  justify-content: center;
+  margin-left: calc(8px * 1);
+  margin-right: calc(8px * 0.25);
+  min-height: calc(8px * 4);
+  min-width: calc(8px * 4);
+  width: calc(8px * 4);
+
+  .cre8-c-accordion-item.cre8-is-active & {
+    background: var(--cre8-color-button-secondary-bg);
+    border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-button-secondary-border);
+    color: var(--cre8-color-button-secondary-content);
+
+    &:hover {
+      border-color: var(--cre8-color-button-secondary-border-hover);
+      background-color: var(--cre8-color-button-secondary-bg-hover);
+      color: var(--cre8-color-button-secondary-content-hover);
+    }
+
+    &:focus {
+      border-radius: var(--cre8-border-radius-default);
+      box-shadow: calc(8px * 0) calc(8px * 0) calc(8px * 0) calc(8px * 0.25) var(--cre8-color-border-active-outline);
+      outline: none;
+
+      .cre8-c-accordion-item__icon {
+        border-color: var(--cre8-color-button-secondary-border-active);
+        color: var(--cre8-color-button-secondary-content-active);
+        background-color: var(--cre8-color-button-secondary-bg-active);
+      }
+      .cre8-c-accordion-item__tertiary-icon {
+        border-color: var(--cre8-color-border-transparent);
+        color: var(--cre8-color-button-tertiary-content-active);
+        background-color: var(--cre8-color-bg-transparent);
+      }
+    }
+  }
+}
+
+.cre8-c-accordion-item__button {
+  color: var(--cre8-color-content-default);
+  display: block;
+  appearance: none;
+  background-color: var(--cre8-color-bg-transparent);
+  border: var(--cre8-border-width-none);
+  cursor: pointer;
+  padding: calc(8px * 0.5) calc(8px * 1);
+  overflow-x: hidden;
+  transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
+  width: 100%;
+
+  &.cre8-brand-color {
+    color: var(--cre8-color-content-brand-strong);
+  }
+
+  &.cre8-u-justify-content-start {
+    justify-content: flex-start;
+    .cre8-c-accordion-item__icon-before {
+      margin-left: calc(8px * 0);
+    }
+  }
+
+  &:hover {
+    .cre8-c-accordion-item__icon {
+      border-color: var(--cre8-color-button-primary-border-hover);
+      background-color: var(--cre8-color-button-primary-bg-hover);
+      color: var(--cre8-color-button-primary-content-hover);
+      .cre8-c-accordion-item.cre8-is-active & {
+        border-color: var(--cre8-color-button-secondary-border-hover);
+        background-color: var(--cre8-color-button-secondary-bg-hover);
+        color: var(--cre8-color-button-secondary-content-hover);
+      }
+    }
+    .cre8-c-accordion-item__tertiary-icon {
+      border-color: var(--cre8-color-border-transparent);
+      color: var(--cre8-color-button-tertiary-content-hover);
+      background-color: var(--cre8-color-bg-transparent);
+    }
+  }
+
+  &:focus {
+    border-radius: var(--cre8-border-radius-default);
+    box-shadow: calc(8px * 0) calc(8px * 0) calc(8px * 0) calc(8px * 0.25) var(--cre8-color-border-active-outline);
+    outline: none;
+
+    .cre8-c-accordion-item__icon {
+      border-color: var(--cre8-color-button-primary-border-active);
+      color: var(--cre8-color-button-primary-content-active);
+      background-color: var(--cre8-color-button-primary-bg-active);
+    }
+    .cre8-c-accordion-item__tertiary-icon {
+      border-color: var(--cre8-color-border-transparent);
+      color: var(--cre8-color-button-tertiary-content-active);
+      background-color: var(--cre8-color-bg-transparent);
+    }
+  }
+}
+.cre8-c-accordion-item--icon-before {
+  .cre8-c-accordion-item__body {
+    margin-left: calc(8px * 5);
+  }
+}
+
+.cre8-c-accordion-item__icon-before {
+  margin-right: calc(8px * 1.5);
+
+  h4[slot='header'] {
+    display: block;
+    pointer-events: none;
+  }
+}
+
+.cre8-c-accordion-item__button slot {
+  display: contents;
+  text-align: initial;
+}
+.cre8-c-accordion-item--icon-before-heading-text{
+  display: flex;
+  text-align: left;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  min-width: 100%
+}
+.cre8-c-accordion-item--icon-after-heading-text{
+  display: flex;
+  text-align: left;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: 100%
+}
+`;
+var f = Object.defineProperty, r = (d, t, a, y) => {
+  for (var c = void 0, n = d.length - 1, l; n >= 0; n--)
+    (l = d[n]) && (c = l(t, a, c) || c);
+  return c && f(t, a, c), c;
+};
+const s = class s extends v {
+  constructor() {
+    super(), this.isActive = !1, this.size = "sm", this.headingTagVariant = "h3";
+    const t = Math.floor(Math.random() * 9e5) + 1e5;
+    this._ariaControls = `cre8-accordion-item-details-${t}`, this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${t}`;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._setContentHeight(), this.isActive && (this._fullyOpen = !0, this._setContentHeight());
+  }
+  async _setContentHeight() {
+    await this.updateComplete, this.isActive && !this._fullyOpen || !this.isActive && this._fullyOpen ? this._height = `${this.shadowRoot?.querySelector(".cre8-c-accordion-item__body-inner")?.scrollHeight}px` : this.isActive && this._fullyOpen ? this._height = "auto" : !this.isActive && !this._fullyOpen && (this._height = "0");
+  }
+  _toggleAccordionItem() {
+    this.isActive = !this.isActive, this.isActive ? (this._setContentHeight(), setTimeout(() => {
+      this._fullyOpen = !0, this._setContentHeight();
+    }, 350)) : (this._setContentHeight(), setTimeout(() => {
+      this._fullyOpen = !1, this._setContentHeight();
+    }, 50));
+  }
+  render() {
+    const t = this.componentClassNames("cre8-c-accordion-item", {
+      "cre8-is-active": this.isActive,
+      "cre8-c-accordion-item--icon-before": this.iconBefore,
+      "cre8-c-accordion-item--small": this.size === "sm",
+      "cre8-c-accordion-item--large": this.size === "lg"
+    }), a = u("cre8-c-accordion-item__button", {
+      "cre8-is-active": this.isActive,
+      "cre8-u-justify-content-start": this.iconBefore,
+      "cre8-brand-color": this.brandHeader === !0
+    });
+    return i` <div id=${this.accordionItemId} class="${t}">
+      <cre8-heading
+        type=${this.size === "lg" ? "title-large" : "title-default"}
+        part="heading"
+        ?brandColor=${this.brandHeader}
+        tagVariant="${this.headingTagVariant ?? "h3"}"
+        class="cre8-c-accordion-item__header"
+      >
+        <button
+          class="${a}"
+          aria-expanded="${m(this.isActive)}"
+          aria-controls="${this._ariaControls}"
+          part="button"
+          role="button"
+          id="${this.id}"
+          @click=${this._toggleAccordionItem}
+        >
+          ${this.iconBefore ? i`
+            <div class="cre8-c-accordion-item--icon-before-heading-text">
+                <div
+                  class=${this.tertiaryIcon ? "cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-before" : "cre8-c-accordion-item__icon cre8-c-accordion-item__icon-before"}
+                >
+                  <cre8-icon rotate="180" svg=${h} aria-hidden="true"></cre8-icon>
+                </div>
+                ${this.heading ?? i` <slot name="heading"></slot>`}
+            </div>
+              ` : i`
+          <div class="cre8-c-accordion-item--icon-after-heading-text">
+            ${this.heading ?? i` <slot name="heading"></slot>`}
+                <div
+                  class=${this.tertiaryIcon ? "cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-after" : "cre8-c-accordion-item__icon cre8-c-accordion-item__icon-after"}
+                >
+                  <cre8-icon rotate="180" svg='${h}' aria-hidden="true"></cre8-icon>
+                </div>
+            </div>`}
+        </button>
+      </cre8-heading>
+      <div
+        class="cre8-c-accordion-item__body"
+        aria-hidden="${!this.isActive}"
+        id="${this._ariaControls}"
+        part="body"
+        style=${`height: ${this._height}`}
+      >
+        <div class="cre8-c-accordion-item__body-inner" part="body-inner">
+          <slot></slot>
+        </div>
+      </div>
+    </div>`;
+  }
+};
+s.styles = [g];
+let e = s;
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "isActive");
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "accordionItemId");
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "iconBefore");
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "tertiaryIcon");
+r([
+  o({ reflect: !0 })
+], e.prototype, "size");
+r([
+  o({ reflect: !0 })
+], e.prototype, "headingTagVariant");
+r([
+  o({ type: String })
+], e.prototype, "heading");
+r([
+  o({ type: Boolean })
+], e.prototype, "brandHeader");
+r([
+  o({ attribute: "aria-controls" })
+], e.prototype, "_ariaControls");
+r([
+  p()
+], e.prototype, "_height");
+r([
+  p()
+], e.prototype, "_fullyOpen");
+customElements.get("cre8-accordion-item") === void 0 && customElements.define("cre8-accordion-item", e);
+export {
+  e as Cre8AccordionItem,
+  e as default
+};