@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.6 → 0.0.0-pr624.61

package/components/input/dist/registered.js

@@ -4,25 +4,25 @@ import { repeat } from 'lit/directives/repeat.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;min-height:44px;max-height:44px}`;
+var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
 
-var styleCss$4 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}`;
+var styleCss$4 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{overflow:clip !important;width:100%;padding:0;border:0;background:unset;outline:none;overflow-clip-margin:0 !important;text-overflow:ellipsis}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}`;
 
-var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .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)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .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))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .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}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .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([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):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([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}.layoutDefault label,:host(:not([layout])) 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}.layoutDefault :host(:not([bordered])) label,:host(:not([layout])) :host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}.layoutDefault :host(:not([bordered])) label.withIcon,:host(:not([layout])) :host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([class=layoutDefault][bordered]) label,:host(:not([layout])[bordered]) label{top:50%;transform:translateY(-50%)}:host([class=layoutDefault][bordered]) label.withIcon,:host(:not([layout])[bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([class=layoutDefault][bordered]) label:not(label.withIcon),:host(:not([layout])[bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}.layoutDefault .wrapper:focus-within label,:host(:not([layout])) .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px);transform:unset}.layoutDefault label.withValue,:host(:not([layout])) label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px);transform:unset}:host([class=layoutDefault][activeLabel]) .wrapper label,:host(:not([layout])[activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px);transform:unset}.layoutDefault input,:host(:not([layout])) 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}.layoutDefault input::-ms-reveal,.layoutDefault input::-ms-clear,:host(:not([layout])) input::-ms-reveal,:host(:not([layout])) input::-ms-clear{display:none}.layoutDefault input::-webkit-outer-spin-button,.layoutDefault input::-webkit-inner-spin-button,:host(:not([layout])) input::-webkit-outer-spin-button,:host(:not([layout])) input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.layoutDefault input[type=number],:host(:not([layout])) input[type=number]{-moz-appearance:textfield;appearance:textfield}.layoutDefault input:disabled,:host(:not([layout])) input:disabled{background:none;pointer-events:none}:host([class=layoutDefault][bordered]) input,:host(:not([layout])[bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}: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}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
+var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .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)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .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))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .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}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .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([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):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([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}: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}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
 
-var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{color:var(--ds-auro-input-text-color);caret-color:var(--ds-auro-input-caret-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper .displayValue{background-color:var(--ds-auro-input-background-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
+var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper .displayValue{background-color:var(--ds-auro-input-background-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[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);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
-var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: transparent}`;
+var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
 
-var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;cursor:text}.layout-classic .mainContent label{cursor:text;padding-top:4px;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);padding-bottom:8px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);height:auto}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start;padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;line-height:0;padding-bottom:0}.layout-classic .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-classic .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-classic .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}`;
+var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}.layout-classic .accents.left{padding-right:var(--ds-size-100, 0.5rem)}.layout-classic .accents.right{padding-left:var(--ds-size-100, 0.5rem)}.layout-classic .accents.right .notification{margin-right:var(--ds-size-100, 0.5rem)}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
 
-var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
+var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
 
-var emphasizedStyleCss = css`:host{display:block}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{background:unset;width:100%;padding:0;border:0;outline:none;overflow:hidden;text-overflow:ellipsis}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{text-transform:uppercase;font-size:32px;line-height:38px}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center;font-size:14px;line-height:20px}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized .displayValueWrapper,.layout-emphasized-left .displayValueWrapper,.layout-emphasized-right .displayValueWrapper{transform:translateY(-50%)}.layout-emphasized .accents,.layout-emphasized-left .accents,.layout-emphasized-right .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:24px}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:24px}.layout-emphasized-left .alertNotification{margin-right:8px}.layout-emphasized-left .clear{margin-left:8px}.layout-emphasized-right .alertNotification{margin-left:8px}.layout-emphasized-right .clear{margin-right:8px}`;
+var emphasizedStyleCss = css`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{text-transform:uppercase;font-size:32px;line-height:38px}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center;font-size:14px;line-height:20px}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized .displayValueWrapper,.layout-emphasized-left .displayValueWrapper,.layout-emphasized-right .displayValueWrapper{transform:translateY(-50%)}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:var(--ds-size-300, 1.5rem)}.layout-emphasized-left .alertNotification{margin-right:var(--ds-size-100, 0.5rem)}.layout-emphasized-left .clear{margin-left:var(--ds-size-100, 0.5rem)}.layout-emphasized .alertNotification,.layout-emphasized-right .alertNotification{margin-left:var(--ds-size-100, 0.5rem)}.layout-emphasized .clear,.layout-emphasized-right .clear{margin-right:var(--ds-size-100, 0.5rem)}`;
 
 var emphasizedColorCss = css`.layout-emphasized:focus-within,.layout-emphasized.withValue,.layout-emphasized-left:focus-within,.layout-emphasized-left.withValue,.layout-emphasized-right:focus-within,.layout-emphasized-right.withValue{--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
 
-var snowflakeStyleCss = css`:host([layout*=snowflake]) .leftIndent{margin-left:24px;width:calc(100% - 48px)}:host([layout*=snowflake]) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{font-size:var(--ds-text-body-size-xs);line-height:20px}.layout-snowflake input{text-align:center;font-size:18px;line-height:26px}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-snowflake .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{transform:translateY(-50%)}.layout-snowflake .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:24px}.layout-snowflake .accents.left{padding-left:24px}.layout-snowflake .accents.right{padding-right:24px}.helpTextWrapper{text-align:center}`;
+var snowflakeStyleCss = css`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #7e7e7e;--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ebfafd;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.63;--ds-basic-type-line-height-body2: 1.5;--ds-basic-type-line-height-body3: 1.25;--ds-basic-type-line-height-body4: 1;--ds-basic-type-line-height-body5: 0.88;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{font-size:var(--ds-text-body-size-xs);line-height:20px}.layout-snowflake input{text-align:center;font-size:18px;line-height:26px}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-snowflake .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{transform:translateY(-50%)}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
 
 const watchedItems = new Set();
 
@@ -85,6 +85,8 @@ const stringsES = {
   'dateMM': 'Ingrese una fecha completa en el formato MM',
   'dateDD': 'Ingrese una fecha completa en el formato DD',
   'clearInput': 'Borrar campo de entrada',
+  'showPassword': 'Mostrar contraseña',
+  'hidePassword': 'Ocultar contraseña'
 };
 
 const stringsEN = {
@@ -109,6 +111,8 @@ const stringsEN = {
   'dateMM': 'Please enter a complete date in the format MM',
   'dateDD': 'Please enter a complete date in the format DD',
   'clearInput': 'Clear input field',
+  'showPassword': 'Show password',
+  'hidePassword': 'Hide password'
 };
 
 /**
@@ -4403,7 +4407,7 @@ const {
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -4473,7 +4477,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
 class AuroFormValidation {
 
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
   }
 
   /**
@@ -4533,19 +4537,19 @@ class AuroFormValidation {
           {
             check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
             validity: 'tooShort',
-            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
           },
           {
             check: (e) => e.value?.length > e.maxLength,
             validity: 'tooLong',
-            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
           }
         ],
         pattern: [
           {
             check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
             validity: 'patternMismatch',
-            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
           }
         ]
       },
@@ -4692,13 +4696,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -4740,10 +4755,10 @@ class AuroFormValidation {
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateElementAttributes(elem);
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
       }
     }
@@ -4752,7 +4767,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+      // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
+      // combobox's 2nd input will have noValidate set true.
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -4832,7 +4849,7 @@ class AuroFormValidation {
   }
 }
 
-let AuroElement$1 = class AuroElement extends LitElement {
+let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
     return {
 
@@ -4867,18 +4884,21 @@ let AuroElement$1 = class AuroElement extends LitElement {
   }
 
   resetShapeClasses() {
-    if (this.shape && this.size) {
-      const wrapper = this.shadowRoot.querySelector('.wrapper');
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
 
-      if (wrapper) {
-        wrapper.classList.forEach((className) => {
-          if (className.startsWith('shape-')) {
-            wrapper.classList.remove(className);
-          }
-        });
+    if (wrapper) {
+      wrapper.classList.forEach((className) => {
+        if (className.startsWith('shape-')) {
+          wrapper.classList.remove(className);
+        }
+      });
 
-        wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
-      }
+    }
+
+    if (this.shape && this.size) {
+      wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+    } else {
+      wrapper.classList.add('shape-none');
     }
   }
 
@@ -4934,19 +4954,24 @@ let AuroElement$1 = class AuroElement extends LitElement {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
- * @slot helptext - Sets the help text displayed below the input.
+ * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
+ * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
  * @csspart label - Use for customizing the style of the label element
  * @csspart helpText - Use for customizing the style of the helpText element
+ * @csspart input - Use for customizing the style of the input element
  * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
  * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
+ * @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
+ * @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
  * @event input - Event fires when the value of an `auro-input` has been changed.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
  */
 
-class BaseInput extends AuroElement$1 {
+class BaseInput extends AuroElement$2 {
 
   constructor() {
     super();
@@ -5039,7 +5064,6 @@ class BaseInput extends AuroElement$1 {
        */
       a11yRole: {
         type: String,
-        attribute: true,
         reflect: true
       },
 
@@ -5048,7 +5072,6 @@ class BaseInput extends AuroElement$1 {
        */
       a11yExpanded: {
         type: Boolean,
-        attribute: true,
         reflect: true
       },
 
@@ -5057,7 +5080,6 @@ class BaseInput extends AuroElement$1 {
        */
       a11yControls: {
         type: String,
-        attribute: true,
         reflect: true
       },
 
@@ -5073,7 +5095,8 @@ class BaseInput extends AuroElement$1 {
        * An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters].
        */
       autocapitalize: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -5088,7 +5111,8 @@ class BaseInput extends AuroElement$1 {
        * When set to `off`, stops iOS from auto-correcting words when typed into a text box.
        */
       autocorrect: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -5133,7 +5157,6 @@ class BaseInput extends AuroElement$1 {
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
-        attribute: true,
         reflect: true
       },
 
@@ -5141,7 +5164,8 @@ class BaseInput extends AuroElement$1 {
        * Defines the language of an element.
        */
       lang: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -5155,7 +5179,8 @@ class BaseInput extends AuroElement$1 {
        * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
        */
       maxLength: {
-        type: Number
+        type: Number,
+        reflect: true
       },
 
       /**
@@ -5169,14 +5194,25 @@ class BaseInput extends AuroElement$1 {
        * The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`.
        */
       minLength: {
-        type: Number
+        type: Number,
+        reflect: true
       },
 
       /**
        * Populates the `name` attribute on the input.
        */
       name: {
-        type: String
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Sets styles for nested operation - removes borders, hides help + error text, and
+       * hides accents.
+       */
+      nested: {
+        type: Boolean,
+        reflect: true
       },
 
       /**
@@ -5204,10 +5240,11 @@ class BaseInput extends AuroElement$1 {
       },
 
       /**
-       * Define custom placeholder text, only supported by date input formats.
+       * Define custom placeholder text.
        */
       placeholder: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -5296,6 +5333,14 @@ class BaseInput extends AuroElement$1 {
         type: String
       },
 
+      /**
+       * Simple makes the input render without a border.
+       */
+      simple: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * Custom help text message for email type validity.
        */
@@ -5307,7 +5352,8 @@ class BaseInput extends AuroElement$1 {
        * An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
        */
       spellcheck: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -5322,7 +5368,8 @@ class BaseInput extends AuroElement$1 {
        * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
        */
       value: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -5353,8 +5400,8 @@ class BaseInput extends AuroElement$1 {
       },
 
       /**
+       * The id for input node.
        * @private
-       * id for input node
        */
       inputId: {
         type: String,
@@ -5378,7 +5425,7 @@ class BaseInput extends AuroElement$1 {
   }
 
   firstUpdated() {
-    // clicking anywhere in the main wrapper will focus the input. Clicking the helptext or label will not focus the input.
+    // clicking anywhere in the main wrapper will focus the input. Clicking the helpText or label will not focus the input.
     this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -5490,9 +5537,9 @@ class BaseInput extends AuroElement$1 {
         if (!this.shadowRoot.contains(this.getActiveElement())) {
           this.validation.validate(this);
         }
-
-        this.notifyValueChanged();
       }
+
+      this.notifyValueChanged();
     }
 
     if (changedProperties.has('error')) {
@@ -5602,7 +5649,6 @@ class BaseInput extends AuroElement$1 {
 
   /**
    * Function to set element focus.
-   * @private
    * @return {void}
    */
   focus() {
@@ -5618,9 +5664,9 @@ class BaseInput extends AuroElement$1 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
+    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
-    this.notifyValueChanged();
   }
 
   /**
@@ -5715,13 +5761,20 @@ class BaseInput extends AuroElement$1 {
   }
 
   /**
-   * Resets component to initial state.
+   * Resets component to initial state, including resetting the touched state and validity.
    * @returns {void}
    */
   reset() {
     this.validation.reset(this);
   }
 
+  /**
+   * Clears the input value
+   */
+  clear() {
+    this.value = undefined;
+  }
+
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.
    * @private
@@ -5800,28 +5853,15 @@ class BaseInput extends AuroElement$1 {
    * @returns {void}
    */
   getPlaceholder() {
-    const isFocused = this.inputElement === this.getActiveElement();
-
-    // console.warn('isFocused', isFocused);
-    // console.warn(this.inputElement);
-    // console.warn(this.getActiveElement());
-
-    if (!isFocused) {
-      if (this.placeholder) {
-        this.placeholderStr = this.placeholder;
-        // return this.placeholder;
-      } else if (this.type === 'date') {
-        this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
-        // return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
-      }
-    } else {
-      this.placeholderStr = '';
+    if (this.placeholder) {
+      this.placeholderStr = this.placeholder;
+    } else if (this.type === 'date') {
+      this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
     }
 
     this.requestUpdate();
 
-    // console.warn('this.placeholderStr', this.placeholderStr);
-    // return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
+    return this.placeholderStr;
   }
 
   /**
@@ -6034,7 +6074,7 @@ class AuroDependencyVersioning {
  * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
  */
 
-class AuroElement extends LitElement {
+let AuroElement$1 = class AuroElement extends LitElement {
 
   // function to define props used within the scope of this component
   static get properties() {
@@ -6058,7 +6098,7 @@ class AuroElement extends LitElement {
 
     return 'false'
   }
-}
+};
 
 var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
@@ -6102,7 +6142,7 @@ var styleCss$3 = css`:focus:not(:focus-visible){outline:3px solid transparent}.u
  */
 
 // build the component class
-class BaseIcon extends AuroElement {
+class BaseIcon extends AuroElement$1 {
   constructor() {
     super();
     this.onDark = false;
@@ -6185,7 +6225,7 @@ var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -6267,7 +6307,7 @@ class AuroIcon extends BaseIcon {
    */
   privateDefaults() {
     this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
   }
 
   // function to define props used within the scope of this component
@@ -6349,7 +6389,7 @@ class AuroIcon extends BaseIcon {
    *
    */
   static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
   }
 
   connectedCallback() {
@@ -6370,8 +6410,12 @@ class AuroIcon extends BaseIcon {
   async firstUpdated() {
     await super.firstUpdated();
 
-    // Removes the SVG description for screenreader if ariaHidden is set to true
-    if (!this.hasAttribute('ariaHidden') && this.svg) {
+    /**
+     * icons provide a description for screen readers. Icon only instances Auro-button
+     * depend on this description to provide context for the user using a screen reader.
+     * Removes the SVG description for screen reader if ariaHidden is set to true.
+     */
+    if (this.hasAttribute('ariaHidden') && this.svg) {
       const svgDesc = this.svg.querySelector('desc');
 
       if (svgDesc) {
@@ -6415,13 +6459,550 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '8.0.1';
+var iconVersion = '8.0.4';
+
+/**
+ * Private module-level WeakMap to hold MutationObservers for each host element.
+ */
+const _observers = new WeakMap();
+
+/**
+ * Private module-level WeakMap to hold attribute matchers and targets for each host element.
+ * Structure: { 
+ *   host: { 
+ *     matchers: Set<Function>, 
+ *     targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>> 
+ *   } 
+ * }
+ */
+const _transportConfig = new WeakMap();
+
+/**
+ * Transfers all matching attributes from a host element to a target element and observes for future changes.
+ * 
+ * @param {Object} params - The parameters for the function.
+ * @param {HTMLElement} params.host - The host element from which attributes will be transported.
+ * @param {HTMLElement} params.target - The target element to which attributes will be transported.
+ * @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
+ * @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
+ * @returns {Function} A function to detach the observer when no longer needed.
+ * @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
+ */
+const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
+  // Guard Clause: Ensure host is valid HTMLElement instance
+  if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
+    throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
+  }
+
+  // Guard Clause: Ensure target is valid HTMLElement instance
+  if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
+    throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
+  }
+
+  // Guard Clause: Ensure match is a function
+  if (typeof match !== 'function') {
+    throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
+  }
+
+  // Guard Clause: Ensure removeOriginal is a boolean
+  if (typeof removeOriginal !== 'boolean') {
+    throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
+  }
+  
+  // Register this transport and get cleanup function
+  return _registerTransport({
+    host,
+    target,
+    matcher: match,
+    removeOriginal
+  });
+};
+
+/**
+ * Registers a matcher and target for a host element and attaches an observer if needed.
+ * 
+ * @param {Object} params - The parameters object.
+ * @param {HTMLElement} params.host - The host element to observe.
+ * @param {HTMLElement} params.target - The target element to receive attributes.
+ * @param {Function} params.matcher - Function that determines which attributes to transport.
+ * @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
+ * @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
+ * @returns {Function} Function to detach the specific matcher and target pairing.
+ * @private
+ */
+const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
+  // Initialize config for this host if it doesn't exist
+  if (!_transportConfig.has(host)) {
+    _transportConfig.set(host, {
+      matchers: new Set(),
+      targets: new Map()
+    });
+  }
+
+  const config = _transportConfig.get(host);
+  
+  // Add the matcher to the set of matchers for this host
+  config.matchers.add(matcher);
+  
+  // Initialize target entry if it doesn't exist
+  if (!config.targets.has(target)) {
+    config.targets.set(target, new Map());
+  }
+  
+  // Store the matcher with its removeOriginal setting for this target
+  config.targets.get(target).set(matcher, { 
+    removeOriginal,
+    currentAttributes: new Map()
+  });
+  
+  // Perform initial attribute transport
+  _transportAttributes({ host, target, matcher, removeOriginal });
+  
+  // Attach observer
+  _attachObserver(host);
+  
+  // Return cleanup function and utility functions
+  return {
+    cleanup: () => _cleanupTransport(host, target, matcher),
+    getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
+    getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
+  }
+};
+
+/**
+ * Cleans up resources associated with a specific matcher and target for a host element.
+ * 
+ * @param {HTMLElement} host - The host element
+ * @param {HTMLElement} target - The target element
+ * @param {Function} matcher - The matcher function
+ * @private
+ */
+const _cleanupTransport = (host, target, matcher) => {
+  const config = _transportConfig.get(host);
+  if (!config) return;
+  
+  // Remove this matcher from this target
+  const targetMatchers = config.targets.get(target);
+  if (targetMatchers) {
+    targetMatchers.delete(matcher);
+    
+    // If this target has no more matchers, remove it
+    if (targetMatchers.size === 0) {
+      config.targets.delete(target);
+    }
+  }
+  
+  // Check if this matcher is still used by any target
+  let matcherStillUsed = false;
+  for (const matcherMap of config.targets.values()) {
+    if (matcherMap.has(matcher)) {
+      matcherStillUsed = true;
+      break;
+    }
+  }
+  
+  // If not used anymore, remove from matchers set
+  if (!matcherStillUsed) {
+    config.matchers.delete(matcher);
+  }
+  
+  // If no more targets or matchers, detach observer
+  if (config.targets.size === 0 || config.matchers.size === 0) {
+    _detachObserver(host);
+  }
+};
+
+/**
+ * Generic function to transport attributes from a host element to a target element.
+ * 
+ * @param {Object} params - The parameters object.
+ * @param {HTMLElement} params.host - The host element from which to transport attributes.
+ * @param {HTMLElement} params.target - The target element to which attributes will be transported.
+ * @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
+ * @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
+ * @returns {void}
+ * @private
+ */
+const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
+  // Get a list of all matching attributes on the host element and their values
+  const matchingAttributes = host.getAttributeNames()
+    .filter(attr => matcher(attr))
+    .reduce((acc, attr) => {
+      acc[attr] = host.getAttribute(attr);
+      return acc;
+    }, {});
+
+  // Move matching attributes to the target element, removing them from the host if removeOriginal is true
+  Object.entries(matchingAttributes).forEach(([key, value]) => {
+    _setObservedAttribute(host, target, matcher, key, value);
+    target.setAttribute(key, value);
+    if (removeOriginal) {
+      host.removeAttribute(key);
+    }
+  });
+};
+
+/**
+ * Attaches a MutationObserver to the host element to monitor attribute changes.
+ * 
+ * @param {HTMLElement} host - The element to observe for attribute changes.
+ * @returns {MutationObserver} The observer instance.
+ * @private
+ */
+const _attachObserver = (host) => {
+  // If an observer for this host already exists, return it
+  if (_observers.has(host)) {
+    return _observers.get(host);
+  }
+
+  // Create a new MutationObserver
+  const observer = new MutationObserver((mutations) => {
+    const config = _transportConfig.get(host);
+    if (!config) return;
+    
+    // For each mutation affecting attributes
+    mutations
+      .filter(mutation => mutation.type === 'attributes')
+      .forEach(mutation => {
+        const attributeName = mutation.attributeName;
+        
+        // Find matchers that care about this attribute
+        for (const matcher of config.matchers) {
+          if (matcher(attributeName)) {
+            // For each target that uses this matcher
+            for (const [target, matcherConfigs] of config.targets.entries()) {
+              if (matcherConfigs.has(matcher)) {
+                const { removeOriginal } = matcherConfigs.get(matcher);
+                _transportAttributes({
+                  host,
+                  target,
+                  matcher,
+                  removeOriginal
+                });
+              }
+            }
+          }
+        }
+      });
+  });
+
+  // Start observing attribute changes
+  observer.observe(host, { attributes: true });
+  
+  // Store the observer
+  _observers.set(host, observer);
+  
+  return observer;
+};
+
+/**
+ * Detaches and cleans up the MutationObserver for a given host element.
+ * 
+ * @param {HTMLElement} host - The element whose observer should be detached.
+ * @private
+ */
+const _detachObserver = (host) => {
+  if (_observers.has(host)) {
+    const observer = _observers.get(host);
+    observer.disconnect();
+    _observers.delete(host);
+  }
+  
+  // Clean up the transport config as well
+  if (_transportConfig.has(host)) {
+    _transportConfig.delete(host);
+  }
+};
+
+/**
+ * Gets the matcher configuration for a specific host, target, and matcher
+ * @param {HTMLElement} host - The host element
+ * @param {HTMLElement} target - The target element
+ * @param {Function} matcher - The matcher function
+ * @returns {Object|undefined} The matcher configuration if found
+ * @private
+ */
+const _getMatcherConfig = (host, target, matcher) => {
+  const config = _transportConfig.get(host);
+  if (!config) return undefined;
+  
+  const targetMatchers = config.targets.get(target);
+  if (!targetMatchers) return undefined;
+  
+  return targetMatchers.get(matcher);
+};
+
+/**
+ * Sets an observed attribute value
+ * @param {HTMLElement} host - The host element
+ * @param {HTMLElement} target - The target element
+ * @param {Function} matcher - The matcher function
+ * @param {string} key - The attribute name
+ * @param {string} value - The attribute value
+ * @private
+ */
+const _setObservedAttribute = (host, target, matcher, key, value) => {
+  const matcherConfig = _getMatcherConfig(host, target, matcher);
+  if (matcherConfig) {
+    matcherConfig.currentAttributes.set(key, value);
+  }
+};
+
+const _getObservedAttribute = (host, target, matcher, attr) => {
+  const matcherConfig = _getMatcherConfig(host, target, matcher);
+  if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
+  return undefined;
+};
+
+const _getObservedAttributes = (host, target, matcher) => {
+  const matcherConfig = _getMatcherConfig(host, target, matcher);
+  if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
+  return [];
+};
+
+const _matchers = {
+  'aria-': attr => attr.startsWith('aria-'),
+  'role': attr => attr.match(/^role$/)
+};
+
+const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
+  return transportAttributes({
+    host,
+    target,
+    match: attr => {
+      for (const key in _matchers) {
+        if (_matchers[key](attr)) return true;
+      }
+      return false;
+    },
+    removeOriginal
+  });
+};
+
+class AuroElement extends LitElement {
+
+  /**
+   * @type {Object} return object from transportAttributes via a11yUtilities
+   * @property {Function} cleanup - Function to clean up the attribute watcher.
+   * @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
+   * @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
+   * @private
+   */
+  attributeWatcher;
+
+  static get properties() {
+    return {
+
+      /**
+       * Defines the layout of an element.
+       * @default {'default'}
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+      
+      /**
+       * Defines the shape of an element.
+       * @property {'default', 'rounded', 'pill', 'circle'}
+       * @default {'default'}
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Defines the size of an element.
+       * @property {'xs', 'sm', 'md', 'lg', 'xl'}
+       * @default {'md'}
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      /** 
+       * This Boolean attribute lets you specify that the element should be rendered in dark mode.
+       * @default {false}
+       */
+      onDark: {
+        type: Boolean,
+        attribute: "ondark",
+        reflect: true
+      },
+
+      /**
+       * A reference to the wrapper element in the shadow DOM.
+       * This is used to apply layout and shape classes dynamically.
+       * @type {HTMLElement|null}
+       * @default {null}
+       * @private
+       */
+      wrapper: {
+        attribute: false,
+        reflect: false
+      }
+    };
+  }
+
+  
+
+  resetShapeClasses() {
+    if (this.shape && this.size) {
+
+      if (this.wrapper) {
+        this.wrapper.classList.forEach((className) => {
+          if (className.startsWith('shape-')) {
+            this.wrapper.classList.remove(className);
+          }
+        });
+
+        this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+      }
+    }
+  }
+
+  resetLayoutClasses() {
+    if (this.layout) {
+      if (this.wrapper) {
+        this.wrapper.classList.forEach((className) => {
+          if (className.startsWith('layout-')) {
+            this.wrapper.classList.remove(className);
+          }
+        });
+
+        this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
+      }
+    }
+  }
+
+  updateComponentArchitecture() {
+    this.resetLayoutClasses();
+    this.resetShapeClasses();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
+      this.updateComponentArchitecture();
+    }
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+
+    // Set a reference to the wrapper element in the shadow DOM
+    this.wrapper = this.shadowRoot.querySelector('.wrapper');
+
+    // Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
+    this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // Cleanup the ARIA observer if it exists
+    if (this.attributeWatcher) {
+      this.attributeWatcher.cleanup();
+      this.attributeWatcher = null;
+    }
+  }
+
+  // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
+  // This will catch if an invalid layout value is passed in and render the default layout if so.
+  render() {
+    try {
+      return this.renderLayout();
+    } catch (error) {
+      // failed to get the defined layout
+      console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
+
+      // fallback to the default layout
+      return this.getLayout('default');
+    }
+  }
+}
+
+var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding 300ms ease-out}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible,.auro-button:focus{outline:none;outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]),.auro-button:focus:not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=ghost]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button.icon-only ::slotted(:not(auro-icon):not([auro-icon])){display:none}.auro-button--slim{min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]),.auro-button--iconOnly:not(.auro-button--rounded):focus:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:padding 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--rounded:focus-visible:not([variant=flat]):after,.auro-button--rounded:focus:not([variant=flat]):after{border-radius:100px}:host([size=xs]) .wrapper:focus-visible,:host([size=xs]) .wrapper:focus{outline-width:1px;outline-offset:-2px}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
+
+var colorCss$2 = css`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text, #01426a)}.auro-button:not([ondark])[variant=ghost]:active:not(:disabled),.auro-button:not([ondark])[variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=ghost]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=ghost]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:active:not(:disabled),.auro-button[ondark][variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05))}.auro-button[ondark][variant=ghost]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
+
+var tokensCss$2 = css`:host(:not([onDark])){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color:transparent}:host([onDark]){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-tap-color:transparent}`;
+
+var shapeSize = css`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:6px;overflow:hidden;font-size:18px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:6px;overflow:hidden;font-size:18px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;border-radius:6px;overflow:hidden;font-size:16px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:6px;overflow:hidden;font-size:14px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:4px;overflow:hidden;font-size:12px;outline-offset:-2px;outline-width:1px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:34px;overflow:hidden;font-size:18px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:34px 0 0 34px;overflow:hidden}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:0 34px 34px 0;overflow:hidden}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:26px;overflow:hidden;font-size:18px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:26px 0 0 26px;overflow:hidden}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:0 26px 26px 0;overflow:hidden}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-radius:22px;overflow:hidden}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-radius:22px 0 0 22px;overflow:hidden}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-radius:0 22px 22px 0;overflow:hidden;font-size:16px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:16px;overflow:hidden;font-size:14px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:16px 0 0 16px;overflow:hidden}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:0 16px 16px 0;overflow:hidden}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:10px;overflow:hidden;font-size:12px;outline-offset:-2px;outline-width:1px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:10px 0 0 10px;overflow:hidden;outline-offset:-2px;outline-width:1px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:0 10px 10px 0;overflow:hidden;outline-offset:-2px;outline-width:1px}.shape-circle-xl{min-height:68px;max-height:68px;min-width:68px;max-width:68px;border-style:solid;border-radius:34px;overflow:hidden;padding:0}.shape-circle-lg{min-height:52px;max-height:52px;min-width:52px;max-width:52px;border-style:solid;border-radius:26px;overflow:hidden;padding:0}.shape-circle-md{min-height:44px;max-height:44px;min-width:44px;max-width:44px;border-style:solid;border-radius:22px;overflow:hidden;padding:0}.shape-circle-sm{min-height:32px;max-height:32px;min-width:32px;max-width:32px;border-style:solid;border-radius:16px;overflow:hidden;padding:0}.shape-circle-xs{min-height:20px;max-height:20px;min-width:20px;max-width:20px;border-style:solid;border-radius:10px;overflow:hidden;padding:0;outline-offset:-2px;outline-width:1px}`;
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
 
-var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);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);line-height:var(--ds-basic-text-body-default-line-height, 24px);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible{outline:none}.auro-button:focus-visible:not([variant=flat]){outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=flat]):not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-family:var(--ds-basic-text-body-sm-font-family, "AS Circular");font-size:var(--ds-basic-text-body-sm-font-size, 14px);font-weight:var(--ds-basic-text-body-sm-font-weight, 450);line-height:var(--ds-basic-text-body-sm-line-height, 20px);letter-spacing:var(--ds-basic-text-body-sm-letter-spacing, 0);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--rounded:focus-visible:not([variant=flat]):after{border-radius:100px}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
 
-var colorCss$2 = css`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}`;
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
 
-var tokensCss$2 = css`:host{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color:transparent}`;
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+};
 
 var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
 
@@ -6455,7 +7036,7 @@ class AuroLoader extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
 
     this.orbit = false;
     this.ringworm = false;
@@ -6518,7 +7099,7 @@ class AuroLoader extends LitElement {
    *
    */
   static register(name = "auro-loader") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
   }
 
   firstUpdated() {
@@ -6570,14 +7151,13 @@ class AuroLoader extends LitElement {
 
 var loaderVersion = '5.0.0';
 
-/* eslint-disable max-lines */
+/* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
 /**
  * @slot - Default slot for the text of the button.
- * @slot icon - Slot to provide auro-icon for the button.
  * @csspart button - Apply CSS to HTML5 button.
  * @csspart loader - Apply CSS to auro-loader.
  * @csspart text - Apply CSS to text slot.
@@ -6586,7 +7166,18 @@ var loaderVersion = '5.0.0';
 
 /* eslint-disable lit/no-invalid-html, lit/binding-positions */
 
-class AuroButton extends LitElement {
+const ICON_ONLY_SHAPES = ['circle'];
+
+/**
+ * AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
+ * It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
+ * @property {'default', 'rounded', 'pill', 'circle'} shape - Defines the shape of the button.
+ * @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
+ * @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
+ * @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
+ * @property {boolean} onDark - Indicates if the button is rendered in dark mode.
+ */
+class AuroButton extends AuroElement {
 
   /**
    * Enables form association for this element.
@@ -6601,13 +7192,10 @@ class AuroButton extends LitElement {
     super();
     this.autofocus = false;
     this.disabled = false;
-    this.iconOnly = false;
     this.loading = false;
+    this.size = "md";
+    this.shape = "rounded";
     this.onDark = false;
-    this.secondary = false;
-    this.tertiary = false;
-    this.rounded = false;
-    this.slim = false;
     this.fluid = false;
     this.loadingText = this.loadingText || 'Loading...';
 
@@ -6630,49 +7218,59 @@ class AuroButton extends LitElement {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
     return [
       tokensCss$2,
       styleCss$2,
-      colorCss$2
+      colorCss$2,
+      shapeSize
     ];
   }
 
   static get properties() {
     return {
 
-      /**
-       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
-       */
-      autofocus:        {
-        type: Boolean,
-        reflect: true
-      },
+      ...super.properties,
 
       /**
-       * If set to true, button will become disabled and not allow for interactions.
+       * Override layout since it isn't used in this component.
+       * @private
        */
-      disabled:         {
+      layout: {
         type: Boolean,
-        reflect: true
+        attribute: false,
+        reflect: false
       },
 
       /**
-       * DEPRECATED.
-       * @deprecated
+       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
        */
-      secondary:         {
+      autofocus: {
         type: Boolean,
         reflect: true
       },
 
       /**
-       * DEPRECATED.
-       * @deprecated
+       * If set to true, button will become disabled and not allow for interactions.
        */
-      tertiary:         {
+      disabled: {
         type: Boolean,
         reflect: true
       },
@@ -6680,15 +7278,7 @@ class AuroButton extends LitElement {
       /**
        * Alters the shape of the button to be full width of its parent container.
        */
-      fluid:         {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * If set to true, the button will contain an icon with no additional content.
-       */
-      iconOnly: {
+      fluid: {
         type: Boolean,
         reflect: true
       },
@@ -6696,7 +7286,7 @@ class AuroButton extends LitElement {
       /**
        * If set to true button text will be replaced with `auro-loader` and become disabled.
        */
-      loading:          {
+      loading: {
         type: Boolean,
         reflect: true
       },
@@ -6704,36 +7294,12 @@ class AuroButton extends LitElement {
       /**
        * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
        */
-      loadingText:      {
+      loadingText: {
         type: String
       },
 
       /**
-       * Set value for on-dark version of auro-button.
-       */
-      onDark:           {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * If set to true, the button will have a rounded shape.
-       */
-      rounded: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Set value for slim version of auro-button.
-       */
-      slim: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
        */
       tIndex: {
         type: String,
@@ -6741,75 +7307,68 @@ class AuroButton extends LitElement {
       },
 
       /**
-       * Populates the `aria-hidden` attribute to hide the button from a11y API.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
+       * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
+       * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
        */
-      ariahidden: {
+      tabindex: {
         type: String,
-        reflect: true,
+        reflect: false
       },
 
       /**
-       * Populates the `aria-label` attribute that is used to define a string that labels the current element.
-       * Use it in cases where a text label is not visible on the screen.
-       * If there is visible text labeling the element, use `aria-labelledby` instead.
+       * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
        */
-      arialabel:        {
+      title: {
         type: String,
         reflect: true
       },
 
       /**
-       * Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s),
-       * and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
-       * List multiple element IDs in a space delimited fashion.
+       * The type of the button. Possible values are: `submit`, `reset`, `button`.
        */
-      arialabelledby:   {
+      type: {
         type: String,
         reflect: true
       },
 
       /**
-       * Populates the `aria-expanded` attribute that indicates whether the element,
-       * or another grouping element it controls, is currently expanded or collapsed.
-       * This is an optional attribute for buttons.
+       * Defines the value associated with the button which is submitted with the form data.
        */
-      ariaexpanded: {
-        type: Boolean,
+      value: {
+        type: String,
         reflect: true
       },
 
       /**
-       * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
+       * Sets button variant option.
+       * @default primary
        */
-      title:            {
+      variant: {
         type: String,
         reflect: true
       },
 
       /**
-       * The type of the button. Possible values are: `submit`, `reset`, `button`.
+       * @private
        */
-      type:             {
+      buttonHref: {
         type: String,
-        reflect: true
       },
 
       /**
-       * Defines the value associated with the button which is submitted with the form data.
+       * @private
        */
-      value:            {
+      buttonTarget: {
         type: String,
-        reflect: true
       },
 
       /**
-       * Sets button variant option. Possible values are: `secondary`, `tertiary`.
+       * @private
        */
-      variant:          {
+      buttonRel: {
         type: String,
-        reflect: true
       },
-      ready: { type: Boolean },
     };
   }
 
@@ -6822,7 +7381,7 @@ class AuroButton extends LitElement {
    *
    */
   static register(name = "auro-button") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
   }
 
   /**
@@ -6834,17 +7393,6 @@ class AuroButton extends LitElement {
     this.renderRoot.querySelector('button').focus();
   }
 
-  updated() {
-    // support the old `secondary` and `tertiary` attributes` that are deprecated
-    if (this.secondary) {
-      this.setAttribute('variant', 'secondary');
-    }
-
-    if (this.tertiary) {
-      this.setAttribute('variant', 'tertiary');
-    }
-  }
-
   /**
    * Submits the form that this button is associated with.
    * @private
@@ -6865,28 +7413,63 @@ class AuroButton extends LitElement {
     return this.internals ? this.internals.form : null;
   }
 
-  render() {
+  /**
+   * @private
+   * @returns {Boolean}
+   */
+  get hideText() {
+    return ICON_ONLY_SHAPES.includes(this.shape);
+  }
+
+  /**
+   * Returns the current value of the projected `aria-label` attribute or undefined if not set.
+   * @returns {string | undefined}
+   * @private
+   */
+  get currentAriaLabel() {
+    if (!this.attributeWatcher) return undefined;
+
+    const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
+    return ariaLabel || undefined;
+  }
+
+  /**
+   * Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
+   * @returns {string | undefined}
+   * @private
+   */
+  get currentAriaLabelledBy() {
+    if (!this.attributeWatcher) return undefined;
+
+    const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
+    return ariaLabelledBy || undefined;
+  }
+
+  /**
+   * Renders the default layout for the button.
+   * @returns {TemplateResult}
+   * @private
+   */
+  renderLayoutDefault() {
     const classes = {
-      'util_insetLg--squish': true,
-      'auro-button': true,
-      'auroButton': true,
-      'auro-button--rounded': this.rounded,
-      'auro-button--slim': this.slim,
-      'auro-button--iconOnly': this.iconOnly,
-      'auro-button--iconOnlySlim': this.iconOnly && this.slim,
-      'loading': this.loading
+      "util_insetLg--squish": true,
+      "auro-button": true,
+      "icon-only": this.hideText,
+      wrapper: true,
+      loading: this.loading,
     };
 
+    const tag = this.buttonHref ? literal`a` : literal`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return html$1`
-      <button
-        part="button"
-        aria-hidden="${ifDefined(this.ariahidden || undefined)}"
-        aria-label="${ifDefined(this.loading ? this.loadingText : this.arialabel || undefined)}"
-        aria-labelledby="${ifDefined(this.arialabelledby ? this.arialabelledby : undefined)}"
-        aria-expanded="${ifDefined(this.ariaexpanded)}"
-        tabIndex="${ifDefined(this.tIndex)}"
+      <${tag}
+        part="${part}"
+        aria-label="${ifDefined(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
+        aria-labelledby="${ifDefined(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
+        tabindex="${ifDefined(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${classMap(classes)}"
+        class=${classMap(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${ifDefined(this.title ? this.title : undefined)}"
@@ -6895,28 +7478,36 @@ class AuroButton extends LitElement {
         variant="${ifDefined(this.variant ? this.variant : undefined)}"
         .value="${ifDefined(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${ifDefined(this.buttonHref || undefined)}"
+        target="${ifDefined(this.buttonTarget || undefined)}"
+        rel="${ifDefined(this.buttonRel || undefined)}"
       >
         ${ifDefined(this.loading ? html$1`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
         <span class="contentWrapper">
           <span class="textSlot" part="text">
-            ${this.iconOnly ? undefined : html$1`<slot></slot>`}
-          </span>
-
-          <span part="icon">
-            <slot name="icon"></slot>
+            <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
+
+  /**
+   * Renders the layout of the button.
+   * @returns {TemplateResult}
+   * @private
+   */
+  renderLayout() {
+    return this.renderLayoutDefault();
+  }
 }
 
-var buttonVersion = '9.3.0';
+var buttonVersion = '11.0.0';
 
-var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{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)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -7180,6 +7771,7 @@ class AuroInput extends BaseInput {
    */
   get commonLabelClasses() {
     return {
+      'is-disabled': this.disabled,
       'withValue': this.value && this.value.length > 0,
       'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
     };
@@ -7192,30 +7784,30 @@ class AuroInput extends BaseInput {
    */
   get commonInputClasses() {
     return {
-      'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
+      'util_displayHiddenVisually': (this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === '')),
     };
   }
 
   /**
    * Returns classmap configuration for html5 inputs in each layout.
    * @private
-   * @return {object} - Returns classmap.
+   * @returns {object} - Returns classmap.
    */
   get legacyInputClasses() {
     return {
-      ...this.commonInputClasses,
-      'util_displayHiddenVisually': !this.hasFocus && !this.value
+      ...this.commonInputClasses
     };
   }
 
   /**
    * Returns classmap configuration for wrapper elements in each layout.
    * @private
-   * @return {object} - Returns classmap.
+   * @returns {object} - Returns classmap.
    */
   get commonWrapperClasses() {
     return {
       'wrapper': true,
+      'simple': this.simple,
       'withValue': this.value && this.value.length > 0,
       'hasFocus': this.hasFocus
     };
@@ -7224,7 +7816,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for helpText elements in each layout.
    * @private
-   * @return {object} - Returns classmap.
+   * @returns {object} - Returns classmap.
    */
   get helpTextClasses() {
     return {
@@ -7243,7 +7835,7 @@ class AuroInput extends BaseInput {
    *
    */
   static register(name = "auro-input") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroInput);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroInput);
   }
 
   /**
@@ -7265,7 +7857,12 @@ class AuroInput extends BaseInput {
    * @returns {void}
    */
   checkDisplayValueSlotChange() {
-    const nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
+    let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
+
+    // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
+    if (nodes[0].tagName === 'SLOT') {
+      nodes = nodes[0].assignedNodes();
+    }
 
     let hasContent = false;
 
@@ -7316,28 +7913,34 @@ class AuroInput extends BaseInput {
       : this.commonInputClasses;
 
     return html$1`
-      <label for=${this.id} class="${classMap(this.commonLabelClasses)}" part="label">
+      <label for=${this.inputId} class="${classMap(this.commonLabelClasses)}" part="label">
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
+
+      <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
       <input
         @blur="${this.handleBlur}"
         @focusin="${this.handleFocusin}"
         @focusout="${this.handleFocusout}"
         @input="${this.handleInput}"
+        .placeholder=${this.placeholderStr}
+        .role=${this.a11yRole}
         ?activeLabel="${this.activeLabel}"
         ?disabled="${this.disabled}"
         ?required="${this.required}"
-        .placeholder=${this.placeholderStr}
+        aria-controls=${ifDefined(this.a11yControls)}
         aria-describedby="${this.uniqueId}"
+        aria-expanded=${ifDefined(this.a11yExpanded)}
         aria-invalid="${this.validity !== 'valid'}"
-        autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
+        autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
         class="${classMap(inputOverrideClasses)}"
         id="${this.inputId}"
-        inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
+        inputmode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
         lang="${ifDefined(this.lang)}"
         maxlength="${ifDefined(this.maxLength ? this.maxLength : undefined)}"
         minlength="${ifDefined(this.minLength ? this.minLength : undefined)}"
@@ -7345,7 +7948,8 @@ class AuroInput extends BaseInput {
         part="input"
         pattern="${ifDefined(this.definePattern())}"
         spellcheck="${ifDefined(this.spellcheck ? this.spellcheck : undefined)}"
-        type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}" />
+        type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
+      />
       <div class="${classMap(displayValueClasses)}" aria-hidden="true" part="displayValue">
         <div class="displayValueWrapper">
           <slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
@@ -7367,11 +7971,12 @@ class AuroInput extends BaseInput {
           ?onDark="${this.onDark}"
           aria-label="${i18n(this.lang, 'clearInput')}"
           class="notificationBtn clearBtn"
-          tabindex="-1"
-          variant="flat">
+          shape="circle"
+          size="sm"
+          variant="ghost">
           <${this.iconTag}
+            ?customColor="${this.onDark}"
             category="interface"
-            customColor
             name="x-lg"
             >
           </${this.iconTag}>
@@ -7389,22 +7994,23 @@ class AuroInput extends BaseInput {
     return html$1`
       <div class="notification">
         <${this.buttonTag}
-          @click="${this.handleClickShowPassword}
+          @click="${this.handleClickShowPassword}"
           ?onDark="${this.onDark}"
-          aria-hidden="true"
           class="notificationBtn passwordBtn"
-          tabindex="-1"
-          variant="flat">
+          aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
+          shape="circle"
+          size="sm"
+          variant="ghost">
           <${this.iconTag}
+            ?customColor="${this.onDark}"
             ?hidden=${!this.showPassword}
             category="interface"
-            customColor
             name="hide-password-stroke">
           </${this.iconTag}>
           <${this.iconTag}
+            ?customColor="${this.onDark}"
             ?hidden=${this.showPassword}
             category="interface"
-            customColor
             name="view-password-stroke">
           </${this.iconTag}>
         </${this.buttonTag}>
@@ -7463,7 +8069,7 @@ class AuroInput extends BaseInput {
         ? html$1`
           <${this.helpTextTag} ?onDark="${this.onDark}">
             <p id="${this.uniqueId}" part="helpText">
-              <slot name="helptext">${this.getHelpText()}</slot>
+              <slot name="helpText">${this.getHelpText()}</slot>
             </p>
           </${this.helpTextTag}>
         `
@@ -7484,19 +8090,25 @@ class AuroInput extends BaseInput {
    * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
    */
   renderLayoutClassic() {
+    const classicClassMap = {
+      ...this.commonWrapperClasses,
+      'thin': !this.simple
+    };
+
     return html$1`
       <div
         @click="${this.handleClick}"
-        class="${classMap(this.commonWrapperClasses)} thin"
+        class="${classMap(classicClassMap)}"
         part="wrapper">
-        <div class="accents left">
+        <div part="accent-left" class="accents left">
            ${this.renderHtmlTypeIcon()}
         </div>
         <div class="mainContent">
           ${this.renderHtmlInput(true)}
         </div>
-        <div class="accents right">
+        <div part="accent-right" class="accents right">
           ${this.renderValidationErrorIconHtml()}
+          ${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
           ${this.hasValue ? html$1`
             ${!this.disabled && !this.readonly ? html$1`
               ${this.renderHtmlActionClear()}