@aurodesignsystem/auro-formkit 3.2.3 → 3.2.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Semantic Release Automated Changelog
 
+## [3.2.5](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.2.4...v3.2.5) (2025-05-02)
+
+
+### Bug Fixes
+
+* remove redudant font tokens ([7067083](https://github.com/AlaskaAirlines/auro-formkit/commit/70670834ae4e48f1d191b566f12948d14eafd550))
+
+## [3.2.4](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.2.3...v3.2.4) (2025-05-01)
+
+
+### Bug Fixes
+
+* configure menu correctly when the menu node exists ([065b394](https://github.com/AlaskaAirlines/auro-formkit/commit/065b394ec404256fb94cce59978facc75e647707))
+* not to bubble up keydown event when the input is not in bibtemplate ([60a7ff0](https://github.com/AlaskaAirlines/auro-formkit/commit/60a7ff01f4cf20125af32fe72d806226c69a3290))
+* update selected menuoption correctly upon selecting ([4d7ee93](https://github.com/AlaskaAirlines/auro-formkit/commit/4d7ee9381d4fed035c2ef8ce1d9f3695c75d642a))
+
 ## [3.2.3](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.2.2...v3.2.3) (2025-05-01)
 
 

package/components/checkbox/README.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/demo/readme.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/demo/api.min.js

@@ -4925,7 +4925,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = i$5`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 
@@ -13110,7 +13110,9 @@ class AuroCombobox extends i$2 {
 
     // this.dropdown.addEventListener('auroDropdown-show', () => {
     this.menuWrapper = this.dropdown.querySelector('.menuWrapper');
-    this.menuWrapper.append(this.menu);
+    if (this.menu) {
+      this.menuWrapper.append(this.menu);
+    }
 
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
@@ -13146,7 +13148,6 @@ class AuroCombobox extends i$2 {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -13157,6 +13158,7 @@ class AuroCombobox extends i$2 {
       return;
     }
 
+    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
     this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
 
     if (this.checkmark) {
@@ -13227,10 +13229,11 @@ class AuroCombobox extends i$2 {
    * @param {KeyboardEvent} event - The keyboard event.
    */
   bubbleUpInputKeyEvent(event) {
-    if (event.currentTarget.parentNode === this.dropdown) {
+    if (event.currentTarget.parentNode !== this.dropdown) {
       if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault();
       }
+
       const ke = new KeyboardEvent(event.type, {
         key: event.key,
         code: event.code,
@@ -13376,7 +13379,7 @@ class AuroCombobox extends i$2 {
       }));
     }
 
-    if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
+    if (this.optionSelected && this.optionSelected[0] && this.input.value !== this.optionSelected[0].textContent) {
       this.optionSelected = undefined;
       hasChange = true;
     }

package/components/combobox/demo/index.min.js

@@ -4783,7 +4783,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = i$5`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 
@@ -12968,7 +12968,9 @@ class AuroCombobox extends i$2 {
 
     // this.dropdown.addEventListener('auroDropdown-show', () => {
     this.menuWrapper = this.dropdown.querySelector('.menuWrapper');
-    this.menuWrapper.append(this.menu);
+    if (this.menu) {
+      this.menuWrapper.append(this.menu);
+    }
 
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
@@ -13004,7 +13006,6 @@ class AuroCombobox extends i$2 {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -13015,6 +13016,7 @@ class AuroCombobox extends i$2 {
       return;
     }
 
+    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
     this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
 
     if (this.checkmark) {
@@ -13085,10 +13087,11 @@ class AuroCombobox extends i$2 {
    * @param {KeyboardEvent} event - The keyboard event.
    */
   bubbleUpInputKeyEvent(event) {
-    if (event.currentTarget.parentNode === this.dropdown) {
+    if (event.currentTarget.parentNode !== this.dropdown) {
       if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault();
       }
+
       const ke = new KeyboardEvent(event.type, {
         key: event.key,
         code: event.code,
@@ -13234,7 +13237,7 @@ class AuroCombobox extends i$2 {
       }));
     }
 
-    if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
+    if (this.optionSelected && this.optionSelected[0] && this.input.value !== this.optionSelected[0].textContent) {
       this.optionSelected = undefined;
       hasChange = true;
     }

package/components/combobox/demo/readme.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/dist/index.js

@@ -4701,7 +4701,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 
@@ -12886,7 +12886,9 @@ class AuroCombobox extends LitElement {
 
     // this.dropdown.addEventListener('auroDropdown-show', () => {
     this.menuWrapper = this.dropdown.querySelector('.menuWrapper');
-    this.menuWrapper.append(this.menu);
+    if (this.menu) {
+      this.menuWrapper.append(this.menu);
+    }
 
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
@@ -12922,7 +12924,6 @@ class AuroCombobox extends LitElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -12933,6 +12934,7 @@ class AuroCombobox extends LitElement {
       return;
     }
 
+    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
     this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
 
     if (this.checkmark) {
@@ -13003,10 +13005,11 @@ class AuroCombobox extends LitElement {
    * @param {KeyboardEvent} event - The keyboard event.
    */
   bubbleUpInputKeyEvent(event) {
-    if (event.currentTarget.parentNode === this.dropdown) {
+    if (event.currentTarget.parentNode !== this.dropdown) {
       if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault();
       }
+
       const ke = new KeyboardEvent(event.type, {
         key: event.key,
         code: event.code,
@@ -13152,7 +13155,7 @@ class AuroCombobox extends LitElement {
       }));
     }
 
-    if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
+    if (this.optionSelected && this.optionSelected[0] && this.input.value !== this.optionSelected[0].textContent) {
       this.optionSelected = undefined;
       hasChange = true;
     }

package/components/combobox/dist/registered.js

@@ -4701,7 +4701,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 
@@ -12886,7 +12886,9 @@ class AuroCombobox extends LitElement {
 
     // this.dropdown.addEventListener('auroDropdown-show', () => {
     this.menuWrapper = this.dropdown.querySelector('.menuWrapper');
-    this.menuWrapper.append(this.menu);
+    if (this.menu) {
+      this.menuWrapper.append(this.menu);
+    }
 
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
@@ -12922,7 +12924,6 @@ class AuroCombobox extends LitElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -12933,6 +12934,7 @@ class AuroCombobox extends LitElement {
       return;
     }
 
+    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
     this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
 
     if (this.checkmark) {
@@ -13003,10 +13005,11 @@ class AuroCombobox extends LitElement {
    * @param {KeyboardEvent} event - The keyboard event.
    */
   bubbleUpInputKeyEvent(event) {
-    if (event.currentTarget.parentNode === this.dropdown) {
+    if (event.currentTarget.parentNode !== this.dropdown) {
       if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault();
       }
+
       const ke = new KeyboardEvent(event.type, {
         key: event.key,
         code: event.code,
@@ -13152,7 +13155,7 @@ class AuroCombobox extends LitElement {
       }));
     }
 
-    if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
+    if (this.optionSelected && this.optionSelected[0] && this.input.value !== this.optionSelected[0].textContent) {
       this.optionSelected = undefined;
       hasChange = true;
     }

package/components/counter/README.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/counter/demo/readme.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/README.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/demo/api.html

@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>

package/components/datepicker/demo/api.min.js

@@ -8046,7 +8046,7 @@ const t$1={ATTRIBUTE:1,CHILD:2},e$1=t=>(...e)=>({_$litDirective$:t,values:e});cl
  * SPDX-License-Identifier: BSD-3-Clause
  */const e=e$1(class extends i{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
 
-var styleCss$a = i$5`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;
+var styleCss$a = i$5`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;
 
 var colorCss$a = i$5`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-status-success, #447a1f)}:host .day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}:host .day.selected{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host .day.selected ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host .day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-selected-hover, #00274a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host .day:hover{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-background-hover, #f2f2f2);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host .day.disabled{--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host .day.inRange:before,:host .day.rangeDepartDate:before,:host .day.rangeReturnDate:before,:host .day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}:host .day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}`;
 
@@ -16395,7 +16395,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = i$5`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 

package/components/datepicker/demo/index.html

@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>

package/components/datepicker/demo/index.min.js

@@ -7787,7 +7787,7 @@ const t$1={ATTRIBUTE:1,CHILD:2},e$1=t=>(...e)=>({_$litDirective$:t,values:e});cl
  * SPDX-License-Identifier: BSD-3-Clause
  */const e=e$1(class extends i{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
 
-var styleCss$a = i$5`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;
+var styleCss$a = i$5`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;
 
 var colorCss$a = i$5`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-status-success, #447a1f)}:host .day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}:host .day.selected{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host .day.selected ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host .day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-selected-hover, #00274a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host .day:hover{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-background-hover, #f2f2f2);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host .day.disabled{--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host .day.inRange:before,:host .day.rangeDepartDate:before,:host .day.rangeReturnDate:before,:host .day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}:host .day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}`;
 
@@ -16136,7 +16136,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = i$5`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 

package/components/datepicker/demo/readme.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/dist/index.js

@@ -7742,7 +7742,7 @@ __decorate([property({ type: Array })], RangeDatepickerCalendar.prototype, "dayN
 __decorate([property({ type: Array })], RangeDatepickerCalendar.prototype, "daysOfMonth", void 0);
 AuroLibraryRuntimeUtils$4.prototype.registerComponent('wc-range-datepicker-calendar', RangeDatepickerCalendar);
 
-var styleCss$a = css`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;
+var styleCss$a = css`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;
 
 var colorCss$a = css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-status-success, #447a1f)}:host .day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}:host .day.selected{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host .day.selected ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host .day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-selected-hover, #00274a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host .day:hover{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-background-hover, #f2f2f2);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host .day.disabled{--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host .day.inRange:before,:host .day.rangeDepartDate:before,:host .day.rangeReturnDate:before,:host .day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}:host .day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}`;
 
@@ -16072,7 +16072,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 

package/components/datepicker/dist/registered.js

@@ -7742,7 +7742,7 @@ __decorate([property({ type: Array })], RangeDatepickerCalendar.prototype, "dayN
 __decorate([property({ type: Array })], RangeDatepickerCalendar.prototype, "daysOfMonth", void 0);
 AuroLibraryRuntimeUtils$4.prototype.registerComponent('wc-range-datepicker-calendar', RangeDatepickerCalendar);
 
-var styleCss$a = css`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;
+var styleCss$a = css`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;
 
 var colorCss$a = css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-status-success, #447a1f)}:host .day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}:host .day.selected{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host .day.selected ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host .day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-selected-hover, #00274a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host .day:hover{--ds-auro-calendar-cell-container-color: var(--ds-advanced-color-state-background-hover, #f2f2f2);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host .day.disabled{--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host .day.inRange:before,:host .day.rangeDepartDate:before,:host .day.rangeReturnDate:before,:host .day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}:host .day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}`;
 
@@ -16072,7 +16072,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 

package/components/dropdown/README.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/demo/readme.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/README.md

@@ -109,7 +109,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/demo/readme.md

@@ -109,7 +109,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/README.md

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/demo/api.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>

package/components/input/demo/api.min.js

@@ -276,7 +276,7 @@ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShad
  * SPDX-License-Identifier: BSD-3-Clause
  */const s=globalThis;class i extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}i._$litElement$=true,i["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i});const o=s.litElementPolyfillSupport;o?.({LitElement:i});(s.litElementVersions??=[]).push("4.2.0");
 
-var styleCss$4 = i$2`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = i$2`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = i$2`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 

package/components/input/demo/index.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>

package/components/input/demo/index.min.js

@@ -201,7 +201,7 @@ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShad
  * SPDX-License-Identifier: BSD-3-Clause
  */const s=globalThis;class i extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}i._$litElement$=true,i["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i});const o=s.litElementPolyfillSupport;o?.({LitElement:i});(s.litElementVersions??=[]).push("4.2.0");
 
-var styleCss$4 = i$2`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = i$2`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = i$2`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 

package/components/input/demo/readme.md

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/dist/index.js

@@ -125,7 +125,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 

package/components/input/dist/registered.js

@@ -125,7 +125,7 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$4 = css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
 

package/components/menu/README.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/menu/demo/readme.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/README.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/demo/readme.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/demo/api.md

@@ -39,11 +39,10 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Methods
 
-| Method                         | Type                                   | Description                                      |
-|--------------------------------|----------------------------------------|--------------------------------------------------|
-| [reset](#reset)                        | `(): void`                             | Resets component to initial state.               |
-| [updateActiveOptionBasedOnKey](#updateActiveOptionBasedOnKey) | `(_key: any): void`                    |                                                  |
-| [validate](#validate)                     | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 

package/components/select/demo/api.min.js

@@ -6009,6 +6009,12 @@ class AuroSelect extends i$2 {
     });
   }
 
+  /**
+   * Updates the active option in the menu based on keyboard input.
+   * @private
+   * @param {string} _key - The key pressed by the user.
+   * @returns {void}
+   */
   updateActiveOptionBasedOnKey(_key) {
 
     // Get a lowercase version of the key pressed

package/components/select/demo/index.min.js

@@ -5917,6 +5917,12 @@ class AuroSelect extends i$2 {
     });
   }
 
+  /**
+   * Updates the active option in the menu based on keyboard input.
+   * @private
+   * @param {string} _key - The key pressed by the user.
+   * @returns {void}
+   */
   updateActiveOptionBasedOnKey(_key) {
 
     // Get a lowercase version of the key pressed

package/components/select/demo/readme.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.2/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/dist/auro-select.d.ts

@@ -254,9 +254,15 @@ export class AuroSelect extends LitElement {
      * @returns {void}
      */
     private configureSelect;
-    updateActiveOptionBasedOnKey(_key: any): void;
+    /**
+     * Updates the active option in the menu based on keyboard input.
+     * @private
+     * @param {string} _key - The key pressed by the user.
+     * @returns {void}
+     */
+    private updateActiveOptionBasedOnKey;
     sameLetterTimes: any;
-    lastLetter: any;
+    lastLetter: string;
     /**
      * Manages the visibility of the dropdown based on loading state changes.
      *

package/components/select/dist/index.js

@@ -5870,6 +5870,12 @@ class AuroSelect extends LitElement {
     });
   }
 
+  /**
+   * Updates the active option in the menu based on keyboard input.
+   * @private
+   * @param {string} _key - The key pressed by the user.
+   * @returns {void}
+   */
   updateActiveOptionBasedOnKey(_key) {
 
     // Get a lowercase version of the key pressed

package/components/select/dist/registered.js

@@ -5870,6 +5870,12 @@ class AuroSelect extends LitElement {
     });
   }
 
+  /**
+   * Updates the active option in the menu based on keyboard input.
+   * @private
+   * @param {string} _key - The key pressed by the user.
+   * @returns {void}
+   */
   updateActiveOptionBasedOnKey(_key) {
 
     // Get a lowercase version of the key pressed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "3.2.3",
+  "version": "3.2.5",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {