@aurodesignsystem-dev/auro-formkit 0.0.0-pr652.0 → 0.0.0-pr652.1

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

@@ -5115,7 +5115,7 @@ var dropdownVersion = '3.0.0';
  */
 const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=e$1(class extends i{constructor(e){if(super(e),e.type!==t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r$1,c]){const d=p(s),{values:p$1,keys:a}=this.dt(t,r$1,c);if(!Array.isArray(d))return this.ut=a,p$1;const h=this.ut??=[],v$1=[];let m$1,y,x=0,j=d.length-1,k=0,w=p$1.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p$1[k]),x++,k++;else if(h[j]===a[w])v$1[w]=v(d[j],p$1[w]),j--,w--;else if(h[x]===a[w])v$1[w]=v(d[x],p$1[w]),r(s,v$1[w+1],d[x]),x++,w--;else if(h[j]===a[k])v$1[k]=v(d[j],p$1[k]),r(s,d[x],d[j]),j--,k++;else if(void 0===m$1&&(m$1=u(a,k,w),y=u(h,x,j)),m$1.has(h[x]))if(m$1.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=r(s,d[x]);v(e,p$1[k]),v$1[k]=e;}else v$1[k]=v(t,p$1[k]),r(s,d[x],t),d[e]=null;k++;}else M(d[j]),j--;else M(d[x]),x++;for(;k<=w;){const e=r(s,v$1[w+1]);v(e,p$1[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&M(e);}return this.ut=a,m(s,v$1),T}});
 
-var shapeSizeCss = i$5`.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:0;min-height:60px;max-height:60px;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:0;min-height:72px;max-height:72px;background-color:unset}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px}.shape-pill-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px 0 0 34px}.shape-pill-left-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 34px 34px 0}.shape-pill-right-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px}.shape-pill-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px 0 0 34px}.shape-pill-left-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 34px 34px 0}.shape-pill-right-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}`;
+var shapeSizeCss = i$5`.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$1 = i$5`.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}`;
 
@@ -5125,6 +5125,10 @@ var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);b
 
 var tokensCss$4 = i$5`: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 = i$5`.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 = i$5`.layout-default label{color:var(--ds-auro-input-label-text-color)}`;
+
 var emphasizedStyleCss$2 = i$5`: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$1 = i$5`.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)}`;
@@ -10069,9 +10073,9 @@ class BaseInput extends AuroElement$1$1 {
     this.required = false;
     this.setCustomValidityForType = undefined;
 
-    this.layout = 'default';
+    this.layout = 'classic';
     this.shape = 'rounded';
-    this.size = 'xl';
+    this.size = 'lg';
   }
 
   /**
@@ -12201,6 +12205,8 @@ class AuroInput extends BaseInput {
       i$5`${styleCss$4$1}`,
       i$5`${styleDefaultCss}`,
       i$5`${tokensCss$4}`,
+      i$5`${classicStyleCss}`,
+      i$5`${classicColorCss}`,
       i$5`${emphasizedStyleCss$2}`,
       i$5`${emphasizedColorCss$1}`,
       i$5`${snowflakeStyleCss}`
@@ -12311,14 +12317,19 @@ class AuroInput extends BaseInput {
   /**
    * 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() {
+  renderHtmlInput(hideInputWhenBlurred = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
       'hasFocus': this.hasFocus,
-      'withValue': this.value && this.value.length > 0
+      'withValue': this.value && this.value.length > 0,
+    };
+
+    const inputClasses = {
+      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
     };
 
     return u$2`
@@ -12341,6 +12352,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
+        class="${e(inputClasses)}"
         id="${this.inputId}"
         inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
         lang="${o(this.lang)}"
@@ -12486,137 +12498,32 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the default layout.
    * @private
-   * @returns {html} - Returns HTML for the default layout.
+   * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
    */
   renderLayoutClassic() {
-    const wrapperClasses = {
-      'layoutDefault': true
-    };
-
-    // 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
-    };
-
     return u$2`
-      <div class="${e(wrapperClasses)}" 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
-            ? c([this.inputIconName], (val) => val, (name) => u$2`
-              <${this.iconTag}
-                class="accentIcon"
-                category="payment"
-                name="${name}"
-                part="accentIcon"
-                ?onDark="${this.onDark}"
-                variant="${this.disabled ? 'disabled' : 'muted'}">
-              </${this.iconTag}>
-            `) : undefined
-            }
-
-            ${this.type === 'date'
-            ? u$2`
-              <${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.id} class="${e(labelClasses)}" part="label">
-            <slot name="label">
-              ${this.label}
-            </slot>
-            ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
-          </label>
-
-          ${this.renderHtmlInput()}
+      <div
+        @click="${this.handleClick}"
+        class="${e(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' ? u$2`
-            <div class="notification alertNotification">
-              <${this.iconTag}
-                category="alert"
-                customColor
-                name="error-stroke"
-              </${this.iconTag}>
-            </div>
-          ` : undefined}
+        <div class="mainContent">
+          ${this.renderHtmlInput(true)}
+        </div>
+        <div class="accents right">
+          ${this.renderValidationErrorIconHtml()}
           ${this.hasValue ? u$2`
