@tmorrow/cre8-wc 1.0.26 → 1.1.2

package/lib/components/date-picker/date-picker.js

@@ -1,213 +1,17 @@
-import { css as v, html as s, nothing as p } from "lit";
-import { ifDefined as m } from "lit-html/directives/if-defined.js";
-import { state as l, property as u, query as x } from "lit/decorators.js";
-import { Cre8Field as N } from "../field/field.js";
-import { Cre8Element as D } from "../cre8-element.js";
-import "../../icon-DImqxDiW.js";
+import { css as v, html as s, nothing as y } from "lit";
+import { ifDefined as u } from "lit-html/directives/if-defined.js";
+import { state as l, property as p, query as C } from "lit/decorators.js";
+import { Cre8Field as R } from "../field/field.js";
+import { Cre8Element as w } from "../cre8-element.js";
+import "../../icon-D22g8aWB.js";
 import "../button/button.js";
-const F = v`@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: calc(8px * 1);
-  background: var(--cre8-color-bg-default);
-  border: none;
-  border-radius: 0;
-
-  --cre8-icon-height: calc(8px * 3);
-  --cre8-icon-width: calc(8px * 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;
-  }
-}
-`, O = v`@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: calc(8px * 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: calc(8px * 2);
-  padding-bottom: calc(8px * 1);
-
-  cre8-button + cre8-button {
-    padding-left: calc(8px * 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);
-    }
-  }
-}
-
-`, E = v`@import '../../design-tokens/core/scss/theming/component';
-
-.cre8-c-calendar-month-modal {
-  padding: calc(8px * 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;
-}
-`;
-var A = Object.defineProperty, Y = (c, t, e, r) => {
-  for (var a = void 0, n = c.length - 1, i; n >= 0; n--)
-    (i = c[n]) && (a = i(t, e, a) || a);
-  return a && A(t, e, a), a;
+const I = v`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-date-picker__label{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:block;margin-bottom:0.5rem}.cre8-c-date-picker__body{position:relative;display:flex;align-items:center}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:0.5rem;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__calendar-icon-button,.cre8-c-date-picker--read-only .cre8-c-date-picker__calendar-icon-button{background:var(--cre8-color-bg-disabled)}.cre8-c-date-picker__input{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-date-picker__input:hover:not(:disabled),.cre8-c-date-picker__input:focus:not(:disabled),.cre8-c-date-picker__input:active:not(:disabled),.cre8-c-date-picker__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-date-picker__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-date-picker__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-date-picker__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input{border-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`, z = v`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-calendar{min-width:340px;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:0.25rem;background-color:var(--cre8-color-bg-default);position:absolute}.cre8-c-calendar__header-shortcuts{display:inline-flex;justify-content:center;width:100%;padding-top:1rem;padding-bottom:0.5rem}.cre8-c-calendar__header-shortcuts cre8-button+cre8-button{padding-left:0.5rem}.cre8-c-calendar__header-shortcuts cre8-button{max-height:32px}table{width:100%}tr{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:grid;grid-row-gap:.33em;grid-template-columns:repeat(7, 1fr);list-style:none;margin:unset;padding:unset;position:relative}td{align-items:center;display:flex;height:48px;justify-content:center;width:48px}.cre8-c-calendar :is(thead,tbody) :is(span,button){font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);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}.cre8-c-calendar__day-button{border:none;background:none;margin:0;padding:0}.cre8-c-calendar__day-button:hover,.cre8-c-calendar__day-button:focus{background:var(--cre8-color-bg-default-hover)}.cre8-c-calendar__day-button.cre8-c-calendar__different-month{color:var(--cre8-color-content-subtle)}.cre8-c-calendar__day-button.cre8-c-calendar__different-month:hover,.cre8-c-calendar__day-button.cre8-c-calendar__different-month:focus{background:var(--cre8-color-bg-subtle)}.cre8-c-calendar__day-button[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)}.cre8-c-calendar__day-button[data-selected]{background:var(--cre8-color-bg-brand-strong);color:var(--cre8-color-content-knockout)}.cre8-c-calendar__day-button[data-selected]:hover,.cre8-c-calendar__day-button[data-selected]:focus{background:var(--cre8-color-bg-brand-strong-hover)}`, F = v`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-calendar-month-modal{padding:0.5rem}ol{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:grid;grid-row-gap:.33em;grid-template-columns:repeat(3, 1fr);list-style:none;margin:unset;padding:unset}li{display:inline-flex;justify-content:center}`;
+var S = Object.defineProperty, O = (d, e, t, a) => {
+  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
+    (n = d[i]) && (r = n(e, t, r) || r);
+  return r && S(e, t, r), r;
 };
-const k = class k extends D {
+const _ = class _ extends w {
   constructor() {
     super(), this.monthNames = [
       "January",
@@ -232,107 +36,79 @@ const k = class k extends D {
       "li[data-current-month]"
     ).children[0].shadowRoot?.querySelector("button")).focus();
   }
-  emitMonth(t) {
-    const e = new CustomEvent("changeMonth", {
+  emitMonth(e) {
+    const t = new CustomEvent("changeMonth", {
       detail: {
-        month: t
+        month: e
       }
     });
-    this.dispatchEvent(e);
+    this.dispatchEvent(t);
   }
   getMonthListItems() {
     return this.monthNames.map(
-      (t, e) => s` <li ?data-current-month="${e === this.currentMonth}" >
-          <cre8-button text="${t}" variant="tertiary" size="sm"
-          @click="${() => this.emitMonth(e)}"></cre8-button>
+      (e, t) => s` <li ?data-current-month="${t === this.currentMonth}" >
+          <cre8-button text="${e}" variant="tertiary" size="sm"
+          @click="${() => this.emitMonth(t)}"></cre8-button>
         </li>`
     );
   }
   render() {
-    const t = this.componentClassNames("cre8-c-calendar-month-modal", {});
-    return s` <div class="${t}">
+    const e = this.componentClassNames("cre8-c-calendar-month-modal", {});
+    return s` <div class="${e}">
       <ol aria-label="choose a month">
         ${this.getMonthListItems()}
       </ol>
     </div> `;
   }
 };
-k.styles = [E];
-let b = k;
-Y([
+_.styles = [F];
+let f = _;
+O([
   l()
-], b.prototype, "monthNames");
-Y([
-  u({ reflect: !0, type: Number })
-], b.prototype, "currentMonth");
-customElements.get("cre8-calendar-month-modal") === void 0 && customElements.define("cre8-calendar-month-modal", b);
-const I = v`@import '../../design-tokens/core/scss/theming/component';
-
-.cre8-c-calendar-year-modal {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: calc(8px * 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 P = Object.defineProperty, q = Object.getOwnPropertyDescriptor, w = (c, t, e, r) => {
-  for (var a = r > 1 ? void 0 : r ? q(t, e) : t, n = c.length - 1, i; n >= 0; n--)
-    (i = c[n]) && (a = (r ? i(t, e, a) : i(a)) || a);
-  return r && a && P(t, e, a), a;
+], f.prototype, "monthNames");
+O([
+  p({ reflect: !0, type: Number })
+], f.prototype, "currentMonth");
+customElements.get("cre8-calendar-month-modal") === void 0 && customElements.define("cre8-calendar-month-modal", f);
+const N = v`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-calendar-year-modal{display:flex;justify-content:space-around;align-items:center;padding:0.5rem}ol{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:grid;grid-row-gap:.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 X = Object.defineProperty, E = Object.getOwnPropertyDescriptor, x = (d, e, t, a) => {
+  for (var r = a > 1 ? void 0 : a ? E(e, t) : e, i = d.length - 1, n; i >= 0; i--)
+    (n = d[i]) && (r = (a ? n(e, t, r) : n(r)) || r);
+  return a && r && X(e, t, r), r;
 };
-const M = class M extends D {
+const D = class D extends w {
   get currentYear() {
     return this._currentYear;
   }
-  set currentYear(t) {
-    const e = this._currentYear;
-    this._currentYear = t, this.modalAnchorYear = t, this.requestUpdate("currentDate", e), this.createYearArray(this.currentYear);
+  set currentYear(e) {
+    const t = this._currentYear;
+    this._currentYear = e, this.modalAnchorYear = e, this.requestUpdate("currentDate", t), this.createYearArray(this.currentYear);
   }
   constructor() {
     super(), this.yearNumbers = [];
   }
-  emitYear(t) {
-    const e = new CustomEvent("changeYear", {
+  emitYear(e) {
+    const t = new CustomEvent("changeYear", {
       detail: {
-        year: t
+        year: e
       }
     });
-    this.dispatchEvent(e);
+    this.dispatchEvent(t);
   }
-  createYearArray(t) {
-    const e = Array.from(Array(12).keys());
-    this.yearNumbers = e.map((r) => r + (t - 7));
+  createYearArray(e) {
+    const t = Array.from(Array(12).keys());
+    this.yearNumbers = t.map((a) => a + (e - 7));
   }
   getYearListItems() {
     return this.yearNumbers.map(
-      ((t) => s` <li
-        ?data-current-year="${t === this.currentYear}"
+      ((e) => s` <li
+        ?data-current-year="${e === this.currentYear}"
       >
         <cre8-button
-          text="${t}"
+          text="${e}"
           variant="tertiary"
           size="sm"
-          @click="${() => this.emitYear(t)}"
+          @click="${() => this.emitYear(e)}"
         ></cre8-button>
       </li>`)
     );
@@ -352,12 +128,12 @@ const M = class M extends D {
     this.modalAnchorYear += 12, this.createYearArray(this.modalAnchorYear);
   }
   render() {
-    const t = this.componentClassNames(
+    const e = this.componentClassNames(
       "cre8-c-calendar-year-modal",
       {}
     );
     return s`
-      <div class="${t}">
+      <div class="${e}">
         <cre8-button
           class="cre8-c-calendar-year-modal__nav-button"
           @click="${this.previousYearArray}"
@@ -381,72 +157,59 @@ const M = class M extends D {
     `;
   }
 };
-M.styles = [I];
-let y = M;
-w([
+D.styles = [N];
+let m = D;
+x([
   l()
-], y.prototype, "yearNumbers", 2);
-w([
+], m.prototype, "yearNumbers", 2);
+x([
   l()
-], y.prototype, "_currentYear", 2);
-w([
+], m.prototype, "_currentYear", 2);
+x([
   l()
-], y.prototype, "modalAnchorYear", 2);
-w([
-  u({ reflect: !0, type: Number })
-], y.prototype, "currentYear", 1);
-customElements.get("cre8-calendar-year-modal") === void 0 && customElements.define("cre8-calendar-year-modal", y);
-const R = v`@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 B = Object.defineProperty, S = (c, t, e, r) => {
-  for (var a = void 0, n = c.length - 1, i; n >= 0; n--)
-    (i = c[n]) && (a = i(t, e, a) || a);
-  return a && B(t, e, a), a;
+], m.prototype, "modalAnchorYear", 2);
+x([
+  p({ reflect: !0, type: Number })
+], m.prototype, "currentYear", 1);
+customElements.get("cre8-calendar-year-modal") === void 0 && customElements.define("cre8-calendar-year-modal", m);
+const A = v`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-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, T = (d, e, t, a) => {
+  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
+    (n = d[i]) && (r = n(e, t, r) || r);
+  return r && q(e, t, r), r;
 };
-const _ = class _ extends D {
-  activateModal(t) {
-    const e = new CustomEvent("activateModal", {
+const $ = class $ extends w {
+  activateModal(e) {
+    const t = new CustomEvent("activateModal", {
       detail: {
-        modal: t
+        modal: e
       }
     });
-    this.dispatchEvent(e);
+    this.dispatchEvent(t);
   }
-  changeMonth(t) {
-    const e = new CustomEvent("changeMonth", {
+  changeMonth(e) {
+    const t = new CustomEvent("changeMonth", {
       detail: {
-        addend: t
+        addend: e
       }
     });
-    this.dispatchEvent(e);
+    this.dispatchEvent(t);
   }
-  changeYear(t) {
-    const e = new CustomEvent("changeYear", {
+  changeYear(e) {
+    const t = new CustomEvent("changeYear", {
       detail: {
-        addend: t
+        addend: e
       }
     });
-    this.dispatchEvent(e);
+    this.dispatchEvent(t);
   }
   render() {
-    const t = this.componentClassNames(
+    const e = this.componentClassNames(
       "cre8-c-calendar-navigation",
       {}
     );
     return s`
-      <div class="${t}">
+      <div class="${e}">
         <cre8-button
           variant="tertiary"
           text="Previous year"
@@ -502,21 +265,21 @@ const _ = class _ extends D {
     `;
   }
 };
-_.styles = [R];
-let f = _;
-S([
-  u({ type: String, reflect: !0 })
-], f.prototype, "monthName");
-S([
-  u({ type: String, reflect: !0 })
-], f.prototype, "year");
-customElements.get("cre8-calendar-navigation") === void 0 && customElements.define("cre8-calendar-navigation", f);
-var j = Object.defineProperty, L = Object.getOwnPropertyDescriptor, h = (c, t, e, r) => {
-  for (var a = r > 1 ? void 0 : r ? L(t, e) : t, n = c.length - 1, i; n >= 0; n--)
-    (i = c[n]) && (a = (r ? i(t, e, a) : i(a)) || a);
-  return r && a && j(t, e, a), a;
+$.styles = [A];
+let b = $;
+T([
+  p({ type: String, reflect: !0 })
+], b.prototype, "monthName");
+T([
+  p({ type: String, reflect: !0 })
+], b.prototype, "year");
+customElements.get("cre8-calendar-navigation") === void 0 && customElements.define("cre8-calendar-navigation", b);
+var P = Object.defineProperty, j = Object.getOwnPropertyDescriptor, h = (d, e, t, a) => {
+  for (var r = a > 1 ? void 0 : a ? j(e, t) : e, i = d.length - 1, n; i >= 0; i--)
+    (n = d[i]) && (r = (a ? n(e, t, r) : n(r)) || r);
+  return a && r && P(e, t, r), r;
 }, o;
-const d = (o = class extends D {
+const c = (o = class extends w {
   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,
@@ -543,24 +306,24 @@ const d = (o = class extends D {
   get activeModal() {
     return this._activeModal;
   }
-  set activeModal(t) {
-    this._activeModal = t;
+  set activeModal(e) {
+    this._activeModal = e;
   }
   get fieldDate() {
     return this._fieldDate;
   }
-  set fieldDate(t) {
-    const e = this._fieldDate;
-    this.requestUpdate("fieldDate", e);
-    const r = !!(t && (/* @__PURE__ */ new Date(`${t}T00:00`)).getTime());
-    this.currentDate = r ? /* @__PURE__ */ new Date(`${t}T00:00`) : /* @__PURE__ */ new Date(), this._fieldDate = r ? t : "";
+  set fieldDate(e) {
+    const t = this._fieldDate;
+    this.requestUpdate("fieldDate", t);
+    const a = !!(e && (/* @__PURE__ */ new Date(`${e}T00:00`)).getTime());
+    this.currentDate = a ? /* @__PURE__ */ new Date(`${e}T00:00`) : /* @__PURE__ */ new Date(), this._fieldDate = a ? e : "";
   }
   get currentDate() {
     return this._currentDate;
   }
-  set currentDate(t) {
-    const e = this._currentDate;
-    this._currentDate = t, this.requestUpdate("currentDate", e);
+  set currentDate(e) {
+    const t = this._currentDate;
+    this._currentDate = e, this.requestUpdate("currentDate", t);
   }
   connectedCallback() {
     super.connectedCallback(), window.addEventListener("click", this._handleOnClickOutside, !1);
@@ -569,45 +332,45 @@ const d = (o = class extends D {
     super.disconnectedCallback(), window.removeEventListener("click", this._handleOnClickOutside, !1);
   }
   /* Click Event Functions */
-  _handleOnClickOutside(t) {
+  _handleOnClickOutside(e) {
     if (!this.shadowRoot?.host)
       throw Error(
         "Could not determine navigation context during click handler"
       );
-    if (!t.composedPath().includes(this.shadowRoot.host)) {
-      const r = new CustomEvent("outsideClick", {
+    if (!e.composedPath().includes(this.shadowRoot.host)) {
+      const a = new CustomEvent("outsideClick", {
         detail: {
-          composedPath: t.composedPath()
+          composedPath: e.composedPath()
         }
       });
-      this.dispatchEvent(r);
+      this.dispatchEvent(a);
     }
   }
-  emitSelectedDate(t) {
-    const e = new CustomEvent("dateSelect", {
+  emitSelectedDate(e) {
+    const t = new CustomEvent("dateSelect", {
       detail: {
-        date: t
+        date: e
       }
     });
-    this.currentDate = /* @__PURE__ */ new Date(`${t}T00:00`), this.dispatchEvent(e);
+    this.currentDate = /* @__PURE__ */ new Date(`${e}T00:00`), this.dispatchEvent(t);
   }
-  changeYear(t) {
-    const e = this.currentDate, r = new Date(e.setFullYear(t));
-    this.currentDate = r, this.activeModal = "none";
+  changeYear(e) {
+    const t = this.currentDate, a = new Date(t.setFullYear(e));
+    this.currentDate = a, this.activeModal = "none";
   }
-  changeMonth(t) {
-    const e = this.currentDate, r = new Date(e.setMonth(t));
-    this.currentDate = r, this.activeModal = "none";
+  changeMonth(e) {
+    const t = this.currentDate, a = new Date(t.setMonth(e));
+    this.currentDate = a, this.activeModal = "none";
   }
-  activateModal(t) {
-    this.activeModal = t;
+  activateModal(e) {
+    this.activeModal = e;
   }
   /* Helper/Get Functions */
-  static formatMonthOrDayIndex(t) {
-    return (t + 1).toString().padStart(2, "0");
+  static formatMonthOrDayIndex(e) {
+    return (e + 1).toString().padStart(2, "0");
   }
-  static formatDate(t) {
-    return t.toString().padStart(2, "0");
+  static formatDate(e) {
+    return e.toString().padStart(2, "0");
   }
   numberOfDaysinMonth() {
     return new Date(this.getYear(), this.getMonth() + 1, 0).getDate();
@@ -623,88 +386,88 @@ const d = (o = class extends D {
   getYear() {
     return this.currentDate.getFullYear();
   }
-  static dateToString(t) {
-    return `${t.getFullYear()}-${o.formatMonthOrDayIndex(
-      t.getMonth()
-    )}-${o.formatDate(t.getDate())}`;
+  static dateToString(e) {
+    return `${e.getFullYear()}-${o.formatMonthOrDayIndex(
+      e.getMonth()
+    )}-${o.formatDate(e.getDate())}`;
   }
-  async updateFocusForKeydown(t) {
-    this.currentDate = t, await this.updateComplete;
-    const e = this.shadowRoot?.querySelector(
-      `button[datetime="${o.dateToString(t)}"]`
+  async updateFocusForKeydown(e) {
+    this.currentDate = e, await this.updateComplete;
+    const t = this.shadowRoot?.querySelector(
+      `button[datetime="${o.dateToString(e)}"]`
     );
-    e.setAttribute("tabindex", "0"), e.focus();
+    t.setAttribute("tabindex", "0"), t.focus();
   }
-  _handleCalendarKeyDown(t) {
-    const e = this.shadowRoot?.querySelector(
+  _handleCalendarKeyDown(e) {
+    const t = this.shadowRoot?.querySelector(
       `button[datetime="${o.dateToString(this.currentDate)}"]`
     );
-    if (t.key === "ArrowUp") {
-      const r = new Date(
+    if (e.key === "ArrowUp") {
+      const a = new Date(
         this.getYear(),
         this.getMonth(),
         this.currentDate.getDate() - 7
       );
-      this.updateFocusForKeydown(r), e.setAttribute("tabindex", "-1");
+      this.updateFocusForKeydown(a), t.setAttribute("tabindex", "-1");
     }
-    if (t.key === "ArrowDown") {
-      const r = new Date(
+    if (e.key === "ArrowDown") {
+      const a = new Date(
         this.getYear(),
         this.getMonth(),
         this.currentDate.getDate() + 7
       );
-      this.updateFocusForKeydown(r), e.setAttribute("tabindex", "-1");
+      this.updateFocusForKeydown(a), t.setAttribute("tabindex", "-1");
     }
-    if (t.key === "ArrowLeft") {
-      const r = new Date(
+    if (e.key === "ArrowLeft") {
+      const a = new Date(
         this.getYear(),
         this.getMonth(),
         this.currentDate.getDate() - 1
       );
-      this.updateFocusForKeydown(r), e.setAttribute("tabindex", "-1");
+      this.updateFocusForKeydown(a), t.setAttribute("tabindex", "-1");
     }
-    if (t.key === "ArrowRight") {
-      const r = new Date(
+    if (e.key === "ArrowRight") {
+      const a = new Date(
         this.getYear(),
         this.getMonth(),
         this.currentDate.getDate() + 1
       );
-      this.updateFocusForKeydown(r), e.setAttribute("tabindex", "-1");
+      this.updateFocusForKeydown(a), t.setAttribute("tabindex", "-1");
     }
-    if (t.key === "Tab" && !t.shiftKey) {
-      const r = new CustomEvent("outsideClick", {
+    if (e.key === "Tab" && !e.shiftKey) {
+      const a = new CustomEvent("outsideClick", {
         detail: {
           composedPath: []
         }
       });
       setTimeout(() => {
-        this.dispatchEvent(r);
+        this.dispatchEvent(a);
       }, 20);
     }
   }
-  async changeMonthFromNav(t) {
-    this.changeMonth(t), await this.updateComplete;
-    const r = (this.shadowRoot?.querySelector(
+  async changeMonthFromNav(e) {
+    this.changeMonth(e), await this.updateComplete;
+    const a = (this.shadowRoot?.querySelector(
       "cre8-calendar-navigation"
     )).shadowRoot?.querySelector(
       ".cre8-c-calendar-navigation__month-modal-button"
     );
-    await this.updateComplete, r.shadowRoot.querySelector("button").focus();
+    await this.updateComplete, a.shadowRoot.querySelector("button").focus();
   }
-  async changeYearFromNav(t) {
-    this.changeYear(t), await this.updateComplete;
-    const r = (this.shadowRoot?.querySelector(
+  async changeYearFromNav(e) {
+    this.changeYear(e), await this.updateComplete;
+    const a = (this.shadowRoot?.querySelector(
       "cre8-calendar-navigation"
     )).shadowRoot?.querySelector(
       ".cre8-c-calendar-navigation__year-modal-button"
     );
-    await this.updateComplete, r.shadowRoot.querySelector("button").focus();
+    await this.updateComplete, a.shadowRoot.querySelector("button").focus();
   }
   /* Template Map Functions */
   getDaysOfWeekAbbreviations() {
     return this.weekDays.map(
-      (t) => s` <td>
-        <span aria-label="${t}">${t[0]}</span>
+      (e) => s` <td>
+        <span aria-label="${e}">${e[0]}</span>
       </td>`
     );
   }
@@ -726,22 +489,22 @@ const d = (o = class extends D {
   getPreviousMonthDayButtons() {
     return [
       ...Array(new Date(this.getYear(), this.getMonth(), 1).getDay()).keys()
-    ].map((t) => {
-      const e = new Date(
+    ].map((e) => {
+      const t = new Date(
         this.getYear(),
         this.getMonth(),
         1
-      ).getDay(), r = new Date(this.getYear(), this.getMonth(), 0), a = r.getDate(), n = new Date(
-        r.getFullYear(),
-        r.getMonth(),
-        a - e + (t + 1)
-      ), i = this.dateConfig.today.getDate() === n.getDate() && this.dateConfig.today.getMonth() === n.getMonth() && this.dateConfig.today.getFullYear() === n.getFullYear(), T = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === n.getTime();
+      ).getDay(), a = new Date(this.getYear(), this.getMonth(), 0), r = a.getDate(), i = new Date(
+        a.getFullYear(),
+        a.getMonth(),
+        r - t + (e + 1)
+      ), n = this.dateConfig.today.getDate() === i.getDate() && this.dateConfig.today.getMonth() === i.getMonth() && this.dateConfig.today.getFullYear() === i.getFullYear(), Y = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === i.getTime();
       return s` <td>
         <button
           class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
-          datetime="${o.dateToString(n)}"
-          ?data-today="${i}"
-          ?data-selected="${T}"
+          datetime="${o.dateToString(i)}"
+          ?data-today="${n}"
+          ?data-selected="${Y}"
           tabindex="-1"
           aria-label="${new Intl.DateTimeFormat(this.locale, {
         weekday: "long",
@@ -749,11 +512,11 @@ const d = (o = class extends D {
         month: "long",
         day: "numeric"
       }).format(
-        /* @__PURE__ */ new Date(`${o.dateToString(n)}T00:00`)
+        /* @__PURE__ */ new Date(`${o.dateToString(i)}T00:00`)
       )}"
-          @click="${() => this.emitSelectedDate(o.dateToString(n))}"
+          @click="${() => this.emitSelectedDate(o.dateToString(i))}"
         >
-          ${new Intl.NumberFormat(this.locale).format(n.getDate())}
+          ${new Intl.NumberFormat(this.locale).format(i.getDate())}
         </button>
       </td>`;
     });
@@ -768,24 +531,24 @@ const d = (o = class extends D {
    * 3. Build out day button with necessary props
    * */
   getCurrentMonthDayButtons() {
-    return [...Array(this.numberOfDaysinMonth()).keys()].map((t) => {
-      const e = t + 1, r = new Date(this.getYear(), this.getMonth(), e), a = this.dateConfig.today.getDate() === e && this.dateConfig.today.getMonth() === this.getMonth() && this.dateConfig.today.getFullYear() === this.getYear(), n = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === r.getTime();
+    return [...Array(this.numberOfDaysinMonth()).keys()].map((e) => {
+      const t = e + 1, a = new Date(this.getYear(), this.getMonth(), t), r = this.dateConfig.today.getDate() === t && this.dateConfig.today.getMonth() === this.getMonth() && this.dateConfig.today.getFullYear() === this.getYear(), i = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === a.getTime();
       return s` <td>
         <button
           class="cre8-c-calendar__day-button"
-          datetime="${o.dateToString(r)}"
-          ?data-today="${a}"
-          ?data-selected="${n}"
-          tabindex="${e === this.currentDate.getDate() ? "0" : "-1"}"
+          datetime="${o.dateToString(a)}"
+          ?data-today="${r}"
+          ?data-selected="${i}"
+          tabindex="${t === this.currentDate.getDate() ? "0" : "-1"}"
           aria-label="${new Intl.DateTimeFormat(this.locale, {
         weekday: "long",
         year: "numeric",
         month: "long",
         day: "numeric"
-      }).format(/* @__PURE__ */ new Date(`${o.dateToString(r)}T00:00`))}"
-          @click="${() => this.emitSelectedDate(o.dateToString(r))}"
+      }).format(/* @__PURE__ */ new Date(`${o.dateToString(a)}T00:00`))}"
+          @click="${() => this.emitSelectedDate(o.dateToString(a))}"
         >
-          ${new Intl.NumberFormat(this.locale).format(t + 1)}
+          ${new Intl.NumberFormat(this.locale).format(e + 1)}
         </button>
       </td>`;
     });
@@ -813,24 +576,24 @@ const d = (o = class extends D {
           this.numberOfDaysinMonth()
         ).getDay()
       ).keys()
-    ].map((t) => {
-      const e = new Date(
+    ].map((e) => {
+      const t = new Date(
         this.getYear(),
         this.getMonth(),
         this.numberOfDaysinMonth()
-      ), r = new Date(
-        e.setDate(e.getDate() + 1)
       ), a = new Date(
-        r.getFullYear(),
-        r.getMonth(),
-        t + 1
-      ), n = this.dateConfig.today.getDate() === a.getDate() && this.dateConfig.today.getMonth() === a.getMonth() && this.dateConfig.today.getFullYear() === a.getFullYear(), i = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === a.getTime();
+        t.setDate(t.getDate() + 1)
+      ), r = new Date(
+        a.getFullYear(),
+        a.getMonth(),
+        e + 1
+      ), i = this.dateConfig.today.getDate() === r.getDate() && this.dateConfig.today.getMonth() === r.getMonth() && this.dateConfig.today.getFullYear() === r.getFullYear(), n = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === r.getTime();
       return s` <td>
         <button
           class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
-          datetime="${o.dateToString(a)}"
-          ?data-today="${n}"
-          ?data-selected="${i}"
+          datetime="${o.dateToString(r)}"
+          ?data-today="${i}"
+          ?data-selected="${n}"
           tabindex="-1"
           aria-label="${new Intl.DateTimeFormat(this.locale, {
         weekday: "long",
@@ -838,26 +601,26 @@ const d = (o = class extends D {
         month: "long",
         day: "numeric"
       }).format(
-        /* @__PURE__ */ new Date(`${o.dateToString(a)}T00:00`)
+        /* @__PURE__ */ new Date(`${o.dateToString(r)}T00:00`)
       )}"
-          @click="${() => this.emitSelectedDate(o.dateToString(a))}"
+          @click="${() => this.emitSelectedDate(o.dateToString(r))}"
         >
-          ${new Intl.NumberFormat(this.locale).format(a.getDate())}
+          ${new Intl.NumberFormat(this.locale).format(r.getDate())}
         </button>
       </td>`;
     });
   }
   render() {
-    const t = this.componentClassNames("cre8-c-calendar", {});
-    return s` <div class="${t}">
+    const e = this.componentClassNames("cre8-c-calendar", {});
+    return s` <div class="${e}">
       ${this._activeModal === "month" ? s`<cre8-calendar-month-modal
             currentMonth="${this.getMonth()}"
-            @changeMonth="${(e) => this.changeMonthFromNav(e.detail.month)}"
-          ></cre8-calendar-month-modal>` : p}
+            @changeMonth="${(t) => this.changeMonthFromNav(t.detail.month)}"
+          ></cre8-calendar-month-modal>` : y}
       ${this._activeModal === "year" ? s`<cre8-calendar-year-modal
             currentYear="${this.getYear()}"
-            @changeYear="${(e) => this.changeYearFromNav(e.detail.year)}"
-          ></cre8-calendar-year-modal>` : p}
+            @changeYear="${(t) => this.changeYearFromNav(t.detail.year)}"
+          ></cre8-calendar-year-modal>` : y}
       ${this._activeModal === "none" ? s` ${this.hasShortcuts ? s`<div class="cre8-c-calendar__header-shortcuts">
                     <cre8-button
                       text="Today"
@@ -895,13 +658,13 @@ const d = (o = class extends D {
       )
     )}"
                     ></cre8-button>
-                </div>` : p}
+                </div>` : y}
             <cre8-calendar-navigation
               monthName="${this.getMonthName()}"
               year="${this.getYear()}"
-              @activateModal="${(e) => this.activateModal(e.detail.modal)}"
-              @changeMonth="${(e) => this.changeMonth(this.getMonth() + e.detail.addend)}"
-              @changeYear="${(e) => this.changeYear(this.getYear() + e.detail.addend)}"
+              @activateModal="${(t) => this.activateModal(t.detail.modal)}"
+              @changeMonth="${(t) => this.changeMonth(this.getMonth() + t.detail.addend)}"
+              @changeYear="${(t) => this.changeYear(this.getYear() + t.detail.addend)}"
             >
             </cre8-calendar-navigation>
             <table>
@@ -917,54 +680,54 @@ const d = (o = class extends D {
                   ${this.getNextMonthDayButtons()}
                 </tr>
               </tbody>
-            </table>` : p}
+            </table>` : y}
     </div>`;
   }
-}, o.styles = [O], o);
+}, o.styles = [z], o);
 h([
-  x(".cre8-c-calendar__navigation-wrapper")
-], d.prototype, "_navWrapper", 2);
+  C(".cre8-c-calendar__navigation-wrapper")
+], c.prototype, "_navWrapper", 2);
 h([
-  u({ type: Boolean, reflect: !0 })
-], d.prototype, "hasShortcuts", 2);
+  p({ type: Boolean, reflect: !0 })
+], c.prototype, "hasShortcuts", 2);
 h([
   l()
-], d.prototype, "_activeModal", 2);
+], c.prototype, "_activeModal", 2);
 h([
-  u({ reflect: !0, type: String })
-], d.prototype, "activeModal", 1);
+  p({ reflect: !0, type: String })
+], c.prototype, "activeModal", 1);
 h([
   l()
-], d.prototype, "_fieldDate", 2);
+], c.prototype, "_fieldDate", 2);
 h([
-  u({ reflect: !0, type: Date })
-], d.prototype, "fieldDate", 1);
+  p({ reflect: !0, type: Date })
+], c.prototype, "fieldDate", 1);
 h([
   l()
-], d.prototype, "_currentDate", 2);
+], c.prototype, "_currentDate", 2);
 h([
-  u({ reflect: !0, type: Date })
-], d.prototype, "currentDate", 1);
+  p({ reflect: !0, type: Date })
+], c.prototype, "currentDate", 1);
 h([
   l()
-], d.prototype, "locale", 2);
+], c.prototype, "locale", 2);
 h([
   l()
-], d.prototype, "weekDays", 2);
+], c.prototype, "weekDays", 2);
 h([
   l()
-], d.prototype, "dateConfig", 2);
+], c.prototype, "dateConfig", 2);
 h([
   l()
-], d.prototype, "dateFormatOptions", 2);
-let z = d;
-customElements.get("cre8-calendar") === void 0 && customElements.define("cre8-calendar", z);
-var K = Object.defineProperty, $ = (c, t, e, r) => {
-  for (var a = void 0, n = c.length - 1, i; n >= 0; n--)
-    (i = c[n]) && (a = i(t, e, a) || a);
-  return a && K(t, e, a), a;
+], c.prototype, "dateFormatOptions", 2);
+let B = c;
+customElements.get("cre8-calendar") === void 0 && customElements.define("cre8-calendar", B);
+var U = Object.defineProperty, k = (d, e, t, a) => {
+  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
+    (n = d[i]) && (r = n(e, t, r) || r);
+  return r && U(e, t, r), r;
 };
-const C = class C extends N {
+const M = class M extends R {
   constructor() {
     super(...arguments), this.type = "date", this.showCalendar = !1;
   }
@@ -973,46 +736,46 @@ const C = class C extends N {
    * 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(t) {
-    this.value = t.target.value, this._internals.setFormValue(this.value);
+  handleDateOnInput(e) {
+    this.value = e.target.value, this._internals.setFormValue(this.value);
   }
-  handleCalendarSelect(t) {
-    this.value = t.detail.date, this._internals.setFormValue(this.value), this.showCalendar = !1;
+  handleCalendarSelect(e) {
+    this.value = e.detail.date, this._internals.setFormValue(this.value), this.showCalendar = !1;
   }
-  handleOutsideClick(t) {
-    const e = this.renderRoot.querySelector(".cre8-c-date-picker");
-    this.showCalendar && !t.detail.composedPath.includes(e) && (this.showCalendar = !1);
+  handleOutsideClick(e) {
+    const t = this.renderRoot.querySelector(".cre8-c-date-picker");
+    this.showCalendar && !e.detail.composedPath.includes(t) && (this.showCalendar = !1);
   }
   toggleCalendar() {
     !this.disabled && !this.readonly && (this.showCalendar = !this.showCalendar);
   }
   render() {
-    const t = this.componentClassNames("cre8-c-date-picker", {
+    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", s`
-      <div class="${t}">
+      <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=${m(this.autocomplete)}
+            autocomplete=${u(this.autocomplete)}
             type="${this.type}"
             id="${this.fieldId}"
-            name="${m(this.name)}"
-            max=${m(this.max)}
-            min=${m(this.min)}
-            value="${m(this.value)}"
+            name="${u(this.name)}"
+            max=${u(this.max)}
+            min=${u(this.min)}
+            value="${u(this.value)}"
             ?readonly=${this.readonly}
             ?required=${this.required}
             ?disabled="${this.disabled}"
-            aria-describedby="${m(this.fieldNoteAria())}"
-            placeholder="${m(this.placeholder)}"
+            aria-describedby="${u(this.fieldNoteAria())}"
+            placeholder="${u(this.placeholder)}"
             @input=${this.handleDateOnInput}
             @click=${this.toggleCalendar}
           />
@@ -1028,31 +791,31 @@ const C = class C extends N {
           ></cre8-button>
         </div>
         ${this.showCalendar ? s`<cre8-calendar
-              fieldDate="${m(this.value)}"
+              fieldDate="${u(this.value)}"
               ?hasShortcuts=${this.hasShortcuts}
               @dateSelect="${this.handleCalendarSelect}"
               @outsideClick="${this.handleOutsideClick}"
-            ></cre8-calendar>` : p}
+            ></cre8-calendar>` : y}
         ${this.fieldNote || this.slotNotEmpty("fieldNote") ? s`<cre8-field-note
               id=${this.ariaDescribedBy}
               class="cre8-c-date-picker__field-note"
               ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >` : p}
+            >` : y}
         ${this.renderSuccessErrorFieldNote()}
       </div>
     `;
   }
 };
-C.styles = [F];
-let g = C;
-$([
-  x('input[type="date"]')
+M.styles = [I];
+let g = M;
+k([
+  C('input[type="date"]')
 ], g.prototype, "field");
-$([
+k([
   l()
 ], g.prototype, "showCalendar");
-$([
-  u({ type: Boolean, reflect: !0 })
+k([
+  p({ type: Boolean, reflect: !0 })
 ], g.prototype, "hasShortcuts");
 customElements.get("cre8-date-picker") === void 0 && customElements.define("cre8-date-picker", g);
 export {