@aurodesignsystem/auro-formkit 5.6.0 → 5.8.0

package/components/radio/demo/api.html

@@ -53,7 +53,7 @@
     </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-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
   </body>
 </html>

package/components/radio/demo/api.md

@@ -7,11 +7,12 @@
 
 | 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       |                                                  |
 | [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [horizontal](#horizontal)                    | `horizontal`                    | `boolean` | false       |                                                  |
 | [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
-| [onDark](#onDark)                        | `onDark`                        | `Boolean` | false       | Applies dark mode styles to the component.       |
+| [onDark](#onDark)                        | `onDark`                        | `Boolean` | false       | DEPRECATED - use `appearance` instead.           |
 | [optionSelected](#optionSelected)                | `optionSelected`                | `Object`  | "undefined" | Specifies the current selected radio button.     |
 | [required](#required)                      | `required`                      | `Boolean` | false       | Populates the `required` attribute on the element. Used for client-side validation. |
 | [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `String`  |             | Sets a custom help text message to display for all validityStates. |
@@ -52,17 +53,18 @@
 
 ## Properties
 
-| Property   | Attribute  | Type      | Default | Description                                      |
-|------------|------------|-----------|---------|--------------------------------------------------|
-| [checked](#checked)  | `checked`  | `Boolean` | false   | If set to true, the radio button will be filled. |
-| [disabled](#disabled) | `disabled` | `Boolean` | false   | If set to true, the radio button will be non-clickable. |
-| [error](#error)    | `error`    | `Boolean` | false   | If set to true, sets an error state on the radio button. |
-| [id](#id)       | `id`       | `string`  |         | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
-| [label](#label)    | `label`    | `string`  |         |                                                  |
-| [name](#name)     | `name`     | `string`  |         |                                                  |
-| [onDark](#onDark)   | `onDark`   | `Boolean` | false   | If set to true, the component will render with a dark theme. |
-| [required](#required) | `required` | `Boolean` | false   | Defines element as required.                     |
-| [value](#value)    | `value`    | `string`  |         |                                                  |
+| Property     | Attribute    | Type      | Default     | Description                                      |
+|--------------|--------------|-----------|-------------|--------------------------------------------------|
+| [appearance](#appearance) | `appearance` | `string`  | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| [checked](#checked)    | `checked`    | `Boolean` | false       | If set to true, the radio button will be filled. |
+| [disabled](#disabled)   | `disabled`   | `Boolean` | false       | If set to true, the radio button will be non-clickable. |
+| [error](#error)      | `error`      | `Boolean` | false       | If set to true, sets an error state on the radio button. |
+| [id](#id)         | `id`         | `string`  |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
+| [label](#label)      | `label`      | `string`  |             |                                                  |
+| [name](#name)       | `name`       | `string`  |             |                                                  |
+| [onDark](#onDark)     | `onDark`     | `Boolean` | false       | DEPRECATED - use `appearance` instead.           |
+| [required](#required)   | `required`   | `Boolean` | false       | Defines element as required.                     |
+| [value](#value)      | `value`      | `string`  |             |                                                  |
 
 ## Methods
 
@@ -104,9 +106,9 @@ The following example illustrates the default use of the `<auro-radio>` custom e
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
-  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" onDark></auro-radio>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
+  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -119,9 +121,9 @@ The following example illustrates the default use of the `<auro-radio>` custom e
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
-  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" onDark></auro-radio>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
+  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 </auro-accordion>
@@ -142,9 +144,9 @@ This is a default configuration using the `<auro-radio-group>` and `<auro-radio>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
-  <auro-radio-group onDark>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceGroup.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceGroup.html -->
+  <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
@@ -165,9 +167,9 @@ This is a default configuration using the `<auro-radio-group>` and `<auro-radio>
   </auro-radio-group>
   ```
   <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
-  <auro-radio-group onDark>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceGroup.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceGroup.html -->
+  <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
@@ -192,9 +194,9 @@ Use the `checked` attribute to pre-select a `<auro-radio>` element.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkChecked.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkChecked.html -->
-  <auro-radio-group onDark>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceChecked.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceChecked.html -->
+  <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
     <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
@@ -215,9 +217,9 @@ Use the `checked` attribute to pre-select a `<auro-radio>` element.
   </auro-radio-group>
   ```
   <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkChecked.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkChecked.html -->
-  <auro-radio-group onDark>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceChecked.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceChecked.html -->
+  <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
     <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
@@ -248,15 +250,15 @@ Use the `disabled` attribute to disable singular `<auro-radio>` elements or the
   <!-- 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-radio-group onDark>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+  <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
     <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
   </auro-radio-group>
-  <auro-radio-group onDark disabled>
+  <auro-radio-group appearance="inverse" disabled>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
@@ -283,15 +285,15 @@ Use the `disabled` attribute to disable singular `<auro-radio>` elements or the
   </auro-radio-group>
   ```
   <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
-  <auro-radio-group onDark>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+  <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
     <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
   </auro-radio-group>
-  <auro-radio-group onDark disabled>
+  <auro-radio-group appearance="inverse" disabled>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
@@ -318,9 +320,9 @@ A custom error message can be set using the `error` attribute, or it can be used
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
-  <auro-radio-group onDark error="There is an error with this form entry">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceError.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceError.html -->
+  <auro-radio-group appearance="inverse" error="There is an error with this form entry">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
@@ -341,9 +343,9 @@ A custom error message can be set using the `error` attribute, or it can be used
   </auro-radio-group>
   ```
   <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
-  <auro-radio-group onDark error="There is an error with this form entry">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceError.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceError.html -->
+  <auro-radio-group appearance="inverse" error="There is an error with this form entry">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>