@tmorrow/cre8-wc 2.0.5 → 2.0.7

package/dist/assets/{date-picker.stories-_Fdnd7NY.js → date-picker.stories-Cje3qk8D.js}

@@ -1,4 +1,4 @@
-import{i as x,b as s,A as f}from"./iframe-CdWmiVXf.js";import{s as A}from"./spread-BOaHI3Dl.js";import{o as g}from"./if-defined-sxEueMHN.js";import{C as T,n as p}from"./cre8-element-gkCuLp-W.js";import{r as c}from"./state-BQD-SkUn.js";import{e as X}from"./query-BpjciUlk.js";import"./icon-DYiIK7a4.js";import"./button-Bt9tRB7v.js";import{s as P,f as V}from"./cre8-form-element-DsXhvnkn.js";import{C as B}from"./field-Ce_Kp3W1.js";import"./preload-helper-PPVm8Dsz.js";import"./directive-b18f_ppQ.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./unsafe-html-BLUBm7l3.js";import"./Caret_Down-Bmqq8eNW.js";import"./Warning-CawqmTvB.js";import"./loading-spinner-Ced-hKjz.js";import"./index.browser-BY9c7rfI.js";import"./field-note-txmyzeNl.js";import"./Error-X6enME_5.js";class F{constructor(t,e,a,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(i,n)=>{this.unsubscribe&&(this.unsubscribe!==n&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=i,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(i,n)),this.unsubscribe=n},this.host=t,e.context!==void 0){const i=e;this.context=i.context,this.callback=i.callback,this.subscribe=i.subscribe??!1}else this.context=e,this.callback=a,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new P(this.context,this.host,this.t,this.subscribe))}}function q({context:d,subscribe:t}){return(e,a)=>{typeof a=="object"?a.addInitializer((function(){new F(this,{context:d,callback:r=>{e.set.call(this,r)},subscribe:t})})):e.constructor.addInitializer((r=>{new F(r,{context:d,callback:i=>{r[a]=i},subscribe:t})}))}}const j=x`*,::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}`,L=x`.cre8-u-content-knockout-brand {
+import{a as x,b as s,A as f}from"./iframe-dHvya7sk.js";import{s as X}from"./spread-BPiNgQQF.js";import{w as E}from"./decorator-iVSD-Llo.js";import{o as u}from"./if-defined-HKKhGupN.js";import{C as I,n as p}from"./cre8-element-DfmMtHJO.js";import{r as c}from"./state-CfuknrX8.js";import{e as A}from"./query-BpjciUlk.js";import"./icon-DeTLDzTS.js";import"./button-CJL8yzAT.js";import{s as B,f as P}from"./cre8-form-element-bQpK8UYN.js";import{C as q}from"./field-DzYRqQb2.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./loading-spinner-g6iJajXH.js";import"./index.browser-BY9c7rfI.js";import"./field-note-DKXZiXLU.js";class S{constructor(e,t,a,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(i,n)=>{this.unsubscribe&&(this.unsubscribe!==n&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=i,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(i,n)),this.unsubscribe=n},this.host=e,t.context!==void 0){const i=t;this.context=i.context,this.callback=i.callback,this.subscribe=i.subscribe??!1}else this.context=t,this.callback=a,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new B(this.context,this.host,this.t,this.subscribe))}}function j({context:d,subscribe:e}){return(t,a)=>{typeof a=="object"?a.addInitializer((function(){new S(this,{context:d,callback:r=>{t.set.call(this,r)},subscribe:e})})):t.constructor.addInitializer((r=>{new S(r,{context:d,callback:i=>{r[a]=i},subscribe:e})}))}}const L=x`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,980 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+: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;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+: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;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+:host {
+  display: block;
+}
+
+/** 
+ * Date Field Label 
+ */
+.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;
+  margin-left: var(--cre8-input-label-margin-left, 0px);
+}
+
+/** 
+ * 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: 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);
+}
+
+/** 
+ * Date Field Input 
+ * 1) The html5 input element
+ */
+.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 transparent;
+  outline-offset: 0.125rem;
+  --size-base-unit: .5rem;
+  -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: var(--cre8-input-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);
+  /**
+   * Hover, focus, active, and focus-visible styles for default input elements
+   */
+}
+.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;
+  /**
+   * Error state
+   */
+}
+.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-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 {
+  /**
+   * Success state
+   */
+}
+.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 styles for default input elements
+   */
+}
+.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;
+  /**
+   * Disabled text colors
+   */
+}
+.cre8-c-date-picker__input:disabled::placeholder {
+  color: var(--cre8-color-content-disabled);
+}
+.cre8-c-date-picker__input {
+  /**
+   * Placeholder styles for default input elements
+   */
+}
+.cre8-c-date-picker__input::placeholder {
+  color: var(--cre8-color-content-subtle);
+}
+.cre8-c-date-picker__input {
+  /**
+   * Error state for default input elements
+   */
+}
+.cre8-is-error .cre8-c-date-picker__input {
+  border-color: var(--cre8-color-border-error);
+}
+.cre8-c-date-picker__input {
+  /**
+   * Success state for default input elements
+   */
+}
+.cre8-is-success .cre8-c-date-picker__input {
+  border-color: var(--cre8-color-border-success);
+}
+.cre8-c-date-picker__input {
+  /**
+   * Readonly input styles
+   */
+}
+.cre8-c-date-picker__input:read-only {
+  background-color: var(--cre8-color-bg-disabled);
+  border-color: var(--cre8-color-border-disabled);
+  cursor: default;
+}`,U=x`.cre8-u-content-knockout-brand {
+  color: var(----cre8-color-content-knockout-brand);
+}
+
+.cre8-u-is-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.cre8-u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media all and (min-width: 23.4375rem) {
+  .cre8-u-hide-sm {
+    display: none !important;
+  }
+}
+@media all and (min-width: 35rem) {
+  .cre8-u-hide-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (min-width: 48rem) {
+  .cre8-u-hide-md {
+    display: none !important;
+  }
+}
+@media all and (min-width: 60rem) {
+  .cre8-u-hide-lg {
+    display: none !important;
+  }
+}
+@media all and (min-width: 75rem) {
+  .cre8-u-hide-xl {
+    display: none !important;
+  }
+}
+@media all and (max-width: 23.4375rem) {
+  .cre8-u-show-sm {
+    display: none !important;
+  }
+}
+@media all and (max-width: 35rem) {
+  .cre8-u-show-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (max-width: 48rem) {
+  .cre8-u-show-md {
+    display: none !important;
+  }
+}
+@media all and (max-width: 60rem) {
+  .cre8-u-show-lg {
+    display: none !important;
+  }
+}
+@media all and (max-width: 75rem) {
+  .cre8-u-show-xl {
+    display: none !important;
+  }
+}
+.cre8-u-margin-none {
+  margin: 0 !important;
+}
+
+.cre8-u-margin-sm {
+  margin: size(1) !important;
+}
+
+.cre8-u-margin-md {
+  margin: size(2) !important;
+}
+
+.cre8-u-margin-lg {
+  margin: size(3) !important;
+}
+
+.cre8-u-margin-xl {
+  margin: size(4) !important;
+}
+
+.cre8-u-margin-xxl {
+  margin: size(8) !important;
+}
+
+.cre8-u-margin-top-none {
+  margin-top: 0 !important;
+}
+
+.cre8-u-margin-top-sm {
+  margin-top: size(1) !important;
+}
+
+.cre8-u-margin-top-md {
+  margin-top: size(2) !important;
+}
+
+.cre8-u-margin-top-lg {
+  margin-top: size(3) !important;
+}
+
+.cre8-u-margin-top-xl {
+  margin-top: size(4) !important;
+}
+
+.cre8-u-margin-top-xxl {
+  margin-top: size(8) !important;
+}
+
+.cre8-u-margin-right-none {
+  margin-right: 0 !important;
+}
+
+.cre8-u-margin-right-sm {
+  margin-right: size(1) !important;
+}
+
+.cre8-u-margin-right-md {
+  margin-right: size(2) !important;
+}
+
+.cre8-u-margin-right-lg {
+  margin-right: size(3) !important;
+}
+
+.cre8-u-margin-right-xl {
+  margin-right: size(4) !important;
+}
+
+.cre8-u-margin-right-xxl {
+  margin-right: size(8) !important;
+}
+
+.cre8-u-margin-bottom-none {
+  margin-bottom: 0 !important;
+}
+
+.cre8-u-margin-bottom-sm {
+  margin-bottom: size(1) !important;
+}
+
+.cre8-u-margin-bottom-md {
+  margin-bottom: size(2) !important;
+}
+
+.cre8-u-margin-bottom-lg {
+  margin-bottom: size(3) !important;
+}
+
+.cre8-u-margin-bottom-xl {
+  margin-bottom: size(4) !important;
+}
+
+.cre8-u-margin-bottom-xxl {
+  margin-bottom: size(8) !important;
+}
+
+.cre8-u-margin-bottom-xl-xxl {
+  margin-bottom: size(4) !important;
+}
+
+@media all and (min-width: 768px) {
+  .cre8-u-margin-bottom-xl-xxl {
+    margin-bottom: size(8) !important;
+  }
+}
+.cre8-u-margin-left-none {
+  margin-left: 0 !important;
+}
+
+.cre8-u-margin-left-sm {
+  margin-left: size(1) !important;
+}
+
+.cre8-u-margin-left-md {
+  margin-left: size(2) !important;
+}
+
+.cre8-u-margin-left-lg {
+  margin-left: size(3) !important;
+}
+
+.cre8-u-margin-left-xl {
+  margin-left: size(4) !important;
+}
+
+.cre8-u-margin-left-xxl {
+  margin-left: size(8) !important;
+}
+
+.cre8-u-padding-none {
+  padding: 0 !important;
+}
+
+.cre8-u-padding-sm {
+  padding: size(1) !important;
+}
+
+.cre8-u-padding-md {
+  padding: size(2) !important;
+}
+
+.cre8-u-padding-lg {
+  padding: size(3) !important;
+}
+
+.cre8-u-padding-xl {
+  padding: size(4) !important;
+}
+
+.cre8-u-padding-xxl {
+  padding: size(8) !important;
+}
+
+.cre8-u-padding-top-none {
+  padding-top: 0 !important;
+}
+
+.cre8-u-padding-top-sm {
+  padding-top: size(1) !important;
+}
+
+.cre8-u-padding-top-md {
+  padding-top: size(2) !important;
+}
+
+.cre8-u-padding-top-lg {
+  padding-top: size(3) !important;
+}
+
+.cre8-u-padding-top-xl {
+  padding-top: size(4) !important;
+}
+
+.cre8-u-padding-top-xxl {
+  padding-top: size(8) !important;
+}
+
+.cre8-u-padding-right-none {
+  padding-right: 0 !important;
+}
+
+.cre8-u-padding-right-sm {
+  padding-right: size(1) !important;
+}
+
+.cre8-u-padding-right-md {
+  padding-right: size(2) !important;
+}
+
+.cre8-u-padding-right-lg {
+  padding-right: size(3) !important;
+}
+
+.cre8-u-padding-right-xl {
+  padding-right: size(4) !important;
+}
+
+.cre8-u-padding-right-xxl {
+  padding-right: size(8) !important;
+}
+
+.cre8-u-padding-bottom-none {
+  padding-bottom: 0 !important;
+}
+
+.cre8-u-padding-bottom-sm {
+  padding-bottom: size(1) !important;
+}
+
+.cre8-u-padding-bottom-md {
+  padding-bottom: size(2) !important;
+}
+
+.cre8-u-padding-bottom-lg {
+  padding-bottom: size(3) !important;
+}
+
+.cre8-u-padding-bottom-xl {
+  padding-bottom: size(4) !important;
+}
+
+.cre8-u-padding-bottom-xxl {
+  padding-bottom: size(8) !important;
+}
+
+.cre8-u-padding-left-none {
+  padding-left: 0 !important;
+}
+
+.cre8-u-padding-left-sm {
+  padding-left: size(1) !important;
+}
+
+.cre8-u-padding-left-md {
+  padding-left: size(2) !important;
+}
+
+.cre8-u-padding-left-lg {
+  padding-left: size(3) !important;
+}
+
+.cre8-u-padding-left-xl {
+  padding-left: size(4) !important;
+}
+
+.cre8-u-padding-left-xxl {
+  padding-left: size(8) !important;
+}
+
+.cre8-u-display-flex {
+  display: flex !important;
+}
+
+.cre8-u-display-block {
+  display: block !important;
+}
+
+body {
+  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);
+  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-transform: var(--cre8-typography-body-default-text-transform);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  color: var(--cre8-color-content-default);
+  background: var(--background-default);
+}
+
+@media all and (min-width: 60rem) {
+  .page-container {
+    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
+  }
+}
+.band__inner {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+@media all and (min-width: 60rem) {
+  .band__inner {
+    margin-right: 0;
+  }
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +1518,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -584,7 +1562,7 @@ span.ripple {
 .cre8-c-calendar {
   min-width: 340px;
   border: var(--cre8-color-border-strong);
-  border-radius: var(--cre8-border-radius-default);
+  border-radius: var(--cre8-border-radius-container);
   border-width: var(--cre8-border-width-default);
   border-style: var(--cre8-border-style-default);
   margin-top: 0.25rem;
@@ -683,7 +1661,7 @@ td {
 }
 .cre8-c-calendar__day-button[data-selected]:hover, .cre8-c-calendar__day-button[data-selected]:focus {
   background: var(--cre8-color-bg-brand-strong-hover);
-}`,U=x`.cre8-u-content-knockout-brand {
+}`,G=x`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -1057,6 +2035,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1229,6 +2211,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1289,14 +2275,14 @@ ol {
 li {
   display: inline-flex;
   justify-content: center;
-}`;var G=Object.defineProperty,Y=(d,t,e,a)=>{for(var r=void 0,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=n(t,e,r)||r);return r&&G(t,e,r),r};const R=class R extends T{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(t){const e=new CustomEvent("changeMonth",{detail:{month:t}});this.dispatchEvent(e)}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>
-        </li>`)}render(){const t=this.componentClassNames("cre8-c-calendar-month-modal",{});return s` <div class="${t}">
+}`;var K=Object.defineProperty,Y=(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&&K(e,t,r),r};const F=class F extends I{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 t=new CustomEvent("changeMonth",{detail:{month:e}});this.dispatchEvent(t)}getMonthListItems(){return this.monthNames.map((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 e=this.componentClassNames("cre8-c-calendar-month-modal",{});return s` <div class="${e}">
       <ol aria-label="choose a month">
         ${this.getMonthListItems()}
       </ol>
-    </div> `}};R.styles=[U];let b=R;Y([c()],b.prototype,"monthNames");Y([p({reflect:!0,type:Number})],b.prototype,"currentMonth");customElements.get("cre8-calendar-month-modal")===void 0&&customElements.define("cre8-calendar-month-modal",b);const K=x`.cre8-u-content-knockout-brand {
+    </div> `}};F.styles=[G];let b=F;Y([c()],b.prototype,"monthNames");Y([p({reflect:!0,type:Number})],b.prototype,"currentMonth");customElements.get("cre8-calendar-month-modal")===void 0&&customElements.define("cre8-calendar-month-modal",b);const W=x`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -1670,6 +2656,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1842,6 +2832,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1909,17 +2903,17 @@ li {
 
 cre8-button {
   height: fit-content;
-}`;var W=Object.defineProperty,J=Object.getOwnPropertyDescriptor,I=(d,t,e,a)=>{for(var r=a>1?void 0:a?J(t,e):t,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=(a?n(t,e,r):n(r))||r);return a&&r&&W(t,e,r),r};const C=class C extends T{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)}constructor(){super(),this.yearNumbers=[]}emitYear(t){const e=new CustomEvent("changeYear",{detail:{year:t}});this.dispatchEvent(e)}createYearArray(t){const e=Array.from(Array(12).keys());this.yearNumbers=e.map(a=>a+(t-7))}getYearListItems(){return this.yearNumbers.map((t=>s` <li
-        ?data-current-year="${t===this.currentYear}"
+}`;var J=Object.defineProperty,H=Object.getOwnPropertyDescriptor,R=(d,e,t,a)=>{for(var r=a>1?void 0:a?H(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&&J(e,t,r),r};const C=class C extends I{get currentYear(){return 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(e){const t=new CustomEvent("changeYear",{detail:{year:e}});this.dispatchEvent(t)}createYearArray(e){const t=Array.from(Array(12).keys());this.yearNumbers=t.map(a=>a+(e-7))}getYearListItems(){return this.yearNumbers.map((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>`))}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 t=this.componentClassNames("cre8-c-calendar-year-modal",{});return s`
-      <div class="${t}">
+      </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 s`
+      <div class="${e}">
         <cre8-button
           class="cre8-c-calendar-year-modal__nav-button"
           @click="${this.previousYearArray}"
@@ -1940,7 +2934,7 @@ cre8-button {
           iconName="keyboard-arrow-right"
         ></cre8-button>
       </div>
-    `}};C.styles=[K];let h=C;I([c()],h.prototype,"yearNumbers",2);I([c()],h.prototype,"_currentYear",2);I([c()],h.prototype,"modalAnchorYear",2);I([p({reflect:!0,type:Number})],h.prototype,"currentYear",1);customElements.get("cre8-calendar-year-modal")===void 0&&customElements.define("cre8-calendar-year-modal",h);const H=x`.cre8-u-content-knockout-brand {
+    `}};C.styles=[W];let g=C;R([c()],g.prototype,"yearNumbers",2);R([c()],g.prototype,"_currentYear",2);R([c()],g.prototype,"modalAnchorYear",2);R([p({reflect:!0,type:Number})],g.prototype,"currentYear",1);customElements.get("cre8-calendar-year-modal")===void 0&&customElements.define("cre8-calendar-year-modal",g);const Q=x`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -2314,6 +3308,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -2486,6 +3484,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -2534,8 +3536,8 @@ span.ripple {
   display: flex;
   min-width: 188px;
   justify-content: space-around;
-}`;var Q=Object.defineProperty,N=(d,t,e,a)=>{for(var r=void 0,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=n(t,e,r)||r);return r&&Q(t,e,r),r};const S=class S extends T{activateModal(t){const e=new CustomEvent("activateModal",{detail:{modal:t}});this.dispatchEvent(e)}changeMonth(t){const e=new CustomEvent("changeMonth",{detail:{addend:t}});this.dispatchEvent(e)}changeYear(t){const e=new CustomEvent("changeYear",{detail:{addend:t}});this.dispatchEvent(e)}render(){const t=this.componentClassNames("cre8-c-calendar-navigation",{});return s`
-      <div class="${t}">
+}`;var Z=Object.defineProperty,N=(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&&Z(e,t,r),r};const M=class M extends I{activateModal(e){const t=new CustomEvent("activateModal",{detail:{modal:e}});this.dispatchEvent(t)}changeMonth(e){const t=new CustomEvent("changeMonth",{detail:{addend:e}});this.dispatchEvent(t)}changeYear(e){const t=new CustomEvent("changeYear",{detail:{addend:e}});this.dispatchEvent(t)}render(){const e=this.componentClassNames("cre8-c-calendar-navigation",{});return s`
+      <div class="${e}">
         <cre8-button
           variant="tertiary"
           text="Previous year"
@@ -2588,33 +3590,33 @@ span.ripple {
           @click="${()=>this.changeYear(1)}"
         ></cre8-button>
       </div>
-    `}};S.styles=[H];let y=S;N([p({type:String,reflect:!0})],y.prototype,"monthName");N([p({type:String,reflect:!0})],y.prototype,"year");customElements.get("cre8-calendar-navigation")===void 0&&customElements.define("cre8-calendar-navigation",y);var Z=Object.defineProperty,tt=Object.getOwnPropertyDescriptor,m=(d,t,e,a)=>{for(var r=a>1?void 0:a?tt(t,e):t,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=(a?n(t,e,r):n(r))||r);return a&&r&&Z(t,e,r),r},o;const l=(o=class extends T{constructor(){super(),this._activeModal="none",this._handleOnClickOutside=this._handleOnClickOutside.bind(this),this.currentDate=(this.fieldDate&&new Date(`${this.fieldDate}T00:00`))??new Date,this.locale=document.documentElement.getAttribute("lang")||"en-US",this.dateConfig={locale:this.locale,today: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(t){this._activeModal=t}get fieldDate(){return this._fieldDate}set fieldDate(t){const e=this._fieldDate;this.requestUpdate("fieldDate",e);const a=!!(t&&new Date(`${t}T00:00`).getTime());this.currentDate=a?new Date(`${t}T00:00`):new Date,this._fieldDate=a?t:""}get currentDate(){return this._currentDate}set currentDate(t){const e=this._currentDate;this._currentDate=t,this.requestUpdate("currentDate",e)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleOnClickOutside,!1)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("click",this._handleOnClickOutside,!1)}_handleOnClickOutside(t){if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");if(!t.composedPath().includes(this.shadowRoot.host)){const a=new CustomEvent("outsideClick",{detail:{composedPath:t.composedPath()}});this.dispatchEvent(a)}}emitSelectedDate(t){const e=new CustomEvent("dateSelect",{detail:{date:t}});this.currentDate=new Date(`${t}T00:00`),this.dispatchEvent(e)}changeYear(t){const e=this.currentDate,a=new Date(e.setFullYear(t));this.currentDate=a,this.activeModal="none"}changeMonth(t){const e=this.currentDate,a=new Date(e.setMonth(t));this.currentDate=a,this.activeModal="none"}activateModal(t){this.activeModal=t}static formatMonthOrDayIndex(t){return(t+1).toString().padStart(2,"0")}static formatDate(t){return t.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(t){return`${t.getFullYear()}-${o.formatMonthOrDayIndex(t.getMonth())}-${o.formatDate(t.getDate())}`}async updateFocusForKeydown(t){this.currentDate=t,await this.updateComplete;const e=this.shadowRoot?.querySelector(`button[datetime="${o.dateToString(t)}"]`);e.setAttribute("tabindex","0"),e.focus()}_handleCalendarKeyDown(t){const e=this.shadowRoot?.querySelector(`button[datetime="${o.dateToString(this.currentDate)}"]`);if(t.key==="ArrowUp"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()-7);this.updateFocusForKeydown(a),e.setAttribute("tabindex","-1")}if(t.key==="ArrowDown"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()+7);this.updateFocusForKeydown(a),e.setAttribute("tabindex","-1")}if(t.key==="ArrowLeft"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()-1);this.updateFocusForKeydown(a),e.setAttribute("tabindex","-1")}if(t.key==="ArrowRight"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()+1);this.updateFocusForKeydown(a),e.setAttribute("tabindex","-1")}if(t.key==="Tab"&&!t.shiftKey){const a=new CustomEvent("outsideClick",{detail:{composedPath:[]}});setTimeout(()=>{this.dispatchEvent(a)},20)}}async changeMonthFromNav(t){this.changeMonth(t),await this.updateComplete;const a=(this.shadowRoot?.querySelector("cre8-calendar-navigation")).shadowRoot?.querySelector(".cre8-c-calendar-navigation__month-modal-button");await this.updateComplete,a.shadowRoot.querySelector("button").focus()}async changeYearFromNav(t){this.changeYear(t),await this.updateComplete;const a=(this.shadowRoot?.querySelector("cre8-calendar-navigation")).shadowRoot?.querySelector(".cre8-c-calendar-navigation__year-modal-button");await this.updateComplete,a.shadowRoot.querySelector("button").focus()}getDaysOfWeekAbbreviations(){return this.weekDays.map(t=>s` <td>
-        <span aria-label="${t}">${t[0]}</span>
-      </td>`)}getPreviousMonthDayButtons(){return[...Array(new Date(this.getYear(),this.getMonth(),1).getDay()).keys()].map(t=>{const e=new Date(this.getYear(),this.getMonth(),1).getDay(),a=new Date(this.getYear(),this.getMonth(),0),r=a.getDate(),i=new Date(a.getFullYear(),a.getMonth(),r-e+(t+1)),n=this.dateConfig.today.getDate()===i.getDate()&&this.dateConfig.today.getMonth()===i.getMonth()&&this.dateConfig.today.getFullYear()===i.getFullYear(),E=new Date(`${this.fieldDate}T00:00`).getTime()===i.getTime();return s` <td>
+    `}};M.styles=[Q];let y=M;N([p({type:String,reflect:!0})],y.prototype,"monthName");N([p({type:String,reflect:!0})],y.prototype,"year");customElements.get("cre8-calendar-navigation")===void 0&&customElements.define("cre8-calendar-navigation",y);var ee=Object.defineProperty,te=Object.getOwnPropertyDescriptor,m=(d,e,t,a)=>{for(var r=a>1?void 0:a?te(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&&ee(e,t,r),r},o;const l=(o=class extends I{constructor(){super(),this._activeModal="none",this._handleOnClickOutside=this._handleOnClickOutside.bind(this),this.currentDate=(this.fieldDate&&new Date(`${this.fieldDate}T00:00`))??new Date,this.locale=document.documentElement.getAttribute("lang")||"en-US",this.dateConfig={locale:this.locale,today: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 t=this._fieldDate;this.requestUpdate("fieldDate",t);const a=!!(e&&new Date(`${e}T00:00`).getTime());this.currentDate=a?new Date(`${e}T00:00`):new Date,this._fieldDate=a?e:""}get currentDate(){return this._currentDate}set currentDate(e){const t=this._currentDate;this._currentDate=e,this.requestUpdate("currentDate",t)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleOnClickOutside,!1)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("click",this._handleOnClickOutside,!1)}_handleOnClickOutside(e){if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");if(!e.composedPath().includes(this.shadowRoot.host)){const a=new CustomEvent("outsideClick",{detail:{composedPath:e.composedPath()}});this.dispatchEvent(a)}}emitSelectedDate(e){const t=new CustomEvent("dateSelect",{detail:{date:e}});this.currentDate=new Date(`${e}T00:00`),this.dispatchEvent(t)}changeYear(e){const t=this.currentDate,a=new Date(t.setFullYear(e));this.currentDate=a,this.activeModal="none"}changeMonth(e){const t=this.currentDate,a=new Date(t.setMonth(e));this.currentDate=a,this.activeModal="none"}activateModal(e){this.activeModal=e}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()}-${o.formatMonthOrDayIndex(e.getMonth())}-${o.formatDate(e.getDate())}`}async updateFocusForKeydown(e){this.currentDate=e,await this.updateComplete;const t=this.shadowRoot?.querySelector(`button[datetime="${o.dateToString(e)}"]`);t.setAttribute("tabindex","0"),t.focus()}_handleCalendarKeyDown(e){const t=this.shadowRoot?.querySelector(`button[datetime="${o.dateToString(this.currentDate)}"]`);if(e.key==="ArrowUp"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()-7);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="ArrowDown"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()+7);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="ArrowLeft"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()-1);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="ArrowRight"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()+1);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="Tab"&&!e.shiftKey){const a=new CustomEvent("outsideClick",{detail:{composedPath:[]}});setTimeout(()=>{this.dispatchEvent(a)},20)}}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,a.shadowRoot.querySelector("button").focus()}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,a.shadowRoot.querySelector("button").focus()}getDaysOfWeekAbbreviations(){return this.weekDays.map(e=>s` <td>
+        <span aria-label="${e}">${e[0]}</span>
+      </td>`)}getPreviousMonthDayButtons(){return[...Array(new Date(this.getYear(),this.getMonth(),1).getDay()).keys()].map(e=>{const t=new Date(this.getYear(),this.getMonth(),1).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(),V=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(i)}"
           ?data-today="${n}"
-          ?data-selected="${E}"
+          ?data-selected="${V}"
           tabindex="-1"
           aria-label="${new Intl.DateTimeFormat(this.locale,{weekday:"long",year:"numeric",month:"long",day:"numeric"}).format(new Date(`${o.dateToString(i)}T00:00`))}"
           @click="${()=>this.emitSelectedDate(o.dateToString(i))}"
         >
           ${new Intl.NumberFormat(this.locale).format(i.getDate())}
         </button>
-      </td>`})}getCurrentMonthDayButtons(){return[...Array(this.numberOfDaysinMonth()).keys()].map(t=>{const e=t+1,a=new Date(this.getYear(),this.getMonth(),e),r=this.dateConfig.today.getDate()===e&&this.dateConfig.today.getMonth()===this.getMonth()&&this.dateConfig.today.getFullYear()===this.getYear(),i=new Date(`${this.fieldDate}T00:00`).getTime()===a.getTime();return s` <td>
+      </td>`})}getCurrentMonthDayButtons(){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=new Date(`${this.fieldDate}T00:00`).getTime()===a.getTime();return s` <td>
         <button
           class="cre8-c-calendar__day-button"
           datetime="${o.dateToString(a)}"
           ?data-today="${r}"
           ?data-selected="${i}"
-          tabindex="${e===this.currentDate.getDate()?"0":"-1"}"
+          tabindex="${t===this.currentDate.getDate()?"0":"-1"}"
           aria-label="${new Intl.DateTimeFormat(this.locale,{weekday:"long",year:"numeric",month:"long",day:"numeric"}).format(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>`})}getNextMonthDayButtons(){return[...Array(6-new Date(this.getYear(),this.getMonth(),this.numberOfDaysinMonth()).getDay()).keys()].map(t=>{const e=new Date(this.getYear(),this.getMonth(),this.numberOfDaysinMonth()),a=new Date(e.setDate(e.getDate()+1)),r=new Date(a.getFullYear(),a.getMonth(),t+1),i=this.dateConfig.today.getDate()===r.getDate()&&this.dateConfig.today.getMonth()===r.getMonth()&&this.dateConfig.today.getFullYear()===r.getFullYear(),n=new Date(`${this.fieldDate}T00:00`).getTime()===r.getTime();return s` <td>
+      </td>`})}getNextMonthDayButtons(){return[...Array(6-new Date(this.getYear(),this.getMonth(),this.numberOfDaysinMonth()).getDay()).keys()].map(e=>{const t=new Date(this.getYear(),this.getMonth(),this.numberOfDaysinMonth()),a=new Date(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=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(r)}"
@@ -2626,14 +3628,14 @@ span.ripple {
         >
           ${new Intl.NumberFormat(this.locale).format(r.getDate())}
         </button>
-      </td>`})}render(){const t=this.componentClassNames("cre8-c-calendar",{});return s` <div class="${t}">
+      </td>`})}render(){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)}"
+            @changeMonth="${t=>this.changeMonthFromNav(t.detail.month)}"
           ></cre8-calendar-month-modal>`:f}
       ${this._activeModal==="year"?s`<cre8-calendar-year-modal
             currentYear="${this.getYear()}"
-            @changeYear="${e=>this.changeYearFromNav(e.detail.year)}"
+            @changeYear="${t=>this.changeYearFromNav(t.detail.year)}"
           ></cre8-calendar-year-modal>`:f}
       ${this._activeModal==="none"?s` ${this.hasShortcuts?s`<div class="cre8-c-calendar__header-shortcuts">
                     <cre8-button
@@ -2658,9 +3660,9 @@ span.ripple {
             <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>
@@ -2677,32 +3679,32 @@ span.ripple {
                 </tr>
               </tbody>
             </table>`:f}
-    </div>`}},o.styles=[L],o);m([X(".cre8-c-calendar__navigation-wrapper")],l.prototype,"_navWrapper",2);m([p({type:Boolean,reflect:!0})],l.prototype,"hasShortcuts",2);m([c()],l.prototype,"_activeModal",2);m([p({reflect:!0,type:String})],l.prototype,"activeModal",1);m([c()],l.prototype,"_fieldDate",2);m([p({reflect:!0,type:Date})],l.prototype,"fieldDate",1);m([c()],l.prototype,"_currentDate",2);m([p({reflect:!0,type:Date})],l.prototype,"currentDate",1);m([c()],l.prototype,"locale",2);m([c()],l.prototype,"weekDays",2);m([c()],l.prototype,"dateConfig",2);m([c()],l.prototype,"dateFormatOptions",2);let et=l;customElements.get("cre8-calendar")===void 0&&customElements.define("cre8-calendar",et);var rt=Object.defineProperty,M=(d,t,e,a)=>{for(var r=void 0,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=n(t,e,r)||r);return r&&rt(t,e,r),r};const O=class O extends B{constructor(){super(...arguments),this.type="date",this.showCalendar=!1}handleDateOnInput(t){this.value=t.target.value,this._internals.setFormValue(this.value)}handleCalendarSelect(t){this.value=t.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)}toggleCalendar(){!this.disabled&&!this._internals.readonly&&(this.showCalendar=!this.showCalendar)}render(){const t=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._internals.readonly});return this.type="date",s`
-      <div class="${t}">
+    </div>`}},o.styles=[U],o);m([A(".cre8-c-calendar__navigation-wrapper")],l.prototype,"_navWrapper",2);m([p({type:Boolean,reflect:!0})],l.prototype,"hasShortcuts",2);m([c()],l.prototype,"_activeModal",2);m([p({reflect:!0,type:String})],l.prototype,"activeModal",1);m([c()],l.prototype,"_fieldDate",2);m([p({reflect:!0,type:Date})],l.prototype,"fieldDate",1);m([c()],l.prototype,"_currentDate",2);m([p({reflect:!0,type:Date})],l.prototype,"currentDate",1);m([c()],l.prototype,"locale",2);m([c()],l.prototype,"weekDays",2);m([c()],l.prototype,"dateConfig",2);m([c()],l.prototype,"dateFormatOptions",2);let re=l;customElements.get("cre8-calendar")===void 0&&customElements.define("cre8-calendar",re);var ae=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&&ae(e,t,r),r};const O=class O extends q{constructor(){super(...arguments),this.type="date",this.showCalendar=!1}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 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 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="${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=${g(this._internals.autocomplete)}
+            autocomplete=${u(this.autocomplete)}
             type="${this.type}"
-            id="${this.id}"
-            name="${g(this.name)}"
-            max=${g(this._internals.max)}
-            min=${g(this._internals.min)}
-            value="${g(this.value)}"
-            ?readonly=${this._internals.readonly}
+            id="${this.fieldId}"
+            name="${u(this.name)}"
+            max=${u(this.max)}
+            min=${u(this.min)}
+            .value="${this.value??""}"
+            ?readonly=${this.readonly}
             ?required=${this.required}
             ?disabled="${this.disabled}"
-            placeholder="${g(this._internals.placeholder)}"
+            placeholder="${u(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"
+            text="Show Calendar"
             ?disabled="${this.disabled||this.readonly}"
             ?hideText=${!0}
             iconName="calendar-datepicker"
@@ -2711,7 +3713,7 @@ span.ripple {
           ></cre8-button>
         </div>
         ${this.showCalendar?s`<cre8-calendar
-              fieldDate="${g(this.value)}"
+              fieldDate="${u(this.value)}"
               ?hasShortcuts=${this.hasShortcuts}
               @dateSelect="${this.handleCalendarSelect}"
               @outsideClick="${this.handleOutsideClick}"
@@ -2723,22 +3725,22 @@ span.ripple {
             >`:f}
         ${this.renderSuccessErrorFieldNote()}
       </div>
-    `}};O.styles=[j];let u=O;M([q({context:V})],u.prototype,"_internals");M([c()],u.prototype,"showCalendar");M([p({type:Boolean,reflect:!0})],u.prototype,"hasShortcuts");M([p()],u.prototype,"label");customElements.get("cre8-date-picker")===void 0&&customElements.define("cre8-date-picker",u);const{withActions:at}=__STORYBOOK_MODULE_PREVIEW_API__,Dt={title:"cre8 Components/Date Picker",component:"cre8-date-picker",render:d=>s`<cre8-date-picker ${A(d)}></cre8-date-picker>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]},docs:{story:{height:"600px"}}},decorators:[at],argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"}}},w={},v={args:{hasShortcuts:"true"}},k={args:{label:"Readonly example",readonly:"true",value:"2024-01-01"}},z={args:{label:"Disabled example",disabled:"true"}},_={args:{label:"Fieldnote example",fieldNote:"This is a field note."}},D={args:{label:"Error Fieldnote example",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},$={args:{label:"Success Fieldnote example",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:"{}",...w.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+    `}};O.styles=[L];let h=O;T([j({context:P})],h.prototype,"_internals");T([c()],h.prototype,"showCalendar");T([p({type:Boolean,reflect:!0})],h.prototype,"hasShortcuts");T([p()],h.prototype,"label");customElements.get("cre8-date-picker")===void 0&&customElements.define("cre8-date-picker",h);const ze={title:"cre8 Components/Date Picker",component:"cre8-date-picker",render:d=>s`<cre8-date-picker ${X(d)}></cre8-date-picker>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]},docs:{story:{height:"600px"}}},decorators:[E],argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"}}},w={},v={args:{hasShortcuts:"true"}},z={args:{label:"Readonly example",readonly:"true",value:"2024-01-01"}},k={args:{label:"Disabled example",disabled:"true"}},_={args:{label:"Fieldnote example",fieldNote:"This is a field note."}},D={args:{label:"Error Fieldnote example",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},$={args:{label:"Success Fieldnote example",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:"{}",...w.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   args: {
     hasShortcuts: "true"
   }
-}`,...v.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+}`,...v.parameters?.docs?.source}}};z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Readonly example',
     readonly: "true",
     value: "2024-01-01"
   }
-}`,...k.parameters?.docs?.source}}};z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
+}`,...z.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Disabled example',
     disabled: 'true'
   }
-}`,...z.parameters?.docs?.source}}};_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+}`,...k.parameters?.docs?.source}}};_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Fieldnote example',
     fieldNote: "This is a field note."
@@ -2757,4 +3759,4 @@ span.ripple {
     fieldNote: "This is a field note.",
     successNote: "Short, clear success message"
   }
-}`,...$.parameters?.docs?.source}}};const $t=["Default","DefaultWithShortcuts","Readonly","Disabled","Fieldnote","Error","Success"];export{w as Default,v as DefaultWithShortcuts,z as Disabled,D as Error,_ as Fieldnote,k as Readonly,$ as Success,$t as __namedExportsOrder,Dt as default};
+}`,...$.parameters?.docs?.source}}};const ke=["Default","DefaultWithShortcuts","Readonly","Disabled","Fieldnote","Error","Success"];export{w as Default,v as DefaultWithShortcuts,k as Disabled,D as Error,_ as Fieldnote,z as Readonly,$ as Success,ke as __namedExportsOrder,ze as default};