@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/datepicker/dist/index.js CHANGED
@@ -16318,7 +16318,7 @@ class AuroDropdown extends AuroElement$2 {
16318
16318
 
16319
16319
  var dropdownVersion = '3.0.0';
16320
16320
 
16321
- var shapeSizeCss = css`.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width: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}`;
16321
+ var shapeSizeCss = css`.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}`;
16322
16322
 
16323
16323
  var styleCss$4 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}`;
16324
16324
 
@@ -16328,6 +16328,10 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
16328
16328
 
16329
16329
  var tokensCss$4 = css`:host(:not(ondark)){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
16330
16330
 
16331
+ var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row}.layout-classic .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;cursor:text}.layout-classic .mainContent label{cursor:text;padding-top:4px;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);padding-bottom:8px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);height:auto}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start;padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;line-height:0;padding-bottom:0}.layout-classic .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-classic .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-classic .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color);justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}`;
16332
+
16333
+ var classicColorCss = css`.layout-default label{color:var(--ds-auro-input-label-text-color)}`;
16334
+
16331
16335
  var emphasizedStyleCss = css`:host{display:block}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{background:unset;width:100%;padding:0;border:0;outline:none;overflow:hidden;text-overflow:ellipsis}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{text-transform:uppercase;font-size:32px;line-height:38px}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center;font-size:14px;line-height:20px}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized .displayValueWrapper,.layout-emphasized-left .displayValueWrapper,.layout-emphasized-right .displayValueWrapper{transform:translateY(-50%)}.layout-emphasized .accents,.layout-emphasized-left .accents,.layout-emphasized-right .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:24px}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:24px}.layout-emphasized-left .alertNotification{margin-right:8px}.layout-emphasized-left .clear{margin-left:8px}.layout-emphasized-right .alertNotification{margin-left:8px}.layout-emphasized-right .clear{margin-right:8px}`;
16332
16336
 
16333
16337
  var emphasizedColorCss = css`.layout-emphasized:focus-within,.layout-emphasized.withValue,.layout-emphasized-left:focus-within,.layout-emphasized-left.withValue,.layout-emphasized-right:focus-within,.layout-emphasized-right.withValue{--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
@@ -21272,9 +21276,9 @@ class BaseInput extends AuroElement$1 {
21272
21276
  this.required = false;
21273
21277
  this.setCustomValidityForType = undefined;
21274
21278
 
21275
- this.layout = 'default';
21279
+ this.layout = 'classic';
21276
21280
  this.shape = 'rounded';
21277
- this.size = 'xl';
21281
+ this.size = 'lg';
21278
21282
  }
21279
21283
 
21280
21284
  /**
@@ -23404,6 +23408,8 @@ class AuroInput extends BaseInput {
23404
23408
  css`${styleCss$4}`,
23405
23409
  css`${styleDefaultCss}`,
23406
23410
  css`${tokensCss$4}`,
23411
+ css`${classicStyleCss}`,
23412
+ css`${classicColorCss}`,
23407
23413
  css`${emphasizedStyleCss}`,
23408
23414
  css`${emphasizedColorCss}`,
23409
23415
  css`${snowflakeStyleCss}`
@@ -23514,14 +23520,19 @@ class AuroInput extends BaseInput {
23514
23520
  /**
23515
23521
  * Returns HTML for the HTML5 input element.
23516
23522
  * @private
23523
+ * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
23517
23524
  * @returns {html} - Returns HTML for the HTML5 input element.
23518
23525
  */
23519
- renderHtmlInput() {
23526
+ renderHtmlInput(hideInputWhenBlurred = false) {
23520
23527
  const displayValueClasses = {
23521
23528
  'displayValue': true,
23522
23529
  'hasContent': this.hasDisplayValueContent,
23523
23530
  'hasFocus': this.hasFocus,
23524
- 'withValue': this.value && this.value.length > 0
23531
+ 'withValue': this.value && this.value.length > 0,
23532
+ };
23533
+
23534
+ const inputClasses = {
23535
+ 'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
23525
23536
  };
23526
23537
 
23527
23538
  return html$1`
@@ -23544,6 +23555,7 @@ class AuroInput extends BaseInput {
23544
23555
  autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
23545
23556
  autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
23546
23557
  autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
23558
+ class="${classMap(inputClasses)}"
23547
23559
  id="${this.inputId}"
23548
23560
  inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
23549
23561
  lang="${ifDefined(this.lang)}"
@@ -23689,137 +23701,32 @@ class AuroInput extends BaseInput {
23689
23701
  /**
23690
23702
  * Returns HTML for the default layout.
23691
23703
  * @private
23692
- * @returns {html} - Returns HTML for the default layout.
23704
+ * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
23693
23705
  */
23694
23706
  renderLayoutClassic() {
23695
- const wrapperClasses = {
23696
- 'layoutDefault': true
23697
- };
23698
-
23699
- // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
23700
- const labelClasses = {
23701
- 'is-disabled': this.disabled,
23702
- 'withIcon': this.hasTypeIcon(),
23703
- 'withValue': this.value && this.value.length > 0
23704
- };
23705
-
23706
23707
  return html$1`
23707
- <div class="${classMap(wrapperClasses)}" part="wrapper">
23708
- <div class="main">
23709
- <div class="typeIcon">
23710
- ${this.type === 'credit-card' ? this.processCreditCard() : undefined}
23711
-
23712
- <!-- The repeat() method is used below in order to force auro-icon to re-render when the name value is updated.
23713
- This should be cleaned up when auro-icon issue #31 is resolved. -->
23714
- ${this.inputIconName
23715
- ? repeat([this.inputIconName], (val) => val, (name) => html$1`
23716
- <${this.iconTag}
23717
- class="accentIcon"
23718
- category="payment"
23719
- name="${name}"
23720
- part="accentIcon"
23721
- ?onDark="${this.onDark}"
23722
- variant="${this.disabled ? 'disabled' : 'muted'}">
23723
- </${this.iconTag}>
23724
- `) : undefined
23725
- }
23726
-
23727
- ${this.type === 'date'
23728
- ? html$1`
23729
- <${this.iconTag}
23730
- class="accentIcon"
23731
- category="interface"
23732
- name="calendar"
23733
- part="accentIcon"
23734
- ?onDark="${this.onDark}"
23735
- variant="${this.disabled ? 'disabled' : 'muted'}">
23736
- </${this.iconTag}>`
23737
- : undefined
23738
- }
23739
- </div>
23740
- <label for=${this.id} class="${classMap(labelClasses)}" part="label">
23741
- <slot name="label">
23742
- ${this.label}
23743
- </slot>
23744
- ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
23745
- </label>
23746
-
23747
- ${this.renderHtmlInput()}
23708
+ <div
23709
+ @click="${this.handleClick}"
23710
+ class="${classMap(this.commonWrapperClasses)} thin"
23711
+ part="wrapper">
23712
+ <div class="accents left">
23713
+ ${this.renderHtmlTypeIcon()}
23748
23714
  </div>
23749
- <div
23750
- class="notificationIcons"
23751
- part="notificationIcons"
23752
- ?hasValue="${this.hasValue}">
23753
- ${this.validity && this.validity !== 'valid' ? html$1`
23754
- <div class="notification alertNotification">
23755
- <${this.iconTag}
23756
- category="alert"
23757
- customColor
23758
- name="error-stroke"
23759
- </${this.iconTag}>
23760
- </div>
23761
- ` : undefined}
23715
+ <div class="mainContent">
23716
+ ${this.renderHtmlInput(true)}
23717
+ </div>
23718
+ <div class="accents right">
23719
+ ${this.renderValidationErrorIconHtml()}
23762
23720
  ${this.hasValue ? html$1`
23763
- ${this.type === 'password' ? html$1`
23764
- <div class="notification">
23765
- <${this.buttonTag}
23766
- @click="${this.handleClickShowPassword}"
23767
- ?onDark="${this.onDark}"
23768
- aria-hidden="true"
23769
- class="notificationBtn passwordBtn"
23770
- tabindex="-1"
23771
- variant="flat">
23772
- <${this.iconTag}
23773
- ?hidden=${!this.showPassword}
23774
- category="interface"
23775
- customColor
23776
- name="hide-password-stroke">
23777
- </${this.iconTag}>
23778
- <${this.iconTag}
23779
- ?hidden=${this.showPassword}
23780
- category="interface"
23781
- customColor
23782
- name="view-password-stroke">
23783
- </${this.iconTag}>
23784
- </${this.buttonTag}>
23785
- </div>
23786
- ` : undefined}
23787
23721
  ${!this.disabled && !this.readonly ? html$1`
23788
- <div class="notification">
23789
- <${this.buttonTag}
23790
- @click="${this.handleClickClear}"
23791
- ?onDark="${this.onDark}"
23792
- arialabel="${i18n(this.lang, 'clearInput')}"
23793
- class="notificationBtn clearBtn"
23794
- variant="flat">
23795
- <${this.iconTag}
23796
- category="interface"
23797
- customColor
23798
- name="x-lg">
23799
- </${this.iconTag}>
23800
- </${this.buttonTag}>
23801
- </div>
23722
+ ${this.renderHtmlActionClear()}
23802
23723
  ` : undefined}
23803
23724
  ` : undefined}
23804
23725
  </div>
23805
23726
  </div>
23806
- <!-- Help text and error message template -->
23807
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
23808
- ? html$1`
23809
- <${this.helpTextTag} ?onDark="${this.onDark}">
23810
- <p id="${this.uniqueId}" part="helpText">
23811
- <slot name="helptext">${this.getHelpText()}</slot>
23812
- </p>
23813
- </${this.helpTextTag}>
23814
- `
23815
- : html$1`
23816
- <${this.helpTextTag} error ?onDark="${this.onDark}">
23817
- <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
23818
- ${this.errorMessage}
23819
- </p>
23820
- </${this.helpTextTag}>
23821
- `
23822
- }
23727
+ <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
23728
+ ${this.renderHtmlHelpText()}
23729
+ </div>
23823
23730
  `;
23824
23731
  }
23825
23732
 
package/components/datepicker/dist/registered.js CHANGED
@@ -16318,7 +16318,7 @@ class AuroDropdown extends AuroElement$2 {
16318
16318
 
16319
16319
  var dropdownVersion = '3.0.0';
16320
16320
 
16321
- var shapeSizeCss = css`.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width: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}`;
16321
+ var shapeSizeCss = css`.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}`;
16322
16322
 
16323
16323
  var styleCss$4 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}`;
16324
16324
 
@@ -16328,6 +16328,10 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
16328
16328
 
16329
16329
  var tokensCss$4 = css`:host(:not(ondark)){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
16330
16330
 
16331
+ var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row}.layout-classic .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;cursor:text}.layout-classic .mainContent label{cursor:text;padding-top:4px;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);padding-bottom:8px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);height:auto}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start;padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;line-height:0;padding-bottom:0}.layout-classic .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-classic .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-classic .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color);justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}`;
16332
+
16333
+ var classicColorCss = css`.layout-default label{color:var(--ds-auro-input-label-text-color)}`;
16334
+
16331
16335
  var emphasizedStyleCss = css`:host{display:block}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{background:unset;width:100%;padding:0;border:0;outline:none;overflow:hidden;text-overflow:ellipsis}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{text-transform:uppercase;font-size:32px;line-height:38px}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center;font-size:14px;line-height:20px}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized .displayValueWrapper,.layout-emphasized-left .displayValueWrapper,.layout-emphasized-right .displayValueWrapper{transform:translateY(-50%)}.layout-emphasized .accents,.layout-emphasized-left .accents,.layout-emphasized-right .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:24px}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:24px}.layout-emphasized-left .alertNotification{margin-right:8px}.layout-emphasized-left .clear{margin-left:8px}.layout-emphasized-right .alertNotification{margin-left:8px}.layout-emphasized-right .clear{margin-right:8px}`;
