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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/components/combobox/demo/api.min.js +33 -126
  2. package/components/combobox/demo/index.min.js +33 -126
  3. package/components/combobox/dist/index.js +33 -126
  4. package/components/combobox/dist/registered.js +33 -126
  5. package/components/datepicker/demo/api.min.js +33 -126
  6. package/components/datepicker/demo/index.min.js +33 -126
  7. package/components/datepicker/dist/index.js +33 -126
  8. package/components/datepicker/dist/registered.js +33 -126
  9. package/components/input/README.md +1 -1
  10. package/components/input/demo/api.md +6 -6
  11. package/components/input/demo/api.min.js +33 -126
  12. package/components/input/demo/index.md +4 -4
  13. package/components/input/demo/index.min.js +33 -126
  14. package/components/input/demo/readme.md +1 -1
  15. package/components/input/dist/auro-input.d.ts +2 -1
  16. package/components/input/dist/index.js +33 -126
  17. package/components/input/dist/registered.js +33 -126
  18. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  19. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  20. package/package.json +1 -1
package/components/input/demo/api.min.js CHANGED
@@ -116,7 +116,7 @@ const t$2=globalThis,i$3=t$2.trustedTypes,s$3=i$3?i$3.createPolicy("lit-html",{c
116
116
  * SPDX-License-Identifier: BSD-3-Clause
117
117
  */const s$2=globalThis;let i$2 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$2._$litElement$=true,i$2["finalized"]=true,s$2.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$2.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$2.litElementVersions??=[]).push("4.2.0");
118
118
 
119
- 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}`;
119
+ 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}`;
120
120
 
121
121
  var styleCss$4 = 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}`;
122
122
 
@@ -126,6 +126,10 @@ var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);b
126
126
 
127
127
  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)}`;
128
128
 
129
+ 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}`;
130
+
131
+ var classicColorCss = i$5`.layout-default label{color:var(--ds-auro-input-label-text-color)}`;
132
+
129
133
  var emphasizedStyleCss = 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}`;
130
134
 
131
135
  var emphasizedColorCss = 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)}`;
@@ -5109,9 +5113,9 @@ class BaseInput extends AuroElement$1 {
5109
5113
  this.required = false;
5110
5114
  this.setCustomValidityForType = undefined;
5111
5115
 
5112
- this.layout = 'default';
5116
+ this.layout = 'classic';
5113
5117
  this.shape = 'rounded';
5114
- this.size = 'xl';
5118
+ this.size = 'lg';
5115
5119
  }
5116
5120
 
5117
5121
  /**
@@ -7241,6 +7245,8 @@ class AuroInput extends BaseInput {
7241
7245
  i$5`${styleCss$4}`,
7242
7246
  i$5`${styleDefaultCss}`,
7243
7247
  i$5`${tokensCss$4}`,
7248
+ i$5`${classicStyleCss}`,
7249
+ i$5`${classicColorCss}`,
7244
7250
  i$5`${emphasizedStyleCss}`,
7245
7251
  i$5`${emphasizedColorCss}`,
7246
7252
  i$5`${snowflakeStyleCss}`
@@ -7351,14 +7357,19 @@ class AuroInput extends BaseInput {
7351
7357
  /**
7352
7358
  * Returns HTML for the HTML5 input element.
7353
7359
  * @private
7360
+ * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
7354
7361
  * @returns {html} - Returns HTML for the HTML5 input element.
7355
7362
  */
7356
- renderHtmlInput() {
7363
+ renderHtmlInput(hideInputWhenBlurred = false) {
7357
7364
  const displayValueClasses = {
7358
7365
  'displayValue': true,
7359
7366
  'hasContent': this.hasDisplayValueContent,
7360
7367
  'hasFocus': this.hasFocus,
7361
- 'withValue': this.value && this.value.length > 0
7368
+ 'withValue': this.value && this.value.length > 0,
7369
+ };
7370
+
7371
+ const inputClasses = {
7372
+ 'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
7362
7373
  };
7363
7374
 
7364
7375
  return u$2`
