@tmorrow/cre8-wc 1.0.14

package/lib/date-picker-C8EEd7H8.js

@@ -0,0 +1,2366 @@
+import { css as f, html as c, nothing as p } from "lit";
+import { ifDefined as b } from "lit-html/directives/if-defined.js";
+import { property as a, query as C, state as v } from "lit/decorators.js";
+import { a as B } from "./field-J4OEwkTq.js";
+import { Cre8Element as _ } from "./components/components/cre8-element/components/cre8-element.js";
+import "./icon-ClNBixxp.js";
+import { Cre8FormElement as I } from "./components/components/cre8-form-element/components/cre8-form-element.js";
+const P = f`@import '../../design-tokens/core/scss/theming/component';
+@import '../../design-tokens/core/scss/theming/component';
+@import "design-tokens/core/scss/utilities/visibility";
+
+:host {
+  display: block;
+}
+
+/** 
+ * Date Field Label 
+ */
+.cre8-c-date-picker__label {
+  @include label-styles;
+}
+
+/** 
+ * Date Field Body
+ * 1) The div that contains the input and icons 
+ */
+.cre8-c-date-picker__body {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/** 
+ * Date Field Default Calendar Icon Button
+ * 1) Removes default calendar button and default calendar in Chrome
+ */
+input::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+input[type="date"]::-webkit-input-placeholder {
+  visibility: hidden !important;
+}
+
+.cre8-c-date-picker__calendar-icon-button {
+  position: absolute;
+  right: size(1);
+  background: var(--cre8-color-bg-default);
+  border: none;
+  border-radius: 0;
+
+  --cre8-icon-height: size(3);
+  --cre8-icon-width: size(3); 
+
+  .cre8-c-date-picker--disabled &, .cre8-c-date-picker--read-only & {
+    background: var(--cre8-color-bg-disabled);
+  }
+}
+
+/** 
+ * Date Field Input 
+ * 1) The html5 input element
+ */
+.cre8-c-date-picker__input {
+  @include input-styles;
+
+  /**
+   * Readonly input styles
+   */
+  &:read-only {
+    background-color: var(--cre8-color-bg-disabled);
+    border-color: var(--cre8-color-border-disabled);
+    cursor: default;
+  }
+}
+`, R = f`@import '../../design-tokens/core/scss/theming/component';
+
+.cre8-c-calendar {
+  min-width: 340px; // this is the width of a calendar with the longest character month (September)
+  border: var(--cre8-color-border-strong);
+  border-radius: var(--cre8-border-radius-default);
+  border-width: var(--cre8-border-width-default);
+  border-style: var(--cre8-border-style-default);
+  margin-top: size(0.5);
+  background-color: var(--cre8-color-bg-default);
+  position: absolute;
+}
+
+/* shortcuts */
+.cre8-c-calendar__header-shortcuts {
+  display: inline-flex;
+  justify-content: center;
+  width: 100%;
+  padding-top: size(2);
+  padding-bottom: size(1);
+
+  cre8-button + cre8-button {
+    padding-left: size(1);
+  }
+
+  cre8-button {
+    max-height: 32px;
+  }
+}
+
+table {
+  width: 100%;
+}
+
+/* table row */
+tr {
+  @include cre8-typography-body-default();
+  display: grid;
+  grid-row-gap: 0.33em;
+  grid-template-columns: repeat(7, 1fr);
+  list-style: none;
+  margin: unset;
+  padding: unset;
+  position: relative;
+}
+
+/* day wrappers */
+td {
+  align-items: center;
+  display: flex;
+  height: 48px;
+  justify-content: center;
+  width: 48px;
+}
+
+/* days */
+.cre8-c-calendar :is(thead, tbody) :is(span, button) {
+  @include cre8-typography-body-default();
+  align-items: center;
+  block-size: 2em;
+  border-radius: var(--cre8-border-radius-brand);
+  display: flex;
+  inline-size: 2em;
+  justify-content: center;
+  margin-block: var(0, 0 0.33em);
+  user-select: none;
+}
+
+/* day buttons */
+.cre8-c-calendar__day-button {
+  border: none;
+  background: none;
+  margin: 0;
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    background: var(--cre8-color-bg-default-hover);
+  }
+
+  &.cre8-c-calendar__different-month {
+    color: var(--cre8-color-content-subtle);
+
+    &:hover,
+    &:focus {
+      background: var(--cre8-color-bg-subtle);
+    }
+  }
+
+  &[data-today] {
+    color: var(--cre8-color-content-brand);
+    border-color: var(--cre8-color-border-brand);
+    border-width: var(--cre8-border-width-default);
+    border-style: var(--cre8-border-style-default);
+  }
+  
+  &[data-selected] {
+    background: var(--cre8-color-bg-brand-strong);
+    color: var(--cre8-color-content-knockout);
+  
+    &:hover,
+    &:focus {
+      background: var(--cre8-color-bg-brand-strong-hover);
+    }
+  }
+}
+
+`, q = f`@import '../../design-tokens/core/scss/theming/component';
+
+.cre8-c-calendar-month-modal {
+  padding: size(1);
+}
+
+/* grid */
+ol {
+  @include cre8-typography-body-default();
+  display: grid;
+  grid-row-gap: 0.33em;
+  grid-template-columns: repeat(3, 1fr);
+  list-style: none;
+  margin: unset;
+  padding: unset;
+}
+
+li {
+  display: inline-flex;
+  justify-content: center;
+}
+`, j = f`@import '../../design-tokens/core/scss/theming/component';
+
+/* ------------------------------------ *\
+#SPINNER
+\* ------------------------------------ */
+
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-circle-animation {
+  0%,
+  25% {
+    stroke-dashoffset: 280;
+    transform: rotate(0);
+  }
+
+  50%,
+  75% {
+    stroke-dashoffset: 75;
+    transform: rotate(45deg);
+  }
+
+  100% {
+    stroke-dashoffset: 280;
+    transform: rotate(360deg);
+  }
+}
+
+:host {
+  display: inline-block;
+  --spinner-stroke-dasharray: 282.743px;
+  --spinner-large-stroke-width: 10;
+  --spinner-small-stroke-width: 14;
+  --spinner-large-width: 4.5rem;
+  --spinner-small-width: 1.5rem;
+  @include cre8-typography-label-small();
+}
+
+.cre8-c-spinner,
+.cre8-c-spinner--large {
+  --spinner-height: var(--spinner-large-width);
+  --spinner-width: var(--spinner-large-width);
+  --icon-color: var(--cre8-color-content-brand);
+
+  .cre8-c-spinner__icon {
+    display: block;
+  }
+
+  .cre8-c-spinner__label {
+    display: block;
+    margin-top: var(--cre8-spacing-8);
+  }
+}
+
+.cre8-c-spinner--small {
+  --spinner-height: var(--spinner-small-width);
+  --spinner-width: var(--spinner-small-width);
+  --icon-color: var(--cre8-color-content-brand);
+  display: flex;
+  align-items: center;
+  .cre8-c-spinner__label {
+    display: inline-block;
+    margin-left: var(--cre8-spacing-8);
+    margin-top: 0;
+    vertical-align: 0.35rem;
+  }
+}
+
+.cre8-c-spinner--inverse {
+  --icon-color: var(--cre8-color-content-brand-knockout);
+  --label-color: var(--cre8-color-content-brand-knockout); // --cre8-color-content-default-knockout
+}
+
+.cre8-c-spinner--secondary.cre8-c-spinner--inverse.cre8-c-spinner--neutral {
+  --icon-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
+  --label-color: var(--cre8-color-button-secondary-neutral-inverse-content-active); // --cre8-color-content-default-knockout
+}
+
+.cre8-c-spinner--neutral {
+  --icon-color: var(--cre8-color-button-secondary-neutral-content-active);
+}
+
+.cre8-c-spinner--primary.cre8-c-spinner--inverse {
+  --icon-color: var(--cre8-color-button-primary-inverse-content-active);
+}
+
+.cre8-c-spinner--secondary.cre8-c-spinner--inverse {
+  --icon-color: var(--cre8-color-button-secondary-inverse-content-active);
+}
+
+.cre8-c-spinner--tertiary.cre8-c-spinner--inverse {
+  --icon-color: var(--cre8-color-button-tertiary-inverse-content-active);
+}
+
+.cre8-c-spinner__label {
+  color: var(--label-color, var(--cre8-color-content-default));
+}
+
+.cre8-c-spinner__hidden-label {
+  display: none;
+}
+
+.cre8-c-spinner__icon {
+  height: var(--spinner-height, 1em);
+  width: var(--spinner-width, 1em);
+
+  circle {
+    fill: transparent;
+    stroke: var(--icon-color, inherit);
+    stroke-dasharray: var(--spinner-stroke-dasharray);
+    stroke-linecap: round;
+    stroke-width: var(--spinner-large-stroke-width);
+    transform-origin: 50% 50%;
+  }
+}
+
+.cre8-c-spinner__icon-small {
+  circle {
+    stroke-width: var(--spinner-small-stroke-width);
+  }
+}
+
+.cre8-c-spinner--indeterminate .cre8-c-spinner__icon {
+  animation: loading 2s linear 0s infinite;
+
+  circle {
+    animation-duration: 1.4s;
+    animation-iteration-count: infinite;
+    animation-name: spinner-circle-animation;
+    animation-timing-function: ease-in-out;
+  }
+}
+
+.cre8-c-spinner--determinate .cre8-c-spinner__icon {
+  overflow: hidden;
+  transform: rotate(-90deg);
+  transform-origin: center center;
+}
+`;
+var L = Object.defineProperty, w = (u, e, r, o) => {
+  for (var t = void 0, n = u.length - 1, i; n >= 0; n--)
+    (i = u[n]) && (t = i(e, r, t) || t);
+  return t && L(e, r, t), t;
+};
+const S = class S extends _ {
+  constructor() {
+    super(), this.progress = 0, this.size = "large";
+    const e = Math.floor(Math.random() * 9e5) + 1e5;
+    this.labelId = `cre8-spinner-${e}`;
+  }
+  renderDeterminateSpinner() {
+    const e = Math.max(Math.min(100, this.progress === 0 ? this.progress = 1 : this.progress), 0), r = 2 * 3.1415926 * 45 - e / 100 * (2 * 3.1415926 * 45);
+    return c` ${this.size === "small" ? c`
+          <svg class="cre8-c-spinner__icon cre8-c-spinner__icon-small" aria-hidden="true" viewBox="0 0 100 100">
+            <circle cx="50%" cy="50%" r="43" stroke-dashoffset="${r}"></circle>
+          </svg>
+        ` : c` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
+          <circle cx="50%" cy="50%" r="45" stroke-dashoffset="${r}"></circle>
+        </svg>`}`;
+  }
+  renderInDeterminateSpinner() {
+    return c` ${this.size === "small" ? c`
+          <svg class="cre8-c-spinner__icon cre8-c-spinner__icon-small" aria-hidden="true" viewBox="0 0 100 100">
+            <circle cx="50%" cy="50%" r="43"></circle>
+          </svg>
+        ` : c` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
+          <circle cx="50%" cy="50%" r="45"></circle>
+        </svg>`}`;
+  }
+  render() {
+    const e = this.componentClassNames("cre8-c-spinner", {
+      "cre8-c-spinner--large": this.size === "large",
+      "cre8-c-spinner--small": this.size === "small",
+      "cre8-c-spinner--inverse": this.inverse,
+      "cre8-c-spinner--neutral": this.neutral,
+      "cre8-c-spinner--primary": this.buttonVariant === "primary",
+      "cre8-c-spinner--secondary": this.buttonVariant === "secondary",
+      "cre8-c-spinner--tertiary": this.buttonVariant === "tertiary",
+      "cre8-c-spinner--determinate": this.determinate,
+      "cre8-c-spinner--indeterminate": !this.determinate
+    });
+    return c`
+      <div
+        class="${e}"
+        role="progressbar"
+        aria-labelledby="${this.labelId}"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.determinate ? this.progress : p}"
+        part="base"
+      >
+        ${this.determinate ? this.renderDeterminateSpinner() : this.renderInDeterminateSpinner()}
+        <div
+          id="${this.labelId}"
+          class="${this.label ? "cre8-c-spinner__label" : "cre8-c-spinner__hidden-label"}"
+          part="label"
+        >
+          ${this.label}
+        </div>
+      </div>
+    `;
+  }
+};
+S.styles = j;
+let g = S;
+w([
+  a({ type: Boolean, reflect: !0 })
+], g.prototype, "determinate");
+w([
+  a({ type: Boolean, reflect: !0 })
+], g.prototype, "inverse");
+w([
+  a({ type: Boolean, reflect: !0 })
+], g.prototype, "neutral");
+w([
+  a()
+], g.prototype, "buttonVariant");
+w([
+  a()
+], g.prototype, "label");
+w([
+  a({ reflect: !0, type: Number })
+], g.prototype, "progress");
+w([
+  a()
+], g.prototype, "size");
+customElements.get("cre8-loading-spinner") === void 0 && customElements.define("cre8-loading-spinner", g);
+const K = f`
+@import '../../design-tokens/core/scss/theming/component';
+
+:host {
+  display: inline-flex;
+}
+:host([fullWidth]) {
+  display: flex;
+
+}
+/**
+ * 1) Button or link that has functionality to it
+ */
+
+/**
+ * Primary button
+ */
+.cre8-c-button {
+  @include cre8-typography-label-default();
+  width: var(--cre8-button-width, auto);
+  height: var(--cre8-button-height, auto);
+  min-width: var(--cre8-button-min-width, auto);
+  min-height: var(--cre8-button-min-height, auto);
+  justify-content: center;
+  text-align: center;
+  margin-top: var( --cre8-button-margin-top, 0);
+  margin-bottom: var( --cre8-button-margin-bottom, 0);
+  margin-left: var( --cre8-button-margin-left, 0);
+  margin-right: var( --cre8-button-margin-right, 0);
+  display: inline-flex;
+  align-items: center;
+  border-width: var(--cre8-border-width-button-default);
+  box-shadow: var(--cre8-shadow-button);
+  padding-top: var(--cre8-button-padding-vertical-medium);
+  padding-right: var(--cre8-button-padding-horizontal-medium);
+  padding-bottom: var(--cre8-button-padding-vertical-medium);
+  padding-left: var(--cre8-button-padding-horizontal-medium);
+  margin: 0;
+  cursor: pointer;
+  border-style: var(--cre8-border-style-default);
+  transition: revert;
+  transform: revert;
+  white-space: nowrap;
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-visible {
+    border-style: var(--cre8-border-style-default);
+    box-shadow: none;
+    transform: revert;
+    transition: revert;
+  }
+  &.cre8-c-button--primary {
+    background: var(--cre8-color-button-primary-bg);
+    border-width: var(--cre8-border-width-button-default);
+    border-color: var(--cre8-color-button-primary-border);
+    border-radius: var(--cre8-border-radius-button);
+    box-shadow: var(--cre8-shadow-button);
+    color: var(--cre8-color-button-primary-content);
+    --cre8-icon-fill: var(--cre8-color-button-primary-content);
+    &:hover,
+    &:focus {
+      box-shadow: none;
+      --cre8-icon-fill: var(--cre8-color-button-primary-content-hover);
+      color: var(--cre8-color-button-primary-content-hover);
+      border-color: var(--cre8-color-button-primary-border-hover);
+      background: var(--cre8-color-button-primary-bg-hover);
+      text-decoration: none;
+      &:focus {
+        @includefocus();
+      }
+    }
+    &:focus-visible,
+    &:active,
+    &.cre8-c-button--loading {
+      box-shadow: none;
+      color: var(--cre8-color-button-primary-content-active);
+      --cre8-icon-fill: var(--cre8-color-button-primary-content-active);
+      border-color: var(--cre8-color-button-primary-border-active);
+      background-color: var(--cre8-color-button-primary-bg-active);
+    }
+    &:focus-visible{
+      @includefocus();
+    }
+    &.cre8-c-button--loading{
+      cursor: not-allowed;
+    }
+    /**
+ * Disabled primary and secondary button
+ */
+  &:disabled {
+    box-shadow: none;
+    background-color: var(--cre8-color-button-primary-bg-disabled);
+    border-color: var(--cre8-color-button-primary-border-disabled);
+    color: var(--cre8-color-button-primary-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);
+    cursor: not-allowed;
+    outline: none;
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      background-color: var(--cre8-color-button-primary-bg-disabled);
+      border-color: var(--cre8-color-button-primary-border-disabled);
+      color: var(--cre8-color-button-primary-content-disabled);
+      --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);
+    }
+  }
+}
+
+/**
+* Primary button inverse
+*/
+&.cre8-c-button--primary.cre8-c-button--inverse {
+background: var(--cre8-color-button-primary-inverse-bg);
+border-width: var(--cre8-border-width-button-default);
+border-color: var(--cre8-color-button-primary-inverse-border);
+border-radius: var(--cre8-border-radius-button);
+box-shadow: var(--cre8-shadow-button);
+color: var(--cre8-color-button-primary-inverse-content);
+--cre8-icon-fill: var(--cre8-color-button-primary-inverse-content);
+&:hover,
+&:focus {
+  box-shadow: none;
+  --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-hover);
+  color: var(--cre8-color-button-primary-inverse-content-hover);
+  border-color: var(--cre8-color-button-primary-inverse-border-hover);
+  background: var(--cre8-color-button-primary-inverse-bg-hover);
+  text-decoration: none;
+  &:focus {
+    @includefocus();
+  }
+}
+&:focus-visible,
+&:active,
+&.cre8-c-button--loading {
+  box-shadow: none;
+  color: var(--cre8-color-button-primary-inverse-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-active);
+  border-color: var(--cre8-color-button-primary-inverse-border-active);
+  background-color: var(--cre8-color-button-primary-inverse-bg-active);
+}
+&:focus-visible{
+  @includefocus();
+}
+&.cre8-c-button--loading{
+  cursor: not-allowed;
+}
+
+&:disabled {
+  box-shadow: none;
+  background-color: var(--cre8-color-button-primary-inverse-bg-disabled);
+  border-color: var(--cre8-color-button-primary-inverse-border-disabled);
+  color: var(--cre8-color-button-primary-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);
+  cursor: not-allowed;
+  outline: none;
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-visible {
+    outline: none;
+    background-color: var(--cre8-color-button-primary-inverse-bg-disabled);
+    border-color: var(--cre8-color-button-primary-inverse-border-disabled);
+    color: var(--cre8-color-button-primary-inverse-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);
+  }
+}
+}
+
+/**
+ * Secondary button
+ * The icon button shares the styles of the standard secondary button
+ */
+  &.cre8-c-button--secondary {
+    background-color: var(--cre8-color-button-secondary-bg);
+    border-color: var(--cre8-color-button-secondary-border);
+    color: var(--cre8-color-button-secondary-content);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-content);
+    border-radius: var(--cre8-border-radius-button);
+    border-width: var(--cre8-border-width-button-default);
+
+  &:hover,
+  &:focus {
+    background-color: var(--cre8-color-button-secondary-bg-hover);
+    border-color: var(--cre8-color-button-secondary-border-hover);
+    color: var(--cre8-color-button-secondary-content-hover);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);
+    &:focus {
+      @includefocus();
+    }
+  }
+  &:focus-visible,
+  &:active,
+  &.cre8-c-button--loading {
+    transition: none;
+    transform: none;
+    background-color: var(--cre8-color-button-secondary-bg-active);
+    border-color: var(--cre8-color-button-secondary-border-active);
+    color: var(--cre8-color-button-secondary-content-active);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
+  }
+  &:focus-visible {
+    @includefocus();
+  }
+  &.cre8-c-button--loading {
+    cursor: not-allowed;
+  }
+
+  &:disabled {
+    box-shadow: none;
+    background-color: var(--cre8-color-button-secondary-bg-disabled);
+    border-color: var(--cre8-color-button-secondary-border-disabled);
+    color: var(--cre8-color-button-secondary-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);
+    outline: none;
+    border-radius: var(--cre8-border-radius-button);
+    border-width: var(--cre8-border-width-button-default);
+    cursor: not-allowed;
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      background-color: var(--cre8-color-button-secondary-bg-disabled);
+      border-color: var(--cre8-color-button-secondary-border-disabled);
+      color: var(--cre8-color-button-secondary-content-disabled);
+      --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);
+    }
+  }
+}
+
+ /**
+ * Secondary button neutral
+ */
+ &.cre8-c-button--secondary.cre8-c-button--neutral {
+    background-color: var(--cre8-color-button-secondary-neutral-bg);
+    border-color: var(--cre8-color-button-secondary-neutral-border);
+    color: var(--cre8-color-button-secondary-neutral-content);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content);
+    border-radius: var(--cre8-border-radius-button);
+    border-width: var(--cre8-border-width-button-default);
+
+  &:hover,
+  &:focus {
+    background-color: var(--cre8-color-button-secondary-neutral-bg-hover);
+    border-color: var(--cre8-color-button-secondary-neutral-border-hover);
+    color: var(--cre8-color-button-secondary-neutral-content-hover);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-hover);
+    &:focus {
+      @includefocus();
+    }
+  }
+  &:focus-visible,
+  &:active,
+  &.cre8-c-button--loading {
+    transition: none;
+    transform: none;
+    background-color: var(--cre8-color-button-secondary-neutral-bg-active);
+    border-color: var(--cre8-color-button-secondary-neutral-border-active);
+    color: var(--cre8-color-button-secondary-neutral-content-active);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-active);
+  }
+  &:focus-visible {
+    @includefocus();
+  }
+
+  &:disabled {
+    box-shadow: none;
+    background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);
+    border-color: var(--cre8-color-button-secondary-neutral-border-disabled);
+    color: var(--cre8-color-button-secondary-neutral-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);
+    outline: none;
+    border-radius: var(--cre8-border-radius-button);
+    border-width: var(--cre8-border-width-button-default);
+    cursor: not-allowed;
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);
+      border-color: var(--cre8-color-button-secondary-neutral-border-disabled);
+      color: var(--cre8-color-button-secondary-neutral-content-disabled);
+      --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);
+    }
+  }
+ }
+
+/**
+ * Secondary button inverse
+ */
+ &.cre8-c-button--secondary.cre8-c-button--inverse {
+  background-color: var(--cre8-color-button-secondary-inverse-bg);
+  border-color: var(--cre8-color-button-secondary-inverse-border);
+  color: var(--cre8-color-button-secondary-inverse-content);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content);
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+
+&:hover,
+&:focus {
+  background-color: var(--cre8-color-button-secondary-inverse-bg-hover);
+  border-color: var(--cre8-color-button-secondary-inverse-border-hover);
+  color: var(--cre8-color-button-secondary-inverse-content-hover);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-hover);
+  &:focus {
+    @includefocus();
+  }
+}
+&:focus-visible,
+&:active,
+&.cre8-c-button--loading {
+  transition: none;
+  transform: none;
+  background-color: var(--cre8-color-button-secondary-inverse-bg-active);
+  border-color: var(--cre8-color-button-secondary-inverse-border-active);
+  color: var(--cre8-color-button-secondary-inverse-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-active);
+}
+&:focus-visible {
+  @includefocus();
+}
+
+&:disabled {
+  box-shadow: none;
+  background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);
+  border-color: var(--cre8-color-button-secondary-inverse-border-disabled);
+  color: var(--cre8-color-button-secondary-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-disabled);
+  outline: none;
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+  cursor: not-allowed;
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-visible {
+    outline: none;
+    background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);
+    border-color: var(--cre8-color-button-secondary-inverse-border-disabled);
+    color: var(--cre8-color-button-secondary-inverse-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-disabled);
+  }
+}
+}
+
+  /**
+ * Secondary button neutral inverse
+ */
+ &.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse {
+  background-color: var(--cre8-color-button-secondary-neutral-inverse-bg);
+  border-color: var(--cre8-color-button-secondary-neutral-inverse-border);
+  color: var(--cre8-color-button-secondary-neutral-inverse-content);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content);
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+
+&:hover,
+&:focus {
+  @includefocus();
+  background-color: var(--cre8-color-button-secondary-neutral-bg-active);
+  border-color: var(--cre8-color-button-secondary-neutral-inverse-border-active);
+  outline-color: var(--cre8-color-button-secondary-neutral-inverse-outline);
+  color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);
+}
+
+&:focus-visible,
+&:active,
+&.cre8-c-button--loading {
+  transition: none;
+  transform: none;
+  background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-active);
+  border-color: var(--cre8-color-button-secondary-neutral-inverse-border-active);
+  color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);
+}
+&:focus-visible {
+  @includefocus();
+}
+
+&:disabled {
+  box-shadow: none;
+  background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);
+  border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);
+  color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
+  outline: none;
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+  cursor: not-allowed;
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-visible {
+    outline: none;
+    background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);
+    border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);
+    color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
+  }
+}
+}
+
+  /**
+ * Tertiary button
+ */
+  &.cre8-c-button--tertiary {
+    border-radius: var(--cre8-border-radius-button);
+    background-color: var(--cre8-color-button-tertiary-bg);
+    border-width: var(--cre8-border-width-button-default);
+    border-color: var(--cre8-color-button-tertiary-border);
+    color: var(--cre8-color-button-tertiary-content);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-content);
+    box-shadow: none;
+    &:hover,
+    &:focus {
+      border-radius: var(--cre8-border-radius-button);
+      background-color: var(--cre8-color-button-tertiary-bg-hover);
+      border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
+      border-color: var(--cre8-color-button-tertiary-border-hover);
+      color: var(--cre8-color-button-tertiary-content-hover);
+      --cre8-icon-fill: var(--cre8-color-button-tertiary-content-hover);
+      &:focus {
+        @includefocusTertiary();
+      }
+    }
+
+  &:focus-visible,
+  &:active,
+  &.cre8-c-button--loading {
+    border-radius: var(--cre8-border-radius-button);
+    background-color: var(--cre8-color-button-tertiary-bg-active);
+    border-color: var(--cre8-color-button-tertiary-border-active);
+    border-width: var(--cre8-border-width-button-default);
+    color: var(--cre8-color-button-tertiary-content-active);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-content-active);
+  }
+  &:focus-visible {
+    @includefocusTertiary();
+  }
+  &.cre8-c-button--loading {
+    cursor: not-allowed;
+  }
+  &:disabled {
+    background-color: var(--cre8-color-button-tertiary-bg-disabled);
+    border-color: transparent;
+    color: var(--cre8-color-button-tertiary-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
+    outline: none;
+    box-shadow: none;
+    cursor: not-allowed;
+
+    &:hover,
+    &:focus {
+      outline: none;
+      box-shadow: none;
+      background-color: var(--cre8-color-button-tertiary-bg-disabled);
+      color: var(--cre8-color-button-tertiary-content-disabled);
+      --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
+    }
+    &:active,
+    &:focus-visible {
+      outline: none;
+      box-shadow: none;
+      background-color: var(--cre8-color-button-tertiary-bg-disabled);
+      color: var(--cre8-color-button-tertiary-content-disabled);
+      --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
+    }
+  }
+}
+
+ /**
+ * Tertiary button neutral
+ */
+ &.cre8-c-button--tertiary.cre8-c-button--neutral {
+  background-color: var(--cre8-color-button-tertiary-neutral-bg);
+  border-color: var(--cre8-color-button-tertiary-border);
+  color: var(--cre8-color-button-tertiary-neutral-content);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content);
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+
+  &:hover,
+  &:focus {
+    background-color: var(--cre8-color-button-tertiary-neutral-bg-hover);
+    border-color: var(--cre8-color-button-tertiary-neutral-border-hover);
+    color: var(--cre8-color-button-tertiary-neutral-content-hover);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-hover);
+    outline-color: var(--cre8-color-button-tertiary-neutral-outline);
+  }
+
+  &:focus-visible,
+  &:active,
+  &.cre8-c-button--loading {
+    transition: none;
+    transform: none;
+    background-color: var(--cre8-color-button-tertiary-neutral-bg-active);
+    border-color: var(--cre8-color-button-tertiary-neutral-border-active);
+    color: var(--cre8-color-button-tertiary-neutral-content-active);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-active);
+  }
+
+  &:focus-visible {
+    @includefocus();
+  }
+
+  &:disabled {
+    box-shadow: none;
+    background-color: var(--cre8-color-button-tertiary-neutral-bg-disabled);
+    border-color: var(--cre8-color-button-tertiary-neutral-border-disabled);
+    color: var(--cre8-color-button-tertiary-neutral-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-disabled);
+    outline: none;
+    border-radius: var(--cre8-border-radius-button);
+    border-width: var(--cre8-border-width-button-default);
+
+    cursor: not-allowed;
+  }
+ }
+
+/**
+ * Tertiary button inverse
+ */
+ &.cre8-c-button--tertiary.cre8-c-button--inverse {
+  border-radius: var(--cre8-border-radius-button);
+  background-color: var(--cre8-color-button-tertiary-inverse-bg);
+  border-width: var(--cre8-border-width-button-default);
+  border-color: var(--cre8-color-button-tertiary-inverse-border);
+  color: var(--cre8-color-button-tertiary-inverse-content);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content);
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    border-radius: var(--cre8-border-radius-button);
+    background-color: var(--cre8-color-button-tertiary-inverse-bg-hover);
+    border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
+    border-color: var(--cre8-color-button-tertiary-inverse-border-hover);
+    color: var(--cre8-color-button-tertiary-inverse-content-hover);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-hover);
+    outline-color: var(--cre8-color-button-tertiary-inverse-outline);
+  }
+
+&:focus-visible,
+&:active,
+&.cre8-c-button--loading {
+  border-radius: var(--cre8-border-radius-button);
+  background-color: var(--cre8-color-button-tertiary-inverse-bg-active);
+  border-color: var(--cre8-color-button-tertiary-inverse-border-active);
+  border-width: var(--cre8-border-width-button-default);
+  color: var(--cre8-color-button-tertiary-inverse-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-active);
+  outline-color: var(--cre8-color-button-tertiary-inverse-outline);
+}
+
+&.cre8-c-button--loading {
+  cursor: not-allowed;
+}
+&:disabled {
+  background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
+  border-color: transparent;
+  color: var(--cre8-color-button-tertiary-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
+  outline: none;
+  box-shadow: none;
+  cursor: not-allowed;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: none;
+    background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
+    color: var(--cre8-color-button-tertiary-inverse-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
+  }
+  &:active,
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+    background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
+    color: var(--cre8-color-button-tertiary-inverse-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
+  }
+}
+}
+
+ /**
+ * Tertiary Neutral button inverse
+ */
+ &.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse {
+  border-radius: var(--cre8-border-radius-button);
+  background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg);
+  border-width: var(--cre8-border-width-button-default);
+  color: var(--cre8-color-button-tertiary-neutral-inverse-content);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content);
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    border-radius: var(--cre8-border-radius-button);
+    background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-hover);
+    border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
+    border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-hover);
+    color: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);
+    outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);
+  }
+
+  &:focus-visible,
+  &:active,
+  &.cre8-c-button--loading {
+    border-radius: var(--cre8-border-radius-button);
+    background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-active);
+    border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-active);
+    border-width: var(--cre8-border-width-button-default);
+    color: var(--cre8-color-button-tertiary-neutral-inverse-content-active);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-active);
+    outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);
+  }
+
+  &.cre8-c-button--loading {
+    cursor: not-allowed;
+  }
+
+  &:disabled {
+    background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-disabled);
+    border-color: transparent;
+    color: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);
+    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);
+    outline: none;
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+ }
+
+  &.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text {
+    border-radius: var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);
+    border-color: var(--cre8-color-button-secondary-border);
+    border-width: var(--cre8-border-width-button-default);
+    color: var(--cre8-color-button-secondary-content);
+    &:active,
+    &:focus-visible {
+      outline: none;
+    }
+    &.cre8-c-button--lg {
+      padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);
+    }
+    &.cre8-c-button--sm {
+      padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);
+    }
+  }
+
+  &.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret {
+    padding: var(--cre8-button-padding-vertical-medium);
+    border-radius: var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);
+    height: 100%;
+    border-left: none !important ;
+    border-collapse: collapse;
+    background: var(--cre8-color-button-secondary-bg);
+    border-color: var(--cre8-color-button-secondary-border);
+    border-width: var(--cre8-border-width-button-default);
+    color: var(--cre8-color-button-secondary-content);
+    --cre8-icon-fill: var(--cre8-color-button-secondary-content);
+
+    &:hover,
+    &:focus {
+      background: var(--cre8-color-button-secondary-bg-hover);
+      border-color: var(--cre8-color-button-secondary-border-hover);
+      --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);
+      outline: none;
+      border-left: none;
+      border-collapse: collapse;
+    }
+    &:active,
+    &:focus-visible {
+      background: var(--cre8-color-button-secondary-bg-active);
+      border-color: var(--cre8-color-button-secondary-border-active);
+      --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
+      outline: none;
+      border-left: none;
+      border-collapse: collapse;
+    }
+  }
+}
+
+.cre8-c-button--lg {
+  padding: var(--cre8-button-padding-vertical-large);
+}
+.cre8-c-button--sm {
+  padding: var(--cre8-button-padding-vertical-small);
+}
+
+.cre8-c-button--icon-only {
+  padding: var(--cre8-button-padding-vertical-small);
+  color: var(--cre8-icon-fill, currentColor);
+}
+
+/**
+ * Full-width button
+ */
+.cre8-c-button--full-width {
+  width: 100%;
+  display: flex;
+}
+
+/**
+ * Small button
+ */
+.cre8-c-button--sm {
+  @include cre8-typography-label-small();
+  padding-top: var(--cre8-button-padding-vertical-small);
+  padding-right: var(--cre8-button-padding-horizontal-small);
+  padding-bottom: var(--cre8-button-padding-vertical-small);
+  padding-left: var(--cre8-button-padding-horizontal-small);
+}
+
+/**
+ * Small button sized for icon only
+ */
+ .cre8-c-button--sm.cre8-c-button--icon-only {
+  @include cre8-typography-label-small();
+  padding-top: var(--cre8-button-padding-vertical-small-icon-only);
+  padding-right: var(--cre8-button-padding-horizontal-small-icon-only);
+  padding-bottom: var(--cre8-button-padding-vertical-small-icon-only);
+  padding-left: var(--cre8-button-padding-horizontal-small-icon-only);
+}
+
+/**
+ * Large button
+ */
+.cre8-c-button--lg {
+  @include cre8-typography-label-large();
+  padding-top: var(--cre8-button-padding-vertical-large);
+  padding-right: var(--cre8-button-padding-horizontal-large);
+  padding-bottom: var(--cre8-button-padding-vertical-large);
+  padding-left: var(--cre8-button-padding-horizontal-large);
+}
+
+/**
+ * Large button sized for icon only
+ */
+ .cre8-c-button--lg.cre8-c-button--icon-only {
+  @include cre8-typography-label-large();
+  padding-top: var(--cre8-button-padding-vertical-large-icon-only);
+  padding-right: var(--cre8-button-padding-horizontal-large-icon-only);
+  padding-bottom: var(--cre8-button-padding-vertical-large-icon-only);
+  padding-left: var(--cre8-button-padding-horizontal-large-icon-only);
+}
+
+/**
+  * Icon within small button
+  */
+.cre8-c-button--sm cre8-icon-legacy {
+  --cre8-icon-height: var(--cre8-icon-size-small);
+  --cre8-icon-width: var(--cre8-icon-size-small);
+}
+
+.cre8-c-button--sm cre8-icon {
+  svg {
+    height: size(1.75);
+    width: size(1.75);
+  }
+}
+
+/**
+  * Icon within large button
+  */
+.cre8-c-button--lg cre8-icon-legacy {
+  --cre8-icon-height: var(--cre8-icon-size-large);
+  --cre8-icon-width: var(--cre8-icon-size-large);
+}
+
+.cre8-c-button--lg cre8-icon {
+  svg {
+    height: size(2.25);
+    width: size(2.25);
+  }
+}
+
+::slotted(*) {
+  margin-right: 0;
+}
+/**
+ * Button icon directly before button text
+ */
+
+cre8-icon-legacy + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
+  margin-left: size(1);
+}
+
+cre8-icon + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
+  margin-left: size(1);
+}
+
+/**
+   * Button icon directly after button text
+   */
+.cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon-legacy {
+  margin-left: size(1);
+}
+
+.cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon {
+  margin-left: size(1);
+}
+/**
+   * Button icon only
+   */
+.cre8-c-button:has(.cre8-c-button__text.cre8-u-is-vishidden) + cre8-icon-legacy {
+  border-radius: var(--cre8-border-radius-button);
+}
+
+.cre8-c-button:has(.cre8-c-button__text.cre8-u-is-vishidden) + cre8-icon {
+  border-radius: var(--cre8-border-radius-button);
+}
+
+.cre8-c-button__text.cre8-u-is-vishidden + cre8-icon-legacy {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.cre8-c-button__text.cre8-u-is-vishidden + cre8-icon {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.cre8-c-button__text.cre8-u-is-vishidden {
+  @include visuallyHidden();
+}
+
+.cre8-c-button--primary.cre8-c-button--loading {
+  --cre8-icon-fill: var(--cre8-color-content-knockout);
+}
+.cre8-c-button--secondary.cre8-c-button--loading,
+.cre8-c-button--tertiary.cre8-c-button--loading {
+  --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
+}
+
+/**
+ * Aria live span
+ */
+.cre8-u-is-vishidden {
+  --cre8-icon-height: 0px;
+  --cre8-icon-width: 0px;
+  max-width: fit-content;
+  min-width: 0px;
+  width: auto;
+  height: auto;
+  max-height: fit-content;
+  min-width: 0px;
+
+  @include visuallyHidden();
+}
+
+cre8-icon-legacy.cre8-u-is-vishidden {
+  @include visuallyHidden();
+}
+
+span.cre8-c-button__icon {
+  margin-left: size(1);
+  max-width: fit-content;
+  min-width: 0px;
+  width: auto;
+  height: auto;
+  max-height: fit-content;
+  min-width: 0px;
+}
+
+cre8-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    height: size(2);
+    width: size(2);
+  }
+}
+`;
+var V = Object.defineProperty, l = (u, e, r, o) => {
+  for (var t = void 0, n = u.length - 1, i; n >= 0; n--)
+    (i = u[n]) && (t = i(e, r, t) || t);
+  return t && V(e, r, t), t;
+};
+const T = class T extends I {
+  constructor() {
+    super(...arguments), this.text = "Button", this.variant = "primary", this.type = "button", this.iconRotateDegree = 0, this.iconPosition = void 0, this.size = "md", this.ariaLive = "assertive";
+  }
+  formSubmit() {
+    const e = this.internals.form;
+    e && e.requestSubmit();
+  }
+  formReset() {
+    const e = this.internals.form;
+    e && e.reset();
+  }
+  generateIconBefore() {
+    if (this.iconPosition === "before") {
+      if (this.iconName)
+        return c`<cre8-icon-legacy slot="before" aria-hidden="true" name="${b(this.iconName)}">
+                </cre8-icon-legacy>`;
+      if (this.svg)
+        return c`<cre8-icon slot="before" aria-hidden="true"
+                svg='${this.svg}' rotate="${Number(this.iconRotateDegree)}" flip="${this.iconFlipDirection}">
+                </cre8-icon>`;
+    }
+    return p;
+  }
+  generateIconAfter() {
+    if (this.iconPosition === "after") {
+      if (this.iconName)
+        return c`<cre8-icon-legacy slot="after" aria-hidden="true" name="${b(this.iconName)}">
+                </cre8-icon-legacy>`;
+      if (this.svg)
+        return c`<cre8-icon slot="after" aria-hidden="true"
+                svg='${this.svg}' rotate="${Number(this.iconRotateDegree)}" flip="${this.iconFlipDirection}">
+                </cre8-icon>`;
+    }
+    return p;
+  }
+  // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.
+  /* eslint complexity: ["warn", 10] */
+  render() {
+    const e = this.componentClassNames("cre8-c-button", {
+      "cre8-c-button--primary": this.variant === "primary",
+      "cre8-c-button--secondary": this.variant === "secondary",
+      "cre8-c-button--tertiary": this.variant === "tertiary",
+      "cre8-c-button--full-width": this.fullWidth === !0,
+      "cre8-c-button--sm": this.size === "sm",
+      "cre8-c-button--lg": this.size === "lg",
+      "cre8-c-button--icon-only": this.hideText,
+      "cre8-c-button--split-button-text": this.splitButtonType === "text",
+      "cre8-c-button--split-button-caret": this.splitButtonType === "caret",
+      "cre8-c-button--neutral": this.neutral,
+      "cre8-c-button--inverse": this.inverse,
+      "cre8-c-button--loading": this.loading
+    });
+    return this.hideText && (this.iconPosition = "after"), this.href ? c`
+            <a
+                href="${b(this.href)}"
+                class="${e}"
+                rel="${b(this.rel)}"
+                target="${b(this.target)}"
+            >
+            ${this.generateIconBefore()}
+            <span
+                class="${this.hideText ? "cre8-u-is-vishidden cre8-c-button__text" : "cre8-c-button__text"}"
+            >
+                ${this.text}
+            </span>
+            ${this.generateIconAfter()}
+            </a>
+        ` : c` <button
+            class="${e}"
+            part="button"
+            aria-disabled="${b(this.loading)}"
+            ?disabled=${this.disabled}
+            @click="${this._buttonClick}"
+            aria-expanded="${b(this.buttonAriaExpanded)}"
+        >
+            <slot name="before"></slot>
+            ${this.generateIconBefore()}
+            <span
+                class="${this.hideText ? "cre8-u-is-vishidden cre8-c-button__text" : "cre8-c-button__text"}"
+            >
+                ${this.text}
+            </span>
+            ${this.generateIconAfter()}
+            <slot name="after"></slot>
+            ${this.loading || this.loadingComplete ? c`<span class="cre8-c-button__icon" aria-live="${this.ariaLive}" role="alert">
+                <span class="cre8-u-is-vishidden">${this.loadingComplete ? "Loading Complete" : "Loading"}</span>
+                ${this.loadingComplete ? p : c`
+            <cre8-loading-spinner
+                class="cre8-c-button__loading-icon"
+                size="small"
+                ?neutral=${this.neutral}
+                ?inverse=${this.inverse}
+                buttonVariant=${this.variant}
+                aria-hidden="true"
+            ></cre8-loading-spinner>`}
+                </span>` : p}
+        </button>`;
+  }
+  _buttonClick(e) {
+    if (this.loading)
+      e.stopPropagation();
+    else
+      switch (this.type) {
+        case "submit":
+          this.formSubmit();
+          break;
+        case "reset":
+          this.formReset();
+          break;
+      }
+  }
+};
+T.styles = [K];
+let s = T;
+l([
+  a()
+], s.prototype, "text");
+l([
+  a({ type: String })
+], s.prototype, "variant");
+l([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled");
+l([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "neutral");
+l([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "inverse");
+l([
+  a()
+], s.prototype, "href");
+l([
+  a()
+], s.prototype, "target");
+l([
+  a()
+], s.prototype, "type");
+l([
+  a()
+], s.prototype, "rel");
+l([
+  a()
+], s.prototype, "iconName");
+l([
+  a()
+], s.prototype, "svg");
+l([
+  a({ type: Number })
+], s.prototype, "iconRotateDegree");
+l([
+  a()
+], s.prototype, "iconFlipDirection");
+l([
+  a()
+], s.prototype, "iconPosition");
+l([
+  a()
+], s.prototype, "size");
+l([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "hideText");
+l([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "fullWidth");
+l([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "loading");
+l([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "loadingComplete");
+l([
+  a()
+], s.prototype, "ariaLive");
+l([
+  a()
+], s.prototype, "splitButtonType");
+l([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "buttonAriaExpanded");
+l([
+  C("button")
+], s.prototype, "field");
+customElements.get("cre8-button") === void 0 && customElements.define("cre8-button", s);
+var U = Object.defineProperty, O = (u, e, r, o) => {
+  for (var t = void 0, n = u.length - 1, i; n >= 0; n--)
+    (i = u[n]) && (t = i(e, r, t) || t);
+  return t && U(e, r, t), t;
+};
+const N = class N extends _ {
+  constructor() {
+    super(), this.monthNames = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ];
+  }
+  firstUpdated() {
+    this.focusOnCurrentMonth();
+  }
+  async focusOnCurrentMonth() {
+    await this.updateComplete, (this.shadowRoot?.querySelector(
+      "li[data-current-month]"
+    ).children[0].shadowRoot?.querySelector("button")).focus();
+  }
+  emitMonth(e) {
+    const r = new CustomEvent("changeMonth", {
+      detail: {
+        month: e
+      }
+    });
+    this.dispatchEvent(r);
+  }
+  getMonthListItems() {
+    return this.monthNames.map(
+      (e, r) => c` <li ?data-current-month="${r === this.currentMonth}" >
+          <cre8-button text="${e}" variant="tertiary" size="sm"
+          @click="${() => this.emitMonth(r)}"></cre8-button>
+        </li>`
+    );
+  }
+  render() {
+    const e = this.componentClassNames("cre8-c-calendar-month-modal", {});
+    return c` <div class="${e}">
+      <ol aria-label="choose a month">
+        ${this.getMonthListItems()}
+      </ol>
+    </div> `;
+  }
+};
+N.styles = [q];
+let $ = N;
+O([
+  v()
+], $.prototype, "monthNames");
+O([
+  a({ reflect: !0, type: Number })
+], $.prototype, "currentMonth");
+customElements.get("cre8-calendar-month-modal") === void 0 && customElements.define("cre8-calendar-month-modal", $);
+const W = f`@import '../../design-tokens/core/scss/theming/component';
+
+.cre8-c-calendar-year-modal {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: size(1);
+}
+
+/* grid */
+ol {
+  @include cre8-typography-body-default();
+  display: grid;
+  grid-row-gap: 0.33em;
+  grid-template-columns: repeat(3, 1fr);
+  list-style: none;
+  margin: unset;
+  padding: unset;
+}
+
+li {
+  display: inline-flex;
+  justify-content: center;
+}
+
+cre8-button {
+  height: fit-content;
+}
+`;
+var H = Object.defineProperty, J = Object.getOwnPropertyDescriptor, x = (u, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? J(e, r) : e, n = u.length - 1, i; n >= 0; n--)
+    (i = u[n]) && (t = (o ? i(e, r, t) : i(t)) || t);
+  return o && t && H(e, r, t), t;
+};
+const Y = class Y extends _ {
+  get currentYear() {
+    return this._currentYear;
+  }
+  set currentYear(e) {
+    const r = this._currentYear;
+    this._currentYear = e, this.modalAnchorYear = e, this.requestUpdate("currentDate", r), this.createYearArray(this.currentYear);
+  }
+  constructor() {
+    super(), this.yearNumbers = [];
+  }
+  emitYear(e) {
+    const r = new CustomEvent("changeYear", {
+      detail: {
+        year: e
+      }
+    });
+    this.dispatchEvent(r);
+  }
+  createYearArray(e) {
+    const r = Array.from(Array(12).keys());
+    this.yearNumbers = r.map((o) => o + (e - 7));
+  }
+  getYearListItems() {
+    return this.yearNumbers.map(
+      ((e) => c` <li
+        ?data-current-year="${e === this.currentYear}"
+      >
+        <cre8-button
+          text="${e}"
+          variant="tertiary"
+          size="sm"
+          @click="${() => this.emitYear(e)}"
+        ></cre8-button>
+      </li>`)
+    );
+  }
+  firstUpdated() {
+    this.focusOnCurrentYear();
+  }
+  async focusOnCurrentYear() {
+    await this.updateComplete, (this.shadowRoot?.querySelector(
+      "li[data-current-year]"
+    ).children[0].shadowRoot?.querySelector("button")).focus();
+  }
+  previousYearArray() {
+    this.modalAnchorYear -= 12, this.createYearArray(this.modalAnchorYear);
+  }
+  nextYearArray() {
+    this.modalAnchorYear += 12, this.createYearArray(this.modalAnchorYear);
+  }
+  render() {
+    const e = this.componentClassNames(
+      "cre8-c-calendar-year-modal",
+      {}
+    );
+    return c`
+      <div class="${e}">
+        <cre8-button
+          class="cre8-c-calendar-year-modal__nav-button"
+          @click="${this.previousYearArray}"
+          variant="tertiary"
+          text="Previous 12 years"
+          ?hideText=${!0}
+          iconName="keyboard-arrow-left"
+        ></cre8-button>
+        <ol aria-label="choose a year">
+          ${this.getYearListItems()}
+        </ol>
+        <cre8-button
+          class="cre8-c-calendar-year-modal__nav-button"
+          @click="${this.nextYearArray}"
+          variant="tertiary"
+          text="Next 12 years"
+          ?hideText=${!0}
+          iconName="keyboard-arrow-right"
+        ></cre8-button>
+      </div>
+    `;
+  }
+};
+Y.styles = [W];
+let m = Y;
+x([
+  v()
+], m.prototype, "yearNumbers", 2);
+x([
+  v()
+], m.prototype, "_currentYear", 2);
+x([
+  v()
+], m.prototype, "modalAnchorYear", 2);
+x([
+  a({ reflect: !0, type: Number })
+], m.prototype, "currentYear", 1);
+customElements.get("cre8-calendar-year-modal") === void 0 && customElements.define("cre8-calendar-year-modal", m);
+const G = f`@import '../../design-tokens/core/scss/theming/component';
+
+.cre8-c-calendar-navigation {
+    align-items: center;
+    display: flex;
+    height: 60px;
+    justify-content: center;
+  }
+
+.cre8-c-calendar-navigation__inner-buttons {
+  display: flex;
+  min-width: 188px;
+  justify-content: space-around;
+}`;
+var Q = Object.defineProperty, E = (u, e, r, o) => {
+  for (var t = void 0, n = u.length - 1, i; n >= 0; n--)
+    (i = u[n]) && (t = i(e, r, t) || t);
+  return t && Q(e, r, t), t;
+};
+const z = class z extends _ {
+  activateModal(e) {
+    const r = new CustomEvent("activateModal", {
+      detail: {
+        modal: e
+      }
+    });
+    this.dispatchEvent(r);
+  }
+  changeMonth(e) {
+    const r = new CustomEvent("changeMonth", {
+      detail: {
+        addend: e
+      }
+    });
+    this.dispatchEvent(r);
+  }
+  changeYear(e) {
+    const r = new CustomEvent("changeYear", {
+      detail: {
+        addend: e
+      }
+    });
+    this.dispatchEvent(r);
+  }
+  render() {
+    const e = this.componentClassNames(
+      "cre8-c-calendar-navigation",
+      {}
+    );
+    return c`
+      <div class="${e}">
+        <cre8-button
+          variant="tertiary"
+          text="Previous year"
+          ?hideText=${!0}
+          iconName="caret-double-left"
+          @click="${() => this.changeYear(-1)}"
+        ></cre8-button>
+
+        <cre8-button
+          variant="tertiary"
+          text="Previous month"
+          ?hideText=${!0}
+          iconName="keyboard-arrow-left"
+          @click="${() => this.changeMonth(-1)}"
+        ></cre8-button>
+
+        <div class="cre8-c-calendar-navigation__inner-buttons">
+          <cre8-button
+            class="cre8-c-calendar-navigation__month-modal-button"
+            variant="tertiary"
+            text="${this.monthName}"
+            aria-label="${this.monthName}, month picker modal"
+            size="sm"
+            @click="${() => this.activateModal("month")}"
+          ></cre8-button>
+
+          <cre8-button
+            class="cre8-c-calendar-navigation__year-modal-button"
+            variant="tertiary"
+            text="${this.year}"
+            aria-label="${this.year}, year picker modal"
+            size="sm"
+            @click="${() => this.activateModal("year")}"
+          ></cre8-button>
+        </div>
+
+        <cre8-button
+          variant="tertiary"
+          text="Next month"
+          ?hideText=${!0}
+          iconName="keyboard-arrow-right"
+          @click="${() => this.changeMonth(1)}"
+        ></cre8-button>
+
+        <cre8-button
+          variant="tertiary"
+          text="Next year"
+          ?hideText=${!0}
+          iconName="caret-double-right"
+          @click="${() => this.changeYear(1)}"
+        ></cre8-button>
+      </div>
+    `;
+  }
+};
+z.styles = [G];
+let D = z;
+E([
+  a({ type: String, reflect: !0 })
+], D.prototype, "monthName");
+E([
+  a({ type: String, reflect: !0 })
+], D.prototype, "year");
+customElements.get("cre8-calendar-navigation") === void 0 && customElements.define("cre8-calendar-navigation", D);
+var X = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, y = (u, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? Z(e, r) : e, n = u.length - 1, i; n >= 0; n--)
+    (i = u[n]) && (t = (o ? i(e, r, t) : i(t)) || t);
+  return o && t && X(e, r, t), t;
+}, d;
+const h = (d = class extends _ {
+  constructor() {
+    super(), this._activeModal = "none", this._handleOnClickOutside = this._handleOnClickOutside.bind(this), this.currentDate = (this.fieldDate && /* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)) ?? /* @__PURE__ */ new Date(), this.locale = document.documentElement.getAttribute("lang") || "en-US", this.dateConfig = {
+      locale: this.locale,
+      today: /* @__PURE__ */ new Date(),
+      weekInfo: {
+        firstDay: 7,
+        weekend: [6, 7]
+      }
+    }, this.weekDays = [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday"
+    ], this.dateFormatOptions = {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    };
+  }
+  get activeModal() {
+    return this._activeModal;
+  }
+  set activeModal(e) {
+    this._activeModal = e;
+  }
+  get fieldDate() {
+    return this._fieldDate;
+  }
+  set fieldDate(e) {
+    const r = this._fieldDate;
+    this.requestUpdate("fieldDate", r);
+    const o = !!(e && (/* @__PURE__ */ new Date(`${e}T00:00`)).getTime());
+    this.currentDate = o ? /* @__PURE__ */ new Date(`${e}T00:00`) : /* @__PURE__ */ new Date(), this._fieldDate = o ? e : "";
+  }
+  get currentDate() {
+    return this._currentDate;
+  }
+  set currentDate(e) {
+    const r = this._currentDate;
+    this._currentDate = e, this.requestUpdate("currentDate", r);
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("click", this._handleOnClickOutside, !1);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("click", this._handleOnClickOutside, !1);
+  }
+  /* Click Event Functions */
+  _handleOnClickOutside(e) {
+    if (!this.shadowRoot?.host)
+      throw Error(
+        "Could not determine navigation context during click handler"
+      );
+    if (!e.composedPath().includes(this.shadowRoot.host)) {
+      const o = new CustomEvent("outsideClick", {
+        detail: {
+          composedPath: e.composedPath()
+        }
+      });
+      this.dispatchEvent(o);
+    }
+  }
+  emitSelectedDate(e) {
+    const r = new CustomEvent("dateSelect", {
+      detail: {
+        date: e
+      }
+    });
+    this.currentDate = /* @__PURE__ */ new Date(`${e}T00:00`), this.dispatchEvent(r);
+  }
+  changeYear(e) {
+    const r = this.currentDate, o = new Date(r.setFullYear(e));
+    this.currentDate = o, this.activeModal = "none";
+  }
+  changeMonth(e) {
+    const r = this.currentDate, o = new Date(r.setMonth(e));
+    this.currentDate = o, this.activeModal = "none";
+  }
+  activateModal(e) {
+    this.activeModal = e;
+  }
+  /* Helper/Get Functions */
+  static formatMonthOrDayIndex(e) {
+    return (e + 1).toString().padStart(2, "0");
+  }
+  static formatDate(e) {
+    return e.toString().padStart(2, "0");
+  }
+  numberOfDaysinMonth() {
+    return new Date(this.getYear(), this.getMonth() + 1, 0).getDate();
+  }
+  getMonth() {
+    return this.currentDate.getMonth();
+  }
+  getMonthName() {
+    return new Intl.DateTimeFormat(this.locale, {
+      month: "long"
+    }).format(this.currentDate);
+  }
+  getYear() {
+    return this.currentDate.getFullYear();
+  }
+  static dateToString(e) {
+    return `${e.getFullYear()}-${d.formatMonthOrDayIndex(
+      e.getMonth()
+    )}-${d.formatDate(e.getDate())}`;
+  }
+  async updateFocusForKeydown(e) {
+    this.currentDate = e, await this.updateComplete;
+    const r = this.shadowRoot?.querySelector(
+      `button[datetime="${d.dateToString(e)}"]`
+    );
+    r.setAttribute("tabindex", "0"), r.focus();
+  }
+  _handleCalendarKeyDown(e) {
+    const r = this.shadowRoot?.querySelector(
+      `button[datetime="${d.dateToString(this.currentDate)}"]`
+    );
+    if (e.key === "ArrowUp") {
+      const o = new Date(
+        this.getYear(),
+        this.getMonth(),
+        this.currentDate.getDate() - 7
+      );
+      this.updateFocusForKeydown(o), r.setAttribute("tabindex", "-1");
+    }
+    if (e.key === "ArrowDown") {
+      const o = new Date(
+        this.getYear(),
+        this.getMonth(),
+        this.currentDate.getDate() + 7
+      );
+      this.updateFocusForKeydown(o), r.setAttribute("tabindex", "-1");
+    }
+    if (e.key === "ArrowLeft") {
+      const o = new Date(
+        this.getYear(),
+        this.getMonth(),
+        this.currentDate.getDate() - 1
+      );
+      this.updateFocusForKeydown(o), r.setAttribute("tabindex", "-1");
+    }
+    if (e.key === "ArrowRight") {
+      const o = new Date(
+        this.getYear(),
+        this.getMonth(),
+        this.currentDate.getDate() + 1
+      );
+      this.updateFocusForKeydown(o), r.setAttribute("tabindex", "-1");
+    }
+    if (e.key === "Tab" && !e.shiftKey) {
+      const o = new CustomEvent("outsideClick", {
+        detail: {
+          composedPath: []
+        }
+      });
+      setTimeout(() => {
+        this.dispatchEvent(o);
+      }, 20);
+    }
+  }
+  async changeMonthFromNav(e) {
+    this.changeMonth(e), await this.updateComplete;
+    const o = (this.shadowRoot?.querySelector(
+      "cre8-calendar-navigation"
+    )).shadowRoot?.querySelector(
+      ".cre8-c-calendar-navigation__month-modal-button"
+    );
+    await this.updateComplete, o.shadowRoot.querySelector("button").focus();
+  }
+  async changeYearFromNav(e) {
+    this.changeYear(e), await this.updateComplete;
+    const o = (this.shadowRoot?.querySelector(
+      "cre8-calendar-navigation"
+    )).shadowRoot?.querySelector(
+      ".cre8-c-calendar-navigation__year-modal-button"
+    );
+    await this.updateComplete, o.shadowRoot.querySelector("button").focus();
+  }
+  /* Template Map Functions */
+  getDaysOfWeekAbbreviations() {
+    return this.weekDays.map(
+      (e) => c` <td>
+        <span aria-label="${e}">${e[0]}</span>
+      </td>`
+    );
+  }
+  /**
+   * Create array of Day Buttons to fill in excess calendar space at the beginning of the month.
+   *
+   * 1. Map from empty array of length equal to the amount of access calendar "slots" in the beginning of the month.
+   * (i.e. if the month starts on Wednesday (getDay = 3), there are 3 days prior that week from last month.)
+   *
+   * 2. Based on the indice of array, get the given day button's date, where the date is
+   * the last day of last month minus the max of the array plus the indice plus one -> x = lastday - (max - (i + 1))
+   * (Note: (max - (i + 1) equals the keys of the array in reverse order:
+   * [max - i + 1] -> [3-1, 3-2, 3-3] -> [2,1,0] for an array of [3])
+   * (i.e. if the calendar is starting on Wednesday June 1st, the access days on the calendar will be
+   * Sunday May 29th (31 - (2)), Monday May 30th (31 - (1)), Tuesday May 31st (31 - (0)))
+   *
+   * 3. Build out day button with necessary props
+   * */
+  getPreviousMonthDayButtons() {
+    return [
+      ...Array(new Date(this.getYear(), this.getMonth(), 1).getDay()).keys()
+    ].map((e) => {
+      const r = new Date(
+        this.getYear(),
+        this.getMonth(),
+        1
+      ).getDay(), o = new Date(this.getYear(), this.getMonth(), 0), t = o.getDate(), n = new Date(
+        o.getFullYear(),
+        o.getMonth(),
+        t - r + (e + 1)
+      ), i = this.dateConfig.today.getDate() === n.getDate() && this.dateConfig.today.getMonth() === n.getMonth() && this.dateConfig.today.getFullYear() === n.getFullYear(), A = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === n.getTime();
+      return c` <td>
+        <button
+          class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
+          datetime="${d.dateToString(n)}"
+          ?data-today="${i}"
+          ?data-selected="${A}"
+          tabindex="-1"
+          aria-label="${new Intl.DateTimeFormat(this.locale, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }).format(
+        /* @__PURE__ */ new Date(`${d.dateToString(n)}T00:00`)
+      )}"
+          @click="${() => this.emitSelectedDate(d.dateToString(n))}"
+        >
+          ${new Intl.NumberFormat(this.locale).format(n.getDate())}
+        </button>
+      </td>`;
+    });
+  }
+  /**
+   * Create array of Day Buttons to fill out current month
+   *
+   * 1. Map from empty array of length equal to the amount days in this month
+   *
+   * 2. Get the date of the current month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
+   *
+   * 3. Build out day button with necessary props
+   * */
+  getCurrentMonthDayButtons() {
+    return [...Array(this.numberOfDaysinMonth()).keys()].map((e) => {
+      const r = e + 1, o = new Date(this.getYear(), this.getMonth(), r), t = this.dateConfig.today.getDate() === r && this.dateConfig.today.getMonth() === this.getMonth() && this.dateConfig.today.getFullYear() === this.getYear(), n = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === o.getTime();
+      return c` <td>
+        <button
+          class="cre8-c-calendar__day-button"
+          datetime="${d.dateToString(o)}"
+          ?data-today="${t}"
+          ?data-selected="${n}"
+          tabindex="${r === this.currentDate.getDate() ? "0" : "-1"}"
+          aria-label="${new Intl.DateTimeFormat(this.locale, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }).format(/* @__PURE__ */ new Date(`${d.dateToString(o)}T00:00`))}"
+          @click="${() => this.emitSelectedDate(d.dateToString(o))}"
+        >
+          ${new Intl.NumberFormat(this.locale).format(e + 1)}
+        </button>
+      </td>`;
+    });
+  }
+  /**
+   * Create array of Day Buttons to fill in excess calendar space at the end of the month.
+   *
+   * 1. Map from empty array of length equal to the amount of access calendar "slots" at the end of the month.
+   * The array have an amount of slots equal to the number of days in a week minus how many days have already past
+   * and since getDay returns the index of the day of the week (Sunday = 0, Monday = 1 ...) our equations is
+   * x = 7 - (getDay() + 1)
+   * Note: (we need to add 1 because indexing starts at 0)
+   * so if the month ends on Monday (getDay() = 1), 5 = 7 - (1 + 1), there are 5 days that week from the new month
+   *
+   * 2. Get the date from the next month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
+   *
+   * 3. Build out day button with necessary props
+   * */
+  getNextMonthDayButtons() {
+    return [
+      ...Array(
+        6 - new Date(
+          this.getYear(),
+          this.getMonth(),
+          this.numberOfDaysinMonth()
+        ).getDay()
+      ).keys()
+    ].map((e) => {
+      const r = new Date(
+        this.getYear(),
+        this.getMonth(),
+        this.numberOfDaysinMonth()
+      ), o = new Date(
+        r.setDate(r.getDate() + 1)
+      ), t = new Date(
+        o.getFullYear(),
+        o.getMonth(),
+        e + 1
+      ), n = this.dateConfig.today.getDate() === t.getDate() && this.dateConfig.today.getMonth() === t.getMonth() && this.dateConfig.today.getFullYear() === t.getFullYear(), i = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === t.getTime();
+      return c` <td>
+        <button
+          class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
+          datetime="${d.dateToString(t)}"
+          ?data-today="${n}"
+          ?data-selected="${i}"
+          tabindex="-1"
+          aria-label="${new Intl.DateTimeFormat(this.locale, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }).format(
+        /* @__PURE__ */ new Date(`${d.dateToString(t)}T00:00`)
+      )}"
+          @click="${() => this.emitSelectedDate(d.dateToString(t))}"
+        >
+          ${new Intl.NumberFormat(this.locale).format(t.getDate())}
+        </button>
+      </td>`;
+    });
+  }
+  render() {
+    const e = this.componentClassNames("cre8-c-calendar", {});
+    return c` <div class="${e}">
+      ${this._activeModal === "month" ? c`<cre8-calendar-month-modal
+            currentMonth="${this.getMonth()}"
+            @changeMonth="${(r) => this.changeMonthFromNav(r.detail.month)}"
+          ></cre8-calendar-month-modal>` : p}
+      ${this._activeModal === "year" ? c`<cre8-calendar-year-modal
+            currentYear="${this.getYear()}"
+            @changeYear="${(r) => this.changeYearFromNav(r.detail.year)}"
+          ></cre8-calendar-year-modal>` : p}
+      ${this._activeModal === "none" ? c` ${this.hasShortcuts ? c`<div class="cre8-c-calendar__header-shortcuts">
+                    <cre8-button
+                      text="Today"
+                      variant="secondary"
+                      size="sm"
+                      @click="${() => this.emitSelectedDate(
+      d.dateToString(this.dateConfig.today)
+    )}"
+                    ></cre8-button>
+                    <cre8-button
+                      text="Tomorrow"
+                      variant="secondary"
+                      size="sm"
+                      @click="${() => this.emitSelectedDate(
+      d.dateToString(
+        new Date(
+          this.dateConfig.today.setDate(
+            this.dateConfig.today.getDate() + 1
+          )
+        )
+      )
+    )}"
+                    ></cre8-button>
+                    <cre8-button
+                      text="In 2 days"
+                      variant="secondary"
+                      size="sm"
+                      @click="${() => this.emitSelectedDate(
+      d.dateToString(
+        new Date(
+          this.dateConfig.today.setDate(
+            this.dateConfig.today.getDate() + 2
+          )
+        )
+      )
+    )}"
+                    ></cre8-button>
+                </div>` : p}
+            <cre8-calendar-navigation
+              monthName="${this.getMonthName()}"
+              year="${this.getYear()}"
+              @activateModal="${(r) => this.activateModal(r.detail.modal)}"
+              @changeMonth="${(r) => this.changeMonth(this.getMonth() + r.detail.addend)}"
+              @changeYear="${(r) => this.changeYear(this.getYear() + r.detail.addend)}"
+            >
+            </cre8-calendar-navigation>
+            <table>
+              <thead>
+                <tr>
+                  ${this.getDaysOfWeekAbbreviations()}
+                </tr>
+              </thead>
+              <tbody>
+                <tr @keydown=${this._handleCalendarKeyDown}>
+                  ${this.getPreviousMonthDayButtons()}
+                  ${this.getCurrentMonthDayButtons()}
+                  ${this.getNextMonthDayButtons()}
+                </tr>
+              </tbody>
+            </table>` : p}
+    </div>`;
+  }
+}, d.styles = [R], d);
+y([
+  C(".cre8-c-calendar__navigation-wrapper")
+], h.prototype, "_navWrapper", 2);
+y([
+  a({ type: Boolean, reflect: !0 })
+], h.prototype, "hasShortcuts", 2);
+y([
+  v()
+], h.prototype, "_activeModal", 2);
+y([
+  a({ reflect: !0, type: String })
+], h.prototype, "activeModal", 1);
+y([
+  v()
+], h.prototype, "_fieldDate", 2);
+y([
+  a({ reflect: !0, type: Date })
+], h.prototype, "fieldDate", 1);
+y([
+  v()
+], h.prototype, "_currentDate", 2);
+y([
+  a({ reflect: !0, type: Date })
+], h.prototype, "currentDate", 1);
+y([
+  v()
+], h.prototype, "locale", 2);
+y([
+  v()
+], h.prototype, "weekDays", 2);
+y([
+  v()
+], h.prototype, "dateConfig", 2);
+y([
+  v()
+], h.prototype, "dateFormatOptions", 2);
+let ee = h;
+customElements.get("cre8-calendar") === void 0 && customElements.define("cre8-calendar", ee);
+var re = Object.defineProperty, M = (u, e, r, o) => {
+  for (var t = void 0, n = u.length - 1, i; n >= 0; n--)
+    (i = u[n]) && (t = i(e, r, t) || t);
+  return t && re(e, r, t), t;
+};
+const F = class F extends B {
+  constructor() {
+    super(...arguments), this.type = "date", this.showCalendar = !1;
+  }
+  /**
+   * Handle Date On Input
+   * 1) Set the input's value equal to the event.target.value when the input is changed.
+   * 2) Set the internal form value of the input to the updated value
+   */
+  handleDateOnInput(e) {
+    this.value = e.target.value, this.internals.setFormValue(this.value);
+  }
+  handleCalendarSelect(e) {
+    this.value = e.detail.date, this.internals.setFormValue(this.value), this.showCalendar = !1;
+  }
+  handleOutsideClick(e) {
+    const r = this.renderRoot.querySelector(".cre8-c-date-picker");
+    this.showCalendar && !e.detail.composedPath.includes(r) && (this.showCalendar = !1);
+  }
+  toggleCalendar() {
+    !this.disabled && !this.readonly && (this.showCalendar = !this.showCalendar);
+  }
+  render() {
+    const e = this.componentClassNames("cre8-c-date-picker", {
+      "cre8-is-error": this.isError,
+      "cre8-is-success": this.isSuccess,
+      "cre8-c-date-picker--disabled": this.disabled,
+      "cre8-c-date-picker--read-only": this.readonly
+    });
+    return this.type = "date", c`
+      <div class="${e}">
+        <label class="cre8-c-date-picker__label" for="${this.fieldId}"
+          >${this.label}</label
+        >
+        <div class="cre8-c-date-picker__body">
+          <input
+            class="cre8-c-date-picker__input"
+            autocomplete=${b(this.autocomplete)}
+            type="${this.type}"
+            id="${this.fieldId}"
+            name="${b(this.name)}"
+            max=${b(this.max)}
+            min=${b(this.min)}
+            value="${b(this.value)}"
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            ?disabled="${this.disabled}"
+            aria-describedby="${b(this.fieldNoteAria())}"
+            placeholder="${b(this.placeholder)}"
+            @input=${this.handleDateOnInput}
+            @click=${this.toggleCalendar}
+          />
+          <cre8-button
+            class="cre8-c-date-picker__calendar-icon-button"
+            aria-expanded="${this.showCalendar}"
+            aria-label="Show Calendar"
+            ?disabled="${this.disabled || this.readonly}"
+            ?hideText=${!0}
+            iconName="calendar-datepicker"
+            variant="tertiary"
+            @click="${this.toggleCalendar}"
+          ></cre8-button>
+        </div>
+        ${this.showCalendar ? c`<cre8-calendar
+              fieldDate="${b(this.value)}"
+              ?hasShortcuts=${this.hasShortcuts}
+              @dateSelect="${this.handleCalendarSelect}"
+              @outsideClick="${this.handleOutsideClick}"
+            ></cre8-calendar>` : p}
+        ${this.fieldNote || this.slotNotEmpty("fieldNote") ? c`<cre8-field-note
+              id=${this.ariaDescribedBy}
+              class="cre8-c-date-picker__field-note"
+              ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
+            >` : p}
+        ${this.renderSuccessErrorFieldNote()}
+      </div>
+    `;
+  }
+};
+F.styles = [P];
+let k = F;
+M([
+  C('input[type="date"]')
+], k.prototype, "field");
+M([
+  v()
+], k.prototype, "showCalendar");
+M([
+  a({ type: Boolean, reflect: !0 })
+], k.prototype, "hasShortcuts");
+customElements.get("cre8-date-picker") === void 0 && customElements.define("cre8-date-picker", k);
+export {
+  s as C,
+  g as a,
+  k as b
+};