@aurodesignsystem-dev/auro-formkit 0.0.0-pr622.1 → 0.0.0-pr624.1

package/components/input/dist/index.js

@@ -1,8 +1,28 @@
+import { css, LitElement, html } from 'lit';
 import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { css, LitElement, html } from 'lit';
+
+var shapeSizeCss = css`.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-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-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-pill-xl{min-height:72px;max-height:72px;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-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-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-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-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-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}`;
+
+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 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 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 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)}: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)}`;
+
+var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row}.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{box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color);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 classicColorCss = css`.layout-default label{color:var(--ds-auro-input-label-text-color)}`;
+
+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 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}`;
 
 const watchedItems = new Set();
 
@@ -125,12 +145,6 @@ function stopNotifyingOnLangChange(element) {
   watchedItems.delete(element);
 }
 
-var styleCss$4 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-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 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([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}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
-
-var colorCss$4 = css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
-
-var tokensCss$4 = css`:host{--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--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)}`;
-
 /** Checks if value is string */
 function isString(str) {
   return typeof str === 'string' || str instanceof String;
@@ -4817,6 +4831,98 @@ class AuroFormValidation {
   }
 }
 
+let AuroElement$1 = class AuroElement extends LitElement {
+  static get properties() {
+    return {
+
+      /**
+       * Defines the language of an element.
+       * @default {'default'}
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      onDark: {
+        type: Boolean,
+        attribute: "ondark",
+        reflect: true
+      }
+    };
+  }
+
+  resetShapeClasses() {
+    if (this.shape && this.size) {
+      const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+      if (wrapper) {
+        wrapper.classList.forEach((className) => {
+          if (className.startsWith('shape-')) {
+            wrapper.classList.remove(className);
+          }
+        });
+
+        wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+      }
+    }
+  }
+
+  resetLayoutClasses() {
+    if (this.layout) {
+      const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+      if (wrapper) {
+        wrapper.classList.forEach((className) => {
+          if (className.startsWith('layout-')) {
+            wrapper.classList.remove(className);
+          }
+        });
+
+        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();
+    }
+  }
+
+  // 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');
+    }
+  }
+};
+
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -4824,9 +4930,6 @@ class AuroFormValidation {
 /**
  * Auro-input provides users a way to enter data into a text field.
  *
- * @attr {Boolean} bordered - Applies bordered UI variant.
- * @attr {Boolean} borderless - Applies borderless UI variant.
- *
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
@@ -4842,22 +4945,26 @@ class AuroFormValidation {
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
  */
 
-class BaseInput extends LitElement {
+class BaseInput extends AuroElement$1 {
 
   constructor() {
     super();
 
+    this.activeLabel = false;
     this.icon = false;
     this.disabled = false;
-    this.required = false;
-    this.noValidate = false;
     this.max = undefined;
-    this.min = undefined;
     this.maxLength = undefined;
+    this.min = undefined;
     this.minLength = undefined;
+    this.noValidate = false;
     this.onDark = false;
-    this.activeLabel = false;
+    this.required = false;
     this.setCustomValidityForType = undefined;
+
+    this.layout = 'classic';
+    this.shape = 'rounded';
+    this.size = 'lg';
   }
 
   /**
@@ -4874,6 +4981,7 @@ class BaseInput extends LitElement {
     this.validationCCLength = undefined;
     this.hasValue = false;
     this.label = 'Input label is undefined';
+    this.placeholderStr = '';
 
     this.allowedInputTypes = [
       "text",
@@ -4920,9 +5028,10 @@ class BaseInput extends LitElement {
       .substring(idSubstrStart, idSubstrEnd);
   }
 
-  // function to define props used within the scope of this componentstatic
+  // function to define props used within the scope of this component
   static get properties() {
     return {
+      ...super.properties,
 
       /**
        * The value for the role attribute.
@@ -5254,15 +5363,6 @@ class BaseInput extends LitElement {
     };
   }
 
-
-  static get styles() {
-    return [
-      css`${colorCss$4}`,
-      css`${styleCss$4}`,
-      css`${tokensCss$4}`
-    ];
-  }
-
   connectedCallback() {
     super.connectedCallback();
 
@@ -5277,15 +5377,21 @@ class BaseInput extends LitElement {
   }
 
   firstUpdated() {
+    // 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');
+
+    if (this.wrapperElement) {
+      this.wrapperElement.addEventListener('click', this.handleClick);
+    }
+
     // add attribute for query selectors when auro-input is registered under a custom name
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
-    this.inputElement = this.renderRoot.querySelector('input');
-    this.labelElement = this.shadowRoot.querySelector('label');
-
     if (this.format) {
       this.format = this.format.toLowerCase();
     }
@@ -5295,6 +5401,7 @@ class BaseInput extends LitElement {
       this.ValidityMessageOverride = this.setCustomValidity;
     }
 
+    this.getPlaceholder();
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
   }
@@ -5331,6 +5438,8 @@ class BaseInput extends LitElement {
    * @returns {void}
    */
   updated(changedProperties) {
+    super.updated(changedProperties);
+
     if (changedProperties.has('format')) {
       this.configureAutoFormatting();
     }
@@ -5451,15 +5560,6 @@ class BaseInput extends LitElement {
     return this.pattern;
   }
 
-  /**
-   * Function to set element focus.
-   * @private
-   * @return {void}
-   */
-  focus() {
-    this.inputElement.focus();
-  }
-
   /**
    * Required to convert SVG icons from data to HTML string.
    * @private
@@ -5489,6 +5589,25 @@ class BaseInput extends LitElement {
     this.dispatchEvent(inputEvent);
   }
 
+
+  /**
+   * Handles clicking on the auro-input anywhere outside of the HTML5 input and still moving focus in.
+   * @private
+   * @return {void}
+   */
+  handleClick() {
+    this.focus();
+  }
+
+  /**
+   * Function to set element focus.
+   * @private
+   * @return {void}
+   */
+  focus() {
+    this.inputElement.focus();
+  }
+
   /**
    * Handles event of clearing input content by clicking the X icon.
    * @private
@@ -5536,10 +5655,23 @@ class BaseInput extends LitElement {
    * @return {void}
    */
   handleFocusin() {
+    this.hasFocus = true;
+
+    this.getPlaceholder();
 
     this.touched = true;
   }
 
+  /**
+   * Function to support @focusout event.
+   * @private
+   * @return {void}
+   */
+  handleFocusout() {
+    this.hasFocus = false;
+    this.getPlaceholder();
+  }
+
   /**
    * Function to support @blur event.
    * @private
@@ -5664,16 +5796,31 @@ class BaseInput extends LitElement {
   /**
    * Support placeholder text.
    * @private
-   * @returns {string}
+   * @returns {void}
    */
   getPlaceholder() {
-    if (this.placeholder) {
-      return this.placeholder;
-    } else if (this.type === 'date') {
-      return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
+    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 = '';
     }
 
-    return '';
+    this.requestUpdate();
+
+    // console.warn('this.placeholderStr', this.placeholderStr);
+    // return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
   }
 
   /**
@@ -6028,7 +6175,7 @@ class BaseIcon extends AuroElement {
 
 var tokensCss$3 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
 
-var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
+var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6199,7 +6346,7 @@ class AuroIcon extends BaseIcon {
 
 var iconVersion = '8.0.1';
 
-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, Book);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-size:var(--ds-basic-text-body-sm-font-size, 14px);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}`;
+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}`;
 
 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}`;
 
@@ -6358,27 +6505,6 @@ var loaderVersion = '5.0.0';
 
 
 /**
- * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user
- * @attr {Boolean} disabled - If set to true, button will become disabled and not allow for interactions
- * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
- * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
- * @attr {String} loadingText - 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.
- * @attr {Boolean} onDark - Set value for on-dark version of auro-button
- * @attr {Boolean} rounded - If set to true, the button will have a rounded shape
- * @attr {Boolean} slim - Set value for slim version of auro-button
- * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
- * @attr {String} arialabel - 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.
- * @attr {String} arialabelledby - 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.
- * @attr {Boolean} ariaexpanded - 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.
- * @attr {String} id - Set the unique ID of an element.
- * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
- * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
- * @attr {String} value - Defines the value associated with the button which is submitted with the form data.
- * @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary`
- * @attr {Boolean} secondary - DEPRECATED
- * @attr {Boolean} tertiary - DEPRECATED
- * @prop {Boolean} ready - When false the component API should not be called.
- * @event auroButton-ready - Notifies that the component has finished initializing.
  * @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.
@@ -6402,13 +6528,11 @@ class AuroButton extends LitElement {
 
   constructor() {
     super();
-
     this.autofocus = false;
     this.disabled = false;
     this.iconOnly = false;
     this.loading = false;
     this.onDark = false;
-    this.ready = false;
     this.secondary = false;
     this.tertiary = false;
     this.rounded = false;
@@ -6447,73 +6571,169 @@ class AuroButton extends LitElement {
 
   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
       },
+
+      /**
+       * If set to true, button will become disabled and not allow for interactions.
+       */
       disabled:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       secondary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED.
+       * @deprecated
+       */
       tertiary:         {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * 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: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true button text will be replaced with `auro-loader` and become disabled.
+       */
       loading:          {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * 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:      {
         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.
+       */
+      tIndex: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Populates the `aria-hidden` attribute to hide the button from a11y API.
+       */
+      ariahidden: {
+        type: String,
+        reflect: true,
+      },
+
+      /**
+       * 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.
+       */
       arialabel:        {
         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.
+       */
       arialabelledby:   {
         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.
+       */
       ariaexpanded: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
+       */
       title:            {
         type: String,
         reflect: true
       },
+
+      /**
+       * The type of the button. Possible values are: `submit`, `reset`, `button`.
+       */
       type:             {
         type: String,
         reflect: true
       },
+
+      /**
+       * Defines the value associated with the button which is submitted with the form data.
+       */
       value:            {
         type: String,
         reflect: true
       },
+
+      /**
+       * Sets button variant option. Possible values are: `secondary`, `tertiary`.
+       */
       variant:          {
         type: String,
         reflect: true
@@ -6543,21 +6763,6 @@ class AuroButton extends LitElement {
     this.renderRoot.querySelector('button').focus();
   }
 
-  /**
-   *  Marks the component as ready and sends event.
-   * @private
-   * @returns {void}
-   */
-  notifyReady() {
-    this.ready = true;
-
-    this.dispatchEvent(new CustomEvent('auroButton-ready', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-  }
-
   updated() {
     // support the old `secondary` and `tertiary` attributes` that are deprecated
     if (this.secondary) {
@@ -6569,10 +6774,6 @@ class AuroButton extends LitElement {
     }
   }
 
-  firstUpdated() {
-    this.notifyReady();
-  }
-
   /**
    * Submits the form that this button is associated with.
    * @private
@@ -6587,7 +6788,7 @@ class AuroButton extends LitElement {
   /**
    * Returns the form element that this button is associated with.
    * @private
-   * @returns {HTMLFormElement|null}
+   * @returns {HTMLFormElement | null}
    */
   get form() {
     return this.internals ? this.internals.form : null;
@@ -6608,9 +6809,11 @@ class AuroButton extends LitElement {
     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)}"
         ?autofocus="${this.autofocus}"
         class="${classMap(classes)}"
         ?disabled="${this.disabled || this.loading}"
@@ -6866,19 +7069,78 @@ class AuroInput extends BaseInput {
     /**
      * @private
      */
-    this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
+    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
 
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
+    this.hasDisplayValueContent = false;
 
     /**
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helpTextVersion, AuroHelpText);
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
+  }
+
+  static get styles() {
+    return [
+      css`${shapeSizeCss}`,
+      css`${colorBaseCss}`,
+      css`${styleCss$4}`,
+      css`${styleDefaultCss}`,
+      css`${tokensCss$4}`,
+      css`${classicStyleCss}`,
+      css`${classicColorCss}`,
+      css`${emphasizedStyleCss}`,
+      css`${emphasizedColorCss}`,
+      css`${snowflakeStyleCss}`
+    ];
   }
 
+  /**
+   * Returns classmap configuration for html5 input labels in all layouts.
+   * @private
+   * @returns {void}
+   */
+  get commonLabelClasses() {
+    return {
+      'withValue': this.value && this.value.length > 0,
+      'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
+    };
+  }
+
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @returns {void}
+   */
+  get commonInputClasses() {
+    return {
+      'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
+    };
+  }
+
+  get commonWrapperClasses() {
+    return {
+      'wrapper': true,
+      'withValue': this.value && this.value.length > 0,
+      'hasFocus': this.hasFocus
+    };
+  }
+
+  get helpTextClasses() {
+    return {
+      'helpTextWrapper': true,
+      'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
+      'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
+    };
+  };
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-input"] - The name of element that you want to register to.
@@ -6904,160 +7166,350 @@ class AuroInput extends BaseInput {
     return false;
   }
 
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
-    const labelClasses = {
-      'is-disabled': this.disabled,
-      'withIcon': this.hasTypeIcon(),
-      'withValue': this.value && this.value.length > 0
+  /**
+   * Function to determine if there is any displayValue content to render.
+   * @private
+   * @returns {void}
+   */
+  checkDisplayValueSlotChange() {
+    const nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
+
+    let hasContent = false;
+
+    if (nodes.length > 0) {
+      hasContent = true;
+    }
+
+    this.hasDisplayValueContent = hasContent;
+  }
+
+  /**
+   * Returns HTML for the validation error icon.
+   * @private
+   * @returns {html} - Returns HTML for the validation error icon.
+   */
+  renderValidationErrorIconHtml() {
+    return html$1`
+      ${this.validity && this.validity !== 'valid' ? html$1`
+        <div class="notification alertNotification">
+          <${this.iconTag}
+            category="alert"
+            name="error-stroke"
+            variant="statusError"
+            ?ondark="${this.onDark}">
+          </${this.iconTag}>
+        </div>
+      ` : undefined}
+    `;
+  }
+
+  /**
+   * Returns HTML for the HTML5 input element.
+   * @private
+   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @returns {html} - Returns HTML for the HTML5 input element.
+   */
+  renderHtmlInput(hideInputWhenBlurred = false) {
+    const displayValueClasses = {
+      'displayValue': true,
+      'hasContent': this.hasDisplayValueContent,
+      'hasFocus': this.hasFocus,
+      'withValue': this.value && this.value.length > 0,
+    };
+
+    const inputClasses = {
+      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
     };
 
     return html$1`
-      <div class="wrapper" part="wrapper">
-        <div class="main">
-          <div class="typeIcon">
-            ${this.type === 'credit-card' ? this.processCreditCard() : undefined}
-
-            <!-- The repeat() method is used below in order to force auro-icon to re-render when the name value is updated.
-               This should be cleaned up when auro-icon issue #31 is resolved. -->
-            ${this.inputIconName
-            ? repeat([this.inputIconName], (val) => val, (name) => html$1`
-              <${this.iconTag}
-                class="accentIcon"
-                category="payment"
-                name="${name}"
-                part="accentIcon"
-                ?onDark="${this.onDark}"
-                variant="${this.disabled ? 'disabled' : 'muted'}">
-              </${this.iconTag}>
-            `) : undefined
-            }
+      <label for=${this.id} class="${classMap(this.commonLabelClasses)}" part="label">
+        <slot name="label">
+          ${this.label}
+        </slot>
+      </label>
+      <input
+        @blur="${this.handleBlur}"
+        @focusin="${this.handleFocusin}"
+        @focusout="${this.handleFocusout}"
+        @input="${this.handleInput}"
+        ?activeLabel="${this.activeLabel}"
+        ?disabled="${this.disabled}"
+        ?required="${this.required}"
+        .placeholder=${this.placeholderStr}
+        aria-describedby="${this.uniqueId}"
+        aria-invalid="${this.validity !== 'valid'}"
+        autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
+        autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
+        autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
+        class="${classMap(inputClasses)}"
+        id="${this.inputId}"
+        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)}"
+        name="${ifDefined(this.name)}"
+        part="input"
+        pattern="${ifDefined(this.definePattern())}"
+        spellcheck="${ifDefined(this.spellcheck ? this.spellcheck : undefined)}"
+        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>
+        </div>
+      </div>
+    `;
+  }
 
-            ${this.type === 'date'
-            ? html$1`
-              <${this.iconTag}
-                class="accentIcon"
-                category="interface"
-                name="calendar"
-                part="accentIcon"
-                ?onDark="${this.onDark}"
-                variant="${this.disabled ? 'disabled' : 'muted'}">
-              </${this.iconTag}>`
-            : undefined
-            }
-          </div>
-          <label for=${this.inputId} class="${classMap(labelClasses)}" part="label">
-            <slot name="label">
-              ${this.label}
-            </slot>
-            ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
-          </label>
-          <input
-            @input="${this.handleInput}"
-            @focusin="${this.handleFocusin}"
-            @blur="${this.handleBlur}"
-            id="${this.inputId}"
-            name="${ifDefined(this.name)}"
-            type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
-            pattern="${ifDefined(this.definePattern())}"
-            maxlength="${ifDefined(this.maxLength ? this.maxLength : undefined)}"
-            minlength="${ifDefined(this.minLength ? this.minLength : undefined)}"
-            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
-            ?required="${this.required}"
-            ?disabled="${this.disabled}"
-            aria-describedby="${this.uniqueId}"
-            ?aria-invalid="${this.validity !== 'valid'}"
-            placeholder=${this.getPlaceholder()}
-            lang="${ifDefined(this.lang)}"
-            ?activeLabel="${this.activeLabel}"
-            spellcheck="${ifDefined(this.spellcheck ? this.spellcheck : undefined)}"
-            autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
-            autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
-            autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
-            part="input"
-            role="${ifDefined(this.a11yRole)}"
-            aria-expanded="${ifDefined(this.a11yExpanded)}"
-            aria-controls="${ifDefined(this.a11yControls)}"
-          />
+  /**
+   * Returns HTML for the clear action button.
+   * @private
+   * @returns {html} - Returns HTML for the clear action button.
+   */
+  renderHtmlActionClear() {
+    return html$1`
+      <div class="notification clear">
+        <${this.buttonTag}
+          @click="${this.handleClickClear}"
+          ?onDark="${this.onDark}"
+          aria-label="${i18n(this.lang, 'clearInput')}"
+          class="notificationBtn clearBtn"
+          tabindex="-1"
+          variant="flat">
+          <${this.iconTag}
+            category="interface"
+            customColor
+            name="x-lg"
+            >
+          </${this.iconTag}>
+        </${this.buttonTag}>
+      </div>
+    `;
+  }
+
+  /**
+   * Returns HTML for the show password button.
+   * @private
+   * @returns {html} - Returns HTML for the show password button.
+   */
+  renderHtmlNotificationPassword() {
+    return html$1`
+      <div class="notification">
+        <${this.buttonTag}
+          @click="${this.handleClickShowPassword}
+          ?onDark="${this.onDark}"
+          aria-hidden="true"
+          class="notificationBtn passwordBtn"
+          tabindex="-1"
+          variant="flat">
+          <${this.iconTag}
+            ?hidden=${!this.showPassword}
+            category="interface"
+            customColor
+            name="hide-password-stroke">
+          </${this.iconTag}>
+          <${this.iconTag}
+            ?hidden=${this.showPassword}
+            category="interface"
+            customColor
+            name="view-password-stroke">
+          </${this.iconTag}>
+        </${this.buttonTag}>
+      </div>
+    `;
+  }
+
+  /**
+   * Returns HTML for the input type icon.
+   * @private
+   * @returns {html} - Returns HTML for the input type icon.
+   */
+  renderHtmlTypeIcon() {
+    return html$1`
+      <div class="typeIcon">
+        ${this.type === 'credit-card' ? this.processCreditCard() : undefined}
+
+        <!-- The repeat() method is used below in order to force auro-icon to re-render when the name value is updated.
+          This should be cleaned up when auro-icon issue #31 is resolved. -->
+        ${this.inputIconName
+        ? repeat([this.inputIconName], (val) => val, (name) => html$1`
+          <${this.iconTag}
+            ?onDark="${this.onDark}"
+            category="payment"
+            class="accentIcon"
+            name="${name}"
+            part="accentIcon"
+            variant="${this.disabled ? 'disabled' : 'muted'}">
+          </${this.iconTag}>
+        `) : undefined
+        }
+        ${this.type === 'date'
+        ? html$1`
+          <${this.iconTag}
+            ?onDark="${this.onDark}"
+            category="interface"
+            class="accentIcon"
+            name="calendar"
+            part="accentIcon"
+            variant="${this.disabled ? 'disabled' : 'muted'}">
+          </${this.iconTag}>`
+        : undefined
+        }
+      </div>
+    `;
+  }
+
+  /**
+   * Returns HTML for the help text and error message.
+   * @private
+   * @returns {html} - Returns HTML for the help text and error message.
+   */
+  renderHtmlHelpText() {
+    return html$1`
+      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+        ? html$1`
+          <${this.helpTextTag} ?onDark="${this.onDark}">
+            <p id="${this.uniqueId}" part="helpText">
+              <slot name="helptext">${this.getHelpText()}</slot>
+            </p>
+          </${this.helpTextTag}>
+        `
+        : html$1`
+          <${this.helpTextTag} error ?onDark="${this.onDark}">
+            <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
+              ${this.errorMessage}
+            </p>
+          </${this.helpTextTag}>
+        `
+      }
+    `;
+  }
+
+  /**
+   * Returns HTML for the default layout.
+   * @private
+   * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
+   */
+  renderLayoutClassic() {
+    return html$1`
+      <div
+        @click="${this.handleClick}"
+        class="${classMap(this.commonWrapperClasses)} thin"
+        part="wrapper">
+        <div class="accents left">
+           ${this.renderHtmlTypeIcon()}
         </div>
-        <div
-          class="notificationIcons"
-          part="notificationIcons"
-          ?hasValue="${this.hasValue}">
-          ${this.validity && this.validity !== 'valid' ? html$1`
-            <div class="notification alertNotification">
-              <${this.iconTag}
-                category="alert"
-                name="error-stroke"
-                customColor
-              </${this.iconTag}>
-            </div>
+        <div class="mainContent">
+          ${this.renderHtmlInput(true)}
+        </div>
+        <div class="accents right">
+          ${this.renderValidationErrorIconHtml()}
+          ${this.hasValue ? html$1`
+            ${!this.disabled && !this.readonly ? html$1`
+              ${this.renderHtmlActionClear()}
+            ` : undefined}
+          ` : undefined}
+        </div>
+      </div>
+      <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
+        ${this.renderHtmlHelpText()}
+      </div>
+    `;
+  }
+
+  /**
+   * Returns HTML for the emphasized layout. Does not support type="*".
+   * @private
+   * @returns {html} - Returns HTML for the emphasized layout.
+   */
+  renderLayoutEmphasized() {
+    return html$1`
+      <div
+        @click="${this.handleClick}"
+        class="${classMap(this.commonWrapperClasses)}"
+        part="wrapper">
+        <div class="accents left">
+          ${this.layout.includes('left') ? html$1`
+            ${this.renderValidationErrorIconHtml()}
+          ` : undefined}
+        </div>
+        <div class="mainContent">
+          ${this.renderHtmlInput()}
+        </div>
+        <div class="accents right">
+          ${this.layout.includes('right') || this.layout === "emphasized" ? html$1`
+            ${this.renderValidationErrorIconHtml()}
           ` : undefined}
           ${this.hasValue ? html$1`
-            ${this.type === 'password' ? html$1`
-              <div class="notification">
-                <${this.buttonTag}
-                  variant="flat"
-                  ?onDark="${this.onDark}"
-                  aria-hidden="true"
-                  tabindex="-1"
-                  @click="${this.handleClickShowPassword}"
-                  class="notificationBtn passwordBtn">
-                  <${this.iconTag}
-                    category="interface"
-                    name="hide-password-stroke"
-                    customColor
-                    ?hidden=${!this.showPassword}>
-                  </${this.iconTag}>
-                  <${this.iconTag}
-                    category="interface"
-                    name="view-password-stroke"
-                    customColor
-                    ?hidden=${this.showPassword}>
-                  </${this.iconTag}>
-                </${this.buttonTag}>
-              </div>
+            ${!this.disabled && !this.readonly ? html$1`
+              ${this.renderHtmlActionClear()}
             ` : undefined}
+          ` : undefined}
+        </div>
+      </div>
+      <div class="${classMap(this.helpTextClasses)}" part="inputHelpText">
+        ${this.renderHtmlHelpText()}
+      </div>
+    `;
+  }
+
+  /**
+   * Returns HTML for the emphasized layout. Does not support type="*".
+   * @private
+   * @returns {html} - Returns HTML for the emphasized layout.
+   */
+  renderLayoutSnowflake() {
+    return html$1`
+      <div
+        @click="${this.handleClick}"
+        class="${classMap(this.commonWrapperClasses)}"
+        part="wrapper">
+        <div class="accents left">
+           ${this.renderHtmlTypeIcon()}
+        </div>
+        <div class="mainContent">
+          ${this.renderHtmlInput()}
+        </div>
+        <div class="accents right">
+          ${this.renderValidationErrorIconHtml()}
+          ${this.hasValue ? html$1`
             ${!this.disabled && !this.readonly ? html$1`
-              <div class="notification">
-                <${this.buttonTag}
-                  variant="flat"
-                  ?onDark="${this.onDark}"
-                  class="notificationBtn clearBtn"
-                  arialabel="${i18n(this.lang, 'clearInput')}"
-                  @click="${this.handleClickClear}">
-                  <${this.iconTag}
-                    customColor
-                    category="interface"
-                    name="x-lg"
-                    >
-                  </${this.iconTag}>
-                </${this.buttonTag}>
-              </div>
+              ${this.renderHtmlActionClear()}
             ` : undefined}
           ` : undefined}
         </div>
       </div>
-      <!-- Help text and error message template -->
-        ${!this.validity || this.validity === undefined || this.validity === 'valid'
-        ? html$1`
-        <${this.helpTextTag} ?onDark="${this.onDark}">
-          <p id="${this.uniqueId}" part="helpText">
-            <slot name="helptext">${this.getHelpText()}</slot>
-          </p>
-        </${this.helpTextTag}>
-        `
-        : html$1`
-        <${this.helpTextTag} error ?onDark="${this.onDark}">
-          <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-            ${this.errorMessage}
-          </p>
-        </${this.helpTextTag}>
-        `
-        }
+      <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
+        ${this.renderHtmlHelpText()}
+      </div>
     `;
   }
+
+  /**
+   * Logic to determine the layout of the component.
+   * @private
+   * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
+   * @returns {void}
+   */
+  renderLayout(ForcedLayout) {
+    const layout = ForcedLayout || this.layout;
+
+    switch (layout) {
+      case 'emphasized':
+        return this.renderLayoutEmphasized();
+      case 'emphasized-left':
+        return this.renderLayoutEmphasized();
+      case 'emphasized-right':
+        return this.renderLayoutEmphasized();
+      case 'snowflake':
+        return this.renderLayoutSnowflake();
+      case 'snowflake-left':
+        return this.renderLayoutSnowflake();
+      case 'snowflake-right':
+        return this.renderLayoutSnowflake();
+      default:
+        return this.renderLayoutClassic();
+    }
+  }
 }
 
 export { AuroInput };