@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.3 → 0.0.0-pr788.0

package/components/counter/demo/api.md

@@ -63,6 +63,8 @@
 
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
+| [hideBib](#hideBib)  | `(): void`                             | Hides the dropdown bib if its open.              |
+| [showBib](#showBib)  | `(): void`                             | Shows the dropdown bib if there are options to show. |
 | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
@@ -75,6 +77,7 @@
 
 | Name                      | Description                                      |
 |---------------------------|--------------------------------------------------|
+| `ariaLabel.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.                       |
@@ -294,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.close">Close Popup</span>
       <span slot="bib.fullscreen.headline">Passengers</span>
       <div slot="valueText">Custom value text</div>
       <div slot="label"></div>
@@ -321,6 +325,7 @@ counter.addEventListener('input', (event) => {
 ```html
 <div style="max-width: 350px;">
   <auro-counter-group isDropdown>
+    <span slot="ariaLabel.close">Close Popup</span>
     <span slot="bib.fullscreen.headline">Passengers</span>
     <div slot="valueText">Custom value text</div>
     <div slot="label"></div>
@@ -389,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.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">
@@ -409,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.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">
@@ -432,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.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">
@@ -452,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.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">
@@ -662,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.close">Close Popup</span>
       <span slot="label">Passengers</span>
       <span slot="bib.fullscreen.headline">Passengers</span>
       <div slot="helpText">This is help text</div>
@@ -693,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.close">Close Popup</span>
     <span slot="label">Passengers</span>
     <span slot="bib.fullscreen.headline">Passengers</span>
     <div slot="helpText">This is help text</div>