16332
16336
 
16333
16337
  var emphasizedColorCss = css`.layout-emphasized:focus-within,.layout-emphasized.withValue,.layout-emphasized-left:focus-within,.layout-emphasized-left.withValue,.layout-emphasized-right:focus-within,.layout-emphasized-right.withValue{--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
@@ -21272,9 +21276,9 @@ class BaseInput extends AuroElement$1 {
21272
21276
  this.required = false;
21273
21277
  this.setCustomValidityForType = undefined;
21274
21278
 
21275
- this.layout = 'default';
21279
+ this.layout = 'classic';
21276
21280
  this.shape = 'rounded';
21277
- this.size = 'xl';
21281
+ this.size = 'lg';
21278
21282
  }
21279
21283
 
21280
21284
  /**
@@ -23404,6 +23408,8 @@ class AuroInput extends BaseInput {
23404
23408
  css`${styleCss$4}`,
23405
23409
  css`${styleDefaultCss}`,
23406
23410
  css`${tokensCss$4}`,
23411
+ css`${classicStyleCss}`,
23412
+ css`${classicColorCss}`,
23407
23413
  css`${emphasizedStyleCss}`,
23408
23414
  css`${emphasizedColorCss}`,
23409
23415
  css`${snowflakeStyleCss}`
@@ -23514,14 +23520,19 @@ class AuroInput extends BaseInput {
23514
23520
  /**
23515
23521
  * Returns HTML for the HTML5 input element.
23516
23522
  * @private
23523
+ * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
23517
23524
  * @returns {html} - Returns HTML for the HTML5 input element.
23518
23525
  */
23519
- renderHtmlInput() {
23526
+ renderHtmlInput(hideInputWhenBlurred = false) {
23520
23527
  const displayValueClasses = {
23521
23528
  'displayValue': true,
23522
23529
  'hasContent': this.hasDisplayValueContent,
23523
23530
  'hasFocus': this.hasFocus,
23524
- 'withValue': this.value && this.value.length > 0
23531
+ 'withValue': this.value && this.value.length > 0,
23532
+ };
23533
+
23534
+ const inputClasses = {
23535
+ 'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
23525
23536
  };
23526
23537
 
23527
23538
  return html$1`