@@ -7381,6 +7392,7 @@ class AuroInput extends BaseInput {
7381
7392
  autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
7382
7393
  autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
7383
7394
  autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
7395
+ class="${e(inputClasses)}"
7384
7396
  id="${this.inputId}"
7385
7397
  inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
7386
7398
  lang="${o(this.lang)}"
@@ -7526,137 +7538,32 @@ class AuroInput extends BaseInput {
7526
7538
  /**
7527
7539
  * Returns HTML for the default layout.
7528
7540
  * @private
7529
- * @returns {html} - Returns HTML for the default layout.
7541
+ * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
7530
7542
  */
7531
7543
  renderLayoutClassic() {
7532
- const wrapperClasses = {
7533
- 'layoutDefault': true
7534
- };
7535
-
7536
- // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
7537
- const labelClasses = {
7538
- 'is-disabled': this.disabled,
7539
- 'withIcon': this.hasTypeIcon(),
7540
- 'withValue': this.value && this.value.length > 0
7541
- };
7542
-
7543
7544
  return u$2`
7544
- <div class="${e(wrapperClasses)}" part="wrapper">
7545
- <div class="main">
7546
- <div class="typeIcon">
7547
- ${this.type === 'credit-card' ? this.processCreditCard() : undefined}
7548
-
7549
- <!-- The repeat() method is used below in order to force auro-icon to re-render when the name value is updated.
7550
- This should be cleaned up when auro-icon issue #31 is resolved. -->
7551
- ${this.inputIconName
7552
- ? c([this.inputIconName], (val) => val, (name) => u$2`
7553
- <${this.iconTag}
7554
- class="accentIcon"
7555
- category="payment"
7556
- name="${name}"
7557
- part="accentIcon"
7558
- ?onDark="${this.onDark}"
7559
- variant="${this.disabled ? 'disabled' : 'muted'}">
7560
- </${this.iconTag}>
7561
- `) : undefined
7562
- }
7563
-
7564
- ${this.type === 'date'
7565
- ? u$2`
7566
- <${this.iconTag}
7567
- class="accentIcon"
7568
- category="interface"
7569
- name="calendar"
7570
- part="accentIcon"
7571
- ?onDark="${this.onDark}"
7572
- variant="${this.disabled ? 'disabled' : 'muted'}">
7573
- </${this.iconTag}>`
7574
- : undefined
7575
- }
7576
- </div>
7577
- <label for=${this.id} class="${e(labelClasses)}" part="label">
7578
- <slot name="label">
7579
- ${this.label}
7580
- </slot>
7581
- ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
7582
- </label>
7583
-
7584
- ${this.renderHtmlInput()}
7545
+ <div
7546
+ @click="${this.handleClick}"
7547
+ class="${e(this.commonWrapperClasses)} thin"
7548
+ part="wrapper">
7549
+ <div class="accents left">
7550
+ ${this.renderHtmlTypeIcon()}
7585
7551
  </div>
7586
- <div
7587
- class="notificationIcons"
7588
- part="notificationIcons"
7589
- ?hasValue="${this.hasValue}">
7590
- ${this.validity && this.validity !== 'valid' ? u$2`
7591
- <div class="notification alertNotification">
7592
- <${this.iconTag}
7593
- category="alert"
7594
- customColor
7595
- name="error-stroke"
7596
- </${this.iconTag}>
7597
- </div>
7598
- ` : undefined}
7552
+ <div class="mainContent">
7553
+ ${this.renderHtmlInput(true)}
7554
+ </div>
7555
+ <div class="accents right">
7556
+ ${this.renderValidationErrorIconHtml()}
7599
7557
  ${this.hasValue ? u$2`
7600
- ${this.type === 'password' ? u$2`
7601
- <div class="notification">
7602
- <${this.buttonTag}
7603
- @click="${this.handleClickShowPassword}"
7604
- ?onDark="${this.onDark}"
7605
- aria-hidden="true"
7606
- class="notificationBtn passwordBtn"
7607
- tabindex="-1"
7608
- variant="flat">
7609
- <${this.iconTag}
7610
- ?hidden=${!this.showPassword}
7611
- category="interface"
7612
- customColor
7613
- name="hide-password-stroke">
7614
- </${this.iconTag}>
7615
- <${this.iconTag}
7616
- ?hidden=${this.showPassword}
7617
- category="interface"
7618
- customColor
7619
- name="view-password-stroke">
7620
- </${this.iconTag}>
7621
- </${this.buttonTag}>
7622
- </div>
7623
- ` : undefined}
7624
7558
  ${!this.disabled && !this.readonly ? u$2`
7625
- <div class="notification">
7626
- <${this.buttonTag}
7627
- @click="${this.handleClickClear}"
7628
- ?onDark="${this.onDark}"
7629
- arialabel="${i18n(this.lang, 'clearInput')}"
7630
- class="notificationBtn clearBtn"
7631
- variant="flat">
7632
- <${this.iconTag}
7633
- category="interface"
7634
- customColor
7635
- name="x-lg">
7636
- </${this.iconTag}>
7637
- </${this.buttonTag}>
7638
- </div>
7559
+ ${this.renderHtmlActionClear()}
7639
7560
  ` : undefined}
7640
7561
  ` : undefined}
7641
7562
  </div>
7642
7563
  </div>
7643
- <!-- Help text and error message template -->
7644
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
7645
- ? u$2`
7646
- <${this.helpTextTag} ?onDark="${this.onDark}">
7647
- <p id="${this.uniqueId}" part="helpText">
7648
- <slot name="helptext">${this.getHelpText()}</slot>
7649
- </p>
7650
- </${this.helpTextTag}>
7651
- `
7652
- : u$2`
7653
- <${this.helpTextTag} error ?onDark="${this.onDark}">
7654
- <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
7655
- ${this.errorMessage}
7656
- </p>
7657
- </${this.helpTextTag}>
7658
- `
7659
- }
7564
+ <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
7565
+ ${this.renderHtmlHelpText()}
7566
+ </div>
7660
7567
  `;
7661
7568
  }
7662
7569
 
package/components/input/demo/index.md CHANGED
@@ -67,13 +67,13 @@ The default component supports the basic input `type="text"` structure. The `(op
67
67
  <div class="exampleWrapper">
68
68
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
69
69
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
70
- <auro-input bordered></auro-input>
70
+ <auro-input bordered shape="rounded" size="lg"></auro-input>
71
71
  <!-- AURO-GENERATED-CONTENT:END -->
72
72
  </div>
73
73
  <div class="exampleWrapper--ondark" aria-hidden>
74
74
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
75
75
  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
76
- <auro-input onDark bordered></auro-input>
76
+ <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
77
77
  <!-- AURO-GENERATED-CONTENT:END -->
78
78
  </div>
79
79
  <auro-accordion alignRight>
@@ -82,14 +82,14 @@ The default component supports the basic input `type="text"` structure. The `(op
82
82
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
83
83
 
84
84
  ```html
85
- <auro-input bordered></auro-input>
85
+ <auro-input bordered shape="rounded" size="lg"></auro-input>
86
86
  ```
87
87
  <!-- AURO-GENERATED-CONTENT:END -->
88
88
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
89
89
  <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
90
90
 
91
91
  ```html
92
- <auro-input onDark bordered></auro-input>
92
+ <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
93
93
  ```
94
94
  <!-- AURO-GENERATED-CONTENT:END -->
95
95
  </auro-accordion>
package/components/input/demo/index.min.js CHANGED
@@ -41,7 +41,7 @@ const t$2=globalThis,i$3=t$2.trustedTypes,s$3=i$3?i$3.createPolicy("lit-html",{c
41
41
  * SPDX-License-Identifier: BSD-3-Clause
42
42
  */const s$2=globalThis;let i$2 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$2._$litElement$=true,i$2["finalized"]=true,s$2.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$2.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$2.litElementVersions??=[]).push("4.2.0");
43
43
 
44
- 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}`;
44
+ 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}`;
45
45
 
46
46
  var styleCss$4 = 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}`;
47
47
 
@@ -51,6 +51,10 @@ var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);b
51
51
 
52
52
  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)}`;
53
53
 
54
+ 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}`;
55
+
56
+ var classicColorCss = i$5`.layout-default label{color:var(--ds-auro-input-label-text-color)}`;
57
+
54
58
  var emphasizedStyleCss = 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}`;
55
59
 
56
60
  var emphasizedColorCss = 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)}`;
@@ -5034,9 +5038,9 @@ class BaseInput extends AuroElement$1 {
5034
5038
  this.required = false;
5035
5039
  this.setCustomValidityForType = undefined;
5036
5040
 
5037
- this.layout = 'default';
5041
+ this.layout = 'classic';
5038
5042
  this.shape = 'rounded';
5039
- this.size = 'xl';
5043
+ this.size = 'lg';
5040
5044
  }
5041
5045
 
5042
5046
  /**
@@ -7166,6 +7170,8 @@ class AuroInput extends BaseInput {
7166
7170
  i$5`${styleCss$4}`,
7167
7171
  i$5`${styleDefaultCss}`,
7168
7172
  i$5`${tokensCss$4}`,
7173
+ i$5`${classicStyleCss}`,
7174
+ i$5`${classicColorCss}`,
7169
7175
  i$5`${emphasizedStyleCss}`,
7170
7176
  i$5`${emphasizedColorCss}`,
7171
7177
  i$5`${snowflakeStyleCss}`
@@ -7276,14 +7282,19 @@ class AuroInput extends BaseInput {
7276
7282
  /**
7277
7283
  * Returns HTML for the HTML5 input element.
7278
7284
  * @private
7285
+ * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
7279
7286
  * @returns {html} - Returns HTML for the HTML5 input element.
7280
7287
  */
7281
- renderHtmlInput() {
7288
+ renderHtmlInput(hideInputWhenBlurred = false) {
7282
7289
  const displayValueClasses = {
7283
7290
  'displayValue': true,
7284
7291
  'hasContent': this.hasDisplayValueContent,
7285
7292
  'hasFocus': this.hasFocus,
7286
- 'withValue': this.value && this.value.length > 0
7293
+ 'withValue': this.value && this.value.length > 0,
7294
+ };
7295
+
7296
+ const inputClasses = {
7297
+ 'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
7287
7298
  };
7288
7299
 
7289
7300
  return u$2`
