@aurodesignsystem-dev/auro-formkit 0.0.0-pr832.0 → 0.0.0-pr832.2

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

@@ -11165,7 +11165,7 @@ class CalendarUtilities {
 
 var colorCss$3$2 = i$2`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4$1 = i$2`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4$1 = i$2`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = i$2`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -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>
 
@@ -18005,6 +18007,7 @@ let AuroElement$4 = class AuroElement extends i {
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
@@ -23854,6 +23857,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.
@@ -24281,8 +24287,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
       },
 
       /**
@@ -26790,7 +26795,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
-   * @returns {void}
+   * @returns {Record<string, boolean>}
    */
   get commonLabelClasses() {
     return {
@@ -26804,7 +26809,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {object} - Returns classmap.
+   * @returns {Record<string, boolean>} - Returns classmap.
    */
   get commonInputClasses() {
     return {
@@ -26994,12 +26999,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"
@@ -27022,18 +27028,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">
@@ -28057,6 +28068,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.
@@ -29635,6 +29647,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

@@ -10906,7 +10906,7 @@ class CalendarUtilities {
 
 var colorCss$3$2 = i$2`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4$1 = i$2`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4$1 = i$2`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = i$2`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -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>
 
@@ -17746,6 +17748,7 @@ let AuroElement$4 = class AuroElement extends i {
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
@@ -23595,6 +23598,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.
@@ -24022,8 +24028,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
       },
 
       /**
@@ -26531,7 +26536,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
-   * @returns {void}
+   * @returns {Record<string, boolean>}
    */
   get commonLabelClasses() {
     return {
@@ -26545,7 +26550,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {object} - Returns classmap.
+   * @returns {Record<string, boolean>} - Returns classmap.
    */
   get commonInputClasses() {
     return {
@@ -26735,12 +26740,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"
@@ -26763,18 +26769,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">
@@ -27798,6 +27809,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.
@@ -29376,6 +29388,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>

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -1,5 +1,6 @@
 /**
  * @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.

package/components/datepicker/dist/index.js

@@ -10855,7 +10855,7 @@ class CalendarUtilities {
 
 var colorCss$3$2 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -12763,8 +12763,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">
@@ -14197,6 +14198,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>
 
@@ -17695,6 +17697,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
@@ -23531,6 +23534,9 @@ let AuroElement$2 = 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.
@@ -23958,8 +23964,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
       },
 
       /**
@@ -26467,7 +26472,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
-   * @returns {void}
+   * @returns {Record<string, boolean>}
    */
   get commonLabelClasses() {
     return {
@@ -26481,7 +26486,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {object} - Returns classmap.
+   * @returns {Record<string, boolean>} - Returns classmap.
    */
   get commonInputClasses() {
     return {
@@ -26671,12 +26676,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"
@@ -26699,18 +26705,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 ? html$1`<slot name="ariaLabel.password.hide">Hide Password</slot>`
+              : html$1`<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">
@@ -27734,6 +27745,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.
@@ -29312,6 +29324,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 || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>

package/components/datepicker/dist/registered.js

@@ -10855,7 +10855,7 @@ class CalendarUtilities {
 
 var colorCss$3$2 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -12763,8 +12763,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">
@@ -14197,6 +14198,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>
 
@@ -17695,6 +17697,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
@@ -23531,6 +23534,9 @@ let AuroElement$2 = 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.
@@ -23958,8 +23964,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
       },
 
       /**
@@ -26467,7 +26472,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
-   * @returns {void}
+   * @returns {Record<string, boolean>}
    */
   get commonLabelClasses() {
     return {
@@ -26481,7 +26486,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {object} - Returns classmap.
+   * @returns {Record<string, boolean>} - Returns classmap.
    */
   get commonInputClasses() {
     return {
@@ -26671,12 +26676,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"
@@ -26699,18 +26705,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 ? html$1`<slot name="ariaLabel.password.hide">Hide Password</slot>`
+              : html$1`<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">
@@ -27734,6 +27745,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.
@@ -29312,6 +29324,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 || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>