@aurodesignsystem-dev/auro-formkit 0.0.0-pr835.0 → 0.0.0-pr841.0

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

@@ -2957,12 +2957,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();
 
@@ -3012,11 +3006,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;
@@ -4516,6 +4505,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.
@@ -7312,8 +7302,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">
@@ -7553,6 +7544,7 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
  *
  * @slot - Default slot for the menu content.
+ * @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 {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -7562,6 +7554,10 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
  * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
+ *
+ * @csspart dropdownTrigger - Apply CSS to the trigger content container.
+ * @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
+ * @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - Apply CSS to the help text.
  */
 
@@ -8738,6 +8734,7 @@ class AuroSelect extends AuroElement$4 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">
@@ -8815,6 +8812,7 @@ class AuroSelect extends AuroElement$4 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">
@@ -8898,6 +8896,7 @@ class AuroSelect extends AuroElement$4 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">

package/components/select/demo/readme.md

@@ -84,6 +84,7 @@ This configuration enables proper module resolution for the component's TypeScri
 
 ```html
 <auro-select>
+  <span slot="ariaLabel.bib.close">Close Popup</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Select Example</span>
   <auro-menu>

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

@@ -2,6 +2,7 @@
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
  *
  * @slot - Default slot for the menu content.
+ * @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 {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -11,6 +12,10 @@
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
  * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
+ *
+ * @csspart dropdownTrigger - Apply CSS to the trigger content container.
+ * @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
+ * @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - Apply CSS to the help text.
  */
 export class AuroSelect extends AuroElement {

package/components/select/dist/index.js

@@ -2911,12 +2911,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();
 
@@ -2966,11 +2960,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;
@@ -4470,6 +4459,7 @@ let AuroElement$2 = 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.
@@ -7266,8 +7256,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">
@@ -7507,6 +7498,7 @@ var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{d
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
  *
  * @slot - Default slot for the menu content.
+ * @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 {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -7516,6 +7508,10 @@ var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{d
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
  * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
+ *
+ * @csspart dropdownTrigger - Apply CSS to the trigger content container.
+ * @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
+ * @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - Apply CSS to the help text.
  */
 
@@ -8692,6 +8688,7 @@ class AuroSelect extends AuroElement$3 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">
@@ -8769,6 +8766,7 @@ class AuroSelect extends AuroElement$3 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">
@@ -8852,6 +8850,7 @@ class AuroSelect extends AuroElement$3 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">

package/components/select/dist/registered.js

@@ -2911,12 +2911,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();
 
@@ -2966,11 +2960,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;
@@ -4470,6 +4459,7 @@ let AuroElement$2 = 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.
@@ -7266,8 +7256,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">
@@ -7507,6 +7498,7 @@ var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{d
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
  *
  * @slot - Default slot for the menu content.
+ * @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 {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -7516,6 +7508,10 @@ var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{d
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
  * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
+ *
+ * @csspart dropdownTrigger - Apply CSS to the trigger content container.
+ * @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
+ * @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - Apply CSS to the help text.
  */
 
@@ -8692,6 +8688,7 @@ class AuroSelect extends AuroElement$3 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">
@@ -8769,6 +8766,7 @@ class AuroSelect extends AuroElement$3 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">
@@ -8852,6 +8850,7 @@ class AuroSelect extends AuroElement$3 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+            <slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr835.0",
+  "version": "0.0.0-pr841.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -53,7 +53,7 @@
     "local-demo": "npm run build && sh ./local-demo.sh --zip"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-library": "^5.3.1",
+    "@aurodesignsystem/auro-library": "^5.3.2",
     "@lit/reactive-element": "^2.1.1",
     "lit": "^3.2.1"
   },