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

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>

package/components/datepicker/demo/index.md

@@ -24,6 +24,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark.html -->
   <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="label">Date</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
@@ -35,6 +36,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark.html -->
   <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="label">Date</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
@@ -49,6 +51,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
 
 ```html
 <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="label">Date</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
@@ -63,6 +66,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark-range.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
   <auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="label">Dates</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
@@ -74,6 +78,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark-range.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
   <auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="label">Dates</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
@@ -88,6 +93,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
 
 ```html
 <auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="label">Dates</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
@@ -103,6 +109,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- 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>
@@ -113,6 +120,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
   <auro-datepicker onDark>
+    <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>
@@ -126,6 +134,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
 
 ```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>
@@ -135,6 +144,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
 <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
 <auro-datepicker onDark>
+  <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>
@@ -148,6 +158,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- 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>
@@ -173,6 +184,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
 
 ```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/index.min.js

@@ -12814,8 +12814,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">
@@ -14248,6 +14249,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>
 
@@ -23606,6 +23608,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.
@@ -24033,8 +24038,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
       },
 
       /**
@@ -26746,12 +26750,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"
@@ -26774,18 +26779,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">
@@ -27809,6 +27819,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.
@@ -29387,6 +29398,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>

package/components/datepicker/demo/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>