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

package/components/combobox/dist/index.js

@@ -2812,12 +2812,6 @@ class AuroFloatingUI {
   }
 
   setupHideHandlers() {
-    this.preventFocusLoseOnBibClick = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
-
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
@@ -2867,11 +2861,6 @@ class AuroFloatingUI {
   cleanupHideHandlers() {
     // Remove event listeners if they exist
 
-    if (this.preventFocusLoseOnBibClick) {
-      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
-      delete this.preventFocusLoseOnBibClick;
-    }
-
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -4371,6 +4360,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.
@@ -10207,6 +10197,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 +10627,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 +13339,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 +13368,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 +15506,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 +15844,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 +16665,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 +16844,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 +16921,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 +16929,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/combobox/dist/registered.js

@@ -2812,12 +2812,6 @@ class AuroFloatingUI {
   }
 
   setupHideHandlers() {
-    this.preventFocusLoseOnBibClick = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
-
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
@@ -2867,11 +2861,6 @@ class AuroFloatingUI {
   cleanupHideHandlers() {
     // Remove event listeners if they exist
 
-    if (this.preventFocusLoseOnBibClick) {
-      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
-      delete this.preventFocusLoseOnBibClick;
-    }
-
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -4371,6 +4360,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.
@@ -10207,6 +10197,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 +10627,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 +13339,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 +13368,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 +15506,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 +15844,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 +16665,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 +16844,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 +16921,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 +16929,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

@@ -5034,12 +5034,6 @@ class AuroFloatingUI {
   }
 
   setupHideHandlers() {
-    this.preventFocusLoseOnBibClick = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
-
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
@@ -5089,11 +5083,6 @@ class AuroFloatingUI {
   cleanupHideHandlers() {
     // Remove event listeners if they exist
 
-    if (this.preventFocusLoseOnBibClick) {
-      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
-      delete this.preventFocusLoseOnBibClick;
-    }
-
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -6593,6 +6582,7 @@ let AuroElement$3 = class AuroElement extends i$2 {
  * @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.
@@ -9389,8 +9379,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 +9573,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 +10261,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

@@ -5034,12 +5034,6 @@ class AuroFloatingUI {
   }
 
   setupHideHandlers() {
-    this.preventFocusLoseOnBibClick = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
-
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
@@ -5089,11 +5083,6 @@ class AuroFloatingUI {
   cleanupHideHandlers() {
     // Remove event listeners if they exist
 
-    if (this.preventFocusLoseOnBibClick) {
-      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
-      delete this.preventFocusLoseOnBibClick;
-    }
-
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -6593,6 +6582,7 @@ let AuroElement$3 = class AuroElement extends i$2 {
  * @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.
@@ -9389,8 +9379,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 +9573,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 +10261,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

@@ -4987,12 +4987,6 @@ class AuroFloatingUI {
   }
 
   setupHideHandlers() {
-    this.preventFocusLoseOnBibClick = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
-
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
@@ -5042,11 +5036,6 @@ class AuroFloatingUI {
   cleanupHideHandlers() {
     // Remove event listeners if they exist
 
-    if (this.preventFocusLoseOnBibClick) {
-      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
-      delete this.preventFocusLoseOnBibClick;
-    }
-
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -6546,6 +6535,7 @@ let AuroElement$3 = 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.
@@ -9342,8 +9332,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 +9526,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 +10214,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}>
     `;