-            ${this.type === 'password' ? u$2`
-              <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>
-            ` : undefined}
             ${!this.disabled && !this.readonly ? u$2`
-              <div class="notification">
-                <${this.buttonTag}
-                  @click="${this.handleClickClear}"
-                  ?onDark="${this.onDark}"
-                  arialabel="${i18n(this.lang, 'clearInput')}"
-                  class="notificationBtn clearBtn"
-                  variant="flat">
-                  <${this.iconTag}
-                    category="interface"
-                    customColor
-                    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'
-      ? u$2`
-        <${this.helpTextTag} ?onDark="${this.onDark}">
-          <p id="${this.uniqueId}" part="helpText">
-            <slot name="helptext">${this.getHelpText()}</slot>
-          </p>
-        </${this.helpTextTag}>
-      `
-      : u$2`
-        <${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>
     `;
   }
 

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

@@ -4973,7 +4973,7 @@ var dropdownVersion = '3.0.0';
  */
 const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=e$1(class extends i{constructor(e){if(super(e),e.type!==t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r$1,c]){const d=p(s),{values:p$1,keys:a}=this.dt(t,r$1,c);if(!Array.isArray(d))return this.ut=a,p$1;const h=this.ut??=[],v$1=[];let m$1,y,x=0,j=d.length-1,k=0,w=p$1.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p$1[k]),x++,k++;else if(h[j]===a[w])v$1[w]=v(d[j],p$1[w]),j--,w--;else if(h[x]===a[w])v$1[w]=v(d[x],p$1[w]),r(s,v$1[w+1],d[x]),x++,w--;else if(h[j]===a[k])v$1[k]=v(d[j],p$1[k]),r(s,d[x],d[j]),j--,k++;else if(void 0===m$1&&(m$1=u(a,k,w),y=u(h,x,j)),m$1.has(h[x]))if(m$1.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=r(s,d[x]);v(e,p$1[k]),v$1[k]=e;}else v$1[k]=v(t,p$1[k]),r(s,d[x],t),d[e]=null;k++;}else M(d[j]),j--;else M(d[x]),x++;for(;k<=w;){const e=r(s,v$1[w+1]);v(e,p$1[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&M(e);}return this.ut=a,m(s,v$1),T}});
 
-var shapeSizeCss = i$5`.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:0;min-height:60px;max-height:60px;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:0;min-height:72px;max-height:72px;background-color:unset}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px}.shape-pill-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px 0 0 34px}.shape-pill-left-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 34px 34px 0}.shape-pill-right-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px}.shape-pill-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px 0 0 34px}.shape-pill-left-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 34px 34px 0}.shape-pill-right-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}`;
+var shapeSizeCss = i$5`.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$1 = i$5`.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}`;
 
