@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.97 → 0.0.0-pr624.99

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 (50) hide show
  1. package/components/bibtemplate/dist/index.js +3 -2
  2. package/components/bibtemplate/dist/registered.js +3 -2
  3. package/components/combobox/README.md +2 -0
  4. package/components/combobox/demo/api.md +6 -0
  5. package/components/combobox/demo/api.min.js +26 -15
  6. package/components/combobox/demo/index.md +12 -0
  7. package/components/combobox/demo/index.min.js +26 -15
  8. package/components/combobox/demo/readme.md +2 -0
  9. package/components/combobox/dist/auro-combobox.d.ts +2 -0
  10. package/components/combobox/dist/index.js +25 -14
  11. package/components/combobox/dist/registered.js +25 -14
  12. package/components/counter/demo/api.md +9 -0
  13. package/components/counter/demo/api.min.js +5 -2
  14. package/components/counter/demo/index.md +6 -0
  15. package/components/counter/demo/index.min.js +5 -2
  16. package/components/counter/dist/auro-counter-group.d.ts +1 -0
  17. package/components/counter/dist/index.js +5 -2
  18. package/components/counter/dist/registered.js +5 -2
  19. package/components/datepicker/README.md +1 -0
  20. package/components/datepicker/demo/api.md +11 -0
  21. package/components/datepicker/demo/api.min.js +18 -6
  22. package/components/datepicker/demo/index.md +12 -0
  23. package/components/datepicker/demo/index.min.js +18 -6
  24. package/components/datepicker/demo/readme.md +1 -0
  25. package/components/datepicker/dist/auro-datepicker.d.ts +1 -0
  26. package/components/datepicker/dist/index.js +18 -6
  27. package/components/datepicker/dist/registered.js +18 -6
  28. package/components/input/README.md +1 -0
  29. package/components/input/demo/api.md +14 -6
  30. package/components/input/demo/api.min.js +12 -4
  31. package/components/input/demo/index.md +7 -0
  32. package/components/input/demo/index.min.js +12 -4
  33. package/components/input/demo/readme.md +1 -0
  34. package/components/input/dist/base-input.d.ts +3 -1
  35. package/components/input/dist/index.js +12 -4
  36. package/components/input/dist/registered.js +12 -4
  37. package/components/menu/demo/api.min.js +1 -1
  38. package/components/menu/demo/index.min.js +1 -1
  39. package/components/menu/dist/index.js +1 -1
  40. package/components/menu/dist/registered.js +1 -1
  41. package/components/select/README.md +1 -0
  42. package/components/select/demo/api.md +3 -0
  43. package/components/select/demo/api.min.js +8 -3
  44. package/components/select/demo/index.md +8 -0
  45. package/components/select/demo/index.min.js +8 -3
  46. package/components/select/demo/readme.md +1 -0
  47. package/components/select/dist/auro-select.d.ts +1 -0
  48. package/components/select/dist/index.js +7 -2
  49. package/components/select/dist/registered.js +7 -2
  50. package/package.json +1 -1