@@ -23544,6 +23555,7 @@ class AuroInput extends BaseInput {
23544
23555
  autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
23545
23556
  autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
23546
23557
  autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
23558
+ class="${classMap(inputClasses)}"
23547
23559
  id="${this.inputId}"
23548
23560
  inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
23549
23561
  lang="${ifDefined(this.lang)}"
@@ -23689,137 +23701,32 @@ class AuroInput extends BaseInput {
23689
23701
  /**
23690
23702
  * Returns HTML for the default layout.
23691
23703
  * @private
23692
- * @returns {html} - Returns HTML for the default layout.
23704
+ * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
23693
23705
  */
23694
23706
  renderLayoutClassic() {
23695
- const wrapperClasses = {
23696
- 'layoutDefault': true
23697
- };
23698
-
23699
- // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
23700
- const labelClasses = {
23701
- 'is-disabled': this.disabled,
23702
- 'withIcon': this.hasTypeIcon(),
23703
- 'withValue': this.value && this.value.length > 0
23704
- };
23705
-
23706
23707
  return html$1`
23707
- <div class="${classMap(wrapperClasses)}" part="wrapper">
23708
- <div class="main">
23709
- <div class="typeIcon">
23710
- ${this.type === 'credit-card' ? this.processCreditCard() : undefined}
23711
-
23712
- <!-- The repeat() method is used below in order to force auro-icon to re-render when the name value is updated.
23713
- This should be cleaned up when auro-icon issue #31 is resolved. -->
23714
- ${this.inputIconName
23715
- ? repeat([this.inputIconName], (val) => val, (name) => html$1`
23716
- <${this.iconTag}
23717
- class="accentIcon"
23718
- category="payment"
23719
- name="${name}"
23720
- part="accentIcon"
23721
- ?onDark="${this.onDark}"
23722
- variant="${this.disabled ? 'disabled' : 'muted'}">
23723
- </${this.iconTag}>
23724
- `) : undefined
23725
- }
23726
-
23727
- ${this.type === 'date'
23728
- ? html$1`
23729
- <${this.iconTag}
23730
- class="accentIcon"
23731
- category="interface"
23732
- name="calendar"
23733
- part="accentIcon"
23734
- ?onDark="${this.onDark}"
23735
- variant="${this.disabled ? 'disabled' : 'muted'}">
23736
- </${this.iconTag}>`
23737
- : undefined
23738
- }
23739
- </div>
23740
- <label for=${this.id} class="${classMap(labelClasses)}" part="label">
23741
- <slot name="label">
23742
- ${this.label}
23743
- </slot>
23744
- ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
23745
- </label>
23746
-
23747
- ${this.renderHtmlInput()}
23708
+ <div
23709
+ @click="${this.handleClick}"
23710
+ class="${classMap(this.commonWrapperClasses)} thin"
23711
+ part="wrapper">
23712
+ <div class="accents left">
23713
+ ${this.renderHtmlTypeIcon()}
23748
23714
  </div>
23749
- <div
23750
- class="notificationIcons"
23751
- part="notificationIcons"
23752
- ?hasValue="${this.hasValue}">
23753
- ${this.validity && this.validity !== 'valid' ? html$1`
23754
- <div class="notification alertNotification">
23755
- <${this.iconTag}
23756
- category="alert"
23757
- customColor
23758
- name="error-stroke"
23759
- </${this.iconTag}>
23760
- </div>
23761
- ` : undefined}
23715
+ <div class="mainContent">
23716
+ ${this.renderHtmlInput(true)}
23717
+ </div>
23718
+ <div class="accents right">
23719
+ ${this.renderValidationErrorIconHtml()}
23762
23720
  ${this.hasValue ? html$1`
23763
- ${this.type === 'password' ? html$1`
23764
- <div class="notification">
23765
- <${this.buttonTag}
23766
- @click="${this.handleClickShowPassword}"
23767
- ?onDark="${this.onDark}"
23768
- aria-hidden="true"
23769
- class="notificationBtn passwordBtn"
23770
- tabindex="-1"
23771
- variant="flat">
23772
- <${this.iconTag}
23773
- ?hidden=${!this.showPassword}
23774
- category="interface"
23775
- customColor
23776
- name="hide-password-stroke">
23777
- </${this.iconTag}>
23778
- <${this.iconTag}
23779
- ?hidden=${this.showPassword}
23780
- category="interface"
23781
- customColor
23782
- name="view-password-stroke">
23783
- </${this.iconTag}>
23784
- </${this.buttonTag}>
23785
- </div>
23786
- ` : undefined}
23787
23721
  ${!this.disabled && !this.readonly ? html$1`
23788
- <div class="notification">
23789
- <${this.buttonTag}
23790
- @click="${this.handleClickClear}"
23791
- ?onDark="${this.onDark}"
23792
- arialabel="${i18n(this.lang, 'clearInput')}"
23793
- class="notificationBtn clearBtn"
23794
- variant="flat">
23795
- <${this.iconTag}
23796
- category="interface"
23797
- customColor
23798
- name="x-lg">
23799
- </${this.iconTag}>
23800
- </${this.buttonTag}>
23801
- </div>
23722
+ ${this.renderHtmlActionClear()}
23802
23723
  ` : undefined}
23803
23724
  ` : undefined}
23804
23725
  </div>
23805
23726
  </div>
23806
- <!-- Help text and error message template -->
23807
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
23808
- ? html$1`
23809
- <${this.helpTextTag} ?onDark="${this.onDark}">
23810
- <p id="${this.uniqueId}" part="helpText">
23811
- <slot name="helptext">${this.getHelpText()}</slot>
23812
- </p>
23813
- </${this.helpTextTag}>
23814
- `
23815
- : html$1`
23816
- <${this.helpTextTag} error ?onDark="${this.onDark}">
23817
- <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
23818
- ${this.errorMessage}
23819
- </p>
23820
- </${this.helpTextTag}>
23821
- `
23822
- }
23727
+ <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
23728
+ ${this.renderHtmlHelpText()}
23729
+ </div>
23823
23730
  `;
23824
23731
  }
23825
23732
 
package/components/input/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/demo/api.md CHANGED
@@ -27,7 +27,7 @@ Generate unique names for dependency components.
27
27
  | [id](#id) | `id` | | `string` | | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
28
28
  | [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
29
29
  | [lang](#lang) | `lang` | | `string` | | Defines the language of an element. |
30
- | [layout](#layout) | | | `string` | "default" | |
30
+ | [layout](#layout) | | | `string` | "classic" | |
31
31
  | [max](#max) | `max` | | `string` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
32
32
  | [maxLength](#maxLength) | `maxLength` | | `number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
33
33
  | [min](#min) | `min` | | `string` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
@@ -49,7 +49,7 @@ Generate unique names for dependency components.
49
49
  | [setCustomValidityTooShort](#setCustomValidityTooShort) | `setCustomValidityTooShort` | | `string` | | Custom help text message to display when validity = `tooShort`. |
50
50
  | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
51
51
  | [shape](#shape) | | | `string` | "rounded" | |
52
- | [size](#size) | | | `string` | "xl" | |
52
+ | [size](#size) | | | `string` | "lg" | |
53
53
  | [spellcheck](#spellcheck) | `spellcheck` | | `string` | | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
54
54
  | [type](#type) | `type` | | `string` | | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `date`, `tel` or `text`. If given value is not allowed or set, defaults to `text`. |
55
55
  | [validateOnInput](#validateOnInput) | `validateOnInput` | | `boolean` | | Sets validation mode to re-eval with each input. |
@@ -108,13 +108,13 @@ The default component supports the basic input `type="text"` structure. The `(op
108
108
  <div class="exampleWrapper">
109
109
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
110
110
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
111
- <auro-input bordered></auro-input>
111
+ <auro-input bordered shape="rounded" size="lg"></auro-input>
112
112
  <!-- AURO-GENERATED-CONTENT:END -->
113
113
  </div>
114
114
  <div class="exampleWrapper--ondark" aria-hidden>
115
115
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
116
116
  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
117
- <auro-input onDark bordered></auro-input>
117
+ <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
118
118
  <!-- AURO-GENERATED-CONTENT:END -->
119
119
  </div>
120
120
  <auro-accordion alignRight>
@@ -123,14 +123,14 @@ The default component supports the basic input `type="text"` structure. The `(op
123
123
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
124
124
 
125
125
  ```html
126
- <auro-input bordered></auro-input>
126
+ <auro-input bordered shape="rounded" size="lg"></auro-input>
127
127
  ```
128
128
  <!-- AURO-GENERATED-CONTENT:END -->
129
129
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
130
130
  <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
131
131
 
132
132
  ```html
133
- <auro-input onDark bordered></auro-input>
133
+ <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
134
134
  ```
135
135
  <!-- AURO-GENERATED-CONTENT:END -->
136
136
  </auro-accordion>