@@ -4983,6 +4983,10 @@ var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);b
 
 var tokensCss$4 = i$5`: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 = i$5`.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 = i$5`.layout-default label{color:var(--ds-auro-input-label-text-color)}`;
+
 var emphasizedStyleCss$2 = i$5`: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$1 = i$5`.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)}`;
@@ -9927,9 +9931,9 @@ class BaseInput extends AuroElement$1$1 {
     this.required = false;
     this.setCustomValidityForType = undefined;
 
-    this.layout = 'default';
+    this.layout = 'classic';
     this.shape = 'rounded';
-    this.size = 'xl';
+    this.size = 'lg';
   }
 
   /**
@@ -12059,6 +12063,8 @@ class AuroInput extends BaseInput {
       i$5`${styleCss$4$1}`,
       i$5`${styleDefaultCss}`,
       i$5`${tokensCss$4}`,
+      i$5`${classicStyleCss}`,
+      i$5`${classicColorCss}`,
       i$5`${emphasizedStyleCss$2}`,
       i$5`${emphasizedColorCss$1}`,
       i$5`${snowflakeStyleCss}`
@@ -12169,14 +12175,19 @@ class AuroInput extends BaseInput {
   /**
    * 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() {
+  renderHtmlInput(hideInputWhenBlurred = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
       'hasFocus': this.hasFocus,
-      'withValue': this.value && this.value.length > 0
+      'withValue': this.value && this.value.length > 0,
+    };
+
+    const inputClasses = {
+      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
     };
 
     return u$2`
@@ -12199,6 +12210,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
+        class="${e(inputClasses)}"
         id="${this.inputId}"
         inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
         lang="${o(this.lang)}"
@@ -12344,137 +12356,32 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the default layout.
    * @private
-   * @returns {html} - Returns HTML for the default layout.
+   * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
    */
   renderLayoutClassic() {
-    const wrapperClasses = {
-      'layoutDefault': true
-    };
-
-    // 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
-    };
-
     return u$2`
-      <div class="${e(wrapperClasses)}" 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
-            ? c([this.inputIconName], (val) => val, (name) => u$2`
-              <${this.iconTag}
-                class="accentIcon"
-                category="payment"
-                name="${name}"
-                part="accentIcon"
-                ?onDark="${this.onDark}"
-                variant="${this.disabled ? 'disabled' : 'muted'}">
-              </${this.iconTag}>
-            `) : undefined
-            }
-
-            ${this.type === 'date'
-            ? u$2`
-              <${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.id} class="${e(labelClasses)}" part="label">
-            <slot name="label">
-              ${this.label}
-            </slot>
-            ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
-          </label>
-
-          ${this.renderHtmlInput()}
+      <div
+        @click="${this.handleClick}"
+        class="${e(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' ? u$2`
-            <div class="notification alertNotification">
-              <${this.iconTag}
-                category="alert"
-                customColor
-                name="error-stroke"
-              </${this.iconTag}>
-            </div>
-          ` : undefined}
+        <div class="mainContent">
+          ${this.renderHtmlInput(true)}
+        </div>
+        <div class="accents right">
+          ${this.renderValidationErrorIconHtml()}
           ${this.hasValue ? u$2`
-            ${this.type === 'password' ? u$2`
-              <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>
-            ` : undefined}
             ${!this.disabled && !this.readonly ? u$2`
-              <div class="notification">
-                <${this.buttonTag}
-                  @click="${this.handleClickClear}"
-                  ?onDark="${this.onDark}"
-                  arialabel="${i18n(this.lang, 'clearInput')}"
-                  class="notificationBtn clearBtn"
-                  variant="flat">
-                  <${this.iconTag}
-                    category="interface"
-                    customColor
-                    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'
-      ? u$2`
-        <${this.helpTextTag} ?onDark="${this.onDark}">
-          <p id="${this.uniqueId}" part="helpText">
-            <slot name="helptext">${this.getHelpText()}</slot>
-          </p>
-        </${this.helpTextTag}>
-      `
-      : u$2`
-        <${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>
     `;
   }