package/components/bibtemplate/dist/index.js CHANGED
@@ -1913,8 +1913,9 @@ class AuroBibtemplate extends LitElement {
1913
1913
  <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
1914
1914
  <slot name="header"></slot>
1915
1915
  </${this.headerTag}>
1916
- <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
1917
- <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
1916
+ <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
1917
+ <span><slot name="ariaLabel.close">Close</slot></span>
1918
+ <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
1918
1919
  </${this.buttonTag}>
1919
1920
  </div>
1920
1921
  <span class="subheader">
package/components/bibtemplate/dist/registered.js CHANGED
@@ -1913,8 +1913,9 @@ class AuroBibtemplate extends LitElement {
1913
1913
  <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
1914
1914
  <slot name="header"></slot>
1915
1915
  </${this.headerTag}>
1916
- <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
1917
- <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
1916
+ <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
1917
+ <span><slot name="ariaLabel.close">Close</slot></span>
1918
+ <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
1918
1919
  </${this.buttonTag}>
1919
1920
  </div>
1920
1921
  <span class="subheader">
package/components/combobox/README.md CHANGED
@@ -84,6 +84,8 @@ This configuration enables proper module resolution for the component's TypeScri
84
84
 
85
85
  ```html
86
86
  <auro-combobox>
87
+ <span slot="ariaLabel.bib.close">Close combobox</span>
88
+ <span slot="ariaLabel.input.clear">Clear All</span>
87
89
  <span slot="bib.fullscreen.headline">Bib Header</span>
88
90
  <span slot="label">Name</span>
89
91
  <auro-menu>
package/components/combobox/demo/api.md CHANGED
@@ -59,6 +59,8 @@
59
59
  | Name | Description |
60
60
  |---------------------------|--------------------------------------------------|
61
61
  | | Default slot for the menu content. |
62
+ | `ariaLabel.bib.close` | Sets aria-label on close button in fullscreen bib |
63
+ | `ariaLabel.input.clear` | Sets aria-label on clear button |
62
64
  | `bib.fullscreen.headline` | Defines the headline to display above menu-options |
63
65
  | [displayValue](#displayValue) | Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts. |
64
66
  | [helpText](#helpText) | Defines the content of the helpText. |
@@ -74,6 +76,8 @@
74
76
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
75
77
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
76
78
  <auro-combobox>
79
+ <span slot="ariaLabel.bib.close">Close combobox</span>
80
+ <span slot="ariaLabel.input.clear">Clear All</span>
77
81
  <span slot="bib.fullscreen.headline">Bib Header</span>
78
82
  <span slot="label">Name</span>
79
83
  <auro-menu>
@@ -111,6 +115,8 @@
111
115
 
112
116
  ```html
113
117
  <auro-combobox>
118
+ <span slot="ariaLabel.bib.close">Close combobox</span>
119
+ <span slot="ariaLabel.input.clear">Clear All</span>
114
120
  <span slot="bib.fullscreen.headline">Bib Header</span>
115
121
  <span slot="label">Name</span>
116
122
  <auro-menu>
package/components/combobox/demo/api.min.js CHANGED
@@ -10431,6 +10431,9 @@ let AuroElement$2$1 = class AuroElement extends i$2 {
10431
10431
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
10432
10432
  * @attr id
10433
10433
  *
10434
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
10435
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
10436
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
10434
10437
  * @slot helpText - Sets the help text displayed below the input.
10435
10438
  * @slot label - Sets the label text for the input.
10436
10439
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -10858,8 +10861,7 @@ class BaseInput extends AuroElement$2$1 {
10858
10861
  * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
10859
10862
  */
10860
10863
  value: {
10861
- type: String,
10862
- reflect: true
10864
+ type: String
10863
10865
  },
10864
10866
 
10865
10867
  /**
@@ -13571,12 +13573,13 @@ class AuroInput extends BaseInput {
13571
13573
  <${this.buttonTag}
13572
13574
  @click="${this.handleClickClear}"
13573
13575
  ?onDark="${this.onDark}"
13574
- aria-label="${i18n(this.lang, 'clearInput')}"
13575
13576
  class="notificationBtn clearBtn"
13576
13577
  shape="circle"
13577
13578
  size="sm"
13578
13579
  variant="ghost">
13580
+ <span><slot name="ariaLabel.clear">Clear Input</slot></span>
13579
13581
  <${this.iconTag}
13582
+ aria-hidden="true"
13580
13583
  ?customColor="${this.onDark}"
13581
13584
  category="interface"
13582
13585
  name="x-lg"
@@ -13599,18 +13602,23 @@ class AuroInput extends BaseInput {
13599
13602
  @click="${this.handleClickShowPassword}"
13600
13603
  ?onDark="${this.onDark}"
13601
13604
  class="notificationBtn passwordBtn"
13602
- aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
13603
13605
  shape="circle"
13604
13606
  size="sm"
13605
13607
  variant="ghost">
13608
+ <span>
13609
+ ${this.showPassword ? u$2`<slot name="ariaLabel.password.hide">Hide Password</slot>`
13610
+ : u$2`<slot name="ariaLabel.password.show">Show Password</slot>`}
13611
+ </span>
13606
13612
  <${this.iconTag}
13607
13613
  ?customColor="${this.onDark}"
13614
+ aria-hidden="true"
13608
13615
  ?hidden=${!this.showPassword}
13609
13616
  category="interface"
13610
13617
  name="hide-password-stroke">
13611
13618
  </${this.iconTag}>
13612
13619
  <${this.iconTag}
13613
13620
  ?customColor="${this.onDark}"
13621
+ aria-hidden="true"
13614
13622
  ?hidden=${this.showPassword}
13615
13623
  category="interface"
13616
13624
  name="view-password-stroke">
@@ -15732,8 +15740,9 @@ class AuroBibtemplate extends i$2 {
15732
15740
  <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
15733
15741
  <slot name="header"></slot>
15734
15742
  </${this.headerTag}>
15735
- <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
15736
- <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
15743
+ <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
15744
+ <span><slot name="ariaLabel.close">Close</slot></span>
15745
+ <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
15737
15746
  </${this.buttonTag}>
15738
15747
  </div>
15739
15748
  <span class="subheader">
@@ -16069,6 +16078,8 @@ class AuroHelpText extends i$2 {
16069
16078
  /**
16070
16079
  * @slot - Default slot for the menu content.
16071
16080
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
16081
+ * @slot ariaLabel.input.clear - Sets aria-label on clear button
16082
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
16072
16083
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
16073
16084
  * @slot label - Defines the content of the label.
16074
16085
  * @slot helpText - Defines the content of the helpText.
@@ -16888,9 +16899,7 @@ class AuroCombobox extends AuroElement$1 {
16888
16899
  if (this.dropdown.isBibFullscreen) {
16889
16900
 
16890
16901
  // when focus is on the input, move focus back to close button with Tab key
16891
- if (document.activeElement.shadowRoot.activeElement === this.inputInBib &&
16892
- this.inputInBib.shadowRoot.activeElement.tagName !== 'INPUT' &&
16893
- !evt.shiftKey) {
16902
+ if (document.activeElement.shadowRoot.activeElement === this.inputInBib) {
16894
16903
  evt.preventDefault();
16895
16904
  this.dropdown.focus();
16896
16905
  }
@@ -17069,13 +17078,13 @@ class AuroCombobox extends AuroElement$1 {
17069
17078
 
17070
17079
  this.handleMenuOptions();
17071
17080
  break;
17081
+
17082
+ // Programmatically inject as the slot cannot be carried over to bibtemplate.
17083
+ // It's because the bib is/will be separated from dropdown to body.
17072
17084
  case 'label':
17073
- // Programmatically inject as the slot cannot be carried over to bibtemplate.
17074
- // It's because the bib is/will be separated from dropdown to body.
17075
- this.transportAssignedNodes(event.target, this.inputInBib, "label");
17076
- break;
17085
+ case 'ariaLabel.input.clear':
17077
17086
  case 'optionalLabel':
17078
- this.transportAssignedNodes(event.target, this.inputInBib, "optionalLabel");
17087
+ this.transportAssignedNodes(event.target, this.inputInBib, event.target.name);
17079
17088
  break;
17080
17089
  case 'bib.fullscreen.headline':
17081
17090
  this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
@@ -17146,6 +17155,7 @@ class AuroCombobox extends AuroElement$1 {
17146
17155
  shape="${this.shape}"
17147
17156
  size="${this.size}"
17148
17157
  slot="trigger">
17158
+ <slot name="ariaLabel.input.clear" slot="ariaLabel.clear" @slotchange="${this.handleSlotChange}"></slot>
17149
17159
  <slot name="label" slot="label" @slotchange="${this.handleSlotChange}"></slot>
17150
17160
  <slot name="optionalLabel" slot="optionalLabel" @slotchange="${this.handleSlotChange}"> (optional)</slot>
17151
17161
  <slot name="displayValue" slot="displayValue"></slot>
@@ -17153,6 +17163,7 @@ class AuroCombobox extends AuroElement$1 {
17153
17163
 
17154
17164
  <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
17155
17165
  <slot name="bib.fullscreen.headline" slot="header"></slot>
17166
+ <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
17156
17167
  <slot></slot>
17157
17168
  <${this.inputTag}
17158
17169
  id="inputInBib"
@@ -18064,7 +18075,7 @@ class AuroMenu extends AuroElement$1 {
18064
18075
 
18065
18076
  var styleCss$1 = i$5`.body-default{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
18066
18077
 
18067
- var colorCss$1 = i$5`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color);outline:1px solid var(--ds-auro-menuoption-container-border-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
18078
+ var colorCss$1 = i$5`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
18068
18079
 
18069
18080
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18070
18081
  // See LICENSE in the project root for license information.
package/components/combobox/demo/index.md CHANGED
@@ -28,6 +28,8 @@ The `<auro-combobox>` element should be used in situations where users may:
28
28
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
29
29
  <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
30
30
  <auro-combobox layout="classic" shape="classic" size="lg" placeholder="Placeholder content" required style="width: 249px;">
31
+ <span slot="ariaLabel.bib.close">Close combobox</span>
32
+ <span slot="ariaLabel.input.clear">Clear All</span>
31
33
  <span slot="bib.fullscreen.headline">Bib Header</span>
32
34
  <span slot="label">Name</span>
33
35
  <auro-menu>
@@ -48,6 +50,8 @@ The `<auro-combobox>` element should be used in situations where users may:
48
50
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/onDark.html) -->
49
51
  <!-- The below content is automatically added from ./../apiExamples/classic/onDark.html -->
50
52
  <auro-combobox layout="classic" shape="classic" size="lg" placeholder="Placeholder content" ondark required style="width: 249px;">
53
+ <span slot="ariaLabel.bib.close">Close combobox</span>
54
+ <span slot="ariaLabel.input.clear">Clear All</span>
51
55
  <span slot="bib.fullscreen.headline">Bib Header</span>
52
56
  <span slot="label">Name</span>
53
57
  <auro-menu>
@@ -71,6 +75,8 @@ The `<auro-combobox>` element should be used in situations where users may:
71
75
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
72
76
  <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
73
77
  <auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required ondark style="width: 249px;">
78
+ <span slot="ariaLabel.bib.close">Close combobox</span>
79
+ <span slot="ariaLabel.input.clear">Clear All</span>
74
80
  <span slot="bib.fullscreen.headline">Bib Header</span>
75
81
  <span slot="label">Name</span>
76
82
  <auro-menu>
@@ -100,6 +106,8 @@ The `<auro-combobox>` element should be used in situations where users may:
100
106
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
101
107
  <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
102
108
  <auro-combobox layout="snowflake" shape="snowflake" size="lg" placeholder="Placeholder content" required ondark style="width: 249px;">
109
+ <span slot="ariaLabel.bib.close">Close combobox</span>
110
+ <span slot="ariaLabel.input.clear">Clear All</span>
103
111
  <span slot="bib.fullscreen.headline">Bib Header</span>
104
112
  <span slot="label">Name</span>
105
113
  <auro-menu>
@@ -120,6 +128,8 @@ The `<auro-combobox>` element should be used in situations where users may:
120
128
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
121
129
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
122
130
  <auro-combobox>
131
+ <span slot="ariaLabel.bib.close">Close combobox</span>
132
+ <span slot="ariaLabel.input.clear">Clear All</span>
123
133
  <span slot="bib.fullscreen.headline">Bib Header</span>
124
134
  <span slot="label">Name</span>
125
135
  <auro-menu>
@@ -157,6 +167,8 @@ The `<auro-combobox>` element should be used in situations where users may:
157
167
 
158
168
  ```html
159
169
  <auro-combobox>
170
+ <span slot="ariaLabel.bib.close">Close combobox</span>
171
+ <span slot="ariaLabel.input.clear">Clear All</span>
160
172
  <span slot="bib.fullscreen.headline">Bib Header</span>
161
173
  <span slot="label">Name</span>
162
174
  <auro-menu>
package/components/combobox/demo/index.min.js CHANGED
@@ -10289,6 +10289,9 @@ let AuroElement$2$1 = class AuroElement extends i$2 {
10289
10289
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
10290
10290
  * @attr id
10291
10291
  *
10292
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
10293
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
10294
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
10292
10295
  * @slot helpText - Sets the help text displayed below the input.
10293
10296
  * @slot label - Sets the label text for the input.
10294
10297
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -10716,8 +10719,7 @@ class BaseInput extends AuroElement$2$1 {
10716
10719
  * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
10717
10720
  */
10718
10721
  value: {
10719
- type: String,
10720
- reflect: true
10722
+ type: String
10721
10723
  },
10722
10724
 
10723
10725
  /**
@@ -13429,12 +13431,13 @@ class AuroInput extends BaseInput {
13429
13431
  <${this.buttonTag}
13430
13432
  @click="${this.handleClickClear}"
13431
13433
  ?onDark="${this.onDark}"
13432
- aria-label="${i18n(this.lang, 'clearInput')}"
13433
13434
  class="notificationBtn clearBtn"
13434
13435
  shape="circle"
13435
13436
  size="sm"
13436
13437
  variant="ghost">
13438
+ <span><slot name="ariaLabel.clear">Clear Input</slot></span>
13437
13439
  <${this.iconTag}
13440
+ aria-hidden="true"
13438
13441
  ?customColor="${this.onDark}"
13439
13442
  category="interface"
13440
13443
  name="x-lg"
@@ -13457,18 +13460,23 @@ class AuroInput extends BaseInput {
13457
13460
  @click="${this.handleClickShowPassword}"
13458
13461
  ?onDark="${this.onDark}"
13459
13462
  class="notificationBtn passwordBtn"
13460
- aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
13461
13463
  shape="circle"
13462
13464
  size="sm"
13463
13465
  variant="ghost">
13466
+ <span>
13467
+ ${this.showPassword ? u$2`<slot name="ariaLabel.password.hide">Hide Password</slot>`
13468
+ : u$2`<slot name="ariaLabel.password.show">Show Password</slot>`}
13469
+ </span>
13464
13470
  <${this.iconTag}
13465
13471
  ?customColor="${this.onDark}"
13472
+ aria-hidden="true"
13466
13473
  ?hidden=${!this.showPassword}
13467
13474
  category="interface"
13468
13475
  name="hide-password-stroke">
13469
13476
  </${this.iconTag}>
13470
13477
  <${this.iconTag}
13471
13478
  ?customColor="${this.onDark}"
13479
+ aria-hidden="true"
13472
13480
  ?hidden=${this.showPassword}
13473
13481
  category="interface"
13474
13482
  name="view-password-stroke">
@@ -15590,8 +15598,9 @@ class AuroBibtemplate extends i$2 {
15590
15598
  <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
15591
15599
  <slot name="header"></slot>
15592
15600
  </${this.headerTag}>
15593
- <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
15594
- <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
15601
+ <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
15602
+ <span><slot name="ariaLabel.close">Close</slot></span>
15603
+ <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
15595
15604
  </${this.buttonTag}>
15596
15605
  </div>
15597
15606
  <span class="subheader">
@@ -15927,6 +15936,8 @@ class AuroHelpText extends i$2 {
15927
15936
  /**
15928
15937
  * @slot - Default slot for the menu content.
15929
15938
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
15939
+ * @slot ariaLabel.input.clear - Sets aria-label on clear button
15940
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
15930
15941
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
15931
15942
  * @slot label - Defines the content of the label.
15932
15943
  * @slot helpText - Defines the content of the helpText.
@@ -16746,9 +16757,7 @@ class AuroCombobox extends AuroElement$1 {
16746
16757
  if (this.dropdown.isBibFullscreen) {
16747
16758
 
16748
16759
  // when focus is on the input, move focus back to close button with Tab key
16749
- if (document.activeElement.shadowRoot.activeElement === this.inputInBib &&
16750
- this.inputInBib.shadowRoot.activeElement.tagName !== 'INPUT' &&
16751
- !evt.shiftKey) {
16760
+ if (document.activeElement.shadowRoot.activeElement === this.inputInBib) {
16752
16761
  evt.preventDefault();
16753
16762
  this.dropdown.focus();
16754
16763
  }
@@ -16927,13 +16936,13 @@ class AuroCombobox extends AuroElement$1 {
16927
16936
 
16928
16937
  this.handleMenuOptions();
16929
16938
  break;
16939
+
16940
+ // Programmatically inject as the slot cannot be carried over to bibtemplate.
16941
+ // It's because the bib is/will be separated from dropdown to body.
16930
16942
  case 'label':
16931
- // Programmatically inject as the slot cannot be carried over to bibtemplate.
16932
- // It's because the bib is/will be separated from dropdown to body.
16933
- this.transportAssignedNodes(event.target, this.inputInBib, "label");
16934
- break;
16943
+ case 'ariaLabel.input.clear':
16935
16944
  case 'optionalLabel':
16936
- this.transportAssignedNodes(event.target, this.inputInBib, "optionalLabel");
16945
+ this.transportAssignedNodes(event.target, this.inputInBib, event.target.name);
16937
16946
  break;
16938
16947
  case 'bib.fullscreen.headline':
16939
16948
  this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
@@ -17004,6 +17013,7 @@ class AuroCombobox extends AuroElement$1 {
17004
17013
  shape="${this.shape}"
17005
17014
  size="${this.size}"
17006
17015
  slot="trigger">
17016
+ <slot name="ariaLabel.input.clear" slot="ariaLabel.clear" @slotchange="${this.handleSlotChange}"></slot>
17007
17017
  <slot name="label" slot="label" @slotchange="${this.handleSlotChange}"></slot>
17008
17018
  <slot name="optionalLabel" slot="optionalLabel" @slotchange="${this.handleSlotChange}"> (optional)</slot>
17009
17019
  <slot name="displayValue" slot="displayValue"></slot>
@@ -17011,6 +17021,7 @@ class AuroCombobox extends AuroElement$1 {
17011
17021
 
17012
17022
  <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
17013
17023
  <slot name="bib.fullscreen.headline" slot="header"></slot>
17024
+ <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
17014
17025
  <slot></slot>
17015
17026
  <${this.inputTag}
17016
17027
  id="inputInBib"
@@ -17922,7 +17933,7 @@ class AuroMenu extends AuroElement$1 {
17922
17933
 
17923
17934
  var styleCss$1 = i$5`.body-default{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
17924
17935
 
17925
- var colorCss$1 = i$5`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color);outline:1px solid var(--ds-auro-menuoption-container-border-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
17936
+ var colorCss$1 = i$5`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
17926
17937
 
17927
17938
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
17928
17939
  // See LICENSE in the project root for license information.
package/components/combobox/demo/readme.md CHANGED
@@ -84,6 +84,8 @@ This configuration enables proper module resolution for the component's TypeScri
84
84
 
85
85
  ```html
86
86
  <auro-combobox>
87
+ <span slot="ariaLabel.bib.close">Close combobox</span>
88
+ <span slot="ariaLabel.input.clear">Clear All</span>
87
89
  <span slot="bib.fullscreen.headline">Bib Header</span>
88
90
  <span slot="label">Name</span>
89
91
  <auro-menu>
package/components/combobox/dist/auro-combobox.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  /**
2
2
  * @slot - Default slot for the menu content.
3
3
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
4
+ * @slot ariaLabel.input.clear - Sets aria-label on clear button
5
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
4
6
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
5
7
  * @slot label - Defines the content of the label.
6
8
  * @slot helpText - Defines the content of the helpText.
package/components/combobox/dist/index.js CHANGED
@@ -10207,6 +10207,9 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
10207
10207
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
10208
10208
  * @attr id
10209
10209
  *
10210
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
10211
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
10212
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
10210
10213
  * @slot helpText - Sets the help text displayed below the input.
10211
10214
  * @slot label - Sets the label text for the input.
10212
10215
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -10634,8 +10637,7 @@ class BaseInput extends AuroElement$2$1 {
10634
10637
  * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
10635
10638
  */
10636
10639
  value: {
10637
- type: String,
10638
- reflect: true
10640
+ type: String
10639
10641
  },
10640
10642
 
10641
10643
  /**
@@ -13347,12 +13349,13 @@ class AuroInput extends BaseInput {
13347
13349
  <${this.buttonTag}
13348
13350
  @click="${this.handleClickClear}"
13349
13351
  ?onDark="${this.onDark}"
13350
- aria-label="${i18n(this.lang, 'clearInput')}"
13351
13352
  class="notificationBtn clearBtn"
13352
13353
  shape="circle"
13353
13354
  size="sm"
13354
13355
  variant="ghost">
13356
+ <span><slot name="ariaLabel.clear">Clear Input</slot></span>
13355
13357
  <${this.iconTag}
13358
+ aria-hidden="true"
13356
13359
  ?customColor="${this.onDark}"
13357
13360
  category="interface"
13358
13361
  name="x-lg"
@@ -13375,18 +13378,23 @@ class AuroInput extends BaseInput {
13375
13378
  @click="${this.handleClickShowPassword}"
13376
13379
  ?onDark="${this.onDark}"
13377
13380
  class="notificationBtn passwordBtn"
13378
- aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
13379
13381
  shape="circle"
13380
13382
  size="sm"
13381
13383
  variant="ghost">
13384
+ <span>
13385
+ ${this.showPassword ? html`<slot name="ariaLabel.password.hide">Hide Password</slot>`
13386
+ : html`<slot name="ariaLabel.password.show">Show Password</slot>`}
13387
+ </span>
13382
13388
  <${this.iconTag}
13383
13389
  ?customColor="${this.onDark}"
13390
+ aria-hidden="true"
13384
13391
  ?hidden=${!this.showPassword}
13385
13392
  category="interface"
13386
13393
  name="hide-password-stroke">
13387
13394
  </${this.iconTag}>
13388
13395
  <${this.iconTag}
13389
13396
  ?customColor="${this.onDark}"
13397
+ aria-hidden="true"
13390
13398
  ?hidden=${this.showPassword}
13391
13399
  category="interface"
13392
13400
  name="view-password-stroke">
@@ -15508,8 +15516,9 @@ class AuroBibtemplate extends LitElement {
15508
15516
  <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
15509
15517
  <slot name="header"></slot>
15510
15518
  </${this.headerTag}>
15511
- <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
15512
- <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
15519
+ <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
15520
+ <span><slot name="ariaLabel.close">Close</slot></span>
15521
+ <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
15513
15522
  </${this.buttonTag}>
15514
15523
  </div>
15515
15524
  <span class="subheader">
@@ -15845,6 +15854,8 @@ class AuroHelpText extends LitElement {
15845
15854
  /**
15846
15855
  * @slot - Default slot for the menu content.
15847
15856
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
15857
+ * @slot ariaLabel.input.clear - Sets aria-label on clear button
15858
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
15848
15859
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
15849
15860
  * @slot label - Defines the content of the label.
15850
15861
  * @slot helpText - Defines the content of the helpText.
@@ -16664,9 +16675,7 @@ class AuroCombobox extends AuroElement {
16664
16675
  if (this.dropdown.isBibFullscreen) {
16665
16676
 
16666
16677
  // when focus is on the input, move focus back to close button with Tab key
16667
- if (document.activeElement.shadowRoot.activeElement === this.inputInBib &&
16668
- this.inputInBib.shadowRoot.activeElement.tagName !== 'INPUT' &&
16669
- !evt.shiftKey) {
16678
+ if (document.activeElement.shadowRoot.activeElement === this.inputInBib) {
16670
16679
  evt.preventDefault();
16671
16680
  this.dropdown.focus();
16672
16681
  }
@@ -16845,13 +16854,13 @@ class AuroCombobox extends AuroElement {
16845
16854
 
16846
16855
  this.handleMenuOptions();
16847
16856
  break;
16857
+
16858
+ // Programmatically inject as the slot cannot be carried over to bibtemplate.
16859
+ // It's because the bib is/will be separated from dropdown to body.
16848
16860
  case 'label':
16849
- // Programmatically inject as the slot cannot be carried over to bibtemplate.
16850
- // It's because the bib is/will be separated from dropdown to body.
16851
- this.transportAssignedNodes(event.target, this.inputInBib, "label");
16852
- break;
16861
+ case 'ariaLabel.input.clear':
16853
16862
  case 'optionalLabel':
16854
- this.transportAssignedNodes(event.target, this.inputInBib, "optionalLabel");
16863
+ this.transportAssignedNodes(event.target, this.inputInBib, event.target.name);
16855
16864
  break;
16856
16865
  case 'bib.fullscreen.headline':
16857
16866
  this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
@@ -16922,6 +16931,7 @@ class AuroCombobox extends AuroElement {
16922
16931
  shape="${this.shape}"
16923
16932
  size="${this.size}"
16924
16933
  slot="trigger">
16934
+ <slot name="ariaLabel.input.clear" slot="ariaLabel.clear" @slotchange="${this.handleSlotChange}"></slot>
16925
16935
  <slot name="label" slot="label" @slotchange="${this.handleSlotChange}"></slot>
16926
16936
  <slot name="optionalLabel" slot="optionalLabel" @slotchange="${this.handleSlotChange}"> (optional)</slot>
16927
16937
  <slot name="displayValue" slot="displayValue"></slot>
@@ -16929,6 +16939,7 @@ class AuroCombobox extends AuroElement {
16929
16939
 
16930
16940
  <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
16931
16941
  <slot name="bib.fullscreen.headline" slot="header"></slot>
16942
+ <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
16932
16943
  <slot></slot>
16933
16944
  <${this.inputTag}
16934
16945
  id="inputInBib"