@@ -7306,6 +7317,7 @@ class AuroInput extends BaseInput {
7306
7317
  autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
7307
7318
  autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
7308
7319
  autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
7320
+ class="${e(inputClasses)}"
7309
7321
  id="${this.inputId}"
7310
7322
  inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
7311
7323
  lang="${o(this.lang)}"
@@ -7451,137 +7463,32 @@ class AuroInput extends BaseInput {
7451
7463
  /**
7452
7464
  * Returns HTML for the default layout.
7453
7465
  * @private
7454
- * @returns {html} - Returns HTML for the default layout.
7466
+ * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
7455
7467
  */
7456
7468
  renderLayoutClassic() {
7457
- const wrapperClasses = {
7458
- 'layoutDefault': true
7459
- };
7460
-
7461
- // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
7462
- const labelClasses = {
7463
- 'is-disabled': this.disabled,
7464
- 'withIcon': this.hasTypeIcon(),
7465
- 'withValue': this.value && this.value.length > 0
7466
- };
7467
-
7468
7469
  return u$2`
7469
- <div class="${e(wrapperClasses)}" part="wrapper">
7470
- <div class="main">
7471
- <div class="typeIcon">
7472
- ${this.type === 'credit-card' ? this.processCreditCard() : undefined}
7473
-
7474
- <!-- The repeat() method is used below in order to force auro-icon to re-render when the name value is updated.
7475
- This should be cleaned up when auro-icon issue #31 is resolved. -->
7476
- ${this.inputIconName
7477
- ? c([this.inputIconName], (val) => val, (name) => u$2`
7478
- <${this.iconTag}
7479
- class="accentIcon"
7480
- category="payment"
7481
- name="${name}"
7482
- part="accentIcon"
7483
- ?onDark="${this.onDark}"
7484
- variant="${this.disabled ? 'disabled' : 'muted'}">
7485
- </${this.iconTag}>
7486
- `) : undefined
7487
- }
7488
-
7489
- ${this.type === 'date'
7490
- ? u$2`
7491
- <${this.iconTag}
7492
- class="accentIcon"
7493
- category="interface"
7494
- name="calendar"
7495
- part="accentIcon"
7496
- ?onDark="${this.onDark}"
7497
- variant="${this.disabled ? 'disabled' : 'muted'}">
7498
- </${this.iconTag}>`
7499
- : undefined
7500
- }
7501
- </div>
7502
- <label for=${this.id} class="${e(labelClasses)}" part="label">
7503
- <slot name="label">
7504
- ${this.label}
7505
- </slot>
7506
- ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
7507
- </label>
7508
-
7509
- ${this.renderHtmlInput()}
7470
+ <div
7471
+ @click="${this.handleClick}"
7472
+ class="${e(this.commonWrapperClasses)} thin"
7473
+ part="wrapper">
7474
+ <div class="accents left">
7475
+ ${this.renderHtmlTypeIcon()}
7510
7476
  </div>
7511
- <div
7512
- class="notificationIcons"
7513
- part="notificationIcons"
7514
- ?hasValue="${this.hasValue}">
7515
- ${this.validity && this.validity !== 'valid' ? u$2`
7516
- <div class="notification alertNotification">
7517
- <${this.iconTag}
7518
- category="alert"
7519
- customColor
7520
- name="error-stroke"
7521
- </${this.iconTag}>
7522
- </div>
7523
- ` : undefined}
7477
+ <div class="mainContent">
7478
+ ${this.renderHtmlInput(true)}
7479
+ </div>
7480
+ <div class="accents right">
7481
+ ${this.renderValidationErrorIconHtml()}
7524
7482
  ${this.hasValue ? u$2`
7525
- ${this.type === 'password' ? u$2`
7526
- <div class="notification">
7527
- <${this.buttonTag}
7528
- @click="${this.handleClickShowPassword}"
7529
- ?onDark="${this.onDark}"
7530
- aria-hidden="true"
7531
- class="notificationBtn passwordBtn"
7532
- tabindex="-1"
7533
- variant="flat">
7534
- <${this.iconTag}
7535
- ?hidden=${!this.showPassword}
7536
- category="interface"
7537
- customColor
7538
- name="hide-password-stroke">
7539
- </${this.iconTag}>
7540
- <${this.iconTag}
7541
- ?hidden=${this.showPassword}
7542
- category="interface"
7543
- customColor
7544
- name="view-password-stroke">
7545
- </${this.iconTag}>
7546
- </${this.buttonTag}>
7547
- </div>
7548
- ` : undefined}
7549
7483
  ${!this.disabled && !this.readonly ? u$2`
7550
- <div class="notification">
7551
- <${this.buttonTag}
7552
- @click="${this.handleClickClear}"
7553
- ?onDark="${this.onDark}"
7554
- arialabel="${i18n(this.lang, 'clearInput')}"
7555
- class="notificationBtn clearBtn"
7556
- variant="flat">
7557
- <${this.iconTag}
7558
- category="interface"
7559
- customColor
7560
- name="x-lg">
7561
- </${this.iconTag}>
7562
- </${this.buttonTag}>
7563
- </div>
7484
+ ${this.renderHtmlActionClear()}
7564
7485
  ` : undefined}
7565
7486
  ` : undefined}
7566
7487
  </div>
7567
7488
  </div>
7568
- <!-- Help text and error message template -->
7569
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
7570
- ? u$2`
7571
- <${this.helpTextTag} ?onDark="${this.onDark}">
7572
- <p id="${this.uniqueId}" part="helpText">
7573
- <slot name="helptext">${this.getHelpText()}</slot>
7574
- </p>
7575
- </${this.helpTextTag}>
7576
- `
7577
- : u$2`
7578
- <${this.helpTextTag} error ?onDark="${this.onDark}">
7579
- <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
7580
- ${this.errorMessage}
7581
- </p>
7582
- </${this.helpTextTag}>
7583
- `
7584
- }
7489
+ <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
7490
+ ${this.renderHtmlHelpText()}
7491
+ </div>
7585
7492
  `;
7586
7493
  }
7587
7494
 
package/components/input/demo/readme.md CHANGED
@@ -82,7 +82,7 @@ This configuration enables proper module resolution for the component's TypeScri
82
82
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
83
83
 
84
84
  ```html
85
- <auro-input bordered></auro-input>
85
+ <auro-input bordered shape="rounded" size="lg"></auro-input>
86
86
  ```
87
87
  <!-- AURO-GENERATED-CONTENT:END -->
88
88
 
package/components/input/dist/auro-input.d.ts CHANGED
@@ -68,6 +68,7 @@ export class AuroInput extends BaseInput {
68
68
  /**
69
69
  * Returns HTML for the HTML5 input element.
70
70
  * @private
71
+ * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
71
72
  * @returns {html} - Returns HTML for the HTML5 input element.
72
73
  */
73
74
  private renderHtmlInput;
@@ -98,7 +99,7 @@ export class AuroInput extends BaseInput {
98
99
  /**
99
100
  * Returns HTML for the default layout.
100
101
  * @private
101
- * @returns {html} - Returns HTML for the default layout.
102
+ * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
102
103
  */
103
104
  private renderLayoutClassic;
104
105
  /**