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

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

@@ -7404,8 +7404,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">
@@ -7645,6 +7646,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.
@@ -8830,6 +8832,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">
@@ -8907,6 +8910,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">
@@ -8990,6 +8994,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/index.md

@@ -21,6 +21,7 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.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>
@@ -58,6 +59,7 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
 
 ```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>
@@ -102,6 +104,7 @@ The `classic` layout is default for `auro-select`. No customization is needed to
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.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>
@@ -122,6 +125,7 @@ The `classic` layout is default for `auro-select`. No customization is needed to
 
 ```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>
@@ -154,6 +158,7 @@ The `emphasized` layout supports the following sizes:
   <!-- The below content is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
   <div>
     <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
+      <span slot="ariaLabel.bib.close">Close Popup</span>
       <span slot="label">Label</span>
       <span slot="helpText">Help Text</span>
       <auro-menu nocheckmark>
@@ -229,6 +234,7 @@ The `emphasized` layout supports the following sizes:
 ```html
 <div>
   <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <span slot="label">Label</span>
     <span slot="helpText">Help Text</span>
     <auro-menu nocheckmark>
@@ -306,6 +312,7 @@ The `snowflake` layout is a unique, one off layout that does not follow the norm
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic-ondark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/basic-ondark.html -->
   <auro-select layout="snowflake" shape="snowflake" ondark required style="width:300px;">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
     <span slot="label">Label</span>
     <span slot="helpText">Help Text</span>
     <auro-menu nocheckmark>
@@ -335,6 +342,7 @@ The `snowflake` layout is a unique, one off layout that does not follow the norm
 
 ```html
 <auro-select layout="snowflake" shape="snowflake" ondark required style="width:300px;">
+  <span slot="ariaLabel.bib.close">Close Popup</span>
   <span slot="label">Label</span>
   <span slot="helpText">Help Text</span>
   <auro-menu nocheckmark>

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

@@ -7312,8 +7312,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 +7554,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.
@@ -8738,6 +8740,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 +8818,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 +8902,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.

package/components/select/dist/index.js

@@ -7266,8 +7266,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 +7508,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.
@@ -8692,6 +8694,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 +8772,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 +8856,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

@@ -7266,8 +7266,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 +7508,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.
@@ -8692,6 +8694,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 +8772,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 +8856,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-pr624.98",
+  "version": "0.0.0-pr624.99",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {