@aurodesignsystem/auro-formkit 5.6.0 → 5.8.0

package/components/counter/demo/api.html

@@ -54,8 +54,8 @@
       initExamples();
     </script>
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
   </body>
 </html>

package/components/counter/demo/api.md

@@ -5,15 +5,16 @@
 
 ## Properties
 
-| Property   | Attribute  | Type      | Default     | Description                                      |
-|------------|------------|-----------|-------------|--------------------------------------------------|
-| [disabled](#disabled) | `disabled` | `boolean` | false       | Indicates if the counter is disabled.            |
-| [error](#error)    | `error`    | `string`  |             | Error state and message.<br />True if set, value is the error message. |
-| [max](#max)      | `max`      | `number`  | 9           | The maximum value for the counter.               |
-| [min](#min)      | `min`      | `number`  | 0           | The minimum value for the counter.               |
-| [onDark](#onDark)   | `onDark`   | `boolean` | false       | If declared, the counter will be rendered with onDark styles. |
-| [validity](#validity) | `validity` | `string`  | "undefined" | The validity state of the counter.               |
-| [value](#value)    | `value`    | `number`  | "undefined" | The current value of the counter.                |
+| Property     | Attribute    | Type      | Default     | Description                                      |
+|--------------|--------------|-----------|-------------|--------------------------------------------------|
+| [appearance](#appearance) | `appearance` | `string`  | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| [disabled](#disabled)   | `disabled`   | `boolean` | false       | Indicates if the counter is disabled.            |
+| [error](#error)      | `error`      | `string`  |             | Error state and message.<br />True if set, value is the error message. |
+| [max](#max)        | `max`        | `number`  | 9           | The maximum value for the counter.               |
+| [min](#min)        | `min`        | `number`  | 0           | The minimum value for the counter.               |
+| [onDark](#onDark)     | `onDark`     | `boolean` | false       | DEPRECATED - use `appearance` instead.           |
+| [validity](#validity)   | `validity`   | `string`  | "undefined" | The validity state of the counter.               |
+| [value](#value)      | `value`      | `number`  | "undefined" | The current value of the counter.                |
 
 ## Methods
 
@@ -31,10 +32,13 @@
 
 ## Slots
 
-| Name          | Description                          |
-|---------------|--------------------------------------|
-| [default](#default)     | Main label content for the counter.  |
-| [description](#description) | Descriptive content for the counter. |
+| Name              | Description                                |
+|-------------------|--------------------------------------------|
+|                   | Main label content for the counter.        |
+| `ariaLabel.minus` | Accessible label for the decrement button. |
+| `ariaLabel.plus`  | Accessible label for the increment button. |
+| [description](#description)     | Descriptive content for the counter.       |
+| [helpText](#helpText)        | Help text content for the counter.         |
 
 # auro-counter-group
 
@@ -42,6 +46,7 @@
 
 | Property                  | Attribute                 | Type                     | Default        | Description                                      |
 |---------------------------|---------------------------|--------------------------|----------------|--------------------------------------------------|
+| [appearance](#appearance)              | `appearance`              | `string`                 | "'default'"    | Defines whether the component will be on lighter or darker backgrounds. |
 | [autoPlacement](#autoPlacement)           | `autoPlacement`           | `boolean`                | "false"        | If declared, bib's position will be automatically calculated where to appear. |
 | [error](#error)                   | `error`                   | `string`                 |                | The current error message to display when the component is invalid. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `string`                 | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
@@ -53,7 +58,7 @@
 | [min](#min)                     | `min`                     | `number`                 | "undefined"    | The minimum value allowed for the whole group of counters. |
 | [noFlip](#noFlip)                  | `noFlip`                  | `boolean`                | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
 | [offset](#offset)                  | `offset`                  | `number`                 | "0"            | Gap between the trigger element and bib.         |
-| [onDark](#onDark)                  | `onDark`                  | `boolean`                | false          | If declared, counters and dropdown will be rendered with onDark styles. |
+| [onDark](#onDark)                  | `onDark`                  | `boolean`                | false          | DEPRECATED - use `appearance` instead.           |
 | [placement](#placement)               | `placement`               | `string`                 | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end". |
 | [shift](#shift)                   | `shift`                   | `boolean`                | "false"        | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
 | [total](#total)                   | `total`                   | `number`                 | "undefined"    | The total value of the counters.                 |
@@ -127,9 +132,9 @@
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
-  <auro-counter onDark disabled value="0">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+  <auro-counter appearance="inverse" disabled value="0">
     Disabled counter
     <span slot="description">This counter cannot be modified</span>
   </auro-counter>
@@ -147,9 +152,9 @@
 </auro-counter>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
-<!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
-<auro-counter onDark disabled value="0">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+<auro-counter appearance="inverse" disabled value="0">
   Disabled counter
   <span slot="description">This counter cannot be modified</span>
 </auro-counter>
@@ -218,6 +223,8 @@ All available slots for both components:
     <!-- Counter with all slots -->
     <auro-counter>
       Default slot content
+      <span slot="ariaLabel.minus">Custom Minus Button Label</span>
+      <span slot="ariaLabel.plus">Custom Plus Button Label</span>
       <span slot="description">Description slot content</span>
     </auro-counter>
   </auro-counter-group>
@@ -239,6 +246,8 @@ All available slots for both components:
   <!-- Counter with all slots -->
   <auro-counter>
     Default slot content
+    <span slot="ariaLabel.minus">Custom Minus Button Label</span>
+    <span slot="ariaLabel.plus">Custom Plus Button Label</span>
     <span slot="description">Description slot content</span>
   </auro-counter>
 </auro-counter-group>
@@ -361,9 +370,9 @@ A custom error can be set on the counter by adding the `error` attribute the des
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
-  <auro-counter ondark error="There is an error with the counter">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance-counter-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance-counter-error.html -->
+  <auro-counter appearance="inverse" error="There is an error with the counter">
     Adults
   </auro-counter>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -379,9 +388,9 @@ A custom error can be set on the counter by adding the `error` attribute the des
 </auro-counter>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
-<!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
-<auro-counter ondark error="There is an error with the counter">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance-counter-error.html) -->
+<!-- The below content is automatically added from ./../apiExamples/inverseAppearance-counter-error.html -->
+<auro-counter appearance="inverse" error="There is an error with the counter">
   Adults
 </auro-counter>
 <!-- AURO-GENERATED-CONTENT:END -->