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

package/components/combobox/dist/registered.js

@@ -10207,6 +10207,9 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  * @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 {
        * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
        */
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
 
       /**
@@ -13347,12 +13349,13 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           ?onDark="${this.onDark}"
-          aria-label="${i18n(this.lang, 'clearInput')}"
           class="notificationBtn clearBtn"
           shape="circle"
           size="sm"
           variant="ghost">
+          <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
+            aria-hidden="true"
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
@@ -13375,18 +13378,23 @@ class AuroInput extends BaseInput {
           @click="${this.handleClickShowPassword}"
           ?onDark="${this.onDark}"
           class="notificationBtn passwordBtn"
-          aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
           shape="circle"
           size="sm"
           variant="ghost">
+            <span>
+            ${this.showPassword ? html`<slot name="ariaLabel.password.hide">Hide Password</slot>`
+              : html`<slot name="ariaLabel.password.show">Show Password</slot>`}
+            </span>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${!this.showPassword}
             category="interface"
             name="hide-password-stroke">
           </${this.iconTag}>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${this.showPassword}
             category="interface"
             name="view-password-stroke">
@@ -15508,8 +15516,9 @@ class AuroBibtemplate extends LitElement {
             <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
               <slot name="header"></slot>
             </${this.headerTag}>
-            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <span><slot name="ariaLabel.close">Close</slot></span>
+              <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
             </${this.buttonTag}>
           </div>
           <span class="subheader">
@@ -15845,6 +15854,8 @@ class AuroHelpText extends LitElement {
 /**
  * @slot - Default slot for the menu content.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
+ * @slot ariaLabel.input.clear - Sets aria-label on clear button
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -16664,9 +16675,7 @@ class AuroCombobox extends AuroElement {
         if (this.dropdown.isBibFullscreen) {
 
           // when focus is on the input, move focus back to close button with Tab key
-          if (document.activeElement.shadowRoot.activeElement === this.inputInBib &&
-            this.inputInBib.shadowRoot.activeElement.tagName !== 'INPUT' &&
-            !evt.shiftKey) {
+          if (document.activeElement.shadowRoot.activeElement === this.inputInBib) {
             evt.preventDefault();
             this.dropdown.focus();
           }
@@ -16845,13 +16854,13 @@ class AuroCombobox extends AuroElement {
 
         this.handleMenuOptions();
         break;
+
+      // Programmatically inject as the slot cannot be carried over to bibtemplate.
+      // It's because the bib is/will be separated from dropdown to body.
       case 'label':
-        // Programmatically inject as the slot cannot be carried over to bibtemplate.
-        // It's because the bib is/will be separated from dropdown to body.
-        this.transportAssignedNodes(event.target, this.inputInBib, "label");
-        break;
+      case 'ariaLabel.input.clear':
       case 'optionalLabel':
-        this.transportAssignedNodes(event.target, this.inputInBib, "optionalLabel");
+        this.transportAssignedNodes(event.target, this.inputInBib, event.target.name);
         break;
       case 'bib.fullscreen.headline':
         this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
@@ -16922,6 +16931,7 @@ class AuroCombobox extends AuroElement {
               shape="${this.shape}"
               size="${this.size}"
               slot="trigger">
+              <slot name="ariaLabel.input.clear" slot="ariaLabel.clear" @slotchange="${this.handleSlotChange}"></slot>
               <slot name="label" slot="label" @slotchange="${this.handleSlotChange}"></slot>
               <slot name="optionalLabel" slot="optionalLabel" @slotchange="${this.handleSlotChange}"> (optional)</slot>
               <slot name="displayValue" slot="displayValue"></slot>
@@ -16929,6 +16939,7 @@ class AuroCombobox extends AuroElement {
 
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
             <slot name="bib.fullscreen.headline" slot="header"></slot>
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
             <${this.inputTag}
               id="inputInBib"

package/components/counter/demo/api.md

@@ -77,6 +77,7 @@
 
 | Name                      | Description                                      |
 |---------------------------|--------------------------------------------------|
+| `ariaLabel.bib.close`     | Sets aria-label on close button in fullscreen bib |
 | `bib.fullscreen.footer`   | Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true. |
 | `bib.fullscreen.headline` | Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required. |
 | [default](#default)                 | Slot for counter elements.                       |
@@ -296,6 +297,7 @@ counter.addEventListener('input', (event) => {
   <!-- The below content is automatically added from ./../apiExamples/dropdown-value-text.html -->
   <div style="max-width: 350px;">
     <auro-counter-group isDropdown>
+      <span slot="ariaLabel.bib.close">Close Popup</span>
       <span slot="bib.fullscreen.headline">Passengers</span>
       <div slot="valueText">Custom value text</div>
       <div slot="label"></div>
@@ -323,6 +325,7 @@ counter.addEventListener('input', (event) => {
 ```html
 <div style="max-width: 350px;">
   <auro-counter-group isDropdown>
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <span slot="bib.fullscreen.headline">Passengers</span>
     <div slot="valueText">Custom value text</div>
     <div slot="label"></div>
@@ -391,6 +394,7 @@ A counter dropdown with counters in an errored state will display the errors for
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/dropdown-error-basic.html -->
   <auro-counter-group isDropdown>
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Passengers</div>
     <div slot="label">Passengers</div>
     <auro-counter error="Cannot have less than 1 adult passenger">
@@ -411,6 +415,7 @@ A counter dropdown with counters in an errored state will display the errors for
 
 ```html
 <auro-counter-group isDropdown>
+  <span slot="ariaLabel.bib.close">Close Popup</span>
   <div slot="bib.fullscreen.headline">Passengers</div>
   <div slot="label">Passengers</div>
   <auro-counter error="Cannot have less than 1 adult passenger">
@@ -434,6 +439,7 @@ The error message for a dropdown counter with errored counters can also be overr
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-custom.html) -->
   <!-- The below content is automatically added from ./../apiExamples/dropdown-error-custom.html -->
   <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Passengers</div>
     <div slot="label">Passengers</div>
     <auro-counter error="Cannot have less than 1 adult passenger">
@@ -454,6 +460,7 @@ The error message for a dropdown counter with errored counters can also be overr
 
 ```html
 <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
+  <span slot="ariaLabel.bib.close">Close Popup</span>
   <div slot="bib.fullscreen.headline">Passengers</div>
   <div slot="label">Passengers</div>
   <auro-counter error="Cannot have less than 1 adult passenger">
@@ -664,6 +671,7 @@ You can also set `bib.fullscreen.footer` slot to add any additional options on f
   <!-- The below content is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
   <div style="max-width: 350px;">
     <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+      <span slot="ariaLabel.bib.close">Close Popup</span>
       <span slot="label">Passengers</span>
       <span slot="bib.fullscreen.headline">Passengers</span>
       <div slot="helpText">This is help text</div>
@@ -695,6 +703,7 @@ You can also set `bib.fullscreen.footer` slot to add any additional options on f
 ```html
 <div style="max-width: 350px;">
   <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <span slot="label">Passengers</span>
     <span slot="bib.fullscreen.headline">Passengers</span>
     <div slot="helpText">This is help text</div>

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

@@ -9389,8 +9389,9 @@ class AuroBibtemplate extends i$2 {
             <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
               <slot name="header"></slot>
             </${this.headerTag}>
-            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <span><slot name="ariaLabel.close">Close</slot></span>
+              <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
             </${this.buttonTag}>
           </div>
           <span class="subheader">
@@ -9582,6 +9583,7 @@ class AuroElement extends i$2 {
  * @element auro-counter-group
  * @extends LitElement
  * @slot default - Slot for counter elements.
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
  * @slot bib.fullscreen.footer -  Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.
  * @slot label - Dropdown label content. Only used when `isDropdown` is true.
@@ -10269,6 +10271,7 @@ class AuroCounterGroup extends AuroElement {
   renderBibTemplate() {
     return u`
       <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
+        <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
         ${this.renderCounterGroup(true)}
       </${this.bibtemplateTag}>
     `;

package/components/counter/demo/index.md

@@ -260,6 +260,7 @@ When using a dropdown, an additional layout, `snowflake`, is available for use:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/dropdown-basic.html -->
   <auro-counter-group isDropdown>
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Passengers</div>
     <div slot="label">Passengers</div>
     <auro-counter>
@@ -295,6 +296,7 @@ When using a dropdown, an additional layout, `snowflake`, is available for use:
   <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
   <!-- Example of counter-group properties -->
   <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Group fullscreen label</div>
     <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
     <div slot="label">Snowflake Dropdown Group</div>
@@ -313,6 +315,7 @@ When using a dropdown, an additional layout, `snowflake`, is available for use:
   <!-- The below content is automatically added from ./../apiExamples/onDark-dropdown-snowflake.html -->
   <!-- Example of counter-group properties -->
   <auro-counter-group max="10" min="2" isDropdown layout="snowflake" ondark>
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Group fullscreen label</div>
     <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
     <div slot="label">Snowflake Dropdown Group</div>
@@ -332,6 +335,7 @@ When using a dropdown, an additional layout, `snowflake`, is available for use:
   <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-basic.html -->
   ```html
   <auro-counter-group isDropdown>
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Passengers</div>
     <div slot="label">Passengers</div>
     <auro-counter>
@@ -364,6 +368,7 @@ When using a dropdown, an additional layout, `snowflake`, is available for use:
   <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
   <!-- Example of counter-group properties -->
   <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Group fullscreen label</div>
     <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
     <div slot="label">Snowflake Dropdown Group</div>
@@ -380,6 +385,7 @@ When using a dropdown, an additional layout, `snowflake`, is available for use:
   <!-- The below content is automatically added from ./../apiExamples/onDark-dropdown-snowflake.html -->
   <!-- Example of counter-group properties -->
   <auro-counter-group max="10" min="2" isDropdown layout="snowflake" ondark>
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Group fullscreen label</div>
     <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
     <div slot="label">Snowflake Dropdown Group</div>

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

@@ -9389,8 +9389,9 @@ class AuroBibtemplate extends i$2 {
             <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
               <slot name="header"></slot>
             </${this.headerTag}>
-            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <span><slot name="ariaLabel.close">Close</slot></span>
+              <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
             </${this.buttonTag}>
           </div>
           <span class="subheader">
@@ -9582,6 +9583,7 @@ class AuroElement extends i$2 {
  * @element auro-counter-group
  * @extends LitElement
  * @slot default - Slot for counter elements.
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
  * @slot bib.fullscreen.footer -  Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.
  * @slot label - Dropdown label content. Only used when `isDropdown` is true.
@@ -10269,6 +10271,7 @@ class AuroCounterGroup extends AuroElement {
   renderBibTemplate() {
     return u`
       <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
+        <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
         ${this.renderCounterGroup(true)}
       </${this.bibtemplateTag}>
     `;

package/components/counter/dist/auro-counter-group.d.ts

@@ -7,6 +7,7 @@
  * @element auro-counter-group
  * @extends LitElement
  * @slot default - Slot for counter elements.
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
  * @slot bib.fullscreen.footer -  Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.
  * @slot label - Dropdown label content. Only used when `isDropdown` is true.

package/components/counter/dist/index.js

@@ -9342,8 +9342,9 @@ class AuroBibtemplate extends LitElement {
             <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
               <slot name="header"></slot>
             </${this.headerTag}>
-            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <span><slot name="ariaLabel.close">Close</slot></span>
+              <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
             </${this.buttonTag}>
           </div>
           <span class="subheader">
@@ -9535,6 +9536,7 @@ class AuroElement extends LitElement {
  * @element auro-counter-group
  * @extends LitElement
  * @slot default - Slot for counter elements.
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
  * @slot bib.fullscreen.footer -  Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.
  * @slot label - Dropdown label content. Only used when `isDropdown` is true.
@@ -10222,6 +10224,7 @@ class AuroCounterGroup extends AuroElement {
   renderBibTemplate() {
     return html$1`
       <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
+        <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
         ${this.renderCounterGroup(true)}
       </${this.bibtemplateTag}>
     `;

package/components/counter/dist/registered.js

@@ -9342,8 +9342,9 @@ class AuroBibtemplate extends LitElement {
             <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
               <slot name="header"></slot>
             </${this.headerTag}>
-            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <span><slot name="ariaLabel.close">Close</slot></span>
+              <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
             </${this.buttonTag}>
           </div>
           <span class="subheader">
@@ -9535,6 +9536,7 @@ class AuroElement extends LitElement {
  * @element auro-counter-group
  * @extends LitElement
  * @slot default - Slot for counter elements.
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
  * @slot bib.fullscreen.footer -  Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.
  * @slot label - Dropdown label content. Only used when `isDropdown` is true.
@@ -10222,6 +10224,7 @@ class AuroCounterGroup extends AuroElement {
   renderBibTemplate() {
     return html$1`
       <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
+        <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
         ${this.renderCounterGroup(true)}
       </${this.bibtemplateTag}>
     `;

package/components/datepicker/README.md

@@ -84,6 +84,7 @@ This configuration enables proper module resolution for the component's TypeScri
 
 ```html
 <auro-datepicker required="">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>

package/components/datepicker/demo/api.md

@@ -75,6 +75,7 @@
 
 | Name                       | Description                                      |
 |----------------------------|--------------------------------------------------|
+| `ariaLabel.bib.close`      | Sets aria-label on close button in fullscreen bib |
 | `bib.fullscreen.dateLabel` | Defines the content to display above selected dates in the mobile layout. |
 | `bib.fullscreen.headline`  | Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout. |
 | `date_MM_DD_YYYY`          | Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot. |
@@ -104,6 +105,7 @@
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-datepicker required="">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -117,6 +119,7 @@
 
 ```html
 <auro-datepicker required="">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -133,6 +136,7 @@ When used, the datepicker will display two inputs and the component will support
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
   <auro-datepicker range minDate="07/08/2025">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
@@ -147,6 +151,7 @@ When used, the datepicker will display two inputs and the component will support
 
 ```html
 <auro-datepicker range minDate="07/08/2025">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
@@ -911,6 +916,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-datepicker required="">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -924,6 +930,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
 
 ```html
 <auro-datepicker required="">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -972,6 +979,7 @@ To view this demo, set your window to a mobile screen size.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-datepicker required="">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -985,6 +993,7 @@ To view this demo, set your window to a mobile screen size.
 
 ```html
 <auro-datepicker required="">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -1001,6 +1010,7 @@ Only for use with the `range` attribute. Sets the label for the second input.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
   <auro-datepicker range minDate="07/08/2025">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
@@ -1015,6 +1025,7 @@ Only for use with the `range` attribute. Sets the label for the second input.
 
 ```html
 <auro-datepicker range minDate="07/08/2025">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>

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

@@ -13073,8 +13073,9 @@ class AuroBibtemplate extends i {
             <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
               <slot name="header"></slot>
             </${this.headerTag}>
-            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <span><slot name="ariaLabel.close">Close</slot></span>
+              <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
             </${this.buttonTag}>
           </div>
           <span class="subheader">
@@ -14507,6 +14508,7 @@ class AuroCalendar extends RangeDatepicker {
       ?large="${this.largeFullscreenHeadline}"
       ?isFullscreen="${this.isFullscreen}"
       @close-click="${this.utilCal.requestDismiss}">
+      <span slot="ariaLabel.close">${this.slots["ariaLabel.bib.close"]}</span>
 
       <span slot="header">${this.slots["bib.fullscreen.headline"]}</span>
 
@@ -23865,6 +23867,9 @@ let AuroElement$2 = class AuroElement extends i {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -24292,8 +24297,7 @@ class BaseInput extends AuroElement$2 {
        * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
        */
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
 
       /**
@@ -27005,12 +27009,13 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           ?onDark="${this.onDark}"
-          aria-label="${i18n$1(this.lang, 'clearInput')}"
           class="notificationBtn clearBtn"
           shape="circle"
           size="sm"
           variant="ghost">
+          <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
+            aria-hidden="true"
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
@@ -27033,18 +27038,23 @@ class AuroInput extends BaseInput {
           @click="${this.handleClickShowPassword}"
           ?onDark="${this.onDark}"
           class="notificationBtn passwordBtn"
-          aria-label="${this.showPassword ? i18n$1(this.lang, "hidePassword") : i18n$1(this.lang, "showPassword")}"
           shape="circle"
           size="sm"
           variant="ghost">
+            <span>
+            ${this.showPassword ? u$3`<slot name="ariaLabel.password.hide">Hide Password</slot>`
+              : u$3`<slot name="ariaLabel.password.show">Show Password</slot>`}
+            </span>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${!this.showPassword}
             category="interface"
             name="hide-password-stroke">
           </${this.iconTag}>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${this.showPassword}
             category="interface"
             name="view-password-stroke">
@@ -28068,6 +28078,7 @@ var iconVersion = '8.0.1';
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot helpText - Defines the content of the helpText.
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
  * @slot bib.fullscreen.dateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
@@ -29646,6 +29657,7 @@ class AuroDatePicker extends AuroElement$1 {
         .monthNames="${this.monthNames}"
         part="calendar"
       >
+        <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>
         <slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
         <slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
         <span slot="bib.fullscreen.fromStr">${this.value || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>